Refactor HOCs to /src/hoc

Still have to write the HOCReadme.md (still just a placeholder for now)

docs/package.json

@@ -10,6 +10,15 @@
     "babel-preset-react": "6.11.1",
     "babel-preset-stage-2": "6.13.0",
     "eslint": "^4.1.1",
+    "eslint-config-standard": "^10.2.1",
+    "eslint-plugin-class-property": "^1.0.6",
+    "eslint-plugin-import": "^2.8.0",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
+    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-promise": "^3.6.0",
+    "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-standard": "^3.0.1",
+    "html-element-attributes": "^1.3.0",
     "match-sorter": "^1.8.0",
     "npm-run-all": "^3.1.1",
     "onchange": "^3.0.2",

docs/src/App.js

@@ -1,3 +1,5 @@
+/* eslint-disable */
+
 import React from 'react'
 //
 import ReactStory, { defaultProps } from 'react-story'
@@ -6,18 +8,20 @@ import './stories/utils/prism.css'
 import '../../react-table.css'
 
 import Readme from './stories/Readme.js'
+import HOCReadme from './stories/HOCReadme.js'
 
-import { TreeTable, CheckboxTable } from './examples/index'
+import { TreeTable, SelectTable } from './examples/index'
 
 const exampleStories = [
   // examples
   { name: 'TreeTable', component: TreeTable },
-  { name: 'CheckboxTable', component: CheckboxTable },
-];
+  { name: 'SelectTable', component: SelectTable },
+]
 
 const stories = [
   { name: 'Readme', component: Readme },
-  
+  { name: 'HOC Readme', component: HOCReadme },
+
   { name: 'Simple Table', component: CodeSandbox('X6npLXPRW') },
   {
     name: 'Cell Renderers & Custom Components',

docs/src/examples/index.js

@@ -1,8 +1,9 @@
+/* eslint-disable */
 
-import TreeTable from './treetable';
-import CheckboxTable from './checkbox';
+import TreeTable from './treetable'
+import SelectTable from './selecttable'
 
 export {
   TreeTable,
-  CheckboxTable,
+  SelectTable,
 }

docs/src/examples/selecttable/index.js

@@ -5,9 +5,9 @@ import shortid from 'shortid';
 import ReactTable from '../../../../lib/index'
 import '../../../../react-table.css'
 
-import checkboxTableHOC from './checkboxHOC';
+import selectTableHOC from '../../../../lib/hoc/selectTable'
 
-const CheckboxTable = checkboxTableHOC(ReactTable);
+const SelectTable = selectTableHOC(ReactTable);
 
 async function getData()
 {
@@ -46,6 +46,7 @@ export class ComponentTest extends React.Component {
       columns: null,
       selection: [],
       selectAll: false,
+      selectType: 'radio',
     };
   }
   componentDidMount()
@@ -62,23 +63,29 @@ export class ComponentTest extends React.Component {
       Other implementations could use object keys, a Javascript Set, or Redux... etc.
     */
     // start off with the existing state
-    let selection = [
-      ...this.state.selection
-    ];
-    const keyIndex = selection.indexOf(key);
-    // check to see if the key exists
-    if(keyIndex>=0) {
-      // it does exist so we will remove it using destructing
-      selection = [
-        ...selection.slice(0,keyIndex),
-        ...selection.slice(keyIndex+1)
-      ]
+    if (this.state.selectType === 'radio') {
+      let selection = [];
+      if (selection.indexOf(key)<0) selection.push(key);
+      this.setState({selection});
     } else {
-      // it does not exist so add it
-      selection.push(key);
+      let selection = [
+        ...this.state.selection
+      ];
+      const keyIndex = selection.indexOf(key);
+      // check to see if the key exists
+      if(keyIndex>=0) {
+        // it does exist so we will remove it using destructing
+        selection = [
+          ...selection.slice(0,keyIndex),
+          ...selection.slice(keyIndex+1)
+        ]
+      } else {
+        // it does not exist so add it
+        selection.push(key);
+      }
+      // update the state
+      this.setState({selection});
     }
-    // update the state
-    this.setState({selection});
   }
   toggleAll = () => {
     /*
@@ -125,24 +132,29 @@ export class ComponentTest extends React.Component {
   logSelection = () => {
     console.log('selection:',this.state.selection);
   }
+  toggleType = () => {
+    this.setState({ selectType: this.state.selectType === 'radio' ? 'checkbox' : 'radio', selection: [], selectAll: false, });
+  }
   render(){
-    const { toggleSelection, toggleAll, isSelected, logSelection } = this;
-    const { data, columns, selectAll } = this.state;
+    const { toggleSelection, toggleAll, isSelected, logSelection, toggleType, } = this;
+    const { data, columns, selectAll, selectType } = this.state;
     const extraProps = 
     {
       selectAll,
       isSelected,
       toggleAll,
       toggleSelection,
+      selectType,
     }
     return (
       <div style={{ padding: '10px'}}>
         <h1>react-table - Checkbox Table</h1>
+        <button onClick={toggleType}>Select Type: <strong>{selectType}</strong></button>
         <button onClick={logSelection}>Log Selection to Console</button>
         {` (${this.state.selection.length}) selected`}
         {
           data?
-          <CheckboxTable
+          <SelectTable
             data={data}
             columns={columns}
             ref={(r)=>this.checkboxTable = r}

docs/src/examples/treetable/index.js

@@ -4,7 +4,7 @@ import React from 'react';
 import ReactTable from '../../../../lib/index'
 import '../../../../react-table.css'
 
-import treeTableHOC from './treeTableHOC';
+import treeTableHOC from '../../../../lib/hoc/treeTable'
 
 async function getData()
 {

docs/src/stories/HOCReadme.js

@@ -0,0 +1,23 @@
+/* eslint-disable  */
+import React from 'react'
+import marked from 'marked'
+//
+import HOCReadme from '!raw!../../../src/hoc/README.md'
+import 'github-markdown-css/github-markdown.css'
+import './utils/prism.js'
+
+export default class HOCStory extends React.Component {
+  render () {
+    return (
+      <div style={{ padding: '10px' }}>
+        <span
+          className='markdown-body'
+          dangerouslySetInnerHTML={{ __html: marked(HOCReadme) }}
+        />
+      </div>
+    )
+  }
+  componentDidMount () {
+    global.Prism && global.Prism.highlightAll()
+  }
+}

docs/yarn.lock

@@ -2417,7 +2417,7 @@ eslint-config-standard-jsx@4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/eslint-config-standard-jsx/-/eslint-config-standard-jsx-4.0.2.tgz#009e53c4ddb1e9ee70b4650ffe63a7f39f8836e1"
 
-eslint-config-standard@10.2.1:
+eslint-config-standard@10.2.1, eslint-config-standard@^10.2.1:
   version "10.2.1"
   resolved "https://registry.yarnpkg.com/eslint-config-standard/-/eslint-config-standard-10.2.1.tgz#c061e4d066f379dc17cd562c64e819b4dd454591"
 
@@ -2492,7 +2492,7 @@ eslint-plugin-import@2.0.1:
     minimatch "^3.0.3"
     pkg-up "^1.0.0"
 
-eslint-plugin-import@^2.7.0:
+eslint-plugin-import@^2.7.0, eslint-plugin-import@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.8.0.tgz#fa1b6ef31fcb3c501c09859c1b86f1fc5b986894"
   dependencies:
@@ -2545,6 +2545,15 @@ eslint-plugin-jsx-a11y@^6.0.2:
     emoji-regex "^6.1.0"
     jsx-ast-utils "^1.4.0"
 
+eslint-plugin-node@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-5.2.1.tgz#80df3253c4d7901045ec87fa660a284e32bdca29"
+  dependencies:
+    ignore "^3.3.6"
+    minimatch "^3.0.4"
+    resolve "^1.3.3"
+    semver "5.3.0"
+
 eslint-plugin-node@~4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/eslint-plugin-node/-/eslint-plugin-node-4.2.2.tgz#82959ca9aed79fcbd28bb1b188d05cac04fb3363"
@@ -2555,6 +2564,10 @@ eslint-plugin-node@~4.2.2:
     resolve "^1.1.7"
     semver "5.3.0"
 
+eslint-plugin-promise@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.6.0.tgz#54b7658c8f454813dc2a870aff8152ec4969ba75"
+
 eslint-plugin-promise@~3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-promise/-/eslint-plugin-promise-3.5.0.tgz#78fbb6ffe047201627569e85a6c5373af2a68fca"
@@ -2585,7 +2598,7 @@ eslint-plugin-react@~6.10.0:
     jsx-ast-utils "^1.3.4"
     object.assign "^4.0.4"
 
-eslint-plugin-standard@~3.0.1:
+eslint-plugin-standard@^3.0.1, eslint-plugin-standard@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/eslint-plugin-standard/-/eslint-plugin-standard-3.0.1.tgz#34d0c915b45edc6f010393c7eef3823b08565cf2"
 
@@ -3479,6 +3492,10 @@ html-element-attributes@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/html-element-attributes/-/html-element-attributes-1.2.0.tgz#8b1c7aaf94353fd9b455c27ec7ebaf1583e29fd0"
 
+html-element-attributes@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/html-element-attributes/-/html-element-attributes-1.3.0.tgz#f06ebdfce22de979db82020265cac541fb17d4fc"
+
 html-encoding-sniffer@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8"
@@ -3612,6 +3629,10 @@ ignore@^3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.3.tgz#432352e57accd87ab3110e82d3fea0e47812156d"
 
+ignore@^3.3.6:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.7.tgz#612289bfb3c220e186a58118618d5be8c1bab021"
+
 imurmurhash@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
@@ -6113,6 +6134,12 @@ resolve@^1.1.6, resolve@^1.1.7, resolve@^1.2.0:
   dependencies:
     path-parse "^1.0.5"
 
+resolve@^1.3.3:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+  dependencies:
+    path-parse "^1.0.5"
+
 restore-cursor@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-1.0.1.tgz#34661f46886327fed2991479152252df92daa541"
@@ -6322,6 +6349,10 @@ shellwords@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b"
 
+shortid@^2.2.8:
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/shortid/-/shortid-2.2.8.tgz#033b117d6a2e975804f6f0969dbe7d3d0b355131"
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"

src/hoc/README.md

@@ -0,0 +1,6 @@
+
+# This is the readme for HOCs with ReactTable
+
+## TO DO
+- Document the HOCs
+- Document the standard for writing HOCs with ReactTable

src/hoc/selectTable/index.js

@@ -1,4 +1,4 @@
-
+/* eslint-disable */
 
 import React from 'react';
 
@@ -13,7 +13,7 @@ export default (Component) => {
       const checked = this.props.isSelected(row[this.props.keyField]);
       return (
         <input 
-          type='checkbox' 
+          type={this.props.selectType} 
           checked={checked} 
           onClick={(e)=>{
             const { shiftKey } = e;
@@ -28,10 +28,11 @@ export default (Component) => {
 
     headSelector = (row) =>
     {
+      if (this.props.selectType === 'radio') return null;
       const checked = this.props.selectAll;
       return (
         <input 
-          type='checkbox' 
+          type={this.props.selectType} 
           checked={checked} 
           onClick={(e)=>{
             e.stopPropagation();
@@ -82,6 +83,7 @@ export default (Component) => {
     selectAll: false,
     toggleSelection: (key, shift, row)=>{ console.log('No toggleSelection handler provided:', { key, shift, row }) },
     toggleAll: () => { console.log('No toggleAll handler provided.') },
+    selectType: 'radio',
   }
   
   return wrapper;

src/hoc/treeTable/index.js

@@ -1,6 +1,6 @@
+/* eslint-disable */
 
-
-import React from 'react';
+import React from 'react'
 
 export default (Component) => {
   const wrapper = (componentProps) => {
@@ -13,7 +13,7 @@ export default (Component) => {
         cell.props.style.width = '100%';
         cell.props.style.maxWidth = 'unset';
         cell.props.style.paddingLeft = `${componentProps.treeTableIndent*ri.level}px`;
-        cell.props.style.backgroundColor = '#DDD';
+        // cell.props.style.backgroundColor = '#DDD';
         cell.props.style.borderBottom = '1px solid rgba(128,128,128,0.2)';
         
         return <div {...rest}>{cell}</div>;