rollup & webpack & babel upgrade

.gitignore

@@ -1,32 +1,79 @@
+### https://raw.github.com/github/gitignore/ea28c14da0faf75047165c10223635ba95566ad7/Node.gitignore
+
 # Logs
 logs
 *.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
 
 # Runtime data
 pids
 *.pid
 *.seed
+*.pid.lock
 
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 
 # Coverage directory used by tools like istanbul
 coverage
 
+# nyc test coverage
+.nyc_output
+
 # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
 .grunt
 
+# Bower dependency directory (https://bower.io/)
+bower_components
+
 # node-waf configuration
 .lock-wscript
 
-# Compiled binary addons (http://nodejs.org/api/addons.html)
+# Compiled binary addons (https://nodejs.org/api/addons.html)
 build/Release
 
-# Dependency directory
-# https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
-node_modules
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
 
+dist/
 example/bundle*
-.publish
 
-dist

.prettierignore

@@ -0,0 +1 @@
+package.json

__tests__/tree.js

@@ -0,0 +1,47 @@
+import Tree from '../lib/tree';
+
+describe('tree', () => {
+  const tree = new Tree({
+    module: 'root',
+    collapsed: false,
+    children: [
+      {
+        module: 'a',
+        collapsed: false,
+        children: [
+          {
+            module: 'c',
+            collapsed: false
+          }
+        ]
+      },
+      {
+        module: 'b',
+        collapsed: false
+      }
+    ]
+  });
+
+  it('updateNodesPosition()', () => {
+    tree.updateNodesPosition();
+    expect(tree.getIndex(1).top).toEqual(1);
+    expect(tree.getIndex(1).left).toEqual(1);
+    expect(tree.getIndex(2).top).toEqual(2);
+    expect(tree.getIndex(2).left).toEqual(2);
+    expect(tree.getIndex(3).top).toEqual(3);
+    expect(tree.getIndex(3).left).toEqual(3);
+    expect(tree.getIndex(4).top).toEqual(4);
+    expect(tree.getIndex(4).left).toEqual(2);
+  });
+
+  it('move()', () => {
+    tree.move();
+  });
+
+  it('getNodeByTop()', () => {
+    expect(tree.getNodeByTop(1).id).toEqual(1);
+    expect(tree.getNodeByTop(2).id).toEqual(2);
+    expect(tree.getNodeByTop(3).id).toEqual(3);
+    expect(tree.getNodeByTop(4).id).toEqual(4);
+  });
+});

babel.config.js

@@ -0,0 +1,4 @@
+module.exports = {
+  presets: [['@babel/env', { loose: true }], '@babel/preset-react'],
+  plugins: [['@babel/proposal-class-properties', { loose: true }]]
+};

example/app.less → example/app.css

@@ -1,4 +1,6 @@
-*, *:before, *:after {
+*,
+*:before,
+*:after {
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
@@ -12,9 +14,9 @@ body {
 
 .inspector {
   margin-left: 400px;
+}
 
-  pre {
-    font-family: Menlo;
-    font-size: 13px;
-  }
+.inspector pre {
+  font-family: Menlo;
+  font-size: 13px;
 }

example/app.js

@@ -1,6 +1,6 @@
-import '../lib/react-ui-tree.less';
-import './theme.less';
-import './app.less';
+import '../lib/react-ui-tree.css';
+import './theme.css';
+import './app.css';
 import cx from 'classnames';
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';

example/index.html

@@ -7,8 +7,6 @@
   <a href="https://github.com/pqx/react-ui-tree"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
 
   <div id="app"></div>
-  <script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
-  <script src="https://unpkg.com/react-dom@16.4.0/umd/react-dom.development.js"></script>
   <script src="bundle.js"></script>
 </body>
 </html>

example/theme.css

@@ -0,0 +1,30 @@
+.tree {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 300px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #21252B;
+}
+
+.m-node.placeholder {
+  border: 1px dashed #1385e5;
+}
+
+.m-node .inner {
+  color: #9DA5B4;
+  font-size: 12px;
+  font-family: Menlo;
+}
+
+.m-node .node {
+  display: inline-block;
+  width: 100%;
+  padding: 4px 5px;
+}
+
+.m-node .node.is-active {
+  background-color: #31363F;
+}

lib/index.js

@@ -0,0 +1,2 @@
+import UITree from './react-ui-tree';
+export default UITree;

lib/node.js

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import React, { Component } from 'react';
 
-class UITreeNode extends Component {
+export default class UITreeNode extends Component {
   constructor(props) {
     super(props);
     this.innerRef = React.createRef();
@@ -100,5 +100,3 @@ class UITreeNode extends Component {
     }
   };
 }
-
-module.exports = UITreeNode;

lib/react-ui-tree.css

@@ -0,0 +1,55 @@
+.f-no-select {
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.m-tree {
+  position: relative;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.m-draggable {
+  position: absolute;
+  opacity: 0.8;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.m-node.placeholder > * {
+  visibility: hidden;
+}
+
+.m-node.placeholder {
+  border: 1px dashed #ccc;
+}
+
+.m-node .inner {
+  position: relative;
+  cursor: pointer;
+  padding-left: 10px;
+}
+
+.m-node .collapse {
+  position: absolute;
+  left: 0;
+  cursor: pointer;
+}
+
+.m-node .caret-right:before {
+  content: '\25B8';
+}
+
+.m-node .caret-down:before {
+  content: '\25BE';
+}

lib/react-ui-tree.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Tree from './tree';
 import Node from './node';
 
-class UITree extends Component {
+export default class UITree extends Component {
   static propTypes = {
     tree: PropTypes.object.isRequired,
     paddingLeft: PropTypes.number,
@@ -240,5 +240,3 @@ class UITree extends Component {
     this.change(tree);
   };
 }
-
-module.exports = UITree;