-
-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Examples Refactor + multiSort flag (#619)
* chore: Update the devDependencies for the linter * A few HOC examples for react-table. Not really integrated with the whole codesandbox.io approach. * Missing dependency - shortid * Refactor HOCs to /src/hoc Still have to write the HOCReadme.md (still just a placeholder for now) * Refactor complete May need to remove some redundant code * Text change for the HOC samples * Introduced a 'multiSort' flag Defaults to 'true' A 'false' value will turn multi-sort off. * refactor: Fix defaultProps.js linter errors * refactor: Fix lifecycle.js linter errors * refactor: Fix pagination.js linter errors * refactor: Fix propTypes.js linter errors * refactor: Fix utils.js linter errors * refactor: Fix methods.js linter errors * refactor: Fix index.js linter errors * Fix for linter changes + CHANGELOG update
- Loading branch information
1 parent
1cf9e49
commit f74ba3c
Showing
21 changed files
with
1,275 additions
and
375 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| /* eslint-disable */ | ||
|
|
||
| import React from 'react'; | ||
|
|
||
| import ReactTable from '../../../../lib/index' | ||
| import '../../../../react-table.css' | ||
|
|
||
| const data = [ | ||
| {one:"1.1",two:"1.2"}, | ||
| {one:"2.1",two:"2.2"}, | ||
| {one:"3.1",two:"3.2"}, | ||
| {one:"4.1",two:"4.2"}, | ||
| ] | ||
|
|
||
| const columns = [ | ||
| {accessor:'one', Header: 'One'}, | ||
| {accessor:'two', Header: 'Two'}, | ||
| ] | ||
|
|
||
| class ExpanderComponent extends React.Component { | ||
| render() | ||
| { | ||
| return ( | ||
| <div className={`rt-expander ${this.props.isExpanded ? '-open' : ''}`}> | ||
| • | ||
| </div> | ||
| ) | ||
| } | ||
| } | ||
|
|
||
| class SubComponent extends React.Component { | ||
| render() | ||
| { | ||
| return <div>Nothing</div> | ||
| } | ||
| } | ||
|
|
||
| export default class ComponentTest extends React.Component { | ||
| render() | ||
| { | ||
| const rtProps = { | ||
| data, | ||
| columns, | ||
| ExpanderComponent: (props)=><ExpanderComponent {...props} />, | ||
| SubComponent: (props)=><SubComponent {...props} />, | ||
| multiSort: false, | ||
| } | ||
| return ( | ||
| <ReactTable | ||
| {...rtProps} | ||
| /> | ||
| ) | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,11 @@ | ||
| /* eslint-disable */ | ||
|
|
||
| import TreeTable from './treetable'; | ||
| import CheckboxTable from './checkbox'; | ||
| import TreeTable from './treetable' | ||
| import SelectTable from './selecttable' | ||
| import SelectTreeTable from './selecttreetable' | ||
|
|
||
| export { | ||
| TreeTable, | ||
| CheckboxTable, | ||
| SelectTable, | ||
| SelectTreeTable, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,174 @@ | ||
|
|
||
| import React from 'react'; | ||
| import shortid from 'shortid'; | ||
|
|
||
| import ReactTable from '../../../../lib/index' | ||
| import '../../../../react-table.css' | ||
|
|
||
| import selectTableHOC from '../../../../lib/hoc/selectTable' | ||
|
|
||
| const SelectTable = selectTableHOC(ReactTable); | ||
|
|
||
| async function getData() | ||
| { | ||
| const result = await ( await fetch('/au_500_tree.json') ).json(); | ||
| // we are adding a unique ID to the data for tracking the selected records | ||
| return result.map((item)=>{ | ||
| const _id = shortid.generate(); | ||
| return { | ||
| _id, | ||
| ...item, | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| function getColumns(data) | ||
| { | ||
| const columns = []; | ||
| const sample = data[0]; | ||
| for(let key in sample) | ||
| { | ||
| if(key==='_id') continue; | ||
| columns.push({ | ||
| accessor: key, | ||
| Header: key, | ||
| }) | ||
| } | ||
| return columns; | ||
| } | ||
|
|
||
| export class ComponentTest extends React.Component { | ||
| constructor(props) { | ||
| super(props); | ||
| this.state = | ||
| { | ||
| data: null, | ||
| columns: null, | ||
| selection: [], | ||
| selectAll: false, | ||
| selectType: 'checkbox', | ||
| }; | ||
| } | ||
| componentDidMount() | ||
| { | ||
| getData().then((data)=>{ | ||
| const columns = getColumns(data); | ||
| this.setState({ data, columns }); | ||
| }); | ||
| } | ||
| toggleSelection = (key,shift,row) => { | ||
| /* | ||
| Implementation of how to manage the selection state is up to the developer. | ||
| This implementation uses an array stored in the component state. | ||
| Other implementations could use object keys, a Javascript Set, or Redux... etc. | ||
| */ | ||
| // start off with the existing state | ||
| if (this.state.selectType === 'radio') { | ||
| let selection = []; | ||
| if (selection.indexOf(key)<0) selection.push(key); | ||
| this.setState({selection}); | ||
| } else { | ||
| 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}); | ||
| } | ||
| } | ||
| toggleAll = () => { | ||
| /* | ||
| 'toggleAll' is a tricky concept with any filterable table | ||
| do you just select ALL the records that are in your data? | ||
| OR | ||
| do you only select ALL the records that are in the current filtered data? | ||
| The latter makes more sense because 'selection' is a visual thing for the user. | ||
| This is especially true if you are going to implement a set of external functions | ||
| that act on the selected information (you would not want to DELETE the wrong thing!). | ||
| So, to that end, access to the internals of ReactTable are required to get what is | ||
| currently visible in the table (either on the current page or any other page). | ||
| The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped | ||
| ReactTable and then get the internal state and the 'sortedData'. | ||
| That can then be iterrated to get all the currently visible records and set | ||
| the selection state. | ||
| */ | ||
| const selectAll = this.state.selectAll?false:true; | ||
| const selection = []; | ||
| if(selectAll) | ||
| { | ||
| // we need to get at the internals of ReactTable | ||
| const wrappedInstance = this.selectTable.getWrappedInstance(); | ||
| // the 'sortedData' property contains the currently accessible records based on the filter and sort | ||
| const currentRecords = wrappedInstance.getResolvedState().sortedData; | ||
| // we just push all the IDs onto the selection array | ||
| currentRecords.forEach((item)=>{ | ||
| if(item._original) | ||
| { | ||
| selection.push(item._original._id); | ||
| } | ||
| }) | ||
| } | ||
| this.setState({selectAll,selection}) | ||
| } | ||
| isSelected = (key) => { | ||
| /* | ||
| Instead of passing our external selection state we provide an 'isSelected' | ||
| callback and detect the selection state ourselves. This allows any implementation | ||
| for selection (either an array, object keys, or even a Javascript Set object). | ||
| */ | ||
| return this.state.selection.includes(key); | ||
| } | ||
| 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, toggleType } = this; | ||
| const { data, columns, selectAll, selectType } = this.state; | ||
| const extraProps = | ||
| { | ||
| selectAll, | ||
| isSelected, | ||
| toggleAll, | ||
| toggleSelection, | ||
| selectType, | ||
| } | ||
| return ( | ||
| <div style={{ padding: '10px'}}> | ||
| <h1>react-table - Select 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? | ||
| <SelectTable | ||
| data={data} | ||
| columns={columns} | ||
| ref={(r)=>this.selectTable = r} | ||
| className="-striped -highlight" | ||
| {...extraProps} | ||
| /> | ||
| :null | ||
| } | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ComponentTest; |
Oops, something went wrong.