Skip to content

Commit cc2d62f

Browse files
ariserariser
authored
Select: Add ItemDescription component to show extra data in options (#610)
* feat(Select): add ItemDescription component to show extra data in options * feat(Select): accept description in options prop
1 parent fded710 commit cc2d62f

10 files changed

+246
-341
lines changed

‎src/components/Select/CheckboxMultiSelect.stories.tsx

Lines changed: 71 additions & 119 deletions
Original file line numberDiff line numberDiff line change
@@ -1,137 +1,89 @@
1-
import { MultiSelectProps } from "..";
1+
import { useEffect, useState } from "react";
2+
3+
import { Meta, StoryObj } from "@storybook/react";
4+
25
import { CheckboxMultiSelect } from "./CheckboxMultiSelect";
36
import { selectOptions } from "./selectOptions";
4-
import { useEffect, useState } from "react";
5-
interface Props extends Omit<MultiSelectProps, "value"> {
6-
value: string;
7-
childrenType: "children" | "options";
8-
}
9-
const CheckboxMultiSelectExample = ({ childrenType, value, ...props }: Props) => {
10-
const [selectedValues, setSelectedValues] = useState(
11-
value ? value.split(",") : undefined
12-
);
13-
useEffect(() => {
14-
setSelectedValues(value ? value.split(",") : undefined);
15-
}, [value]);
167

17-
if (childrenType === "options") {
8+
const meta: Meta<typeof CheckboxMultiSelect> = {
9+
component: CheckboxMultiSelect,
10+
title: "Forms/CheckboxMultiSelect",
11+
tags: ["form-field", "select", "autodocs"],
12+
};
13+
14+
export default meta;
15+
16+
export const OptionsAsChildren: StoryObj<typeof CheckboxMultiSelect> = {
17+
args: {
18+
label: "Label",
19+
value: ["content1"],
20+
showSearch: false,
21+
selectLabel: "Columns",
22+
},
23+
render: ({ value, ...props }) => {
24+
const [selectedValues, setSelectedValues] = useState(value);
25+
26+
useEffect(() => {
27+
setSelectedValues(value);
28+
}, [value]);
29+
1830
return (
1931
<CheckboxMultiSelect
20-
value={selectedValues}
21-
options={selectOptions}
22-
onSelect={value => setSelectedValues(value)}
23-
selectLabel="Columns;"
2432
{...props}
25-
/>
26-
);
27-
}
28-
return (
29-
<CheckboxMultiSelect
30-
value={selectedValues}
31-
onSelect={value => setSelectedValues(value)}
32-
selectLabel="Columns"
33-
{...props}
34-
>
35-
<CheckboxMultiSelect.Group heading="Group label">
33+
value={selectedValues}
34+
onSelect={setSelectedValues}
35+
>
36+
<CheckboxMultiSelect.Group heading="Group label">
37+
<CheckboxMultiSelect.Item
38+
value="content0"
39+
icon="user"
40+
iconDir="start"
41+
>
42+
Content0
43+
</CheckboxMultiSelect.Item>
44+
</CheckboxMultiSelect.Group>
45+
<div>
46+
<CheckboxMultiSelect.Item value="content1">
47+
Content1 long text content
48+
</CheckboxMultiSelect.Item>
49+
</div>
3650
<CheckboxMultiSelect.Item
37-
value="content0"
38-
icon="user"
39-
iconDir="start"
40-
>
41-
Content0
51+
value="content2"
52+
label="Content2"
53+
/>
54+
<CheckboxMultiSelect.Item value="content3">
55+
Content3
56+
<CheckboxMultiSelect.ItemDescription>
57+
Description of Content3
58+
</CheckboxMultiSelect.ItemDescription>
4259
</CheckboxMultiSelect.Item>
43-
</CheckboxMultiSelect.Group>
44-
<div>
45-
<CheckboxMultiSelect.Item value="content1">
46-
Content1 long text content
47-
</CheckboxMultiSelect.Item>
48-
</div>
49-
<CheckboxMultiSelect.Item
50-
value="content2"
51-
label="Content2"
52-
/>
53-
<CheckboxMultiSelect.Item value="content3">Content3</CheckboxMultiSelect.Item>
54-
</CheckboxMultiSelect>
55-
);
56-
};
57-
export default {
58-
component: CheckboxMultiSelectExample,
59-
title: "Forms/CheckboxMultiSelect",
60-
tags: ["form-field", "select", "autodocs"],
61-
argTypes: {
62-
label: { control: "text" },
63-
disabled: { control: "boolean" },
64-
sortable: { control: "boolean" },
65-
error: { control: "text" },
66-
value: { control: "text" },
67-
defaultValue: { control: "text" },
68-
childrenType: { control: "radio", options: ["children", "options"] },
69-
name: { control: "text" },
70-
required: { control: "boolean" },
71-
showSearch: { control: "boolean" },
72-
form: { control: "text" },
73-
allowCreateOption: { control: "boolean" },
74-
showCheck: { control: "boolean" },
75-
orientation: { control: "inline-radio", options: ["horizontal", "vertical"] },
76-
dir: { control: "inline-radio", options: ["start", "end"] },
77-
selectLabel: { control: "text" },
60+
</CheckboxMultiSelect>
61+
);
7862
},
7963
};
8064

81-
export const Playground = {
65+
export const OptionsAsProp: StoryObj<typeof CheckboxMultiSelect> = {
8266
args: {
8367
label: "Label",
84-
value: "content1",
68+
value: ["content1"],
8569
showSearch: false,
86-
childrenType: "children",
70+
selectLabel: "Columns",
8771
},
88-
parameters: {
89-
docs: {
90-
source: {
91-
transform: (_: string, story: { args: Props; [x: string]: unknown }) => {
92-
const { allowCreateOption, childrenType, value, ...props } = story.args;
93-
return `<CheckboxMultiSelect\n value={${JSON.stringify(
94-
(value ?? "").split(",")
95-
)}}\n${allowCreateOption ? " allowCreateOption\n" : ""}
96-
${Object.entries(props)
97-
.flatMap(([key, value]) =>
98-
typeof value === "boolean"
99-
? value
100-
? ` ${key}`
101-
: []
102-
: ` ${key}=${typeof value == "string" ? `"${value}"` : `{${value}}`}`
103-
)
104-
.join("\n")}
105-
${
106-
childrenType === "options"
107-
? `options={${JSON.stringify(selectOptions, null, 2)}}\n/`
108-
: ""
109-
}>
110-
${
111-
childrenType === "children"
112-
? `
113-
<CheckboxMultiSelect.Group heading="Group label">
114-
<CheckboxMultiSelect.Item value="content0" icon="user">
115-
Content0
116-
</CheckboxMultiSelect.Item>
117-
</CheckboxMultiSelect.Group>
118-
<div>
119-
<CheckboxMultiSelect.Item value="content1">Content1 long text content</CheckboxMultiSelect.Item>
120-
</div>
121-
<CheckboxMultiSelect.Item
122-
value="content2"
123-
disabled
124-
>
125-
Content2
126-
</CheckboxMultiSelect.Item>
127-
<CheckboxMultiSelect.Item value="content3">Content3</CheckboxMultiSelect.Item>
128-
</CheckboxMultiSelect>
129-
`
130-
: ""
131-
}`;
132-
},
133-
},
134-
},
72+
render: ({ value, ...props }) => {
73+
const [selectedValues, setSelectedValues] = useState(value);
74+
75+
useEffect(() => {
76+
setSelectedValues(value);
77+
}, [value]);
78+
79+
return (
80+
<CheckboxMultiSelect
81+
{...props}
82+
options={selectOptions}
83+
value={selectedValues}
84+
onSelect={value => setSelectedValues(value)}
85+
/>
86+
);
13587
},
13688
};
13789

‎src/components/Select/CheckboxMultiSelect.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
SelectGroup,
66
InternalSelect,
77
MultiSelectCheckboxItem,
8+
SelectItemDescription,
89
} from "./common/InternalSelect";
910

1011
import { MultiSelectProps } from "..";
@@ -90,3 +91,4 @@ export const CheckboxMultiSelect = ({
9091

9192
CheckboxMultiSelect.Group = SelectGroup;
9293
CheckboxMultiSelect.Item = MultiSelectCheckboxItem;
94+
CheckboxMultiSelect.ItemDescription = SelectItemDescription;

0 commit comments

Comments
 (0)