vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2026-06-28 17:10:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: Fix index.js linter errors

Browse Source
This commit is contained in:
Will Olson
2017-11-22 10:04:26 -08:00
parent 80aa2ea7f4
commit ed6dd5af4c
1 changed files with 235 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

468
src/index.js
View File

@@ -141,27 +141,25 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const hasColumnFooter = allVisibleColumns.some(d => d.Footer)
const hasFilters = filterable || allVisibleColumns.some(d => d.filterable)
const recurseRowsViewIndex = (rows, path = [], index = -1) => {
return [
rows.map((row, i) => {
index++
const rowWithViewIndex = {
...row,
_viewIndex: index,
}
const newPath = path.concat([i])
if (rowWithViewIndex[subRowsKey] && _.get(expanded, newPath)) {
;[rowWithViewIndex[subRowsKey], index] = recurseRowsViewIndex(
rowWithViewIndex[subRowsKey],
newPath,
index
)
}
return rowWithViewIndex
}),
index,
]
}
const recurseRowsViewIndex = (rows, path = [], index = -1) => ([
rows.map((row, i) => {
index += 1
const rowWithViewIndex = {
...row,
_viewIndex: index,
}
const newPath = path.concat([i])
if (rowWithViewIndex[subRowsKey] && _.get(expanded, newPath)) {
[rowWithViewIndex[subRowsKey], index] = recurseRowsViewIndex(
rowWithViewIndex[subRowsKey],
newPath,
index,
)
}
return rowWithViewIndex
}),
index,
])
;[pageRows] = recurseRowsViewIndex(pageRows)
const canPrevious = page > 0
@@ -171,7 +169,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
allVisibleColumns.map(d => {
const resizedColumn = resized.find(x => x.id === d.id) || {}
return _.getFirstDefined(resizedColumn.value, d.width, d.minWidth)
})
}),
)
let rowIndex = -1
@@ -189,59 +187,45 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
rowMinWidth,
}
// Visual Components
const rootProps = _.splitProps(
getProps(finalState, undefined, undefined, this),
)
const tableProps = _.splitProps(
getTableProps(finalState, undefined, undefined, this),
)
const tBodyProps = _.splitProps(
getTbodyProps(finalState, undefined, undefined, this),
)
const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
const resizerProps = getResizerProps(finalState, undefined, undefined, this)
const makeHeaderGroups = () => {
const theadGroupProps = _.splitProps(
getTheadGroupProps(finalState, undefined, undefined, this)
)
const theadGroupTrProps = _.splitProps(
getTheadGroupTrProps(finalState, undefined, undefined, this)
)
return (
<TheadComponent
className={classnames('-headerGroups', theadGroupProps.className)}
style={{
...theadGroupProps.style,
minWidth: `${rowMinWidth}px`,
}}
{...theadGroupProps.rest}
>
<TrComponent
className={theadGroupTrProps.className}
style={theadGroupTrProps.style}
{...theadGroupTrProps.rest}
>
{headerGroups.map(makeHeaderGroup)}
</TrComponent>
</TheadComponent>
)
}
// Visual Components
const makeHeaderGroup = (column, i) => {
const resizedValue = col =>
(resized.find(x => x.id === col.id) || {}).value
const flex = _.sum(
column.columns.map(
col => (col.width || resizedValue(col) ? 0 : col.minWidth)
)
col => (col.width || resizedValue(col) ? 0 : col.minWidth),
),
)
const width = _.sum(
column.columns.map(col =>
_.getFirstDefined(resizedValue(col), col.width, col.minWidth)
)
_.getFirstDefined(resizedValue(col), col.width, col.minWidth),
),
)
const maxWidth = _.sum(
column.columns.map(col =>
_.getFirstDefined(resizedValue(col), col.width, col.maxWidth)
)
_.getFirstDefined(resizedValue(col), col.width, col.maxWidth),
),
)
const theadGroupThProps = _.splitProps(
getTheadGroupThProps(finalState, undefined, column, this)
getTheadGroupThProps(finalState, undefined, column, this),
)
const columnHeaderProps = _.splitProps(
column.getHeaderProps(finalState, undefined, column, this)
column.getHeaderProps(finalState, undefined, column, this),
)
const classes = [
@@ -269,7 +253,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
return (
<ThComponent
key={i + '-' + column.id}
key={`${i}-${column.id}`}
className={classnames(classes)}
style={{
...styles,
@@ -279,34 +263,34 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
>
{_.normalizeComponent(column.Header, {
data: sortedData,
column: column,
column,
})}
</ThComponent>
)
}
const makeHeaders = () => {
const theadProps = _.splitProps(
getTheadProps(finalState, undefined, undefined, this)
const makeHeaderGroups = () => {
const theadGroupProps = _.splitProps(
getTheadGroupProps(finalState, undefined, undefined, this),
)
const theadTrProps = _.splitProps(
getTheadTrProps(finalState, undefined, undefined, this)
const theadGroupTrProps = _.splitProps(
getTheadGroupTrProps(finalState, undefined, undefined, this),
)
return (
<TheadComponent
className={classnames('-header', theadProps.className)}
className={classnames('-headerGroups', theadGroupProps.className)}
style={{
...theadProps.style,
...theadGroupProps.style,
minWidth: `${rowMinWidth}px`,
}}
{...theadProps.rest}
{...theadGroupProps.rest}
>
<TrComponent
className={theadTrProps.className}
style={theadTrProps.style}
{...theadTrProps.rest}
className={theadGroupTrProps.className}
style={theadGroupTrProps.style}
{...theadGroupTrProps.rest}
>
{allVisibleColumns.map(makeHeader)}
{headerGroups.map(makeHeaderGroup)}
</TrComponent>
</TheadComponent>
)
@@ -320,18 +304,18 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const width = _.getFirstDefined(
resizedCol.value,
column.width,
column.minWidth
column.minWidth,
)
const maxWidth = _.getFirstDefined(
resizedCol.value,
column.width,
column.maxWidth
column.maxWidth,
)
const theadThProps = _.splitProps(
getTheadThProps(finalState, undefined, column, this)
getTheadThProps(finalState, undefined, column, this),
)
const columnHeaderProps = _.splitProps(
column.getHeaderProps(finalState, undefined, column, this)
column.getHeaderProps(finalState, undefined, column, this),
)
const classes = [
@@ -364,7 +348,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
return (
<ThComponent
key={i + '-' + column.id}
key={`${i}-${column.id}`}
className={classnames(
classes,
isResizable && 'rt-resizable-header',
@@ -373,7 +357,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
!show && '-hidden',
pivotBy &&
pivotBy.slice(0, -1).includes(column.id) &&
'rt-header-pivot'
'rt-header-pivot',
)}
style={{
...styles,
@@ -381,15 +365,15 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
width: _.asPx(width),
maxWidth: _.asPx(maxWidth),
}}
toggleSort={e => {
toggleSort={e => (
isSortable && this.sortColumn(column, e.shiftKey)
}}
)}
{...rest}
>
<div className={classnames(isResizable && 'rt-resizable-header-content')}>
{_.normalizeComponent(column.Header, {
data: sortedData,
column: column,
column,
})}
</div>
{resizer}
@@ -397,28 +381,28 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
)
}
const makeFilters = () => {
const theadFilterProps = _.splitProps(
getTheadFilterProps(finalState, undefined, undefined, this)
const makeHeaders = () => {
const theadProps = _.splitProps(
getTheadProps(finalState, undefined, undefined, this),
)
const theadFilterTrProps = _.splitProps(
getTheadFilterTrProps(finalState, undefined, undefined, this)
const theadTrProps = _.splitProps(
getTheadTrProps(finalState, undefined, undefined, this),
)
return (
<TheadComponent
className={classnames('-filters', theadFilterProps.className)}
className={classnames('-header', theadProps.className)}
style={{
...theadFilterProps.style,
...theadProps.style,
minWidth: `${rowMinWidth}px`,
}}
{...theadFilterProps.rest}
{...theadProps.rest}
>
<TrComponent
className={theadFilterTrProps.className}
style={theadFilterTrProps.style}
{...theadFilterTrProps.rest}
className={theadTrProps.className}
style={theadTrProps.style}
{...theadTrProps.rest}
>
{allVisibleColumns.map(makeFilter)}
{allVisibleColumns.map(makeHeader)}
</TrComponent>
</TheadComponent>
)
@@ -429,18 +413,18 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const width = _.getFirstDefined(
resizedCol.value,
column.width,
column.minWidth
column.minWidth,
)
const maxWidth = _.getFirstDefined(
resizedCol.value,
column.width,
column.maxWidth
column.maxWidth,
)
const theadFilterThProps = _.splitProps(
getTheadFilterThProps(finalState, undefined, column, this)
getTheadFilterThProps(finalState, undefined, column, this),
)
const columnHeaderProps = _.splitProps(
column.getHeaderProps(finalState, undefined, column, this)
column.getHeaderProps(finalState, undefined, column, this),
)
const classes = [
@@ -467,12 +451,12 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const isFilterable = _.getFirstDefined(
column.filterable,
filterable,
false
false,
)
return (
<ThComponent
key={i + '-' + column.id}
key={`${i}-${column.id}`}
className={classnames(classes)}
style={{
...styles,
@@ -490,21 +474,48 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
filter,
onChange: value => this.filterColumn(column, value),
},
defaultProps.column.Filter
defaultProps.column.Filter,
)
: null}
</ThComponent>
)
}
const makeFilters = () => {
const theadFilterProps = _.splitProps(
getTheadFilterProps(finalState, undefined, undefined, this),
)
const theadFilterTrProps = _.splitProps(
getTheadFilterTrProps(finalState, undefined, undefined, this),
)
return (
<TheadComponent
className={classnames('-filters', theadFilterProps.className)}
style={{
...theadFilterProps.style,
minWidth: `${rowMinWidth}px`,
}}
{...theadFilterProps.rest}
>
<TrComponent
className={theadFilterTrProps.className}
style={theadFilterTrProps.style}
{...theadFilterTrProps.rest}
>
{allVisibleColumns.map(makeFilter)}
</TrComponent>
</TheadComponent>
)
}
const makePageRow = (row, i, path = []) => {
const rowInfo = {
original: row[originalKey],
row: row,
row,
index: row[indexKey],
viewIndex: ++rowIndex,
pageSize: pageSize,
page: page,
viewIndex: rowIndex += 1,
pageSize,
page,
level: path.length,
nestingPath: path.concat([i]),
aggregated: row[aggregatedKey],
@@ -514,14 +525,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const isExpanded = _.get(expanded, rowInfo.nestingPath)
const trGroupProps = getTrGroupProps(finalState, rowInfo, undefined, this)
const trProps = _.splitProps(
getTrProps(finalState, rowInfo, undefined, this)
getTrProps(finalState, rowInfo, undefined, this),
)
return (
<TrGroupComponent key={rowInfo.nestingPath.join('_')} {...trGroupProps}>
<TrComponent
className={classnames(
trProps.className,
row._viewIndex % 2 ? '-even' : '-odd'
row._viewIndex % 2 ? '-even' : '-odd',
)}
style={trProps.style}
{...trProps.rest}
@@ -533,18 +544,18 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const width = _.getFirstDefined(
resizedCol.value,
column.width,
column.minWidth
column.minWidth,
)
const maxWidth = _.getFirstDefined(
resizedCol.value,
column.width,
column.maxWidth
column.maxWidth,
)
const tdProps = _.splitProps(
getTdProps(finalState, rowInfo, column, this)
getTdProps(finalState, rowInfo, column, this),
)
const columnProps = _.splitProps(
column.getProps(finalState, rowInfo, column, this)
column.getProps(finalState, rowInfo, column, this),
)
const classes = [
@@ -594,10 +605,10 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
{
expanded: newExpanded,
},
() => {
() => (
onExpandedChange &&
onExpandedChange(newExpanded, cellInfo.nestingPath, e)
}
),
)
}
@@ -605,7 +616,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
let resolvedCell = _.normalizeComponent(
column.Cell,
cellInfo,
value
value,
)
// Resolve Renderers
@@ -632,7 +643,8 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
// Make it expandable by defualt
cellInfo.expandable = true
useOnExpanderClick = true
// If pivoted, has no subRows, and does not have a subComponent, do not make expandable
// If pivoted, has no subRows, and does not have a subComponent,
// do not make expandable
if (cellInfo.pivoted && !cellInfo.subRows && !SubComponent) {
cellInfo.expandable = false
}
@@ -655,14 +667,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
...cellInfo,
value: row[pivotValKey],
},
row[pivotValKey]
row[pivotValKey],
)
} else if (isPreview) {
// Show the pivot preview
resolvedCell = _.normalizeComponent(
ResolvedAggregatedComponent,
cellInfo,
value
value,
)
} else {
resolvedCell = null
@@ -671,7 +683,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
resolvedCell = _.normalizeComponent(
ResolvedAggregatedComponent,
cellInfo,
value
value,
)
}
@@ -679,7 +691,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
resolvedCell = _.normalizeComponent(
ResolvedExpanderComponent,
cellInfo,
row[pivotValKey]
row[pivotValKey],
)
if (pivotBy) {
if (cellInfo.groupedByPivot) {
@@ -695,7 +707,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
? onExpanderClick
: () => {}
// If there are multiple onClick events, make sure they don't override eachother. This should maybe be expanded to handle all function attributes
// If there are multiple onClick events, make sure they don't
// override eachother. This should maybe be expanded to handle all
// function attributes
const interactionProps = {
onClick: resolvedOnExpanderClick,
}
@@ -715,12 +729,13 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
// Return the cell
return (
<TdComponent
key={i2 + '-' + column.id}
// eslint-disable-next-line react/no-array-index-key
key={`${i2}-${column.id}`}
className={classnames(
classes,
!show && 'hidden',
cellInfo.expandable && 'rt-expandable',
(isBranch || isPreview) && 'rt-pivot'
(isBranch || isPreview) && 'rt-pivot',
)}
style={{
...styles,
@@ -740,7 +755,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
{rowInfo.subRows &&
isExpanded &&
rowInfo.subRows.map((d, i) =>
makePageRow(d, i, rowInfo.nestingPath)
makePageRow(d, i, rowInfo.nestingPath),
)}
{SubComponent &&
!rowInfo.subRows &&
@@ -750,52 +765,26 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
)
}
const makePadRow = (row, i) => {
const trGroupProps = getTrGroupProps(
finalState,
undefined,
undefined,
this
)
const trProps = _.splitProps(
getTrProps(finalState, undefined, undefined, this)
)
return (
<TrGroupComponent key={i} {...trGroupProps}>
<TrComponent
className={classnames(
'-padRow',
(pageRows.length + i) % 2 ? '-even' : '-odd',
trProps.className
)}
style={trProps.style || {}}
>
{allVisibleColumns.map(makePadColumn)}
</TrComponent>
</TrGroupComponent>
)
}
const makePadColumn = (column, i) => {
const resizedCol = resized.find(x => x.id === column.id) || {}
const show =
typeof column.show === 'function' ? column.show() : column.show
let width = _.getFirstDefined(
const width = _.getFirstDefined(
resizedCol.value,
column.width,
column.minWidth
column.minWidth,
)
let flex = width
let maxWidth = _.getFirstDefined(
const flex = width
const maxWidth = _.getFirstDefined(
resizedCol.value,
column.width,
column.maxWidth
column.maxWidth,
)
const tdProps = _.splitProps(
getTdProps(finalState, undefined, column, this)
getTdProps(finalState, undefined, column, this),
)
const columnProps = _.splitProps(
column.getProps(finalState, undefined, column, this)
column.getProps(finalState, undefined, column, this),
)
const classes = [
@@ -812,7 +801,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
return (
<TdComponent
key={i + '-' + column.id}
key={`${i}-${column.id}`}
className={classnames(classes, !show && 'hidden')}
style={{
...styles,
@@ -827,10 +816,96 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
)
}
const makePadRow = (row, i) => {
const trGroupProps = getTrGroupProps(
finalState,
undefined,
undefined,
this,
)
const trProps = _.splitProps(
getTrProps(finalState, undefined, undefined, this),
)
return (
<TrGroupComponent key={i} {...trGroupProps}>
<TrComponent
className={classnames(
'-padRow',
(pageRows.length + i) % 2 ? '-even' : '-odd',
trProps.className,
)}
style={trProps.style || {}}
>
{allVisibleColumns.map(makePadColumn)}
</TrComponent>
</TrGroupComponent>
)
}
const makeColumnFooter = (column, i) => {
const resizedCol = resized.find(x => x.id === column.id) || {}
const show =
typeof column.show === 'function' ? column.show() : column.show
const width = _.getFirstDefined(
resizedCol.value,
column.width,
column.minWidth,
)
const maxWidth = _.getFirstDefined(
resizedCol.value,
column.width,
column.maxWidth,
)
const tFootTdProps = _.splitProps(
getTfootTdProps(finalState, undefined, undefined, this),
)
const columnProps = _.splitProps(
column.getProps(finalState, undefined, column, this),
)
const columnFooterProps = _.splitProps(
column.getFooterProps(finalState, undefined, column, this),
)
const classes = [
tFootTdProps.className,
column.className,
columnProps.className,
columnFooterProps.className,
]
const styles = {
...tFootTdProps.style,
...column.style,
...columnProps.style,
...columnFooterProps.style,
}
return (
<TdComponent
key={`${i}-${column.id}`}
className={classnames(classes, !show && 'hidden')}
style={{
...styles,
flex: `${width} 0 auto`,
width: _.asPx(width),
maxWidth: _.asPx(maxWidth),
}}
{...columnProps.rest}
{...tFootTdProps.rest}
{...columnFooterProps.rest}
>
{_.normalizeComponent(column.Footer, {
data: sortedData,
column,
})}
</TdComponent>
)
}
const makeColumnFooters = () => {
const tFootProps = getTfootProps(finalState, undefined, undefined, this)
const tFootTrProps = _.splitProps(
getTfootTrProps(finalState, undefined, undefined, this)
getTfootTrProps(finalState, undefined, undefined, this),
)
return (
<TfootComponent
@@ -852,69 +927,9 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
)
}
const makeColumnFooter = (column, i) => {
const resizedCol = resized.find(x => x.id === column.id) || {}
const show =
typeof column.show === 'function' ? column.show() : column.show
const width = _.getFirstDefined(
resizedCol.value,
column.width,
column.minWidth
)
const maxWidth = _.getFirstDefined(
resizedCol.value,
column.width,
column.maxWidth
)
const tFootTdProps = _.splitProps(
getTfootTdProps(finalState, undefined, undefined, this)
)
const columnProps = _.splitProps(
column.getProps(finalState, undefined, column, this)
)
const columnFooterProps = _.splitProps(
column.getFooterProps(finalState, undefined, column, this)
)
const classes = [
tFootTdProps.className,
column.className,
columnProps.className,
columnFooterProps.className,
]
const styles = {
...tFootTdProps.style,
...column.style,
...columnProps.style,
...columnFooterProps.style,
}
return (
<TdComponent
key={i + '-' + column.id}
className={classnames(classes, !show && 'hidden')}
style={{
...styles,
flex: `${width} 0 auto`,
width: _.asPx(width),
maxWidth: _.asPx(maxWidth),
}}
{...columnProps.rest}
{...tFootTdProps.rest}
{...columnFooterProps.rest}
>
{_.normalizeComponent(column.Footer, {
data: sortedData,
column: column,
})}
</TdComponent>
)
}
const makePagination = () => {
const paginationProps = _.splitProps(
getPaginationProps(finalState, undefined, undefined, this)
getPaginationProps(finalState, undefined, undefined, this),
)
return (
<PaginationComponent
@@ -931,19 +946,6 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
)
}
const rootProps = _.splitProps(
getProps(finalState, undefined, undefined, this)
)
const tableProps = _.splitProps(
getTableProps(finalState, undefined, undefined, this)
)
const tBodyProps = _.splitProps(
getTbodyProps(finalState, undefined, undefined, this)
)
const loadingProps = getLoadingProps(finalState, undefined, undefined, this)
const noDataProps = getNoDataProps(finalState, undefined, undefined, this)
const resizerProps = getResizerProps(finalState, undefined, undefined, this)
const makeTable = () => {
const pagination = makePagination()
return (
@@ -956,14 +958,14 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
{...rootProps.rest}
>
{showPagination && showPaginationTop
? <div className='pagination-top'>
? <div className="pagination-top">
{pagination}
</div>
: null}
<TableComponent
className={classnames(
tableProps.className,
currentlyResizing ? 'rt-resizing' : ''
currentlyResizing ? 'rt-resizing' : '',
)}
style={tableProps.style}
{...tableProps.rest}
@@ -985,7 +987,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
{hasColumnFooter ? makeColumnFooters() : null}
</TableComponent>
{showPagination && showPaginationBottom
? <div className='pagination-bottom'>
? <div className="pagination-bottom">
{pagination}
</div>
: null}