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(); + }); });