Skip to content
This repository has been archived by the owner on Dec 11, 2019. It is now read-only.

Commit

Permalink
Merge pull request #14110 from NejcZdovc/fix/#13721-sort2
Browse files Browse the repository at this point in the history 
Fixes sortTable default sort
  • Loading branch information
@bsclifton
bsclifton authored May 14, 2018
2 parents 0afa631 + a7bdaac commit 60ae539
Show file tree
Hide file tree
Showing 4 changed files with 191 additions and 128 deletions.
127 changes: 102 additions & 25 deletions app/renderer/components/common/sortableTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ const globalStyles = require('../styles/global')
// Utils
const cx = require('../../../../js/lib/classSet')
const eventUtil = require('../../../../js/lib/eventUtil')
const ImmutableUtil = require('../../../common/state/immutableUtil')

tableSort.extend('number', (item) => {
return typeof item === 'number'
Expand All @@ -32,16 +33,62 @@ class SortableTable extends React.Component {
}
this.counter = 0
this.sortTable = null
this.dimensionCount = null
}
componentDidMount () {
this.sortTable = tableSort(this.table)
this.sortTable = tableSort(this.table, {
descending: this.props.defaultHeadingSortOrder === 'desc'
})
return this.sortTable
}
componentDidUpdate (prevProps) {
if (this.props.rows &&
(!prevProps.rows ||
prevProps.rows.length !== this.props.rows.length)) {
this.sortTable.refresh()
if (this.isMultiDimensioned) {
let count = 0
if (this.dimensionCount == null && prevProps.rows) {
for (let i = 0; i < prevProps.rows.length; i++) {
if (this.props.rows[i].length > 0) {
count += this.props.rows[i].length
}
}
this.dimensionCount = count
}

if (!this.props.rows) {
this.dimensionCount = null
return
}

count = 0
for (let i = 0; i < this.props.rows.length; i++) {
if (this.props.rows[i].length > 0) {
count += this.props.rows[i].length
}
}

if (count !== this.dimensionCount) {
this.sortTable.refresh()
this.dimensionCount = count
return
}
} else {
if (
this.props.rows &&
(
!prevProps.rows ||
prevProps.rows.length !== this.props.rows.length
)
) {
this.sortTable.refresh()
return
}
}

if (this.props.rows && typeof this.props.sortCheck === 'function') {
const shouldSort = this.props.sortCheck(prevProps.rows, this.props.rows)

if (shouldSort) {
this.sortTable.refresh()
}
}
}
/**
Expand Down Expand Up @@ -202,11 +249,11 @@ class SortableTable extends React.Component {
const tableID = parseInt(tableParts[0])
const rowIndex = parseInt(tableParts[1])
const handlerInput = this.props.totalRowObjects
? (typeof this.props.totalRowObjects[parseInt(tableID)][rowIndex].toJS === 'function'
? (ImmutableUtil.isImmutable(this.props.totalRowObjects[parseInt(tableID)][rowIndex])
? this.props.totalRowObjects[parseInt(tableID)][rowIndex].toJS()
: this.props.totalRowObjects[parseInt(tableID)][rowIndex])
: (this.props.rowObjects.size > 0 || this.props.rowObjects.length > 0)
? (typeof this.props.rowObjects.toJS === 'function'
? (ImmutableUtil.isImmutable(this.props.rowObjects)
? this.props.rowObjects.get(rowIndex).toJS()
: this.props.rowObjects[rowIndex])
: null
Expand Down Expand Up @@ -305,23 +352,51 @@ class SortableTable extends React.Component {
// Object bound to this row. Not passed to multi-select handlers.
if (this.isMultiDimensioned) {
// Object bound to this row. Not passed to multi-select handlers.
handlerInput = this.props.rowObjects[bodyIndex] &&
(this.props.rowObjects[bodyIndex].size > 0 || this.props.rowObjects[bodyIndex].length > 0)
? (typeof this.props.rowObjects[bodyIndex].toJS === 'function'
? this.props.rowObjects[bodyIndex].get(index).toJS()
: (typeof this.props.rowObjects[bodyIndex][index].toJS === 'function'
? this.props.rowObjects[bodyIndex][index].toJS()
: this.props.rowObjects[bodyIndex][index]))
: row
if (
this.props.rowObjects[bodyIndex] &&
(
this.props.rowObjects[bodyIndex].size > 0 ||
this.props.rowObjects[bodyIndex].length > 0
)
) {
let indexObj
if (ImmutableUtil.isImmutable(this.props.rowObjects[bodyIndex])) {
indexObj = this.props.rowObjects[bodyIndex].get(index)
} else {
indexObj = this.props.rowObjects[bodyIndex][index]
}

handlerInput = indexObj

if (ImmutableUtil.isImmutable(indexObj)) {
handlerInput = indexObj.toJS()
}
} else {
handlerInput = row
}
} else {
handlerInput = this.props.rowObjects &&
(this.props.rowObjects.size > 0 || this.props.rowObjects.length > 0)
? (typeof this.props.rowObjects.toJS === 'function'
? this.props.rowObjects.get(index).toJS()
: (typeof this.props.rowObjects[index].toJS === 'function'
? this.props.rowObjects[index].toJS()
: this.props.rowObjects[index]))
: row
if (
this.props.rowObjects &&
(
this.props.rowObjects.size > 0 ||
this.props.rowObjects.length > 0
)
) {
let indexObj
if (ImmutableUtil.isImmutable(this.props.rowObjects)) {
indexObj = this.props.rowObjects.get(index)
} else {
indexObj = this.props.rowObjects[index]
}

handlerInput = indexObj

if (ImmutableUtil.isImmutable(indexObj)) {
handlerInput = indexObj.toJS()
}
} else {
handlerInput = row
}
}

// Allow parent control to optionally specify context
Expand Down Expand Up @@ -473,9 +548,10 @@ class SortableTable extends React.Component {
if (dataType === 'object' && firstEntry.value) {
dataType = typeof firstEntry.value
}
const defaultSort = (this.sortingDisabled || heading === this.props.defaultHeading) || null
const headerClasses = {
'sort-header': true,
'sort-default': this.sortingDisabled || heading === this.props.defaultHeading,
'sort-default': defaultSort,
[css(styles.table__th, this.props.smallRow && styles.table__th_smallRow)]: true
}
const isString = typeof heading === 'string'
Expand All @@ -486,8 +562,9 @@ class SortableTable extends React.Component {
return <th className={cx(headerClasses)}
data-sort-method={sortMethod}
data-sort-order={this.props.defaultHeadingSortOrder}
data-sort-default={defaultSort}
data-test-id={cx({
'sort-default': this.sortingDisabled || heading === this.props.defaultHeading
'sort-default': defaultSort
})}
data-test2-id={heading === 'title' ? 'heading-title' : null}
>
Expand Down
33 changes: 33 additions & 0 deletions app/renderer/components/preferences/payment/ledgerTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,38 @@ class LedgerTable extends ImmutableComponent {
]
}

/**
* Function used for determination if table should be sorted or not
* For comparison we use publisher percentage, number of views and time spent.
* We compare previous values with new values that we received.
* @param prevRows - Previous value for the table
* @param currentRows - New value for the table
* @returns {boolean} - Was something changed and if so let's trigger the sort
*/
sortCheck (prevRows, currentRows) {
if (prevRows && currentRows && currentRows.length === prevRows.length) {
for (let i = 0; i < currentRows.length; i++) {
const newRow = currentRows[i]
const oldRow = prevRows[i]

for (let j = 0; j < newRow.length; j++) {
if (
newRow[j] &&
oldRow[j] &&
newRow[j][5] &&
newRow[j][3] &&
newRow[j][4] &&
(
newRow[j][5].value !== oldRow[j][5].value || // %
newRow[j][3].value !== oldRow[j][3].value || // views
newRow[j][4].value !== oldRow[j][4].value // time
)
) return true
}
}
}
}

render () {
if (!this.synopsis || !this.synopsis.size) {
return null
Expand Down Expand Up @@ -351,6 +383,7 @@ class LedgerTable extends ImmutableComponent {
pinnedRows.map((synopsis) => this.getRow(synopsis)).toJS(),
unPinnedRows.map((synopsis) => this.getRow(synopsis)).toJS()
]}
sortCheck={this.sortCheck}
/>
{
showButton
Expand Down
Loading

0 comments on commit 60ae539

Please sign in to comment.