feat(Datagrid): Filter flyout

packages/cloud-cognitive/src/components/Datagrid/Datagrid.stories.js

@@ -6,14 +6,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import { range, makeData, newPersonWithTwoLines } from './utils/makeData';
+import { StatusIcon } from '../StatusIcon';
 
 import { getStoryTitle } from '../../global/js/utils/story-helper';
 
 import { action } from '@storybook/addon-actions';
-import { Activity16, Add16 } from '@carbon/icons-react';
-import { DataTable } from 'carbon-components-react';
+
+import {
+  Activity16,
+  Restart16,
+  Download16,
+  Filter16,
+  Add16,
+} from '@carbon/icons-react';
+import {
+  DataTable,
+  Button,
+  DatePicker,
+  DatePickerInput,
+  TextInput,
+  Dropdown,
+  Checkbox,
+} from 'carbon-components-react';
 import {
   Datagrid,
   useDatagrid,
@@ -25,6 +41,7 @@ import {
   useSelectAllWithToggle,
   useStickyColumn,
   useActionsColumn,
+  useFiltering,
 } from '.';
 
 import { SelectAllWitHToggle, LeftPanelStory } from './Datagrid.stories';
@@ -36,6 +53,8 @@ import styles from './_storybook-styles.scss';
 import { DatagridActions } from './utils/DatagridActions';
 import { DatagridPagination } from './utils/DatagridPagination';
 import { Wrapper } from './utils/Wrapper';
+import { ButtonMenu, ButtonMenuItem } from '../ButtonMenu';
+import { FilterFlyout } from './Datagrid/addons/Filtering';
 
 export default {
   title: getStoryTitle(Datagrid.displayName),
@@ -74,6 +93,15 @@ const defaultHeader = [
     accessor: 'visits',
     width: 60,
   },
+  {
+    Header: 'Status',
+    accessor: 'status',
+  },
+  {
+    Header: 'Joined',
+    accessor: 'joined',
+    Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,
+  },
   {
     Header: 'Someone 1',
     accessor: 'someone1',
@@ -102,18 +130,6 @@ const defaultHeader = [
     Header: 'Someone 7',
     accessor: 'someone7',
   },
-  {
-    Header: 'Someone 8',
-    accessor: 'someone8',
-  },
-  {
-    Header: 'Someone 9',
-    accessor: 'someone9',
-  },
-  {
-    Header: 'Someone 10',
-    accessor: 'someone10',
-  },
 ];
 
 const { TableBatchAction, TableBatchActions } = DataTable;
@@ -308,6 +324,298 @@ export const SelectableRow = () => {
   return <Datagrid datagridState={{ ...datagridState }} />;
 };
 
+export const Filtering = () => {
+  const headers = [
+    {
+      Header: 'Row Index',
+      accessor: (row, i) => i,
+      sticky: 'left',
+      id: 'rowIndex', // id is required when accessor is a function.
+    },
+    {
+      Header: 'First Name',
+      accessor: 'firstName',
+    },
+    {
+      Header: 'Last Name',
+      accessor: 'lastName',
+    },
+    {
+      Header: 'Age',
+      accessor: 'age',
+      width: 50,
+    },
+    {
+      Header: 'Visits',
+      accessor: 'visits',
+      filter: 'number',
+      width: 60,
+    },
+    {
+      Header: 'Status',
+      accessor: 'status',
+    },
+    // Shows the date filter example
+    {
+      Header: 'Joined',
+      accessor: 'joined',
+      filter: 'date',
+      Cell: ({ cell: { value } }) => <span>{value.toLocaleDateString()}</span>,
+    },
+    // Shows the radio button filter example
+    {
+      Header: 'Password strength',
+      accessor: 'passwordStrength',
+      filter: 'checkbox',
+      Cell: ({ cell: { value } }) => {
+        const iconProps = {
+          size: 'sm',
+          theme: 'light',
+          kind: value,
+          iconDescription: value,
+        };
+
+        return (
+          <span
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <StatusIcon {...iconProps} />
+            {iconProps.iconDescription}
+          </span>
+        );
+      },
+    },
+  ];
+
+  const columns = React.useMemo(() => headers, []);
+  const [data] = useState(makeData(100));
+
+  const FilterDatagridActions = (datagridState) => {
+    const {
+      selectedFlatRows,
+      setGlobalFilter,
+      CustomizeColumnsButton,
+      RowSizeDropdown,
+      rowSizeDropdownProps,
+      useDenseHeader,
+      getFilterFlyoutProps,
+      applyFilters,
+    } = datagridState;
+
+    /** State for filters */
+    const [passwordOptions, setPasswordOptions] = useState([
+      { label: 'Normal', value: 'normal', selected: false },
+      { label: 'Minor warning', value: 'minor-warning', selected: false },
+      { label: 'Critical', value: 'critical', selected: false },
+    ]);
+
+    const downloadCsv = () => {
+      alert('Downloading...');
+    };
+    const { TableToolbarContent, TableToolbarSearch } = DataTable;
+
+    const refreshColumns = () => {
+      alert('refreshing...');
+    };
+    const leftPanelClick = () => {
+      alert('open/close left panel...');
+    };
+    const searchForAColumn = 'Search';
+    const isNothingSelected = selectedFlatRows.length === 0;
+    const style = {
+      'button:nth-child(1) > span:nth-child(1)': {
+        bottom: '-37px',
+      },
+    };
+
+    const handlePasswordStrengthChange = (isSelected, id) => {
+      const passwordOptionsCopy = [...passwordOptions];
+      const option = passwordOptionsCopy.find((option) => option.label === id);
+      option.selected = isSelected;
+      setPasswordOptions(passwordOptionsCopy);
+    };
+
+    const renderFilterFlyout = useCallback(() => {
+      return (
+        <FilterFlyout {...getFilterFlyoutProps()}>
+          <DatePicker
+            datePickerType="range"
+            onChange={(value) => {
+              applyFilters({ column: 'joined', value });
+            }}
+          >
+            <DatePickerInput
+              id="date-picker-input-id-start"
+              placeholder="mm/dd/yyyy"
+              labelText="Joined start date"
+            />
+            <DatePickerInput
+              id="date-picker-input-id-finish"
+              placeholder="mm/dd/yyyy"
+              labelText="Joined end date"
+            />
+          </DatePicker>
+          <TextInput
+            invalidText="A valid value is required"
+            labelText="Visits"
+            placeholder="Type a number amount of visits"
+            onChange={(event) => {
+              applyFilters({
+                column: 'visits',
+                value: event.target.value,
+              });
+            }}
+          />
+          <Dropdown
+            id="marital-status-dropdown"
+            ariaLabel="Marital status dropdown"
+            items={['relationship', 'complicated', 'single']}
+            label="Marital status"
+            titleText="Marital status"
+            onChange={({ selectedItem }) => {
+              applyFilters({
+                column: 'status',
+                value: selectedItem,
+              });
+            }}
+          />
+          <fieldset className="bx--fieldset">
+            <legend className="bx--label">Password strength</legend>
+            {passwordOptions.map((option) => (
+              <Checkbox
+                key={option.label}
+                selected={option.selected}
+                labelText={option.label}
+                onChange={(isSelected) => {
+                  handlePasswordStrengthChange(isSelected, option.label);
+                  applyFilters({
+                    column: 'passwordStrength',
+                    value: passwordOptions,
+                  });
+                }}
+                id={option.label}
+              />
+            ))}
+          </fieldset>
+        </FilterFlyout>
+      );
+    }, []);
+
+    return (
+      isNothingSelected &&
+      (useDenseHeader && useDenseHeader ? (
+        <TableToolbarContent size="sm">
+          <div style={style}>
+            <Button
+              kind="ghost"
+              hasIconOnly
+              tooltipPosition="bottom"
+              renderIcon={Download16}
+              iconDescription={'Download CSV'}
+              onClick={downloadCsv}
+            />
+          </div>
+          <div style={style}>
+            <Button
+              kind="ghost"
+              hasIconOnly
+              tooltipPosition="bottom"
+              renderIcon={Filter16}
+              iconDescription={'Left panel'}
+              onClick={leftPanelClick}
+            />
+          </div>
+          {renderFilterFlyout()}
+          <RowSizeDropdown {...rowSizeDropdownProps} />
+          <div style={style} className={`${blockClass}__toolbar-divider`}>
+            <Button kind="ghost" renderIcon={Add16} iconDescription={'Action'}>
+              Ghost button
+            </Button>
+          </div>
+
+          {CustomizeColumnsButton && (
+            <div style={style}>
+              <CustomizeColumnsButton />
+            </div>
+          )}
+        </TableToolbarContent>
+      ) : (
+        <TableToolbarContent>
+          <TableToolbarSearch
+            size="xl"
+            id="columnSearch"
+            persistent
+            placeHolderText={searchForAColumn}
+            onChange={(e) => setGlobalFilter(e.target.value)}
+          />
+          {renderFilterFlyout()}
+          <RowSizeDropdown {...rowSizeDropdownProps} />
+          <div style={style}>
+            <Button
+              kind="ghost"
+              hasIconOnly
+              tooltipPosition="bottom"
+              renderIcon={Restart16}
+              iconDescription={'Refresh'}
+              onClick={refreshColumns}
+            />
+          </div>
+          <div style={style}>
+            <Button
+              kind="ghost"
+              hasIconOnly
+              tooltipPosition="bottom"
+              renderIcon={Download16}
+              iconDescription={'Download CSV'}
+              onClick={downloadCsv}
+            />
+          </div>
+          {CustomizeColumnsButton && (
+            <div style={style}>
+              <CustomizeColumnsButton />
+            </div>
+          )}
+          <ButtonMenu label="Primary button" renderIcon={Add16}>
+            <ButtonMenuItem
+              itemText="Option 1"
+              onClick={action(`Click on ButtonMenu Option 1`)}
+            />
+            <ButtonMenuItem
+              itemText="Option 2"
+              onClick={action(`Click on ButtonMenu Option 2`)}
+            />
+            <ButtonMenuItem
+              itemText="Option 3"
+              onClick={action(`Click on ButtonMenu Option 3`)}
+            />
+          </ButtonMenu>
+        </TableToolbarContent>
+      ))
+    );
+  };
+
+  const datagridState = useDatagrid(
+    {
+      columns,
+      data,
+      filterProps: {
+        updateMethod: 'batch',
+      },
+      DatagridActions: FilterDatagridActions,
+      batchActions: true,
+      toolbarBatchActions: getBatchActions(),
+    },
+    useSelectRows,
+    useFiltering
+  );
+
+  return <Datagrid datagridState={{ ...datagridState }} />;
+};
+
 export const RadioSelect = () => {
   const columns = React.useMemo(() => defaultHeader, []);
   const [data] = useState(makeData(10));