Add an optional 'closed' prop to DatFolder

Author: Lior Ben-David

.gitignore

@@ -93,3 +93,5 @@ node_modules
 
 # Linux trash folder which might appear on any partition or disk
 .Trash-*
+
+.idea

README.md

@@ -159,6 +159,10 @@ Component which wraps other components to render them within an expandable/colla
  * `title: string` - The folder title eg., `<DatFolder title='MyAwesomeFolder' />`
  * `children: array` - The child components to render
 
+###### optional
+
+ * `closed: boolean` - Whether the initial state of the folder is closed, defaults to `true`
+
 #### `DatNumber`
 
 A number component for updating numeric values. Will render a slider if `min`, `max` and `step` props are supplied.

build/react-dat-gui.js

@@ -6615,8 +6615,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-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 _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 = __webpack_require__(0);
@@ -6633,8 +6631,6 @@ var _classnames2 = _interopRequireDefault(_classnames);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 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; }
@@ -6656,7 +6652,7 @@ var DatFolder = function (_Component) {
     }
 
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = DatFolder.__proto__ || Object.getPrototypeOf(DatFolder)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      closed: true
+      closed: _this.props.closed
     }, _this.handleClick = function () {
       var closed = !_this.state.closed;
 
@@ -6665,24 +6661,12 @@ var DatFolder = function (_Component) {
   }
 
   _createClass(DatFolder, [{
-    key: 'renderChildren',
-    value: function renderChildren() {
-      // Disable this rule to take title out of the props so nested folders can have unique titles.
-      // eslint-disable-next-line no-unused-vars
-      var _props = this.props,
-          children = _props.children,
-          title = _props.title,
-          rest = _objectWithoutProperties(_props, ['children', 'title']);
-
-      return _react2.default.Children.map(children, function (child) {
-        return (0, _react.cloneElement)(child, _extends({}, rest));
-      });
-    }
-  }, {
     key: 'render',
     value: function render() {
       var closed = this.state.closed;
-      var title = this.props.title;
+      var _props = this.props,
+          title = _props.title,
+          children = _props.children;
 
 
       return _react2.default.createElement(
@@ -6699,7 +6683,7 @@ var DatFolder = function (_Component) {
           _react2.default.createElement(
             'ul',
             null,
-            this.renderChildren()
+            children
           )
         )
       );
@@ -6713,7 +6697,8 @@ DatFolder.propTypes = {
   title: _propTypes2.default.string.isRequired
 };
 DatFolder.defaultProps = {
-  title: 'Folder'
+  title: 'Folder',
+  closed: true
 };
 exports.default = DatFolder;
 module.exports = exports['default'];

build/react-dat-gui.js.map

@@ -1,11 +1,11 @@
-import React, { Component, cloneElement } from 'react';
+import React, { Component } from 'react';
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 export default class DatFolder extends Component {
   state = {
-    closed: true,
+    closed: this.props.closed,
   }
 
   static propTypes = {
@@ -14,6 +14,7 @@ export default class DatFolder extends Component {
 
   static defaultProps = {
     title: 'Folder',
+    closed: true
   }
 
   handleClick = () => {
@@ -22,17 +23,9 @@ export default class DatFolder extends Component {
     this.setState({ closed });
   }
 
-  renderChildren() {
-    // Disable this rule to take title out of the props so nested folders can have unique titles.
-    // eslint-disable-next-line no-unused-vars
-    const { children, title, ...rest } = this.props;
-
-    return React.Children.map(children, child => cloneElement(child, {...rest}));
-  }
-
   render() {
     const { closed } = this.state;
-    const { title } = this.props;
+    const { title, children } = this.props;
 
     return (
       <li className={cx('folder', { 'closed': closed })}>
@@ -41,7 +34,7 @@ export default class DatFolder extends Component {
             {title}
           </div>
           <ul>
-            {this.renderChildren()}
+            {children}
           </ul>
         </div>
       </li>

dev/src/react-dat-gui/components/DatFolder.js

@@ -1,6 +1,6 @@
 {
   "name": "react-dat-gui",
-  "version": "1.0.2",
+  "version": "1.1.2",
   "description": "dat.GUI reimagined for React",
   "main": "build/react-dat-gui.js",
   "style": "build/react-dat-gui.css",

package.json

@@ -1,11 +1,11 @@
-import React, { Component, cloneElement } from 'react';
+import React, { Component } from 'react';
 
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
 export default class DatFolder extends Component {
   state = {
-    closed: true,
+    closed: this.props.closed,
   }
 
   static propTypes = {
@@ -14,6 +14,7 @@ export default class DatFolder extends Component {
 
   static defaultProps = {
     title: 'Folder',
+    closed: true
   }
 
   handleClick = () => {
@@ -22,17 +23,9 @@ export default class DatFolder extends Component {
     this.setState({ closed });
   }
 
-  renderChildren() {
-    // Disable this rule to take title out of the props so nested folders can have unique titles.
-    // eslint-disable-next-line no-unused-vars
-    const { children, title, ...rest } = this.props;
-
-    return React.Children.map(children, child => cloneElement(child, {...rest}));
-  }
-
   render() {
     const { closed } = this.state;
-    const { title } = this.props;
+    const { title, children } = this.props;
 
     return (
       <li className={cx('folder', { 'closed': closed })}>
@@ -41,7 +34,7 @@ export default class DatFolder extends Component {
             {title}
           </div>
           <ul>
-            {this.renderChildren()}
+            {children}
           </ul>
         </div>
       </li>