Skip to content

Commit f2127d1

Browse files
mgadewollmgadewoll
committed
docs(stroybook): add stateful wrapper to EuiKeyPadMenu stories
1 parent 1a54a17 commit f2127d1

1 file changed

Lines changed: 92 additions & 14 deletions

File tree

‎src/components/key_pad_menu/key_pad_menu.stories.tsx‎

Lines changed: 92 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,12 @@
66
* Side Public License, v 1.
77
*/
88

9-
import React from 'react';
9+
import React, { useState } from 'react';
1010
import type { Meta, StoryObj } from '@storybook/react';
11+
import { action } from '@storybook/addon-actions';
1112

1213
import { EuiKeyPadMenu, EuiKeyPadMenuProps } from './key_pad_menu';
13-
import { EuiKeyPadMenuItem } from './key_pad_menu_item';
14+
import { EuiKeyPadMenuItem, EuiKeyPadMenuItemProps } from './key_pad_menu_item';
1415
import { EuiIcon } from '../icon';
1516

1617
const meta: Meta<EuiKeyPadMenuProps> = {
@@ -21,6 +22,55 @@ const meta: Meta<EuiKeyPadMenuProps> = {
2122
export default meta;
2223
type Story = StoryObj<EuiKeyPadMenuProps>;
2324

25+
const onChange = action('onChange');
26+
27+
const StatefulKeyPadMenu = (
28+
props: EuiKeyPadMenuProps & { checkableType: 'single' | 'multi' }
29+
) => {
30+
const { children, checkableType, ...rest } = props;
31+
const firstItem = Array.isArray(children) ? children[0] : children;
32+
const firstItemId: string = firstItem.props?.id ?? '';
33+
34+
const [selectedItem, setSelectedItem] = useState(firstItemId);
35+
const [selectedItems, setSelectedItems] = useState([firstItemId]);
36+
37+
const handleOnChange = (id: string) => {
38+
if (checkableType === 'single') {
39+
setSelectedItem(id);
40+
} else {
41+
setSelectedItems((selectedItems): string[] => {
42+
if (selectedItems.includes(id)) {
43+
return selectedItems.filter((itemId) => itemId !== id);
44+
}
45+
46+
return [...selectedItems, id];
47+
});
48+
}
49+
};
50+
51+
return (
52+
<EuiKeyPadMenu {...rest}>
53+
{React.Children.map(children, (child) => {
54+
if (!child) return null;
55+
56+
return (
57+
React.isValidElement(child) &&
58+
React.cloneElement(child, {
59+
onChange: (args: any) => {
60+
handleOnChange(child.props.id);
61+
onChange(args);
62+
},
63+
isSelected:
64+
checkableType === 'single'
65+
? selectedItem === child.props.id
66+
: selectedItems.includes(child.props.id),
67+
} as Partial<EuiKeyPadMenuItemProps>)
68+
);
69+
})}
70+
</EuiKeyPadMenu>
71+
);
72+
};
73+
2474
export const Playground: Story = {
2575
args: {
2676
children: [
@@ -50,51 +100,58 @@ export const CheckableSingle: Story = {
50100
args: {
51101
children: [
52102
<EuiKeyPadMenuItem
103+
id="keyPadMenuItem-0"
53104
label="Dashboard"
54105
checkable="single"
55106
name="single-checkable-radio"
56-
onChange={() => {}}
107+
onChange={onChange}
57108
>
58109
<EuiIcon type="dashboardApp" size="l" />
59110
</EuiKeyPadMenuItem>,
60111
<EuiKeyPadMenuItem
112+
id="keyPadMenuItem-1"
61113
label="Canvas"
62114
checkable="single"
63115
name="single-checkable-radio"
64-
onChange={() => {}}
116+
onChange={onChange}
65117
isSelected
66118
>
67119
<EuiIcon type="canvasApp" size="l" />
68120
</EuiKeyPadMenuItem>,
69121
<EuiKeyPadMenuItem
122+
id="keyPadMenuItem-2"
70123
label="Lens"
71124
checkable="single"
72125
name="single-checkable-radio"
73-
onChange={() => {}}
126+
onChange={onChange}
74127
>
75128
<EuiIcon type="lensApp" size="l" />
76129
</EuiKeyPadMenuItem>,
77130
<EuiKeyPadMenuItem
131+
id="keyPadMenuItem-3"
78132
label="Visualize"
79133
checkable="single"
80134
name="single-checkable-radio"
81-
onChange={() => {}}
135+
isDisabled
136+
onChange={onChange}
82137
>
83138
<EuiIcon type="visualizeApp" size="l" />
84139
</EuiKeyPadMenuItem>,
85140
<EuiKeyPadMenuItem
141+
id="keyPadMenuItem-4"
86142
label="Graph"
87143
checkable="single"
88144
name="single-checkable-radio"
89-
onChange={() => {}}
145+
onChange={onChange}
90146
>
91147
<EuiIcon type="graphApp" size="l" />
92148
</EuiKeyPadMenuItem>,
93149
<EuiKeyPadMenuItem
150+
id="keyPadMenuItem-5"
94151
label="Advanced Settings"
95152
checkable="single"
96153
name="single-checkable-radio"
97-
onChange={() => {}}
154+
onChange={onChange}
98155
>
99156
<EuiIcon type="advancedSettingsApp" size="l" />
100157
</EuiKeyPadMenuItem>,
@@ -103,43 +160,61 @@ export const CheckableSingle: Story = {
103160
legend: 'Single checkable EuiKeyPadMenu',
104161
},
105162
},
163+
render: ({ ...args }) => (
164+
<StatefulKeyPadMenu {...args} checkableType="single" />
165+
),
106166
};
107167

108168
export const CheckableMulti: Story = {
109169
args: {
110170
children: [
111171
<EuiKeyPadMenuItem
172+
id="keyPadMenuItem-0"
112173
label="Dashboard"
113174
checkable="multi"
114-
onChange={() => {}}
175+
onChange={onChange}
115176
>
116177
<EuiIcon type="dashboardApp" size="l" />
117178
</EuiKeyPadMenuItem>,
118179
<EuiKeyPadMenuItem
180+
id="keyPadMenuItem-1"
119181
label="Canvas"
120182
checkable="multi"
121-
onChange={() => {}}
183+
onChange={onChange}
122184
isSelected
123185
>
124186
<EuiIcon type="canvasApp" size="l" />
125187
</EuiKeyPadMenuItem>,
126-
<EuiKeyPadMenuItem label="Lens" checkable="multi" onChange={() => {}}>
188+
<EuiKeyPadMenuItem
189+
id="keyPadMenuItem-2"
190+
label="Lens"
191+
checkable="multi"
192+
onChange={onChange}
193+
>
127194
<EuiIcon type="lensApp" size="l" />
128195
</EuiKeyPadMenuItem>,
129196
<EuiKeyPadMenuItem
197+
id="keyPadMenuItem-3"
130198
label="Visualize"
131199
checkable="multi"
132-
onChange={() => {}}
200+
isDisabled
201+
onChange={onChange}
133202
>
134203
<EuiIcon type="visualizeApp" size="l" />
135204
</EuiKeyPadMenuItem>,
136-
<EuiKeyPadMenuItem label="Graph" checkable="multi" onChange={() => {}}>
205+
<EuiKeyPadMenuItem
206+
id="keyPadMenuItem-4"
207+
label="Graph"
208+
checkable="multi"
209+
onChange={onChange}
210+
>
137211
<EuiIcon type="graphApp" size="l" />
138212
</EuiKeyPadMenuItem>,
139213
<EuiKeyPadMenuItem
214+
id="keyPadMenuItem-5"
140215
label="Advanced Settings"
141216
checkable="multi"
142-
onChange={() => {}}
217+
onChange={onChange}
143218
>
144219
<EuiIcon type="advancedSettingsApp" size="l" />
145220
</EuiKeyPadMenuItem>,
@@ -148,4 +223,7 @@ export const CheckableMulti: Story = {
148223
legend: 'Multi checkable EuiKeyPadMenu',
149224
},
150225
},
226+
render: ({ ...args }) => (
227+
<StatefulKeyPadMenu {...args} checkableType="multi" />
228+
),
151229
};

0 commit comments

Comments
 (0)