react-checkbox-group - npm Package Compare versions

Comparing version 3.3.0 to 3.3.1

package.json

 {
   "name": "react-checkbox-group",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "Sensible checkbox groups manipulation for DOM.",
@@ -40,4 +40,8 @@ "main": "react-checkbox-group.js",
     "react": "^15.0.1",
+    "react-addons-test-utils": "^15.0.1",
     "react-dom": "^15.0.1"
+  },
+  "dependencies": {
+    "prop-types": "^15.5.10"
   }
 }

react-checkbox-group.js

@@ -16,2 +16,6 @@ 'use strict';
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -39,3 +43,3 @@
     value: function componentWillMount() {
-      if (!(this.props && this.props.checkboxGroup)) {
+      if (!(this.context && this.context.checkboxGroup)) {
         throw new Error('The `Checkbox` component must be used as a child of `CheckboxGroup`.');
@@ -47,8 +51,6 @@ }
     value: function render() {
-      var _props = this.props,
-          _props$checkboxGroup = _props.checkboxGroup,
-          name = _props$checkboxGroup.name,
-          checkedValues = _props$checkboxGroup.checkedValues,
-          onChange = _props$checkboxGroup.onChange,
-          rest = _objectWithoutProperties(_props, ['checkboxGroup']);
+      var _context$checkboxGrou = this.context.checkboxGroup,
+          name = _context$checkboxGrou.name,
+          checkedValues = _context$checkboxGrou.checkedValues,
+          onChange = _context$checkboxGrou.onChange;
 
@@ -63,3 +65,3 @@ var optional = {};
 
-      return _react2.default.createElement('input', _extends({}, rest, {
+      return _react2.default.createElement('input', _extends({}, this.props, {
         type: 'checkbox',
@@ -75,2 +77,6 @@ name: name,
 
+Checkbox.contextTypes = {
+  checkboxGroup: _propTypes2.default.object.isRequired
+};
+
 var CheckboxGroup = exports.CheckboxGroup = function (_Component2) {
@@ -86,2 +92,3 @@ _inherits(CheckboxGroup, _Component2);
     _this2._onCheckboxChange = _this2._onCheckboxChange.bind(_this2);
+    _this2.getChildContext = _this2.getChildContext.bind(_this2);
     _this2.getValue = _this2.getValue.bind(_this2);
@@ -95,2 +102,12 @@ _this2.state = {
   _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',
@@ -107,22 +124,14 @@ value: function componentWillReceiveProps(newProps) {
     value: function render() {
-      var checkboxGroup = {
-        name: this.props.name,
-        checkedValues: this.state.value,
-        onChange: this._onCheckboxChange
-      };
+      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']);
 
-      var _props2 = this.props,
-          Component = _props2.Component,
-          name = _props2.name,
-          value = _props2.value,
-          onChange = _props2.onChange,
-          children = _props2.children,
-          rest = _objectWithoutProperties(_props2, ['Component', 'name', 'value', 'onChange', 'children']);
-
       return _react2.default.createElement(
         Component,
         rest,
-        _react2.default.Children.map(children, function (child) {
-          return _react2.default.cloneElement(child, { checkboxGroup: checkboxGroup });
-        })
+        children
       );
@@ -167,4 +176,15 @@ }
 
+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

 import React, {Component} from 'react';
+import PropTypes from 'prop-types';
 
@@ -6,4 +7,8 @@ export class Checkbox extends Component {
 
+  static contextTypes = {
+    checkboxGroup: PropTypes.object.isRequired
+  }
+
   componentWillMount() {
-    if (!(this.props && this.props.checkboxGroup)) {
+    if (!(this.context && this.context.checkboxGroup)) {
       throw new Error('The `Checkbox` component must be used as a child of `CheckboxGroup`.');
@@ -14,3 +19,3 @@ }
   render() {
-    const {checkboxGroup: {name, checkedValues, onChange}, ...rest} = this.props;
+    const {name, checkedValues, onChange} = this.context.checkboxGroup;
     const optional = {};
@@ -26,3 +31,3 @@ if (checkedValues) {
       <input
-        {...rest}
+        {...this.props}
         type="checkbox"
@@ -40,2 +45,19 @@ name={name}
 
+  static childContextTypes = {
+    checkboxGroup: PropTypes.object.isRequired
+  }
+
+  static propTypes = {
+    name: PropTypes.string,
+    defaultValue: PropTypes.array,
+    value: PropTypes.array,
+    onChange: PropTypes.func,
+    children: PropTypes.node.isRequired,
+    Component: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.func,
+      PropTypes.object
+    ])
+  }
+
   static defaultProps = {
@@ -49,2 +71,3 @@ Component: "div"
     this._onCheckboxChange = this._onCheckboxChange.bind(this);
+    this.getChildContext = this.getChildContext.bind(this);
     this.getValue = this.getValue.bind(this);
@@ -56,2 +79,11 @@ this.state = {
 
+  getChildContext() {
+    const checkboxGroup = {
+      name: this.props.name,
+      checkedValues: this.state.value,
+      onChange: this._onCheckboxChange
+    };
+    return {checkboxGroup};
+  }
+
   componentWillReceiveProps(newProps) {
@@ -66,10 +98,4 @@ if (newProps.value) {
   render() {
-    const checkboxGroup = {
-      name: this.props.name,
-      checkedValues: this.state.value,
-      onChange: this._onCheckboxChange
-    };
-
     const {Component, name, value, onChange, children, ...rest} = this.props;
-    return <Component {...rest}>{React.Children.map(children, child => React.cloneElement(child, {checkboxGroup}))}</Component>;
+    return <Component {...rest}>{children}</Component>;
   }
@@ -76,0 +102,0 @@

test/react-checkbox-group_spec.js

@@ -5,3 +5,3 @@ import React from 'react';
 import {Checkbox, CheckboxGroup} from '../react-checkbox-group.jsx';
-import {Simulate, renderIntoDocument} from 'react-dom/test-utils';
+import {Simulate, renderIntoDocument} from 'react-addons-test-utils';
 
@@ -8,0 +8,0 @@ function _findInputWithValue(wrapper, value) {

No alert changes

Improved metrics

Total package byte prevSize

20658

increased by6.34%

Lines of code

431

increased by10.51%

Worsened metrics

Dependency count

1

increased byInfinity%

Dev dependency count

11

increased by10%

Dependency changes

• + Addedprop-types@^15.5.10

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)