begin search

src/Table/Table.js

@@ -1,14 +1,18 @@
 // @flow
 
 import React from 'react';
-import { toArray, flatten, cloneWithProps } from '../utils';
+import { toArray, flatten, cloneWithProps /* , toLowerCase */ } from '../utils';
 
 type TableProps = {
   component: string | Function,
   pageNumber: number,
   pageSize: number,
   pagination: Function,
   onPageChange: Function,
+  search: string,
+  searchFor: Array<any>,
+  searchComponent: Function,
+  onSearch: Function,
   dataset: Array<any>,
   className: string,
   style: Object,
@@ -21,18 +25,60 @@ export default class Table extends React.Component {
     dataset: [],
   };
 
-  state = {}
+  state = {};
 
   onPageChange = (...params: any) => {
-    const { onPageChange } = this.props;
-    if (typeof onPageChange === 'function') {
-      onPageChange(...params);
-    } else {
-      this.setState({
-        ...this.state,
-        pageNumber: params[0],
-      });
-    }
+    this.setState({
+      ...this.state,
+      pageNumber: params[0],
+    });
+  };
+
+  onSearch = (/* value, { type = 'like', caseSensitive = false, fields } = {} */) => {
+    // TODO
+
+    /*
+    const { searchFor, dataset } = this.props;
+    let search = value;
+    const criteria = fields || searchFor || [];
+    dataset.filter(x =>
+      criteria.reduce((acc, cur) => {
+        if (acc === true) return true;
+        let data = x;
+        if (typeof cur === 'function') {
+          data = cur(data);
+        } else {
+          String(cur).split('.').forEach((z: string) => {
+            data = (data || {})[z];
+          });
+        }
+        let match;
+        switch (type) {
+          case 'equals':
+            if (typeof data === 'string' && caseSensitive === false) {
+              data = toLowerCase(data);
+            }
+            if (typeof search === 'string' && caseSensitive === false) {
+              search = toLowerCase(search);
+            }
+            match = data === search;
+            break;
+          case 'startsWith':
+            data = toLowerCase(data);
+            search = toLowerCase(search);
+            match = data.startsWith(search);
+            break;
+          case 'like':
+          default:
+            data = toLowerCase(data);
+            search = toLowerCase(search);
+            match = new RegExp(search).test(data);
+            break;
+        }
+        return match || acc;
+      }, false),
+    );
+    */
   };
 
   getChildrenArray = () => {
@@ -160,14 +206,24 @@ export default class Table extends React.Component {
       pageNumber,
       pageSize,
       pagination,
+      search,
+      searchFor,
+      searchComponent,
+      onSearch,
       dataset,
       children,
       ...others
     } = this.props;
     const Component = component;
     const Pagination = pagination;
+    const SearchComponent = searchComponent;
     return (
       <span>
+        {SearchComponent &&
+          <SearchComponent
+            search={search}
+            onSearch={onSearch || this.onSearch}
+          />}
         <Component {...others}>
           {this.getChildrenArray(this.props)}
         </Component>
@@ -176,7 +232,7 @@ export default class Table extends React.Component {
             items={dataset.length}
             pageSize={pageSize}
             pageNumber={pageNumber}
-            onPageChange={this.onPageChange}
+            onPageChange={onPageChange || this.onPageChange}
           />}
       </span>
     );

src/utils.js

@@ -25,8 +25,19 @@ export const cloneWithProps = (element: Object, props: Object, key: any) => {
     element === undefined ||
     element === null ||
     element.type === undefined
-  ) return null;
+  ) { return null; }
   const newProps = Object.assign({}, props, element.props);
   if (newProps.key === undefined) newProps.key = key;
   return <element.type {...newProps} />;
 };
+
+export const toLowerCase = (string: any, forceConversion: boolean = false) => {
+  let result = string;
+  if (forceConversion === true && typeof string !== 'string') {
+    result = String(string);
+  }
+  if (typeof result === 'string' && forceConversion === false) {
+    result = result.toLowerCase();
+  }
+  return result;
+};

test/table.spec.js

@@ -8,6 +8,7 @@ import { Table } from '../src/';
 
 describe('table', () => {
   const dataset = [{ foo: 'foo0', bar: 'bar0' }, { foo: 'foo1', bar: 'bar1' }];
+  const Td = (props: Object) => <td>{props.data}</td>;
 
   it('should render the given component', () => {
     expectComponentToMatch(<Table component="div" />, <span><div /></span>);
@@ -398,8 +399,6 @@ describe('table', () => {
   });
 
   describe('pagination', () => {
-    const Td = (props: Object) => <td>{props.data}</td>;
-
     it('should render a pagination', () => {
       expectComponentToMatch(
         <Table
@@ -485,4 +484,35 @@ describe('table', () => {
 
     //  TODO : test internal pagination
   });
+
+  describe('search', () => {
+    it('should render a search component', () => {
+      expectComponentToMatch(
+        <Table
+          dataset={dataset}
+          searchComponent={props => <div name="foo" {...props} />}
+        />,
+        <span>
+          <div name="foo" />
+          <table />
+        </span>,
+      );
+    });
+
+    it('should call onSearch', (done) => {
+      const rendered = ReactTestUtils.renderIntoDocument(
+        <Table
+          onSearch={(page) => {
+            expect(page).toEqual('foo');
+            done();
+          }}
+          searchComponent={props => <button onClick={() => props.onSearch('foo')} />}
+        />,
+      );
+      const button = ReactTestUtils.findRenderedDOMComponentWithTag(rendered, 'button');
+      ReactTestUtils.Simulate.click(button);
+    });
+
+    //  TODO : test internal search
+  });
 });