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}
;