feat(Datagrid): Filter flyout

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

@@ -6,36 +6,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState, useEffect } from 'react';
-import { range, makeData, newPersonWithTwoLines } from './utils/makeData';
+import React, { useEffect, useState } from 'react';
+import { StatusIcon } from '../StatusIcon';
+import { makeData, newPersonWithTwoLines, range } from './utils/makeData';
 
 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 {
   Datagrid,
+  useActionsColumn,
   useDatagrid,
+  useDisableSelectRows,
+  useFiltering,
   useInfiniteScroll,
   useRowIsMouseOver,
+  useSelectAllWithToggle,
   useSelectRows,
   useSortableColumns,
-  useDisableSelectRows,
-  useSelectAllWithToggle,
   useStickyColumn,
-  useActionsColumn,
 } from '.';
 
-import { SelectAllWitHToggle, LeftPanelStory } from './Datagrid.stories';
 import mdx from './Datagrid.mdx';
+import { LeftPanelStory, SelectAllWitHToggle } from './Datagrid.stories';
 
 import { pkg } from '../../settings';
 
-import styles from './_storybook-styles.scss';
 import { DatagridActions } from './utils/DatagridActions';
 import { DatagridPagination } from './utils/DatagridPagination';
 import { Wrapper } from './utils/Wrapper';
+import styles from './_storybook-styles.scss';
 
 export default {
   title: getStoryTitle(Datagrid.displayName),
@@ -74,6 +77,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 +114,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;
@@ -312,6 +312,217 @@ 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 checkbox 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>
+        );
+      },
+    },
+    // Shows the checkbox filter example
+    {
+      Header: 'Role',
+      accessor: 'role',
+    },
+  ];
+
+  const columns = React.useMemo(() => headers, []);
+  const [data] = useState(makeData(20));
+
+  const filters = [
+    {
+      type: 'date',
+      column: 'joined',
+      props: {
+        DatePicker: {
+          datePickerType: 'range',
+        },
+        DatePickerInput: {
+          start: {
+            id: 'date-picker-input-id-start',
+            placeholder: 'mm/dd/yyyy',
+            labelText: 'Joined start date',
+          },
+          end: {
+            id: 'date-picker-input-id-end',
+            placeholder: 'mm/dd/yyyy',
+            labelText: 'Joined end date',
+          },
+        },
+      },
+    },
+    {
+      type: 'number',
+      column: 'visits',
+      props: {
+        NumberInput: {
+          min: 0,
+          id: 'visits-number-input',
+          invalidText: 'A valid value is required',
+          label: 'Visits',
+          placeholder: 'Type a number amount of visits',
+        },
+      },
+    },
+    {
+      type: 'checkbox',
+      column: 'passwordStrength',
+      props: {
+        FormGroup: {
+          legendText: 'Password strength',
+        },
+        Checkbox: [
+          {
+            id: 'normal',
+            labelText: 'Normal',
+            value: 'normal',
+          },
+          {
+            id: 'minor-warning',
+            labelText: 'Minor warning',
+            value: 'minor-warning',
+          },
+          {
+            id: 'critical',
+            labelText: 'Critical',
+            value: 'critical',
+          },
+        ],
+      },
+    },
+    {
+      type: 'radio',
+      column: 'role',
+      props: {
+        FormGroup: {
+          legendText: 'Role',
+        },
+        RadioButtonGroup: {
+          orientation: 'vertical',
+          legend: 'Role legend',
+          name: 'role-radio-button-group',
+        },
+        RadioButton: [
+          {
+            id: 'developer',
+            labelText: 'Developer',
+            value: 'developer',
+          },
+          {
+            id: 'designer',
+            labelText: 'Designer',
+            value: 'designer',
+          },
+          {
+            id: 'researcher',
+            labelText: 'Researcher',
+            value: 'researcher',
+          },
+        ],
+      },
+    },
+    {
+      type: 'dropdown',
+      column: 'status',
+      props: {
+        Dropdown: {
+          id: 'marital-status-dropdown',
+          ariaLabel: 'Marital status dropdown',
+          items: ['relationship', 'complicated', 'single'],
+          label: 'Marital status',
+          titleText: 'Marital status',
+        },
+      },
+    },
+  ];
+
+  const datagridState = useDatagrid(
+    {
+      columns,
+      data,
+      emptyStateTitle: 'No filters match',
+      emptyStateDescription:
+        'Data was not found with the current filters applied. Change filters or clear filters to see other results.',
+      filterProps: {
+        variation: 'flyout',
+        updateMethod: 'batch',
+        primaryActionLabel: 'Apply',
+        secondaryActionLabel: 'Cancel',
+        flyoutIconDescription: 'Open filters',
+        shouldClickOutsideToClose: false,
+        onFlyoutOpen: action('onFlyoutOpen'),
+        onFlyoutClose: action('onFlyoutClose'),
+        filters,
+      },
+      DatagridActions,
+      batchActions: true,
+      toolbarBatchActions: getBatchActions(),
+    },
+    useSelectRows,
+    useFiltering
+  );
+
+  return <Datagrid datagridState={{ ...datagridState }} />;
+};
+
 export const RadioSelect = () => {
   const columns = React.useMemo(() => defaultHeader, []);
   const [data] = useState(makeData(10));

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

@@ -14,6 +14,7 @@ import { pkg } from '../../../settings';
 import pconsole from '../../../global/js/utils/pconsole';
 import { InlineEditProvider } from './addons/InlineEdit/InlineEditContext';
 import { DatagridContent } from './DatagridContent';
+import { FilterProvider } from './addons/Filtering/FilterProvider';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const componentName = 'Datagrid';
@@ -33,38 +34,41 @@ export let Datagrid = React.forwardRef(({ datagridState, ...rest }, ref) => {
     tableId,
     leftPanel,
     className,
+    state: { filters },
   } = datagridState;
 
   const rows = (DatagridPagination && datagridState.page) || datagridState.rows;
 
   return (
-    <InlineEditProvider>
-      <div
-        {...rest}
-        id={tableId}
-        ref={ref}
-        className={cx(
-          className,
-          blockClass,
-          withVirtualScroll
-            ? `${blockClass}__datagridWrap`
-            : `${blockClass}__datagridWrap-simple`,
-          !isFetching && rows.length === 0 ? `${blockClass}__empty-state` : ''
-        )}
-        {...getDevtoolsProps(componentName)}
-      >
-        {leftPanel && (
-          <div
-            className={`${blockClass}__datagridWithPanel ${blockClass}__displayFlex ${blockClass}__leftPanel-position`}
-          >
+    <FilterProvider filters={filters}>
+      <InlineEditProvider>
+        <div
+          {...rest}
+          id={tableId}
+          ref={ref}
+          className={cx(
+            className,
+            blockClass,
+            withVirtualScroll
+              ? `${blockClass}__datagridWrap`
+              : `${blockClass}__datagridWrap-simple`,
+            !isFetching && rows.length === 0 ? `${blockClass}__empty-state` : ''
+          )}
+          {...getDevtoolsProps(componentName)}
+        >
+          {leftPanel && (
+            <div
+              className={`${blockClass}__datagridWithPanel ${blockClass}__displayFlex ${blockClass}__leftPanel-position`}
+            >
+              <DatagridContent datagridState={datagridState} />
+            </div>
+          )}
+          {leftPanel === undefined && (
             <DatagridContent datagridState={datagridState} />
-          </div>
-        )}
-        {leftPanel === undefined && (
-          <DatagridContent datagridState={datagridState} />
-        )}
-      </div>
-    </InlineEditProvider>
+          )}
+        </div>
+      </InlineEditProvider>
+    </FilterProvider>
   );
 });