Refarcotring Wrapper

packages/react-bootstrap-table2-example/examples/loading-overlay/empty-table-overlay.js

@@ -116,7 +116,7 @@ class EmptyTableOverlay extends React.Component {
     };
   }
 
-  handleTableChange = ({ page, sizePerPage }) => {
+  handleTableChange = (type, { page, sizePerPage }) => {
     const currentIndex = (page - 1) * sizePerPage;
     setTimeout(() => {
       this.setState(() => ({

packages/react-bootstrap-table2-example/examples/loading-overlay/table-overlay.js

@@ -127,7 +127,7 @@ class Container extends React.Component {
     };
   }
 
-  handleTableChange = ({ page, sizePerPage }) => {
+  handleTableChange = (type, { page, sizePerPage }) => {
     const currentIndex = (page - 1) * sizePerPage;
     setTimeout(() => {
       this.setState(() => ({

packages/react-bootstrap-table2-filter/src/index.js

@@ -1,9 +1,9 @@
 import TextFilter from './components/text';
-import FilterWrapper from './wrapper';
+import wrapperFactory from './wrapper';
 import * as Comparison from './comparison';
 
 export default (options = {}) => ({
-  FilterWrapper,
+  wrapperFactory,
   options
 });
 

packages/react-bootstrap-table2-filter/src/wrapper.js

@@ -1,76 +1,66 @@
-/* eslint react/prop-types: 0 */
-import { Component } from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { filters } from './filter';
 import { LIKE } from './comparison';
 
-export default class FilterWrapper extends Component {
-  static propTypes = {
-    store: PropTypes.object.isRequired,
-    columns: PropTypes.array.isRequired,
-    baseElement: PropTypes.func.isRequired,
-    onRemoteFilterChange: PropTypes.func.isRequired,
-    // refactoring later
-    _: PropTypes.object.isRequired
-  }
-
-  constructor(props) {
-    super(props);
-    this.state = { currFilters: {}, isDataChanged: false };
-    this.onFilter = this.onFilter.bind(this);
-  }
-
-  componentWillReceiveProps(nextProps) {
-    // consider to use lodash.isEqual
-    if (JSON.stringify(this.state.currFilters) !== JSON.stringify(nextProps.store.filters)) {
-      this.setState(() => ({ isDataChanged: true, currFilters: nextProps.store.filters }));
-    } else {
-      this.setState(() => ({ isDataChanged: false }));
+export default (Base, {
+  _,
+  remoteResolver
+}) =>
+  class FilterWrapper extends remoteResolver(Component) {
+    static propTypes = {
+      store: PropTypes.object.isRequired,
+      columns: PropTypes.array.isRequired
     }
-  }
-
-  onFilter(column, filterVal, filterType) {
-    const { store, columns, _, onRemoteFilterChange } = this.props;
-    const currFilters = Object.assign({}, this.state.currFilters);
-    const { dataField, filter } = column;
 
-    if (!_.isDefined(filterVal) || filterVal === '') {
-      delete currFilters[dataField];
-    } else {
-      const { comparator = LIKE } = filter.props;
-      currFilters[dataField] = { filterVal, filterType, comparator };
+    constructor(props) {
+      super(props);
+      this.state = { currFilters: {}, isDataChanged: false };
+      this.onFilter = this.onFilter.bind(this);
     }
-    store.filters = currFilters;
 
-    if (this.isRemote() || this.isPaginationRemote()) {
-      onRemoteFilterChange(this.isPaginationRemote());
-      // when remote filtering is enable, dont set currFilters state
-      // in the componentWillReceiveProps, it's the key point that we can know the filter is changed
-      return;
+    componentWillReceiveProps(nextProps) {
+      // consider to use lodash.isEqual
+      if (JSON.stringify(this.state.currFilters) !== JSON.stringify(nextProps.store.filters)) {
+        this.setState(() => ({ isDataChanged: true, currFilters: nextProps.store.filters }));
+      } else {
+        this.setState(() => ({ isDataChanged: false }));
+      }
     }
 
-    store.filteredData = filters(store, columns, _)(currFilters);
-    this.setState(() => ({ currFilters, isDataChanged: true }));
-  }
+    onFilter(column, filterVal, filterType) {
+      const { store, columns } = this.props;
+      const currFilters = Object.assign({}, this.state.currFilters);
+      const { dataField, filter } = column;
 
-  // refactoring later
-  isRemote() {
-    const { remote } = this.props;
-    return remote === true || (typeof remote === 'object' && remote.filter);
-  }
+      if (!_.isDefined(filterVal) || filterVal === '') {
+        delete currFilters[dataField];
+      } else {
+        const { comparator = LIKE } = filter.props;
+        currFilters[dataField] = { filterVal, filterType, comparator };
+      }
+      store.filters = currFilters;
 
-  // refactoring later
-  isPaginationRemote() {
-    const { remote } = this.props;
-    return remote === true || (typeof remote === 'object' && remote.pagination);
-  }
+      if (this.isRemoteFiltering() || this.isRemotePagination()) {
+        this.handleRemoteFilterChange();
+        // when remote filtering is enable, dont set currFilters state
+        // in the componentWillReceiveProps, 
+        // it's the key point that we can know the filter is changed
+        return;
+      }
 
-  render() {
-    return this.props.baseElement({
-      ...this.props,
-      key: 'table',
-      onFilter: this.onFilter,
-      isDataChanged: this.state.isDataChanged
-    });
-  }
-}
+      store.filteredData = filters(store, columns, _)(currFilters);
+      this.setState(() => ({ currFilters, isDataChanged: true }));
+    }
+
+    render() {
+      return (
+        <Base
+          { ...this.props }
+          data={ this.props.store.data }
+          onFilter={ this.onFilter }
+          isDataChanged={ this.state.isDataChanged }
+        />
+      );
+    }
+  };

packages/react-bootstrap-table2-filter/test/wrapper.test.js

@@ -3,10 +3,11 @@ import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
 import _ from 'react-bootstrap-table2/src/utils';
+import remoteResolver from 'react-bootstrap-table2/src/props-resolver/remote-resolver';
 import BootstrapTable from 'react-bootstrap-table2/src/bootstrap-table';
 import Store from 'react-bootstrap-table2/src/store';
 import filter, { textFilter } from '../src';
-import FilterWrapper from '../src/wrapper';
+import wrapperFactory from '../src/wrapper';
 import { FILTER_TYPE } from '../src/const';
 
 const data = [];
@@ -21,10 +22,10 @@ for (let i = 0; i < 20; i += 1) {
 describe('Wrapper', () => {
   let wrapper;
   let instance;
-  const onRemoteFilterChangeCB = sinon.stub();
+  const onTableChangeCB = sinon.stub();
 
   afterEach(() => {
-    onRemoteFilterChangeCB.reset();
+    onTableChangeCB.reset();
   });
 
   const createTableProps = () => {
@@ -46,16 +47,19 @@ describe('Wrapper', () => {
       filter: filter(),
       _,
       store: new Store('id'),
-      onRemoteFilterChange: onRemoteFilterChangeCB
+      onTableChange: onTableChangeCB
     };
     tableProps.store.data = data;
     return tableProps;
   };
 
-  const pureTable = props => (<BootstrapTable { ...props } />);
+  const FilterWrapper = wrapperFactory(BootstrapTable, {
+    _,
+    remoteResolver
+  });
 
   const createFilterWrapper = (props, renderFragment = true) => {
-    wrapper = shallow(<FilterWrapper { ...props } baseElement={ pureTable } />);
+    wrapper = shallow(<FilterWrapper { ...props } />);
     instance = wrapper.instance();
     if (renderFragment) {
       const fragment = instance.render();
@@ -177,7 +181,7 @@ describe('Wrapper', () => {
       });
 
       it('should calling props.onRemoteFilterChange correctly', () => {
-        expect(onRemoteFilterChangeCB.calledOnce).toBeTruthy();
+        expect(onTableChangeCB.calledOnce).toBeTruthy();
       });
     });
 

packages/react-bootstrap-table2-paginator/src/index.js

@@ -1,6 +1,6 @@
-import PaginationWrapper from './wrapper';
+import wrapperFactory from './wrapper';
 
 export default (options = {}) => ({
-  PaginationWrapper,
+  wrapperFactory,
   options
 });

packages/react-bootstrap-table2-paginator/src/page.js

@@ -1,12 +1,12 @@
-export const getByCurrPage = store => (page, sizePerPage, pageStartIndex) => {
+export const getByCurrPage = (store, pageStartIndex) => {
   const dataSize = store.data.length;
   if (!dataSize) return [];
   const getNormalizedPage = () => {
     const offset = Math.abs(1 - pageStartIndex);
-    return page + offset;
+    return store.page + offset;
   };
-  const end = (getNormalizedPage() * sizePerPage) - 1;
-  const start = end - (sizePerPage - 1);
+  const end = (getNormalizedPage() * store.sizePerPage) - 1;
+  const start = end - (store.sizePerPage - 1);
 
   const result = [];
   for (let i = start; i <= end; i += 1) {