react-checkbox-group - npm Package Compare versions

Comparing version 3.1.0 to 3.1.1

package.json

 {
   "name": "react-checkbox-group",
-  "version": "3.1.0",
+  "version": "3.1.1",
   "description": "Sensible checkbox groups manipulation for DOM.",
@@ -33,4 +33,5 @@ "main": "react-checkbox-group.js",
     "babel-plugin-transform-object-rest-spread": "^6.6.5",
-    "babel-preset-es2015": "^6.6.0",
-    "babel-preset-react": "^6.5.0",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.1.18",
     "chai": "^3.5.0",
@@ -41,4 +42,5 @@ "jsdom": "^8.1.0",
     "react-addons-test-utils": "^15.0.1",
-    "react-dom": "^15.0.1"
+    "react-dom": "^15.0.1",
+    "prop-types": "^15.5.8"
   }
 }

react-checkbox-group.js

@@ -10,2 +10,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _react = require('react');
@@ -15,2 +17,6 @@
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -20,128 +26,159 @@
 
-var Checkbox = exports.Checkbox = _react2.default.createClass({
-  displayName: 'Checkbox',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-  contextTypes: {
-    checkboxGroup: _react2.default.PropTypes.object.isRequired
-  },
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-  componentWillMount: function componentWillMount() {
-    if (!(this.context && this.context.checkboxGroup)) {
-      throw new Error('The `Checkbox` component must be used as a child of `CheckboxGroup`.');
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Checkbox = exports.Checkbox = function (_Component) {
+  _inherits(Checkbox, _Component);
+
+  function Checkbox() {
+    _classCallCheck(this, Checkbox);
+
+    return _possibleConstructorReturn(this, (Checkbox.__proto__ || Object.getPrototypeOf(Checkbox)).apply(this, arguments));
+  }
+
+  _createClass(Checkbox, [{
+    key: 'componentWillMount',
+    value: function componentWillMount() {
+      if (!(this.context && this.context.checkboxGroup)) {
+        throw new Error('The `Checkbox` component must be used as a child of `CheckboxGroup`.');
+      }
     }
-  },
+  }, {
+    key: 'render',
+    value: function render() {
+      var _context$checkboxGrou = this.context.checkboxGroup,
+          name = _context$checkboxGrou.name,
+          checkedValues = _context$checkboxGrou.checkedValues,
+          onChange = _context$checkboxGrou.onChange;
 
-  render: function render() {
-    var _context$checkboxGrou = this.context.checkboxGroup;
-    var name = _context$checkboxGrou.name;
-    var checkedValues = _context$checkboxGrou.checkedValues;
-    var onChange = _context$checkboxGrou.onChange;
+      var optional = {};
+      if (checkedValues) {
+        optional.checked = checkedValues.indexOf(this.props.value) >= 0;
+      }
+      if (typeof onChange === 'function') {
+        optional.onChange = onChange.bind(null, this.props.value);
+      }
 
-    var optional = {};
-    if (checkedValues) {
-      optional.checked = checkedValues.indexOf(this.props.value) >= 0;
+      return _react2.default.createElement('input', _extends({}, this.props, {
+        type: 'checkbox',
+        name: name,
+        disabled: this.props.disabled
+      }, optional));
     }
-    if (typeof onChange === 'function') {
-      optional.onChange = onChange.bind(null, this.props.value);
-    }
+  }]);
 
-    return _react2.default.createElement('input', _extends({}, this.props, {
-      type: 'checkbox',
-      name: name,
-      disabled: this.props.disabled
-    }, optional));
-  }
-});
+  return Checkbox;
+}(_react.Component);
 
-var CheckboxGroup = exports.CheckboxGroup = _react2.default.createClass({
-  displayName: 'CheckboxGroup',
+Checkbox.contextTypes = {
+  checkboxGroup: _propTypes2.default.object.isRequired
+};
 
-  propTypes: {
-    name: _react.PropTypes.string,
-    defaultValue: _react.PropTypes.array,
-    value: _react.PropTypes.array,
-    onChange: _react.PropTypes.func,
-    children: _react.PropTypes.node.isRequired,
-    Component: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.func, _react.PropTypes.object])
-  },
+var CheckboxGroup = exports.CheckboxGroup = function (_Component2) {
+  _inherits(CheckboxGroup, _Component2);
 
-  getDefaultProps: function getDefaultProps() {
-    return {
-      Component: "div"
+  function CheckboxGroup(props) {
+    _classCallCheck(this, CheckboxGroup);
+
+    var _this2 = _possibleConstructorReturn(this, (CheckboxGroup.__proto__ || Object.getPrototypeOf(CheckboxGroup)).call(this, props));
+
+    _this2._isControlledComponent = _this2._isControlledComponent.bind(_this2);
+    _this2._onCheckboxChange = _this2._onCheckboxChange.bind(_this2);
+    _this2.getChildContext = _this2.getChildContext.bind(_this2);
+    _this2.getValue = _this2.getValue.bind(_this2);
+    _this2.state = {
+      value: _this2.props.value || _this2.props.defaultValue || []
     };
-  },
+    return _this2;
+  }
 
-  childContextTypes: {
-    checkboxGroup: _react2.default.PropTypes.object
-  },
-
-  getChildContext: function getChildContext() {
-    return {
-      checkboxGroup: {
+  _createClass(CheckboxGroup, [{
+    key: 'getChildContext',
+    value: function getChildContext() {
+      var checkboxGroup = {
         name: this.props.name,
         checkedValues: this.state.value,
         onChange: this._onCheckboxChange
+      };
+      return { checkboxGroup: checkboxGroup };
+    }
+  }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(newProps) {
+      if (newProps.value) {
+        this.setState({
+          value: newProps.value
+        });
       }
-    };
-  },
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          Component = _props.Component,
+          name = _props.name,
+          value = _props.value,
+          onChange = _props.onChange,
+          children = _props.children,
+          rest = _objectWithoutProperties(_props, ['Component', 'name', 'value', 'onChange', 'children']);
 
-  getInitialState: function getInitialState() {
-    return {
-      value: this.props.value || this.props.defaultValue || []
-    };
-  },
-
-  componentWillReceiveProps: function componentWillReceiveProps(newProps) {
-    if (newProps.value) {
-      this.setState({
-        value: newProps.value
-      });
+      return _react2.default.createElement(
+        Component,
+        rest,
+        children
+      );
     }
-  },
+  }, {
+    key: 'getValue',
+    value: function getValue() {
+      return this.state.value;
+    }
+  }, {
+    key: '_isControlledComponent',
+    value: function _isControlledComponent() {
+      return Boolean(this.props.value);
+    }
+  }, {
+    key: '_onCheckboxChange',
+    value: function _onCheckboxChange(checkboxValue, event) {
+      var newValue = void 0;
+      if (event.target.checked) {
+        newValue = this.state.value.concat(checkboxValue);
+      } else {
+        newValue = this.state.value.filter(function (v) {
+          return v !== checkboxValue;
+        });
+      }
 
-  render: function render() {
-    var _props = this.props;
-    var Component = _props.Component;
-    var name = _props.name;
-    var value = _props.value;
-    var onChange = _props.onChange;
-    var children = _props.children;
+      if (this._isControlledComponent()) {
+        this.setState({ value: this.props.value });
+      } else {
+        this.setState({ value: newValue });
+      }
 
-    var rest = _objectWithoutProperties(_props, ['Component', 'name', 'value', 'onChange', 'children']);
-
-    return _react2.default.createElement(
-      Component,
-      rest,
-      children
-    );
-  },
-
-  getValue: function getValue() {
-    return this.state.value;
-  },
-
-  _isControlledComponent: function _isControlledComponent() {
-    return !!this.props.value;
-  },
-
-  _onCheckboxChange: function _onCheckboxChange(checkboxValue, event) {
-    var newValue;
-    if (event.target.checked) {
-      newValue = this.state.value.concat(checkboxValue);
-    } else {
-      newValue = this.state.value.filter(function (v) {
-        return v !== checkboxValue;
-      });
+      if (typeof this.props.onChange === 'function') {
+        this.props.onChange(newValue, event);
+      }
     }
+  }]);
 
-    if (!this._isControlledComponent()) {
-      this.setState({ value: newValue });
-    } else {
-      this.setState({ value: this.props.value });
-    }
+  return CheckboxGroup;
+}(_react.Component);
 
-    if (typeof this.props.onChange === 'function') {
-      this.props.onChange(newValue, event);
-    }
-  }
-});
+CheckboxGroup.childContextTypes = {
+  checkboxGroup: _propTypes2.default.object.isRequired
+};
+CheckboxGroup.propTypes = {
+  name: _propTypes2.default.string,
+  defaultValue: _propTypes2.default.array,
+  value: _propTypes2.default.array,
+  onChange: _propTypes2.default.func,
+  children: _propTypes2.default.node.isRequired,
+  Component: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func, _propTypes2.default.object])
+};
+CheckboxGroup.defaultProps = {
+  Component: "div"
+};

react-checkbox-group.jsx

@@ -1,23 +0,24 @@
-import React, {PropTypes} from 'react';
+import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 
-export const Checkbox = React.createClass({
-  displayName: 'Checkbox',
+export class Checkbox extends Component {
+  displayName: 'Checkbox';
 
-  contextTypes: {
-    checkboxGroup: React.PropTypes.object.isRequired
-  },
+  static contextTypes = {
+    checkboxGroup: PropTypes.object.isRequired
+  }
 
-  componentWillMount: function() {
+  componentWillMount() {
     if (!(this.context && this.context.checkboxGroup)) {
       throw new Error('The `Checkbox` component must be used as a child of `CheckboxGroup`.');
     }
-  },
+  }
 
-  render: function() {
+  render() {
     const {name, checkedValues, onChange} = this.context.checkboxGroup;
     const optional = {};
-    if(checkedValues) {
+    if (checkedValues) {
       optional.checked = (checkedValues.indexOf(this.props.value) >= 0);
     }
-    if(typeof onChange === 'function') {
+    if (typeof onChange === 'function') {
       optional.onChange = onChange.bind(null, this.props.value);
@@ -32,11 +33,16 @@ }
         disabled={this.props.disabled}
-        {...optional} />
+        {...optional}
+        />
     );
   }
-});
+}
 
-export const CheckboxGroup = React.createClass({
-  displayName: 'CheckboxGroup',
+export class CheckboxGroup extends Component {
+  displayName: 'CheckboxGroup';
 
-  propTypes: {
+  static childContextTypes = {
+    checkboxGroup: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
     name: PropTypes.string,
@@ -50,33 +56,31 @@ defaultValue: PropTypes.array,
       PropTypes.func,
-      PropTypes.object,
+      PropTypes.object
     ])
-  },
+  }
 
-  getDefaultProps: function() {
-    return {
-      Component: "div"
+  static defaultProps = {
+    Component: "div"
+  }
+
+  constructor(props) {
+    super(props);
+    this._isControlledComponent = this._isControlledComponent.bind(this);
+    this._onCheckboxChange = this._onCheckboxChange.bind(this);
+    this.getChildContext = this.getChildContext.bind(this);
+    this.getValue = this.getValue.bind(this);
+    this.state = {
+      value: this.props.value || this.props.defaultValue || []
     };
-  },
+  }
 
-  childContextTypes: {
-    checkboxGroup: React.PropTypes.object
-  },
+  getChildContext() {
+    const checkboxGroup = {
+      name: this.props.name,
+      checkedValues: this.state.value,
+      onChange: this._onCheckboxChange
+    };
+    return {checkboxGroup};
+  }
 
-  getChildContext: function() {
-    return {
-      checkboxGroup: {
-        name: this.props.name,
-        checkedValues: this.state.value,
-        onChange: this._onCheckboxChange
-      }
-    }
-  },
-
-  getInitialState: function() {
-    return {
-      value: this.props.value || this.props.defaultValue || []
-    }
-  },
-
-  componentWillReceiveProps: function(newProps) {
+  componentWillReceiveProps(newProps) {
     if (newProps.value) {
@@ -87,32 +91,30 @@ this.setState({
     }
-  },
+  }
 
-  render: function() {
+  render() {
     const {Component, name, value, onChange, children, ...rest} = this.props;
     return <Component {...rest}>{children}</Component>;
-  },
+  }
 
-  getValue: function() {
+  getValue() {
     return this.state.value;
-  },
+  }
 
-  _isControlledComponent: function() {
-    return !!this.props.value;
-  },
+  _isControlledComponent() {
+    return Boolean(this.props.value);
+  }
 
-  _onCheckboxChange: function(checkboxValue, event) {
-    var newValue;
+  _onCheckboxChange(checkboxValue, event) {
+    let newValue;
     if (event.target.checked) {
       newValue = this.state.value.concat(checkboxValue);
-    }
-    else {
+    } else {
       newValue = this.state.value.filter(v => v !== checkboxValue);
     }
 
-    if (!this._isControlledComponent()) {
+    if (this._isControlledComponent()) {
+      this.setState({value: this.props.value});
+    } else {
       this.setState({value: newValue});
     }
-    else {
-      this.setState({value: this.props.value});
-    }
 
@@ -123,2 +125,2 @@ if (typeof this.props.onChange === 'function') {
   }
-});
+}

No alert changes

Improved metrics

Total package byte prevSize

20615

17.46%

Lines of code

431

9.67%

Worsened metrics

Dev dependency count

12

20%

No dependency changes