From 02e65b4388fa583690ec7b8ebd70ce27dc4e320f Mon Sep 17 00:00:00 2001 From: maxime roma Date: Thu, 4 Oct 2018 22:41:24 +0200 Subject: [PATCH] fix linter , update selectTable hoc (#1073) * fix lint on foldable file add options to choose postion of checkbox column * (update hoc): selecttable options parameters position --- src/hoc/foldableTable/index.js | 429 +++++++++++++++++---------------- src/hoc/selectTable/index.js | 6 +- 2 files changed, 221 insertions(+), 214 deletions(-) diff --git a/src/hoc/foldableTable/index.js b/src/hoc/foldableTable/index.js index b6263ea..f10c14c 100644 --- a/src/hoc/foldableTable/index.js +++ b/src/hoc/foldableTable/index.js @@ -1,225 +1,230 @@ -import React from 'react'; -import left from './left.svg'; -import right from './right.svg'; +/* eslint-disable */ + +import React from 'react' +import left from './left.svg' +import right from './right.svg' const defaultFoldIconComponent = ({ collapsed }) => { - const style = { width: 25 }; + const style = { width: 25 } - if (collapsed) - return right - return left + if (collapsed) return right + return left } const defaultFoldButtonComponent = ({ header, collapsed, icon, onClick }) => { - const style = { - marginLeft: "0px", - marginTop: "-5px", - marginBottom: "-8px", - float: "left", - cursor: "pointer" - }; + const style = { + marginLeft: '0px', + marginTop: '-5px', + marginBottom: '-8px', + float: 'left', + cursor: 'pointer', + } - return (
-
- {icon} -
- {!collapsed &&
{header}
} -
); + return ( +
+
+ {icon} +
+ {!collapsed &&
{header}
} +
+ ) } -export default (ReactTable) => { +export default ReactTable => { + const wrapper = class RTFoldableTable extends React.Component { + constructor(props, context) { + super(props, context) - const wrapper = class RTFoldableTable extends React.Component { - constructor(props, context) { - super(props, context); - - this.state = { - folded: props.onFoldChange ? undefined : {}, - resized: props.resized || [] - }; - } - - componentWillReceiveProps(newProps) { - if (this.state.resized !== newProps.resized) - this.setState(p => { return { resized: newProps.resized } }); - } - - onResizedChange = resized => { - const { onResizedChange } = this.props; - if (onResizedChange) - onResizedChange(resized); - else this.setState(p => { return { resized } }); - } - - removeResized = column => { - const { id } = column; - if (!id) return; - - const { resized } = this.state; - if (!resized) return; - - const rs = resized.find(r => r.id === id); - if (!rs) return; - - const newResized = resized.filter(r => r !== rs); - this.onResizedChange(newResized); - } - - // this is so we can expose the underlying ReactTable. - getWrappedInstance = () => { - if (!this.wrappedInstance) console.warn('RTFoldableTable - No wrapped instance'); - if (this.wrappedInstance.getWrappedInstance) return this.wrappedInstance.getWrappedInstance(); - else return this.wrappedInstance - } - - getCopiedKey = key => { - const { foldableOriginalKey } = this.props; - return `${foldableOriginalKey}${key}`; - } - - copyOriginals = column => { - const { FoldedColumn } = this.props; - - //Stop copy if the column already copied - if (column.original_Header) return; - - Object.keys(FoldedColumn).forEach(k => { - const copiedKey = this.getCopiedKey(k); - - if (k === "Cell") - column[copiedKey] = column[k] ? column[k] : c => c.value; - else column[copiedKey] = column[k]; - }); - - //Copy sub Columns - if (column.columns && !column.original_Columns) - column.original_Columns = column.columns; - - //Copy Header - if (!column.original_Header) - column.original_Header = column.Header; - } - - restoreToOriginal = column => { - const { FoldedColumn } = this.props; - - Object.keys(FoldedColumn).forEach(k => { - //ignore header as handling by foldableHeaderRender - if (k === "Header") return; - - const copiedKey = this.getCopiedKey(k); - column[k] = column[copiedKey]; - }); - - if (column.columns && column.original_Columns) - column.columns = column.original_Columns; - } - - getState = () => this.props.onFoldChange ? this.props.folded : this.state.folded; - - isFolded = col => { - const folded = this.getState(); - return folded[col.id] === true; - } - - foldingHandler = col => { - if (!col || !col.id) return; - - const { onFoldChange } = this.props; - const folded = this.getState(); - const { id } = col; - - let newFold = Object.assign({}, folded); - newFold[id] = !newFold[id]; - - //Remove the Resized if have - this.removeResized(col); - - if (onFoldChange) - onFoldChange(newFold); - else this.setState(previous => { return { folded: newFold }; }); - } - - foldableHeaderRender = (cell) => { - const { FoldButtonComponent, FoldIconComponent } = this.props; - const { column } = cell; - const collapsed = this.isFolded(column); - const icon = React.createElement(FoldIconComponent, { collapsed }); - const onClick = () => this.foldingHandler(column); - - return React.createElement(FoldButtonComponent, { header: column.original_Header, collapsed, icon, onClick }); - } - - applyFoldableForColumn = column => { - const collapsed = this.isFolded(column); - const { FoldedColumn } = this.props; - - //Handle Column Header - if (column.columns) { - if (collapsed) { - column.columns = [FoldedColumn]; - column.width = FoldedColumn.width; - column.style = FoldedColumn.style; - } - else this.restoreToOriginal(column); - } - //Handle Normal Column. - else if (collapsed) - column = Object.assign(column, FoldedColumn); - else { - this.restoreToOriginal(column); - } - } - - applyFoldableForColumns = columns => { - return columns.map((col, index) => { - if (!col.foldable) return col; - - //If col don't have id then generate id based on index - if (!col.id) - col.id = `col_${index}`; - - this.copyOriginals(col); - //Replace current header with internal header render. - col.Header = c => this.foldableHeaderRender(c); - //apply foldable - this.applyFoldableForColumn(col); - - //return the new column out - return col; - }); - } - - render() { - const { columns: originalCols, FoldButtonComponent, FoldIconComponent, FoldedColumn, ...rest } = this.props; - const columns = this.applyFoldableForColumns([...originalCols]); - - const extra = { - columns, - onResizedChange: this.onResizedChange, - resized: this.state.resized - }; - - return ( - this.wrappedInstance = r} /> - ) - } + this.state = { + folded: props.onFoldChange ? undefined : {}, + resized: props.resized || [], + } } - wrapper.displayName = 'RTFoldableTable'; - wrapper.defaultProps = - { - FoldIconComponent: defaultFoldIconComponent, - FoldButtonComponent: defaultFoldButtonComponent, - foldableOriginalKey: 'original_', - FoldedColumn: { - Cell: c => '', - width: 30, - sortable: false, - resizable: false, - filterable: false, - } - } + componentWillReceiveProps(newProps) { + if (this.state.resized !== newProps.resized) { + this.setState(p => ({ resized: newProps.resized })) + } + } - return wrapper; -} \ No newline at end of file + onResizedChange = resized => { + const { onResizedChange } = this.props + if (onResizedChange) onResizedChange(resized) + else { + this.setState(p => ({ resized })) + } + } + + removeResized = column => { + const { id } = column + if (!id) return + + const { resized } = this.state + if (!resized) return + + const rs = resized.find(r => r.id === id) + if (!rs) return + + const newResized = resized.filter(r => r !== rs) + this.onResizedChange(newResized) + } + + // this is so we can expose the underlying ReactTable. + getWrappedInstance = () => { + if (!this.wrappedInstance) console.warn('RTFoldableTable - No wrapped instance') + if (this.wrappedInstance.getWrappedInstance) return this.wrappedInstance.getWrappedInstance() + return this.wrappedInstance + } + + getCopiedKey = key => { + const { foldableOriginalKey } = this.props + return `${foldableOriginalKey}${key}` + } + + copyOriginals = column => { + const { FoldedColumn } = this.props + + // Stop copy if the column already copied + if (column.original_Header) return + + Object.keys(FoldedColumn).forEach(k => { + const copiedKey = this.getCopiedKey(k) + + if (k === 'Cell') column[copiedKey] = column[k] ? column[k] : c => c.value + else column[copiedKey] = column[k] + }) + + // Copy sub Columns + if (column.columns && !column.original_Columns) column.original_Columns = column.columns + + // Copy Header + if (!column.original_Header) column.original_Header = column.Header + } + + restoreToOriginal = column => { + const { FoldedColumn } = this.props + + Object.keys(FoldedColumn).forEach(k => { + // ignore header as handling by foldableHeaderRender + if (k === 'Header') return + + const copiedKey = this.getCopiedKey(k) + column[k] = column[copiedKey] + }) + + if (column.columns && column.original_Columns) column.columns = column.original_Columns + } + + getState = () => (this.props.onFoldChange ? this.props.folded : this.state.folded) + + isFolded = col => { + const folded = this.getState() + return folded[col.id] === true + } + + foldingHandler = col => { + if (!col || !col.id) return + + const { onFoldChange } = this.props + const folded = this.getState() + const { id } = col + + const newFold = Object.assign({}, folded) + newFold[id] = !newFold[id] + + // Remove the Resized if have + this.removeResized(col) + + if (onFoldChange) onFoldChange(newFold) + else { + this.setState(previous => ({ folded: newFold })) + } + } + + foldableHeaderRender = cell => { + const { FoldButtonComponent, FoldIconComponent } = this.props + const { column } = cell + const collapsed = this.isFolded(column) + const icon = React.createElement(FoldIconComponent, { collapsed }) + const onClick = () => this.foldingHandler(column) + + return React.createElement(FoldButtonComponent, { + header: column.original_Header, + collapsed, + icon, + onClick, + }) + } + + applyFoldableForColumn = column => { + const collapsed = this.isFolded(column) + const { FoldedColumn } = this.props + + // Handle Column Header + if (column.columns) { + if (collapsed) { + column.columns = [FoldedColumn] + column.width = FoldedColumn.width + column.style = FoldedColumn.style + } else this.restoreToOriginal(column) + } + // Handle Normal Column. + else if (collapsed) column = Object.assign(column, FoldedColumn) + else { + this.restoreToOriginal(column) + } + } + + applyFoldableForColumns = columns => + columns.map((col, index) => { + if (!col.foldable) return col + + // If col don't have id then generate id based on index + if (!col.id) col.id = `col_${index}` + + this.copyOriginals(col) + // Replace current header with internal header render. + col.Header = c => this.foldableHeaderRender(c) + // apply foldable + this.applyFoldableForColumn(col) + + // return the new column out + return col + }) + + render() { + const { + columns: originalCols, + FoldButtonComponent, + FoldIconComponent, + FoldedColumn, + ...rest + } = this.props + const columns = this.applyFoldableForColumns([...originalCols]) + + const extra = { + columns, + onResizedChange: this.onResizedChange, + resized: this.state.resized, + } + + return (this.wrappedInstance = r)} /> + } + } + + wrapper.displayName = 'RTFoldableTable' + wrapper.defaultProps = { + FoldIconComponent: defaultFoldIconComponent, + FoldButtonComponent: defaultFoldButtonComponent, + foldableOriginalKey: 'original_', + FoldedColumn: { + Cell: c => '', + width: 30, + sortable: false, + resizable: false, + filterable: false, + }, + } + + return wrapper +} diff --git a/src/hoc/selectTable/index.js b/src/hoc/selectTable/index.js index ec16132..f4fd88b 100644 --- a/src/hoc/selectTable/index.js +++ b/src/hoc/selectTable/index.js @@ -17,7 +17,7 @@ const defaultSelectInputComponent = props => { ) } -export default Component => { +export default (Component, options) => { const wrapper = class RTSelectTable extends React.Component { constructor(props) { super(props) @@ -72,6 +72,7 @@ export default Component => { SelectInputComponent, ...rest } = this.props + const { floatingLeft = false } = options const select = { id: '_selector', accessor: () => 'x', // this value is not important @@ -85,7 +86,8 @@ export default Component => { resizable: false, style: { textAlign: 'center' }, } - const columns = [select, ...originalCols] + + const columns = floatingLeft ? [...originalCols, select] : [select, ...originalCols] const extra = { columns, }