seperate sorting style and header into two props

Author: chunming-c

docs/README.md

@@ -19,7 +19,8 @@
 * [rowClasses](#rowClasses)
 * [rowEvents](#rowEvents)
 * [defaultSorted](#defaultSorted)
-* [sortedHeader](#sortedHeader)
+* [sortingHeaderClasses](#sortingHeaderClasses)
+* [sortingHeaderStyle](#sortingHeaderStyle)
 
 ### <a name='keyField'>keyField(**required**) - [String]</a>
 Tells `react-bootstrap-table2` which column is unique.
@@ -104,40 +105,29 @@ const defaultSorted = [{
 }];
 ```
 
-### <a name='sortedHeader'>sortedHeader - [Object]</a>
+### <a name='sortingHeaderClasses'>sortingHeaderClasses - [String | Function]</a>
 
-`sortedHeader` allows you to customize `class` or `style` for `header cell` which is currently sorting. `sortedHeader` accepts two `attributes`, `classes` and `style`. 
-
-* classes
-* style
-
-**sortedHeader.classes - [String | Function]**
-
-Append customized classes for `header cell` which the table was sorting based on.
+`sortingHeaderClasses` allows you to customize `class` for `header cell` which the table was sorting based on. 
 
 ```js
-const sortedHeader = {
-  classes: 'demo-sorted'
-};
+const sortingHeaderClasses = 'demo-sorted';
 ```
 
 Furthermore, it also accepts a callback function which takes `2` arguments and `String` is expected to return:
 
 ```js
-const sortedHeader = {
-  classes: function callback(column, colIndex) { ... }
-}
+const sortingHeaderClasses = function callback(column, colIndex) { ... }
 ```
 
 * column: The value of current column.
 * colIndex: The index of the current column being processed in BootstrapTable.
 
-**sortedHeader.style - [Object | Function]**
+### <a name='sortingHeaderStyle'>sortingHeaderStyle - [Object | Function]</a>
 
-It's similiar to `sortedHeader.classes`. It allows to customize style of `header cell` which is sorting based on. `Object` and `callback` function are acceptable. `callback` takes `2` arguments and an `Object` is expected to return:
+It's similiar to `sortingHeaderClasses`. It allows to customize style of `header cell` which is sorting based on. `Object` and `callback` function are acceptable. `callback` takes `2` arguments and an `Object` is expected to return:
 
 ```js
-const sortedHeader = {
-  style: { backgroundColor: 'red' }
+const sortingHeaderStyle = {
+  backgroundColor: 'red'
 };
-```
+```

packages/react-bootstrap-table2-example/examples/sort/sorted-header-classes.js renamed to packages/react-bootstrap-table2-example/examples/sort/sorting-header-classes.js

@@ -20,9 +20,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const sortedHeader = {
-  classes: (column, colIndex) => 'demo-sorted'
-};
+const sortingHeaderClasses = (column, colIndex) => 'demo-sorted';
 
 const sourceCode = `\
 const columns = [{
@@ -38,16 +36,14 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const sortedHeader = {
-  classes: (column, colIndex) => 'demo-sorted'
-};
+const sortingHeaderClasses = (column, colIndex) => 'demo-sorted';
 
-<BootstrapTable keyField="id" data={ products } columns={ columns } sortedHeader={ sortedHeader } />
+<BootstrapTable keyField="id" data={ products } columns={ columns } sortingHeaderClasses={ sortingHeaderClasses } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } sortedHeader={ sortedHeader } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } sortingHeaderClasses={ sortingHeaderClasses } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/examples/sort/sorted-header-style.js renamed to packages/react-bootstrap-table2-example/examples/sort/sorting-header-style.js

@@ -20,9 +20,7 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const sortedHeader = {
-  style: { backgroundColor: '#c8e6c9' }
-};
+const sortingHeaderStyle = { backgroundColor: '#c8e6c9' };
 
 const sourceCode = `\
 const columns = [{
@@ -38,16 +36,14 @@ const columns = [{
   text: 'Product Price'
 }];
 
-const sortedHeader = {
-  style: { backgroundColor: '#c8e6c9' }
-};
+const sortingHeaderStyle = { backgroundColor: '#c8e6c9' };
 
-<BootstrapTable keyField="id" data={ products } columns={ columns } sortedHeader={ sortedHeader } />
+<BootstrapTable keyField="id" data={ products } columns={ columns } sortingHeaderStyle={ sortingHeaderStyle } />
 `;
 
 export default () => (
   <div>
-    <BootstrapTable keyField="id" data={ products } columns={ columns } sortedHeader={ sortedHeader } />
+    <BootstrapTable keyField="id" data={ products } columns={ columns } sortingHeaderStyle={ sortingHeaderStyle } />
     <Code>{ sourceCode }</Code>
   </div>
 );

packages/react-bootstrap-table2-example/stories/index.js

@@ -41,8 +41,8 @@ import RowEventTable from 'examples/rows/row-event';
 import EnableSortTable from 'examples/sort/enable-sort-table';
 import DefaultSortTable from 'examples/sort/default-sort-table';
 import CustomSortTable from 'examples/sort/custom-sort-table';
-import SortedHeaderClassesTable from 'examples/sort/sorted-header-classes';
-import SortedHeaderStyleTable from 'examples/sort/sorted-header-style';
+import SortingHeaderClassesTable from 'examples/sort/sorting-header-classes';
+import SortingHeaderStyleTable from 'examples/sort/sorting-header-style';
 
 // cell editing
 import ClickToEditTable from 'examples/cell-edit/click-to-edit-table';
@@ -119,8 +119,8 @@ storiesOf('Sort Table', module)
   .add('Enable Sort', () => <EnableSortTable />)
   .add('Default Sort Table', () => <DefaultSortTable />)
   .add('Custom Sort Fuction', () => <CustomSortTable />)
-  .add('Sorted header classes', () => <SortedHeaderClassesTable />)
-  .add('Sorted header style', () => <SortedHeaderStyleTable />);
+  .add('Sorting header classes', () => <SortingHeaderClassesTable />)
+  .add('Sorting header style', () => <SortingHeaderStyleTable />);
 
 storiesOf('Cell Editing', module)
   .add('Click to Edit', () => <ClickToEditTable />)

packages/react-bootstrap-table2/src/bootstrap-table.js

@@ -39,7 +39,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
       rowStyle,
       rowClasses,
       rowEvents,
-      sortedHeader
+      sortingHeaderClasses,
+      sortingHeaderStyle
     } = this.props;
 
     const tableClass = cs('table', {
@@ -76,7 +77,8 @@ class BootstrapTable extends PropsBaseResolver(Component) {
             sortOrder={ store.sortOrder }
             onSort={ this.props.onSort }
             selectRow={ headerCellSelectionInfo }
-            sortedHeader={ sortedHeader }
+            sortingHeaderClasses={ sortingHeaderClasses }
+            sortingHeaderStyle={ sortingHeaderStyle }
           />
           <Body
             data={ this.state.data }
@@ -155,10 +157,8 @@ BootstrapTable.propTypes = {
     dataField: PropTypes.string.isRequired,
     order: PropTypes.oneOf([Const.SORT_DESC, Const.SORT_ASC]).isRequired
   })),
-  sortedHeader: PropTypes.shape({
-    classes: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    style: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  })
+  sortingHeaderClasses: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  sortingHeaderStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 
 BootstrapTable.defaultProps = {

packages/react-bootstrap-table2/src/header-cell.js

@@ -16,7 +16,8 @@ const HeaderCell = (props) => {
     onSort,
     sorting,
     sortOrder,
-    sortedHeader
+    sortingHeaderClasses,
+    sortingHeaderStyle
   } = props;
 
   const {
@@ -32,11 +33,6 @@ const HeaderCell = (props) => {
     headerAttrs
   } = column;
 
-  const {
-    classes: sortedHeaderClasses,
-    style: sortedHeaderStyle
-  } = sortedHeader;
-
   const cellAttrs = {
     ..._.isFunction(headerAttrs) ? headerAttrs(column, index) : headerAttrs,
     ...headerEvents
@@ -77,16 +73,16 @@ const HeaderCell = (props) => {
       // append customized classes or style if table was sorting based on the current column.
       cellClasses = cs(
         cellClasses,
-        _.isFunction(sortedHeaderClasses)
-          ? sortedHeaderClasses(column, index)
-          : sortedHeaderClasses
+        _.isFunction(sortingHeaderClasses)
+          ? sortingHeaderClasses(column, index)
+          : sortingHeaderClasses
       );
 
       cellStyle = {
         ...cellStyle,
-        ..._.isFunction(sortedHeaderStyle)
-          ? sortedHeaderStyle(column, index)
-          : sortedHeaderStyle
+        ..._.isFunction(sortingHeaderStyle)
+          ? sortingHeaderStyle(column, index)
+          : sortingHeaderStyle
       };
     } else {
       sortSymbol = <SortSymbol />;
@@ -135,10 +131,8 @@ HeaderCell.propTypes = {
   onSort: PropTypes.func,
   sorting: PropTypes.bool,
   sortOrder: PropTypes.oneOf([Const.SORT_ASC, Const.SORT_DESC]),
-  sortedHeader: PropTypes.shape({
-    classes: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-    style: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
-  })
+  sortingHeaderClasses: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  sortingHeaderStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 
 HeaderCell.defaultProps = {

packages/react-bootstrap-table2/src/header.js

@@ -14,7 +14,8 @@ const Header = (props) => {
     onSort,
     sortField,
     sortOrder,
-    sortedHeader,
+    sortingHeaderClasses,
+    sortingHeaderStyle,
     selectRow
   } = props;
 
@@ -36,7 +37,8 @@ const Header = (props) => {
                 onSort={ onSort }
                 sorting={ currSort }
                 sortOrder={ sortOrder }
-                sortedHeader={ sortedHeader }
+                sortingHeaderClasses={ sortingHeaderClasses }
+                sortingHeaderStyle={ sortingHeaderStyle }
               />);
           })
         }
@@ -51,7 +53,8 @@ Header.propTypes = {
   sortField: PropTypes.string,
   sortOrder: PropTypes.string,
   selectRow: PropTypes.object,
-  sortedHeader: PropTypes.object
+  sortingHeaderClasses: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  sortingHeaderStyle: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 
 export default Header;

packages/react-bootstrap-table2/test/header-cell.test.js

@@ -437,49 +437,46 @@ describe('HeaderCell', () => {
         });
       });
 
-      describe('when sortedHeader.classes was defined ', () => {
-        let sortedHeader;
+      describe('when sortingHeaderClasses was defined ', () => {
+        const classes = 'foo';
 
-        describe('if sortedHeader.classes is a string', () => {
+        describe('if sortingHeaderClasses is a string', () => {
           beforeEach(() => {
-            sortedHeader = { classes: 'foo' };
             wrapper = shallow(
               <HeaderCell
                 column={ column }
                 index={ index }
                 sorting
                 sortOrder={ Const.SORT_DESC }
-                sortedHeader={ sortedHeader }
+                sortingHeaderClasses={ classes }
               />);
           });
 
           it('should append classes correcly', () => {
             expect(wrapper.length).toBe(1);
-            expect(wrapper.hasClass(sortedHeader.classes)).toBe(true);
+            expect(wrapper.hasClass(classes)).toBe(true);
           });
 
           it('should have sortable class on header cell', () => {
             expect(wrapper.hasClass('sortable')).toBe(true);
           });
         });
 
-        describe('if sortedHeader.classes is a function', () => {
+        describe('if sortingHeaderClasses is a function', () => {
           let classesCallBack;
-          const classes = 'foo';
 
           beforeEach(() => {
             classesCallBack = sinon.stub()
               .withArgs(column, index)
               .returns(classes);
 
-            sortedHeader = { classes: classesCallBack };
             wrapper = shallow(
               <HeaderCell
                 column={ column }
                 index={ index }
                 sorting
                 sortOrder={ Const.SORT_DESC }
-                sortedHeader={ sortedHeader }
+                sortingHeaderClasses={ classesCallBack }
               />);
           });
 
@@ -499,7 +496,7 @@ describe('HeaderCell', () => {
         });
       });
 
-      describe('when sortedHeader.classes was not defined', () => {
+      describe('when sortingHeaderClasses was not defined', () => {
         it('should do nothing and keep the same on classes of header cell', () => {
           column.headerClasses = 'td-test-class';
 
@@ -517,51 +514,42 @@ describe('HeaderCell', () => {
         });
       });
 
-      describe('when sortedHeader.style was defined', () => {
-        let sortedHeader;
+      describe('when sortingHeaderStyle was defined', () => {
+        const style = { backgroundColor: 'red' };
 
-        describe('if sortedHeader.style is an object', () => {
+        describe('if sortingHeaderStyle is an object', () => {
           beforeEach(() => {
-            sortedHeader = {
-              style: { backgroundColor: 'red' }
-            };
-
             wrapper = shallow(
               <HeaderCell
                 column={ column }
                 index={ index }
                 sorting
                 sortOrder={ Const.SORT_DESC }
-                sortedHeader={ sortedHeader }
+                sortingHeaderStyle={ style }
               />);
           });
 
           it('should append style correcly', () => {
             expect(wrapper.length).toBe(1);
-            expect(wrapper.find('th').prop('style')).toEqual(sortedHeader.style);
+            expect(wrapper.find('th').prop('style')).toEqual(style);
           });
         });
 
-        describe('if sortedHeader.style is a function', () => {
-          const style = { backgroundColor: 'red' };
+        describe('if sortingHeaderStyle is a function', () => {
           let styleCallBack;
 
           beforeEach(() => {
             styleCallBack = sinon.stub()
               .withArgs(column, index)
               .returns(style);
 
-            sortedHeader = {
-              style: styleCallBack
-            };
-
             wrapper = shallow(
               <HeaderCell
                 column={ column }
                 index={ index }
                 sorting
                 sortOrder={ Const.SORT_DESC }
-                sortedHeader={ sortedHeader }
+                sortingHeaderStyle={ styleCallBack }
               />);
           });
 
@@ -577,7 +565,7 @@ describe('HeaderCell', () => {
         });
       });
 
-      describe('when sortedHeader.style was not defined', () => {
+      describe('when sortingHeaderStyle was not defined', () => {
         it('should do nothing and keep the same on style of header cell', () => {
           column.headerStyle = { backgroundColor: 'red' };