feat: change theme to full-node drag theme

frontend-collective · Dec 3, 2017 · eb30848 · eb30848
1 parent 1b2e6f7
commit eb30848
Show file tree

Hide file tree

Showing 10 changed files with 259 additions and 502 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,31 +0,0 @@
-# Change Log
-
-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.
-
-<a name="1.1.2"></a>
-## [1.1.2](https://github.com/fritz-c/react-sortable-tree-theme-file-explorer/compare/v1.1.1...v1.1.2) (2017-11-28)
-
-
-### Bug Fixes
-
-* silence warning on latest react-sortable-tree ([7c81d55](https://github.com/fritz-c/react-sortable-tree-theme-file-explorer/commit/7c81d55))
-
-
-
-<a name="1.1.1"></a>
-## [1.1.1](https://github.com/fritz-c/react-sortable-tree-theme-file-explorer/compare/v1.1.0...v1.1.1) (2017-11-01)
-
-
-### Bug Fixes
-
-* make canDrag work. Fixes [#5](https://github.com/fritz-c/react-sortable-tree-theme-file-explorer/issues/5) ([f82d6c1](https://github.com/fritz-c/react-sortable-tree-theme-file-explorer/commit/f82d6c1))
-
-
-
-<a name="1.1.0"></a>
-# 1.1.0 (2017-10-29)
-
-
-### Features
-
-* Complete basic appearance ([98a8d09](https://github.com/fritz-c/react-sortable-tree/commit/98a8d09))

diff --git a/README.md b/README.md
@@ -1,19 +1,19 @@
-# React Sortable Tree File Explorer Theme
-![theme appearance](https://user-images.githubusercontent.com/4413963/32144463-a7de23e0-bcfc-11e7-8054-1a83d561261e.png)
+# React Sortable Tree Full Node Drag Theme
+<img alt="theme appearance" src="https://user-images.githubusercontent.com/4413963/33521792-61dc2c50-d81f-11e7-8ab1-359661a11ca4.png" width="500">
+
 ## Features
-* You can click anywhere on a node to drag it.
-* More compact design, with indentation alone used to represent tree depth.
+* No drag handles. You can click anywhere on a node to drag it.
 
 ## Usage
 
 ```sh
-npm install --save react-sortable-tree-theme-file-explorer
+npm install --save react-sortable-tree-theme-full-node-drag
 ```
 
 ```jsx
 import React, { Component } from 'react';
 import SortableTree from 'react-sortable-tree';
-import FileExplorerTheme from 'react-sortable-tree-theme-file-explorer';
+import FileExplorerTheme from 'react-sortable-tree-theme-full-node-drag';
 
 export default class Tree extends Component {
   constructor(props) {

diff --git a/demo/app.css b/demo/app.css
@@ -1,4 +1,5 @@
 body {
   padding: 0;
   margin: 0;
+  background-color: #f1f1f1;
 }
diff --git a/demo/app.js b/demo/app.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import SortableTree, { toggleExpandedForAll } from 'react-sortable-tree';
-import FileExplorerTheme from '../index';
+import CustomTheme from '../index';
 import './app.css';
 
 class App extends Component {
@@ -12,44 +12,16 @@ class App extends Component {
       searchFocusIndex: 0,
       searchFoundCount: null,
       treeData: [
-        { title: '.gitignore' },
-        { title: 'package.json' },
+        { title: 'This is the Full Node Drag theme' },
+        { title: 'You can click anywhere on the node to drag it' },
         {
-          title: 'src',
-          isDirectory: true,
-          expanded: true,
-          children: [
-            { title: 'styles.css' },
-            { title: 'index.js' },
-            { title: 'reducers.js' },
-            { title: 'actions.js' },
-            { title: 'utils.js' },
-          ],
-        },
-        {
-          title: 'tmp',
-          isDirectory: true,
-          children: [
-            { title: '12214124-log' },
-            { title: 'drag-disabled-file', dragDisabled: true },
-          ],
-        },
-        {
-          title: 'build',
-          isDirectory: true,
-          children: [{ title: 'react-sortable-tree.js' }],
-        },
-        {
-          title: 'public',
-          isDirectory: true,
-        },
-        {
-          title: 'node_modules',
-          isDirectory: true,
+          title: 'This node has dragging disabled',
+          subtitle: 'Note how the hover behavior is different',
+          dragDisabled: true,
         },
+        { title: 'Chicken', children: [{ title: 'Egg' }] },
       ],
     };
-
     this.updateTreeData = this.updateTreeData.bind(this);
     this.expandAll = this.expandAll.bind(this);
     this.collapseAll = this.collapseAll.bind(this);
@@ -118,7 +90,7 @@ class App extends Component {
         style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}
       >
         <div style={{ flex: '0 0 auto', padding: '0 15px' }}>
-          <h3>File Explorer Theme</h3>
+          <h3>Full Node Drag Theme</h3>
           <button onClick={this.expandAll}>Expand All</button>
           <button onClick={this.collapseAll}>Collapse All</button>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
@@ -135,7 +107,8 @@ class App extends Component {
                 type="text"
                 value={searchString}
                 onChange={event =>
-                  this.setState({ searchString: event.target.value })}
+                  this.setState({ searchString: event.target.value })
+                }
               />
             </label>
 
@@ -166,7 +139,7 @@ class App extends Component {
 
         <div style={{ flex: '1 0 50%', padding: '0 0 0 15px' }}>
           <SortableTree
-            theme={FileExplorerTheme}
+            theme={CustomTheme}
             treeData={treeData}
             onChange={this.updateTreeData}
             searchQuery={searchString}
@@ -176,56 +149,12 @@ class App extends Component {
                 searchFoundCount: matches.length,
                 searchFocusIndex:
                   matches.length > 0 ? searchFocusIndex % matches.length : 0,
-              })}
+              })
+            }
             canDrag={({ node }) => !node.dragDisabled}
-            canDrop={({ nextParent }) => !nextParent || nextParent.isDirectory}
             generateNodeProps={rowInfo => ({
-              icons: rowInfo.node.isDirectory
-                ? [
-                    <div
-                      style={{
-                        borderLeft: 'solid 8px gray',
-                        borderBottom: 'solid 10px gray',
-                        marginRight: 10,
-                        width: 16,
-                        height: 12,
-                        filter: rowInfo.node.expanded
-                          ? 'drop-shadow(1px 0 0 gray) drop-shadow(0 1px 0 gray) drop-shadow(0 -1px 0 gray) drop-shadow(-1px 0 0 gray)'
-                          : 'none',
-                        borderColor: rowInfo.node.expanded ? 'white' : 'gray',
-                      }}
-                    />,
-                  ]
-                : [
-                    <div
-                      style={{
-                        border: 'solid 1px black',
-                        fontSize: 8,
-                        textAlign: 'center',
-                        marginRight: 10,
-                        width: 12,
-                        height: 16,
-                      }}
-                    >
-                      F
-                    </div>,
-                  ],
               buttons: [
-                <button
-                  style={{
-                    padding: 0,
-                    borderRadius: '100%',
-                    backgroundColor: 'gray',
-                    color: 'white',
-                    width: 16,
-                    height: 16,
-                    border: 0,
-                    fontWeight: 100,
-                  }}
-                  onClick={() => alertNodeInfo(rowInfo)}
-                >
-                  i
-                </button>,
+                <button onClick={() => alertNodeInfo(rowInfo)}>i</button>,
               ],
             })}
           />

diff --git a/index.js b/index.js
@@ -11,12 +11,7 @@
 // placeholderRenderer: PropTypes.func,
 
 import nodeContentRenderer from './node-content-renderer';
-import treeNodeRenderer from './tree-node-renderer';
 
 module.exports = {
   nodeContentRenderer,
-  treeNodeRenderer,
-  scaffoldBlockPxWidth: 25,
-  rowHeight: 25,
-  slideRegionSize: 50,
 };