Little improvements in checkbox component

react-toolbox · Oct 6, 2015 · fedb8f1 · fedb8f1
1 parent 07d182a
commit fedb8f1
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 17 deletions.
diff --git a/components/checkbox/index.jsx b/components/checkbox/index.jsx
@@ -2,7 +2,7 @@
 
 import { addons } from 'react/addons';
 import Ripple from '../ripple';
-import style from './style.scss';
+import style from './style';
 import events from '../utils/events';
 
 export default React.createClass({
@@ -15,13 +15,15 @@ export default React.createClass({
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
     label: React.PropTypes.string,
+    name: React.PropTypes.string,
     onBlur: React.PropTypes.func,
     onChange: React.PropTypes.func,
     onFocus: React.PropTypes.func
   },
 
   getDefaultProps () {
     return {
+      checked: false,
       className: '',
       disabled: false
     };
@@ -32,8 +34,9 @@ export default React.createClass({
   },
 
   handleChange (event) {
-    this.setState({checked: !this.state.checked});
-    if (this.props.onChange) this.props.onChange(event, this);
+    this.setState({checked: !this.state.checked}, () => {
+      if (this.props.onChange) this.props.onChange(event, this);
+    });
   },
 
   handleClick (event) {

diff --git a/components/checkbox/style.scss b/components/checkbox/style.scss
@@ -6,7 +6,8 @@ $checkbox-focus-size: $checkbox-size * 2.3;
 $checkbox-color: unquote("rgb(#{$color-primary})") !default;
 $checkbox-text-color: unquote("rgb(#{$color-black})") !default;
 $checkbox-disabled-color: unquote("rgba(#{$color-black}, 0.26)") !default;
-$checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
+$check-focus-color: unquote("rgba(#{$color-black}, 0.1)") !default;
+$checked-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
 
 .field {
   position: relative;
@@ -33,19 +34,25 @@ $checkbox-focus-color: unquote("rgba(#{$color-primary}, 0.26)") !default;
   overflow: hidden;
   opacity: 0;
 
-  &:focus:not(&:active) + .check:before {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    z-index: $z-index-low;
-    width: $checkbox-focus-size;
-    height: $checkbox-focus-size;
-    margin-top: - $checkbox-focus-size / 2;
-    margin-left: - $checkbox-focus-size / 2;
-    pointer-events: none;
-    content: "";
-    background-color: $checkbox-focus-color;
-    border-radius: 50%;
+  &:focus:not(&:active) {
+    + .check:before {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      z-index: $z-index-low;
+      width: $checkbox-focus-size;
+      height: $checkbox-focus-size;
+      margin-top: - $checkbox-focus-size / 2;
+      margin-left: - $checkbox-focus-size / 2;
+      pointer-events: none;
+      content: "";
+      background-color: $check-focus-color;
+      border-radius: 50%;
+    }
+
+    + .checked:before {
+      background-color: $checked-focus-color;
+    }
   }
 }