funcaitonal store (#146)

Author: AllenFang

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

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

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

@@ -5,6 +5,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 
 import Const from './const';
+import { getByCurrPage } from './page';
 
 const wrapperFactory = baseElement =>
  class PaginationWrapper extends Component {
@@ -98,7 +99,7 @@ const wrapperFactory = baseElement =>
 
  const data = this.isRemote() ?
  this.props.data :
- store.getByCurrPage(currPage, currSizePerPage, pageStartIndex);
+ getByCurrPage(store)(currPage, currSizePerPage, pageStartIndex);
 
  const base = baseElement({
  ...this.props,
@@ -110,7 +111,7 @@ const wrapperFactory = baseElement =>
  base,
  <Pagination
  key="pagination"
- dataSize={ options.totalSize || store.getDataSize() }
+ dataSize={ options.totalSize || store.data.length }
  currPage={ currPage }
  currSizePerPage={ currSizePerPage }
  onPageChange={ this.handleChangePage }

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

@@ -0,0 +1,38 @@
+import Store from 'react-bootstrap-table2/src/store';
+import { getByCurrPage } from '../src/page';
+
+describe('Page Functions', () => {
+ let data;
+ let store;
+
+ describe('getByCurrPage', () => {
+ beforeEach(() => {
+ data = [];
+ for (let i = 0; i < 100; i += 1) {
+ data.push({ id: i, name: `test_name${i}` });
+ }
+ store = new Store('id');
+ store.data = data;
+ });
+
+ it('should always return correct data', () => {
+ [
+ // [page, sizePerPage, pageStartIndex]
+ [1, 10, 1],
+ [1, 25, 1],
+ [1, 30, 1],
+ [3, 30, 1],
+ [4, 30, 1],
+ [10, 10, 1],
+ [0, 10, 0],
+ [1, 10, 0],
+ [9, 10, 0]
+ ].forEach(([page, sizePerPage, pageStartIndex]) => {
+ const rows = getByCurrPage(store)(page, sizePerPage, pageStartIndex);
+ expect(rows).toBeDefined();
+ expect(Array.isArray(rows)).toBeTruthy();
+ expect(rows.every(row => !!row)).toBeTruthy();
+ });
+ });
+ });
+});

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

@@ -4,7 +4,7 @@ import { shallow } from 'enzyme';
 
 
 import BootstrapTable from 'react-bootstrap-table2/src/bootstrap-table';
-import Store from 'react-bootstrap-table2/src/store/base';
+import Store from 'react-bootstrap-table2/src/store';
 import paginator from '../src';
 import wrapperFactory from '../src/wrapper';
 import Pagination from '../src/pagination';
@@ -23,19 +23,23 @@ describe('Wrapper', () => {
  let wrapper;
  let instance;
 
- const createTableProps = (props = {}) => ({
- keyField: 'id',
- columns: [{
- dataField: 'id',
- text: 'ID'
- }, {
- dataField: 'name',
- text: 'Name'
- }],
- data,
- pagination: paginator(props.options),
- store: new Store({ data })
- });
+ const createTableProps = (props = {}) => {
+ const tableProps = {
+ keyField: 'id',
+ columns: [{
+ dataField: 'id',
+ text: 'ID'
+ }, {
+ dataField: 'name',
+ text: 'Name'
+ }],
+ data,
+ pagination: paginator(props.options),
+ store: new Store('id')
+ };
+ tableProps.store.data = data;
+ return tableProps;
+ };
 
  const pureTable = props => (<BootstrapTable { ...props } />);
 
@@ -76,7 +80,7 @@ describe('Wrapper', () => {
  it('should rendering Pagination correctly', () => {
  const pagination = wrapper.find(Pagination);
  expect(pagination.length).toBe(1);
- expect(pagination.prop('dataSize')).toEqual(props.store.getDataSize());
+ expect(pagination.prop('dataSize')).toEqual(props.store.data.length);
  expect(pagination.prop('currPage')).toEqual(instance.state.currPage);
  expect(pagination.prop('currSizePerPage')).toEqual(instance.state.currSizePerPage);
  expect(pagination.prop('onPageChange')).toEqual(instance.handleChangePage);

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

@@ -9,6 +9,7 @@ import Caption from './caption';
 import Body from './body';
 import PropsBaseResolver from './props-resolver';
 import Const from './const';
+import { isSelectedAll } from './store/selection';
 
 class BootstrapTable extends PropsBaseResolver(Component) {
  constructor(props) {
@@ -73,7 +74,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  const headerCellSelectionInfo = this.resolveSelectRowPropsForHeader({
  onAllRowsSelect: this.props.onAllRowsSelect,
  selected: store.selected,
- allRowsSelected: store.isAllRowsSelected()
+ allRowsSelected: isSelectedAll(store)
  });
 
  return (
@@ -96,7 +97,7 @@ class BootstrapTable extends PropsBaseResolver(Component) {
  noDataIndication={ noDataIndication }
  cellEdit={ cellEditInfo }
  selectRow={ cellSelectionInfo }
- selectedRowKeys={ store.getSelectedRowKeys() }
+ selectedRowKeys={ store.selected }
  rowStyle={ rowStyle }
  rowClasses={ rowClasses }
  rowEvents={ rowEvents }

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

@@ -1,7 +1,7 @@
 /* eslint no-return-assign: 0 */
 /* eslint react/prop-types: 0 */
 import React, { Component } from 'react';
-import Store from './store/base';
+import Store from './store';
 
 import {
  wrapWithCellEdit,
@@ -16,13 +16,14 @@ const withDataStore = Base =>
  class BootstrapTableContainer extends Component {
  constructor(props) {
  super(props);
- this.store = new Store(props);
+ this.store = new Store(props.keyField);
+ this.store.data = props.data;
  this.handleUpdateCell = this.handleUpdateCell.bind(this);
  this.onRemotePageChange = this.onRemotePageChange.bind(this);
  }
 
  componentWillReceiveProps(nextProps) {
- this.store.set(nextProps.data);
+ this.store.data = nextProps.data;
  }
 
  onRemotePageChange(page, sizePerPage) {

packages/react-bootstrap-table2/src/row-selection/wrapper.js

@@ -5,14 +5,21 @@ import PropTypes from 'prop-types';
 import { selectionElement } from '../table-factory';
 
 import Const from '../const';
+import {
+ isAnySelectedRow,
+ selectableKeys,
+ unSelectableKeys,
+ getSelectedRows
+} from '../store/selection';
+import { getRowByRowId } from '../store/rows';
 
 class RowSelectionWrapper extends Component {
  constructor(props) {
  super(props);
  this.handleRowSelect = this.handleRowSelect.bind(this);
  this.handleAllRowsSelect = this.handleAllRowsSelect.bind(this);
  this.state = {
- selectedRowKeys: props.store.getSelectedRowKeys()
+ selectedRowKeys: props.store.selected
  };
  }
 
@@ -25,7 +32,7 @@ class RowSelectionWrapper extends Component {
  const { selectRow: { mode, onSelect }, store } = this.props;
  const { ROW_SELECT_SINGLE } = Const;
 
- let currSelected = [...store.getSelectedRowKeys()];
+ let currSelected = [...store.selected];
 
  if (mode === ROW_SELECT_SINGLE) { // when select mode is radio
  currSelected = [rowKey];
@@ -35,10 +42,10 @@ class RowSelectionWrapper extends Component {
  currSelected = currSelected.filter(value => value !== rowKey);
  }
 
- store.setSelectedRowKeys(currSelected);
+ store.selected = currSelected;
 
  if (onSelect) {
- const row = store.getRowByRowId(rowKey);
+ const row = getRowByRowId(store)(rowKey);
  onSelect(row, checked, rowIndex);
  }
 
@@ -56,20 +63,20 @@ class RowSelectionWrapper extends Component {
  onSelectAll,
  nonSelectable
  } } = this.props;
- const selected = store.isAnySelectedRow(nonSelectable);
+ const selected = isAnySelectedRow(store)(nonSelectable);
 
  // set next status of all row selected by store.selected or customizing by user.
  const result = option || !selected;
 
  const currSelected = result ?
- store.selectAllRows(nonSelectable) :
- store.cleanSelectedRows(nonSelectable);
+ selectableKeys(store)(nonSelectable) :
+ unSelectableKeys(store)(nonSelectable);
 
 
- store.setSelectedRowKeys(currSelected);
+ store.selected = currSelected;
 
  if (onSelectAll) {
- onSelectAll(result, store.getSelectedRows());
+ onSelectAll(result, getSelectedRows(store));
  }
 
  this.setState(() => ({

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

@@ -30,17 +30,15 @@ class SortWrapper extends Component {
  const { store } = this.props;
  store.sortBy(column);
 
- this.table.setState({
- data: store.get()
- });
+ this.table.setState({ data: store.data });
  }
 
  render() {
  return paginationElement({
  ...this.props,
  ref: node => this.table = node,
  onSort: this.handleSort,
- data: this.props.store.get()
+ data: this.props.store.data
  });
  }
 }