diff --git a/examples/simple.jsx b/examples/simple.jsx
index 657c611..92f4b1b 100644
--- a/examples/simple.jsx
+++ b/examples/simple.jsx
@@ -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 {
@@ -16,7 +28,7 @@ export default class SimpleDemo extends React.Component {
this.setState(state => ({
disabled: !state.disabled,
}));
- }
+ };
render() {
return (
@@ -24,24 +36,37 @@ export default class SimpleDemo extends React.Component {
+
+
+
+
+
+
+
+
+
+
+
@@ -51,23 +76,25 @@ export default class SimpleDemo extends React.Component {
@@ -77,31 +104,35 @@ export default class SimpleDemo extends React.Component {
-
+
);
}
diff --git a/src/index.jsx b/src/index.jsx
index 038865f..4595968 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -12,6 +12,9 @@ class Checkbox extends Component {
onFocus() {},
onBlur() {},
onChange() {},
+ onKeyDown() {},
+ onKeyPress() {},
+ onKeyUp() {},
};
constructor(props) {
@@ -42,7 +45,7 @@ class Checkbox extends Component {
this.input.blur();
}
- handleChange = (e) => {
+ handleChange = e => {
const { disabled, onChange } = this.props;
if (disabled) {
return;
@@ -69,9 +72,9 @@ class Checkbox extends Component {
}
};
- saveInput = (node) => {
+ saveInput = node => {
this.input = node;
- }
+ };
render() {
const {
@@ -87,6 +90,9 @@ class Checkbox extends Component {
onClick,
onFocus,
onBlur,
+ onKeyDown,
+ onKeyPress,
+ onKeyUp,
autoFocus,
value,
required,
@@ -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}
diff --git a/tests/index.test.jsx b/tests/index.test.jsx
index 64cee29..a318c3f 100644
--- a/tests/index.test.jsx
+++ b/tests/index.test.jsx
@@ -34,8 +34,13 @@ describe('rc-checkbox', () => {
const onChange = jest.fn();
const wrapper = mount(
- { e.stopPropagation(); e.preventDefault(); }} />
-
+ {
+ e.stopPropagation();
+ e.preventDefault();
+ }}
+ />
+ ,
);
wrapper.find('input').simulate('change', { target: { checked: true } });
expect(onChange).not.toHaveBeenCalled();
@@ -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(, { 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(, { 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(, { 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(
+
+
+
,
+ );
+ wrapper.find('input').simulate('keydown');
+ expect(onKeyDown).toBeCalled();
+ wrapper.find('input').simulate('keypress');
+ expect(onKeyPress).toBeCalled();
+ wrapper.find('input').simulate('keyup');
+ expect(onKeyUp).toBeCalled();
+ });
});