Merge pull request #158 from react-bootstrap-table/enhance/refactoring

Refarcotring Wrapper

Author: AllenFang

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) {