react-radio-buttons - npm Package Compare versions

Comparing version 1.0.11 to 1.0.12

index.jsx

@@ -144,2 +144,74 @@ import React, { Component, PropTypes } from 'react';
 
+export class ReversedRadioButton extends Component {
+  constructor() {
+    super();
+    this.getStyles = this.getStyles.bind(this);
+    this.onClick = this.onClick.bind(this);
+  }
+
+  getStyles() {
+    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: disabled ? (disabledColor || '#e1e1e1') : (rootColor || '#E0E0E0'),
+        borderRadius: 1,
+        padding: padding || 16,
+        flex: 1,
+        marginBottom: horizontal ? 0 : (padding || 16),
+        marginRight: horizontal && !last ? (padding || 16) / 2 : 0,
+      },
+      checked: {
+        borderColor: pointColor || '#8CB9FD',
+        color: pointColor || '#8CB9FD',
+      },
+    };
+  }
+
+  onClick() {
+    const { onChange, checked, index, disabled } = this.props;
+    !disabled && onChange && onChange(index);
+  }
+
+  render() {
+    const { checked, iconSize, iconInnerSize, rootColor, pointColor, children, disabled, disabledColor, padding } = this.props;
+    const style = this.getStyles();
+    const buttonStyle = Object.assign(style.root, checked ? style.checked : {});
+    return (
+      <div style={ buttonStyle } onClick={ this.onClick }>
+        <div style={ { display: 'inline-flex', width: '100%' } }>
+          <RadioIcon size={ iconSize } innerSize={ iconInnerSize }
+            checked={ checked } rootColor={ rootColor } pointColor={ pointColor }
+            disabled={ disabled } disabledColor={ disabledColor }
+            marginRight={ padding || 16 }
+          />
+          <div style={ { flex: 1 } }>
+            { children }
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+ReversedRadioButton.propTypes = {
+  iconSize: PropTypes.number,
+  iconInnerSize: PropTypes.number,
+  padding: PropTypes.number,
+  rootColor: PropTypes.string,
+  pointColor: PropTypes.string,
+  value: PropTypes.string,
+  index: PropTypes.number,
+  checked: PropTypes.bool,
+  children: PropTypes.node,
+  horizontal: PropTypes.bool,
+  onChange: PropTypes.func,
+  disabled: PropTypes.bool,
+  disabledColor: PropTypes.bool
+};
+
 class RadioIcon extends Component {
@@ -152,3 +224,3 @@ constructor() {
   getStyles() {
-    const { size, innerSize, rootColor, pointColor, disabled, disabledColor } = this.props;
+    const { size, innerSize, rootColor, pointColor, disabled, disabledColor, marginRight } = this.props;
 
@@ -165,2 +237,3 @@ return {
         borderColor: disabled ? (disabledColor || '#e1e1e1') : (rootColor || '#9E9E9E'),
+        marginRight: marginRight || 0,
       },
@@ -198,3 +271,4 @@ checked: {
   disabled: PropTypes.bool,
-  disabledColor: PropTypes.string
+  disabledColor: PropTypes.string,
+  marginRight: PropTypes.number,
 };

lib/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.RadioButton = exports.RadioGroup = undefined;
+exports.ReversedRadioButton = exports.RadioButton = exports.RadioGroup = undefined;
 
@@ -241,20 +241,22 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var RadioIcon = function (_Component3) {
-  _inherits(RadioIcon, _Component3);
+var ReversedRadioButton = exports.ReversedRadioButton = function (_Component3) {
+  _inherits(ReversedRadioButton, _Component3);
 
-  function RadioIcon() {
-    _classCallCheck(this, RadioIcon);
+  function ReversedRadioButton() {
+    _classCallCheck(this, ReversedRadioButton);
 
-    var _this4 = _possibleConstructorReturn(this, (RadioIcon.__proto__ || Object.getPrototypeOf(RadioIcon)).call(this));
+    var _this4 = _possibleConstructorReturn(this, (ReversedRadioButton.__proto__ || Object.getPrototypeOf(ReversedRadioButton)).call(this));
 
     _this4.getStyles = _this4.getStyles.bind(_this4);
+    _this4.onClick = _this4.onClick.bind(_this4);
     return _this4;
   }
 
-  _createClass(RadioIcon, [{
+  _createClass(ReversedRadioButton, [{
     key: 'getStyles',
     value: function getStyles() {
       var _props7 = this.props;
-      var size = _props7.size;
-      var innerSize = _props7.innerSize;
+      var horizontal = _props7.horizontal;
+      var last = _props7.last;
+      var padding = _props7.padding;
       var rootColor = _props7.rootColor;
@@ -268,2 +270,113 @@ var pointColor = _props7.pointColor;
         root: {
+          cursor: disabled ? 'not-allowed' : 'pointer',
+          color: disabled ? disabledColor || '#e1e1e1' : rootColor || '#E0E0E0',
+          borderWidth: 1,
+          borderStyle: 'solid',
+          borderColor: disabled ? disabledColor || '#e1e1e1' : rootColor || '#E0E0E0',
+          borderRadius: 1,
+          padding: padding || 16,
+          flex: 1,
+          marginBottom: horizontal ? 0 : padding || 16,
+          marginRight: horizontal && !last ? (padding || 16) / 2 : 0
+        },
+        checked: {
+          borderColor: pointColor || '#8CB9FD',
+          color: pointColor || '#8CB9FD'
+        }
+      };
+    }
+  }, {
+    key: 'onClick',
+    value: function onClick() {
+      var _props8 = this.props;
+      var onChange = _props8.onChange;
+      var checked = _props8.checked;
+      var index = _props8.index;
+      var disabled = _props8.disabled;
+
+      !disabled && onChange && onChange(index);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props9 = this.props;
+      var checked = _props9.checked;
+      var iconSize = _props9.iconSize;
+      var iconInnerSize = _props9.iconInnerSize;
+      var rootColor = _props9.rootColor;
+      var pointColor = _props9.pointColor;
+      var children = _props9.children;
+      var disabled = _props9.disabled;
+      var disabledColor = _props9.disabledColor;
+      var padding = _props9.padding;
+
+      var style = this.getStyles();
+      var buttonStyle = Object.assign(style.root, checked ? style.checked : {});
+      return _react2.default.createElement(
+        'div',
+        { style: buttonStyle, onClick: this.onClick },
+        _react2.default.createElement(
+          'div',
+          { style: { display: 'inline-flex', width: '100%' } },
+          _react2.default.createElement(RadioIcon, { size: iconSize, innerSize: iconInnerSize,
+            checked: checked, rootColor: rootColor, pointColor: pointColor,
+            disabled: disabled, disabledColor: disabledColor,
+            marginRight: padding || 16
+          }),
+          _react2.default.createElement(
+            'div',
+            { style: { flex: 1 } },
+            children
+          )
+        )
+      );
+    }
+  }]);
+
+  return ReversedRadioButton;
+}(_react.Component);
+
+ReversedRadioButton.propTypes = {
+  iconSize: _react.PropTypes.number,
+  iconInnerSize: _react.PropTypes.number,
+  padding: _react.PropTypes.number,
+  rootColor: _react.PropTypes.string,
+  pointColor: _react.PropTypes.string,
+  value: _react.PropTypes.string,
+  index: _react.PropTypes.number,
+  checked: _react.PropTypes.bool,
+  children: _react.PropTypes.node,
+  horizontal: _react.PropTypes.bool,
+  onChange: _react.PropTypes.func,
+  disabled: _react.PropTypes.bool,
+  disabledColor: _react.PropTypes.bool
+};
+
+var RadioIcon = function (_Component4) {
+  _inherits(RadioIcon, _Component4);
+
+  function RadioIcon() {
+    _classCallCheck(this, RadioIcon);
+
+    var _this5 = _possibleConstructorReturn(this, (RadioIcon.__proto__ || Object.getPrototypeOf(RadioIcon)).call(this));
+
+    _this5.getStyles = _this5.getStyles.bind(_this5);
+    return _this5;
+  }
+
+  _createClass(RadioIcon, [{
+    key: 'getStyles',
+    value: function getStyles() {
+      var _props10 = this.props;
+      var size = _props10.size;
+      var innerSize = _props10.innerSize;
+      var rootColor = _props10.rootColor;
+      var pointColor = _props10.pointColor;
+      var disabled = _props10.disabled;
+      var disabledColor = _props10.disabledColor;
+      var marginRight = _props10.marginRight;
+
+
+      return {
+        root: {
           width: size || 10,
@@ -276,3 +389,4 @@ height: size || 10,
           borderStyle: 'solid',
-          borderColor: disabled ? disabledColor || '#e1e1e1' : rootColor || '#9E9E9E'
+          borderColor: disabled ? disabledColor || '#e1e1e1' : rootColor || '#9E9E9E',
+          marginRight: marginRight || 0
         },
@@ -315,3 +429,4 @@ checked: {
   disabled: _react.PropTypes.bool,
-  disabledColor: _react.PropTypes.string
+  disabledColor: _react.PropTypes.string,
+  marginRight: _react.PropTypes.number
 };

package.json

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

README.md

@@ -34,2 +34,5 @@ # react-radio-buttons
   </RadioButton>
+  <ReversedRadioButton value="melon">
+    Melon
+  </ReversedRadioButton>
 </RadioGroup>
@@ -36,0 +39,0 @@ ```

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3639443

increased by17085.02%

Number of package files

11

increased by22.22%

Lines of code

27273

increased by5828.91%

Number of lines in readme file

69

increased by4.55%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes