upgraded to V4

.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-optional-chaining"
+  ]
+}

.eslintignore

@@ -0,0 +1,2 @@
+src/components/SandBox.jsx
+src/components/SandBoxComponents/

.eslintrc.js

@@ -0,0 +1,69 @@
+module.exports = {
+  parser: 'babel-eslint', // use babel to parse
+  env: {
+    browser: true,
+    es6: true,
+    node: true, // for node globals, such as 'module'
+    jest: true, // for jest globals, such as 'test' and 'expect'
+  },
+  // 'plugins' section only 'activate' these plugins
+  // still need manually edit 'rules' to actually use them
+  // such as { react/xxx: 'error' }
+  plugins: [
+    'react',
+  ],
+  // 'extends' section will extend these configs
+  // and they will take effect directly
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'airbnb',
+    'airbnb/hooks',
+    'plugin:react-hooks/recommended',
+  ],
+  rules: {
+    indent: [2, 2, { SwitchCase: 1 }],
+    quotes: [2, 'single'],
+    semi: [2, 'always'],
+    'jsx-quotes': [2, 'prefer-single'],
+    'linebreak-style': [2, 'unix'],
+    'arrow-parens': [2, 'as-needed'],
+    'react/jsx-curly-spacing': [2, {
+      when: 'always',
+      spacing: { objectLiterals: 'never' },
+    }],
+    'no-restricted-syntax': [
+      'error',
+      'ForInStatement',
+      // 'ForOfStatement',
+      'LabeledStatement',
+      'WithStatement',
+    ],
+
+    /* ---------- turned off ---------- */
+    'max-len': 0,
+    'react/jsx-filename-extension': 0,
+    'react/forbid-prop-types': 0,
+    'react/require-default-props': 0,
+    'no-underscore-dangle': 0,
+    'no-multi-spaces': 0,
+    'jsx-a11y/click-events-have-key-events': 0,                             // allow click handler on <div>
+    'jsx-a11y/no-static-element-interactions': 0,                           // allow click handler on <div>
+    'no-unused-expressions': [2, { allowShortCircuit: true }],              // allow x && y()
+    'import/no-extraneous-dependencies': [2, { devDependencies: true }],    // so can import enzyme, which is dev dependencies
+  },
+
+  // don't know what these are... generated by eslint --init
+  // TODO: do more research about these
+  globals: {
+    Atomics: 'readonly',
+    SharedArrayBuffer: 'readonly',
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2018,
+    sourceType: 'module',
+  },
+};

.gitignore

@@ -1,3 +1,6 @@
+dist/
+notes.md
+
 yarn-error.log
 npm-debug.log
 build

README.md

@@ -1,188 +1,50 @@
-# Introduction  
+# React Folder Tree
+A powerful and customizable react treeview library.
 
-This is a folder tree written in ReactJS. 
 
-We can do:
+## Core Features
+- **Half Check** (indeterminate checkboxes): when some of the children nodes are checked, parent node automatically becomes half check.
+- **Inline CRUD** operations: rename nodes, create new nodes, and delete nodes.
+- **Customizable**: all icons are customizable, so you can build your favorite styles, as well as custom functionalities for user interactions.
 
-- click each carat to expand/collapse the folder
-- click the checkbox to (un)check each folder and file. (un)check each folder will automatically (un)check all sub-folders, including all the files in these folders. If part of the sub-folders or files in a folder are checked, this folder will display a half check. 
-- click the folder/file name to select it, and it will be hightlighted in blue
-- click the pencil beside the folder/file to rename it
-- click the delete button to delete the selected folder/file
-- click the Add button to add new file in the selected folder/file. Adding a file-2 to a file-1 will change file-1 to a folder; if all sub folder/files of a folder are deleted, this folder will become a file. The new file's check status is same as its parent
+## Quick Preview
+![folder-tree-demo](/assets/folder-tree-demo.gif)
 
-# Props
-- data: initial data to construct the tree. Sample data can be found [below](#sample-data)
-- onChange(data): It will call this function after any of these four actions: (un)check, add, delete, or rename. Where data is the object representing the tree of all selected files/folders (filtered out all unchecked files/folders).
-- FileComponent & FolderComponent: you can inject your own components here. Default file/folder component is already provided.
 
-# Sample Tree:
+## Demos & Code Examples
+[===== HERE =====](https://shunjizhan.github.io/react-folder-tree-demos/)
+[===== HERE =====](https://shunjizhan.github.io/react-folder-tree-demos/)
+[===== HERE =====](https://shunjizhan.github.io/react-folder-tree-demos/)
 
-![](https://raw.githubusercontent.com/shunjizhan/React-Folder-Tree/master/folder-tree-demo.gif?raw=true)
 
+## Basic Usage & Props
+```tsx
+import FolderTree, { testData } from 'react-folder-tree';
 
-# To Install: 
-	npm install --save react-folder-tree
+const BasicTree = () => {
+  const onTreeStateChange = state => console.log('tree state: ', state);
 
-# To Run: 
+  return (
+    <FolderTree
+      data={ testData }
+      onChange={ onTreeStateChange }
+    />
+  );
+};
 
-	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+```
 
-Remember to include the above link in your html page. Otherwise the icons won't show up. 
+| prop name         | description                             | type     | options                                        |
+|-------------------|-----------------------------------------|----------|------------------------------------------------|
+| data              | initial tree state data (required)      | object   | N/A                                            |
+| onChange          | callback when tree state changes        | function | console.log (default)                          |
+| initCheckedStatus | initial check status of all nodes       | string   | 'unchecked' (default) \| 'checked' \| 'custom' |
+| initOpenStatus    | initial open status of all folder nodes | string   | 'close' (default) \| 'open' \| 'custom'        |
+| iconComponents    | custom icon components                  | object   | N/A                                            |
+| indentPixels      | ident pixels                            | number   | 30 (default)                                   |
 
-	import React from 'react';
-	import ReactDOM from 'react-dom';
-	import FolderTree from 'react-folder-tree';
+## Note
+After upgrading to `v4.0`, old versions are no compatible anymore, please try out new version or specify old version when installing!
 
-	const testData = YOUR DATA;
-
-	ReactDOM.render(		 	
-	  <FolderTree      
-	    data={testData}       
-	  />,        
-		document.getElementById('root')      
-	)     
-
-# Data Format:	
-
-	{				 
-		id: number,    			
-		filename: string,	     		
-		children: array of *this*	  [optional]    				
-	}		
-
-# Sample Data:
-
-	const testData = {
-	  "id": 1,
-	  "filename": "All Categories",
-	  "children": [
-	    {
-	      "id": 2,
-	      "filename": "For Sale",
-	      "children": [
-	        {
-	          "id": 3,
-	          "filename": "Audio & Stereo",
-	          "children": [
-	    {
-	      "id": 4,
-	      "filename": "For Sale",
-	      "children": [
-	        {
-	          "id": 5,
-	          "filename": "Audio & Stereo",
-	        },
-	        {
-	          "id": 6,
-	          "filename": "Baby & Kids Stuff",
-	        },
-	        {
-	          "id": 7,
-	          "filename": "Music, Films, Books & Games",
-	        }
-	      ]
-	    },
-	    {
-	      "id": 8,
-	      "filename": "Motors",
-	      "children": [
-	        {
-	          "id": 9,
-	          "filename": "Car Parts & Accessories",
-	        },
-	        {
-	          "id": 10,
-	          "filename": "Cars",
-	        },
-	        {
-	          "id": 11,
-	          "filename": "Motorbike Parts & Accessories",
-	        }
-	      ]
-	    },
-	    {
-	      "id": 12,
-	      "filename": "Jobs",
-	      "children": [
-	        {
-	          "id": 13,
-	          "filename": "Accountancy",
-	        },
-	        {
-	          "id": 14,
-	          "filename": "Financial Services & Insurance",
-	        },
-	        {
-	          "id": 15,
-	          "filename": "Bar Staff & Management", 
-	        }
-	      ]
-	    }
-	  ]
-	        },
-	        {
-	          "id": 16,
-	          "filename": "Baby & Kids Stuff",
-	        },
-	        {
-	          "id": 17,
-	          "filename": "Music, Films, Books & Games",
-	        }
-	      ]
-	    },
-	    {
-	      "id": 18,
-	      "filename": "Motors",
-	      "children": [
-	        {
-	          "id": 19,
-	          "filename": "Car Parts & Accessories",
-	        },
-	        {
-	          "id": 20,
-	          "filename": "Cars",
-	        },
-	        {
-	          "id": 21,
-	          "filename": "Motorbike Parts & Accessories",
-	        }
-	      ]
-	    },
-	    {
-	      "id": 22,
-	      "filename": "Jobs",
-	      "children": [
-	        {
-	          "id": 23,
-	          "filename": "Accountancy",
-	        },
-	        {
-	          "id": 24,
-	          "filename": "Financial Services & Insurance",
-	        },
-	        {
-	          "id": 25,
-	          "filename": "Bar Staff & Management", 
-	        }
-	      ]
-	    }
-	  ]
-	}
-
-# Resources
-
-Testing data is from [here](http://codepen.io/anon/pen/Ftkln?editors=0010)
-
-Icons are from [here](https://www.npmjs.com/package/react-fontawesome)
-
-# Contribution
-Any contributions are welcomed! Please upload issues or pull requests on the github page, thank you! 
-
-# TODO
-- css modules of font awesome
-- in editing mode the inputbox doesn't hover automatically
-- press enter to confirm (now must click the confirm icon)
-- fully test all funtionalities
-- change structure: since now each Treenode has path, there should exist more concise way to handle check
-- remove excessive dependencies
+## Contributions
+Welcome!