Skip to content
This repository was archived by the owner on Apr 26, 2024. It is now read-only.

Commit f34f8c3

Browse files
author
Yago Pérez Vázquez
authored
Add data table component (#179)
- Add DataTable Component
1 parent 47209c6 commit f34f8c3

File tree

14 files changed

+210
-48
lines changed

14 files changed

+210
-48
lines changed

‎package.json‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@gnosis.pm/safe-react-components",
3-
"version": "0.9.5",
3+
"version": "0.9.6",
44
"description": "Gnosis UI components",
55
"main": "dist/index.min.js",
66
"typings": "dist/index.d.ts",
@@ -25,8 +25,8 @@
2525
"author": "Gnosis (https://gnosis.pm)",
2626
"license": "MIT",
2727
"dependencies": {
28-
"web3-utils": "^1.6.0",
29-
"react-media": "^1.10.0"
28+
"react-media": "^1.10.0",
29+
"web3-utils": "^1.6.0"
3030
},
3131
"devDependencies": {
3232
"@babel/core": "^7.16.0",
@@ -53,7 +53,6 @@
5353
"@typescript-eslint/eslint-plugin": "^4.31.0",
5454
"@typescript-eslint/parser": "^4.31.0",
5555
"copy-webpack-plugin": "^6.3.0",
56-
"react-qr-reader": "2.2.1",
5756
"eslint": "^7.32.0",
5857
"eslint-config-prettier": "^8.3.0",
5958
"eslint-plugin-prettier": "^4.0.0",
@@ -67,9 +66,11 @@
6766
"prettier": "^2.4.1",
6867
"react": "^16.14.0",
6968
"react-dom": "^16.14.0",
69+
"react-qr-reader": "2.2.1",
7070
"rimraf": "^3.0.2",
7171
"storybook-addon-react-docgen": "^1.2.42",
7272
"styled-components": "^5.3.3",
73+
"@mui/x-data-grid": "4.0.2",
7374
"ts-loader": "^8.2.0",
7475
"typescript": "^4.5.0",
7576
"url-loader": "^4.1.1",
@@ -79,6 +80,7 @@
7980
},
8081
"peerDependencies": {
8182
"@material-ui/core": "4.X.X",
83+
"@mui/x-data-grid": "^4.X.X",
8284
"react": "16.x.x || 17.x.x",
8385
"react-dom": "16.x.x || 17.x.x",
8486
"styled-components": "5.x.x"

‎src/dataDisplay/DataTable/dataTable.stories.tsx‎

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react';
2+
import { GridDensityTypes, GridRowsProp } from '@mui/x-data-grid';
3+
import DataTable from './index';
4+
5+
export default {
6+
title: 'Data Display/Data Table',
7+
component: DataTable,
8+
parameters: {
9+
componentSubtitle:
10+
'Advanced tables. Wrapper around Material UI x-data-grid',
11+
docs: {
12+
description: {
13+
component:
14+
'Check the <a href="https://v4.mui.com/components/data-grid" target="_blank">official DataGrid docs</a> for options and API',
15+
},
16+
},
17+
},
18+
};
19+
20+
const COLUMN_CONFIG = [
21+
{
22+
field: 'asset',
23+
headerName: 'Asset',
24+
flex: 1,
25+
},
26+
{
27+
field: 'amount',
28+
headerName: 'Amount',
29+
sortable: false,
30+
flex: 1,
31+
},
32+
{
33+
field: 'value',
34+
headerName: 'Value',
35+
flex: 1,
36+
},
37+
];
38+
39+
const randomIntFromInterval = (min: number, max: number): number => {
40+
return Math.floor(Math.random() * (max - min + 1) + min);
41+
};
42+
43+
const generateTestData = (howMany: number): GridRowsProp => {
44+
const testData = [];
45+
46+
for (let index = 0; index < howMany; index++) {
47+
testData.push({
48+
id: index,
49+
asset: `Token ${index}`,
50+
amount: randomIntFromInterval(1, 100),
51+
value: `$${randomIntFromInterval(0, 10000)}`,
52+
});
53+
}
54+
55+
return testData;
56+
};
57+
58+
export const DataGrid = (): React.ReactElement => {
59+
return (
60+
<DataTable
61+
rows={generateTestData(5)}
62+
columns={COLUMN_CONFIG}
63+
checkboxSelection
64+
hideFooter
65+
autoHeight
66+
density={GridDensityTypes.Comfortable}
67+
/>
68+
);
69+
};
70+
71+
export const PaginatedDataGrid = (): React.ReactElement => {
72+
return (
73+
<DataTable
74+
rows={generateTestData(20)}
75+
columns={COLUMN_CONFIG}
76+
pageSize={5}
77+
rowsPerPageOptions={[5]}
78+
disableColumnMenu
79+
checkboxSelection
80+
autoHeight
81+
density={GridDensityTypes.Comfortable}
82+
/>
83+
);
84+
};

‎src/dataDisplay/DataTable/index.tsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import { makeStyles } from '@material-ui/core/styles';
3+
import { DataGrid as DataGridMui, DataGridProps } from '@mui/x-data-grid';
4+
import theme from '../../theme';
5+
6+
const DataTable = (props: DataGridProps): React.ReactElement => {
7+
const classes = useStyles();
8+
9+
return <DataGridMui classes={classes} {...props} />;
10+
};
11+
12+
const useStyles = makeStyles({
13+
row: {
14+
'&.Mui-selected': {
15+
backgroundColor: 'transparent !important',
16+
},
17+
},
18+
cell: {
19+
'&:focus,&:focus-within,&.MuiDataGrid-cellCheckbox:focus': {
20+
backgroundColor: 'rgba(0, 0, 0, 0.04)',
21+
outline: 'none !important',
22+
},
23+
'&.MuiDataGrid-cellCheckbox .Mui-checked': {
24+
color: theme.colors.primary,
25+
},
26+
},
27+
columnHeader: {
28+
'&:focus,&:focus-within': {
29+
backgroundColor: 'rgba(0, 0, 0, 0.04)',
30+
outline: 'none !important',
31+
},
32+
'&.MuiDataGrid-columnHeader .Mui-checked': {
33+
color: theme.colors.primary,
34+
},
35+
},
36+
});
37+
38+
export default DataTable;

‎src/dataDisplay/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,4 @@ export * from './Tooltip';
1212
export { default as Text } from './Text';
1313
export { default as Title } from './Title';
1414
export { default as Section } from './Section';
15+
export { default as DataTable } from './DataTable';

‎src/inputs/AddressInput/AddressInput.stories.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -145,13 +145,13 @@ export const SimpleAddressInput = ({
145145
onError={() => {
146146
console.log('error:');
147147
}}
148-
onScan={(value) => {
148+
onScan={(value: string) => {
149149
if (value) {
150150
setAddress(value);
151151
setOpenQRModal(false);
152152
}
153153
}}
154-
onImageLoad={(address) => setAddress(address)}
154+
onImageLoad={(address: string) => setAddress(address)}
155155
/>
156156
</DialogContent>
157157
</Dialog>

‎src/typings/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,3 +10,4 @@ declare module '*.svg' {
1010

1111
declare module '*.ttf';
1212
declare module '*.woff2';
13+
declare module 'react-qr-reader';

‎tests/dataDisplay/DataTable/__snapshots__/dataTable.stories.storyshot‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`Storyshots Data Display/Data Table Data Grid 1`] = `null`;
4+
5+
exports[`Storyshots Data Display/Data Table Paginated Data Grid 1`] = `null`;

‎tests/inputs/AddressInput/__snapshots__/AddressInput.stories.storyshot‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] =
183183
>
184184
<span
185185
aria-disabled={false}
186-
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-57 MuiSwitch-switchBase MuiSwitch-colorSecondary"
186+
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-63 MuiSwitch-switchBase MuiSwitch-colorSecondary"
187187
onBlur={[Function]}
188188
onDragLeave={[Function]}
189189
onFocus={[Function]}
@@ -202,7 +202,7 @@ exports[`Storyshots Inputs/AddressInput Address Input With ENS Resolution 1`] =
202202
>
203203
<input
204204
checked={false}
205-
className="PrivateSwitchBase-input-60 MuiSwitch-input"
205+
className="PrivateSwitchBase-input-66 MuiSwitch-input"
206206
onChange={[Function]}
207207
type="checkbox"
208208
/>

‎tests/inputs/Checkbox/__snapshots__/checkbox.stories.storyshot‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`Storyshots Inputs/Checkbox Simple Checkbox 1`] = `
99
>
1010
<span
1111
aria-disabled={false}
12-
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-62 MuiCheckbox-root Component-root-61 PrivateSwitchBase-checked-63 Mui-checked"
12+
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-68 MuiCheckbox-root Component-root-67 PrivateSwitchBase-checked-69 Mui-checked"
1313
onBlur={[Function]}
1414
onDragLeave={[Function]}
1515
onFocus={[Function]}
@@ -28,7 +28,7 @@ exports[`Storyshots Inputs/Checkbox Simple Checkbox 1`] = `
2828
>
2929
<input
3030
checked={true}
31-
className="PrivateSwitchBase-input-65"
31+
className="PrivateSwitchBase-input-71"
3232
data-indeterminate={false}
3333
disabled={false}
3434
name="checkbox"
@@ -65,7 +65,7 @@ exports[`Storyshots Inputs/Checkbox With Error 1`] = `
6565
>
6666
<span
6767
aria-disabled={false}
68-
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-67 MuiCheckbox-root Component-root-66"
68+
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-73 MuiCheckbox-root Component-root-72"
6969
onBlur={[Function]}
7070
onDragLeave={[Function]}
7171
onFocus={[Function]}
@@ -84,7 +84,7 @@ exports[`Storyshots Inputs/Checkbox With Error 1`] = `
8484
>
8585
<input
8686
checked={false}
87-
className="PrivateSwitchBase-input-70"
87+
className="PrivateSwitchBase-input-76"
8888
data-indeterminate={false}
8989
disabled={false}
9090
name="checkboxWithError"

‎tests/inputs/Switch/__snapshots__/switch.stories.storyshot‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`Storyshots Inputs/Switch Switch Input 1`] = `
66
>
77
<span
88
aria-disabled={false}
9-
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-71 MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-checked-72 Mui-checked"
9+
className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-77 MuiSwitch-switchBase MuiSwitch-colorSecondary PrivateSwitchBase-checked-78 Mui-checked"
1010
onBlur={[Function]}
1111
onDragLeave={[Function]}
1212
onFocus={[Function]}
@@ -25,7 +25,7 @@ exports[`Storyshots Inputs/Switch Switch Input 1`] = `
2525
>
2626
<input
2727
checked={true}
28-
className="PrivateSwitchBase-input-74 MuiSwitch-input"
28+
className="PrivateSwitchBase-input-80 MuiSwitch-input"
2929
onChange={[Function]}
3030
type="checkbox"
3131
/>

0 commit comments

Comments
 (0)