diff --git a/docs/package.json b/docs/package.json
index c33673c..3cc6127 100644
--- a/docs/package.json
+++ b/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",
diff --git a/docs/src/App.js b/docs/src/App.js
index b30973f..9f089e3 100644
--- a/docs/src/App.js
+++ b/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',
diff --git a/docs/src/examples/index.js b/docs/src/examples/index.js
index ffcd74d..53f599d 100644
--- a/docs/src/examples/index.js
+++ b/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,
}
diff --git a/docs/src/examples/checkbox/index.js b/docs/src/examples/selecttable/index.js
similarity index 77%
rename from docs/src/examples/checkbox/index.js
rename to docs/src/examples/selecttable/index.js
index 428fd4d..8f8da87 100644
--- a/docs/src/examples/checkbox/index.js
+++ b/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 (
react-table - Checkbox Table
+
{` (${this.state.selection.length}) selected`}
{
data?
-
this.checkboxTable = r}
diff --git a/docs/src/examples/treetable/index.js b/docs/src/examples/treetable/index.js
index 34ecc51..dc87fa6 100644
--- a/docs/src/examples/treetable/index.js
+++ b/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()
{
diff --git a/docs/src/stories/HOCReadme.js b/docs/src/stories/HOCReadme.js
new file mode 100644
index 0000000..648091d
--- /dev/null
+++ b/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 (
+
+
+
+ )
+ }
+ componentDidMount () {
+ global.Prism && global.Prism.highlightAll()
+ }
+}
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 4345bba..5cbc695 100644
--- a/docs/yarn.lock
+++ b/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"
diff --git a/src/hoc/README.md b/src/hoc/README.md
new file mode 100644
index 0000000..8b49fc3
--- /dev/null
+++ b/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
diff --git a/docs/src/examples/checkbox/checkboxHOC.js b/src/hoc/selectTable/index.js
similarity index 92%
rename from docs/src/examples/checkbox/checkboxHOC.js
rename to src/hoc/selectTable/index.js
index 0dd0091..912c17d 100644
--- a/docs/src/examples/checkbox/checkboxHOC.js
+++ b/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 (
{
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 (
{
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;
diff --git a/docs/src/examples/treetable/treeTableHOC.js b/src/hoc/treeTable/index.js
similarity index 93%
rename from docs/src/examples/treetable/treeTableHOC.js
rename to src/hoc/treeTable/index.js
index 078d808..5254cb6 100644
--- a/docs/src/examples/treetable/treeTableHOC.js
+++ b/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 {cell}
;