@tecsinapse/react-web-kit 1.18.2 → 1.18.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/dist/components/organisms/DataGrid/DataGrid.d.ts +2 -1
- package/dist/components/organisms/DataGrid/DataGrid.js +3 -1
- package/dist/components/organisms/DataGrid/DataGrid.js.map +1 -1
- package/dist/components/organisms/DataGrid/Footer/Footer.d.ts +1 -0
- package/dist/components/organisms/DataGrid/Footer/Footer.js +3 -2
- package/dist/components/organisms/DataGrid/Footer/Footer.js.map +1 -1
- package/package.json +3 -3
- package/src/components/organisms/DataGrid/DataGrid.tsx +4 -0
- package/src/components/organisms/DataGrid/Footer/Footer.tsx +3 -0
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [1.18.3](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.2...@tecsinapse/react-web-kit@1.18.3) (2022-08-03)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* added prop exportComponent in Footer Data Grid. ([c4b63de](https://github.com/tecsinapse/design-system/commit/c4b63deeb5853e538c55a035f2312eef06efef48))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [1.18.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.18.1...@tecsinapse/react-web-kit@1.18.2) (2022-08-02)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -23,6 +23,7 @@ export interface DataGridProps<Data> extends React.HTMLAttributes<HTMLDivElement
|
|
|
23
23
|
loading?: boolean;
|
|
24
24
|
skeletonComponent?: React.ReactNode;
|
|
25
25
|
emptyPlaceholder?: React.ReactNode;
|
|
26
|
+
exportComponent?: React.ReactNode;
|
|
26
27
|
}
|
|
27
|
-
declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, emptyPlaceholder, ...rest }: DataGridProps<Data>) => JSX.Element;
|
|
28
|
+
declare const DataGrid: <Data extends unknown>({ headers, data, rowKeyExtractor, toolbarTitle, toolbarFooter, toolbarRightIcons, selectable, selectedRows, onSelectedRows, pagination, rowsPerPage, onRowsPerPageChange, rowsPerPageOptions: _rowsPerPageOptions, rowsPerPageLabel: _rowsPerPageLabel, exportLabel, exportFunction, rowsCount, page, onPageChange, loading, skeletonComponent, emptyPlaceholder, exportComponent, ...rest }: DataGridProps<Data>) => JSX.Element;
|
|
28
29
|
export default DataGrid;
|
|
@@ -44,6 +44,7 @@ const DataGrid = ({
|
|
|
44
44
|
loading = false,
|
|
45
45
|
skeletonComponent,
|
|
46
46
|
emptyPlaceholder,
|
|
47
|
+
exportComponent,
|
|
47
48
|
...rest
|
|
48
49
|
}) => {
|
|
49
50
|
if (selectable && (!selectedRows || !onSelectedRows)) {
|
|
@@ -113,7 +114,8 @@ const DataGrid = ({
|
|
|
113
114
|
rowsCount: rowsCount ?? data.length,
|
|
114
115
|
page: page,
|
|
115
116
|
onPageChange: onPageChange,
|
|
116
|
-
pagination: pagination
|
|
117
|
+
pagination: pagination,
|
|
118
|
+
exportComponent: exportComponent
|
|
117
119
|
})));
|
|
118
120
|
};
|
|
119
121
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","emptyPlaceholder","rest","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width","Number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n Table,\n TableToolbar,\n TableContainer,\n Tr,\n Td,\n TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data>\n extends React.HTMLAttributes<HTMLDivElement> {\n headers: HeadersType<Data>[];\n data: Data[];\n /** Unique identifier for row data */\n rowKeyExtractor: (data: Data) => string;\n toolbarRightIcons?: React.ReactNode;\n toolbarFooter?: React.ReactNode;\n toolbarTitle: string;\n /** Enable rows selection */\n selectable?: boolean;\n /** Selected items */\n selectedRows?: Data[];\n /** Selection handler */\n onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n /** Shows pagination controls */\n pagination?: boolean;\n /** Results per page */\n rowsPerPage?: number;\n /** Results per page handler */\n onRowsPerPageChange?: (value: number) => void;\n rowsPerPageOptions?: number[];\n rowsPerPageLabel?: (value: number) => string;\n /** Export button label */\n exportLabel?: string;\n exportFunction?: () => void;\n /** Total data elements. Only specify this property if your data is server-side */\n rowsCount?: number;\n /** Current page. Always start in 0 */\n page?: number;\n /** Current page handler */\n onPageChange?: (page: number) => void;\n /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n loading?: boolean;\n /** Custom skeleton component for better visual */\n skeletonComponent?: React.ReactNode;\n /** Empty state placeholder */\n emptyPlaceholder?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data extends unknown>({\n headers,\n data,\n rowKeyExtractor,\n toolbarTitle,\n toolbarFooter,\n toolbarRightIcons,\n selectable = false,\n selectedRows = [],\n onSelectedRows,\n pagination = false,\n rowsPerPage = 10,\n onRowsPerPageChange,\n rowsPerPageOptions: _rowsPerPageOptions,\n rowsPerPageLabel: _rowsPerPageLabel,\n exportLabel = 'Exportar',\n exportFunction,\n rowsCount,\n page = 0,\n onPageChange,\n loading = false,\n skeletonComponent,\n emptyPlaceholder,\n ...rest\n}: DataGridProps<Data>): JSX.Element => {\n if (selectable && (!selectedRows || !onSelectedRows)) {\n throw new Error(\n '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n );\n }\n\n const rowsPerPageLabel = React.useCallback(\n value =>\n _rowsPerPageLabel\n ? _rowsPerPageLabel(value)\n : `Exibir por página: ${value} itens`,\n [_rowsPerPageLabel]\n );\n const rowsPerPageOptions = React.useMemo(\n () => _rowsPerPageOptions ?? [10, 25, 50],\n [_rowsPerPageOptions]\n );\n\n const handleSelect = React.useCallback(\n (current, checked) => {\n if (checked) {\n onSelectedRows?.(prevState => [...prevState, current]);\n return;\n }\n\n onSelectedRows?.(prevState => {\n const idx = prevState.findIndex(\n el => rowKeyExtractor(el) === rowKeyExtractor(current)\n );\n return [...removeElement(prevState, idx)];\n });\n },\n [onSelectedRows, rowKeyExtractor]\n );\n\n return (\n <TableContainer {...rest}>\n <TableToolbar\n title={toolbarTitle}\n rightIcons={toolbarRightIcons}\n footer={toolbarFooter}\n />\n <Table>\n <Header\n selectable={selectable}\n headers={headers}\n data={data}\n rowsCount={rowsCount ?? data.length}\n rowKeyExtractor={rowKeyExtractor}\n selectedRows={selectedRows}\n onSelected={onSelectedRows}\n />\n\n {!loading ? (\n <TBody>\n {data.length > 0 ? (\n getData(\n data,\n rowsCount,\n page,\n rowsPerPage,\n pagination\n ).map(item => (\n <Row\n key={rowKeyExtractor(item)}\n rowKeyExtractor={rowKeyExtractor}\n handleSelect={handleSelect}\n selectable={selectable}\n headers={headers}\n data={item}\n checked={selectedRows?.some(\n sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n )}\n />\n ))\n ) : (\n <tr>\n <td colSpan={99}>{emptyPlaceholder}</td>\n </tr>\n )}\n </TBody>\n ) : (\n <TBody>\n {[...Array(rowsPerPage).keys()].map(idx => (\n <Tr key={`skeleton-${idx}`}>\n <Td colSpan={99} style={{ padding: 0 }}>\n {skeletonComponent ?? (\n <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n <div style={{ width: '100%' }} />\n </Skeleton>\n )}\n </Td>\n </Tr>\n ))}\n </TBody>\n )}\n\n {(Number(rowsCount) > 0 || data.length > 0) && (\n <Footer\n exportFunction={exportFunction}\n exportLabel={exportLabel}\n rowsPerPageLabel={rowsPerPageLabel}\n rowsPerPage={rowsPerPage}\n onRowsPerPageChange={onRowsPerPageChange}\n rowsPerPageOptions={rowsPerPageOptions}\n rowsCount={rowsCount ?? data.length}\n page={page}\n onPageChange={onPageChange}\n pagination={pagination}\n />\n )}\n </Table>\n </TableContainer>\n );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.js"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/DataGrid.tsx"],"names":["DataGrid","headers","data","rowKeyExtractor","toolbarTitle","toolbarFooter","toolbarRightIcons","selectable","selectedRows","onSelectedRows","pagination","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","_rowsPerPageOptions","rowsPerPageLabel","_rowsPerPageLabel","exportLabel","exportFunction","rowsCount","page","onPageChange","loading","skeletonComponent","emptyPlaceholder","exportComponent","rest","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width","Number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {\n Table,\n TableToolbar,\n TableContainer,\n Tr,\n Td,\n TBody,\n} from '../../atoms/Table';\nimport { Header } from './Header';\nimport { Row } from './Row';\nimport { HeadersType } from './types';\nimport { Footer } from './Footer';\nimport { Skeleton } from '../../atoms/Skeleton';\nimport { getData, removeElement } from './utils';\n\nexport interface DataGridProps<Data>\n extends React.HTMLAttributes<HTMLDivElement> {\n headers: HeadersType<Data>[];\n data: Data[];\n /** Unique identifier for row data */\n rowKeyExtractor: (data: Data) => string;\n toolbarRightIcons?: React.ReactNode;\n toolbarFooter?: React.ReactNode;\n toolbarTitle: string;\n /** Enable rows selection */\n selectable?: boolean;\n /** Selected items */\n selectedRows?: Data[];\n /** Selection handler */\n onSelectedRows?: (data: Data[] | ((prevState: Data[]) => Data[])) => void;\n /** Shows pagination controls */\n pagination?: boolean;\n /** Results per page */\n rowsPerPage?: number;\n /** Results per page handler */\n onRowsPerPageChange?: (value: number) => void;\n rowsPerPageOptions?: number[];\n rowsPerPageLabel?: (value: number) => string;\n /** Export button label */\n exportLabel?: string;\n exportFunction?: () => void;\n /** Total data elements. Only specify this property if your data is server-side */\n rowsCount?: number;\n /** Current page. Always start in 0 */\n page?: number;\n /** Current page handler */\n onPageChange?: (page: number) => void;\n /** Loading state. The amount of skeleton rows is based on current rowsPerPage */\n loading?: boolean;\n /** Custom skeleton component for better visual */\n skeletonComponent?: React.ReactNode;\n /** Empty state placeholder */\n emptyPlaceholder?: React.ReactNode;\n /** Export component, use if default button with label is not ideal. This prop, not receive \"exportLabel\" and \"exportFunction\" */\n exportComponent?: React.ReactNode;\n}\n\n/** Note: Consider memoizing functions for a better performance */\nconst DataGrid = <Data extends unknown>({\n headers,\n data,\n rowKeyExtractor,\n toolbarTitle,\n toolbarFooter,\n toolbarRightIcons,\n selectable = false,\n selectedRows = [],\n onSelectedRows,\n pagination = false,\n rowsPerPage = 10,\n onRowsPerPageChange,\n rowsPerPageOptions: _rowsPerPageOptions,\n rowsPerPageLabel: _rowsPerPageLabel,\n exportLabel = 'Exportar',\n exportFunction,\n rowsCount,\n page = 0,\n onPageChange,\n loading = false,\n skeletonComponent,\n emptyPlaceholder,\n exportComponent,\n ...rest\n}: DataGridProps<Data>): JSX.Element => {\n if (selectable && (!selectedRows || !onSelectedRows)) {\n throw new Error(\n '[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)'\n );\n }\n\n const rowsPerPageLabel = React.useCallback(\n value =>\n _rowsPerPageLabel\n ? _rowsPerPageLabel(value)\n : `Exibir por página: ${value} itens`,\n [_rowsPerPageLabel]\n );\n const rowsPerPageOptions = React.useMemo(\n () => _rowsPerPageOptions ?? [10, 25, 50],\n [_rowsPerPageOptions]\n );\n\n const handleSelect = React.useCallback(\n (current, checked) => {\n if (checked) {\n onSelectedRows?.(prevState => [...prevState, current]);\n return;\n }\n\n onSelectedRows?.(prevState => {\n const idx = prevState.findIndex(\n el => rowKeyExtractor(el) === rowKeyExtractor(current)\n );\n return [...removeElement(prevState, idx)];\n });\n },\n [onSelectedRows, rowKeyExtractor]\n );\n\n return (\n <TableContainer {...rest}>\n <TableToolbar\n title={toolbarTitle}\n rightIcons={toolbarRightIcons}\n footer={toolbarFooter}\n />\n <Table>\n <Header\n selectable={selectable}\n headers={headers}\n data={data}\n rowsCount={rowsCount ?? data.length}\n rowKeyExtractor={rowKeyExtractor}\n selectedRows={selectedRows}\n onSelected={onSelectedRows}\n />\n\n {!loading ? (\n <TBody>\n {data.length > 0 ? (\n getData(\n data,\n rowsCount,\n page,\n rowsPerPage,\n pagination\n ).map(item => (\n <Row\n key={rowKeyExtractor(item)}\n rowKeyExtractor={rowKeyExtractor}\n handleSelect={handleSelect}\n selectable={selectable}\n headers={headers}\n data={item}\n checked={selectedRows?.some(\n sel => rowKeyExtractor(sel) === rowKeyExtractor(item)\n )}\n />\n ))\n ) : (\n <tr>\n <td colSpan={99}>{emptyPlaceholder}</td>\n </tr>\n )}\n </TBody>\n ) : (\n <TBody>\n {[...Array(rowsPerPage).keys()].map(idx => (\n <Tr key={`skeleton-${idx}`}>\n <Td colSpan={99} style={{ padding: 0 }}>\n {skeletonComponent ?? (\n <Skeleton height={55} radius=\"mili\" animation=\"wave\">\n <div style={{ width: '100%' }} />\n </Skeleton>\n )}\n </Td>\n </Tr>\n ))}\n </TBody>\n )}\n\n {(Number(rowsCount) > 0 || data.length > 0) && (\n <Footer\n exportFunction={exportFunction}\n exportLabel={exportLabel}\n rowsPerPageLabel={rowsPerPageLabel}\n rowsPerPage={rowsPerPage}\n onRowsPerPageChange={onRowsPerPageChange}\n rowsPerPageOptions={rowsPerPageOptions}\n rowsCount={rowsCount ?? data.length}\n page={page}\n onPageChange={onPageChange}\n pagination={pagination}\n exportComponent={exportComponent}\n />\n )}\n </Table>\n </TableContainer>\n );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.js"}
|
|
@@ -25,7 +25,8 @@ const Footer = ({
|
|
|
25
25
|
rowsCount,
|
|
26
26
|
page,
|
|
27
27
|
onPageChange,
|
|
28
|
-
pagination
|
|
28
|
+
pagination,
|
|
29
|
+
exportComponent
|
|
29
30
|
}) => {
|
|
30
31
|
if (pagination && (!onPageChange || !onRowsPerPageChange)) {
|
|
31
32
|
throw new Error('[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)');
|
|
@@ -76,7 +77,7 @@ const Footer = ({
|
|
|
76
77
|
keyExtractor: value => String(value),
|
|
77
78
|
labelExtractor: rowsPerPageLabel,
|
|
78
79
|
anchor: "top"
|
|
79
|
-
})), exportFunction && _react.default.createElement(_styled.HoveredText, null, _react.default.createElement(_reactWebKit.Button, {
|
|
80
|
+
})), exportComponent && !exportFunction && _react.default.createElement(_react.default.Fragment, null, exportComponent), exportFunction && _react.default.createElement(_styled.HoveredText, null, _react.default.createElement(_reactWebKit.Button, {
|
|
80
81
|
variant: "outlined",
|
|
81
82
|
onPress: () => exportFunction()
|
|
82
83
|
}, _react.default.createElement(_reactWebKit.Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"names":["Footer","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","rowsPerPageLabel","exportFunction","exportLabel","rowsCount","page","onPageChange","pagination","Error","getPaginationSlice","totalPages","Math","ceil","start","end","handleRowsPerPage","React","useCallback","value","String","Array","keys","slice","map","memo"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AACA;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../../src/components/organisms/DataGrid/Footer/Footer.tsx"],"names":["Footer","rowsPerPage","onRowsPerPageChange","rowsPerPageOptions","rowsPerPageLabel","exportFunction","exportLabel","rowsCount","page","onPageChange","pagination","exportComponent","Error","getPaginationSlice","totalPages","Math","ceil","start","end","handleRowsPerPage","React","useCallback","value","String","Array","keys","slice","map","memo"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Button, Icon, Select, Text } from '@tecsinapse/react-web-kit';\nimport { TFoot, Tr } from '../../../atoms/Table';\nimport {\n FooterContainer,\n FooterContainerEnd,\n FooterContainerStart,\n HoveredText,\n NavigationButton,\n PageButton,\n PagesContainer,\n SelectContainer,\n TdFooterStyled,\n} from './styled';\n\ninterface DataGridFooterProps {\n rowsPerPage: number;\n onRowsPerPageChange?: (value: number) => void;\n rowsPerPageOptions: number[];\n rowsPerPageLabel: (value: number) => string;\n exportLabel?: string;\n exportFunction?: () => void;\n /** Total data elements */\n rowsCount: number;\n page: number;\n onPageChange?: (page: number) => void;\n pagination: boolean;\n exportComponent?: React.ReactNode;\n}\n\nconst Footer: React.FC<DataGridFooterProps> = ({\n rowsPerPage,\n onRowsPerPageChange,\n rowsPerPageOptions,\n rowsPerPageLabel,\n exportFunction,\n exportLabel,\n rowsCount,\n page,\n onPageChange,\n pagination,\n exportComponent,\n}) => {\n if (pagination && (!onPageChange || !onRowsPerPageChange)) {\n throw new Error(\n '[DataGrid] You should specify pagination handlers (onPageChange, onRowsPerPageChange)'\n );\n }\n\n const getPaginationSlice = (): { start: number; end: number } => {\n const totalPages = Math.ceil(rowsCount / rowsPerPage);\n if (totalPages < 4) {\n return { start: 0, end: totalPages };\n }\n if (page === 0) {\n return { start: page, end: page + 3 };\n }\n if (page === totalPages - 1) {\n return { start: page - 2, end: page + 1 };\n }\n return { start: page - 1, end: page + 2 };\n };\n\n const handleRowsPerPage = React.useCallback(\n value => {\n onRowsPerPageChange?.(value as number);\n onPageChange?.(0);\n },\n [onPageChange, onRowsPerPageChange]\n );\n\n return (\n <TFoot>\n <Tr>\n <TdFooterStyled colSpan={99}>\n <FooterContainer>\n <FooterContainerStart>\n {pagination && (\n <SelectContainer>\n <Select\n options={rowsPerPageOptions}\n onSelect={handleRowsPerPage}\n value={rowsPerPage}\n type={'single'}\n keyExtractor={value => String(value)}\n labelExtractor={rowsPerPageLabel}\n anchor=\"top\"\n />\n </SelectContainer>\n )}\n {exportComponent && !exportFunction && <>{exportComponent}</>}\n {exportFunction && (\n <HoveredText>\n <Button variant=\"outlined\" onPress={() => exportFunction()}>\n <Text fontColor=\"orange\" fontWeight=\"bold\">\n {exportLabel}\n </Text>\n </Button>\n </HoveredText>\n )}\n </FooterContainerStart>\n {pagination && (\n <FooterContainerEnd>\n <NavigationButton\n onPress={() => onPageChange?.(page - 1)}\n disabled={page === 0}\n >\n <Icon\n name={'chevron-left'}\n type={'material-community'}\n fontColor={'light'}\n />\n </NavigationButton>\n <PagesContainer>\n {[...Array(Math.ceil(rowsCount / rowsPerPage)).keys()]\n .slice(getPaginationSlice().start, getPaginationSlice().end)\n .map(value => (\n <HoveredText key={`page-${value}`}>\n <PageButton\n variant={page === value ? 'outlined' : 'text'}\n onPress={() => onPageChange?.(value)}\n >\n <Text fontColor=\"medium\" fontWeight=\"bold\">\n {value + 1}\n </Text>\n </PageButton>\n </HoveredText>\n ))}\n </PagesContainer>\n <NavigationButton\n onPress={() => onPageChange?.(page + 1)}\n disabled={page === Math.ceil(rowsCount / rowsPerPage) - 1}\n >\n <Icon\n name={'chevron-right'}\n type={'material-community'}\n fontColor={'light'}\n />\n </NavigationButton>\n </FooterContainerEnd>\n )}\n </FooterContainer>\n </TdFooterStyled>\n </Tr>\n </TFoot>\n );\n};\n\nexport default React.memo(Footer);\n"],"file":"Footer.js"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tecsinapse/react-web-kit",
|
|
3
3
|
"description": "TecSinapse React components",
|
|
4
|
-
"version": "1.18.
|
|
4
|
+
"version": "1.18.3",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"@emotion/native": "^11.0.0",
|
|
18
18
|
"@emotion/react": "^11.4.1",
|
|
19
19
|
"@emotion/styled": "^11.3.0",
|
|
20
|
-
"@tecsinapse/react-core": "^1.17.
|
|
20
|
+
"@tecsinapse/react-core": "^1.17.3",
|
|
21
21
|
"@types/react-native": "^0.64.4",
|
|
22
22
|
"react-native-vector-icons": "^9.2.0",
|
|
23
23
|
"react-transition-group": "^4.4.2"
|
|
@@ -36,5 +36,5 @@
|
|
|
36
36
|
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
|
|
37
37
|
"react-native-web": "^0.17.1"
|
|
38
38
|
},
|
|
39
|
-
"gitHead": "
|
|
39
|
+
"gitHead": "a5e28a0fca8b31fec40c9eda3af93a1944c1bbd5"
|
|
40
40
|
}
|
|
@@ -52,6 +52,8 @@ export interface DataGridProps<Data>
|
|
|
52
52
|
skeletonComponent?: React.ReactNode;
|
|
53
53
|
/** Empty state placeholder */
|
|
54
54
|
emptyPlaceholder?: React.ReactNode;
|
|
55
|
+
/** Export component, use if default button with label is not ideal. This prop, not receive "exportLabel" and "exportFunction" */
|
|
56
|
+
exportComponent?: React.ReactNode;
|
|
55
57
|
}
|
|
56
58
|
|
|
57
59
|
/** Note: Consider memoizing functions for a better performance */
|
|
@@ -78,6 +80,7 @@ const DataGrid = <Data extends unknown>({
|
|
|
78
80
|
loading = false,
|
|
79
81
|
skeletonComponent,
|
|
80
82
|
emptyPlaceholder,
|
|
83
|
+
exportComponent,
|
|
81
84
|
...rest
|
|
82
85
|
}: DataGridProps<Data>): JSX.Element => {
|
|
83
86
|
if (selectable && (!selectedRows || !onSelectedRows)) {
|
|
@@ -189,6 +192,7 @@ const DataGrid = <Data extends unknown>({
|
|
|
189
192
|
page={page}
|
|
190
193
|
onPageChange={onPageChange}
|
|
191
194
|
pagination={pagination}
|
|
195
|
+
exportComponent={exportComponent}
|
|
192
196
|
/>
|
|
193
197
|
)}
|
|
194
198
|
</Table>
|
|
@@ -25,6 +25,7 @@ interface DataGridFooterProps {
|
|
|
25
25
|
page: number;
|
|
26
26
|
onPageChange?: (page: number) => void;
|
|
27
27
|
pagination: boolean;
|
|
28
|
+
exportComponent?: React.ReactNode;
|
|
28
29
|
}
|
|
29
30
|
|
|
30
31
|
const Footer: React.FC<DataGridFooterProps> = ({
|
|
@@ -38,6 +39,7 @@ const Footer: React.FC<DataGridFooterProps> = ({
|
|
|
38
39
|
page,
|
|
39
40
|
onPageChange,
|
|
40
41
|
pagination,
|
|
42
|
+
exportComponent,
|
|
41
43
|
}) => {
|
|
42
44
|
if (pagination && (!onPageChange || !onRowsPerPageChange)) {
|
|
43
45
|
throw new Error(
|
|
@@ -86,6 +88,7 @@ const Footer: React.FC<DataGridFooterProps> = ({
|
|
|
86
88
|
/>
|
|
87
89
|
</SelectContainer>
|
|
88
90
|
)}
|
|
91
|
+
{exportComponent && !exportFunction && <>{exportComponent}</>}
|
|
89
92
|
{exportFunction && (
|
|
90
93
|
<HoveredText>
|
|
91
94
|
<Button variant="outlined" onPress={() => exportFunction()}>
|