Skip to content

fix: optimize checkbox #1382

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

Merged
merged 9 commits into from
Dec 2, 2021
+62 −10
Merged

fix: optimize checkbox #1382

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
b63ef36
fix: allow lock focus for specific list in dialog
Vita-Meow Jul 16, 2021
7440907
fix: fix lint
Vita-Meow Jul 16, 2021
f840909
fix: optimize naming and description
Vita-Meow Jul 16, 2021
f42b882
Merge branch 'SAP:main' into main
Vita-Meow Dec 2, 2021
1998578
fix: optimize check box
Vita-Meow Dec 2, 2021
4a10b09
fix: optimize check box
Vita-Meow Dec 2, 2021
7112c09
fix: update storyshot
Vita-Meow Dec 2, 2021
b0b1351
fix: fix ut similate behavior like checked in browser
Vita-Meow Dec 2, 2021
5ea1d41
fix: fix ut similate behavior like checked in browser
Vita-Meow Dec 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions src/Forms/Checkbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,13 +38,20 @@ const Checkbox = React.forwardRef(({
validationState,
...props
}, ref) => {
const [checkedState, setCheckedState] = useState(!!checked);
const [checkedState, setCheckedState] = useState(!!checked || !!defaultChecked);
const inputEl = useRef();

useEffect(() => {
inputEl && inputEl.current && (inputEl.current.indeterminate = indeterminate);
});

useEffect(()=> {
// eslint-disable-next-line no-undefined
if (checked !== undefined) {
setCheckedState(!!checked);
}
}, [checked]);


const inputClassNames = classnames(
`${cssNamespace}-checkbox`,
Expand Down Expand Up @@ -83,16 +90,18 @@ const Checkbox = React.forwardRef(({
{...inputProps}
aria-checked={checkedState}
aria-label={ariaLabel}
checked={checked}
checked={checkedState}
className={inputClassNames}
defaultChecked={defaultChecked}
disabled={disabled}
id={checkId}
name={name}
onChange={(e) => {
const toggledState = !checkedState;
setCheckedState(toggledState);
onChange(e, toggledState);
// eslint-disable-next-line no-undefined
if (checked === undefined) {
setCheckedState(e.target.checked);
}
onChange(e, e.target.checked);
}}
ref={inputEl}
type='checkbox'
Expand Down
13 changes: 12 additions & 1 deletion src/Forms/__stories__/__snapshots__/Checkbox.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ exports[`Storyshots Component API/Forms/Checkbox Compact 1`] = `
>
<input
aria-checked={false}
checked={false}
className="fd-checkbox fd-checkbox--compact"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down Expand Up @@ -54,7 +55,8 @@ exports[`Storyshots Component API/Forms/Checkbox Default Checked 1`] = `
className="fd-form-item"
>
<input
aria-checked={false}
aria-checked={true}
checked={true}
className="fd-checkbox"
defaultChecked={true}
id="fd-mocked-short-id"
Expand All @@ -81,6 +83,7 @@ exports[`Storyshots Component API/Forms/Checkbox Dev 1`] = `
>
<input
aria-checked={false}
checked={false}
className="fd-checkbox"
disabled={false}
id="fd-mocked-short-id"
Expand All @@ -107,6 +110,7 @@ exports[`Storyshots Component API/Forms/Checkbox Disabled 1`] = `
>
<input
aria-checked={false}
checked={false}
className="fd-checkbox"
disabled={true}
id="fd-mocked-short-id"
Expand All @@ -132,6 +136,7 @@ exports[`Storyshots Component API/Forms/Checkbox Indeterminate 1`] = `
>
<input
aria-checked={false}
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id"
onChange={[Function]}
Expand All @@ -156,6 +161,7 @@ exports[`Storyshots Component API/Forms/Checkbox No Styles 1`] = `
>
<input
aria-checked={false}
checked={false}
className="xxx-checkbox"
id="fd-mocked-short-id"
onChange={[Function]}
Expand All @@ -180,6 +186,7 @@ exports[`Storyshots Component API/Forms/Checkbox Primary 1`] = `
>
<input
aria-checked={false}
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down Expand Up @@ -220,6 +227,7 @@ exports[`Storyshots Component API/Forms/Checkbox Validation States 1`] = `
>
<input
aria-checked={false}
checked={false}
className="fd-checkbox is-error"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down Expand Up @@ -257,6 +265,7 @@ exports[`Storyshots Component API/Forms/Checkbox Validation States 1`] = `
>
<input
aria-checked={false}
checked={false}
className="fd-checkbox is-warning"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down Expand Up @@ -294,6 +303,7 @@ exports[`Storyshots Component API/Forms/Checkbox Validation States 1`] = `
>
<input
aria-checked={false}
checked={false}
className="fd-checkbox is-information"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down Expand Up @@ -331,6 +341,7 @@ exports[`Storyshots Component API/Forms/Checkbox Validation States 1`] = `
>
<input
aria-checked={false}
checked={false}
className="fd-checkbox is-success"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down
4 changes: 4 additions & 0 deletions src/Table/__stories__/__snapshots__/Table.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -440,6 +440,7 @@ exports[`Storyshots Component API/Table Grid Table 1`] = `
<input
aria-checked={false}
aria-label="Heavy Weight"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down Expand Up @@ -684,6 +685,7 @@ exports[`Storyshots Component API/Table Grid Table 1`] = `
<input
aria-checked={false}
aria-label="Heavy Weight"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down Expand Up @@ -928,6 +930,7 @@ exports[`Storyshots Component API/Table Grid Table 1`] = `
<input
aria-checked={false}
aria-label="Heavy Weight"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down Expand Up @@ -1172,6 +1175,7 @@ exports[`Storyshots Component API/Table Grid Table 1`] = `
<input
aria-checked={false}
aria-label="Heavy Weight"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id"
onChange={[Function]}
Expand Down
16 changes: 12 additions & 4 deletions src/Tree/Tree.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,9 @@ describe('<Tree />', () => {

const levelOneCheckBox = wrapper.find('input#myCustomLevel1-selection-control');
act(() => {
levelOneCheckBox.simulate('change');
levelOneCheckBox.simulate('change', { target: {
checked: true
} });// simulate the real checked
});
expect(levelOneCheckBox.getDOMNode().getAttribute('aria-checked')).toBeTruthy();

Expand All @@ -149,7 +151,9 @@ describe('<Tree />', () => {

const level7CheckBox = wrapper.find('input#level7-selection-control');
act(() => {
level7CheckBox.simulate('change');
level7CheckBox.simulate('change', { target: {
checked: true
} }); // simulate the real checked
});
expect(level7CheckBox.getDOMNode().getAttribute('aria-checked')).toBeTruthy();

Expand Down Expand Up @@ -189,14 +193,18 @@ describe('<Tree />', () => {
}));
const levelOneCheckBox = wrapper.find('input#myCustomLevel1-selection-control');
act(() => {
levelOneCheckBox.simulate('change');
levelOneCheckBox.simulate('change', { target: {
checked: true
} });
});
expect(levelOneHandler).toHaveBeenCalledTimes(1);
expect(levelOneHandler).toHaveBeenCalledWith(expect.anything(), true, levelOneData);

const level7CheckBox = wrapper.find('input#level7-selection-control');
act(() => {
level7CheckBox.simulate('change');
level7CheckBox.simulate('change', { target: {
checked: true
} });
});
expect(levelSevenHandler).toHaveBeenCalledTimes(1);
expect(levelSevenHandler).toHaveBeenCalledWith(expect.anything(), true, levelSevenData);
Expand Down
20 changes: 20 additions & 0 deletions src/Tree/__stories__/__snapshots__/Tree.stories.storyshot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2242,6 +2242,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 1 - onSelectionChange"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2301,6 +2302,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 2 - onSelectionChange"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2360,6 +2362,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 3"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2419,6 +2422,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 4"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2464,6 +2468,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 5"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2526,6 +2531,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 1"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2585,6 +2591,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 2"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2644,6 +2651,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 3"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2703,6 +2711,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 4"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2748,6 +2757,7 @@ exports[`Storyshots Component API/Tree Multi Selection Left 1`] = `
<input
aria-checked={false}
aria-label="Level 5"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2829,6 +2839,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 1 - onSelectionChange"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2888,6 +2899,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 2 - onSelectionChange"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -2947,6 +2959,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 3"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -3006,6 +3019,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 4"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -3051,6 +3065,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 5"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -3113,6 +3128,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 1"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -3172,6 +3188,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 2"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -3231,6 +3248,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 3"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -3290,6 +3308,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 4"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down Expand Up @@ -3335,6 +3354,7 @@ exports[`Storyshots Component API/Tree Multi Selection Right 1`] = `
<input
aria-checked={false}
aria-label="Level 5"
checked={false}
className="fd-checkbox"
id="fd-mocked-short-id-selection-control"
onChange={[Function]}
Expand Down