Skip to content

add checkbox key events #204

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
afc163 merged 3 commits into from
Dec 8, 2020
Merged

add checkbox key events #204

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8a19cee
add checkbox key events
Nov 17, 2020
aeeeaad
add key event tests and demo
Nov 18, 2020
e442191
add keyboard events default handler test
Nov 21, 2020
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
67 changes: 49 additions & 18 deletions examples/simple.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,19 @@ import Checkbox from '../src';
import '../assets/index.less';

function onChange(e) {
console.log('Checkbox checked:', (e.target.checked));
console.log('Checkbox checked:', e.target.checked);
}

function onKeyDown(e) {
console.log('Checkbox key down:', e.key);
}

function onKeyPress(e) {
console.log('Checkbox key press:', e.key);
}

function onKeyUp(e) {
console.log('Checkbox key up:', e.key);
}

export default class SimpleDemo extends React.Component {
Expand All @@ -16,32 +28,45 @@ export default class SimpleDemo extends React.Component {
this.setState(state => ({
disabled: !state.disabled,
}));
}
};

render() {
return (
<div style={{ margin: 20 }}>
<div>
<p>
<label>
<Checkbox
checked
onChange={onChange}
disabled={this.state.disabled}
/>
<Checkbox checked onChange={onChange} disabled={this.state.disabled} />
&nbsp; controlled checked rc-checkbox
</label>
&nbsp;&nbsp;
</p>
<p>
<label>
<input checked type="checkbox" onChange={onChange} disabled={this.state.disabled} />
&nbsp; controlled checked native
</label>
&nbsp;&nbsp;
</p>
</div>

<div>
<p>
<label>
<Checkbox defaultChecked onChange={onChange} disabled={this.state.disabled} />
&nbsp; defaultChecked rc-checkbox
</label>
&nbsp;&nbsp;
</p>
<p>
<label>
<input
checked
type="checkbox"
defaultChecked
onChange={onChange}
disabled={this.state.disabled}
/>
&nbsp; controlled checked native
&nbsp; defaultChecked native
</label>
&nbsp;&nbsp;
</p>
Expand All @@ -51,23 +76,25 @@ export default class SimpleDemo extends React.Component {
<p>
<label>
<Checkbox
name="my-checkbox"
defaultChecked
onChange={onChange}
disabled={this.state.disabled}
/>
&nbsp; defaultChecked rc-checkbox
&nbsp; defaultChecked rc-checkbox with name
</label>
&nbsp;&nbsp;
</p>
<p>
<label>
<input
name="my-checkbox"
type="checkbox"
defaultChecked
onChange={onChange}
disabled={this.state.disabled}
/>
&nbsp; defaultChecked native
&nbsp; defaultChecked native with name
</label>
&nbsp;&nbsp;
</p>
Expand All @@ -77,31 +104,35 @@ export default class SimpleDemo extends React.Component {
<p>
<label>
<Checkbox
name="my-checkbox"
defaultChecked
onChange={onChange}
onKeyDown={onKeyDown}
onKeyPress={onKeyPress}
onKeyUp={onKeyUp}
disabled={this.state.disabled}
/>
&nbsp; defaultChecked rc-checkbox with name
&nbsp; rc-checkbox with key events
</label>
&nbsp;&nbsp;
</p>
<p>
<label>
<input
name="my-checkbox"
type="checkbox"
defaultChecked
onChange={onChange}
onKeyDown={onKeyDown}
onKeyPress={onKeyPress}
onKeyUp={onKeyUp}
disabled={this.state.disabled}
/>
&nbsp; defaultChecked native with name
&nbsp; native checkbox with key events
</label>
&nbsp;&nbsp;
</p>
</div>

<button type="button" onClick={this.toggle}>toggle disabled</button>
<button type="button" onClick={this.toggle}>
toggle disabled
</button>
</div>
);
}
Expand Down
15 changes: 12 additions & 3 deletions src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ class Checkbox extends Component {
onFocus() {},
onBlur() {},
onChange() {},
onKeyDown() {},
onKeyPress() {},
onKeyUp() {},
};

constructor(props) {
Expand Down Expand Up @@ -42,7 +45,7 @@ class Checkbox extends Component {
this.input.blur();
}

handleChange = (e) => {
handleChange = e => {
const { disabled, onChange } = this.props;
if (disabled) {
return;
Expand All @@ -69,9 +72,9 @@ class Checkbox extends Component {
}
};

saveInput = (node) => {
saveInput = node => {
this.input = node;
}
};

render() {
const {
Expand All @@ -87,6 +90,9 @@ class Checkbox extends Component {
onClick,
onFocus,
onBlur,
onKeyDown,
onKeyPress,
onKeyUp,
autoFocus,
value,
required,
Expand Down Expand Up @@ -122,6 +128,9 @@ class Checkbox extends Component {
onClick={onClick}
onFocus={onFocus}
onBlur={onBlur}
onKeyUp={onKeyUp}
onKeyDown={onKeyDown}
onKeyPress={onKeyPress}
onChange={this.handleChange}
autoFocus={autoFocus}
ref={this.saveInput}
Expand Down
54 changes: 52 additions & 2 deletions tests/index.test.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,13 @@ describe('rc-checkbox', () => {
const onChange = jest.fn();
const wrapper = mount(
<div onChange={onChange}>
<Checkbox onChange={e => { e.stopPropagation(); e.preventDefault(); }} />
</div>
<Checkbox
onChange={e => {
e.stopPropagation();
e.preventDefault();
}}
/>
</div>,
);
wrapper.find('input').simulate('change', { target: { checked: true } });
expect(onChange).not.toHaveBeenCalled();
Expand Down Expand Up @@ -122,4 +127,49 @@ describe('rc-checkbox', () => {
const renderedInput = wrapper.find('input').getDOMNode();
expect(renderedInput.hasAttribute('required')).toBe(true);
});

it('onKeyDown', () => {
const container = document.createElement('div');
document.body.appendChild(container);
const onKeyDown = jest.fn();
const wrapper = mount(<Checkbox onKeyDown={onKeyDown} />, { attachTo: container });
wrapper.find('input').simulate('keydown');
expect(onKeyDown).toBeCalled();
});

it('onKeyPress', () => {
const container = document.createElement('div');
document.body.appendChild(container);
const onKeyPress = jest.fn();
const wrapper = mount(<Checkbox onKeyPress={onKeyPress} />, { attachTo: container });
wrapper.find('input').simulate('keypress');
expect(onKeyPress).toBeCalled();
});

it('onKeyUp', () => {
const container = document.createElement('div');
document.body.appendChild(container);
const onKeyUp = jest.fn();
const wrapper = mount(<Checkbox onKeyUp={onKeyUp} />, { attachTo: container });
wrapper.find('input').simulate('keyup');
expect(onKeyUp).toBeCalled();
});

it('has default keyboard events handler', () => {
const onKeyDown = jest.fn();
const onKeyPress = jest.fn();
const onKeyUp = jest.fn();

const wrapper = mount(
<div onKeyDown={onKeyDown} onKeyPress={onKeyPress} onKeyUp={onKeyUp}>
<Checkbox />
</div>,
);
wrapper.find('input').simulate('keydown');
expect(onKeyDown).toBeCalled();
wrapper.find('input').simulate('keypress');
expect(onKeyPress).toBeCalled();
wrapper.find('input').simulate('keyup');
expect(onKeyUp).toBeCalled();
});
});