Continue enormous refactor

Author: bor3ham

.npmignore

@@ -1,3 +1,3 @@
-src/
+src/**/*.jsx
 demo-site/
 webpack.config.js

demo-site/_config.yml

@@ -1,3 +1,5 @@
+exclude: []
+
 layouts_dir: 'node_modules/abas-demo-site/dist'
 
 package_name: React Keyed File Browser

demo-site/demos.jsx

@@ -1,5 +1,6 @@
 import { init } from 'abas-demo-site'
 
 import FlatSimpleDemo from './flat-simple.jsx'
+import NestedTableDemo from './nested-table.jsx'
 
 init();

demo-site/demos.sass

@@ -1,2 +1,7 @@
 @import 'node_modules/abas-demo-site/dist/abas-demo-site'
-@import 'node_modules/react-keyed-file-browser/dist/react-keyed-file-browser'
+
+$main-colour: #c12f3c
+@import 'node_modules/react-keyed-file-browser/src/browser'
+
+$fa-font-path: '../node_modules/font-awesome/fonts'
+@import 'node_modules/font-awesome/scss/font-awesome'

demo-site/flat-simple.jsx

@@ -1,54 +1,30 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
+import Moment from 'moment'
 
 import FileBrowser from 'react-keyed-file-browser'
 
-class SimpleFlatDemo extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      ...this.state,
-
-      visible: true,
-    };
-  }
-
-  render() {
-    var browser;
-    if (this.state.visible) {
-      browser = (
-        <FileBrowser
-          loading={false}
-          files={[
-            {key: 'cat.png', size: 1.5 * 1024 * 1024},
-            {key: 'kitten.png', size: 545 * 1024},
-          ]}
-        />
-      );
-    }
-    else {
-      browser = (<p>Hidden</p>);
-    }
-
-    return (
-      <div>
-        <input
-          ref="visible"
-          type="checkbox"
-          checked={this.state.visible}
-          onChange={(event) => {
-            this.setState({visible: this.refs.visible.checked});
-          }}
-        />
-        {browser}
-      </div>
-    );
-  }
-}
-
 var mount = document.querySelectorAll('div.demo-mount-flat-simple');
 ReactDOM.render(
-  <SimpleFlatDemo />,
+  <FileBrowser
+    loading={false}
+    files={[
+      {
+        key: 'cat.png',
+        modified: +Moment().subtract(1, 'hours'),
+        size: 1.5 * 1024 * 1024
+      },
+      {
+        key: 'kitten.png',
+        modified: +Moment().subtract(3, 'days'),
+        size: 545 * 1024
+      },
+      {
+        key: 'elephant.png',
+        modified: +Moment().subtract(3, 'days'),
+        size: 52 * 1024
+      },
+    ]}
+  />,
   mount[0]
 );

demo-site/index.html

@@ -22,4 +22,15 @@ <h2>Simple Flat &amp; Read-Only Example</h2>
     class="script"
     data-source="{{ site.baseurl }}/flat-simple.jsx"
   >Loading ...</code>
+
+  <h2>Nested Table with Event Handlers</h2>
+  <p>In this example, the files are contained within common folders as indicated by the forward
+  slash in the file keys.</p>
+  <p>Simple event handlers are also provided as props to the browser, which turns on the editing
+  buttons.</p>
+  <div class="demo-mount-nested-table"></div>
+  <code
+    class="script"
+    data-source="{{ site.baseurl }}/nested-table.jsx"
+  >Loading ...</code>
 </div>

demo-site/nested-table.jsx

@@ -0,0 +1,108 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Moment from 'moment'
+
+import FileBrowser from 'react-keyed-file-browser'
+
+class NestedTableDemo extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ...this.state,
+
+      files: [
+        {
+          key: 'photos/animals/cat in a hat.png',
+          modified: +Moment().subtract(1, 'hours'),
+          size: 1.5 * 1024 * 1024,
+        },
+        {
+          key: 'photos/animals/kitten_ball.png',
+          modified: +Moment().subtract(3, 'days'),
+          size: 545 * 1024,
+        },
+        {
+          key: 'photos/animals/elephants.png',
+          modified: +Moment().subtract(3, 'days'),
+          size: 52 * 1024,
+        },
+        {
+          key: 'photos/funny fall.gif',
+          modified: +Moment().subtract(2, 'months'),
+          size: 13.2 * 1024 * 1024,
+        },
+        {
+          key: 'photos/holiday.jpg',
+          modified: +Moment().subtract(25, 'days'),
+          size: 85 * 1024,
+        },
+      ],
+    };
+  }
+
+  handleAddFolder() {
+    console.log('adding folder');
+  }
+  handleAddFile() {
+    console.log('adding file');
+  }
+  handleMoveFolder() {
+    console.log('moving folder');
+  }
+  handleMoveFile() {
+    console.log('moving file');
+  }
+  handleRenameFolder() {
+    console.log('renaming folder');
+  }
+  handleRenameFile(oldKey, newKey) {
+    this.setState(state => {
+      var newFiles = [];
+      state.files.map((file) => {
+        if (file.key === oldKey) {
+          newFiles.push({
+            ...file,
+
+            key: newKey,
+          });
+        }
+        else {
+          newFiles.push(file);
+        }
+      });
+      state.files = newFiles;
+      return state;
+    });
+  }
+  handleDeleteFolder() {
+    console.log('deleting folder');
+  }
+  handleDeleteFile() {
+    console.log('deleting file');
+  }
+
+  render() {
+    return (
+      <FileBrowser
+        loading={false}
+        files={this.state.files}
+
+        onAddFolder={this.handleAddFolder.bind(this)}
+        onAddFile={this.handleAddFile.bind(this)}
+        onMoveFolder={this.handleMoveFolder.bind(this)}
+        onMoveFile={this.handleMoveFile.bind(this)}
+        onRenameFolder={this.handleRenameFolder.bind(this)}
+        onRenameFile={this.handleRenameFile.bind(this)}
+        onDeleteFolder={this.handleDeleteFolder.bind(this)}
+        onDeleteFile={this.handleDeleteFile.bind(this)}
+      />
+    );
+  }
+}
+
+var mount = document.querySelectorAll('div.demo-mount-nested-table');
+ReactDOM.render(
+  <NestedTableDemo />,
+  mount[0]
+);

demo-site/package.json

@@ -20,6 +20,7 @@
   "license": "MIT",
   "dependencies": {
     "abas-demo-site": "^1.0.6",
+    "font-awesome": "^4.7.0",
     "moment": "^2.16.0",
     "react": "^0.14.8",
     "react-dom": "^0.14.8"