Skip to content

Commit 9b5b3e5

Browse files
author
Carlos Lancha
committed
fix: add support to pass a list of objects as items and add on clear all button callback to multiselect
1 parent 7ef86a7 commit 9b5b3e5

File tree

5 files changed

+232
-72
lines changed

5 files changed

+232
-72
lines changed

‎next.clayui.com/src/components/clay/MultiSelect.js

Lines changed: 84 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,19 @@ const spritemap = '/images/icons/icons.svg';
1414

1515
const multiSelectCode = `const Component = () => {
1616
const [value, setValue] = React.useState('');
17-
const [items, setItems] = React.useState(['one']);
17+
const [items, setItems] = React.useState([
18+
{
19+
label: 'one',
20+
value: '1',
21+
}
22+
]);
1823
1924
return (
2025
<ClayMultiSelect
2126
inputName="myInput"
2227
inputValue={value}
2328
items={items}
24-
onInputChange={setValue}
29+
onChange={setValue}
2530
onItemsChange={setItems}
2631
spritemap={spritemap}
2732
/>
@@ -39,18 +44,41 @@ const MultiSelectInput = () => {
3944
return <Editor code={multiSelectCode} scope={scope} />;
4045
};
4146

42-
const multiSelectWithAutocompleteCode = `const Component = () => {
47+
const multiSelectWithAutocompleteCode = `const Component = (props) => {
4348
const [value, setValue] = React.useState('');
44-
const [items, setItems] = React.useState(['one']);
49+
const [items, setItems] = React.useState([
50+
{
51+
label: 'one',
52+
value: '1',
53+
}
54+
]);
4555
46-
const sourceItems = ['one', 'two', 'three', 'four'];
56+
const sourceItems = [
57+
{
58+
label: 'one',
59+
value: '1',
60+
},
61+
{
62+
label: 'two',
63+
value: '2',
64+
},
65+
{
66+
label: 'three',
67+
value: '3',
68+
},
69+
{
70+
label: 'four',
71+
value: '4',
72+
},
73+
];
4774
4875
return (
4976
<ClayMultiSelect
77+
{...props}
5078
inputName="myInput"
5179
inputValue={value}
5280
items={items}
53-
onInputChange={setValue}
81+
onChange={setValue}
5482
onItemsChange={setItems}
5583
sourceItems={sourceItems}
5684
spritemap={spritemap}
@@ -71,9 +99,31 @@ const MultiSelectInputWithAutocomplete = () => {
7199

72100
const multiSelectWithSelectButtonCode = `const Component = () => {
73101
const [value, setValue] = React.useState('');
74-
const [items, setItems] = React.useState(['one']);
102+
const [items, setItems] = React.useState([
103+
{
104+
label: 'one',
105+
value: '1',
106+
}
107+
]);
75108
76-
const sourceItems = ['one', 'two', 'three', 'four'];
109+
const sourceItems = [
110+
{
111+
label: 'one',
112+
value: '1',
113+
},
114+
{
115+
label: 'two',
116+
value: '2',
117+
},
118+
{
119+
label: 'three',
120+
value: '3',
121+
},
122+
{
123+
label: 'four',
124+
value: '4',
125+
},
126+
];
77127
78128
return (
79129
<ClayForm.Group>
@@ -83,7 +133,7 @@ const multiSelectWithSelectButtonCode = `const Component = () => {
83133
inputName="myInput"
84134
inputValue={value}
85135
items={items}
86-
onInputChange={setValue}
136+
onChange={setValue}
87137
onItemsChange={setItems}
88138
sourceItems={sourceItems}
89139
spritemap={spritemap}
@@ -118,9 +168,31 @@ const MultiSelectInputWithSelectButton = () => {
118168

119169
const multiSelectWithValidationCode = `const Component = () => {
120170
const [value, setValue] = React.useState('');
121-
const [items, setItems] = React.useState(['one']);
171+
const [items, setItems] = React.useState([
172+
{
173+
label: 'one',
174+
value: '1',
175+
}
176+
]);
122177
123-
const sourceItems = ['one', 'two', 'three', 'four'];
178+
const sourceItems = [
179+
{
180+
label: 'one',
181+
value: '1',
182+
},
183+
{
184+
label: 'two',
185+
value: '2',
186+
},
187+
{
188+
label: 'three',
189+
value: '3',
190+
},
191+
{
192+
label: 'four',
193+
value: '4',
194+
},
195+
];
124196
125197
return (
126198
<ClayForm.Group className="has-error">
@@ -132,7 +204,7 @@ const multiSelectWithValidationCode = `const Component = () => {
132204
inputName="myInput"
133205
inputValue={value}
134206
items={items}
135-
onInputChange={setValue}
207+
onChange={setValue}
136208
onItemsChange={setItems}
137209
sourceItems={sourceItems}
138210
spritemap={spritemap}

‎packages/clay-multi-select/src/__tests__/index.tsx

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,21 @@ import * as React from 'react';
88
import ClayMultiSelect from '..';
99
import {cleanup, fireEvent, render} from '@testing-library/react';
1010

11+
const items = [
12+
{
13+
label: 'foo',
14+
value: '1',
15+
},
16+
{
17+
label: 'bar',
18+
value: '2',
19+
},
20+
{
21+
label: 'baz',
22+
value: '3',
23+
},
24+
];
25+
1126
const ClayMultiSelectWithState = (props: any) => {
1227
const [items, setItems] = React.useState(props.items as [] | []);
1328
const [value, setValue] = React.useState('');
@@ -16,7 +31,7 @@ const ClayMultiSelectWithState = (props: any) => {
1631
<ClayMultiSelect
1732
inputValue={value}
1833
items={items}
19-
onInputChange={setValue}
34+
onChange={setValue}
2035
onItemsChange={setItems}
2136
spritemap="/foo/bar"
2237
{...props}
@@ -34,12 +49,7 @@ describe('ClayMultiSelect', () => {
3449
});
3550

3651
it('renders with items', () => {
37-
render(
38-
<ClayMultiSelectWithState
39-
items={['foo', 'bar', 'baz']}
40-
spritemap="/foo/bar"
41-
/>
42-
);
52+
render(<ClayMultiSelectWithState items={items} spritemap="/foo/bar" />);
4353

4454
expect(document.body).toMatchSnapshot();
4555
});
@@ -48,7 +58,7 @@ describe('ClayMultiSelect', () => {
4858
render(
4959
<ClayMultiSelectWithState
5060
isValid={false}
51-
items={['foo', 'bar', 'baz']}
61+
items={items}
5262
spritemap="/foo/bar"
5363
/>
5464
);
@@ -61,7 +71,7 @@ describe('ClayMultiSelect', () => {
6171
<ClayMultiSelectWithState
6272
disabled
6373
isValid={false}
64-
items={['foo', 'bar', 'baz']}
74+
items={items}
6575
spritemap="/foo/bar"
6676
/>
6777
);
@@ -102,7 +112,7 @@ describe('Interactions', () => {
102112

103113
const {container} = render(
104114
<ClayMultiSelectWithState
105-
items={['foo']}
115+
items={[items[0]]}
106116
onItemsChange={onItemsChangeFn}
107117
spritemap="/foo/bar"
108118
/>
@@ -125,7 +135,7 @@ describe('Interactions', () => {
125135

126136
const {container} = render(
127137
<ClayMultiSelectWithState
128-
items={['foo', 'bar']}
138+
items={[items[0], items[1]]}
129139
onItemsChange={onItemsChangeFn}
130140
spritemap="/foo/bar"
131141
/>
@@ -155,9 +165,9 @@ describe('Interactions', () => {
155165

156166
render(
157167
<ClayMultiSelectWithState
158-
items={['foo']}
168+
items={[items[0]]}
159169
onItemsChange={onItemsChangeFn}
160-
sourceItems={['one', 'two', 'three', 'four']}
170+
sourceItems={items}
161171
spritemap="/foo/bar"
162172
/>
163173
);
@@ -170,7 +180,7 @@ describe('Interactions', () => {
170180
document.querySelectorAll(
171181
'input[type=text]'
172182
)[0] as HTMLInputElement,
173-
{target: {value: 'two'}}
183+
{target: {value: 'bar'}}
174184
);
175185

176186
expect(document.querySelectorAll('.dropdown-item').length).toEqual(1);
@@ -185,15 +195,15 @@ describe('Interactions', () => {
185195

186196
it('clicking the Clear All button removes items and text in the input', () => {
187197
const onItemsChangeFn = jest.fn();
188-
const onInputChangeFn = jest.fn();
198+
const onChangeFn = jest.fn();
189199

190200
const {getByTitle} = render(
191201
<ClayMultiSelectWithState
192202
inputValue="foo"
193-
items={['foo']}
194-
onInputChange={onInputChangeFn}
203+
items={[items[0]]}
204+
onChange={onChangeFn}
195205
onItemsChange={onItemsChangeFn}
196-
sourceItems={['one', 'two', 'three', 'four']}
206+
sourceItems={items}
197207
spritemap="/foo/bar"
198208
/>
199209
);
@@ -203,17 +213,17 @@ describe('Interactions', () => {
203213
fireEvent.click(clearButton, {});
204214

205215
expect(onItemsChangeFn).toHaveBeenCalledWith([]);
206-
expect(onInputChangeFn).toHaveBeenCalledWith('');
216+
expect(onChangeFn).toHaveBeenCalledWith('');
207217
});
208218

209219
it('clicking the Clear All button should move the focus to the input', () => {
210220
const {container, getByTitle} = render(
211221
<ClayMultiSelectWithState
212222
inputValue="foo"
213-
items={['foo']}
214-
onInputChange={jest.fn()}
223+
items={[items[0]]}
224+
onChange={jest.fn()}
215225
onItemsChange={jest.fn()}
216-
sourceItems={['one', 'two', 'three', 'four']}
226+
sourceItems={items}
217227
spritemap="/foo/bar"
218228
/>
219229
);

0 commit comments

Comments
 (0)