From 26f38c54d8c94a58d692eefb920c81da0be537f1 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sun, 15 Oct 2017 20:36:52 +0800 Subject: [PATCH 1/2] allow boostrap table to multiple-sort * Record all values of columns sort order in the table of sortOrder --- .../src/bootstrap-table.js | 2 +- packages/react-bootstrap-table2/src/const.js | 2 ++ .../react-bootstrap-table2/src/header-cell.js | 13 ++++++----- packages/react-bootstrap-table2/src/header.js | 6 ++--- .../react-bootstrap-table2/src/sort-caret.js | 12 +++++++--- .../react-bootstrap-table2/src/store/base.js | 23 +++++++++++++------ .../react-bootstrap-table2/src/store/sort.js | 22 +++++++++++++++++- 7 files changed, 59 insertions(+), 21 deletions(-) diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 2aaf51064..dacb46b80 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -74,7 +74,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
diff --git a/packages/react-bootstrap-table2/src/const.js b/packages/react-bootstrap-table2/src/const.js index 4e100282c..75d81e05a 100644 --- a/packages/react-bootstrap-table2/src/const.js +++ b/packages/react-bootstrap-table2/src/const.js @@ -1,6 +1,8 @@ export default { + SORT_UNSET: 'unset', SORT_ASC: 'asc', SORT_DESC: 'desc', + SORT_UNSORTABLE: 'unsortable', UNABLE_TO_CELL_EDIT: 'none', CLICK_TO_CELL_EDIT: 'click', DBCLICK_TO_CELL_EDIT: 'dbclick', diff --git a/packages/react-bootstrap-table2/src/header-cell.js b/packages/react-bootstrap-table2/src/header-cell.js index 13c672769..36fabb64c 100644 --- a/packages/react-bootstrap-table2/src/header-cell.js +++ b/packages/react-bootstrap-table2/src/header-cell.js @@ -19,7 +19,6 @@ const HeaderCell = (props) => { } = props; const { text, - sort, hidden, headerTitle, headerAlign, @@ -60,7 +59,7 @@ const HeaderCell = (props) => { if (!_.isEmptyObject(cellStyle)) cellAttrs.style = cellStyle; - if (sort) { + if (sortOrder !== Const.SORT_UNSORTABLE) { const customClick = cellAttrs.onClick; cellAttrs.onClick = (e) => { onSort(column); @@ -68,10 +67,10 @@ const HeaderCell = (props) => { }; cellAttrs.className = cs(cellAttrs.className, 'sortable'); - if (sorting) { - sortSymbol = ; - } else { + if (sortOrder === Const.SORT_UNSET) { sortSymbol = ; + } else { + sortSymbol = ; } } @@ -106,7 +105,9 @@ HeaderCell.propTypes = { index: PropTypes.number.isRequired, onSort: PropTypes.func, sorting: PropTypes.bool, - sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]) + sortOrder: PropTypes.oneOf([ + Const.SORT_UNSET, Const.SORT_ASC, Const.SORT_DESC, Const.SORT_UNSORTABLE + ]) }; export default HeaderCell; diff --git a/packages/react-bootstrap-table2/src/header.js b/packages/react-bootstrap-table2/src/header.js index 8953c637b..c8c892138 100644 --- a/packages/react-bootstrap-table2/src/header.js +++ b/packages/react-bootstrap-table2/src/header.js @@ -13,7 +13,7 @@ const Header = (props) => { columns, onSort, sortField, - sortOrder, + sortOrderTable, selectRow } = props; @@ -33,7 +33,7 @@ const Header = (props) => { column={ column } onSort={ onSort } sorting={ currSort } - sortOrder={ sortOrder } + sortOrder={ sortOrderTable[column.dataField] } />); }) } @@ -46,7 +46,7 @@ Header.propTypes = { columns: PropTypes.array.isRequired, onSort: PropTypes.func, sortField: PropTypes.string, - sortOrder: PropTypes.string, + sortOrderTable: PropTypes.object, selectRow: PropTypes.object }; diff --git a/packages/react-bootstrap-table2/src/sort-caret.js b/packages/react-bootstrap-table2/src/sort-caret.js index 08a918a63..ca72f4ea5 100644 --- a/packages/react-bootstrap-table2/src/sort-caret.js +++ b/packages/react-bootstrap-table2/src/sort-caret.js @@ -4,18 +4,24 @@ import PropTypes from 'prop-types'; import Const from './const'; -const SortCaret = ({ order }) => { +const SortCaret = ({ order, sorting }) => { const orderClass = cs('react-bootstrap-table-sort-order', { dropup: order === Const.SORT_ASC }); + + const iconClass = cs('caret', { + sorting + }); + return ( - + ); }; SortCaret.propTypes = { - order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired + order: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]).isRequired, + sorting: PropTypes.bool.isRequired }; export default SortCaret; diff --git a/packages/react-bootstrap-table2/src/store/base.js b/packages/react-bootstrap-table2/src/store/base.js index 31a96cd67..1055217d9 100644 --- a/packages/react-bootstrap-table2/src/store/base.js +++ b/packages/react-bootstrap-table2/src/store/base.js @@ -1,4 +1,4 @@ -import { sort } from './sort'; +import { sort, getSortOrderTable } from './sort'; import Const from '../const'; import _ from '../utils'; @@ -8,7 +8,7 @@ export default class Store { this.keyField = keyField; this.data = data ? data.slice() : []; - this.sortOrder = undefined; + this.sortOrderTable = getSortOrderTable(props); this.sortField = undefined; this.selected = []; } @@ -18,13 +18,22 @@ export default class Store { } sortBy({ dataField, sortFunc }) { - if (dataField !== this.sortField) { - this.sortOrder = Const.SORT_DESC; - } else { - this.sortOrder = this.sortOrder === Const.SORT_DESC ? Const.SORT_ASC : Const.SORT_DESC; + let order; + + switch (this.sortOrderTable[dataField]) { + case Const.SORT_UNSET: + order = Const.SORT_DESC; + break; + case Const.SORT_DESC: + order = Const.SORT_ASC; + break; + default: + order = Const.SORT_DESC; + break; } - this.data = sort(dataField, this.data, this.sortOrder, sortFunc); + this.sortOrderTable[dataField] = order; + this.data = sort(dataField, this.data, this.sortOrderTable[dataField], sortFunc); this.sortField = dataField; } diff --git a/packages/react-bootstrap-table2/src/store/sort.js b/packages/react-bootstrap-table2/src/store/sort.js index 95271b3f6..3390001cf 100644 --- a/packages/react-bootstrap-table2/src/store/sort.js +++ b/packages/react-bootstrap-table2/src/store/sort.js @@ -37,4 +37,24 @@ const sort = (dataField, data, order, sortFunc) => { return _data; }; -export { sort }; +/** + * + * @param {Object} props - store props. + * @param {Object} props.columns - columns passing by user. + * + * @return {Object} - return table which contains initial sort order. + */ +const getSortOrderTable = ({ columns }) => { + const sortOrderTable = {}; + const { SORT_UNSET, SORT_UNSORTABLE } = Const; + + columns.forEach((column) => { + const { dataField, sort: sortable } = column; + + sortOrderTable[dataField] = sortable ? SORT_UNSET : SORT_UNSORTABLE; + }); + + return sortOrderTable; +}; + +export { sort, getSortOrderTable }; From a37186cec38420f75b6a25dc6bd5df2dcd07b675 Mon Sep 17 00:00:00 2001 From: Chun-MingChen Date: Sun, 15 Oct 2017 20:40:40 +0800 Subject: [PATCH 2/2] set sort caret to grey if not sorting --- .../react-bootstrap-table2/style/react-bootstrap-table.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-bootstrap-table2/style/react-bootstrap-table.scss b/packages/react-bootstrap-table2/style/react-bootstrap-table.scss index 1a87c513a..0d7d45e24 100644 --- a/packages/react-bootstrap-table2/style/react-bootstrap-table.scss +++ b/packages/react-bootstrap-table2/style/react-bootstrap-table.scss @@ -22,6 +22,10 @@ margin: 10px 6.5px; } + th > .react-bootstrap-table-sort-order > .caret:not(.sorting) { + color: #cccccc; + } + th[data-row-selection] { width: 30px; }