Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[SwitchBase] Prepare v5 removal of the second argument of onChange #20541

Merged
merged 2 commits into from Apr 14, 2020
Merged

[SwitchBase] Prepare v5 removal of the second argument of onChange #20541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
90f8677
[SwitchBase] Add missing parameter to docs
samuliasmala Apr 14, 2020
167d046
[SwitchBase] Prepare v5 removal of the second argument of onChange
oliviertassinari Apr 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/pages/components/tables/EnhancedTable.tsx
View file
Open in desktop
Expand Up @@ -104,7 +104,7 @@ interface EnhancedTableProps {
classes: ReturnType<typeof useStyles>;
numSelected: number;
onRequestSort: (event: React.MouseEvent<unknown>, property: keyof Data) => void;
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
onSelectAllClick: (event: React.ChangeEvent<HTMLInputElement>) => void;
order: Order;
orderBy: string;
rowCount: number;
Expand Down
4 changes: 1 addition & 3 deletions docs/src/pages/customization/color/ColorTool.js
View file
Open in desktop
Expand Up @@ -113,9 +113,7 @@ function ColorTool(props) {
};

const handleChangeHue = (name) => (event) => {
const {
target: { value: hue },
} = event;
const hue = event.target.value;
const color = colors[hue][shades[state[`${name}Shade`]]];

setState({
Expand Down
1 change: 1 addition & 0 deletions packages/material-ui/src/internal/SwitchBase.js
View file
Open in desktop
Expand Up @@ -89,6 +89,7 @@ const SwitchBase = React.forwardRef(function SwitchBase(props, ref) {
setCheckedState(newChecked);

if (onChange) {
// TODO v5: remove the second argument.
onChange(event, newChecked);
}
};
Expand Down
48 changes: 38 additions & 10 deletions packages/material-ui/test/typescript/components.spec.tsx
View file
Open in desktop
Expand Up @@ -655,20 +655,30 @@ const SelectionControlTest = () => {
checkedF: true,
};

const handleChange = (name: string) => (event: React.SyntheticEvent<any>, checked: boolean) =>
log({ [name]: checked });
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
log({ [event.target.name]: event.target.checked });

return (
<FormGroup row>
<FormControlLabel
control={
<Checkbox checked={state.checkedA} onChange={handleChange('checkedA')} value="checkedA" />
<Checkbox
checked={state.checkedA}
onChange={handleChange}
name="checkedA"
value="checkedA"
/>
}
label="Option A"
/>
<FormControlLabel
control={
<Checkbox checked={state.checkedB} onChange={handleChange('checkedB')} value="checkedB" />
<Checkbox
checked={state.checkedB}
onChange={handleChange}
name="checkedB"
value="checkedB"
/>
}
label="Option B"
/>
Expand All @@ -681,7 +691,9 @@ const SelectionControlTest = () => {
label="Indeterminate"
/>
<FormControlLabel
control={<Checkbox checked={true} onChange={handleChange('checkedF')} value="checkedF" />}
control={
<Checkbox checked={true} onChange={handleChange} name="checkedF" value="checkedF" />
}
label="Custom color"
/>
</FormGroup>
Expand All @@ -694,16 +706,32 @@ const SwitchTest = () => {
checkedB: false,
checkedE: true,
};
const handleChange = (name: string) => (event: React.SyntheticEvent<any>, checked: boolean) =>
log({ [name]: checked });

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
log({ [event.target.name]: event.target.checked });

return (
<div>
<Switch checked={state.checkedA} onChange={handleChange('checkedA')} aria-label="checkedA" />
<Switch checked={state.checkedB} onChange={handleChange('checkedB')} aria-label="checkedB" />
<Switch
checked={state.checkedA}
onChange={handleChange}
name="checkedA"
aria-label="checkedA"
/>
<Switch
checked={state.checkedB}
onChange={handleChange}
name="checkedB"
aria-label="checkedB"
/>
<Switch checked={false} aria-label="checkedC" disabled />
<Switch checked aria-label="checkedD" disabled />
<Switch checked={state.checkedE} onChange={handleChange('checkedE')} aria-label="checkedD" />
<Switch
checked={state.checkedE}
onChange={handleChange}
name="checkedE"
aria-label="checkedD"
/>
</div>
);
};
Expand Down