Skip to content

Commit

Permalink
Fixes sortTable default sort
Browse files Browse the repository at this point in the history 
Resolves brave#13721

Auditors:

Test Plan:
  • Loading branch information
@NejcZdovc
NejcZdovc committed Apr 19, 2018
1 parent adbaf7b commit 2109adb
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 30 deletions.
128 changes: 103 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,63 @@ 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) {
if (this.props.rows[i]) {
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
}

this.dimensionCount = count
} 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 +250,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 +353,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 +549,10 @@ class SortableTable extends React.Component {
if (dataType === 'object' && firstEntry.value) {
dataType = typeof firstEntry.value
}
const defaultSort = this.sortingDisabled || heading === this.props.defaultHeading
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 +563,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
19 changes: 14 additions & 5 deletions app/renderer/components/preferences/payment/ledgerTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,29 @@
const React = require('react')
const {StyleSheet, css} = require('aphrodite/no-important')

// components
// Components
const ImmutableComponent = require('../../immutableComponent')
const SortableTable = require('../../common/sortableTable')
const SwitchControl = require('../../common/switchControl')
const BrowserButton = require('../../common/browserButton')
const PinnedInput = require('./pinnedInput')
const {SettingCheckbox, SiteSettingCheckbox} = require('../../common/settings')

// Constants
const settings = require('../../../../../js/constants/settings')

// style
// Style
const globalStyles = require('../../styles/global')
const {paymentStylesVariables} = require('../../styles/payment')
const verifiedGreenIcon = require('../../../../extensions/brave/img/ledger/verified_green_icon.svg')
const verifiedWhiteIcon = require('../../../../extensions/brave/img/ledger/verified_white_icon.svg')
const removeIcon = require('../../../../extensions/brave/img/ledger/icon_remove.svg')
const pinIcon = require('../../../../extensions/brave/img/ledger/icon_pin.svg')

// other
const settings = require('../../../../../js/constants/settings')
// Utils
const getSetting = require('../../../../../js/settings').getSetting
const aboutActions = require('../../../../../js/about/aboutActions')
const urlUtil = require('../../../../../js/lib/urlutil')
const {SettingCheckbox, SiteSettingCheckbox} = require('../../common/settings')
const locale = require('../../../../../js/l10n')
const ledgerUtil = require('../../../../common/lib/ledgerUtil')

Expand Down Expand Up @@ -267,6 +269,12 @@ class LedgerTable extends ImmutableComponent {
]
}

sortCheck (prevRows, currentRows) {
if (prevRows && currentRows) {
return JSON.stringify(prevRows) === JSON.stringify(currentRows)
}
}

render () {
if (!this.synopsis || !this.synopsis.size) {
return null
Expand Down Expand Up @@ -346,6 +354,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

0 comments on commit 2109adb

Please sign in to comment.