vhad/react-table
1
0
Fork 0
mirror of https://github.com/gosticks/react-table.git synced 2026-08-13 05:20:26 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Rename sorting->sorted, onSortingChange->onSortedChange, defaultSorting->defaultSorted

Browse Source
This commit is contained in:
Aaron Schwartz
2017-05-10 16:14:51 -07:00
parent 6be71dc4a1
commit e9bdc8e3c6
8 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/defaultProps.js
+3 -3
View File
@@ -19,8 +19,8 @@ export default {
collapseOnPageChange: true,
collapseOnDataChange: true,
freezeWhenExpanded: false,
defaultSorting: [],
showFilters: false,
defaultSorted: [],
defaultFilters: [],
defaultExpanded: {},
defaultFilterMethod: (filter, row, column) => {
@@ -50,7 +50,7 @@ export default {
// Controlled State Props
// page: undefined,
// pageSize: undefined,
// sorting: undefined,
// sorted: [],
// resizing: [],
// expandedRows: {},
@@ -58,7 +58,7 @@ export default {
onExpandSubComponent: undefined,
onPageChange: undefined,
onPageSizeChange: undefined,
onSortingChange: undefined,
onSortedChange: undefined,
onFiltersChange: undefined,
onResize: undefined,
onExpandRow: undefined,
src/index.js
+3 -3
View File
@@ -34,7 +34,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
this.state = {
page: 0,
pageSize: props.defaultPageSize,
sorting: props.defaultSorting,
sorted: props.defaultSorted,
expandedRows: props.defaultExpanded,
filters: props.defaultFilters,
resizing: props.defaultResizing,
@@ -90,7 +90,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
loading,
pageSize,
page,
sorting,
sorted,
filters,
resizing,
pages,
@@ -280,7 +280,7 @@ export default class ReactTable extends Methods(Lifecycle(Component)) {
const makeHeader = (column, i) => {
const resized = resizing.find(x => x.id === column.id) || {}
const sort = sorting.find(d => d.id === column.id)
const sort = sorted.find(d => d.id === column.id)
const show = typeof column.show === 'function' ? column.show() : column.show
const width = _.getFirstDefined(resized.value, column.width, column.minWidth)
const maxWidth = _.getFirstDefined(resized.value, column.width, column.maxWidth)
src/lifecycle.js
+6 -6
View File
@@ -12,8 +12,8 @@ export default Base => class extends Base {
const oldState = this.getResolvedState()
const newState = this.getResolvedState(nextProps, nextState)
if (JSON.stringify(oldState.defaultSorting) !== JSON.stringify(newState.defaultSorting)) {
newState.sorting = newState.defaultSorting
if (JSON.stringify(oldState.defaultSorted) !== JSON.stringify(newState.defaultSorted)) {
newState.sorted = newState.defaultSorted
}
if ((oldState.showFilters !== newState.showFilters) ||
@@ -26,7 +26,7 @@ export default Base => class extends Base {
oldState.data !== newState.data ||
oldState.columns !== newState.columns ||
oldState.pivotBy !== newState.pivotBy ||
oldState.sorting !== newState.sorting ||
oldState.sorted !== newState.sorted ||
oldState.showFilters !== newState.showFilters ||
oldState.filters !== newState.filters
) {
@@ -58,14 +58,14 @@ export default Base => class extends Base {
// sorting model has changed, update the data
if (
(oldState.frozen && !newResolvedState.frozen) ||
oldState.sorting !== newResolvedState.sorting ||
oldState.sorted !== newResolvedState.sorted ||
oldState.filters !== newResolvedState.filters ||
oldState.showFilters !== newResolvedState.showFilters ||
(!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData)
) {
// Handle collapseOnSortingChange & collapseOnDataChange
// Handle collapseOnsortedChange & collapseOnDataChange
if (
(oldState.sorting !== newResolvedState.sorting && this.props.collapseOnSortingChange) ||
(oldState.sorted !== newResolvedState.sorted && this.props.collapseOnSortingChange) ||
(oldState.filters !== newResolvedState.filters) ||
(oldState.showFilters !== newResolvedState.showFilters) ||
(!newResolvedState.frozen && oldState.resolvedData !== newResolvedState.resolvedData && this.props.collapseOnDataChange)
src/methods.js
+32 -32
View File
@@ -270,7 +270,7 @@ export default Base => class extends Base {
getSortedData (resolvedState) {
const {
manual,
sorting,
sorted,
filters,
showFilters,
defaultFilterMethod,
@@ -297,7 +297,7 @@ export default Base => class extends Base {
defaultFilterMethod,
allVisibleColumns
),
sorting,
sorted,
sortMethodsByColumnID
)
}
@@ -366,14 +366,14 @@ export default Base => class extends Base {
return filteredData
}
sortData (data, sorting, sortMethodsByColumnID = {}) {
if (!sorting.length) {
sortData (data, sorted, sortMethodsByColumnID = {}) {
if (!sorted.length) {
return data
}
const sorted = (this.props.orderByMethod || _.orderBy)(
const sortedData = (this.props.orderByMethod || _.orderBy)(
data,
sorting.map(sort => {
sorted.map(sort => {
// Support custom sorting methods for each column
if (sortMethodsByColumnID[sort.id]) {
return (a, b) => {
@@ -384,18 +384,18 @@ export default Base => class extends Base {
return this.props.defaultSortMethod(a[sort.id], b[sort.id])
}
}),
sorting.map(d => !d.desc),
sorted.map(d => !d.desc),
this.props.indexKey
)
sorted.forEach(row => {
sortedData.forEach(row => {
if (!row[this.props.subRowsKey]) {
return
}
row[this.props.subRowsKey] = this.sortData(row[this.props.subRowsKey], sorting, sortMethodsByColumnID)
row[this.props.subRowsKey] = this.sortData(row[this.props.subRowsKey], sorted, sortMethodsByColumnID)
})
return sorted
return sortedData
}
getMinRows () {
@@ -443,7 +443,7 @@ export default Base => class extends Base {
}
sortColumn (column, additive) {
const {sorting, skipNextSort} = this.getResolvedState()
const {sorted, skipNextSort} = this.getResolvedState()
// we can't stop event propagation from the column resize move handlers
// attached to the document because of react's synthetic events
@@ -456,38 +456,38 @@ export default Base => class extends Base {
return
}
const {onSortingChange} = this.props
const {onSortedChange} = this.props
let newSorting = _.clone(sorting || []).map(d => {
let newSorted = _.clone(sorted || []).map(d => {
d.desc = _.isSortingDesc(d)
return d
})
if (!_.isArray(column)) {
// Single-Sort
const existingIndex = newSorting.findIndex(d => d.id === column.id)
const existingIndex = newSorted.findIndex(d => d.id === column.id)
if (existingIndex > -1) {
const existing = newSorting[existingIndex]
const existing = newSorted[existingIndex]
if (existing.desc) {
if (additive) {
newSorting.splice(existingIndex, 1)
newSorted.splice(existingIndex, 1)
} else {
existing.desc = false
newSorting = [existing]
newSorted = [existing]
}
} else {
existing.desc = true
if (!additive) {
newSorting = [existing]
newSorted = [existing]
}
}
} else {
if (additive) {
newSorting.push({
newSorted.push({
id: column.id,
desc: false
})
} else {
newSorting = [{
newSorted = [{
id: column.id,
desc: false
}]
@@ -495,35 +495,35 @@ export default Base => class extends Base {
}
} else {
// Multi-Sort
const existingIndex = newSorting.findIndex(d => d.id === column[0].id)
const existingIndex = newSorted.findIndex(d => d.id === column[0].id)
// Existing Sorted Column
if (existingIndex > -1) {
const existing = newSorting[existingIndex]
const existing = newSorted[existingIndex]
if (existing.desc) {
if (additive) {
newSorting.splice(existingIndex, column.length)
newSorted.splice(existingIndex, column.length)
} else {
column.forEach((d, i) => {
newSorting[existingIndex + i].desc = false
newSorted[existingIndex + i].desc = false
})
}
} else {
column.forEach((d, i) => {
newSorting[existingIndex + i].desc = true
newSorted[existingIndex + i].desc = true
})
}
if (!additive) {
newSorting = newSorting.slice(existingIndex, column.length)
newSorted = newSorted.slice(existingIndex, column.length)
}
} else {
// New Sort Column
if (additive) {
newSorting = newSorting.concat(column.map(d => ({
newSorted = newSorted.concat(column.map(d => ({
id: d.id,
desc: false
})))
} else {
newSorting = column.map(d => ({
newSorted = column.map(d => ({
id: d.id,
desc: false
}))
@@ -531,14 +531,14 @@ export default Base => class extends Base {
}
}
// If controlled, do not keep track of state
onSortingChange && onSortingChange(newSorting, column, additive)
if (typeof this.props.sorting !== 'undefined') {
onSortedChange && onSortedChange(newSorted, column, additive)
if (typeof this.props.sorted !== 'undefined') {
this.fireFetchData()
return
}
this.setStateWithData({
page: ((!sorting.length && newSorting.length) || !additive) ? 0 : this.state.page,
sorting: newSorting
page: ((!sorted.length && newSorted.length) || !additive) ? 0 : this.state.page,
sorted: newSorted
}, () => {
this.fireFetchData()
})
stories/ControlledTable.js
+3 -3
View File
@@ -34,7 +34,7 @@ class Story extends React.Component {
constructor () {
super()
this.state = {
sorting: [],
sorted: [],
page: 0,
pageSize: 10,
expandedRows: {},
@@ -53,14 +53,14 @@ class Story extends React.Component {
pivotBy={['lastName']}
showFilters
// Controlled Props
sorting={this.state.sorting}
sorted={this.state.sorted}
page={this.state.page}
pageSize={this.state.pageSize}
expandedRows={this.state.expandedRows}
resizing={this.state.resizing}
filters={this.state.filters}
// Callbacks
onSortingChange={sorting => this.setState({sorting})}
onSortedChange={sorted => this.setState({sorted})}
onPageChange={page => this.setState({page})}
onPageSizeChange={(pageSize, page) => this.setState({page, pageSize})}
onExpandRow={(expandedRows) => this.setState({expandedRows})}
stories/DefaultSorting.js
+1 -1
View File
@@ -40,7 +40,7 @@ class Story extends React.Component {
data={data}
columns={columns}
defaultPageSize={10}
defaultSorting={[{
defaultSorted={[{
id: 'age',
desc: true
}]}
stories/PivotingOptions.js
+1 -1
View File
@@ -79,7 +79,7 @@ class Story extends React.Component {
defaultPageSize={10}
className='-striped -highlight'
pivotBy={['firstName', 'lastName']}
defaultSorting={[{id: 'firstName', desc: false}, {id: 'lastName', desc: true}]}
defaultSorted={[{id: 'firstName', desc: false}, {id: 'lastName', desc: true}]}
collapseOnSortingChange={false}
showFilters
ExpanderComponent={({isExpanded, ...rest}) => (
stories/ServerSide.js
+4 -4
View File
@@ -13,7 +13,7 @@ const rawData = _.map(_.range(3424), d => {
})
// Now let's mock the server. It's job is simple: use the table model to sort and return the page data
const requestData = (pageSize, page, sorting, filters) => {
const requestData = (pageSize, page, sorted, filters) => {
return new Promise((resolve, reject) => {
// On the server, you'll likely use SQL or noSQL or some other query language to do this.
// For this mock, we'll just use lodash
@@ -28,14 +28,14 @@ const requestData = (pageSize, page, sorting, filters) => {
}
, filteredData)
}
const sortedData = _.orderBy(filteredData, sorting.map(sort => {
const sortedData = _.orderBy(filteredData, sorted.map(sort => {
return row => {
if (row[sort.id] === null || row[sort.id] === undefined) {
return -Infinity
}
return typeof row[sort.id] === 'string' ? row[sort.id].toLowerCase() : row[sort.id]
}
}), sorting.map(d => d.desc ? 'desc' : 'asc'))
}), sorted.map(d => d.desc ? 'desc' : 'asc'))
// Be sure to send back the rows to be displayed and any other pertinent information, like how many pages there are total.
const res = {
@@ -63,7 +63,7 @@ class Story extends React.Component {
// You can set the `loading` prop of the table to true to use the built-in one or show you're own loading bar if you want.
this.setState({loading: true})
// Request the data however you want. Here, we'll use our mocked service we created earlier
requestData(state.pageSize, state.page, state.sorting, state.filters)
requestData(state.pageSize, state.page, state.sorted, state.filters)
.then((res) => {
// Now just get the rows of data to your React Table (and update anything else like total pages or loading)
this.setState({