@trendmicro/react-checkbox - npm Package Compare versions

Comparing version 3.1.0 to 3.2.0

lib/index.js

@@ -1,2 +0,2 @@
-/*! react-checkbox v3.1.0 | (c) 2018 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-checkbox */
+/*! react-checkbox v3.2.0 | (c) 2018 Trend Micro Inc. | MIT | https://github.com/trendmicro-frontend/react-checkbox */
 module.exports =
@@ -368,2 +368,8 @@ /******/ (function(modules) { // webpackBootstrap
         }, _this.renderChildren = function (children) {
+            var depth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
+
+            if (depth > _this.props.depth) {
+                return children;
+            }
+
             var mapChild = function mapChild(child) {
@@ -391,3 +397,3 @@ if (!_react2.default.isValidElement(child) || !child.props) {
                     return (0, _react.cloneElement)(child, {
-                        children: _this.renderChildren(child.props.children)
+                        children: _this.renderChildren(child.props.children, depth + 1)
                     });
@@ -431,7 +437,10 @@ }
     disabled: _propTypes2.default.bool,
+    name: _propTypes2.default.string,
+    value: _propTypes2.default.arrayOf(_propTypes2.default.any),
+    defaultValue: _propTypes2.default.arrayOf(_propTypes2.default.any),
     onChange: _propTypes2.default.func,
-    value: _propTypes2.default.arrayOf(_propTypes2.default.any),
-    defaultValue: _propTypes2.default.arrayOf(_propTypes2.default.any)
+    depth: _propTypes2.default.number
 }, _class.defaultProps = {
-    disabled: false
+    disabled: false,
+    depth: 1
 }, _temp2);
@@ -438,0 +447,0 @@ exports.default = CheckboxGroup;

package.json

 {
   "name": "@trendmicro/react-checkbox",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "description": "React Checkbox component",
@@ -32,2 +32,7 @@ "main": "lib/index.js",
       "url": "https://github.com/trendmicro-frontend"
+    },
+    {
+      "name": "Cheton Wu",
+      "email": "[e-mail]",
+      "url": "https://github.com/trendmicro-frontend"
     }
@@ -34,0 +39,0 @@ ],

README.md

@@ -70,2 +70,4 @@ # react-checkbox [![build status](https://travis-ci.org/trendmicro-frontend/react-checkbox.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-checkbox) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-checkbox/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-checkbox?branch=master)
 
+When rendering checkboxes deeply nested inside the checkbox group, you need to pass a `depth` prop to limit the recursion depth.
+
 ```jsx
@@ -75,2 +77,3 @@ <CheckboxGroup
     value={this.state.value}
+    depth={3} // This is needed to minimize the recursion overhead
     onChange={(value, event) => {
@@ -93,2 +96,39 @@ this.setState({ value: value });
 
+## Prevent onChange Propagation
+
+You may need to use `event.stopPropagation()` to stop **onChange** propagation when wrapping an input element inside the **CheckboxGroup** or **Checkbox** component.
+
+```jsx
+<CheckboxGroup
+    name="checkboxgroup"
+    value={this.state.value}
+    onChange={(value, event) => {
+        this.setState({ value: value });
+    }}
+>
+    <Checkbox label="First option" value="one">
+        <div style={{ marginLeft: 22 }}>
+            <input
+                type="text"
+                onChange={(event) => {
+                    // Prevent onChange propagation
+                    event.stopPropagation();
+                }}
+            />
+        </div>
+    </Checkbox>
+    <Checkbox label="Second option" value="two">
+        <div style={{ marginLeft: 22 }}>
+            <input
+                type="text"
+                onChange={(event) => {
+                    // Prevent onChange propagation
+                    event.stopPropagation();
+                }}
+            />
+        </div>
+    </Checkbox>
+</CheckboxGroup>
+```
+
 ## API
@@ -124,2 +164,3 @@
 onChange | Function | | Callback function that will be invoked when the value changes.
+depth | Number | 1 | Limits the recursion depth when rendering checkboxes deeply inside a checkbox group.
 
@@ -126,0 +167,0 @@ ### Class Properties

No alert changes

Improved metrics

Total package byte prevSize

52676

increased by4.34%

Lines of code

442

increased by1.61%

Number of lines in readme file

206

increased by24.85%

No dependency changes