react-radio-buttons - npm Package Compare versions

Comparing version 1.0.10 to 1.0.11

index.jsx

 import React, { Component, PropTypes } from 'react';
 
+function getInitialCheckedIndex(children) {
+    let checkedIndex;
+
+    for (let i = 0; i < children.length; i++) {
+      if (!children[i].props.disabled) {
+          checkedIndex = i;
+          break;
+      }
+    }
+
+    return checkedIndex;
+}
+
 export class RadioGroup extends Component {
@@ -7,3 +20,3 @@ constructor({ children, value }) {
     const index = children.findIndex(c => c.props.value === value);
-    this.state = { checkedIndex: index > -1 ? index : 0 };
+    this.state = { checkedIndex: (index > -1 && !children[index].disabled) ? index : getInitialCheckedIndex(children) };
     this.renderChild = this.renderChild.bind(this);
@@ -69,9 +82,11 @@ this.onChange = this.onChange.bind(this);
   getStyles() {
-    const { horizontal, last, padding, rootColor, pointColor } = this.props;
+    const { horizontal, last, padding, rootColor, pointColor, disabled, disabledColor } = this.props;
 
     return {
       root: {
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        color: disabled ? (disabledColor || '#e1e1e1') : (rootColor || '#E0E0E0'),
         borderWidth: 1,
         borderStyle: 'solid',
-        borderColor: rootColor || '#E0E0E0',
+        borderColor: disabled ? (disabledColor || '#e1e1e1') : (rootColor || '#E0E0E0'),
         borderRadius: 1,
@@ -91,8 +106,8 @@ padding: padding || 16,
   onClick() {
-    const { onChange, checked, index } = this.props;
-    onChange && onChange(index);
+    const { onChange, checked, index, disabled } = this.props;
+    !disabled && onChange && onChange(index);
   }
 
   render() {
-    const { checked, iconSize, iconInnerSize, rootColor, pointColor, children } = this.props;
+    const { checked, iconSize, iconInnerSize, rootColor, pointColor, children, disabled, disabledColor } = this.props;
     const style = this.getStyles();
@@ -106,4 +121,5 @@ const buttonStyle = Object.assign(style.root, checked ? style.checked : {});
           </div>
-          <RadioIcon size={ iconSize } innerSize={ iconInnerSize } 
+          <RadioIcon size={ iconSize } innerSize={ iconInnerSize }
             checked={ checked } rootColor={ rootColor } pointColor={ pointColor }
+            disabled={ disabled } disabledColor={ disabledColor }
           />
@@ -128,2 +144,4 @@ </div>
   onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  disabledColor: PropTypes.bool
 };
@@ -138,4 +156,4 @@
   getStyles() {
-    const { size, innerSize, rootColor, pointColor } = this.props;
-    
+    const { size, innerSize, rootColor, pointColor, disabled, disabledColor } = this.props;
+
     return {
@@ -150,3 +168,3 @@ root: {
         borderStyle: 'solid',
-        borderColor: rootColor || '#9E9E9E',
+        borderColor: disabled ? (disabledColor || '#e1e1e1') : (rootColor || '#9E9E9E'),
       },
@@ -183,2 +201,4 @@ checked: {
   checked: PropTypes.bool,
+  disabled: PropTypes.bool,
+  disabledColor: PropTypes.string
 };

lib/index.js

@@ -26,2 +26,15 @@ 'use strict';
 
+function getInitialCheckedIndex(children) {
+  var checkedIndex = void 0;
+
+  for (var i = 0; i < children.length; i++) {
+    if (!children[i].props.disabled) {
+      checkedIndex = i;
+      break;
+    }
+  }
+
+  return checkedIndex;
+}
+
 var RadioGroup = exports.RadioGroup = function (_Component) {
@@ -41,3 +54,3 @@ _inherits(RadioGroup, _Component);
     });
-    _this.state = { checkedIndex: index > -1 ? index : 0 };
+    _this.state = { checkedIndex: index > -1 && !children[index].disabled ? index : getInitialCheckedIndex(children) };
     _this.renderChild = _this.renderChild.bind(_this);
@@ -141,2 +154,4 @@ _this.onChange = _this.onChange.bind(_this);
       var pointColor = _props4.pointColor;
+      var disabled = _props4.disabled;
+      var disabledColor = _props4.disabledColor;
 
@@ -146,5 +161,7 @@
         root: {
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          color: disabled ? disabledColor || '#e1e1e1' : rootColor || '#E0E0E0',
           borderWidth: 1,
           borderStyle: 'solid',
-          borderColor: rootColor || '#E0E0E0',
+          borderColor: disabled ? disabledColor || '#e1e1e1' : rootColor || '#E0E0E0',
           borderRadius: 1,
@@ -169,4 +186,5 @@ padding: padding || 16,
       var index = _props5.index;
+      var disabled = _props5.disabled;
 
-      onChange && onChange(index);
+      !disabled && onChange && onChange(index);
     }
@@ -183,2 +201,4 @@ }, {
       var children = _props6.children;
+      var disabled = _props6.disabled;
+      var disabledColor = _props6.disabledColor;
 
@@ -199,3 +219,4 @@ var style = this.getStyles();
           _react2.default.createElement(RadioIcon, { size: iconSize, innerSize: iconInnerSize,
-            checked: checked, rootColor: rootColor, pointColor: pointColor
+            checked: checked, rootColor: rootColor, pointColor: pointColor,
+            disabled: disabled, disabledColor: disabledColor
           })
@@ -221,3 +242,5 @@ )
   horizontal: _react.PropTypes.bool,
-  onChange: _react.PropTypes.func
+  onChange: _react.PropTypes.func,
+  disabled: _react.PropTypes.bool,
+  disabledColor: _react.PropTypes.bool
 };
@@ -245,2 +268,4 @@
       var pointColor = _props7.pointColor;
+      var disabled = _props7.disabled;
+      var disabledColor = _props7.disabledColor;
 
@@ -257,3 +282,3 @@
           borderStyle: 'solid',
-          borderColor: rootColor || '#9E9E9E'
+          borderColor: disabled ? disabledColor || '#e1e1e1' : rootColor || '#9E9E9E'
         },
@@ -294,3 +319,5 @@ checked: {
   pointColor: _react.PropTypes.string,
-  checked: _react.PropTypes.bool
+  checked: _react.PropTypes.bool,
+  disabled: _react.PropTypes.bool,
+  disabledColor: _react.PropTypes.string
 };

package.json

 {
   "name": "react-radio-buttons",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "description": "Well-designed radio buttons for react.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -7,3 +7,3 @@ # react-radio-buttons
 npm install react-radio-buttons --save
-``` 
+```
 Then just add `import { RadioGroup, RadioButton } from 'react-radio-buttons';` into your file.
@@ -40,3 +40,3 @@
 ### RadioGroup
-| name     | description    | 
+| name     | description    |
 |----------|----------------|
@@ -49,3 +49,3 @@ |onChange|called when select child `RadionButton`|
 ### RadioButton
-| name     | description    | 
+| name     | description    |
 |----------|----------------|
@@ -59,2 +59,4 @@ |iconSize|size of `RadioIcon`, which appear right side of button|
 |children|prefer string|
+|disabled|boolean flag that allows you to disable a certain a button|
+|disabledColor|color when disabled, including the `RadioIcon`|
 
@@ -61,0 +63,0 @@ ## Author

No alert changes

Improved metrics

Total package byte prevSize

21178

increased by10.33%

Lines of code

460

increased by9.79%

Number of lines in readme file

66

increased by3.13%

No dependency changes