Skip to content

Commit 7e609d8

Browse files
chanceaclarkchanceaclark
authored
feat(component): rename onChange to onItemChange (#251)
BREAKING CHANGE: `onChange` is renamed to `onItemChange`
1 parent a1d41df commit 7e609d8

File tree

6 files changed

+51
-41
lines changed

6 files changed

+51
-41
lines changed

‎packages/big-design/src/components/Select/Select.tsx

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
7070
label,
7171
maxHeight,
7272
multi,
73-
onChange,
73+
onItemChange,
7474
placeholder,
7575
placement,
7676
value,
@@ -132,7 +132,17 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
132132
}
133133

134134
private renderInput() {
135-
const { name, placeholder, error, filterable = true, required, disabled, onChange, options, value } = this.props;
135+
const {
136+
name,
137+
placeholder,
138+
error,
139+
filterable = true,
140+
required,
141+
disabled,
142+
onItemChange,
143+
options,
144+
value,
145+
} = this.props;
136146
const { highlightedItem, inputText, isOpen } = this.state;
137147
const ariaActiveDescendant = highlightedItem ? { 'aria-activedescendant': highlightedItem.id } : {};
138148
const ariaControls = isOpen ? { 'aria-controls': this.getSelectId() } : {};
@@ -149,7 +159,7 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
149159
})
150160
: [];
151161

152-
onChange(filteredValues, this.getSelectedOptions(filteredValues));
162+
onItemChange(filteredValues, this.getSelectedOptions(filteredValues));
153163
this.focusInput();
154164
};
155165

@@ -504,7 +514,7 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
504514
};
505515

506516
private handleOnCheckboxOptionClick = (option: Option<T>) => {
507-
const { onChange, value } = this.props;
517+
const { onItemChange, value } = this.props;
508518
const { highlightedItem } = this.state;
509519
let updatedValues = [];
510520

@@ -520,18 +530,18 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
520530
updatedValues = value.concat(option.value);
521531
}
522532

523-
onChange(updatedValues, this.getSelectedOptions(updatedValues));
533+
onItemChange(updatedValues, this.getSelectedOptions(updatedValues));
524534
this.focusInput();
525535
};
526536

527537
private handleOnOptionClick = (option: Option<T>) => {
528-
const { onChange } = this.props;
538+
const { onItemChange } = this.props;
529539

530540
if (option.disabled) {
531541
return;
532542
}
533543

534-
onChange(option.value, option);
544+
onItemChange(option.value, option);
535545
this.toggleList();
536546
};
537547

@@ -637,7 +647,7 @@ export class Select<T extends any> extends React.PureComponent<SelectProps<T>, S
637647
if (Array.isArray(this.props.value)) {
638648
const updatedValues = this.props.value.slice(0, this.props.value.length - 1);
639649

640-
this.props.onChange(updatedValues, this.getSelectedOptions(updatedValues));
650+
this.props.onItemChange(updatedValues, this.getSelectedOptions(updatedValues));
641651
}
642652
}
643653
break;

‎packages/big-design/src/components/Select/spec.tsx

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { Form } from '../Form';
77

88
import { Select } from './Select';
99

10-
const onChange = jest.fn();
10+
const onItemChange = jest.fn();
1111
const onActionClick = jest.fn();
1212

1313
const mockOptions = [
@@ -27,7 +27,7 @@ const SelectMock = (
2727
onClick: onActionClick,
2828
}}
2929
error="Required"
30-
onChange={onChange}
30+
onItemChange={onItemChange}
3131
label="Countries"
3232
placeholder="Choose country"
3333
options={mockOptions}
@@ -38,7 +38,7 @@ const SelectMock = (
3838

3939
const MultiselectMock = (
4040
<Select
41-
onChange={onChange}
41+
onItemChange={onItemChange}
4242
label="Countries"
4343
multi
4444
placeholder="Choose country"
@@ -261,17 +261,17 @@ test('end should select last select item', () => {
261261
expect(input.getAttribute('aria-activedescendant')).toEqual(options[5].id);
262262
});
263263

264-
test('enter should trigger onChange', () => {
264+
test('enter should trigger onItemChange', () => {
265265
const { getAllByLabelText } = render(SelectMock);
266266
const input = getAllByLabelText('Countries')[0];
267267

268268
fireEvent.focus(input);
269269
fireEvent.keyDown(input, { key: 'ArrowDown' });
270270
fireEvent.keyDown(input, { key: 'Enter' });
271-
expect(onChange).toHaveBeenCalledWith(mockOptions[2].value, mockOptions[2]);
271+
expect(onItemChange).toHaveBeenCalledWith(mockOptions[2].value, mockOptions[2]);
272272
});
273273

274-
test('clicking on select options should trigger onChange', () => {
274+
test('clicking on select options should trigger onItemChange', () => {
275275
const { getAllByRole, getAllByLabelText } = render(SelectMock);
276276
const input = getAllByLabelText('Countries')[0];
277277

@@ -281,7 +281,7 @@ test('clicking on select options should trigger onChange', () => {
281281

282282
fireEvent.mouseOver(options[1]);
283283
fireEvent.click(options[1]);
284-
expect(onChange).toHaveBeenCalledWith(mockOptions[1].value, mockOptions[1]);
284+
expect(onItemChange).toHaveBeenCalledWith(mockOptions[1].value, mockOptions[1]);
285285
});
286286

287287
test('clicking on disabled select options should not trigger onClick', () => {
@@ -362,7 +362,7 @@ test('select should render an error if one is provided', () => {
362362
const { getByText } = render(
363363
<Form.Group>
364364
<Select
365-
onChange={onChange}
365+
onItemChange={onItemChange}
366366
label="Countries"
367367
error="Required"
368368
placeholder="Choose country"
@@ -392,7 +392,7 @@ test('select should have a required attr if set as required', () => {
392392
test('select should not have a required attr if not set as required', () => {
393393
const { getAllByLabelText } = render(
394394
<Select
395-
onChange={onChange}
395+
onItemChange={onItemChange}
396396
label="Countries"
397397
placeholder="Choose country"
398398
options={[
@@ -414,7 +414,7 @@ test('select should have a disabled attr if set as disabled', () => {
414414
const { getAllByLabelText } = render(
415415
<Select
416416
disabled
417-
onChange={onChange}
417+
onItemChange={onItemChange}
418418
label="Countries"
419419
placeholder="Choose country"
420420
options={[
@@ -471,7 +471,7 @@ test('multiselect should be able to select multiple options', () => {
471471
fireEvent.keyDown(input, { key: 'ArrowDown' });
472472
fireEvent.keyDown(input, { key: 'Enter' });
473473

474-
expect(onChange).toHaveBeenCalledWith(
474+
expect(onItemChange).toHaveBeenCalledWith(
475475
[mockOptions[0].value, mockOptions[1].value, mockOptions[2].value],
476476
[mockOptions[0], mockOptions[1], mockOptions[2]],
477477
);
@@ -486,7 +486,7 @@ test('multiselect should be able to deselect options', () => {
486486
fireEvent.keyDown(input, { key: 'ArrowDown' });
487487
fireEvent.keyDown(input, { key: 'Enter' });
488488

489-
expect(onChange).toHaveBeenCalledWith([mockOptions[1].value], [mockOptions[1]]);
489+
expect(onItemChange).toHaveBeenCalledWith([mockOptions[1].value], [mockOptions[1]]);
490490
});
491491

492492
test('chips should be rendered', () => {
@@ -500,7 +500,7 @@ test('chips should be rendered', () => {
500500
test('appends (optional) text to label if select is not required', () => {
501501
const { container } = render(
502502
<Select
503-
onChange={onChange}
503+
onItemChange={onItemChange}
504504
label="Countries"
505505
options={[
506506
{ value: 'us', content: 'United States' },
@@ -521,7 +521,7 @@ test('does not forward styles', () => {
521521
const { container, getByRole } = render(
522522
<Select
523523
className="test"
524-
onChange={onChange}
524+
onItemChange={onItemChange}
525525
label="Countries"
526526
options={[
527527
{ value: 'us', content: 'United States' },
@@ -544,7 +544,7 @@ test('should render a non filterable select', () => {
544544
<Select
545545
filterable={false}
546546
label="Countries"
547-
onChange={onChange}
547+
onItemChange={onItemChange}
548548
options={[
549549
{ value: 'us', content: 'United States' },
550550
{ value: 'mx', content: 'Mexico' },
@@ -566,7 +566,7 @@ test('should use the passed in ref object if provided', () => {
566566
<Select
567567
inputRef={ref}
568568
label="Countries"
569-
onChange={onChange}
569+
onItemChange={onItemChange}
570570
options={[
571571
{ value: 'us', content: 'United States' },
572572
{ value: 'mx', content: 'Mexico' },
@@ -590,7 +590,7 @@ test('should call the provided refSetter if any', () => {
590590
<Select
591591
inputRef={refSetter}
592592
label="Countries"
593-
onChange={onChange}
593+
onItemChange={onItemChange}
594594
options={[
595595
{ value: 'us', content: 'United States' },
596596
{ value: 'mx', content: 'Mexico' },

‎packages/big-design/src/components/Select/types.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ export interface SelectProps<T> extends Omit<React.HTMLAttributes<HTMLUListEleme
1818
positionFixed?: boolean;
1919
required?: boolean;
2020
value?: T | T[];
21-
onChange(value: T | T[], option: Option<T> | Array<Option<T>>): void;
21+
onItemChange(value: T | T[], option: Option<T> | Array<Option<T>>): void;
2222
}
2323

2424
interface BaseItem extends Omit<ListItemProps, 'children' | 'content' | 'value'> {

‎packages/docs/PropTables/SelectPropTable.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,7 +113,7 @@ const selectProps: Prop[] = [
113113
},
114114

115115
{
116-
name: 'onChange',
116+
name: 'onItemChange',
117117
types: '(value: string | number | Array<string | number>) => void',
118118
required: true,
119119
description: 'Callback called with value of selected option.',

‎packages/docs/pages/Form/FormPage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export default () => (
8686
<Form.Group>
8787
<Select
8888
label="Example Select"
89-
onChange={() => null}
89+
onItemChange={() => null}
9090
options={[
9191
{ value: 1, content: 'Option' },
9292
{ value: 2, content: 'Option' },

‎packages/docs/pages/Select/SelectPage.tsx

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default () => (
3535
filterable={true}
3636
label="Countries"
3737
maxHeight={300}
38-
onChange={handleChange}
38+
onItemChange={handleChange}
3939
options={[
4040
{ value: 'us', content: 'United States' },
4141
{ value: 'mx', content: 'Mexico' },
@@ -88,7 +88,7 @@ export default () => (
8888
label="States"
8989
maxHeight={300}
9090
multi={true}
91-
onChange={handleChange}
91+
onItemChange={handleChange}
9292
options={[
9393
{ value: 'tx', content: 'Texas' },
9494
{ value: 'ca', content: 'California' },
@@ -119,7 +119,7 @@ export default () => (
119119
<Grid gridColumns="repeat(4, 1fr)">
120120
<Select
121121
label="Select"
122-
onChange={() => null}
122+
onItemChange={() => null}
123123
options={[
124124
{ value: 1, content: 'Option' },
125125
{ value: 2, content: 'Option' },
@@ -132,7 +132,7 @@ export default () => (
132132
/>
133133
<Select
134134
label="Select"
135-
onChange={() => null}
135+
onItemChange={() => null}
136136
options={[
137137
{ value: 1, content: 'Option' },
138138
{ value: 2, content: 'Option' },
@@ -145,7 +145,7 @@ export default () => (
145145
/>
146146
<Select
147147
label="Select"
148-
onChange={() => null}
148+
onItemChange={() => null}
149149
options={[
150150
{ value: 1, content: 'Option' },
151151
{ value: 2, content: 'Option' },
@@ -158,7 +158,7 @@ export default () => (
158158
/>
159159
<Select
160160
label="Select"
161-
onChange={() => null}
161+
onItemChange={() => null}
162162
options={[
163163
{ value: 1, content: 'Option' },
164164
{ value: 2, content: 'Option' },
@@ -185,7 +185,7 @@ export default () => (
185185
<Grid gridColumns="repeat(3, 1fr)">
186186
<Select
187187
label="Select"
188-
onChange={() => null}
188+
onItemChange={() => null}
189189
options={[
190190
{ value: 1, content: 'Option' },
191191
{ value: 2, content: 'Option' },
@@ -197,7 +197,7 @@ export default () => (
197197
/>
198198
<Select
199199
label="Select"
200-
onChange={() => null}
200+
onItemChange={() => null}
201201
options={[
202202
{ value: 1, content: 'Option' },
203203
{ value: 2, content: 'Option' },
@@ -210,7 +210,7 @@ export default () => (
210210
<Select
211211
label="Select"
212212
maxHeight={150}
213-
onChange={() => null}
213+
onItemChange={() => null}
214214
options={[
215215
{ value: 1, content: 'Option' },
216216
{ value: 2, content: 'Option' },
@@ -223,7 +223,7 @@ export default () => (
223223
<Select
224224
label="Select"
225225
maxHeight={350}
226-
onChange={() => null}
226+
onItemChange={() => null}
227227
options={[
228228
{ value: 1, content: 'Option' },
229229
{ value: 2, content: 'Option' },
@@ -250,7 +250,7 @@ export default () => (
250250
disabled
251251
label="Select"
252252
maxHeight={350}
253-
onChange={() => null}
253+
onItemChange={() => null}
254254
options={[
255255
{ value: 1, content: 'Option' },
256256
{ value: 2, content: 'Option' },
@@ -279,7 +279,7 @@ export default () => (
279279
onClick: () => null,
280280
}}
281281
label="Countries"
282-
onChange={() => null}
282+
onItemChange={() => null}
283283
options={[
284284
{ value: 'us', content: 'United States' },
285285
{ value: 'mx', content: 'Mexico' },
@@ -305,7 +305,7 @@ export default () => (
305305
<Select
306306
label="Countries"
307307
error="Need to choose a country before proceeding"
308-
onChange={() => null}
308+
onItemChange={() => null}
309309
options={[
310310
{ value: 'us', content: 'United States' },
311311
{ value: 'mx', content: 'Mexico' },

0 commit comments

Comments
 (0)