add checkbox key events (#204)

* add checkbox key events

* add key event tests and demo

* add keyboard events default handler test

Author: liuchao233

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,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>
@@ -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>
@@ -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>
     );
   }

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}

tests/index.test.jsx

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