react-infinite-tree - npm Package Compare versions

Comparing version 1.0.0-alpha.6 to 1.0.0

examples/App.jsx

@@ -17,4 +17,5 @@ import React, { PureComponent } from 'react';
     textFilter = null;
-    tree = null;
 
+    treeRef = React.createRef();
+
     changeCheckedState = (key) => (event) => {
@@ -29,7 +30,11 @@ const checked = event.target.checked;
     };
+
     onUpdate = (node) => {
         this.setState({ node: node });
     };
+
     filter = (keyword) => {
-        if (!this.tree) {
+        const { tree } = this.treeRef.current;
+
+        if (!tree) {
             return;
@@ -41,3 +46,3 @@ }
         if (!keyword) {
-            this.tree.unfilter();
+            tree.unfilter();
             return;
@@ -53,3 +58,3 @@ }
 
-        this.tree.filter(keyword, {
+        tree.filter(keyword, {
             filterPath: 'name',
@@ -152,5 +157,3 @@ caseSensitive: caseSensitive,
                         <Tree
-                            ref={c => {
-                                this.tree = c ? c.tree : null;
-                            }}
+                            ref={this.treeRef}
                             onUpdate={this.onUpdate}
@@ -157,0 +160,0 @@ />

examples/Tree.jsx

 import Checkbox from '@trendmicro/react-checkbox';
 import Dropdown, { MenuItem } from '@trendmicro/react-dropdown';
 import PropTypes from 'prop-types';
-import React, { PureComponent } from 'react';
+import React, { Component } from 'react';
 import InfiniteTree from '../src';
@@ -76,3 +76,3 @@ import TreeNode from './components/TreeNode';
 
-class Tree extends PureComponent {
+class Tree extends Component {
     static propTypes = {
@@ -82,17 +82,24 @@ onUpdate: PropTypes.func
 
+    treeRef = React.createRef();
     tree = null;
+
     data = generate(1000);
 
     componentDidMount() {
+        const { tree } = this.treeRef.current;
+
         // Select the first node
-        this.tree.selectNode(this.tree.getChildNodes()[0]);
+        tree.selectNode(tree.getChildNodes()[0]);
     }
+
     render() {
         const { onUpdate } = this.props;
 
+        if (this.treeRef.current) {
+            this.tree = this.treeRef.current.tree;
+        }
+
         return (
             <InfiniteTree
-                ref={node => {
-                    this.tree = node ? node.tree : null;
-                }}
+                ref={this.treeRef}
                 style={{
@@ -128,3 +135,5 @@ border: '1px solid #ccc'
                 shouldSelectNode={(node) => { // Defaults to null
-                    if (!node || (node === this.tree.getSelectedNode())) {
+                    const { tree } = this.treeRef.current;
+
+                    if (!node || (node === tree.getSelectedNode())) {
                         return false; // Prevent from deselecting the current node
@@ -138,2 +147,4 @@ }
                 onKeyDown={(event) => {
+                    const { tree } = this.treeRef.current;
+
                     console.log('onKeyDown', event.target);
@@ -143,15 +154,15 @@
 
-                    const node = this.tree.getSelectedNode();
-                    const nodeIndex = this.tree.getSelectedIndex();
+                    const node = tree.getSelectedNode();
+                    const nodeIndex = tree.getSelectedIndex();
 
                     if (event.keyCode === 37) { // Left
-                        this.tree.closeNode(node);
+                        tree.closeNode(node);
                     } else if (event.keyCode === 38) { // Up
-                        const prevNode = this.tree.nodes[nodeIndex - 1] || node;
-                        this.tree.selectNode(prevNode);
+                        const prevNode = tree.nodes[nodeIndex - 1] || node;
+                        tree.selectNode(prevNode);
                     } else if (event.keyCode === 39) { // Right
-                        this.tree.openNode(node);
+                        tree.openNode(node);
                     } else if (event.keyCode === 40) { // Down
-                        const nextNode = this.tree.nodes[nodeIndex + 1] || node;
-                        this.tree.selectNode(nextNode);
+                        const nextNode = tree.nodes[nodeIndex + 1] || node;
+                        tree.selectNode(nextNode);
                     }
@@ -169,4 +180,6 @@ }}
                 onContentDidUpdate={() => {
+                    const { tree } = this.treeRef.current;
+
                     console.log('onContentDidUpdate');
-                    onUpdate(this.tree.getSelectedNode());
+                    onUpdate(tree.getSelectedNode());
                 }}
@@ -173,0 +186,0 @@ onOpenNode={(node) => {

examples/webpack.config.js

@@ -1,8 +0,8 @@
-/* eslint no-var: 0 */
-var path = require('path');
-var webpack = require('webpack');
-var nib = require('nib');
-var stylusLoader = require('stylus-loader');
+const path = require('path');
+const webpack = require('webpack');
+const babelConfig = require('../babel.config');
 
 module.exports = {
+    mode: 'production',
+    target: 'web',
     devtool: 'source-map',
@@ -23,2 +23,3 @@ entry: path.resolve(__dirname, 'index.js'),
                 loader: 'babel-loader',
+                options: babelConfig,
                 exclude: /node_modules/
@@ -31,3 +32,2 @@ },
                     'css-loader?camelCase&modules&importLoaders=1&localIdentName=[local]---[hash:base64:5]',
-                    'stylus-loader'
                 ]
@@ -64,10 +64,2 @@ },
         }),
-        new stylusLoader.OptionsPlugin({
-            default: {
-                // nib - CSS3 extensions for Stylus
-                use: [nib()],
-                // no need to have a '@import "nib"' in the stylesheet
-                import: ['~nib/lib/nib/index.styl']
-            }
-        })
     ],
@@ -74,0 +66,0 @@ resolve: {

lib/index.js

@@ -1,9 +0,13 @@
-'use strict';
+"use strict";
 
-var _InfiniteTree = require('./InfiniteTree');
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
 
-var _InfiniteTree2 = _interopRequireDefault(_InfiniteTree);
+var _InfiniteTree = _interopRequireDefault(require("./InfiniteTree"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-module.exports = _InfiniteTree2.default;
+var _default = _InfiniteTree["default"];
+exports["default"] = _default;

lib/InfiniteTree.js

@@ -1,366 +0,373 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
-    value: true
+  value: true
 });
+exports["default"] = void 0;
 
-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 _propTypes = _interopRequireDefault(require("prop-types"));
 
-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 = _interopRequireWildcard(require("react"));
 
-var _propTypes = require('prop-types');
+var _infiniteTree = _interopRequireDefault(require("infinite-tree"));
 
-var _propTypes2 = _interopRequireDefault(_propTypes);
+var _reactTinyVirtualList = _interopRequireDefault(require("react-tiny-virtual-list"));
 
-var _react = require('react');
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-var _react2 = _interopRequireDefault(_react);
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var _infiniteTree = require('infinite-tree');
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _infiniteTree2 = _interopRequireDefault(_infiniteTree);
+function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _reactTinyVirtualList = require('react-tiny-virtual-list');
+function _extends() { _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; }; return _extends.apply(this, arguments); }
 
-var _reactTinyVirtualList2 = _interopRequireDefault(_reactTinyVirtualList);
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } 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; }
+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); } }
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
 
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var lcfirst = function lcfirst(str) {
-    str += '';
-    return str.charAt(0).toLowerCase() + str.substr(1);
+  str += '';
+  return str.charAt(0).toLowerCase() + str.substr(1);
 };
 
-var _class = function (_Component) {
-    _inherits(_class, _Component);
+var _default =
+/*#__PURE__*/
+function (_Component) {
+  _inherits(_default, _Component);
 
-    function _class() {
-        var _ref;
+  function _default(props) {
+    var _this;
 
-        var _temp, _this, _ret;
+    _classCallCheck(this, _default);
 
-        _classCallCheck(this, _class);
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(_default).call(this, props));
 
-        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-            args[_key] = arguments[_key];
-        }
+    _defineProperty(_assertThisInitialized(_this), "tree", null);
 
-        return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = _class.__proto__ || Object.getPrototypeOf(_class)).call.apply(_ref, [this].concat(args))), _this), _this.tree = null, _this.state = {
-            nodes: []
-        }, _this.eventHandlers = {
-            onContentWillUpdate: null,
-            onContentDidUpdate: null,
-            onOpenNode: null,
-            onCloseNode: null,
-            onSelectNode: null,
-            onWillOpenNode: null,
-            onWillCloseNode: null,
-            onWillSelectNode: null
-        }, _temp), _possibleConstructorReturn(_this, _ret);
-    }
+    _defineProperty(_assertThisInitialized(_this), "virtualListRef", _react["default"].createRef());
 
-    _createClass(_class, [{
-        key: 'componentDidMount',
-        value: function componentDidMount() {
-            var _this2 = this;
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      nodes: []
+    });
 
-            var _props = this.props,
-                children = _props.children,
-                className = _props.className,
-                style = _props.style,
-                options = _objectWithoutProperties(_props, ['children', 'className', 'style']);
+    _defineProperty(_assertThisInitialized(_this), "eventHandlers", {
+      onContentWillUpdate: null,
+      onContentDidUpdate: null,
+      onOpenNode: null,
+      onCloseNode: null,
+      onSelectNode: null,
+      onWillOpenNode: null,
+      onWillCloseNode: null,
+      onWillSelectNode: null
+    });
 
-            if (options.el !== undefined) {
-                delete options.el;
-            }
+    var children = props.children,
+        className = props.className,
+        style = props.style,
+        el = props.el,
+        options = _objectWithoutProperties(props, ["children", "className", "style", "el"]);
 
-            options.rowRenderer = function () {
-                return '';
-            };
+    options.rowRenderer = function () {
+      return '';
+    };
 
-            this.tree = new _infiniteTree2.default(options);
+    _this.tree = new _infiniteTree["default"](options); // Filters nodes.
+    // https://github.com/cheton/infinite-tree/wiki/Functions:-Tree#filterpredicate-options
 
-            // Filters nodes.
-            // https://github.com/cheton/infinite-tree/wiki/Functions:-Tree#filterpredicate-options
-            var treeFilter = this.tree.filter.bind(this.tree);
-            this.tree.filter = function () {
-                setTimeout(function () {
-                    _this2.virtualList.recomputeSizes(0);
-                }, 0);
-                return treeFilter.apply(undefined, arguments);
-            };
+    var treeFilter = _this.tree.filter.bind(_this.tree);
 
-            // Unfilter nodes.
-            // https://github.com/cheton/infinite-tree/wiki/Functions:-Tree#unfilter
-            var treeUnfilter = this.tree.unfilter.bind(this.tree);
-            this.tree.unfilter = function () {
-                setTimeout(function () {
-                    _this2.virtualList.recomputeSizes(0);
-                }, 0);
-                return treeUnfilter.apply(undefined, arguments);
-            };
+    _this.tree.filter = function () {
+      setTimeout(function () {
+        var virtualList = _this.virtualListRef.current;
 
-            // Sets the current scroll position to this node.
-            // @param {Node} node The Node object.
-            // @return {boolean} Returns true on success, false otherwise.
-            this.tree.scrollToNode = function (node) {
-                if (!_this2.tree || !_this2.virtualList) {
-                    return false;
-                }
+        if (virtualList) {
+          virtualList.recomputeSizes(0);
+        }
+      }, 0);
+      return treeFilter.apply(void 0, arguments);
+    }; // Unfilter nodes.
+    // https://github.com/cheton/infinite-tree/wiki/Functions:-Tree#unfilter
 
-                var nodeIndex = _this2.tree.nodes.indexOf(node);
-                if (nodeIndex < 0) {
-                    return false;
-                }
 
-                var offset = _this2.virtualList.getOffsetForIndex(nodeIndex);
-                _this2.virtualList.scrollTo(offset);
+    var treeUnfilter = _this.tree.unfilter.bind(_this.tree);
 
-                return true;
-            };
+    _this.tree.unfilter = function () {
+      setTimeout(function () {
+        var virtualList = _this.virtualListRef.current;
 
-            // Gets (or sets) the current vertical position of the scroll bar.
-            // @param {number} [value] If the value is specified, indicates the new position to set the scroll bar to.
-            // @return {number} Returns the vertical scroll position.
-            this.tree.scrollTop = function (value) {
-                if (!_this2.tree || !_this2.virtualList) {
-                    return;
-                }
+        if (virtualList) {
+          virtualList.recomputeSizes(0);
+        }
+      }, 0);
+      return treeUnfilter.apply(void 0, arguments);
+    }; // Sets the current scroll position to this node.
+    // @param {Node} node The Node object.
+    // @return {boolean} Returns true on success, false otherwise.
 
-                if (value !== undefined) {
-                    _this2.virtualList.scrollTo(Number(value));
-                }
 
-                return _this2.virtualList.getNodeOffset();
-            };
+    _this.tree.scrollToNode = function (node) {
+      var virtualList = _this.virtualListRef.current;
 
-            // Updates the tree.
-            this.tree.update = function () {
-                _this2.tree.emit('contentWillUpdate');
-                _this2.setState(function (state) {
-                    return {
-                        nodes: _this2.tree.nodes
-                    };
-                }, function () {
-                    _this2.tree.emit('contentDidUpdate');
-                });
-            };
+      if (!_this.tree || !virtualList) {
+        return false;
+      }
 
-            Object.keys(this.eventHandlers).forEach(function (key) {
-                if (!_this2.props[key]) {
-                    return;
-                }
+      var nodeIndex = _this.tree.nodes.indexOf(node);
 
-                var eventName = lcfirst(key.substr(2)); // e.g. onContentWillUpdate -> contentWillUpdate
-                _this2.eventHandlers[key] = _this2.props[key];
-                _this2.tree.on(eventName, _this2.eventHandlers[key]);
-            });
-        }
-    }, {
-        key: 'componentWillUnmount',
-        value: function componentWillUnmount() {
-            var _this3 = this;
+      if (nodeIndex < 0) {
+        return false;
+      }
 
-            Object.keys(this.eventHandlers).forEach(function (key) {
-                if (!_this3.eventHandlers[key]) {
-                    return;
-                }
+      var offset = virtualList.getOffsetForIndex(nodeIndex);
+      virtualList.scrollTo(offset);
+      return true;
+    }; // Gets (or sets) the current vertical position of the scroll bar.
+    // @param {number} [value] If the value is specified, indicates the new position to set the scroll bar to.
+    // @return {number} Returns the vertical scroll position.
 
-                var eventName = lcfirst(key.substr(2)); // e.g. onUpdate -> update
-                _this3.tree.removeListener(eventName, _this3.eventHandlers[key]);
-                _this3.eventHandlers[key] = null;
-            });
 
-            this.tree.destroy();
-            this.tree = null;
-        }
-    }, {
-        key: 'render',
-        value: function render() {
-            var _this4 = this;
+    _this.tree.scrollTop = function (value) {
+      var virtualList = _this.virtualListRef.current;
 
-            var _props2 = this.props,
-                autoOpen = _props2.autoOpen,
-                selectable = _props2.selectable,
-                tabIndex = _props2.tabIndex,
-                data = _props2.data,
-                width = _props2.width,
-                height = _props2.height,
-                rowHeight = _props2.rowHeight,
-                rowRenderer = _props2.rowRenderer,
-                shouldLoadNodes = _props2.shouldLoadNodes,
-                loadNodes = _props2.loadNodes,
-                shouldSelectNode = _props2.shouldSelectNode,
-                scrollOffset = _props2.scrollOffset,
-                scrollToIndex = _props2.scrollToIndex,
-                onScroll = _props2.onScroll,
-                onContentWillUpdate = _props2.onContentWillUpdate,
-                onContentDidUpdate = _props2.onContentDidUpdate,
-                onOpenNode = _props2.onOpenNode,
-                onCloseNode = _props2.onCloseNode,
-                onSelectNode = _props2.onSelectNode,
-                onWillOpenNode = _props2.onWillOpenNode,
-                onWillCloseNode = _props2.onWillCloseNode,
-                onWillSelectNode = _props2.onWillSelectNode,
-                style = _props2.style,
-                children = _props2.children,
-                props = _objectWithoutProperties(_props2, ['autoOpen', 'selectable', 'tabIndex', 'data', 'width', 'height', 'rowHeight', 'rowRenderer', 'shouldLoadNodes', 'loadNodes', 'shouldSelectNode', 'scrollOffset', 'scrollToIndex', 'onScroll', 'onContentWillUpdate', 'onContentDidUpdate', 'onOpenNode', 'onCloseNode', 'onSelectNode', 'onWillOpenNode', 'onWillCloseNode', 'onWillSelectNode', 'style', 'children']);
+      if (!_this.tree || !virtualList) {
+        return;
+      }
 
-            var render = typeof children === 'function' ? children : rowRenderer;
+      if (value !== undefined) {
+        virtualList.scrollTo(Number(value));
+      }
 
-            var count = this.tree ? this.tree.nodes.length : 0;
+      return virtualList.getNodeOffset();
+    }; // Updates the tree.
 
-            // VirtualList
-            var virtualListProps = {};
-            if (scrollOffset !== undefined && count > 0) {
-                virtualListProps.scrollOffset = scrollOffset;
-            }
-            if (scrollToIndex !== undefined && scrollToIndex >= 0 && scrollToIndex < count) {
-                virtualListProps.scrollToIndex = scrollToIndex;
-            }
-            if (typeof onScroll === 'function') {
-                virtualListProps.onScroll = onScroll;
-            }
 
-            return _react2.default.createElement(
-                'div',
-                _extends({}, props, {
-                    style: _extends({
-                        outline: 'none'
-                    }, style),
-                    tabIndex: tabIndex
-                }),
-                _react2.default.createElement(_reactTinyVirtualList2.default, _extends({
-                    ref: function ref(node) {
-                        _this4.virtualList = node;
-                    },
-                    width: width,
-                    height: height,
-                    itemCount: count,
-                    itemSize: function itemSize(index) {
-                        var node = _this4.tree.nodes[index];
-                        if (node && node.state.filtered === false) {
-                            return 0;
-                        }
+    _this.tree.update = function () {
+      _this.tree.emit('contentWillUpdate');
 
-                        if (typeof rowHeight === 'function') {
-                            return rowHeight({
-                                node: _this4.tree.nodes[index],
-                                tree: _this4.tree
-                            });
-                        }
+      _this.setState(function (state) {
+        return {
+          nodes: _this.tree.nodes
+        };
+      }, function () {
+        _this.tree.emit('contentDidUpdate');
+      });
+    };
 
-                        return rowHeight; // Number or Array
-                    },
-                    renderItem: function renderItem(_ref2) {
-                        var index = _ref2.index,
-                            style = _ref2.style;
+    Object.keys(_this.eventHandlers).forEach(function (key) {
+      if (!_this.props[key]) {
+        return;
+      }
 
-                        var row = null;
+      var eventName = lcfirst(key.substr(2)); // e.g. onContentWillUpdate -> contentWillUpdate
 
-                        if (typeof render === 'function') {
-                            var node = _this4.tree.nodes[index];
-                            if (node && node.state.filtered !== false) {
-                                row = render({
-                                    node: _this4.tree.nodes[index],
-                                    tree: _this4.tree
-                                });
-                            }
-                        }
+      _this.eventHandlers[key] = _this.props[key];
 
-                        return _react2.default.createElement(
-                            'div',
-                            { key: index, style: style },
-                            row
-                        );
-                    }
-                }, virtualListProps))
-            );
+      _this.tree.on(eventName, _this.eventHandlers[key]);
+    });
+    return _this;
+  }
+
+  _createClass(_default, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      var _this2 = this;
+
+      Object.keys(this.eventHandlers).forEach(function (key) {
+        if (!_this2.eventHandlers[key]) {
+          return;
         }
-    }]);
 
-    return _class;
-}(_react.Component);
+        var eventName = lcfirst(key.substr(2)); // e.g. onUpdate -> update
 
-_class.displayName = 'InfiniteTree';
-_class.propTypes = {
-    // Whether to open all nodes when tree is loaded.
-    autoOpen: _propTypes2.default.bool,
+        _this2.tree.removeListener(eventName, _this2.eventHandlers[key]);
 
-    // Whether or not a node is selectable in the tree.
-    selectable: _propTypes2.default.bool,
+        _this2.eventHandlers[key] = null;
+      });
+      this.tree.destroy();
+      this.tree = null;
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
 
-    // Specifies the tab order to make tree focusable.
-    tabIndex: _propTypes2.default.number,
+      var _this$props = this.props,
+          autoOpen = _this$props.autoOpen,
+          selectable = _this$props.selectable,
+          tabIndex = _this$props.tabIndex,
+          data = _this$props.data,
+          width = _this$props.width,
+          height = _this$props.height,
+          rowHeight = _this$props.rowHeight,
+          rowRenderer = _this$props.rowRenderer,
+          shouldLoadNodes = _this$props.shouldLoadNodes,
+          loadNodes = _this$props.loadNodes,
+          shouldSelectNode = _this$props.shouldSelectNode,
+          scrollOffset = _this$props.scrollOffset,
+          scrollToIndex = _this$props.scrollToIndex,
+          onScroll = _this$props.onScroll,
+          onContentWillUpdate = _this$props.onContentWillUpdate,
+          onContentDidUpdate = _this$props.onContentDidUpdate,
+          onOpenNode = _this$props.onOpenNode,
+          onCloseNode = _this$props.onCloseNode,
+          onSelectNode = _this$props.onSelectNode,
+          onWillOpenNode = _this$props.onWillOpenNode,
+          onWillCloseNode = _this$props.onWillCloseNode,
+          onWillSelectNode = _this$props.onWillSelectNode,
+          style = _this$props.style,
+          children = _this$props.children,
+          props = _objectWithoutProperties(_this$props, ["autoOpen", "selectable", "tabIndex", "data", "width", "height", "rowHeight", "rowRenderer", "shouldLoadNodes", "loadNodes", "shouldSelectNode", "scrollOffset", "scrollToIndex", "onScroll", "onContentWillUpdate", "onContentDidUpdate", "onOpenNode", "onCloseNode", "onSelectNode", "onWillOpenNode", "onWillCloseNode", "onWillSelectNode", "style", "children"]);
 
-    // Tree data structure, or a collection of tree data structures.
-    data: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object]),
+      var render = typeof children === 'function' ? children : rowRenderer;
+      var count = this.tree ? this.tree.nodes.length : 0; // VirtualList
 
-    // Width of the tree.
-    width: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
+      var virtualListProps = {};
 
-    // Height of the tree.
-    height: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
+      if (scrollOffset !== undefined && count > 0) {
+        virtualListProps.scrollOffset = scrollOffset;
+      }
 
-    // Either a fixed height, an array containing the heights of all the rows, or a function that returns the height of a row given its index: `(index: number): number`
-    rowHeight: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.array, _propTypes2.default.func]).isRequired,
+      if (scrollToIndex !== undefined && scrollToIndex >= 0 && scrollToIndex < count) {
+        virtualListProps.scrollToIndex = scrollToIndex;
+      }
 
-    // A row renderer for rendering a tree node.
-    rowRenderer: _propTypes2.default.func,
+      if (typeof onScroll === 'function') {
+        virtualListProps.onScroll = onScroll;
+      }
 
-    // Loads nodes on demand.
-    loadNodes: _propTypes2.default.func,
+      return _react["default"].createElement("div", _extends({}, props, {
+        style: _objectSpread({
+          outline: 'none'
+        }, style),
+        tabIndex: tabIndex
+      }), _react["default"].createElement(_reactTinyVirtualList["default"], _extends({
+        ref: this.virtualListRef,
+        width: width,
+        height: height,
+        itemCount: count,
+        itemSize: function itemSize(index) {
+          var node = _this3.tree.nodes[index];
 
-    // Provides a function to determine if a node can be selected or deselected. The function must return `true` or `false`. This function will not take effect if `selectable` is not `true`.
-    shouldSelectNode: _propTypes2.default.func,
+          if (node && node.state.filtered === false) {
+            return 0;
+          }
 
-    // Controls the scroll offset.
-    scrollOffset: _propTypes2.default.number,
+          if (typeof rowHeight === 'function') {
+            return rowHeight({
+              node: _this3.tree.nodes[index],
+              tree: _this3.tree
+            });
+          }
 
-    // Node index to scroll to.
-    scrollToIndex: _propTypes2.default.number,
+          return rowHeight; // Number or Array
+        },
+        renderItem: function renderItem(_ref) {
+          var index = _ref.index,
+              style = _ref.style;
+          var row = null;
 
-    // Callback invoked whenever the scroll offset changes.
-    onScroll: _propTypes2.default.func,
+          if (typeof render === 'function') {
+            var node = _this3.tree.nodes[index];
 
-    // Callback invoked before updating the tree.
-    onContentWillUpdate: _propTypes2.default.func,
+            if (node && node.state.filtered !== false) {
+              row = render({
+                node: _this3.tree.nodes[index],
+                tree: _this3.tree
+              });
+            }
+          }
 
-    // Callback invoked when the tree is updated.
-    onContentDidUpdate: _propTypes2.default.func,
+          return _react["default"].createElement("div", {
+            key: index,
+            style: style
+          }, row);
+        }
+      }, virtualListProps)));
+    }
+  }]);
 
-    // Callback invoked when a node is opened.
-    onOpenNode: _propTypes2.default.func,
+  return _default;
+}(_react.Component);
 
-    // Callback invoked when a node is closed.
-    onCloseNode: _propTypes2.default.func,
+exports["default"] = _default;
 
-    // Callback invoked when a node is selected or deselected.
-    onSelectNode: _propTypes2.default.func,
+_defineProperty(_default, "displayName", 'InfiniteTree');
 
-    // Callback invoked before opening a node.
-    onWillOpenNode: _propTypes2.default.func,
+_defineProperty(_default, "propTypes", {
+  // Whether to open all nodes when tree is loaded.
+  autoOpen: _propTypes["default"].bool,
+  // Whether or not a node is selectable in the tree.
+  selectable: _propTypes["default"].bool,
+  // Specifies the tab order to make tree focusable.
+  tabIndex: _propTypes["default"].number,
+  // Tree data structure, or a collection of tree data structures.
+  data: _propTypes["default"].oneOfType([_propTypes["default"].array, _propTypes["default"].object]),
+  // Width of the tree.
+  width: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  // Height of the tree.
+  height: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]).isRequired,
+  // Either a fixed height, an array containing the heights of all the rows, or a function that returns the height of a row given its index: `(index: number): number`
+  rowHeight: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].array, _propTypes["default"].func]).isRequired,
+  // A row renderer for rendering a tree node.
+  rowRenderer: _propTypes["default"].func,
+  // Loads nodes on demand.
+  loadNodes: _propTypes["default"].func,
+  // Provides a function to determine if a node can be selected or deselected. The function must return `true` or `false`. This function will not take effect if `selectable` is not `true`.
+  shouldSelectNode: _propTypes["default"].func,
+  // Controls the scroll offset.
+  scrollOffset: _propTypes["default"].number,
+  // Node index to scroll to.
+  scrollToIndex: _propTypes["default"].number,
+  // Callback invoked whenever the scroll offset changes.
+  onScroll: _propTypes["default"].func,
+  // Callback invoked before updating the tree.
+  onContentWillUpdate: _propTypes["default"].func,
+  // Callback invoked when the tree is updated.
+  onContentDidUpdate: _propTypes["default"].func,
+  // Callback invoked when a node is opened.
+  onOpenNode: _propTypes["default"].func,
+  // Callback invoked when a node is closed.
+  onCloseNode: _propTypes["default"].func,
+  // Callback invoked when a node is selected or deselected.
+  onSelectNode: _propTypes["default"].func,
+  // Callback invoked before opening a node.
+  onWillOpenNode: _propTypes["default"].func,
+  // Callback invoked before closing a node.
+  onWillCloseNode: _propTypes["default"].func,
+  // Callback invoked before selecting or deselecting a node.
+  onWillSelectNode: _propTypes["default"].func
+});
 
-    // Callback invoked before closing a node.
-    onWillCloseNode: _propTypes2.default.func,
+_defineProperty(_default, "defaultProps", {
+  autoOpen: false,
+  selectable: true,
+  tabIndex: 0,
+  data: [],
+  width: '100%'
+});
 
-    // Callback invoked before selecting or deselecting a node.
-    onWillSelectNode: _propTypes2.default.func
-};
-_class.defaultProps = {
-    autoOpen: false,
-    selectable: true,
-    tabIndex: 0,
-    data: [],
-    width: '100%'
-};
-exports.default = _class;
 ;

package.json

 {
   "name": "react-infinite-tree",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0",
   "description": "The infinite-tree library for React.",
@@ -9,5 +9,5 @@ "main": "lib/index.js",
     "build": "babel --out-dir ./lib ./src",
-    "build-examples": "cd examples; webpack",
-    "test": "tap test/*.js --no-timeout --node-arg=--require --node-arg=babel-register --node-arg=--require --node-arg=babel-polyfill",
-    "dist": "webpack; BUILD_ENV=dist webpack",
+    "build-examples": "cd examples; webpack-cli",
+    "test": "tap test/*.js --no-timeout --node-arg=--require --node-arg=@babel/register",
+    "dist": "webpack-cli; BUILD_ENV=dist webpack-cli",
     "release": "mkdir -p releases; cp -f dist/react-infinite-tree.css releases/react-infinite-tree-${npm_package_version}.css; cp -f dist/react-infinite-tree.js releases/react-infinite-tree-${npm_package_version}.js; cp -f dist/react-infinite-tree.min.js releases/react-infinite-tree-${npm_package_version}.min.js",
@@ -17,3 +17,3 @@ "lint": "npm run eslint",
     "eslint:fix": "eslint --fix ./src",
-    "coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=babel-register --nyc-arg=--require --nyc-arg=babel-polyfill | coveralls",
+    "coveralls": "tap test/*.js --coverage --coverage-report=text-lcov --nyc-arg=--require --nyc-arg=@babel/register",
     "dev": "cd examples; webpack-dev-server --hot --inline --host 0.0.0.0 --port 8000 --content-base ../docs"
@@ -46,42 +46,42 @@ },
   "dependencies": {
-    "infinite-tree": "^1.16.0",
-    "react-tiny-virtual-list": "^2.1.4"
+    "infinite-tree": "^1.16.2",
+    "react-tiny-virtual-list": "^2.2.0"
   },
   "devDependencies": {
-    "@trendmicro/react-buttons": "~1.3.0",
-    "@trendmicro/react-checkbox": "~3.0.0",
-    "@trendmicro/react-dropdown": "~1.2.0",
-    "babel-cli": "~6.26.0",
-    "babel-core": "~6.26.0",
-    "babel-eslint": "~8.2.1",
-    "babel-loader": "~7.1.2",
-    "babel-preset-es2015": "~6.24.1",
-    "babel-preset-react": "~6.24.1",
-    "babel-preset-stage-0": "~6.24.1",
-    "classnames": "~2.2.5",
-    "coveralls": "~3.0.0",
-    "css-loader": "~0.28.9",
-    "enzyme": "~3.3.0",
-    "enzyme-adapter-react-16": "~1.1.1",
-    "eslint": "~4.17.0",
-    "eslint-config-trendmicro": "~1.3.0",
-    "eslint-loader": "~1.9.0",
-    "eslint-plugin-import": "~2.8.0",
-    "eslint-plugin-jsx-a11y": "~6.0.3",
-    "eslint-plugin-react": "~7.6.1",
-    "jsdom": "~11.6.2",
+    "@babel/cli": "~7.6.2",
+    "@babel/core": "~7.6.2",
+    "@babel/preset-env": "~7.6.2",
+    "@babel/preset-react": "~7.0.0",
+    "@babel/register": "~7.6.2",
+    "@trendmicro/babel-config": "~1.0.0-alpha",
+    "@trendmicro/react-buttons": "~1.3.1",
+    "@trendmicro/react-checkbox": "~3.4.1",
+    "@trendmicro/react-dropdown": "~1.3.0",
+    "babel-eslint": "~10.0.3",
+    "babel-loader": "~8.0.6",
+    "classnames": "~2.2.6",
+    "coveralls": "~3.0.6",
+    "css-loader": "~3.2.0",
+    "enzyme": "~3.10.0",
+    "enzyme-adapter-react-16": "~1.14.0",
+    "eslint": "~6.5.1",
+    "eslint-config-trendmicro": "~1.4.1",
+    "eslint-loader": "~3.0.2",
+    "eslint-plugin-import": "~2.18.2",
+    "eslint-plugin-jsx-a11y": "~6.2.3",
+    "eslint-plugin-react": "~7.15.1",
+    "jsdom": "~15.1.1",
     "lodash.debounce": "~4.0.8",
     "nib": "~1.1.2",
-    "react": "^0.14.0 || >=15.0.0",
-    "react-dom": "^0.14.0 || >=15.0.0",
-    "style-loader": "~0.20.1",
-    "styled-components": "~3.1.6",
-    "stylint": "~1.5.9",
-    "stylus": "~0.54.5",
-    "stylus-loader": "~3.0.1",
-    "tap": "~11.1.0",
-    "webpack": "~3.11.0",
-    "webpack-dev-server": "~2.11.1",
-    "which": "~1.3.0"
+    "react": "~16.10.0",
+    "react-dom": "~16.10.0",
+    "style-loader": "~1.0.0",
+    "styled-components": "~4.4.0",
+    "stylint": "~2.0.0",
+    "stylus": "~0.54.7",
+    "tap": "~14.6.9",
+    "webpack": "~4.41.0",
+    "webpack-cli": "~3.3.9",
+    "webpack-dev-server": "~3.8.2"
   }
 }

src/index.js

 import InfiniteTree from './InfiniteTree';
 
-module.exports = InfiniteTree;
+export default InfiniteTree;

src/InfiniteTree.jsx

@@ -13,2 +13,3 @@ import PropTypes from 'prop-types';
     static displayName = 'InfiniteTree';
+
     static propTypes = {
@@ -91,2 +92,3 @@ // Whether to open all nodes when tree is loaded.
     };
+
     static defaultProps = {
@@ -101,2 +103,5 @@ autoOpen: false,
     tree = null;
+
+    virtualListRef = React.createRef();
+
     state = {
@@ -117,8 +122,12 @@ nodes: []
 
-    componentDidMount() {
-        const { children, className, style, ...options } = this.props;
+    constructor(props) {
+        super(props);
 
-        if (options.el !== undefined) {
-            delete options.el;
-        }
+        const {
+            children, // eslint-disable-line
+            className, // eslint-disable-line
+            style, // eslint-disable-line
+            el, // elint-disable-line
+            ...options
+        } = props;
 
@@ -134,3 +143,6 @@ options.rowRenderer = () => '';
             setTimeout(() => {
-                this.virtualList.recomputeSizes(0);
+                const virtualList = this.virtualListRef.current;
+                if (virtualList) {
+                    virtualList.recomputeSizes(0);
+                }
             }, 0);
@@ -145,3 +157,6 @@ return treeFilter(...args);
             setTimeout(() => {
-                this.virtualList.recomputeSizes(0);
+                const virtualList = this.virtualListRef.current;
+                if (virtualList) {
+                    virtualList.recomputeSizes(0);
+                }
             }, 0);
@@ -155,3 +170,5 @@ return treeUnfilter(...args);
         this.tree.scrollToNode = (node) => {
-            if (!this.tree || !this.virtualList) {
+            const virtualList = this.virtualListRef.current;
+
+            if (!this.tree || !virtualList) {
                 return false;
@@ -165,4 +182,4 @@ }
 
-            const offset = this.virtualList.getOffsetForIndex(nodeIndex);
-            this.virtualList.scrollTo(offset);
+            const offset = virtualList.getOffsetForIndex(nodeIndex);
+            virtualList.scrollTo(offset);
 
@@ -176,3 +193,5 @@ return true;
         this.tree.scrollTop = (value) => {
-            if (!this.tree || !this.virtualList) {
+            const virtualList = this.virtualListRef.current;
+
+            if (!this.tree || !virtualList) {
                 return;
@@ -182,6 +201,6 @@ }
             if (value !== undefined) {
-                this.virtualList.scrollTo(Number(value));
+                virtualList.scrollTo(Number(value));
             }
 
-            return this.virtualList.getNodeOffset();
+            return virtualList.getNodeOffset();
         };
@@ -209,2 +228,3 @@
     }
+
     componentWillUnmount() {
@@ -224,2 +244,3 @@ Object.keys(this.eventHandlers).forEach(key => {
     }
+
     render() {
@@ -284,5 +305,3 @@ const {
                 <VirtualList
-                    ref={node => {
-                        this.virtualList = node;
-                    }}
+                    ref={this.virtualListRef}
                     width={width}
@@ -289,0 +308,0 @@ height={height}

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

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 2 instances in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

51

increased by2%

Number of low quality alerts

0

decreased by-100%

Number of low supply chain risk alerts

2

decreased by-81.82%

Worsened metrics

Total package byte prevSize

5831039

decreased by-17.81%

Lines of code

13387

decreased by-67.44%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedreact@18.3.0(transitive)

• - Removedreact@18.3.1(transitive)

• Updatedinfinite-tree@^1.16.2

• Updatedreact-tiny-virtual-list@^2.2.0