[#3]: Add filterValue option for providing initial selected filters

sematext · Nov 2, 2016 · 6098607 · 6098607
1 parent 318a33c
commit 6098607
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 33 deletions.
diff --git a/src/Filter.js b/src/Filter.js
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { Creatable } from 'react-select';
+import { createTextFilter } from './common';
 
 const propTypes = {
   value: PropTypes.array,
@@ -21,14 +22,7 @@ class Filter extends Component {
         placeholder="Search by text or tags"
         promptTextCreator={(txt) => `Search for '${txt}'`}
         onChange={(selected) => onChange(selected)}
-        newOptionCreator={({ label, labelKey, valueKey }) => {
-          const option = {};
-          option[valueKey] = label.toLowerCase();
-          option[labelKey] = label.toLowerCase();
-          option.textFilter = true;
-          option.className = 'Select-create-option-placeholder';
-          return option;
-        }}
+        newOptionCreator={({ label }) => createTextFilter(label)}
         value={value}
         multi
         style={{

diff --git a/src/actions.js b/src/actions.js
@@ -7,6 +7,7 @@ export const TABLE_SORT_CHANGED = 'sematable/TABLE_SORT_CHANGED';
 export const TABLE_ROW_CHECKED_CHANGED = 'sematable/TABLE_ROW_CHECKED_CHANGED';
 export const TABLE_SELECT_ALL_CHANGED = 'sematable/TABLE_SELECT_ALL_CHANGED';
 export const TABLE_DESTROY_STATE = 'sematable/TABLE_DESTROY_STATE';
+export const TABLE_SET_FILTER = 'sematable/TABLE_SET_FILTER';
 
 export const tableInitialize = (tableName, initialData, columns, configs) => ({
   type: TABLE_INITIALIZE,
@@ -79,3 +80,11 @@ export const tableDestroyState = (tableName) => ({
     tableName,
   },
 });
+
+export const tableSetFilter = (tableName, filterValue) => ({
+  type: TABLE_SET_FILTER,
+  payload: {
+    tableName,
+    filterValue,
+  },
+});
diff --git a/src/common.js b/src/common.js
@@ -0,0 +1,34 @@
+import _ from 'lodash';
+
+export const createTextFilter = (text) => ({
+  value: text.toLowerCase(),
+  label: text.toLowerCase(),
+  textFilter: true,
+  className: 'Select-create-option-placeholder',
+});
+
+export const createValueFilter = (column, value) => {
+  const {
+    key,
+    getValueTitle = () => undefined,
+    getValueClassName = () => undefined,
+    getValueLabel = () => {
+      let labelValue = value;
+      if (_.isBoolean(value)) {
+        labelValue = value ? 'Yes' : 'No';
+      }
+      return `${column.header}:${labelValue}`;
+    },
+  } = column;
+  const title = getValueTitle(value);
+  const label = getValueLabel(value);
+  const className = getValueClassName(value);
+  return {
+    key,
+    label,
+    value,
+    title,
+    className,
+    valueFilter: true,
+  };
+};
diff --git a/src/reducer.js b/src/reducer.js
@@ -10,7 +10,9 @@ import {
   TABLE_SELECT_ALL_CHANGED,
   TABLE_ROW_CHECKED_CHANGED,
   TABLE_DESTROY_STATE,
+  TABLE_SET_FILTER,
 } from './actions.js';
+import { createTextFilter, createValueFilter } from './common';
 
 const defaultState = (configs = {}) => ({
   page: 0,
@@ -46,6 +48,20 @@ const behaviours = {
     ...state,
     initialData: payload.data,
   }),
+  [TABLE_SET_FILTER]: (state, { payload }) => {
+    const columnMap = _.keyBy(state.columns, 'key');
+    const filter = payload.filterValue.map(f => {
+      if (_.isString(f)) {
+        return createTextFilter(f);
+      }
+      const column = columnMap[f.key];
+      return createValueFilter(column, f.value);
+    });
+    return {
+      ...state,
+      filter,
+    };
+  },
   [TABLE_PAGE_CHANGED]: (state, { payload }) => ({
     ...state,
     page: payload.page,

diff --git a/src/selectors.js b/src/selectors.js
@@ -1,5 +1,6 @@
-import { createSelector } from 'reselect';
 import _ from 'lodash';
+import { createSelector } from 'reselect';
+import { createValueFilter } from './common';
 
 function paginate(rows, { page, pageSize }) {
   if (pageSize < 1) {
@@ -119,28 +120,7 @@ export default (tableName) => {
       _.forOwn(values, (columnValues, key) => {
         columnValues.forEach(value => {
           const column = columnMap[key];
-          const {
-            getValueTitle = () => undefined,
-            getValueClassName = () => undefined,
-            getValueLabel = () => {
-              let labelValue = value;
-              if (_.isBoolean(value)) {
-                labelValue = value ? 'Yes' : 'No';
-              }
-              return `${column.header}:${labelValue}`;
-            },
-          } = column;
-          const title = getValueTitle(value);
-          const label = getValueLabel(value);
-          const className = getValueClassName(value);
-          options.push({
-            key,
-            label,
-            value,
-            title,
-            className,
-            valueFilter: true,
-          });
+          options.push(createValueFilter(column, value));
         });
       });
 

diff --git a/src/sematable.js b/src/sematable.js
@@ -14,6 +14,7 @@ import {
   tableSortChanged,
   tableRowCheckedChanged,
   tableSelectAllChanged,
+  tableSetFilter,
 } from './actions.js';
 
 const propTypes = {
@@ -28,13 +29,15 @@ const propTypes = {
   selectedRows: PropTypes.array,
   primaryKey: PropTypes.string,
   filterOptions: PropTypes.array,
+  filterValue: PropTypes.array,
 
   onPageChange: PropTypes.func.isRequired,
   onPageSizeChange: PropTypes.func.isRequired,
   onFilterChange: PropTypes.func.isRequired,
   onHeaderClick: PropTypes.func.isRequired,
   onInitialize: PropTypes.func.isRequired,
   onNewData: PropTypes.func.isRequired,
+  onNewFilterValue: PropTypes.func.isRequired,
   onRowCheckedChange: PropTypes.func.isRequired,
   onSelectAllChange: PropTypes.func.isRequired,
 };
@@ -82,6 +85,7 @@ const sematable = (tableName, TableComponent, columns, configs = {}) => {
     onFilterChange: (filter) => dispatch(tableFilterChanged(tableName, filter)),
     onHeaderClick: (sortKey) => dispatch(tableSortChanged(tableName, sortKey)),
     onNewData: (data) => dispatch(tableNewData(tableName, data)),
+    onNewFilterValue: (data) => dispatch(tableSetFilter(tableName, data)),
     onSelectAllChange: () => dispatch(tableSelectAllChanged(tableName)),
     onRowCheckedChange: (row) => dispatch(tableRowCheckedChanged(tableName, row)),
     onInitialize: (data) => dispatch(tableInitialize(tableName, data, columns, configs)),
@@ -94,10 +98,21 @@ const sematable = (tableName, TableComponent, columns, configs = {}) => {
     }
 
     componentWillReceiveProps(nextProps) {
-      const { data, onNewData } = this.props;
+      const {
+        data,
+        filterValue,
+        onNewData,
+        onNewFilterValue,
+      } = this.props;
+
       if (data !== nextProps.data) {
         onNewData(nextProps.data);
       }
+
+      if (filterValue !== nextProps.filterValue) {
+        console.log(filterValue);
+        onNewFilterValue(filterValue);
+      }
     }
 
     render() {

diff --git a/stories/index.js b/stories/index.js
@@ -37,7 +37,13 @@ storiesOf('Sematable', module)
         >
           Reset state
         </button>
-        <UsersTable data={users} />
+        <UsersTable
+          data={users}
+          filterValue={[
+            'o',
+            { key: 'confirmed', value: true },
+          ]}
+        />
       </div>
     </Provider>
   ));