Add a "depth" prop to limit the recursion depth when rendering radio …

…buttons deeply inside a radio group
trendmicro-frontend · Feb 14, 2018 · 6750fe8 · 6750fe8
1 parent b4d24b1
commit 6750fe8
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 18 deletions.
diff --git a/README.md b/README.md
@@ -63,10 +63,13 @@ The label prop is optional, you can use children to pass through the component.
 
 ### RadioGroup
 
+When rendering radio buttons deeply nested inside the radio group, you need to pass a `depth` prop to limit the recursion depth.
+
 ```jsx
 <RadioGroup
     name="comic"
     value={this.state.value}
+    depth={3} // This is needed to minimize the recursion overhead
     onChange={(value, event) => {
         this.setState({ value: value });
     }}
@@ -84,7 +87,7 @@ The label prop is optional, you can use children to pass through the component.
 </RadioGroup>
 ```
 
-## React onChange Propagation
+## Prevent onChange Propagation
 
 You may need to use `event.stopPropagation()` to stop **onChange** propagation when wrapping an input element inside the **RadioGroup** or **RadioButton** component.
 
@@ -93,11 +96,6 @@ You may need to use `event.stopPropagation()` to stop **onChange** propagation w
     name="radiogroup"
     value={this.state.value}
     onChange={(value, event) => {
-        if (typeof value === 'object') {
-            // You can prevent onChange propagation in one place
-            return;
-        }
-
         this.setState({ value: value });
     }}
 >
@@ -157,6 +155,7 @@ name | String | | Name for the input element group.
 value | any | | The value of the radio group.
 defaultValue | any | | The default value of the radio group.
 onChange | Function | | Callback function that will be invoked when the value changes.
+depth | Number | 1 | Limits the recursion depth when rendering radio buttons deeply inside a radio group.
 
 ### Class Properties
 

diff --git a/dist/react-radio.css b/dist/react-radio.css
diff --git a/dist/react-radio.min.css b/dist/react-radio.min.css
diff --git a/docs/bundle.js b/docs/bundle.js
diff --git a/docs/index.html b/docs/index.html
@@ -11,5 +11,5 @@
 </head>
 <body style="background-color: #eee">
 <div id="container"></div>
-<script type="text/javascript" src="bundle.js?d8b5f732f7a8a1aeeef2"></script></body>
+<script type="text/javascript" src="bundle.js?c79412a76c8c8cdfb4de"></script></body>
 </html>
diff --git a/examples/ControlledRadioGroup.jsx b/examples/ControlledRadioGroup.jsx
@@ -23,6 +23,7 @@ export default class extends PureComponent {
                 <RadioGroup
                     name="ports"
                     value={this.state.ports}
+                    depth={2}
                     onChange={this.handleChangeByKey('ports')}
                 >
                     <div>

diff --git a/examples/UncontrolledRadioGroup.jsx b/examples/UncontrolledRadioGroup.jsx
@@ -22,6 +22,7 @@ export default class extends PureComponent {
                 <p>{`Selected: "${this.state.ports}"`}</p>
                 <RadioGroup
                     name="ports"
+                    depth={2}
                     onChange={this.handleChangeByKey('ports')}
                 >
                     <div>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@trendmicro/react-radio",
-  "version": "3.1.3",
+  "version": "3.2.0",
   "description": "React Radio component",
   "main": "lib/index.js",
   "files": [

diff --git a/src/RadioGroup.jsx b/src/RadioGroup.jsx
@@ -6,13 +6,16 @@ import RadioButton from './RadioButton';
 class RadioGroup extends PureComponent {
     static propTypes = {
         disabled: PropTypes.bool,
-        onChange: PropTypes.func,
+        name: PropTypes.string,
         value: PropTypes.any,
-        defaultValue: PropTypes.any
+        defaultValue: PropTypes.any,
+        onChange: PropTypes.func,
+        depth: PropTypes.number
     };
 
     static defaultProps = {
-        disabled: false
+        disabled: false,
+        depth: 1
     };
 
     state = {
@@ -37,7 +40,11 @@ class RadioGroup extends PureComponent {
         }
     };
 
-    renderChildren = (children) => {
+    renderChildren = (children, depth = 1) => {
+        if (depth > this.props.depth) {
+            return children;
+        }
+
         const mapChild = (child) => {
             if (!React.isValidElement(child) || !child.props) {
                 return child;
@@ -63,7 +70,7 @@ class RadioGroup extends PureComponent {
 
             if (child.props.children && typeof child.props.children === 'object') {
                 return cloneElement(child, {
-                    children: this.renderChildren(child.props.children)
+                    children: this.renderChildren(child.props.children, depth + 1)
                 });
             }