@cmvanb/react-treebeard - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

karma.conf.js

@@ -8,2 +8,5 @@ 'use strict';
     config.set({
+        client: {
+            captureConsole: true
+        },
         basePath: '',
@@ -10,0 +13,0 @@ frameworks: ['mocha'],

lib/components/decorators.js

@@ -122,3 +122,3 @@ 'use strict';
                 terminal = _props.terminal,
-                onClick = _props.onClick,
+                onSelect = _props.onSelect,
                 node = _props.node;
@@ -129,3 +129,3 @@
                 'div',
-                { onClick: onClick,
+                { onClick: onSelect,
                     ref: function ref(_ref4) {
@@ -168,6 +168,7 @@ return _this2.clickableRef = _ref4;
                 decorators = _props2.decorators,
-                node = _props2.node;
+                node = _props2.node,
+                onToggle = _props2.onToggle;
 
 
-            return _react2.default.createElement(decorators.Toggle, { node: node, style: style.toggle });
+            return _react2.default.createElement(decorators.Toggle, { node: node, style: style.toggle, onClick: onToggle });
         }
@@ -182,3 +183,4 @@ }]);
     terminal: _propTypes2.default.bool.isRequired,
-    onClick: _propTypes2.default.func.isRequired,
+    onSelect: _propTypes2.default.func.isRequired,
+    onToggle: _propTypes2.default.func,
     animations: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]).isRequired,
@@ -185,0 +187,0 @@ node: _propTypes2.default.object.isRequired

lib/components/header.js

@@ -88,3 +88,3 @@ 'use strict';
                 node = _props.node,
-                onClick = _props.onClick,
+                onSelect = _props.onSelect,
                 style = _props.style;
@@ -101,3 +101,3 @@ var active = node.active,
                 node: node,
-                onClick: onClick,
+                onSelect: onSelect,
                 style: headerStyles,
@@ -115,5 +115,5 @@ terminal: terminal });
     node: _propTypes2.default.object.isRequired,
-    onClick: _propTypes2.default.func
+    onSelect: _propTypes2.default.func
 };
 
 exports.default = NodeHeader;

lib/components/node.js

@@ -63,3 +63,4 @@ 'use strict';
 
-        _this.onClick = _this.onClick.bind(_this);
+        _this.onSelect = _this.onSelect.bind(_this);
+        _this.onToggle = _this.onToggle.bind(_this);
         return _this;
@@ -69,7 +70,19 @@ }
     (0, _createClass3.default)(TreeNode, [{
-        key: 'onClick',
-        value: function onClick() {
+        key: 'onSelect',
+        value: function onSelect() {
             var _props = this.props,
                 node = _props.node,
-                onToggle = _props.onToggle;
+                onSelect = _props.onSelect;
+
+
+            if (onSelect) {
+                onSelect(node);
+            }
+        }
+    }, {
+        key: 'onToggle',
+        value: function onToggle() {
+            var _props2 = this.props,
+                node = _props2.node,
+                onToggle = _props2.onToggle;
             var toggled = node.toggled;
@@ -85,5 +98,5 @@
         value: function animations() {
-            var _props2 = this.props,
-                animations = _props2.animations,
-                node = _props2.node;
+            var _props3 = this.props,
+                animations = _props3.animations,
+                node = _props3.node;
 
@@ -105,5 +118,5 @@
             // Merge Any Node Based Decorators Into The Pack
-            var _props3 = this.props,
-                decorators = _props3.decorators,
-                node = _props3.node;
+            var _props4 = this.props,
+                decorators = _props4.decorators,
+                node = _props4.node;
 
@@ -165,5 +178,5 @@ var nodeDecorators = node.decorators || {};
         value: function renderHeader(decorators, animations) {
-            var _props4 = this.props,
-                node = _props4.node,
-                style = _props4.style;
+            var _props5 = this.props,
+                node = _props5.node,
+                style = _props5.style;
 
@@ -174,3 +187,3 @@
                 node: (0, _assign2.default)({}, node),
-                onClick: this.onClick,
+                onSelect: this.onSelect,
                 style: style });
@@ -183,7 +196,7 @@ }
 
-            var _props5 = this.props,
-                animations = _props5.animations,
-                propDecorators = _props5.decorators,
-                node = _props5.node,
-                style = _props5.style;
+            var _props6 = this.props,
+                animations = _props6.animations,
+                propDecorators = _props6.decorators,
+                node = _props6.node,
+                style = _props6.style;
 
@@ -235,6 +248,9 @@
         value: function _eventBubbles() {
-            var onToggle = this.props.onToggle;
+            var _props7 = this.props,
+                onSelect = _props7.onSelect,
+                onToggle = _props7.onToggle;
 
 
             return {
+                onSelect: onSelect,
                 onToggle: onToggle
@@ -252,2 +268,3 @@ };
     animations: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]).isRequired,
+    onSelect: _propTypes2.default.func,
     onToggle: _propTypes2.default.func
@@ -254,0 +271,0 @@ };

lib/components/treebeard.js

@@ -70,2 +70,3 @@ 'use strict';
                 propsData = _props.data,
+                onSelect = _props.onSelect,
                 onToggle = _props.onToggle,
@@ -91,2 +92,3 @@ style = _props.style;
                         node: node,
+                        onSelect: onSelect,
                         onToggle: onToggle,
@@ -105,2 +107,3 @@ style: style.tree.node });
     animations: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),
+    onSelect: _propTypes2.default.func,
     onToggle: _propTypes2.default.func,
@@ -107,0 +110,0 @@ decorators: _propTypes2.default.object

package.json

 {
   "name": "@cmvanb/react-treebeard",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "React Tree View Component",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -13,2 +13,9 @@ # react-treebeard
 
+### Publish
+```
+npm run prepublish
+npm version x.x.x
+npm publish
+```
+
 ### [Example](http://storybooks.github.io/react-treebeard/)
@@ -15,0 +22,0 @@

src/components/decorators.js

@@ -53,6 +53,6 @@ 'use strict';
     render() {
-        const {style, decorators, terminal, onClick, node} = this.props;
+        const {style, decorators, terminal, onSelect, node} = this.props;
 
         return (
-            <div onClick={onClick}
+            <div onClick={onSelect}
                  ref={ref => this.clickableRef = ref}
@@ -63,3 +63,3 @@ style={style.container}>
                 <decorators.Header node={node}
-                                   style={style.header}/>
+                                   style={style.header} />
             </div>
@@ -86,5 +86,5 @@ );
     renderToggleDecorator() {
-        const {style, decorators, node} = this.props;
+        const {style, decorators, node, onToggle} = this.props;
 
-        return <decorators.Toggle node={node} style={style.toggle}/>;
+        return <decorators.Toggle node={node} style={style.toggle} onClick={onToggle}/>;
     }
@@ -96,3 +96,4 @@ }
     terminal: PropTypes.bool.isRequired,
-    onClick: PropTypes.func.isRequired,
+    onSelect: PropTypes.func.isRequired,
+    onToggle: PropTypes.func,
     animations: PropTypes.oneOfType([
@@ -99,0 +100,0 @@ PropTypes.object,

src/components/header.js

@@ -29,3 +29,3 @@ 'use strict';
     render() {
-        const {animations, decorators, node, onClick, style} = this.props;
+        const {animations, decorators, node, onSelect, style} = this.props;
         const {active, children} = node;
@@ -40,3 +40,3 @@ const terminal = !children;
                                   node={node}
-                                  onClick={onClick}
+                                  onSelect={onSelect}
                                   style={headerStyles}
@@ -56,5 +56,5 @@ terminal={terminal}/>
     node: PropTypes.object.isRequired,
-    onClick: PropTypes.func
+    onSelect: PropTypes.func
 };
 
 export default NodeHeader;

src/components/node.js

@@ -13,6 +13,15 @@ 'use strict';
 
-        this.onClick = this.onClick.bind(this);
+        this.onSelect = this.onSelect.bind(this);
+        this.onToggle = this.onToggle.bind(this);
     }
 
-    onClick() {
+    onSelect() {
+        const {node, onSelect} = this.props;
+
+        if (onSelect) {
+            onSelect(node);
+        }
+    }
+
+    onToggle() {
         const {node, onToggle} = this.props;
@@ -88,3 +97,3 @@ const {toggled} = node;
                         node={Object.assign({}, node)}
-                        onClick={this.onClick}
+                        onSelect={this.onSelect}
                         style={style}/>
@@ -133,5 +142,6 @@ );
     _eventBubbles() {
-        const {onToggle} = this.props;
+        const {onSelect, onToggle} = this.props;
 
         return {
+            onSelect,
             onToggle
@@ -150,2 +160,3 @@ };
     ]).isRequired,
+    onSelect: PropTypes.func,
     onToggle: PropTypes.func
@@ -152,0 +163,0 @@ };

src/components/treebeard.js

@@ -13,3 +13,3 @@ 'use strict';
     render() {
-        const {animations, decorators, data: propsData, onToggle, style} = this.props;
+        const {animations, decorators, data: propsData, onSelect, onToggle, style} = this.props;
         let data = propsData;
@@ -29,2 +29,3 @@
                               node={node}
+                              onSelect={onSelect}
                               onToggle={onToggle}
@@ -48,2 +49,3 @@ style={style.tree.node}/>
     ]),
+    onSelect: PropTypes.func,
     onToggle: PropTypes.func,
@@ -50,0 +52,0 @@ decorators: PropTypes.object

test/src/components/decorator-tests.js

@@ -21,3 +21,3 @@ /*  eslint no-unused-expressions:0  */
     decorators: createDecorators(),
-    onClick: () => null
+    onSelect: () => null
 };
@@ -29,6 +29,6 @@
     it('should render a clickable element with a click event handler', () => {
-        const onClick = sinon.spy();
+        const onSelect = sinon.spy();
         const container = TestUtils.renderIntoDocument(
             <Container {...defaults}
-                       onClick={onClick}/>
+                       onSelect={onSelect}/>
         );
@@ -38,3 +38,3 @@ const clickable = container.clickableRef;
 
-        onClick.should.be.called.once;
+        onSelect.should.be.called.once;
     });
@@ -41,0 +41,0 @@

test/src/components/node-tests.js

@@ -41,3 +41,3 @@ /*  eslint no-unused-expressions:0  */
         );
-        treeNode.onClick();
+        treeNode.onToggle();
     });
@@ -53,3 +53,3 @@
         );
-        treeNode.onClick();
+        treeNode.onToggle();
 
@@ -62,3 +62,3 @@ onToggle.should.be.called.once;
 
-        (() => treeNode.onClick()).should.not.throw(Error);
+        (() => treeNode.onToggle()).should.not.throw(Error);
     });
@@ -65,0 +65,0 @@

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Lines of code

2041

1.74%

Number of lines in readme file

189

3.85%

Worsened metrics

Total package byte prevSize

94448

-71.12%

Number of package files

38

-2.56%

No dependency changes