react-infinite-tree - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

examples/renderer.js

 import React from 'react';
-import ReactDOMServer from 'react-dom/server';
 import classNames from 'classnames';
@@ -12,3 +11,3 @@
 
-    return ReactDOMServer.renderToString(
+    return (
         <div
@@ -32,27 +31,17 @@ className={classNames(
             >
-                <a
-                    className={(() => {
-                        if (!more && loadOnDemand) {
-                            return classNames(treeOptions.togglerClass, 'infinite-tree-closed');
-                        }
-                        if (more && open) {
-                            return classNames(treeOptions.togglerClass);
-                        }
-                        if (more && !open) {
-                            return classNames(treeOptions.togglerClass, 'infinite-tree-closed');
-                        }
-                        return '';
-                    })()}
-                >
-                    {!more && loadOnDemand &&
+                {!more && loadOnDemand &&
+                    <a className={classNames(treeOptions.togglerClass, 'infinite-tree-closed')}>
                         <i className="glyphicon glyphicon-triangle-right" />
-                    }
-                    {more && open &&
+                    </a>
+                }
+                {more && open &&
+                    <a className={classNames(treeOptions.togglerClass)}>
                         <i className="glyphicon glyphicon-triangle-bottom" />
-                    }
-                    {more && !open &&
+                    </a>
+                }
+                {more && !open &&
+                    <a className={classNames(treeOptions.togglerClass, 'infinite-tree-closed')}>
                         <i className="glyphicon glyphicon-triangle-right" />
-                    }
-                </a>
-
+                    </a>
+                }
                 <i
@@ -66,7 +55,4 @@ className={classNames(
                     )}
-                >
-                </i>
-
+                />
                 <span className="infinite-tree-title">{name}</span>
-
                 <i
@@ -81,3 +67,2 @@ style={{ marginLeft: 5 }}
                 />
-
                 <span className="count">{childrenLength}</span>
@@ -84,0 +69,0 @@ </div>

lib/index.js

 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol ? "symbol" : typeof obj; };
+
 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; }; }();
@@ -13,2 +15,6 @@
 
+var _server = require('react-dom/server');
+
+var _server2 = _interopRequireDefault(_server);
+
 var _infiniteTree = require('infinite-tree');
@@ -18,2 +24,4 @@
 
+var _renderer = require('./renderer');
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -50,2 +58,4 @@
             onClick: null,
+            onClusterWillChange: null,
+            onClusterDidChange: null,
             onContentWillUpdate: null,
@@ -73,2 +83,12 @@ onContentDidUpdate: null,
 
+            var rowRenderer = options.rowRenderer || _renderer.defaultRowRenderer;
+            options.rowRenderer = function (node, opts) {
+                var row = rowRenderer(node, opts);
+                if ((typeof row === 'undefined' ? 'undefined' : _typeof(row)) === 'object') {
+                    // Use ReactDOMServer.renderToString() to render React Component
+                    row = _server2.default.renderToString(row);
+                }
+                return row;
+            };
+
             this.tree = new _infiniteTree2.default(options);
@@ -75,0 +95,0 @@

package.json

 {
   "name": "react-infinite-tree",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The infinite-tree library for React.",
@@ -45,3 +45,3 @@ "main": "lib/index.js",
     "react-dom": "^0.14.0 || ^15.0.0-0",
-    "infinite-tree": ">=1.2.0"
+    "infinite-tree": ">=1.3.0"
   },
@@ -48,0 +48,0 @@ "dependencies": {},

README.md

@@ -31,2 +31,3 @@ # react-infinite-tree [![build status](https://travis-ci.org/cheton/react-infinite-tree.svg?branch=master)](https://travis-ci.org/cheton/react-infinite-tree) [![Coverage Status](https://coveralls.io/repos/cheton/react-infinite-tree/badge.svg)](https://coveralls.io/r/cheton/react-infinite-tree)
 import React from 'react';
+import classNames from 'classnames';
 import InfiniteTree from 'react-infinite-tree';
@@ -83,2 +84,35 @@ import 'react-infinite-tree/dist/react-infinite-tree.css';
                     }}
+                    rowRenderer={(node, treeOptions) => {
+                        const { id, name, loadOnDemand = false, children, state, props = {} } = node;
+                        const droppable = treeOptions.droppable;
+                        const { depth, open, path, total, selected = false } = state;
+                        const more = node.hasChildren();
+
+                        return (
+                            <div
+                                className={classNames(
+                                    'infinite-tree-item',
+                                    { 'infinite-tree-selected': selected }
+                                )}
+                                data-id={id}
+                                droppable={droppable}
+                            >
+                                <div
+                                    className="infinite-tree-node"
+                                    style={{ marginLeft: depth * 18 }}
+                                >
+                                    {!more && loadOnDemand &&
+                                        <a className={classNames(treeOptions.togglerClass, 'infinite-tree-closed')}>►</a>
+                                    }
+                                    {more && open &&
+                                        <a className={classNames(treeOptions.togglerClass)}>▼</a>
+                                    }
+                                    {more && !open &&
+                                        <a className={classNames(treeOptions.togglerClass, 'infinite-tree-closed')}>►</a>
+                                    }
+                                    <span className="infinite-tree-title">{name}</span>
+                                </div>
+                            </div>
+                        );
+                    }}
                     selectable={true}
@@ -104,2 +138,6 @@ shouldSelectNode={(node) => {
                     }}
+                    onClusterWillChange={() => {
+                    }}
+                    onClusterDidChange={() => {
+                    }}
                     onContentWillUpdate={() => {
@@ -106,0 +144,0 @@ }}

src/index.jsx

 import React from 'react';
 import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server';
 import InfiniteTree from 'infinite-tree';
+import { defaultRowRenderer } from './renderer';
 
@@ -15,2 +17,4 @@ const lcfirst = (str) => {
         onClick: null,
+        onClusterWillChange: null,
+        onClusterDidChange: null,
         onContentWillUpdate: null,
@@ -29,2 +33,12 @@ onContentDidUpdate: null,
 
+        const rowRenderer = options.rowRenderer || defaultRowRenderer;
+        options.rowRenderer = (node, opts) => {
+            let row = rowRenderer(node, opts);
+            if (typeof row === 'object') {
+                // Use ReactDOMServer.renderToString() to render React Component
+                row = ReactDOMServer.renderToString(row);
+            }
+            return row;
+        };
+
         this.tree = new InfiniteTree(options);
@@ -31,0 +45,0 @@

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6948661

increased by14.2%

Number of package files

46

increased by4.55%

Lines of code

49665

increased by55.82%

Number of lines in readme file

165

increased by29.92%

Worsened metrics

Number of low supply chain risk alerts

734

increased by87.72%

No dependency changes