implement filter

packages/react-bootstrap-table2-filter/package.json

@@ -0,0 +1,11 @@
+{
+  "name": "react-bootstrap-table2-filter",
+  "version": "0.0.1",
+  "description": "it's the column filter addon for react-bootstrap-table2",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

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

@@ -0,0 +1,2 @@
+export const LIKE = 'LIKE';
+export const EQ = '=';

packages/react-bootstrap-table2-filter/src/components/text.js

@@ -0,0 +1,93 @@
+/* eslint react/require-default-props: 0 */
+/* eslint react/no-unused-prop-types: 0 */
+/* eslint no-return-assign: 0 */
+import React, { Component } from 'react';
+import { PropTypes } from 'prop-types';
+
+import { LIKE, EQ } from '../comparison';
+import { FILTER_TYPE, FILTER_DELAY } from '../const';
+
+class TextFilter extends Component {
+  constructor(props) {
+    super(props);
+    this.filter = this.filter.bind(this);
+    this.timeout = null;
+    this.state = {
+      value: props.defaultValue
+    };
+  }
+  componentDidMount() {
+    const defaultValue = this.input.value;
+    if (defaultValue) {
+      this.props.onFilter(this.props.column, defaultValue, FILTER_TYPE.TEXT);
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.defaultValue !== this.props.defaultValue) {
+      this.applyFilter(nextProps.defaultValue);
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timeout);
+  }
+
+  filter(e) {
+    e.stopPropagation();
+    if (this.timeout) {
+      clearTimeout(this.timeout);
+    }
+    const filterValue = e.target.value;
+    this.setState(() => ({ value: filterValue }));
+    this.timeout = setTimeout(() => {
+      this.props.onFilter(this.props.column, filterValue, FILTER_TYPE.TEXT);
+    }, this.props.delay);
+  }
+
+  cleanFiltered() {
+    const value = this.props.defaultValue;
+    this.setState(() => ({ value }));
+    this.props.onFilter(this.props.column, value, FILTER_TYPE.TEXT);
+  }
+
+  applyFilter(filterText) {
+    this.setState(() => ({ value: filterText }));
+    this.props.onFilter(this.props.column, filterText, FILTER_TYPE.TEXT);
+  }
+
+  render() {
+    const { placeholder, column: { text }, style } = this.props;
+    // stopPropagation for onClick event is try to prevent sort was triggered.
+    return (
+      <input
+        ref={ n => this.input = n }
+        type="text"
+        className="filter text-filter form-control"
+        style={ style }
+        onChange={ this.filter }
+        onClick={ e => e.stopPropagation() }
+        placeholder={ placeholder || `Enter ${text}...` }
+        value={ this.state.value }
+      />
+    );
+  }
+}
+
+TextFilter.propTypes = {
+  onFilter: PropTypes.func.isRequired,
+  comparator: PropTypes.oneOf([LIKE, EQ]),
+  defaultValue: PropTypes.string,
+  delay: PropTypes.number,
+  placeholder: PropTypes.string,
+  column: PropTypes.object,
+  style: PropTypes.object
+};
+
+TextFilter.defaultProps = {
+  delay: FILTER_DELAY,
+  defaultValue: ''
+};
+
+
+export default TextFilter;

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

@@ -0,0 +1,5 @@
+export const FILTER_TYPE = {
+  TEXT: 'TEXT'
+};
+
+export const FILTER_DELAY = 500;

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

@@ -0,0 +1,36 @@
+import { FILTER_TYPE } from './const';
+import { LIKE, EQ } from './comparison';
+
+export const filterByText = _ => (data, dataField, { filterVal, comparator = LIKE }) =>
+  data.filter((row) => {
+    const cell = _.get(row, dataField);
+    const cellStr = _.isDefined(cell) ? cell.toString() : '';
+    if (comparator === EQ) {
+      return cellStr === filterVal;
+    }
+    return cellStr.indexOf(filterVal) > -1;
+  });
+
+export const filterFactory = _ => (filterType) => {
+  let filterFn;
+  switch (filterType) {
+    case FILTER_TYPE.TEXT:
+      filterFn = filterByText(_);
+      break;
+    default:
+      filterFn = filterByText(_);
+  }
+  return filterFn;
+};
+
+export const filters = (store, _) => (currFilters) => {
+  const factory = filterFactory(_);
+  let result = store.getAllData();
+  let filterFn;
+  Object.keys(currFilters).forEach((dataField) => {
+    const filterObj = currFilters[dataField];
+    filterFn = factory(filterObj.filterType);
+    result = filterFn(result, dataField, filterObj);
+  });
+  return result;
+};

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

@@ -0,0 +1,15 @@
+import TextFilter from './components/text';
+import FilterWrapper from './wrapper';
+import * as Comparison from './comparison';
+
+export default (options = {}) => ({
+  FilterWrapper,
+  options
+});
+
+export const Comparator = Comparison;
+
+export const textFilter = (props = {}) => ({
+  Filter: TextFilter,
+  props
+});

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

@@ -0,0 +1,48 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+import { filters } from './filter';
+
+export default class FilterWrapper extends Component {
+  static propTypes = {
+    store: PropTypes.object.isRequired,
+    baseElement: PropTypes.func.isRequired,
+    _: PropTypes.object.isRequired
+  }
+
+  constructor(props) {
+    super(props);
+    this.state = { currFilters: {}, isDataChanged: false };
+    this.onFilter = this.onFilter.bind(this);
+  }
+
+  componentWillReceiveProps() {
+    this.setState(() => ({ isDataChanged: false }));
+  }
+
+  onFilter(column, filterVal, filterType) {
+    const { store, _ } = this.props;
+    const { currFilters } = this.state;
+    const { dataField, filter } = column;
+
+    if (!_.isDefined(filterVal) || filterVal === '') {
+      delete currFilters[dataField];
+    } else {
+      const { comparator } = filter.props;
+      currFilters[dataField] = { filterVal, filterType, comparator };
+    }
+
+    store.filteredData = filters(store, _)(currFilters);
+    store.filtering = Object.keys(currFilters).length > 0;
+
+    this.setState(() => ({ currFilters, isDataChanged: true }));
+  }
+
+  render() {
+    return this.props.baseElement({
+      ...this.props,
+      key: 'table',
+      onFilter: this.onFilter,
+      isDataChanged: this.state.isDataChanged
+    });
+  }
+}

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

@@ -6,11 +6,13 @@ import { getRowByRowId } from './rows';
 export default class Store {
   constructor(keyField) {
     this._data = [];
+    this._filteredData = [];
     this._keyField = keyField;
-
     this._sortOrder = undefined;
     this._sortField = undefined;
     this._selected = [];
+    this._filtering = false;
+    this._isDataChanged = false;
   }
 
   edit(rowId, dataField, newValue) {
@@ -24,12 +26,33 @@ export default class Store {
     this.data = sort(this)(sortFunc);
   }
 
-  get data() { return this._data; }
-  set data(data) { this._data = (data ? JSON.parse(JSON.stringify(data)) : []); }
+  getAllData() {
+    return this._data;
+  }
+
+  get data() {
+    if (this._filtering) {
+      return this._filteredData;
+    }
+    return this._data;
+  }
+  set data(data) {
+    if (this._filtering) {
+      this._filteredData = data;
+    } else {
+      this._data = (data ? JSON.parse(JSON.stringify(data)) : []);
+    }
+  }
+
+  get filteredData() { return this._filteredData; }
+  set filteredData(filteredData) { this._filteredData = filteredData; }
 
   get keyField() { return this._keyField; }
   set keyField(keyField) { this._keyField = keyField; }
 
+  get isDataChanged() { return this._isDataChanged; }
+  set isDataChanged(isDataChanged) { this._isDataChanged = isDataChanged; }
+
   get sortOrder() { return this._sortOrder; }
   set sortOrder(sortOrder) { this._sortOrder = sortOrder; }
 
@@ -38,4 +61,7 @@ export default class Store {
 
   get selected() { return this._selected; }
   set selected(selected) { this._selected = selected; }
+
+  get filtering() { return this._filtering; }
+  set filtering(filtering) { this._filtering = filtering; }
 }

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

@@ -22,9 +22,8 @@ export const pureTable = props =>
 
 export const wrapWithFilter = (props) => {
   if (props.filter) {
-    const { wrapper } = props.filter;
-    const FilterBase = wrapper(wrapWithSort, _);
-    return React.createElement(FilterBase, { ...props });
+    const { FilterWrapper } = props.filter;
+    return React.createElement(FilterWrapper, { ...props, baseElement: wrapWithSort, _ });
   }
   return wrapWithSort(props);
 };