From 49f4fec8e23bc2a6e6c520a29ef7bbfc06832688 Mon Sep 17 00:00:00 2001
From: Wei-Wei Wu <wuxx1045@umn.edu>
Date: Tue, 12 Jun 2018 03:32:57 -0700
Subject: [PATCH 1/3] fixed build and demo
---
.babelrc | 12 +++++++++++
.babelrc.js | 44 ---------------------------------------
README.md | 29 +++++++++-----------------
example/public/index.html | 2 ++
example/src/App.js | 1 +
example/src/Demo.js | 11 ++++++++--
example/src/index.css | 7 +++++++
package.json | 23 +++++---------------
rollup.config.js | 30 ++++++++++++--------------
9 files changed, 59 insertions(+), 100 deletions(-)
create mode 100755 .babelrc
delete mode 100755 .babelrc.js
diff --git a/.babelrc b/.babelrc
new file mode 100755
index 00000000..fd573b33
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,12 @@
+{
+ "presets": [
+ ["env", {
+ "modules": false
+ }],
+ "stage-0",
+ "react"
+ ],
+ "plugins": [
+ "external-helpers"
+ ]
+}
diff --git a/.babelrc.js b/.babelrc.js
deleted file mode 100755
index 864de8a4..00000000
--- a/.babelrc.js
+++ /dev/null
@@ -1,44 +0,0 @@
-const env = process.env.NODE_ENV;
-
-if (env === 'commonjs' || env === 'es') {
- module.exports = {
- ignore: ['*.test.*'],
- plugins: ['transform-runtime'],
- presets: [['env', { modules: false }], 'react', 'stage-2'],
- };
-
- if (env === 'commonjs') {
- module.exports.plugins.push('transform-es2015-modules-commonjs');
- }
-}
-
-if (env === 'rollup') {
- module.exports = {
- comments: false,
- plugins: ['external-helpers'],
- presets: [['env', { modules: false }], 'react', 'stage-2'],
- };
-}
-
-if (env === 'development') {
- module.exports = {
- presets: ['react', 'stage-2'],
- plugins: ['react-hot-loader/babel'],
- };
-}
-
-if (env === 'production') {
- module.exports = {
- comments: false,
- plugins: ['transform-runtime'],
- presets: ['env', 'react', 'stage-2'],
- };
-}
-
-if (env === 'test') {
- module.exports = {
- comments: false,
- plugins: ['transform-es2015-modules-commonjs'],
- presets: ['react', 'stage-2'],
- };
-}
diff --git a/README.md b/README.md
index b5007bd6..9e3ceb64 100644
--- a/README.md
+++ b/README.md
@@ -25,7 +25,7 @@ Install `react-sortable-tree` using npm.
npm install react-sortable-tree --save
```
-ES6, CommonJS, and UMD builds are available with each distribution.
+ES6 and CommonJS builds are available with each distribution.
For example:
```js
@@ -38,18 +38,11 @@ import SortableTree from 'react-sortable-tree';
// Or you can import the tree without the dnd context as a named export. eg
import { SortableTreeWithoutDndContext as SortableTree } from 'react-sortable-tree';
-// Importing from commonjs (default)
-import SortableTree from 'react-sortable-tree/dist/commonjs';
+// Importing from esm (default)
+import SortableTree from 'react-sortable-tree/dist/index.esm.js';
-// Importing from es
-import SortableTree from 'react-sortable-tree/dist/es';
-```
-
-You can also use a global-friendly UMD build:
-
-```html
-<link rel="stylesheet" href="path-to-react-sortable-tree/styles.css">
-<script src="path-to-react-sortable-tree/dist/umd/react-sortable-tree.js"></script>
+// Importing from cjs
+import SortableTree from 'react-sortable-tree/dist/index.cjs.js';
```
## Usage
@@ -140,13 +133,11 @@ Using the `theme` prop along with an imported theme module, you can easily overr
### Featured themes
-|  | <img alt="Full Node Drag Theme" src="https://user-images.githubusercontent.com/4413963/33521792-61dc2c50-d81f-11e7-8ab1-359661a11ca4.png" width="300"> | <img alt="MINIMAL THEME" src="https://github.com/lifejuggler/react-sortable-tree-theme-minimal/blob/master/example-resource/main.png" width="300"> |
-| :-------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------: |
-| **File Explorer** | **Full Node Drag** | **Minimalistic theme inspired from MATERIAL UI** |
-| react-sortable-tree-theme-file-explorer | react-sortable-tree-theme-full-node-drag | react-sortable-tree-theme-minimal |
-
-| [Github](https://github.com/
-/react-sortable-tree-theme-file-explorer) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-file-explorer) | [Github](https://github.com/frontend-collective/react-sortable-tree-theme-full-node-drag) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-full-node-drag) | [Github](https://github.com/lifejuggler/react-sortable-tree-theme-minimal) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-minimal) |
+|  | <img alt="Full Node Drag Theme" src="https://user-images.githubusercontent.com/4413963/33521792-61dc2c50-d81f-11e7-8ab1-359661a11ca4.png" width="300"> | <img alt="MINIMAL THEME" src="https://github.com/lifejuggler/react-sortable-tree-theme-minimal/blob/master/example-resource/main.png" width="300"> |
+| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: |
+| **File Explorer** | **Full Node Drag** | **Minimalistic theme inspired from MATERIAL UI** |
+| react-sortable-tree-theme-file-explorer | react-sortable-tree-theme-full-node-drag | react-sortable-tree-theme-minimal |
+| [Github](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-file-explorer) | [Github](https://github.com/frontend-collective/react-sortable-tree-theme-full-node-drag) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-full-node-drag) | [Github](https://github.com/lifejuggler/react-sortable-tree-theme-minimal) \| [NPM](https://www.npmjs.com/package/react-sortable-tree-theme-minimal) |
**Help Wanted** - As the themes feature has just been enabled, there are very few (only _two_ at the time of this writing) theme modules available. If you've customized the appearance of your tree to be especially cool or easy to use, I would be happy to feature it in this readme with a link to the Github repo and NPM page if you convert it to a theme. You can use my [file explorer theme repo](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer) as a template to plug in your own stuff.
diff --git a/example/public/index.html b/example/public/index.html
index 40eea69e..4c8feb09 100644
--- a/example/public/index.html
+++ b/example/public/index.html
@@ -22,6 +22,8 @@
<title>React Sortable Tree</title>
<!-- Latest compiled and minified CSS -->
+ <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> -->
+ <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
diff --git a/example/src/App.js b/example/src/App.js
index 9b0aa43d..81a8bbd8 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -24,6 +24,7 @@ class App extends Component {
componentDidMount() {
if (this._editor) {
this._editor.set(treeData);
+ this._editor.expandAll();
}
}
diff --git a/example/src/Demo.js b/example/src/Demo.js
index 10b819cb..2a3303d7 100644
--- a/example/src/Demo.js
+++ b/example/src/Demo.js
@@ -82,8 +82,12 @@ export default class Demo extends Component {
<div className={styles.demoWrapper}>
<div className={styles.buttons}>
<div>
- <button onClick={this.expandAll}>Expand All</button>
- <button onClick={this.collapseAll}>Collapse All</button>
+ <button className="btn btn-primary" onClick={this.expandAll}>
+ Expand All
+ </button>
+ <button className="btn btn-warning" onClick={this.collapseAll}>
+ Collapse All
+ </button>
</div>
<form
style={{ display: 'inline-block' }}
@@ -104,6 +108,7 @@ export default class Demo extends Component {
</label>
<button
+ className="btn btn-info"
type="button"
disabled={!searchFoundCount}
onClick={this.selectPrevMatch}
@@ -112,6 +117,7 @@ export default class Demo extends Component {
</button>
<button
+ className="btn btn-info"
type="submit"
disabled={!searchFoundCount}
onClick={this.selectNextMatch}
@@ -157,6 +163,7 @@ export default class Demo extends Component {
generateNodeProps={rowInfo => ({
buttons: [
<button
+ className="btn btn-outline-success"
style={{
verticalAlign: 'middle',
}}
diff --git a/example/src/index.css b/example/src/index.css
index d1cd4edd..af50b2a8 100644
--- a/example/src/index.css
+++ b/example/src/index.css
@@ -65,3 +65,10 @@ body {
.container {
margin-left: 0;
}
+
+.btn {
+ margin-left: 3px;
+ margin-right: 3px;
+ padding-top: 0;
+ padding-bottom: 0;
+}
diff --git a/package.json b/package.json
index 7cb32410..b7a0aa1b 100644
--- a/package.json
+++ b/package.json
@@ -4,32 +4,20 @@
"description": "Drag-and-drop sortable component for nested data and hierarchies",
"scripts": {
"prebuild": "npm run lint",
- "build": "npm run build:commonjs && npm run build:es && npm run build:umd && npm run build:storybook",
- "build:umd": "npm run clean:umd && cross-env NODE_ENV=rollup rollup -c",
- "build:es": "npm run clean:es && cross-env NODE_ENV=es babel src --out-dir dist/es",
- "build:commonjs": "npm run clean:commonjs && cross-env NODE_ENV=commonjs babel src --out-dir dist/commonjs",
+ "build": "npm run clean && rollup -c",
"build:storybook": "npm run clean:storybook && build-storybook -o example/build/storybook",
- "clean:storybook": "rimraf build",
- "clean:commonjs": "rimraf dist/commonjs",
- "clean:es": "rimraf dist/es",
- "clean:umd": "rimraf dist/umd",
+ "clean": "rimraf dist",
+ "clean:storybook": "rimraf example/build/storybook",
"lint": "eslint src",
"prettier": "prettier --write \"{src,example/src,stories}/**/*.{js,css,md}\"",
"prepublishOnly": "npm run lint && npm run test && npm run build",
"release": "standard-version",
"test": "cross-env NODE_ENV=test jest",
"test:watch": "cross-env NODE_ENV=test jest --watchAll",
- "deploy": "npm run build:storybook && gh-pages -d build",
"storybook": "start-storybook -p ${PORT:-3001} -h 0.0.0.0"
},
- "main": "dist/umd/react-sortable-tree.js",
- "module": "dist/es/index.js",
- "jsnext:main": "dist/es/index.js",
- "babel": {
- "presets": [
- "./.babelrc.js"
- ]
- },
+ "main": "dist/index.cjs.js",
+ "module": "dist/index.esm.js",
"files": [
"dist",
"style.css"
@@ -133,7 +121,6 @@
"rollup-plugin-commonjs": "^9.1.3",
"rollup-plugin-node-resolve": "^3.3.0",
"rollup-plugin-postcss": "^1.6.2",
- "rollup-plugin-uglify": "^4.0.0",
"standard-version": "^4.4.0",
"style-loader": "^0.21.0",
"webpack": "^4.10.2",
diff --git a/rollup.config.js b/rollup.config.js
index 30e9b418..c1c72c74 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -2,20 +2,23 @@ import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss';
-import { uglify } from 'rollup-plugin-uglify';
+
+import pkg from './package.json';
export default {
input: './src/index.js',
- output: {
- exports: 'named',
- file: 'dist/umd/react-sortable-tree.js',
- format: 'umd',
- name: 'ReactSortableTree',
- globals: {
- react: 'React',
- 'react-dom': 'ReactDOM',
+ output: [
+ {
+ file: pkg.main,
+ format: 'cjs',
+ exports: 'named'
+ },
+ {
+ file: pkg.module,
+ format: 'esm',
+ exports: 'named'
},
- },
+ ],
external: [
'react',
'react-dom',
@@ -35,12 +38,5 @@ export default {
babel({
exclude: 'node_modules/**',
}),
- uglify({
- mangle: false,
- output: {
- comments: true,
- beautify: true,
- },
- }),
],
};
From 63b44c1b6e793fd9933f1e3192a74e43343b4117 Mon Sep 17 00:00:00 2001
From: Wei-Wei Wu <wuxx1045@umn.edu>
Date: Tue, 12 Jun 2018 03:36:03 -0700
Subject: [PATCH 2/3] updating lockfile
---
yarn.lock | 28 ----------------------------
1 file changed, 28 deletions(-)
diff --git a/yarn.lock b/yarn.lock
index ff2eecdd..e3a12298 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20,12 +20,6 @@
dependencies:
"@babel/highlight" "7.0.0-beta.47"
-"@babel/code-frame@^7.0.0-beta.47":
- version "7.0.0-beta.49"
- resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.49.tgz#becd805482734440c9d137e46d77340e64d7f51b"
- dependencies:
- "@babel/highlight" "7.0.0-beta.49"
-
"@babel/generator@7.0.0-beta.44":
version "7.0.0-beta.44"
resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
@@ -80,14 +74,6 @@
esutils "^2.0.2"
js-tokens "^3.0.0"
-"@babel/highlight@7.0.0-beta.49":
- version "7.0.0-beta.49"
- resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0-beta.49.tgz#96bdc6b43e13482012ba6691b1018492d39622cc"
- dependencies:
- chalk "^2.0.0"
- esutils "^2.0.2"
- js-tokens "^3.0.0"
-
"@babel/template@7.0.0-beta.44":
version "7.0.0-beta.44"
resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.44.tgz#f8832f4fdcee5d59bf515e595fc5106c529b394f"
@@ -9712,13 +9698,6 @@ rollup-plugin-postcss@^1.6.2:
rollup-pluginutils "^2.0.1"
style-inject "^0.3.0"
-rollup-plugin-uglify@^4.0.0:
- version "4.0.0"
- resolved "https://registry.yarnpkg.com/rollup-plugin-uglify/-/rollup-plugin-uglify-4.0.0.tgz#6eb471738f1ce9ba7d9d4bc43b71cba02417c8fb"
- dependencies:
- "@babel/code-frame" "^7.0.0-beta.47"
- uglify-js "^3.3.25"
-
rollup-pluginutils@^1.5.0:
version "1.5.2"
resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
@@ -10722,13 +10701,6 @@ uglify-js@^2.6:
optionalDependencies:
uglify-to-browserify "~1.0.0"
-uglify-js@^3.3.25:
- version "3.4.0"
- resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.0.tgz#796762282b5b5f0eafe7d5c8c708d1d7bd5ba11d"
- dependencies:
- commander "~2.15.0"
- source-map "~0.6.1"
-
uglify-to-browserify@~1.0.0:
version "1.0.2"
resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
From faeba2157f3410ba7c268f6874bc1ec288bfafb3 Mon Sep 17 00:00:00 2001
From: Wei-Wei Wu <wuxx1045@umn.edu>
Date: Tue, 12 Jun 2018 03:42:22 -0700
Subject: [PATCH 3/3] fix stuff
---
.babelrc | 12 ------------
.babelrc.js | 25 +++++++++++++++++++++++++
package.json | 7 ++++++-
3 files changed, 31 insertions(+), 13 deletions(-)
delete mode 100755 .babelrc
create mode 100755 .babelrc.js
diff --git a/.babelrc b/.babelrc
deleted file mode 100755
index fd573b33..00000000
--- a/.babelrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "presets": [
- ["env", {
- "modules": false
- }],
- "stage-0",
- "react"
- ],
- "plugins": [
- "external-helpers"
- ]
-}
diff --git a/.babelrc.js b/.babelrc.js
new file mode 100755
index 00000000..a183a8c4
--- /dev/null
+++ b/.babelrc.js
@@ -0,0 +1,25 @@
+const env = process.env.NODE_ENV;
+
+if (env === 'rollup') {
+ module.exports = {
+ presets: [
+ [
+ 'env',
+ {
+ modules: false,
+ },
+ ],
+ 'stage-2',
+ 'react',
+ ],
+ plugins: ['external-helpers'],
+ };
+}
+
+if (env === 'test') {
+ module.exports = {
+ comments: false,
+ plugins: ['transform-es2015-modules-commonjs'],
+ presets: ['react', 'stage-2'],
+ };
+}
diff --git a/package.json b/package.json
index b7a0aa1b..5e3f83ff 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
"description": "Drag-and-drop sortable component for nested data and hierarchies",
"scripts": {
"prebuild": "npm run lint",
- "build": "npm run clean && rollup -c",
+ "build": "npm run clean && NODE_ENV=rollup rollup -c",
"build:storybook": "npm run clean:storybook && build-storybook -o example/build/storybook",
"clean": "rimraf dist",
"clean:storybook": "rimraf example/build/storybook",
@@ -18,6 +18,11 @@
},
"main": "dist/index.cjs.js",
"module": "dist/index.esm.js",
+ "babel": {
+ "presets": [
+ "./.babelrc.js"
+ ]
+ },
"files": [
"dist",
"style.css"