feat(smart-app): implement complete mobile app MVP

- App.tsx: full navigation (Auth stack + Main tabs with 5 screens)
- Auth: LoginScreen, RegisterScreen, ForgotPasswordScreen
- HomeScreen: dashboard with IoT metrics, weather widget, alerts, quick actions, sensors
- MapScreen: interactive map with layer toggles (6 layers)
- MarketplaceScreen: categories (6), products (5), search
- ChatScreen: AI chat with quick prompts (4), bot responses
- ProfileScreen: user info, stats, menu (9 items), logout
- AlertsScreen: alert list with severity, acknowledge
- SensorsScreen: sensor list with type filters (6 types), search
- ZonesScreen: zone cards with stats
- SettingsScreen: language picker (FR/EN/ES/DE), privacy, about
- Stores: iotStore (sensors, zones, alerts), notificationStore, uiStore + i18n
- Hooks: useSensors, useAlerts, useNotifications, useLocation
- Components: Card, Button, LoadingSpinner, ErrorBoundary, Header
- Services: iotService, notificationService (with axios API client)
- Utils: formatters (temp, AQI, noise, dates), validators (email, password, IBAN)
- Theme: colors.ts with full design system (Blue Ocean palette)
- Ditto: fixed MongoDB connection, new JWT secrets, official gateway image
This commit is contained in:
Eric FELIXINE
2026-06-01 18:00:35 -04:00
parent 08ca495bde
commit e30ae8ed09
35578 changed files with 3703534 additions and 43 deletions

View File

@@ -0,0 +1,127 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import DataTableCell from './DataTableCell';
import DataTableHeader
// eslint-disable-next-line @typescript-eslint/no-unused-vars
from './DataTableHeader';
import DataTablePagination
// eslint-disable-next-line @typescript-eslint/no-unused-vars
from './DataTablePagination';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import DataTableRow from './DataTableRow';
import DataTableTitle
// eslint-disable-next-line @typescript-eslint/no-unused-vars
from './DataTableTitle';
/**
* Data tables allow displaying sets of data.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => {
* const [page, setPage] = React.useState<number>(0);
* const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);
* const [itemsPerPage, onItemsPerPageChange] = React.useState(
* numberOfItemsPerPageList[0]
* );
*
* const [items] = React.useState([
* {
* key: 1,
* name: 'Cupcake',
* calories: 356,
* fat: 16,
* },
* {
* key: 2,
* name: 'Eclair',
* calories: 262,
* fat: 16,
* },
* {
* key: 3,
* name: 'Frozen yogurt',
* calories: 159,
* fat: 6,
* },
* {
* key: 4,
* name: 'Gingerbread',
* calories: 305,
* fat: 3.7,
* },
* ]);
*
* const from = page * itemsPerPage;
* const to = Math.min((page + 1) * itemsPerPage, items.length);
*
* React.useEffect(() => {
* setPage(0);
* }, [itemsPerPage]);
*
* return (
* <DataTable>
* <DataTable.Header>
* <DataTable.Title>Dessert</DataTable.Title>
* <DataTable.Title numeric>Calories</DataTable.Title>
* <DataTable.Title numeric>Fat</DataTable.Title>
* </DataTable.Header>
*
* {items.slice(from, to).map((item) => (
* <DataTable.Row key={item.key}>
* <DataTable.Cell>{item.name}</DataTable.Cell>
* <DataTable.Cell numeric>{item.calories}</DataTable.Cell>
* <DataTable.Cell numeric>{item.fat}</DataTable.Cell>
* </DataTable.Row>
* ))}
*
* <DataTable.Pagination
* page={page}
* numberOfPages={Math.ceil(items.length / itemsPerPage)}
* onPageChange={(page) => setPage(page)}
* label={`${from + 1}-${to} of ${items.length}`}
* numberOfItemsPerPageList={numberOfItemsPerPageList}
* numberOfItemsPerPage={itemsPerPage}
* onItemsPerPageChange={onItemsPerPageChange}
* showFastPaginationControls
* selectPageDropdownLabel={'Rows per page'}
* />
* </DataTable>
* );
* };
*
* export default MyComponent;
* ```
*/
const DataTable = ({
children,
style,
...rest
}) => /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: [styles.container, style]
}), children);
// @component ./DataTableHeader.tsx
DataTable.Header = DataTableHeader;
// @component ./DataTableTitle.tsx
DataTable.Title = DataTableTitle;
// @component ./DataTableRow.tsx
DataTable.Row = DataTableRow;
// @component ./DataTableCell.tsx
DataTable.Cell = DataTableCell;
// @component ./DataTablePagination.tsx
DataTable.Pagination = DataTablePagination;
const styles = StyleSheet.create({
container: {
width: '100%'
}
});
export default DataTable;
//# sourceMappingURL=DataTable.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","DataTableCell","DataTableHeader","DataTablePagination","DataTableRow","DataTableTitle","DataTable","children","style","rest","createElement","_extends","styles","container","Header","Title","Row","Cell","Pagination","create","width"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTable.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,UAAU,EAAaC,IAAI,QAAmB,cAAc;AAErE,OAAOC,aAAa,MAAM,iBAAiB;AAC3C,OAAOC;AACL;AAAA,KAEK,mBAAmB;AAC1B,OAAOC;AACL;AAAA,KAEK,uBAAuB;AAC9B;AACA,OAAOC,YAAY,MAAyC,gBAAgB;AAC5E,OAAOC;AACL;AAAA,KAEK,kBAAkB;AAUzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,SAAS,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,KAAK;EAAE,GAAGC;AAAY,CAAC,kBACpDX,KAAA,CAAAY,aAAA,CAACV,IAAI,EAAAW,QAAA,KAAKF,IAAI;EAAED,KAAK,EAAE,CAACI,MAAM,CAACC,SAAS,EAAEL,KAAK;AAAE,IAC9CD,QACG,CACP;;AAED;AACAD,SAAS,CAACQ,MAAM,GAAGZ,eAAe;;AAElC;AACAI,SAAS,CAACS,KAAK,GAAGV,cAAc;;AAEhC;AACAC,SAAS,CAACU,GAAG,GAAGZ,YAAY;;AAE5B;AACAE,SAAS,CAACW,IAAI,GAAGhB,aAAa;;AAE9B;AACAK,SAAS,CAACY,UAAU,GAAGf,mBAAmB;AAE1C,MAAMS,MAAM,GAAGb,UAAU,CAACoB,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,KAAK,EAAE;EACT;AACF,CAAC,CAAC;AAEF,eAAed,SAAS","ignoreList":[]}

View File

@@ -0,0 +1,77 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet } from 'react-native';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
import Text from '../Typography/Text';
/**
* A component to show a single cell inside of a table.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => (
* <DataTable.Row>
* <DataTable.Cell numeric>1</DataTable.Cell>
* <DataTable.Cell numeric>2</DataTable.Cell>
* <DataTable.Cell numeric>3</DataTable.Cell>
* <DataTable.Cell numeric>4</DataTable.Cell>
* </DataTable.Row>
* );
*
* export default MyComponent;
* ```
*
* If you want to support multiline text, please use View instead, as multiline text doesn't comply with
* MD Guidelines (https://github.com/callstack/react-native-paper/issues/2381).
*
* @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
*/
const DataTableCell = ({
children,
textStyle,
style,
numeric,
maxFontSizeMultiplier,
testID,
...rest
}) => {
return /*#__PURE__*/React.createElement(TouchableRipple, _extends({}, rest, {
testID: testID,
style: [styles.container, numeric && styles.right, style]
}), /*#__PURE__*/React.createElement(CellContent, {
textStyle: textStyle,
testID: testID,
maxFontSizeMultiplier: maxFontSizeMultiplier
}, children));
};
const CellContent = ({
children,
textStyle,
maxFontSizeMultiplier,
testID
}) => {
if (/*#__PURE__*/React.isValidElement(children)) {
return children;
}
return /*#__PURE__*/React.createElement(Text, {
style: textStyle,
numberOfLines: 1,
maxFontSizeMultiplier: maxFontSizeMultiplier,
testID: `${testID}-text-container`
}, children);
};
DataTableCell.displayName = 'DataTable.Cell';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignItems: 'center'
},
right: {
justifyContent: 'flex-end'
}
});
export default DataTableCell;
//# sourceMappingURL=DataTableCell.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","TouchableRipple","Text","DataTableCell","children","textStyle","style","numeric","maxFontSizeMultiplier","testID","rest","createElement","_extends","styles","container","right","CellContent","isValidElement","numberOfLines","displayName","create","flex","flexDirection","alignItems","justifyContent"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTableCell.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SACEC,UAAU,QAKL,cAAc;AAGrB,OAAOC,eAAe,MAAM,oCAAoC;AAChE,OAAOC,IAAI,MAAM,oBAAoB;AA8BrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,aAAa,GAAGA,CAAC;EACrBC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,OAAO;EACPC,qBAAqB;EACrBC,MAAM;EACN,GAAGC;AACE,CAAC,KAAK;EACX,oBACEX,KAAA,CAAAY,aAAA,CAACV,eAAe,EAAAW,QAAA,KACVF,IAAI;IACRD,MAAM,EAAEA,MAAO;IACfH,KAAK,EAAE,CAACO,MAAM,CAACC,SAAS,EAAEP,OAAO,IAAIM,MAAM,CAACE,KAAK,EAAET,KAAK;EAAE,iBAE1DP,KAAA,CAAAY,aAAA,CAACK,WAAW;IACVX,SAAS,EAAEA,SAAU;IACrBI,MAAM,EAAEA,MAAO;IACfD,qBAAqB,EAAEA;EAAsB,GAE5CJ,QACU,CACE,CAAC;AAEtB,CAAC;AAED,MAAMY,WAAW,GAAGA,CAAC;EACnBZ,QAAQ;EACRC,SAAS;EACTG,qBAAqB;EACrBC;AAIF,CAAC,KAAK;EACJ,iBAAIV,KAAK,CAACkB,cAAc,CAACb,QAAQ,CAAC,EAAE;IAClC,OAAOA,QAAQ;EACjB;EAEA,oBACEL,KAAA,CAAAY,aAAA,CAACT,IAAI;IACHI,KAAK,EAAED,SAAU;IACjBa,aAAa,EAAE,CAAE;IACjBV,qBAAqB,EAAEA,qBAAsB;IAC7CC,MAAM,EAAE,GAAGA,MAAM;EAAkB,GAElCL,QACG,CAAC;AAEX,CAAC;AAEDD,aAAa,CAACgB,WAAW,GAAG,gBAAgB;AAE5C,MAAMN,MAAM,GAAGb,UAAU,CAACoB,MAAM,CAAC;EAC/BN,SAAS,EAAE;IACTO,IAAI,EAAE,CAAC;IACPC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd,CAAC;EAEDR,KAAK,EAAE;IACLS,cAAc,EAAE;EAClB;AACF,CAAC,CAAC;AAEF,eAAerB,aAAa","ignoreList":[]}

View File

@@ -0,0 +1,59 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import color from 'color';
import { useInternalTheme } from '../../core/theming';
import { black, white } from '../../styles/themes/v2/colors';
/**
* A component to display title in table header.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => (
* <DataTable>
* <DataTable.Header>
* <DataTable.Title
* sortDirection='descending'
* >
* Dessert
* </DataTable.Title>
* <DataTable.Title numeric>Calories</DataTable.Title>
* <DataTable.Title numeric>Fat (g)</DataTable.Title>
* </DataTable.Header>
* </DataTable>
* );
*
* export default MyComponent;
* ```
*/
const DataTableHeader = ({
children,
style,
theme: themeOverrides,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const borderBottomColor = theme.isV3 ? theme.colors.surfaceVariant : color(theme.dark ? white : black).alpha(0.12).rgb().string();
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: [styles.header, {
borderBottomColor
}, style]
}), children);
};
DataTableHeader.displayName = 'DataTable.Header';
const styles = StyleSheet.create({
header: {
flexDirection: 'row',
paddingHorizontal: 16,
borderBottomWidth: StyleSheet.hairlineWidth * 2
}
});
export default DataTableHeader;
// @component-docs ignore-next-line
export { DataTableHeader };
//# sourceMappingURL=DataTableHeader.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","color","useInternalTheme","black","white","DataTableHeader","children","style","theme","themeOverrides","rest","borderBottomColor","isV3","colors","surfaceVariant","dark","alpha","rgb","string","createElement","_extends","styles","header","displayName","create","flexDirection","paddingHorizontal","borderBottomWidth","hairlineWidth"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTableHeader.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAAoBC,UAAU,EAAEC,IAAI,QAAmB,cAAc;AAErE,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,EAAEC,KAAK,QAAQ,+BAA+B;AAe5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,MAAMC,eAAe,GAAGA,CAAC;EACvBC,QAAQ;EACRC,KAAK;EACLC,KAAK,EAAEC,cAAc;EACrB,GAAGC;AACE,CAAC,KAAK;EACX,MAAMF,KAAK,GAAGN,gBAAgB,CAACO,cAAc,CAAC;EAC9C,MAAME,iBAAiB,GAAGH,KAAK,CAACI,IAAI,GAChCJ,KAAK,CAACK,MAAM,CAACC,cAAc,GAC3Bb,KAAK,CAACO,KAAK,CAACO,IAAI,GAAGX,KAAK,GAAGD,KAAK,CAAC,CAC9Ba,KAAK,CAAC,IAAI,CAAC,CACXC,GAAG,CAAC,CAAC,CACLC,MAAM,CAAC,CAAC;EAEf,oBACEpB,KAAA,CAAAqB,aAAA,CAACnB,IAAI,EAAAoB,QAAA,KAAKV,IAAI;IAAEH,KAAK,EAAE,CAACc,MAAM,CAACC,MAAM,EAAE;MAAEX;IAAkB,CAAC,EAAEJ,KAAK;EAAE,IAClED,QACG,CAAC;AAEX,CAAC;AAEDD,eAAe,CAACkB,WAAW,GAAG,kBAAkB;AAEhD,MAAMF,MAAM,GAAGtB,UAAU,CAACyB,MAAM,CAAC;EAC/BF,MAAM,EAAE;IACNG,aAAa,EAAE,KAAK;IACpBC,iBAAiB,EAAE,EAAE;IACrBC,iBAAiB,EAAE5B,UAAU,CAAC6B,aAAa,GAAG;EAChD;AACF,CAAC,CAAC;AAEF,eAAevB,eAAe;;AAE9B;AACA,SAASA,eAAe","ignoreList":[]}

View File

@@ -0,0 +1,271 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { I18nManager, StyleSheet, View } from 'react-native';
import color from 'color';
import { useInternalTheme } from '../../core/theming';
import Button from '../Button/Button';
import IconButton from '../IconButton/IconButton';
import MaterialCommunityIcon from '../MaterialCommunityIcon';
import Menu from '../Menu/Menu';
import Text from '../Typography/Text';
const PaginationControls = ({
page,
numberOfPages,
onPageChange,
showFastPaginationControls,
theme: themeOverrides,
paginationControlRippleColor
}) => {
const theme = useInternalTheme(themeOverrides);
const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
return /*#__PURE__*/React.createElement(React.Fragment, null, showFastPaginationControls ? /*#__PURE__*/React.createElement(IconButton, {
icon: ({
size,
color
}) => /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "page-first",
color: color,
size: size,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
}),
iconColor: textColor,
rippleColor: paginationControlRippleColor,
disabled: page === 0,
onPress: () => onPageChange(0),
accessibilityLabel: "page-first",
theme: theme
}) : null, /*#__PURE__*/React.createElement(IconButton, {
icon: ({
size,
color
}) => /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "chevron-left",
color: color,
size: size,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
}),
iconColor: textColor,
rippleColor: paginationControlRippleColor,
disabled: page === 0,
onPress: () => onPageChange(page - 1),
accessibilityLabel: "chevron-left",
theme: theme
}), /*#__PURE__*/React.createElement(IconButton, {
icon: ({
size,
color
}) => /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "chevron-right",
color: color,
size: size,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
}),
iconColor: textColor,
rippleColor: paginationControlRippleColor,
disabled: numberOfPages === 0 || page === numberOfPages - 1,
onPress: () => onPageChange(page + 1),
accessibilityLabel: "chevron-right",
theme: theme
}), showFastPaginationControls ? /*#__PURE__*/React.createElement(IconButton, {
icon: ({
size,
color
}) => /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "page-last",
color: color,
size: size,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
}),
iconColor: textColor,
rippleColor: paginationControlRippleColor,
disabled: numberOfPages === 0 || page === numberOfPages - 1,
onPress: () => onPageChange(numberOfPages - 1),
accessibilityLabel: "page-last",
theme: theme
}) : null);
};
const PaginationDropdown = ({
numberOfItemsPerPageList,
numberOfItemsPerPage,
onItemsPerPageChange,
theme: themeOverrides,
selectPageDropdownRippleColor,
dropdownItemRippleColor
}) => {
const theme = useInternalTheme(themeOverrides);
const {
colors
} = theme;
const [showSelect, toggleSelect] = React.useState(false);
return /*#__PURE__*/React.createElement(Menu, {
visible: showSelect,
onDismiss: () => toggleSelect(!showSelect),
theme: theme,
anchor: /*#__PURE__*/React.createElement(Button, {
mode: "outlined",
onPress: () => toggleSelect(true),
style: styles.button,
icon: "menu-down",
contentStyle: styles.contentStyle,
theme: theme,
rippleColor: selectPageDropdownRippleColor
}, `${numberOfItemsPerPage}`)
}, numberOfItemsPerPageList === null || numberOfItemsPerPageList === void 0 ? void 0 : numberOfItemsPerPageList.map(option => /*#__PURE__*/React.createElement(Menu.Item, {
key: option,
titleStyle: option === numberOfItemsPerPage && {
color: colors === null || colors === void 0 ? void 0 : colors.primary
},
onPress: () => {
onItemsPerPageChange === null || onItemsPerPageChange === void 0 || onItemsPerPageChange(option);
toggleSelect(false);
},
rippleColor: dropdownItemRippleColor,
title: option,
theme: theme
})));
};
/**
* A component to show pagination for data table.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const numberOfItemsPerPageList = [2, 3, 4];
*
* const items = [
* {
* key: 1,
* name: 'Page 1',
* },
* {
* key: 2,
* name: 'Page 2',
* },
* {
* key: 3,
* name: 'Page 3',
* },
* ];
*
* const MyComponent = () => {
* const [page, setPage] = React.useState(0);
* const [numberOfItemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);
* const from = page * numberOfItemsPerPage;
* const to = Math.min((page + 1) * numberOfItemsPerPage, items.length);
*
* React.useEffect(() => {
* setPage(0);
* }, [numberOfItemsPerPage]);
*
* return (
* <DataTable>
* <DataTable.Pagination
* page={page}
* numberOfPages={Math.ceil(items.length / numberOfItemsPerPage)}
* onPageChange={page => setPage(page)}
* label={`${from + 1}-${to} of ${items.length}`}
* showFastPaginationControls
* numberOfItemsPerPageList={numberOfItemsPerPageList}
* numberOfItemsPerPage={numberOfItemsPerPage}
* onItemsPerPageChange={onItemsPerPageChange}
* selectPageDropdownLabel={'Rows per page'}
* />
* </DataTable>
* );
* };
*
* export default MyComponent;
* ```
*/
const DataTablePagination = ({
label,
accessibilityLabel,
page,
numberOfPages,
onPageChange,
style,
showFastPaginationControls = false,
numberOfItemsPerPageList,
numberOfItemsPerPage,
onItemsPerPageChange,
selectPageDropdownLabel,
selectPageDropdownAccessibilityLabel,
selectPageDropdownRippleColor,
dropdownItemRippleColor,
theme: themeOverrides,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const labelColor = color(theme.isV3 ? theme.colors.onSurface : theme === null || theme === void 0 ? void 0 : theme.colors.text).alpha(0.6).rgb().string();
return /*#__PURE__*/React.createElement(View, _extends({}, rest, {
style: [styles.container, style],
accessibilityLabel: "pagination-container"
}), numberOfItemsPerPageList && numberOfItemsPerPage && onItemsPerPageChange && /*#__PURE__*/React.createElement(View, {
accessibilityLabel: "Options Select",
style: styles.optionsContainer
}, /*#__PURE__*/React.createElement(Text, {
style: [styles.label, {
color: labelColor
}],
numberOfLines: 3,
accessibilityLabel: selectPageDropdownAccessibilityLabel || 'selectPageDropdownLabel'
}, selectPageDropdownLabel), /*#__PURE__*/React.createElement(PaginationDropdown, {
numberOfItemsPerPageList: numberOfItemsPerPageList,
numberOfItemsPerPage: numberOfItemsPerPage,
onItemsPerPageChange: onItemsPerPageChange,
selectPageDropdownRippleColor: selectPageDropdownRippleColor,
dropdownItemRippleColor: dropdownItemRippleColor,
theme: theme
})), /*#__PURE__*/React.createElement(Text, {
style: [styles.label, {
color: labelColor
}],
numberOfLines: 3,
accessibilityLabel: accessibilityLabel || 'label'
}, label), /*#__PURE__*/React.createElement(View, {
style: styles.iconsContainer
}, /*#__PURE__*/React.createElement(PaginationControls, {
showFastPaginationControls: showFastPaginationControls,
onPageChange: onPageChange,
page: page,
numberOfPages: numberOfPages,
theme: theme
})));
};
DataTablePagination.displayName = 'DataTable.Pagination';
const styles = StyleSheet.create({
container: {
justifyContent: 'flex-end',
flexDirection: 'row',
alignItems: 'center',
paddingLeft: 16,
flexWrap: 'wrap'
},
optionsContainer: {
flexDirection: 'row',
alignItems: 'center',
marginVertical: 6
},
label: {
fontSize: 12,
marginRight: 16
},
button: {
textAlign: 'center',
marginRight: 16
},
iconsContainer: {
flexDirection: 'row'
},
contentStyle: {
flexDirection: 'row-reverse'
}
});
export default DataTablePagination;
// @component-docs ignore-next-line
export { DataTablePagination };
//# sourceMappingURL=DataTablePagination.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,67 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import color from 'color';
import { useInternalTheme } from '../../core/theming';
import { black, white } from '../../styles/themes/v2/colors';
import TouchableRipple from '../TouchableRipple/TouchableRipple';
/**
* A component to show a single row inside of a table.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => (
* <DataTable.Row>
* <DataTable.Cell numeric>1</DataTable.Cell>
* <DataTable.Cell numeric>2</DataTable.Cell>
* <DataTable.Cell numeric>3</DataTable.Cell>
* <DataTable.Cell numeric>4</DataTable.Cell>
* </DataTable.Row>
* );
*
* export default MyComponent;
* ```
*
* @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
*/
const DataTableRow = ({
onPress,
style,
children,
pointerEvents,
theme: themeOverrides,
...rest
}) => {
const theme = useInternalTheme(themeOverrides);
const borderBottomColor = theme.isV3 ? theme.colors.surfaceVariant : color(theme.dark ? white : black).alpha(0.12).rgb().string();
return /*#__PURE__*/React.createElement(TouchableRipple, _extends({}, rest, {
onPress: onPress,
style: [styles.container, {
borderBottomColor
}, style]
}), /*#__PURE__*/React.createElement(View, {
style: styles.content,
pointerEvents: pointerEvents
}, children));
};
DataTableRow.displayName = 'DataTable.Row';
const styles = StyleSheet.create({
container: {
borderStyle: 'solid',
borderBottomWidth: StyleSheet.hairlineWidth,
minHeight: 48,
paddingHorizontal: 16
},
content: {
flex: 1,
flexDirection: 'row'
}
});
export default DataTableRow;
// @component-docs ignore-next-line
export { DataTableRow };
//# sourceMappingURL=DataTableRow.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","StyleSheet","View","color","useInternalTheme","black","white","TouchableRipple","DataTableRow","onPress","style","children","pointerEvents","theme","themeOverrides","rest","borderBottomColor","isV3","colors","surfaceVariant","dark","alpha","rgb","string","createElement","_extends","styles","container","content","displayName","create","borderStyle","borderBottomWidth","hairlineWidth","minHeight","paddingHorizontal","flex","flexDirection"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTableRow.tsx"],"mappings":";AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAGEC,UAAU,EACVC,IAAI,QAGC,cAAc;AAErB,OAAOC,KAAK,MAAM,OAAO;AAEzB,SAASC,gBAAgB,QAAQ,oBAAoB;AACrD,SAASC,KAAK,EAAEC,KAAK,QAAQ,+BAA+B;AAE5D,OAAOC,eAAe,MAAM,oCAAoC;AAsBhE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,YAAY,GAAGA,CAAC;EACpBC,OAAO;EACPC,KAAK;EACLC,QAAQ;EACRC,aAAa;EACbC,KAAK,EAAEC,cAAc;EACrB,GAAGC;AACE,CAAC,KAAK;EACX,MAAMF,KAAK,GAAGT,gBAAgB,CAACU,cAAc,CAAC;EAC9C,MAAME,iBAAiB,GAAGH,KAAK,CAACI,IAAI,GAChCJ,KAAK,CAACK,MAAM,CAACC,cAAc,GAC3BhB,KAAK,CAACU,KAAK,CAACO,IAAI,GAAGd,KAAK,GAAGD,KAAK,CAAC,CAC9BgB,KAAK,CAAC,IAAI,CAAC,CACXC,GAAG,CAAC,CAAC,CACLC,MAAM,CAAC,CAAC;EAEf,oBACEvB,KAAA,CAAAwB,aAAA,CAACjB,eAAe,EAAAkB,QAAA,KACVV,IAAI;IACRN,OAAO,EAAEA,OAAQ;IACjBC,KAAK,EAAE,CAACgB,MAAM,CAACC,SAAS,EAAE;MAAEX;IAAkB,CAAC,EAAEN,KAAK;EAAE,iBAExDV,KAAA,CAAAwB,aAAA,CAACtB,IAAI;IAACQ,KAAK,EAAEgB,MAAM,CAACE,OAAQ;IAAChB,aAAa,EAAEA;EAAc,GACvDD,QACG,CACS,CAAC;AAEtB,CAAC;AAEDH,YAAY,CAACqB,WAAW,GAAG,eAAe;AAE1C,MAAMH,MAAM,GAAGzB,UAAU,CAAC6B,MAAM,CAAC;EAC/BH,SAAS,EAAE;IACTI,WAAW,EAAE,OAAO;IACpBC,iBAAiB,EAAE/B,UAAU,CAACgC,aAAa;IAC3CC,SAAS,EAAE,EAAE;IACbC,iBAAiB,EAAE;EACrB,CAAC;EACDP,OAAO,EAAE;IACPQ,IAAI,EAAE,CAAC;IACPC,aAAa,EAAE;EACjB;AACF,CAAC,CAAC;AAEF,eAAe7B,YAAY;;AAE3B;AACA,SAASA,YAAY","ignoreList":[]}

View File

@@ -0,0 +1,133 @@
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import { Animated, I18nManager, PixelRatio, Pressable, StyleSheet } from 'react-native';
import color from 'color';
import { useInternalTheme } from '../../core/theming';
import MaterialCommunityIcon from '../MaterialCommunityIcon';
import Text from '../Typography/Text';
/**
* A component to display title in table header.
*
* ## Usage
* ```js
* import * as React from 'react';
* import { DataTable } from 'react-native-paper';
*
* const MyComponent = () => (
* <DataTable>
* <DataTable.Header>
* <DataTable.Title
* sortDirection='descending'
* >
* Dessert
* </DataTable.Title>
* <DataTable.Title numeric>Calories</DataTable.Title>
* <DataTable.Title numeric>Fat (g)</DataTable.Title>
* </DataTable.Header>
* </DataTable>
* );
*
* export default MyComponent;
* ```
*/
const DataTableTitle = ({
numeric,
children,
onPress,
sortDirection,
textStyle,
style,
theme: themeOverrides,
numberOfLines = 1,
maxFontSizeMultiplier,
...rest
}) => {
var _theme$colors;
const theme = useInternalTheme(themeOverrides);
const {
current: spinAnim
} = React.useRef(new Animated.Value(sortDirection === 'ascending' ? 0 : 1));
React.useEffect(() => {
Animated.timing(spinAnim, {
toValue: sortDirection === 'ascending' ? 0 : 1,
duration: 150,
useNativeDriver: true
}).start();
}, [sortDirection, spinAnim]);
const textColor = theme.isV3 ? theme.colors.onSurface : theme === null || theme === void 0 || (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.text;
const alphaTextColor = color(textColor).alpha(0.6).rgb().string();
const spin = spinAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '180deg']
});
const icon = sortDirection ? /*#__PURE__*/React.createElement(Animated.View, {
style: [styles.icon, {
transform: [{
rotate: spin
}]
}]
}, /*#__PURE__*/React.createElement(MaterialCommunityIcon, {
name: "arrow-up",
size: 16,
color: textColor,
direction: I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'
})) : null;
return /*#__PURE__*/React.createElement(Pressable, _extends({
disabled: !onPress,
onPress: onPress
}, rest, {
style: [styles.container, numeric && styles.right, style]
}), icon, /*#__PURE__*/React.createElement(Text, {
style: [styles.cell,
// height must scale with numberOfLines
{
maxHeight: 24 * PixelRatio.getFontScale() * numberOfLines
},
// if numberOfLines causes wrap, center is lost. Align directly, sensitive to numeric and RTL
numberOfLines > 1 ? numeric ? I18nManager.getConstants().isRTL ? styles.leftText : styles.rightText : styles.centerText : {}, sortDirection ? styles.sorted : {
color: alphaTextColor
}, textStyle],
numberOfLines: numberOfLines,
maxFontSizeMultiplier: maxFontSizeMultiplier
}, children));
};
DataTableTitle.displayName = 'DataTable.Title';
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
alignContent: 'center',
paddingVertical: 12
},
rightText: {
textAlign: 'right'
},
leftText: {
textAlign: 'left'
},
centerText: {
textAlign: 'center'
},
right: {
justifyContent: 'flex-end'
},
cell: {
lineHeight: 24,
fontSize: 12,
fontWeight: '500',
alignItems: 'center'
},
sorted: {
marginLeft: 8
},
icon: {
height: 24,
justifyContent: 'center'
}
});
export default DataTableTitle;
// @component-docs ignore-next-line
export { DataTableTitle };
//# sourceMappingURL=DataTableTitle.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["React","Animated","I18nManager","PixelRatio","Pressable","StyleSheet","color","useInternalTheme","MaterialCommunityIcon","Text","DataTableTitle","numeric","children","onPress","sortDirection","textStyle","style","theme","themeOverrides","numberOfLines","maxFontSizeMultiplier","rest","_theme$colors","current","spinAnim","useRef","Value","useEffect","timing","toValue","duration","useNativeDriver","start","textColor","isV3","colors","onSurface","text","alphaTextColor","alpha","rgb","string","spin","interpolate","inputRange","outputRange","icon","createElement","View","styles","transform","rotate","name","size","direction","getConstants","isRTL","_extends","disabled","container","right","cell","maxHeight","getFontScale","leftText","rightText","centerText","sorted","displayName","create","flex","flexDirection","alignContent","paddingVertical","textAlign","justifyContent","lineHeight","fontSize","fontWeight","alignItems","marginLeft","height"],"sourceRoot":"../../../../src","sources":["components/DataTable/DataTableTitle.tsx"],"mappings":"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","ignoreList":[]}