@tecsinapse/react-web-kit 1.7.0 → 1.7.1
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 +6 -3
- package/dist/components/organisms/DataGrid/DataGrid.js.map +1 -1
- package/dist/components/organisms/DataGrid/utils.d.ts +1 -1
- package/dist/components/organisms/DataGrid/utils.js +1 -1
- package/dist/components/organisms/DataGrid/utils.js.map +1 -1
- package/package.json +2 -2
- package/src/components/organisms/DataGrid/DatGrid.stories.tsx +33 -0
- package/src/components/organisms/DataGrid/DataGrid.tsx +28 -13
- package/src/components/organisms/DataGrid/utils.ts +3 -2
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.7.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.7.0...@tecsinapse/react-web-kit@1.7.1) (2021-09-22)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Bug Fixes
|
|
10
|
+
|
|
11
|
+
* data grid paginating when pagination is disabled ([d7a676e](https://github.com/tecsinapse/design-system/commit/d7a676e6d622cfbdbd09a3e354a557a00fee16c3))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
# [1.7.0](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-web-kit@1.6.8...@tecsinapse/react-web-kit@1.7.0) (2021-09-21)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -23,6 +23,7 @@ export interface DataGridProps<Data> {
|
|
|
23
23
|
loading?: boolean;
|
|
24
24
|
skeletonComponent?: React.ReactNode;
|
|
25
25
|
style?: CSSProperties;
|
|
26
|
+
emptyPlaceholder?: 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, style, }: 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, style, emptyPlaceholder, }: DataGridProps<Data>) => JSX.Element;
|
|
28
29
|
export default DataGrid;
|
|
@@ -43,7 +43,8 @@ const DataGrid = ({
|
|
|
43
43
|
onPageChange,
|
|
44
44
|
loading = false,
|
|
45
45
|
skeletonComponent,
|
|
46
|
-
style
|
|
46
|
+
style,
|
|
47
|
+
emptyPlaceholder
|
|
47
48
|
}) => {
|
|
48
49
|
if (selectable && (!selectedRows || !onSelectedRows)) {
|
|
49
50
|
throw new Error('[DataGrid] You should specify selection handlers (selectedRows, onSelectedRows)');
|
|
@@ -79,7 +80,7 @@ const DataGrid = ({
|
|
|
79
80
|
rowKeyExtractor: rowKeyExtractor,
|
|
80
81
|
selectedRows: selectedRows,
|
|
81
82
|
onSelected: onSelectedRows
|
|
82
|
-
}), !loading ? _react.default.createElement(_Table.TBody, null, (0, _utils.getData)(data, rowsCount, page, rowsPerPage).map(item => _react.default.createElement(_Row.Row, {
|
|
83
|
+
}), !loading ? _react.default.createElement(_Table.TBody, null, data.length > 0 ? (0, _utils.getData)(data, rowsCount, page, rowsPerPage, pagination).map(item => _react.default.createElement(_Row.Row, {
|
|
83
84
|
key: rowKeyExtractor(item),
|
|
84
85
|
rowKeyExtractor: rowKeyExtractor,
|
|
85
86
|
handleSelect: handleSelect,
|
|
@@ -87,7 +88,9 @@ const DataGrid = ({
|
|
|
87
88
|
headers: headers,
|
|
88
89
|
data: item,
|
|
89
90
|
checked: selectedRows === null || selectedRows === void 0 ? void 0 : selectedRows.some(sel => rowKeyExtractor(sel) === rowKeyExtractor(item))
|
|
90
|
-
}))
|
|
91
|
+
})) : _react.default.createElement("tr", null, _react.default.createElement("td", {
|
|
92
|
+
colSpan: 99
|
|
93
|
+
}, emptyPlaceholder))) : _react.default.createElement(_Table.TBody, null, [...Array(rowsPerPage).keys()].map(idx => _react.default.createElement(_Table.Tr, {
|
|
91
94
|
key: `skeleton-${idx}`
|
|
92
95
|
}, _react.default.createElement(_Table.Td, {
|
|
93
96
|
colSpan: 99,
|
|
@@ -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","style","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width"],"mappings":";;;;;;;AAAA;;AACA;;AAQA;;AACA;;AAEA;;AACA;;AACA;;;;
|
|
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","style","emptyPlaceholder","Error","React","useCallback","value","useMemo","handleSelect","current","checked","prevState","idx","findIndex","el","length","map","item","some","sel","Array","keys","padding","width"],"mappings":"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","sourcesContent":["import React, { CSSProperties } 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 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 /** CSS style spread to TableContainer */\n style?: CSSProperties;\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 style,\n emptyPlaceholder,\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 style={style}>\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 <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 </Table>\n </TableContainer>\n );\n};\n\nexport default DataGrid;\n"],"file":"DataGrid.js"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export declare function removeElement<T>(arr: T[], index: number): T[];
|
|
2
|
-
export declare const getData: <Data>(data: Data[], rowsCount: number | undefined, page: number, rowsPerPage: number) => Data[];
|
|
2
|
+
export declare const getData: <Data>(data: Data[], rowsCount: number | undefined, page: number, rowsPerPage: number, pagination: boolean) => Data[];
|
|
@@ -12,7 +12,7 @@ function removeElement(arr, index) {
|
|
|
12
12
|
return data;
|
|
13
13
|
}
|
|
14
14
|
|
|
15
|
-
const getData = (data, rowsCount, page, rowsPerPage) => rowsCount ? data : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
|
|
15
|
+
const getData = (data, rowsCount, page, rowsPerPage, pagination) => rowsCount || !pagination ? data : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
|
|
16
16
|
|
|
17
17
|
exports.getData = getData;
|
|
18
18
|
//# sourceMappingURL=utils.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/utils.ts"],"names":["removeElement","arr","index","data","splice","getData","rowsCount","page","rowsPerPage","slice"],"mappings":";;;;;;;;AAAO,SAASA,aAAT,CAA0BC,GAA1B,EAAoCC,KAApC,EAAwD;AAC7D,QAAMC,IAAI,GAAGF,GAAb;AACAE,EAAAA,IAAI,CAACC,MAAL,CAAYF,KAAZ,EAAmB,CAAnB;AACA,SAAOC,IAAP;AACD;;AAEM,MAAME,OAAO,GAAG,CACrBF,IADqB,EAErBG,SAFqB,EAGrBC,IAHqB,EAIrBC,WAJqB,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/organisms/DataGrid/utils.ts"],"names":["removeElement","arr","index","data","splice","getData","rowsCount","page","rowsPerPage","pagination","slice"],"mappings":";;;;;;;;AAAO,SAASA,aAAT,CAA0BC,GAA1B,EAAoCC,KAApC,EAAwD;AAC7D,QAAMC,IAAI,GAAGF,GAAb;AACAE,EAAAA,IAAI,CAACC,MAAL,CAAYF,KAAZ,EAAmB,CAAnB;AACA,SAAOC,IAAP;AACD;;AAEM,MAAME,OAAO,GAAG,CACrBF,IADqB,EAErBG,SAFqB,EAGrBC,IAHqB,EAIrBC,WAJqB,EAKrBC,UALqB,KAOrBH,SAAS,IAAI,CAACG,UAAd,GACIN,IADJ,GAEIA,IAAI,CAACO,KAAL,CAAWH,IAAI,GAAGC,WAAlB,EAA+BD,IAAI,GAAGC,WAAP,GAAqBA,WAApD,CATC","sourcesContent":["export function removeElement<T>(arr: T[], index: number): T[] {\n const data = arr; // Sometimes looks like the data is removed from table, check if this is a bug. I'm copying the arr to a new variable for security reasons\n data.splice(index, 1);\n return data;\n}\n\nexport const getData = <Data>(\n data: Data[],\n rowsCount: number | undefined,\n page: number,\n rowsPerPage: number,\n pagination: boolean\n): Data[] =>\n rowsCount || !pagination\n ? data\n : data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);\n"],"file":"utils.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.7.
|
|
4
|
+
"version": "1.7.1",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
7
7
|
"license": "MIT",
|
|
@@ -32,5 +32,5 @@
|
|
|
32
32
|
"react-dom": ">=16.8.0",
|
|
33
33
|
"react-native-web": "^0.17.1"
|
|
34
34
|
},
|
|
35
|
-
"gitHead": "
|
|
35
|
+
"gitHead": "4348311e4287597e4d145255da8b1060d266fbf2"
|
|
36
36
|
}
|
|
@@ -5,11 +5,13 @@ import {
|
|
|
5
5
|
GroupButtonOption,
|
|
6
6
|
GroupButtonValue,
|
|
7
7
|
Icon,
|
|
8
|
+
Text,
|
|
8
9
|
} from '@tecsinapse/react-core';
|
|
9
10
|
import DataGrid from './DataGrid';
|
|
10
11
|
import { Input } from '../../atoms/Input';
|
|
11
12
|
import { Skeleton } from '../../atoms/Skeleton';
|
|
12
13
|
import { HeadersType } from './types';
|
|
14
|
+
import styled from '@emotion/styled';
|
|
13
15
|
|
|
14
16
|
export default {
|
|
15
17
|
title: 'Web/Data Grid',
|
|
@@ -214,3 +216,34 @@ ClientSide.args = {
|
|
|
214
216
|
exportFunction: () => alert('Export handler'),
|
|
215
217
|
pagination: true,
|
|
216
218
|
};
|
|
219
|
+
|
|
220
|
+
const EmptyContainer = styled('div')`
|
|
221
|
+
display: flex;
|
|
222
|
+
flex-direction: column;
|
|
223
|
+
align-items: center;
|
|
224
|
+
`;
|
|
225
|
+
|
|
226
|
+
const EmptyState = React.memo(() => (
|
|
227
|
+
<EmptyContainer>
|
|
228
|
+
<Icon name="eye-off-outline" type={'material-community'} size={'mega'} />
|
|
229
|
+
<Text typography="h2" fontWeight="bold">
|
|
230
|
+
There is nothing to see
|
|
231
|
+
</Text>
|
|
232
|
+
<Text typography="h5">You may have to take another action first</Text>
|
|
233
|
+
</EmptyContainer>
|
|
234
|
+
));
|
|
235
|
+
|
|
236
|
+
const TemplateEmpty: Story = args => {
|
|
237
|
+
return (
|
|
238
|
+
<DataGrid
|
|
239
|
+
headers={HEADERS}
|
|
240
|
+
data={[]}
|
|
241
|
+
rowKeyExtractor={() => ''}
|
|
242
|
+
toolbarTitle="Empty Grid"
|
|
243
|
+
emptyPlaceholder={<EmptyState />}
|
|
244
|
+
{...args}
|
|
245
|
+
/>
|
|
246
|
+
);
|
|
247
|
+
};
|
|
248
|
+
|
|
249
|
+
export const EmptyGrid = TemplateEmpty.bind({});
|
|
@@ -51,6 +51,8 @@ export interface DataGridProps<Data> {
|
|
|
51
51
|
skeletonComponent?: React.ReactNode;
|
|
52
52
|
/** CSS style spread to TableContainer */
|
|
53
53
|
style?: CSSProperties;
|
|
54
|
+
/** Empty state placeholder */
|
|
55
|
+
emptyPlaceholder?: React.ReactNode;
|
|
54
56
|
}
|
|
55
57
|
|
|
56
58
|
/** Note: Consider memoizing functions for a better performance */
|
|
@@ -77,6 +79,7 @@ const DataGrid = <Data extends unknown>({
|
|
|
77
79
|
loading = false,
|
|
78
80
|
skeletonComponent,
|
|
79
81
|
style,
|
|
82
|
+
emptyPlaceholder,
|
|
80
83
|
}: DataGridProps<Data>): JSX.Element => {
|
|
81
84
|
if (selectable && (!selectedRows || !onSelectedRows)) {
|
|
82
85
|
throw new Error(
|
|
@@ -133,19 +136,31 @@ const DataGrid = <Data extends unknown>({
|
|
|
133
136
|
|
|
134
137
|
{!loading ? (
|
|
135
138
|
<TBody>
|
|
136
|
-
{
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
139
|
+
{data.length > 0 ? (
|
|
140
|
+
getData(
|
|
141
|
+
data,
|
|
142
|
+
rowsCount,
|
|
143
|
+
page,
|
|
144
|
+
rowsPerPage,
|
|
145
|
+
pagination
|
|
146
|
+
).map(item => (
|
|
147
|
+
<Row
|
|
148
|
+
key={rowKeyExtractor(item)}
|
|
149
|
+
rowKeyExtractor={rowKeyExtractor}
|
|
150
|
+
handleSelect={handleSelect}
|
|
151
|
+
selectable={selectable}
|
|
152
|
+
headers={headers}
|
|
153
|
+
data={item}
|
|
154
|
+
checked={selectedRows?.some(
|
|
155
|
+
sel => rowKeyExtractor(sel) === rowKeyExtractor(item)
|
|
156
|
+
)}
|
|
157
|
+
/>
|
|
158
|
+
))
|
|
159
|
+
) : (
|
|
160
|
+
<tr>
|
|
161
|
+
<td colSpan={99}>{emptyPlaceholder}</td>
|
|
162
|
+
</tr>
|
|
163
|
+
)}
|
|
149
164
|
</TBody>
|
|
150
165
|
) : (
|
|
151
166
|
<TBody>
|
|
@@ -8,8 +8,9 @@ export const getData = <Data>(
|
|
|
8
8
|
data: Data[],
|
|
9
9
|
rowsCount: number | undefined,
|
|
10
10
|
page: number,
|
|
11
|
-
rowsPerPage: number
|
|
11
|
+
rowsPerPage: number,
|
|
12
|
+
pagination: boolean
|
|
12
13
|
): Data[] =>
|
|
13
|
-
rowsCount
|
|
14
|
+
rowsCount || !pagination
|
|
14
15
|
? data
|
|
15
16
|
: data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage);
|