Skip to content

Commit 174e7f4

Browse files
msmx-mnakagawamsmx-mnakagawa
committed
add onClick() actions for PicklistItems
1 parent dc701e8 commit 174e7f4

File tree

1 file changed

+113
-34
lines changed

1 file changed

+113
-34
lines changed

‎stories/Picklist.stories.tsx‎

Lines changed: 113 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,17 @@
1-
import React from 'react';
1+
import React, { ComponentProps } from 'react';
22
import { Picklist, PicklistItem } from '../src/scripts';
3-
import { ComponentMeta, ComponentStoryObj } from '@storybook/react';
3+
import { Meta, StoryObj } from '@storybook/react';
4+
5+
type StoryProps = ComponentProps<typeof Picklist> & {
6+
picklistItem1_onClick: ComponentProps<typeof PicklistItem>['onClick'];
7+
picklistItem2_onClick: ComponentProps<typeof PicklistItem>['onClick'];
8+
picklistItem3_onClick: ComponentProps<typeof PicklistItem>['onClick'];
9+
};
410

511
/**
612
*
713
*/
8-
const meta: ComponentMeta<typeof Picklist> = {
14+
const meta: Meta<StoryProps> = {
915
title: 'Picklist',
1016
component: Picklist,
1117
subcomponents: { PicklistItem },
@@ -14,6 +20,9 @@ const meta: ComponentMeta<typeof Picklist> = {
1420
onValueChange: { action: 'valueChange' },
1521
onBlur: { action: 'blur' },
1622
onComplete: { action: 'complete' },
23+
picklistItem1_onClick: { action: 'picklistItem1_click' },
24+
picklistItem2_onClick: { action: 'picklistItem2_click' },
25+
picklistItem3_onClick: { action: 'picklistItem3_click' },
1726
},
1827
parameters: {
1928
docs: {
@@ -27,15 +36,37 @@ export default meta;
2736
/**
2837
*
2938
*/
30-
export const ControlledWithKnobs: ComponentStoryObj<typeof Picklist> = {
39+
export const ControlledWithKnobs: StoryObj<StoryProps> = {
3140
name: 'Controlled with knobs',
41+
render: ({
42+
picklistItem1_onClick,
43+
picklistItem2_onClick,
44+
picklistItem3_onClick,
45+
...args
46+
}) => (
47+
<Picklist {...args}>
48+
<PicklistItem
49+
key='1'
50+
label='Picklist Item One'
51+
value='1'
52+
onClick={picklistItem1_onClick}
53+
/>
54+
<PicklistItem
55+
key='2'
56+
label='Picklist Item Two'
57+
value='2'
58+
onClick={picklistItem2_onClick}
59+
/>
60+
<PicklistItem
61+
key='3'
62+
label='Picklist Item Three'
63+
value='3'
64+
onClick={picklistItem3_onClick}
65+
/>
66+
</Picklist>
67+
),
3268
args: {
3369
label: 'Picklist Label',
34-
children: [
35-
<PicklistItem key='1' label='Picklist Item One' value='1' />,
36-
<PicklistItem key='2' label='Picklist Item Two' value='2' />,
37-
<PicklistItem key='3' label='Picklist Item Three' value='3' />,
38-
],
3970
},
4071
parameters: {
4172
docs: {
@@ -49,7 +80,8 @@ export const ControlledWithKnobs: ComponentStoryObj<typeof Picklist> = {
4980
/**
5081
*
5182
*/
52-
export const Default: ComponentStoryObj<typeof Picklist> = {
83+
export const Default: StoryObj<StoryProps> = {
84+
render: ControlledWithKnobs.render,
5385
args: {
5486
...ControlledWithKnobs.args,
5587
selectedText: 'Select item from here',
@@ -67,7 +99,8 @@ export const Default: ComponentStoryObj<typeof Picklist> = {
6799
/**
68100
*
69101
*/
70-
export const Required: ComponentStoryObj<typeof Picklist> = {
102+
export const Required: StoryObj<StoryProps> = {
103+
render: ControlledWithKnobs.render,
71104
args: {
72105
...ControlledWithKnobs.args,
73106
required: true,
@@ -85,7 +118,8 @@ export const Required: ComponentStoryObj<typeof Picklist> = {
85118
/**
86119
*
87120
*/
88-
export const Error: ComponentStoryObj<typeof Picklist> = {
121+
export const Error: StoryObj<StoryProps> = {
122+
render: ControlledWithKnobs.render,
89123
args: {
90124
...ControlledWithKnobs.args,
91125
required: true,
@@ -104,15 +138,40 @@ export const Error: ComponentStoryObj<typeof Picklist> = {
104138
/**
105139
*
106140
*/
107-
export const DisabledItems: ComponentStoryObj<typeof Picklist> = {
141+
export const DisabledItems: StoryObj<StoryProps> = {
142+
render: ({
143+
picklistItem1_onClick,
144+
picklistItem2_onClick,
145+
picklistItem3_onClick,
146+
...args
147+
}) => (
148+
<Picklist {...args}>
149+
<PicklistItem
150+
key='1'
151+
label='Picklist Item One'
152+
value='1'
153+
onClick={picklistItem1_onClick}
154+
disabled
155+
/>
156+
<PicklistItem
157+
key='2'
158+
label='Picklist Item Two'
159+
value='2'
160+
onClick={picklistItem2_onClick}
161+
disabled
162+
/>
163+
<PicklistItem
164+
key='3'
165+
label='Picklist Item Three'
166+
value='3'
167+
onClick={picklistItem3_onClick}
168+
disabled
169+
/>
170+
</Picklist>
171+
),
108172
args: {
109173
label: 'Picklist Label',
110174
defaultOpened: true,
111-
children: [
112-
<PicklistItem label='Picklist Item One' value='1' key='1' disabled />,
113-
<PicklistItem label='Picklist Item Two' value='2' key='2' disabled />,
114-
<PicklistItem label='Picklist Item Three' value='3' key='3' disabled />,
115-
],
116175
},
117176
parameters: {
118177
docs: {
@@ -126,7 +185,8 @@ export const DisabledItems: ComponentStoryObj<typeof Picklist> = {
126185
/**
127186
*
128187
*/
129-
export const Disabled: ComponentStoryObj<typeof Picklist> = {
188+
export const Disabled: StoryObj<StoryProps> = {
189+
render: ControlledWithKnobs.render,
130190
args: {
131191
...ControlledWithKnobs.args,
132192
disabled: true,
@@ -143,7 +203,8 @@ export const Disabled: ComponentStoryObj<typeof Picklist> = {
143203
/**
144204
*
145205
*/
146-
export const MenuSizeMedium: ComponentStoryObj<typeof Picklist> = {
206+
export const MenuSizeMedium: StoryObj<StoryProps> = {
207+
render: ControlledWithKnobs.render,
147208
name: 'Menu Size - Medium',
148209
args: {
149210
...ControlledWithKnobs.args,
@@ -163,7 +224,8 @@ export const MenuSizeMedium: ComponentStoryObj<typeof Picklist> = {
163224
/**
164225
*
165226
*/
166-
export const MenuSizeLarge: ComponentStoryObj<typeof Picklist> = {
227+
export const MenuSizeLarge: StoryObj<StoryProps> = {
228+
render: ControlledWithKnobs.render,
167229
name: 'Menu Size - Large',
168230
args: {
169231
...ControlledWithKnobs.args,
@@ -183,7 +245,8 @@ export const MenuSizeLarge: ComponentStoryObj<typeof Picklist> = {
183245
/**
184246
*
185247
*/
186-
export const SingleItemSelected: ComponentStoryObj<typeof Picklist> = {
248+
export const SingleItemSelected: StoryObj<StoryProps> = {
249+
render: ControlledWithKnobs.render,
187250
name: 'Single item selected',
188251
args: {
189252
...ControlledWithKnobs.args,
@@ -202,7 +265,8 @@ export const SingleItemSelected: ComponentStoryObj<typeof Picklist> = {
202265
/**
203266
*
204267
*/
205-
export const MultipleItemsSelected: ComponentStoryObj<typeof Picklist> = {
268+
export const MultipleItemsSelected: StoryObj<StoryProps> = {
269+
render: ControlledWithKnobs.render,
206270
name: 'Multiple items selected',
207271
args: {
208272
...ControlledWithKnobs.args,
@@ -223,7 +287,7 @@ export const MultipleItemsSelected: ComponentStoryObj<typeof Picklist> = {
223287
/**
224288
*
225289
*/
226-
export const DropdownScroll: ComponentStoryObj<typeof Picklist> = {
290+
export const DropdownScroll: StoryObj<StoryProps> = {
227291
args: {
228292
...ControlledWithKnobs.args,
229293
selectedText: 'Select item from here',
@@ -254,7 +318,8 @@ export const DropdownScroll: ComponentStoryObj<typeof Picklist> = {
254318
/**
255319
*
256320
*/
257-
export const WithTooltip: ComponentStoryObj<typeof Picklist> = {
321+
export const WithTooltip: StoryObj<StoryProps> = {
322+
render: ControlledWithKnobs.render,
258323
name: 'With tooltip',
259324
args: {
260325
...ControlledWithKnobs.args,
@@ -272,26 +337,40 @@ export const WithTooltip: ComponentStoryObj<typeof Picklist> = {
272337
/**
273338
*
274339
*/
275-
export const WithDividers: ComponentStoryObj<typeof Picklist> = {
340+
export const WithDividers: StoryObj<StoryProps> = {
276341
name: 'With Dividers',
277-
args: {
278-
label: 'Picklist Label',
279-
defaultOpened: true,
280-
children: [
342+
render: ({
343+
picklistItem1_onClick,
344+
picklistItem2_onClick,
345+
picklistItem3_onClick,
346+
...args
347+
}) => (
348+
<Picklist {...args}>
281349
<PicklistItem
282350
key='1'
283351
label='Picklist Item One'
284352
value='1'
353+
onClick={picklistItem1_onClick}
285354
divider='bottom'
286-
/>,
287-
<PicklistItem key='2' label='Picklist Item Two' value='2' />,
355+
/>
356+
<PicklistItem
357+
key='2'
358+
label='Picklist Item Two'
359+
value='2'
360+
onClick={picklistItem2_onClick}
361+
/>
288362
<PicklistItem
289363
key='3'
290364
label='Picklist Item Three'
291365
value='3'
366+
onClick={picklistItem3_onClick}
292367
divider='top'
293-
/>,
294-
],
368+
/>
369+
</Picklist>
370+
),
371+
args: {
372+
label: 'Picklist Label',
373+
defaultOpened: true,
295374
},
296375
parameters: {
297376
docs: {

0 commit comments

Comments
 (0)