├── .babelrc
├── .eslintignore
├── .eslintrc.json
├── .gitignore
├── CHANGELOG.md
├── LICENSE
├── README.md
├── demo
├── app.css
├── app.js
├── index.html
└── index.js
├── index.js
├── node-content-renderer.js
├── node-content-renderer.scss
├── package-lock.json
├── package.json
├── tree-node-renderer.js
├── tree-node-renderer.scss
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "targets": {
5 | "browsers": ["last 2 versions", "ie >= 9"]
6 | }
7 | }],
8 | "react"
9 | ],
10 | "plugins": [
11 | "transform-object-rest-spread",
12 | "react-hot-loader/babel"
13 | ]
14 | }
15 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 |
--------------------------------------------------------------------------------
/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": ["airbnb", "prettier", "prettier/react"],
3 | "env": {
4 | "browser": true,
5 | "jest": true
6 | },
7 | "rules": {
8 | "react/jsx-filename-extension": 0,
9 | "react/prefer-stateless-function": 0
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | yarn.lock
4 | coverage
5 | cc-test-reporter
6 |
7 | # Editor and other tmp files
8 | *.swp
9 | *.un~
10 | *.iml
11 | *.ipr
12 | *.iws
13 | *.sublime-*
14 | .idea/
15 | *.DS_Store
16 |
17 | # Build directories (Will be preserved by npm)
18 | dist
19 | build
20 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4 |
5 |
6 | # [2.0.0](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/compare/v1.1.3...v2.0.0) (2018-09-04)
7 |
8 |
9 | ### Styles
10 |
11 | * run prettier ([a6aa65e](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/commit/a6aa65e))
12 |
13 |
14 | ### BREAKING CHANGES
15 |
16 | * now uses react-sortable-tree@2
17 |
18 |
19 |
20 |
21 | ## [1.1.3](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/compare/v1.1.2...v1.1.3) (2018-09-04)
22 |
23 |
24 |
25 |
26 | ## [1.1.2](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/compare/v1.1.1...v1.1.2) (2017-11-28)
27 |
28 |
29 | ### Bug Fixes
30 |
31 | * silence warning on latest react-sortable-tree ([7c81d55](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/commit/7c81d55))
32 |
33 |
34 |
35 |
36 | ## [1.1.1](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/compare/v1.1.0...v1.1.1) (2017-11-01)
37 |
38 |
39 | ### Bug Fixes
40 |
41 | * make canDrag work. Fixes [#5](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/issues/5) ([f82d6c1](https://github.com/frontend-collective/react-sortable-tree-theme-file-explorer/commit/f82d6c1))
42 |
43 |
44 |
45 |
46 | # 1.1.0 (2017-10-29)
47 |
48 |
49 | ### Features
50 |
51 | * Complete basic appearance ([98a8d09](https://github.com/frontend-collective/react-sortable-tree/commit/98a8d09))
52 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Fritz
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Sortable Tree File Explorer Theme
2 |
3 | 
4 |
5 | ## Features
6 |
7 | - You can click anywhere on a node to drag it.
8 | - More compact design, with indentation alone used to represent tree depth.
9 |
10 | ## Usage
11 |
12 | ```sh
13 | npm install --save react-sortable-tree-theme-file-explorer
14 | ```
15 |
16 | ```jsx
17 | import React, { Component } from 'react';
18 | import SortableTree from 'react-sortable-tree';
19 | import FileExplorerTheme from 'react-sortable-tree-theme-file-explorer';
20 |
21 | export default class Tree extends Component {
22 | constructor(props) {
23 | super(props);
24 |
25 | this.state = {
26 | treeData: [{ title: 'src/', children: [{ title: 'index.js' }] }],
27 | };
28 | }
29 |
30 | render() {
31 | return (
32 |
33 | this.setState({ treeData })}
36 | theme={FileExplorerTheme}
37 | />
38 |
39 | );
40 | }
41 | }
42 | ```
43 |
--------------------------------------------------------------------------------
/demo/app.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding: 0;
3 | margin: 0;
4 | }
5 |
--------------------------------------------------------------------------------
/demo/app.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import SortableTree, { toggleExpandedForAll } from 'react-sortable-tree';
3 | import FileExplorerTheme from '../index';
4 | import './app.css';
5 |
6 | class App extends Component {
7 | constructor(props) {
8 | super(props);
9 |
10 | this.state = {
11 | searchString: '',
12 | searchFocusIndex: 0,
13 | searchFoundCount: null,
14 | treeData: [
15 | { title: '.gitignore' },
16 | { title: 'package.json' },
17 | {
18 | title: 'src',
19 | isDirectory: true,
20 | expanded: true,
21 | children: [
22 | { title: 'styles.css' },
23 | { title: 'index.js' },
24 | { title: 'reducers.js' },
25 | { title: 'actions.js' },
26 | { title: 'utils.js' },
27 | ],
28 | },
29 | {
30 | title: 'tmp',
31 | isDirectory: true,
32 | children: [
33 | { title: '12214124-log' },
34 | { title: 'drag-disabled-file', dragDisabled: true },
35 | ],
36 | },
37 | {
38 | title: 'build',
39 | isDirectory: true,
40 | children: [{ title: 'react-sortable-tree.js' }],
41 | },
42 | {
43 | title: 'public',
44 | isDirectory: true,
45 | },
46 | {
47 | title: 'node_modules',
48 | isDirectory: true,
49 | },
50 | ],
51 | };
52 |
53 | this.updateTreeData = this.updateTreeData.bind(this);
54 | this.expandAll = this.expandAll.bind(this);
55 | this.collapseAll = this.collapseAll.bind(this);
56 | }
57 |
58 | updateTreeData(treeData) {
59 | this.setState({ treeData });
60 | }
61 |
62 | expand(expanded) {
63 | this.setState({
64 | treeData: toggleExpandedForAll({
65 | treeData: this.state.treeData,
66 | expanded,
67 | }),
68 | });
69 | }
70 |
71 | expandAll() {
72 | this.expand(true);
73 | }
74 |
75 | collapseAll() {
76 | this.expand(false);
77 | }
78 |
79 | render() {
80 | const {
81 | treeData,
82 | searchString,
83 | searchFocusIndex,
84 | searchFoundCount,
85 | } = this.state;
86 |
87 | const alertNodeInfo = ({ node, path, treeIndex }) => {
88 | const objectString = Object.keys(node)
89 | .map(k => (k === 'children' ? 'children: Array' : `${k}: '${node[k]}'`))
90 | .join(',\n ');
91 |
92 | global.alert(
93 | 'Info passed to the icon and button generators:\n\n' +
94 | `node: {\n ${objectString}\n},\n` +
95 | `path: [${path.join(', ')}],\n` +
96 | `treeIndex: ${treeIndex}`
97 | );
98 | };
99 |
100 | const selectPrevMatch = () =>
101 | this.setState({
102 | searchFocusIndex:
103 | searchFocusIndex !== null
104 | ? (searchFoundCount + searchFocusIndex - 1) % searchFoundCount
105 | : searchFoundCount - 1,
106 | });
107 |
108 | const selectNextMatch = () =>
109 | this.setState({
110 | searchFocusIndex:
111 | searchFocusIndex !== null
112 | ? (searchFocusIndex + 1) % searchFoundCount
113 | : 0,
114 | });
115 |
116 | return (
117 |
120 |
121 |
File Explorer Theme
122 |
123 |
124 |
125 |
166 |
167 |
168 |
169 |
176 | this.setState({
177 | searchFoundCount: matches.length,
178 | searchFocusIndex:
179 | matches.length > 0 ? searchFocusIndex % matches.length : 0,
180 | })
181 | }
182 | canDrag={({ node }) => !node.dragDisabled}
183 | canDrop={({ nextParent }) => !nextParent || nextParent.isDirectory}
184 | generateNodeProps={rowInfo => ({
185 | icons: rowInfo.node.isDirectory
186 | ? [
187 | ,
201 | ]
202 | : [
203 |
213 | F
214 |
,
215 | ],
216 | buttons: [
217 | ,
232 | ],
233 | })}
234 | />
235 |
236 |
97 | {toggleChildrenVisibility &&
98 | node.children &&
99 | node.children.length > 0 && (
100 |
30 | {Children.map(children, child =>
31 | cloneElement(child, {
32 | isOver,
33 | canDrop,
34 | draggedNode,
35 | lowerSiblingCounts,
36 | listIndex,
37 | swapFrom,
38 | swapLength,
39 | swapDepth,
40 | })
41 | )}
42 |
43 | );
44 | }
45 | }
46 |
47 | FileThemeTreeNodeRenderer.defaultProps = {
48 | swapFrom: null,
49 | swapDepth: null,
50 | swapLength: null,
51 | canDrop: false,
52 | draggedNode: null,
53 | };
54 |
55 | FileThemeTreeNodeRenderer.propTypes = {
56 | treeIndex: PropTypes.number.isRequired,
57 | treeId: PropTypes.string.isRequired,
58 | swapFrom: PropTypes.number,
59 | swapDepth: PropTypes.number,
60 | swapLength: PropTypes.number,
61 | scaffoldBlockPxWidth: PropTypes.number.isRequired,
62 | lowerSiblingCounts: PropTypes.arrayOf(PropTypes.number).isRequired,
63 |
64 | listIndex: PropTypes.number.isRequired,
65 | children: PropTypes.node.isRequired,
66 |
67 | // Drop target
68 | connectDropTarget: PropTypes.func.isRequired,
69 | isOver: PropTypes.bool.isRequired,
70 | canDrop: PropTypes.bool,
71 | draggedNode: PropTypes.shape({}),
72 |
73 | // used in dndManager
74 | getPrevRow: PropTypes.func.isRequired,
75 | node: PropTypes.shape({}).isRequired,
76 | path: PropTypes.arrayOf(
77 | PropTypes.oneOfType([PropTypes.string, PropTypes.number])
78 | ).isRequired,
79 | rowDirection: PropTypes.string.isRequired,
80 | };
81 |
82 | export default FileThemeTreeNodeRenderer;
83 |
--------------------------------------------------------------------------------
/tree-node-renderer.scss:
--------------------------------------------------------------------------------
1 | .node {
2 | min-width: 100%;
3 | position: relative;
4 | }
5 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require('path');
2 | const webpack = require('webpack');
3 | const autoprefixer = require('autoprefixer');
4 | const nodeExternals = require('webpack-node-externals');
5 | const HtmlWebpackPlugin = require('html-webpack-plugin');
6 |
7 | const target = process.env.TARGET || 'umd';
8 |
9 | const styleLoader = {
10 | loader: 'style-loader',
11 | options: { insertAt: 'top' },
12 | };
13 |
14 | const fileLoader = {
15 | loader: 'file-loader',
16 | options: { name: 'static/[name].[ext]' },
17 | };
18 |
19 | const postcssLoader = {
20 | loader: 'postcss-loader',
21 | options: {
22 | plugins: () => [
23 | autoprefixer({ browsers: ['IE >= 9', 'last 2 versions', '> 1%'] }),
24 | ],
25 | },
26 | };
27 |
28 | const cssLoader = isLocal => ({
29 | loader: 'css-loader',
30 | options: {
31 | modules: true,
32 | '-autoprefixer': true,
33 | importLoaders: true,
34 | localIdentName: isLocal ? 'rstcustom__[local]' : null,
35 | },
36 | });
37 |
38 | const config = {
39 | entry: './index',
40 | output: {
41 | path: path.join(__dirname, 'dist'),
42 | filename: '[name].js',
43 | libraryTarget: 'umd',
44 | library: 'ReactSortableTreeThemeFileExplorer',
45 | },
46 | devtool: 'source-map',
47 | plugins: [
48 | new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
49 | new webpack.optimize.OccurrenceOrderPlugin(),
50 | new webpack.optimize.UglifyJsPlugin({
51 | compress: {
52 | warnings: false,
53 | },
54 | mangle: false,
55 | beautify: true,
56 | comments: true,
57 | }),
58 | ],
59 | module: {
60 | rules: [
61 | {
62 | test: /\.jsx?$/,
63 | use: ['babel-loader'],
64 | exclude: path.join(__dirname, 'node_modules'),
65 | },
66 | {
67 | test: /\.scss$/,
68 | use: [styleLoader, cssLoader(true), postcssLoader, 'sass-loader'],
69 | exclude: path.join(__dirname, 'node_modules'),
70 | },
71 | {
72 | // Used for importing css from external modules (react-virtualized, etc.)
73 | test: /\.css$/,
74 | use: [styleLoader, cssLoader(false), postcssLoader],
75 | },
76 | ],
77 | },
78 | };
79 |
80 | switch (target) {
81 | case 'umd':
82 | // Exclude library dependencies from the bundle
83 | config.externals = [
84 | nodeExternals({
85 | // load non-javascript files with extensions, presumably via loaders
86 | whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i],
87 | }),
88 | ];
89 | break;
90 | case 'development':
91 | config.devtool = 'eval';
92 | config.module.rules.push({
93 | test: /\.(jpe?g|png|gif|ico|svg)$/,
94 | use: [fileLoader],
95 | exclude: path.join(__dirname, 'node_modules'),
96 | });
97 | config.entry = ['react-hot-loader/patch', './demo/index'];
98 | config.output = {
99 | path: path.join(__dirname, 'build'),
100 | filename: 'static/[name].js',
101 | };
102 | config.plugins = [
103 | new HtmlWebpackPlugin({
104 | inject: true,
105 | template: './demo/index.html',
106 | }),
107 | new webpack.EnvironmentPlugin({ NODE_ENV: 'development' }),
108 | new webpack.NoEmitOnErrorsPlugin(),
109 | ];
110 | config.devServer = {
111 | contentBase: path.join(__dirname, 'build'),
112 | port: process.env.PORT || 3001,
113 | stats: 'minimal',
114 | };
115 |
116 | break;
117 | case 'demo':
118 | config.module.rules.push({
119 | test: /\.(jpe?g|png|gif|ico|svg)$/,
120 | use: [fileLoader],
121 | exclude: path.join(__dirname, 'node_modules'),
122 | });
123 | config.entry = './demo/index';
124 | config.output = {
125 | path: path.join(__dirname, 'build'),
126 | filename: 'static/[name].js',
127 | };
128 | config.plugins = [
129 | new HtmlWebpackPlugin({
130 | inject: true,
131 | template: './demo/index.html',
132 | }),
133 | new webpack.EnvironmentPlugin({ NODE_ENV: 'production' }),
134 | new webpack.optimize.UglifyJsPlugin({
135 | compress: {
136 | warnings: false,
137 | },
138 | }),
139 | ];
140 |
141 | break;
142 | default:
143 | }
144 |
145 | module.exports = config;
146 |
--------------------------------------------------------------------------------