From 6893eedacc3e4f553edfc1ecf6fab840885c9539 Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Tue, 28 Feb 2017 09:45:32 +0800
Subject: [PATCH 1/2] style: improve code style

---
 src/Checkbox.jsx | 43 ++++++++++++++++++++++---------------------
 1 file changed, 22 insertions(+), 21 deletions(-)

diff --git a/src/Checkbox.jsx b/src/Checkbox.jsx
index bf99ab5..a4b623b 100644
--- a/src/Checkbox.jsx
+++ b/src/Checkbox.jsx
@@ -1,29 +1,29 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import PureRenderMixin from 'rc-util/lib/PureRenderMixin';
 import classNames from 'classnames';
 
 export default class Checkbox extends React.Component {
   static propTypes = {
-    name: React.PropTypes.string,
-    prefixCls: React.PropTypes.string,
-    style: React.PropTypes.object,
-    type: React.PropTypes.string,
-    className: React.PropTypes.string,
-    defaultChecked: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.bool]),
-    disabled: React.PropTypes.bool,
-    checked: React.PropTypes.oneOfType([React.PropTypes.number, React.PropTypes.bool]),
-    onFocus: React.PropTypes.func,
-    onBlur: React.PropTypes.func,
-    onChange: React.PropTypes.func,
-    onClick: React.PropTypes.func,
-    tabIndex: React.PropTypes.string,
-    readOnly: React.PropTypes.bool,
+    prefixCls: PropTypes.string,
+    className: PropTypes.string,
+    style: PropTypes.object,
+    name: PropTypes.string,
+    type: PropTypes.string,
+    defaultChecked: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+    checked: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+    disabled: PropTypes.bool,
+    onFocus: PropTypes.func,
+    onBlur: PropTypes.func,
+    onChange: PropTypes.func,
+    onClick: PropTypes.func,
+    tabIndex: PropTypes.string,
+    readOnly: PropTypes.bool,
   };
   static defaultProps = {
     prefixCls: 'rc-checkbox',
+    className: '',
     style: {},
     type: 'checkbox',
-    className: '',
     defaultChecked: false,
     onFocus() {},
     onBlur() {},
@@ -63,17 +63,18 @@ export default class Checkbox extends React.Component {
   };
 
   handleChange = (e) => {
-    if (this.props.disabled) {
+    const { props } = this;
+    if (props.disabled) {
       return;
     }
-    if (!('checked' in this.props)) {
+    if (!('checked' in props)) {
       this.setState({
         checked: e.target.checked,
       });
     }
-    this.props.onChange({
+    props.onChange({
       target: {
-        ...this.props,
+        ...props,
         checked: e.target.checked,
       },
       stopPropagation() {
@@ -87,7 +88,7 @@ export default class Checkbox extends React.Component {
 
   render() {
     const {
-      prefixCls, className, disabled, style, name, type, readOnly, tabIndex, onClick,
+      prefixCls, className, style, name, type, disabled, readOnly, tabIndex, onClick,
     } = this.props;
     const { checked, focus } = this.state;
     const classString = classNames(prefixCls, className, {

From 04a5d136406e595aac4bea4929a0694b5f8bb8ed Mon Sep 17 00:00:00 2001
From: Benjy Cui <benjytrys@gmail.com>
Date: Tue, 28 Feb 2017 09:57:48 +0800
Subject: [PATCH 2/2] refactor: simplify focus logic

---
 assets/index.less |  7 +++----
 src/Checkbox.jsx  | 32 +++++++++++++++-----------------
 2 files changed, 18 insertions(+), 21 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 45f5704..5b7cda3 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -11,10 +11,9 @@
   line-height: 1;
   vertical-align: middle;
 
-  &:hover, &-focused {
-    .@{checkboxInnerPrefixCls} {
-      border-color: #bcbcbc;
-    }
+  &:hover .@{checkboxInnerPrefixCls},
+  &-input:focus + .@{checkboxInnerPrefixCls} {
+    border-color: #3dbcf6;
   }
 
   &-inner {
diff --git a/src/Checkbox.jsx b/src/Checkbox.jsx
index a4b623b..066b35a 100644
--- a/src/Checkbox.jsx
+++ b/src/Checkbox.jsx
@@ -36,7 +36,6 @@ export default class Checkbox extends React.Component {
 
     this.state = {
       checked,
-      focus: false,
     };
   }
 
@@ -52,16 +51,6 @@ export default class Checkbox extends React.Component {
     return PureRenderMixin.shouldComponentUpdate.apply(this, args);
   }
 
-  handleFocus = (e) => {
-    this.setState({ focus: true });
-    this.props.onFocus(e);
-  };
-
-  handleBlur = (e) => {
-    this.setState({ focus: false });
-    this.props.onBlur(e);
-  };
-
   handleChange = (e) => {
     const { props } = this;
     if (props.disabled) {
@@ -88,18 +77,26 @@ export default class Checkbox extends React.Component {
 
   render() {
     const {
-      prefixCls, className, style, name, type, disabled, readOnly, tabIndex, onClick,
+      prefixCls,
+      className,
+      style,
+      name,
+      type,
+      disabled,
+      readOnly,
+      tabIndex,
+      onClick,
+      onFocus,
+      onBlur,
     } = this.props;
-    const { checked, focus } = this.state;
+    const { checked } = this.state;
     const classString = classNames(prefixCls, className, {
       [`${prefixCls}-checked`]: checked,
-      [`${prefixCls}-focused`]: focus,
       [`${prefixCls}-disabled`]: disabled,
     });
 
     return (
       <span className={classString} style={style}>
-        <span className={`${prefixCls}-inner`} />
         <input
           name={name}
           type={type}
@@ -109,10 +106,11 @@ export default class Checkbox extends React.Component {
           className={`${prefixCls}-input`}
           checked={!!checked}
           onClick={onClick}
-          onFocus={this.handleFocus}
-          onBlur={this.handleBlur}
+          onFocus={onFocus}
+          onBlur={onBlur}
           onChange={this.handleChange}
         />
+        <span className={`${prefixCls}-inner`} />
       </span>
     );
   }