Skip to content

Commit 20da76c

Browse files
rwieruchrwieruch
committed
add editabler storties
1 parent 6e65556 commit 20da76c

File tree

10 files changed

+959
-8
lines changed

10 files changed

+959
-8
lines changed

‎.storybook/preview.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ const Features = [
1919
'Horizontal Scroll',
2020
'Pin',
2121
'Virtualized',
22+
'Editable',
2223
'Data Grid',
2324
'Column Hiding',
2425
'Column Ordering',

‎.storybook/stories/Compact/editable.js

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
import * as React from 'react';
2+
3+
import { CompactTable } from '@table-library/react-table-library/compact';
4+
5+
import { DocumentationSee } from '../documentation';
6+
import { nodes } from '../data';
7+
8+
const key = 'Editable';
9+
10+
const Component = () => {
11+
const [data, setData] = React.useState({ nodes });
12+
13+
const handleUpdate = (value, id, property) => {
14+
setData((state) => ({
15+
...state,
16+
nodes: state.nodes.map((node) => {
17+
if (node.id === id) {
18+
return { ...node, [property]: value };
19+
} else {
20+
return node;
21+
}
22+
}),
23+
}));
24+
};
25+
26+
const COLUMNS = [
27+
{
28+
label: 'Task',
29+
renderCell: (item) => (
30+
<input
31+
type="text"
32+
style={{ width: '100%', border: 'none', fontSize: '1rem', padding: 0, margin: 0 }}
33+
value={item.name}
34+
onChange={(event) => handleUpdate(event.target.value, item.id, 'name')}
35+
/>
36+
),
37+
},
38+
{
39+
label: 'Deadline',
40+
renderCell: (item) => (
41+
<input
42+
type="date"
43+
style={{ width: '100%', border: 'none', fontSize: '1rem', padding: 0, margin: 0 }}
44+
value={item.deadline.toISOString().substr(0, 10)}
45+
onChange={(event) => handleUpdate(new Date(event.target.value), item.id, 'deadline')}
46+
/>
47+
),
48+
},
49+
{
50+
label: 'Type',
51+
renderCell: (item) => (
52+
<select
53+
style={{ width: '100%', border: 'none', fontSize: '1rem', padding: 0, margin: 0 }}
54+
value={item.type}
55+
onChange={(event) => handleUpdate(event.target.value, item.id, 'type')}
56+
>
57+
<option value="SETUP">SETUP</option>
58+
<option value="LEARN">LEARN</option>
59+
</select>
60+
),
61+
},
62+
{
63+
label: 'Complete',
64+
renderCell: (item) => (
65+
<input
66+
type="checkbox"
67+
checked={item.isComplete}
68+
onChange={(event) => handleUpdate(event.target.checked, item.id, 'isComplete')}
69+
/>
70+
),
71+
},
72+
{
73+
label: 'Tasks',
74+
renderCell: (item) => (
75+
<input
76+
type="number"
77+
style={{ width: '100%', border: 'none', fontSize: '1rem', padding: 0, margin: 0 }}
78+
value={typeof item.nodes === 'number' ? item.nodes : item.nodes?.length}
79+
onChange={(event) => handleUpdate(Number(event.target.value), item.id, 'nodes')}
80+
/>
81+
),
82+
},
83+
];
84+
85+
return (
86+
<>
87+
<CompactTable columns={COLUMNS} data={data} />
88+
89+
<br />
90+
<DocumentationSee anchor={'Features/' + key} />
91+
</>
92+
);
93+
};
94+
95+
const code = `
96+
import * as React from 'react';
97+
98+
import { CompactTable } from '@table-library/react-table-library/compact';
99+
100+
import { DocumentationSee } from '../documentation';
101+
import { nodes } from '../data';
102+
103+
const key = 'Editable';
104+
105+
const Component = () => {
106+
const [data, setData] = React.useState({ nodes });
107+
108+
const handleUpdate = (value, id, property) => {
109+
setData((state) => ({
110+
...state,
111+
nodes: state.nodes.map((node) => {
112+
if (node.id === id) {
113+
return { ...node, [property]: value };
114+
} else {
115+
return node;
116+
}
117+
}),
118+
}));
119+
};
120+
121+
const COLUMNS = [
122+
{
123+
label: 'Task',
124+
renderCell: (item) => (
125+
<input
126+
type="text"
127+
style={{ width: '100%', border: 'none', fontSize: '1rem', padding: 0, margin: 0 }}
128+
value={item.name}
129+
onChange={(event) => handleUpdate(event.target.value, item.id, 'name')}
130+
/>
131+
),
132+
},
133+
{
134+
label: 'Deadline',
135+
renderCell: (item) => (
136+
<input
137+
type="date"
138+
style={{ width: '100%', border: 'none', fontSize: '1rem', padding: 0, margin: 0 }}
139+
value={item.deadline.toISOString().substr(0, 10)}
140+
onChange={(event) => handleUpdate(new Date(event.target.value), item.id, 'deadline')}
141+
/>
142+
),
143+
},
144+
{
145+
label: 'Type',
146+
renderCell: (item) => (
147+
<select
148+
style={{ width: '100%', border: 'none', fontSize: '1rem', padding: 0, margin: 0 }}
149+
value={item.type}
150+
onChange={(event) => handleUpdate(event.target.value, item.id, 'type')}
151+
>
152+
<option value="SETUP">SETUP</option>
153+
<option value="LEARN">LEARN</option>
154+
</select>
155+
),
156+
},
157+
{
158+
label: 'Complete',
159+
renderCell: (item) => (
160+
<input
161+
type="checkbox"
162+
checked={item.isComplete}
163+
onChange={(event) => handleUpdate(event.target.checked, item.id, 'isComplete')}
164+
/>
165+
),
166+
},
167+
{
168+
label: 'Tasks',
169+
renderCell: (item) => (
170+
<input
171+
type="number"
172+
style={{ width: '100%', border: 'none', fontSize: '1rem', padding: 0, margin: 0 }}
173+
value={typeof item.nodes === 'number' ? item.nodes : item.nodes?.length}
174+
onChange={(event) => handleUpdate(Number(event.target.value), item.id, 'nodes')}
175+
/>
176+
),
177+
},
178+
];
179+
180+
return (
181+
<>
182+
<CompactTable columns={COLUMNS} data={data} />
183+
184+
<br />
185+
<DocumentationSee anchor={'Features/' + key} />
186+
</>
187+
);
188+
};
189+
`;
190+
191+
export { key, Component, code };

‎.storybook/stories/Compact/index.story.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ import * as PaginationStory from './pagination';
1717
import * as FixedHeaderStory from './fixed-header';
1818
import * as HorizontalScrollStory from './horizontal-scroll';
1919
import * as PinStory from './pin';
20-
import * as TenThousandRowsStory from './virtualized';
20+
import * as VirtualizedStory from './virtualized';
21+
import * as EditableStory from './editable';
2122
// import * as DataGridStory from './data-grid';
2223
import * as ColumnHideStory from './column-hide';
2324
import * as ColumnOrderStory from './column-order';
@@ -38,7 +39,8 @@ const stories = [
3839
FixedHeaderStory,
3940
HorizontalScrollStory,
4041
PinStory,
41-
TenThousandRowsStory,
42+
VirtualizedStory,
43+
EditableStory,
4244
// DataGridStory,
4345
ColumnHideStory,
4446
ColumnOrderStory,

‎.storybook/stories/Features/editable.story.js

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import * as React from 'react';
2+
import { storiesOf } from '@storybook/react';
3+
4+
import {
5+
Table,
6+
Header,
7+
HeaderRow,
8+
Body,
9+
Row,
10+
HeaderCell,
11+
Cell,
12+
} from '@table-library/react-table-library/table';
13+
14+
import { nodes } from '../data';
15+
16+
storiesOf('Features/Editable', module)
17+
.addParameters({
18+
component: Table,
19+
subcomponents: {
20+
Header,
21+
HeaderRow,
22+
Body,
23+
Row,
24+
HeaderCell,
25+
Cell,
26+
},
27+
})
28+
.add('base', () => {
29+
const [data, setData] = React.useState({ nodes });
30+
31+
const handleUpdate = (value, id, property) => {
32+
setData((state) => ({
33+
...state,
34+
nodes: state.nodes.map((node) => {
35+
if (node.id === id) {
36+
return { ...node, [property]: value };
37+
} else {
38+
return node;
39+
}
40+
}),
41+
}));
42+
};
43+
44+
return (
45+
<Table data={data}>
46+
{(tableList) => (
47+
<>
48+
<Header>
49+
<HeaderRow>
50+
<HeaderCell>Task</HeaderCell>
51+
<HeaderCell>Deadline</HeaderCell>
52+
<HeaderCell>Type</HeaderCell>
53+
<HeaderCell>Complete</HeaderCell>
54+
<HeaderCell>Tasks</HeaderCell>
55+
</HeaderRow>
56+
</Header>
57+
58+
<Body>
59+
{tableList.map((item) => (
60+
<Row key={item.id} item={item}>
61+
<Cell>
62+
<input
63+
type="text"
64+
style={{
65+
width: '100%',
66+
border: 'none',
67+
fontSize: '1rem',
68+
padding: 0,
69+
margin: 0,
70+
}}
71+
value={item.name}
72+
onChange={(event) => handleUpdate(event.target.value, item.id, 'name')}
73+
/>
74+
</Cell>
75+
<Cell>
76+
<input
77+
type="date"
78+
style={{
79+
width: '100%',
80+
border: 'none',
81+
fontSize: '1rem',
82+
padding: 0,
83+
margin: 0,
84+
}}
85+
value={item.deadline.toISOString().substr(0, 10)}
86+
onChange={(event) =>
87+
handleUpdate(new Date(event.target.value), item.id, 'deadline')
88+
}
89+
/>
90+
</Cell>
91+
<Cell>
92+
<select
93+
style={{
94+
width: '100%',
95+
border: 'none',
96+
fontSize: '1rem',
97+
padding: 0,
98+
margin: 0,
99+
}}
100+
value={item.type}
101+
onChange={(event) => handleUpdate(event.target.value, item.id, 'type')}
102+
>
103+
<option value="SETUP">SETUP</option>
104+
<option value="LEARN">LEARN</option>
105+
</select>
106+
</Cell>
107+
<Cell>
108+
<input
109+
type="checkbox"
110+
checked={item.isComplete}
111+
onChange={(event) =>
112+
handleUpdate(event.target.checked, item.id, 'isComplete')
113+
}
114+
/>
115+
</Cell>
116+
<Cell>
117+
<input
118+
type="number"
119+
style={{
120+
width: '100%',
121+
border: 'none',
122+
fontSize: '1rem',
123+
padding: 0,
124+
margin: 0,
125+
}}
126+
value={typeof item.nodes === 'number' ? item.nodes : item.nodes?.length}
127+
onChange={(event) =>
128+
handleUpdate(Number(event.target.value), item.id, 'nodes')
129+
}
130+
/>
131+
</Cell>
132+
</Row>
133+
))}
134+
</Body>
135+
</>
136+
)}
137+
</Table>
138+
);
139+
})
140+
.add('documentation', () => (
141+
<ul>
142+
<li>
143+
<a href="https://github.com/table-library/react-table-library/tree/master/.storybook/stories">
144+
Story Code
145+
</a>
146+
</li>
147+
</ul>
148+
));

0 commit comments

Comments
 (0)