Skip to content

Commit a85ffd5

Browse files
rwieruchrwieruch
committed
feat(Demo) demo story, pinLeft/pinRight, inheritLayout
1 parent 72c2b3c commit a85ffd5

29 files changed

+1163
-100
lines changed

‎.storybook/stories/Compact/data-grid.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -41,15 +41,15 @@ const Component = () => {
4141
cellProps: {
4242
style: (item) => ({ backgroundColor: valueToColor(item.cellA) }),
4343
},
44-
pin: true,
44+
pinLeft: true,
4545
},
4646
{
4747
label: 'B',
4848
renderCell: (item) => item.cellB,
4949
cellProps: {
5050
style: (item) => ({ backgroundColor: valueToColor(item.cellB) }),
5151
},
52-
pin: true,
52+
pinLeft: true,
5353
},
5454
{
5555
label: 'C',
@@ -195,15 +195,15 @@ const Component = () => {
195195
cellProps: {
196196
style: (item) => ({ backgroundColor: valueToColor(item.cellA) }),
197197
},
198-
pin: true,
198+
pinLeft: true,
199199
},
200200
{
201201
label: 'B',
202202
renderCell: (item) => item.cellB,
203203
cellProps: {
204204
style: (item) => ({ backgroundColor: valueToColor(item.cellB) }),
205205
},
206-
pin: true,
206+
pinLeft: true,
207207
},
208208
{
209209
label: 'C',

‎.storybook/stories/Compact/fixed-column.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@ const Component = () => {
4040
});
4141

4242
const COLUMNS = [
43-
{ label: 'Task', renderCell: (item) => item.name, pin: true },
43+
{ label: 'Task', renderCell: (item) => item.name, pinLeft: true },
4444
{
4545
label: 'Deadline',
4646
renderCell: (item) =>
@@ -49,7 +49,7 @@ const Component = () => {
4949
month: '2-digit',
5050
day: '2-digit',
5151
}),
52-
pin: true,
52+
pinLeft: true,
5353
},
5454
{ label: 'Type', renderCell: (item) => item.type },
5555
{
@@ -117,7 +117,7 @@ const Component = () => {
117117
});
118118
119119
const COLUMNS = [
120-
{ label: 'Task', renderCell: (item) => item.name, pin: true },
120+
{ label: 'Task', renderCell: (item) => item.name, pinLeft: true },
121121
{
122122
label: 'Deadline',
123123
renderCell: (item) =>
@@ -126,7 +126,7 @@ const Component = () => {
126126
month: '2-digit',
127127
day: '2-digit',
128128
}),
129-
pin: true,
129+
pinLeft: true,
130130
},
131131
{ label: 'Type', renderCell: (item) => item.type },
132132
{

‎.storybook/stories/Composites/resize-fixed-column.story.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@ storiesOf('Composites/Resize & Fixed Column', module)
6161
<>
6262
<Header>
6363
<HeaderRow>
64-
<HeaderCell resize pin>
64+
<HeaderCell resize pinLeft>
6565
Task
6666
</HeaderCell>
67-
<HeaderCell resize pin>
67+
<HeaderCell resize pinLeft>
6868
Deadline
6969
</HeaderCell>
7070
<HeaderCell resize>Type</HeaderCell>
@@ -76,8 +76,8 @@ storiesOf('Composites/Resize & Fixed Column', module)
7676
<Body>
7777
{tableList.map((item) => (
7878
<Row key={item.id} item={item}>
79-
<Cell pin>{item.name}</Cell>
80-
<Cell pin>
79+
<Cell pinLeft>{item.name}</Cell>
80+
<Cell pinLeft>
8181
{item.deadline.toLocaleDateString('en-US', {
8282
year: 'numeric',
8383
month: '2-digit',

‎.storybook/stories/Features/data-grid.story.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ const WithStickyHeader = React.forwardRef(({ children, ...rest }, ref) => (
2525
<div ref={ref} {...rest}>
2626
<Header>
2727
<HeaderRow>
28-
<HeaderCell pin>A</HeaderCell>
29-
<HeaderCell pin>B</HeaderCell>
28+
<HeaderCell pinLeft>A</HeaderCell>
29+
<HeaderCell pinLeft>B</HeaderCell>
3030
<HeaderCell>C</HeaderCell>
3131
<HeaderCell>D</HeaderCell>
3232
<HeaderCell>E</HeaderCell>
@@ -121,13 +121,13 @@ storiesOf('Features/Data Grid', module)
121121
<Row item={data.items[index]}>
122122
<Cell
123123
style={{ backgroundColor: valueToColor(data.items[index].cellA) }}
124-
pin
124+
pinLeft
125125
>
126126
{data.items[index].cellA}
127127
</Cell>
128128
<Cell
129129
style={{ backgroundColor: valueToColor(data.items[index].cellB) }}
130-
pin
130+
pinLeft
131131
>
132132
{data.items[index].cellB}
133133
</Cell>

‎.storybook/stories/Features/fixed-column.story.js

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@ storiesOf('Features/Fixed Column', module)
6363
<>
6464
<Header>
6565
<HeaderRow>
66-
<HeaderCell pin>Task</HeaderCell>
67-
<HeaderCell pin>Deadline</HeaderCell>
66+
<HeaderCell pinLeft>Task</HeaderCell>
67+
<HeaderCell pinLeft>Deadline</HeaderCell>
6868
<HeaderCell>Type</HeaderCell>
6969
<HeaderCell>Complete</HeaderCell>
7070
<HeaderCell>Tasks</HeaderCell>
@@ -74,8 +74,8 @@ storiesOf('Features/Fixed Column', module)
7474
<Body>
7575
{tableList.map((item) => (
7676
<Row key={item.id} item={item}>
77-
<Cell pin>{item.name}</Cell>
78-
<Cell pin>
77+
<Cell pinLeft>{item.name}</Cell>
78+
<Cell pinLeft>
7979
{item.deadline.toLocaleDateString('en-US', {
8080
year: 'numeric',
8181
month: '2-digit',
@@ -139,18 +139,18 @@ storiesOf('Features/Fixed Column', module)
139139
<>
140140
<Header>
141141
<HeaderRow>
142-
<HeaderCell pin>Task</HeaderCell>
142+
<HeaderCell pinLeft>Task</HeaderCell>
143143
<HeaderCell>Deadline</HeaderCell>
144144
<HeaderCell>Type</HeaderCell>
145145
<HeaderCell>Complete</HeaderCell>
146-
<HeaderCell pin>Tasks</HeaderCell>
146+
<HeaderCell pinRight>Tasks</HeaderCell>
147147
</HeaderRow>
148148
</Header>
149149

150150
<Body>
151151
{tableList.map((item) => (
152152
<Row key={item.id} item={item}>
153-
<Cell pin>{item.name}</Cell>
153+
<Cell pinLeft>{item.name}</Cell>
154154
<Cell>
155155
{item.deadline.toLocaleDateString('en-US', {
156156
year: 'numeric',
@@ -160,7 +160,7 @@ storiesOf('Features/Fixed Column', module)
160160
</Cell>
161161
<Cell>{item.type}</Cell>
162162
<Cell>{item.isComplete.toString()}</Cell>
163-
<Cell pin>{item.nodes?.length}</Cell>
163+
<Cell pinRight>{item.nodes?.length}</Cell>
164164
</Row>
165165
))}
166166
</Body>
@@ -214,8 +214,8 @@ storiesOf('Features/Fixed Column', module)
214214
<>
215215
<Header>
216216
<HeaderRow>
217-
<HeaderCell pin>Task</HeaderCell>
218-
<HeaderCell pin>Deadline</HeaderCell>
217+
<HeaderCell pinLeft>Task</HeaderCell>
218+
<HeaderCell pinLeft>Deadline</HeaderCell>
219219
<HeaderCell>Type</HeaderCell>
220220
<HeaderCell>Complete</HeaderCell>
221221
<HeaderCell>Tasks</HeaderCell>
@@ -225,8 +225,8 @@ storiesOf('Features/Fixed Column', module)
225225
<Body>
226226
{tableList.map((item) => (
227227
<Row key={item.id} item={item}>
228-
<Cell pin>{item.name}</Cell>
229-
<Cell pin>
228+
<Cell pinLeft>{item.name}</Cell>
229+
<Cell pinLeft>
230230
{item.deadline.toLocaleDateString('en-US', {
231231
year: 'numeric',
232232
month: '2-digit',

0 commit comments

Comments
 (0)