From 143acde35ef7b4f35875820381b8da4cf63d79f6 Mon Sep 17 00:00:00 2001 From: AllenFang Date: Sat, 19 May 2018 13:24:15 +0800 Subject: [PATCH] refactoring remote sort --- .../src/contexts/index.js | 26 +++++++--------- .../src/contexts/sort-context.js | 31 ++++++++++--------- .../src/props-resolver/remote-resolver.js | 30 +++++++++--------- 3 files changed, 45 insertions(+), 42 deletions(-) diff --git a/packages/react-bootstrap-table2/src/contexts/index.js b/packages/react-bootstrap-table2/src/contexts/index.js index 6afb979..7267d80 100644 --- a/packages/react-bootstrap-table2/src/contexts/index.js +++ b/packages/react-bootstrap-table2/src/contexts/index.js @@ -1,16 +1,10 @@ /* eslint no-return-assign: 0 */ -/* eslint react/prop-types: 0 */ import React, { Component } from 'react'; -// import Store from './store'; -// import withSort from './sort/wrapper'; -// import withSelection from './row-selection/wrapper'; import createDataContext from './data-context'; import createSortContext from './sort-context'; import createSelectionContext from './selection-context'; - import remoteResolver from '../props-resolver/remote-resolver'; - const withContext = (Base) => { let DataContext; let SelectionContext; @@ -21,40 +15,44 @@ const withContext = (Base) => { super(props); DataContext = createDataContext(this.props.data); SelectionContext = createSelectionContext(); - SortContext = createSortContext(); + SortContext = createSortContext(this.isRemoteSort, this.handleSortChange); } render() { - const { keyField, columns, remote } = this.props; - const baseProps = { keyField, columns, remote }; + const { keyField, columns } = this.props; + const baseProps = { keyField, columns }; return ( - + { - dataProps => ( + rootProps => ( { selectionProps => ( this.sortProvider = n } { ...baseProps } defaultSorted={ this.props.defaultSorted } defaultSortDirection={ this.props.defaultSortDirection } - data={ dataProps } + data={ rootProps.data } > { sortProps => ( ) } diff --git a/packages/react-bootstrap-table2/src/contexts/sort-context.js b/packages/react-bootstrap-table2/src/contexts/sort-context.js index 17d029e..82474d1 100644 --- a/packages/react-bootstrap-table2/src/contexts/sort-context.js +++ b/packages/react-bootstrap-table2/src/contexts/sort-context.js @@ -1,16 +1,20 @@ - +/* eslint react/require-default-props: 0 */ import React from 'react'; import PropTypes from 'prop-types'; import Const from '../const'; import { sort, nextOrder } from '../store/sort'; -import remoteResolver from '../props-resolver/remote-resolver'; -export default () => { +export default ( + isRemoteSort, + handleSortChange +) => { const SortContext = React.createContext(); - class SortProvider extends remoteResolver(React.Component) { + class SortProvider extends React.Component { static propTypes = { + data: PropTypes.array.isRequired, columns: PropTypes.array.isRequired, + children: PropTypes.node.isRequired, defaultSorted: PropTypes.arrayOf(PropTypes.shape({ dataField: PropTypes.string.isRequired, order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired @@ -35,8 +39,8 @@ export default () => { sortColumn.onSort(sortField, sortOrder); } - if (this.isRemoteSort() || this.isRemotePagination()) { - this.handleSortChange(); + if (isRemoteSort()) { + handleSortChange(sortField, sortOrder); } } } @@ -50,20 +54,19 @@ export default () => { column.onSort(column.dataField, sortOrder); } - if (this.isRemoteSort() || this.isRemotePagination()) { - this.handleSortChange(); - } else { - this.setState(() => ({ - sortOrder, - sortColumn: column - })); + if (isRemoteSort()) { + handleSortChange(column.dataField, sortOrder); } + this.setState(() => ({ + sortOrder, + sortColumn: column + })); } render() { let { data } = this.props; const { sortOrder, sortColumn } = this.state; - if (!this.isRemoteSort() && !this.isRemotePagination() && sortColumn) { + if (!isRemoteSort() && sortColumn) { data = sort(data, sortOrder, sortColumn); } diff --git a/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js index 6a44e57..dd3d665 100644 --- a/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js +++ b/packages/react-bootstrap-table2/src/props-resolver/remote-resolver.js @@ -2,17 +2,19 @@ import _ from '../utils'; export default ExtendBase => class RemoteResolver extends ExtendBase { + /* eslint class-methods-use-this: 0 */ getNewestState(state = {}) { - const store = this.store || this.props.store; - return { - page: store.page, - sizePerPage: store.sizePerPage, - filters: store.filters, - sortField: store.sortField, - sortOrder: store.sortOrder, - data: store.getAllData(), - ...state - }; + // const store = this.store || this.props.store; + // return { + // page: store.page, + // sizePerPage: store.sizePerPage, + // filters: store.filters, + // sortField: store.sortField, + // sortOrder: store.sortOrder, + // data: store.getAllData(), + // ...state + // }; + return { ...state, data: this.props.data }; } isRemotePagination() { @@ -25,9 +27,9 @@ export default ExtendBase => return remote === true || (_.isObject(remote) && remote.filter); } - isRemoteSort() { + isRemoteSort = () => { const { remote } = this.props; - return remote === true || (_.isObject(remote) && remote.sort); + return remote === true || (_.isObject(remote) && remote.sort) || this.isRemotePagination(); } isRemoteCellEdit() { @@ -48,8 +50,8 @@ export default ExtendBase => this.props.onTableChange('filter', this.getNewestState(newState)); } - handleSortChange() { - this.props.onTableChange('sort', this.getNewestState()); + handleSortChange = (sortField, sortOrder) => { + this.props.onTableChange('sort', this.getNewestState({ sortField, sortOrder })); } handleCellChange(rowId, dataField, newValue) {