feat(added search bar): added search bar

apache-superset · May 23, 2019 · f4afc22 · f4afc22
1 parent e46c829
commit f4afc22
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 14 deletions.
diff --git a/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx b/plugins/superset-ui-plugins/packages/superset-ui-plugin-chart-table/src/Table.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
 import DataTable from '@airbnb/lunar/lib/components/DataTable';
-import { Renderers } from '@airbnb/lunar/lib/components/DataTable/types';
+import Input from '@airbnb/lunar/lib/components/Input';
+import withStyles, { css, WithStylesProps } from '@airbnb/lunar/lib/composers/withStyles';
+import { Renderers, ParentRow } from '@airbnb/lunar/lib/components/DataTable/types';
 import { getRenderer, ColumnType, heightType, Cell } from './renderer';
 
 type Props = {
-  data: any[];
+  data: ParentRow[];
   height: number;
   alignPositiveNegative?: boolean;
   colorPositiveNegative?: boolean;
@@ -18,7 +20,7 @@ type Props = {
   tableFilter: boolean;
 };
 
-function NOOP(key: string, value: []) {}
+function NOOP(key: string, value: number[]) {}
 
 const defaultProps = {
   alignPositiveNegative: false,
@@ -31,21 +33,27 @@ const defaultProps = {
 
 export type TableProps = Props & Readonly<typeof defaultProps>;
 
+type InternalTableProps = TableProps & WithStylesProps;
+
 type TableState = {
   selectedCells: Set<string>;
+  searchKeyword: string;
+  filteredRows: ParentRow[];
 };
 
 function getCellHash(cell: Cell) {
   return `${cell.key}#${cell.value}`;
 }
 
-class TableVis extends React.Component<TableProps, TableState> {
+class TableVis extends React.PureComponent<InternalTableProps, TableState> {
   static defaultProps = defaultProps;
 
-  constructor(props: TableProps) {
+  constructor(props: InternalTableProps) {
     super(props);
     this.state = {
       selectedCells: new Set(),
+      searchKeyword: '',
+      filteredRows: [],
     };
   }
 
@@ -60,10 +68,10 @@ class TableVis extends React.Component<TableProps, TableState> {
     const cellHash = getCellHash(cell);
     if (newSelectedCells.has(cellHash)) {
       newSelectedCells.delete(cellHash);
-      onRemoveFilter(cell.key, [cell.value]);
+      onRemoveFilter(cell.key, [cell.value as number]);
     } else {
       newSelectedCells.add(cellHash);
-      onAddFilter(cell.key, [cell.value]);
+      onAddFilter(cell.key, [cell.value as number]);
     }
     this.setState({
       selectedCells: newSelectedCells,
@@ -75,10 +83,29 @@ class TableVis extends React.Component<TableProps, TableState> {
     return selectedCells.has(getCellHash(cell));
   };
 
-  static getDerivedStateFromProps: React.GetDerivedStateFromProps<TableProps, TableState> = (
-    props: TableProps,
-    state: TableState,
-  ) => {
+  handleSearch = (value: string) => {
+    console.log(value);
+    const { searchKeyword } = this.state;
+    const { data } = this.props;
+    if (searchKeyword !== value) {
+      const filteredRows = data.filter(row => {
+        const content = Object.values(row.data)
+          .join('|')
+          .toLowerCase();
+        return content.indexOf(value) >= 0;
+      });
+      console.log(filteredRows);
+      this.setState({
+        searchKeyword: value,
+        filteredRows,
+      });
+    }
+  };
+
+  static getDerivedStateFromProps: React.GetDerivedStateFromProps<
+    InternalTableProps,
+    TableState
+  > = (props: InternalTableProps, state: TableState) => {
     const { filters } = props;
     const { selectedCells } = state;
     const newSelectedCells = new Set(Array.from(selectedCells));
@@ -106,10 +133,18 @@ class TableVis extends React.Component<TableProps, TableState> {
       colorPositiveNegative,
       height,
       tableFilter,
+      styles,
+      includeSearch,
     } = this.props;
 
+    const { filteredRows, searchKeyword } = this.state;
+
     const renderers: Renderers = {};
 
+    const dataToRender = searchKeyword !== '' ? filteredRows : data;
+
+    console.log(dataToRender);
+
     columns.forEach(column => {
       renderers[column.key] = getRenderer({
         column,
@@ -122,9 +157,34 @@ class TableVis extends React.Component<TableProps, TableState> {
     });
 
     return (
-      <DataTable data={data} zebra rowHeight={heightType} renderers={renderers} height={height} />
+      <React.Fragment>
+        {includeSearch && (
+          <div {...css(styles.searchBar)}>
+            <Input
+              name="search"
+              label=""
+              placeholder="Search"
+              onChange={this.handleSearch}
+              compact
+              value={searchKeyword}
+            />
+          </div>
+        )}
+        <DataTable
+          data={dataToRender}
+          zebra
+          rowHeight={heightType}
+          renderers={renderers}
+          height={height}
+        />
+      </React.Fragment>
     );
   }
 }
 
-export default TableVis;
+export default withStyles(() => ({
+  searchBar: {
+    display: 'flex',
+    flexDirection: 'row-reverse',
+  },
+}))(TableVis);
diff --git a/...lugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx b/...lugins/packages/superset-ui-plugins-demo/storybook/stories/plugin-chart-table/Stories.jsx
@@ -54,7 +54,7 @@ export default [
           formData: {
             alignPn: false,
             colorPn: true,
-            includeSearch: false,
+            includeSearch: true,
             pageLength: 0,
             metrics: ['sum__num', 'trend'],
             orderDesc: true,