From f43e987f3fd45ad251b1367c062968fad6ef58e4 Mon Sep 17 00:00:00 2001 From: Shunji Zhan Date: Wed, 14 Oct 2020 00:14:42 -0700 Subject: [PATCH 01/53] basic webpack setup, can run hello world html --- .babelrc | 3 + LICENSE | 21 - README.md | 188 - config/env.js | 36 - config/jest/cssTransform.js | 12 - config/jest/fileTransform.js | 10 - config/paths.js | 79 - config/polyfills.js | 14 - config/webpack.config.dev.js | 174 - config/webpack.config.prod.js | 64 - dist/folder-tree.html | 1 + dist/index.html | 1 + dist/main.js | 2 + dist/main.js.LICENSE.txt | 32 + dist/react-folder-tree.bundle.js | 2 + dist/react-folder-tree.bundle.js.LICENSE.txt | 32 + folder-tree-demo.gif | Bin 365894 -> 0 bytes package.json | 126 +- public/favicon.ico | Bin 24838 -> 0 bytes public/index.html | 11 - sample.png | Bin 178518 -> 0 bytes scripts/build.js | 226 - scripts/start.js | 313 - scripts/test.js | 19 - src/.DS_Store | Bin 6148 -> 0 bytes src/Components/.DS_Store | Bin 6148 -> 0 bytes src/Components/Checkbox.js | 38 - src/Components/EditableName.js | 67 - src/Components/FileComponent.js | 34 - src/Components/FilePane.js | 29 - src/Components/FolderComponent.js | 38 - src/Components/FolderToolbar.js | 21 - src/Components/FolderTree.js | 348 - src/Components/TreeNode.js | 129 - src/Components/folderTreeCSS.css | 86 - src/Components/test.js | 262 - src/Sandbox.jsx | 213 - src/components/Test.jsx | 6 + src/fonts/FontAwesome.otf | Bin 134808 -> 0 bytes src/fonts/fontawesome-webfont.eot | Bin 165742 -> 0 bytes src/fonts/fontawesome-webfont.svg | 2671 ----- src/fonts/fontawesome-webfont.ttf | Bin 165548 -> 0 bytes src/fonts/fontawesome-webfont.woff | Bin 98024 -> 0 bytes src/fonts/fontawesome-webfont.woff2 | Bin 77160 -> 0 bytes src/index.html | 13 + src/index.js | 13 +- webpack.config.js | 41 + yarn.lock | 9468 +++++++++--------- 48 files changed, 4639 insertions(+), 10204 deletions(-) create mode 100644 .babelrc delete mode 100644 LICENSE delete mode 100644 README.md delete mode 100644 config/env.js delete mode 100644 config/jest/cssTransform.js delete mode 100644 config/jest/fileTransform.js delete mode 100644 config/paths.js delete mode 100644 config/polyfills.js delete mode 100644 config/webpack.config.dev.js delete mode 100644 config/webpack.config.prod.js create mode 100644 dist/folder-tree.html create mode 100644 dist/index.html create mode 100644 dist/main.js create mode 100644 dist/main.js.LICENSE.txt create mode 100644 dist/react-folder-tree.bundle.js create mode 100644 dist/react-folder-tree.bundle.js.LICENSE.txt delete mode 100644 folder-tree-demo.gif delete mode 100644 public/favicon.ico delete mode 100644 public/index.html delete mode 100644 sample.png delete mode 100644 scripts/build.js delete mode 100644 scripts/start.js delete mode 100644 scripts/test.js delete mode 100644 src/.DS_Store delete mode 100644 src/Components/.DS_Store delete mode 100644 src/Components/Checkbox.js delete mode 100644 src/Components/EditableName.js delete mode 100644 src/Components/FileComponent.js delete mode 100644 src/Components/FilePane.js delete mode 100644 src/Components/FolderComponent.js delete mode 100644 src/Components/FolderToolbar.js delete mode 100644 src/Components/FolderTree.js delete mode 100644 src/Components/TreeNode.js delete mode 100644 src/Components/folderTreeCSS.css delete mode 100644 src/Components/test.js delete mode 100644 src/Sandbox.jsx create mode 100644 src/components/Test.jsx delete mode 100644 src/fonts/FontAwesome.otf delete mode 100644 src/fonts/fontawesome-webfont.eot delete mode 100644 src/fonts/fontawesome-webfont.svg delete mode 100644 src/fonts/fontawesome-webfont.ttf delete mode 100644 src/fonts/fontawesome-webfont.woff delete mode 100644 src/fonts/fontawesome-webfont.woff2 create mode 100644 src/index.html create mode 100644 webpack.config.js diff --git a/.babelrc b/.babelrc new file mode 100644 index 00000000..2b7bafa5 --- /dev/null +++ b/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-env", "@babel/preset-react"] +} diff --git a/LICENSE b/LICENSE deleted file mode 100644 index cf62dcd9..00000000 --- a/LICENSE +++ /dev/null @@ -1,21 +0,0 @@ -MIT License - -Copyright (c) 2017 Shunji Zhan - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. diff --git a/README.md b/README.md deleted file mode 100644 index a30811c1..00000000 --- a/README.md +++ /dev/null @@ -1,188 +0,0 @@ -# Introduction - -This is a folder tree written in ReactJS. - -We can do: - -- 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 - -# 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: - -![](https://raw.githubusercontent.com/shunjizhan/React-Folder-Tree/master/folder-tree-demo.gif?raw=true) - - -# To Install: - npm install --save react-folder-tree - -# To Run: - - - -Remember to include the above link in your html page. Otherwise the icons won't show up. - - import React from 'react'; - import ReactDOM from 'react-dom'; - import FolderTree from 'react-folder-tree'; - - const testData = YOUR DATA; - - ReactDOM.render( - , - 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 \ No newline at end of file diff --git a/config/env.js b/config/env.js deleted file mode 100644 index ce99b6b4..00000000 --- a/config/env.js +++ /dev/null @@ -1,36 +0,0 @@ -// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be -// injected into the application via DefinePlugin in Webpack configuration. - -var REACT_APP = /^REACT_APP_/i; - -function getClientEnvironment(publicUrl) { - var raw = Object - .keys(process.env) - .filter(key => REACT_APP.test(key)) - .reduce((env, key) => { - env[key] = process.env[key]; - return env; - }, { - // Useful for determining whether we’re running in production mode. - // Most importantly, it switches React into the correct mode. - 'NODE_ENV': process.env.NODE_ENV || 'development', - // Useful for resolving the correct path to static assets in `public`. - // For example, . - // This should only be used as an escape hatch. Normally you would put - // images into the `src` and `import` them in code to get their paths. - 'PUBLIC_URL': publicUrl - }); - // Stringify all values so we can feed into Webpack DefinePlugin - var stringified = { - 'process.env': Object - .keys(raw) - .reduce((env, key) => { - env[key] = JSON.stringify(raw[key]); - return env; - }, {}) - }; - - return { raw, stringified }; -} - -module.exports = getClientEnvironment; diff --git a/config/jest/cssTransform.js b/config/jest/cssTransform.js deleted file mode 100644 index aa17d127..00000000 --- a/config/jest/cssTransform.js +++ /dev/null @@ -1,12 +0,0 @@ -// This is a custom Jest transformer turning style imports into empty objects. -// http://facebook.github.io/jest/docs/tutorial-webpack.html - -module.exports = { - process() { - return 'module.exports = {};'; - }, - getCacheKey(fileData, filename) { - // The output is always the same. - return 'cssTransform'; - }, -}; diff --git a/config/jest/fileTransform.js b/config/jest/fileTransform.js deleted file mode 100644 index 927eb305..00000000 --- a/config/jest/fileTransform.js +++ /dev/null @@ -1,10 +0,0 @@ -const path = require('path'); - -// This is a custom Jest transformer turning file imports into filenames. -// http://facebook.github.io/jest/docs/tutorial-webpack.html - -module.exports = { - process(src, filename) { - return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';'; - }, -}; diff --git a/config/paths.js b/config/paths.js deleted file mode 100644 index 97417b9c..00000000 --- a/config/paths.js +++ /dev/null @@ -1,79 +0,0 @@ -var path = require('path'); -var fs = require('fs'); -var url = require('url'); - -// Make sure any symlinks in the project folder are resolved: -// https://github.com/facebookincubator/create-react-app/issues/637 -var appDirectory = fs.realpathSync(process.cwd()); -function resolveApp(relativePath) { - return path.resolve(appDirectory, relativePath); -} - -// We support resolving modules according to `NODE_PATH`. -// This lets you use absolute paths in imports inside large monorepos: -// https://github.com/facebookincubator/create-react-app/issues/253. - -// It works similar to `NODE_PATH` in Node itself: -// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders - -// We will export `nodePaths` as an array of absolute paths. -// It will then be used by Webpack configs. -// Jest doesn’t need this because it already handles `NODE_PATH` out of the box. - -// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. -// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. -// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421 - -var nodePaths = (process.env.NODE_PATH || '') - .split(process.platform === 'win32' ? ';' : ':') - .filter(Boolean) - .filter(folder => !path.isAbsolute(folder)) - .map(resolveApp); - -var envPublicUrl = process.env.PUBLIC_URL; - -function ensureSlash(path, needsSlash) { - var hasSlash = path.endsWith('/'); - if (hasSlash && !needsSlash) { - return path.substr(path, path.length - 1); - } else if (!hasSlash && needsSlash) { - return path + '/'; - } else { - return path; - } -} - -function getPublicUrl(appPackageJson) { - return envPublicUrl || require(appPackageJson).homepage; -} - -// We use `PUBLIC_URL` environment variable or "homepage" field to infer -// "public path" at which the app is served. -// Webpack needs to know it to put the right \ No newline at end of file diff --git a/dist/index.html b/dist/index.html new file mode 100644 index 00000000..d443aa2e --- /dev/null +++ b/dist/index.html @@ -0,0 +1 @@ +React Folder Tree
\ No newline at end of file diff --git a/dist/main.js b/dist/main.js new file mode 100644 index 00000000..dd46b56e --- /dev/null +++ b/dist/main.js @@ -0,0 +1,2 @@ +/*! For license information please see main.js.LICENSE.txt */ +(()=>{"use strict";var e={418:e=>{var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;function l(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}e.exports=function(){try{if(!Object.assign)return!1;var e=new String("abc");if(e[5]="de","5"===Object.getOwnPropertyNames(e)[0])return!1;for(var t={},n=0;n<10;n++)t["_"+String.fromCharCode(n)]=n;if("0123456789"!==Object.getOwnPropertyNames(t).map((function(e){return t[e]})).join(""))return!1;var r={};return"abcdefghijklmnopqrst".split("").forEach((function(e){r[e]=e})),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},r)).join("")}catch(e){return!1}}()?Object.assign:function(e,i){for(var a,o,u=l(e),c=1;c{var r=n(294),l=n(418),i=n(840);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n