diff --git a/.babelrc.js b/.babelrc.js index 864de8a4..a183a8c4 100755 --- a/.babelrc.js +++ b/.babelrc.js @@ -1,37 +1,18 @@ 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, + presets: [ + [ + 'env', + { + modules: false, + }, + ], + 'stage-2', + 'react', + ], 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'], }; } 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 - - +// 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 -| ![File Explorer Theme](https://user-images.githubusercontent.com/4413963/32144502-1df1ae08-bcfd-11e7-8f63-8b836dace1a4.png) | Full Node Drag Theme | MINIMAL THEME | -| :-------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------: | -| **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) | +| ![File Explorer Theme](https://user-images.githubusercontent.com/4413963/32144502-1df1ae08-bcfd-11e7-8f63-8b836dace1a4.png) | Full Node Drag Theme | MINIMAL THEME | +| :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------: | +| **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 @@ React Sortable Tree + + 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 {
- - + +