feat(protable): SJIP-764 add clear filters (Ferlab-Ste-Justine#419)

lflangis · Apr 4, 2024 · 25ebcbb · 25ebcbb
1 parent 4a09049
commit 25ebcbb
Show file tree

Hide file tree

Showing 7 changed files with 57 additions and 20 deletions.
diff --git a/packages/ui/Release.md b/packages/ui/Release.md
@@ -1,3 +1,6 @@
+### 9.10.0 2024-04-4
+- feat: SJIP-764 add clear filters in ProTable
+
 ### 9.9.7 2024-04-3
 - fix: SKFP-1003 fix not applicable tag
 

diff --git a/packages/ui/package-lock.json b/packages/ui/package-lock.json
diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@ferlab/ui",
-    "version": "9.9.7",
+    "version": "9.10.0",
     "description": "Core components for scientific research data portals",
     "publishConfig": {
         "access": "public"

diff --git a/packages/ui/src/components/ProTable/Header/index.module.scss b/packages/ui/src/components/ProTable/Header/index.module.scss
@@ -1,28 +1,36 @@
 .ProTableHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 
-  .extraCountInfo{
-    display: inline-block;
+    .extraCountInfo {
+        display: inline-block;
 
-    :global(.ant-divider) {
-      height: 22px;
-      margin: 0 12px;
-    }
+        :global(.ant-divider) {
+            height: 22px;
+            margin: 0 12px;
+        }
 
-    > div {
-      display: inline-block;
+        > div {
+            display: inline-block;
+        }
     }
-  }
 }
 
 .ProTableHeaderSelectAllBtn {
-  margin-left: 8px;
+    margin-left: 8px;
 }
 
 .ProTableHeaderClearSelectedBtn {
-    :not(span[role="img"]) {
-      margin-left: 4px;
+    :not(span[role='img']) {
+        margin-left: 4px;
     }
-}
+}
+
+.clearFilterLink {
+    margin-left: 12px;
+    padding: 0;
+    :global(.anticon + span) {
+        margin-left: 4px;
+    }
+}
diff --git a/packages/ui/src/components/ProTable/Header/index.tsx b/packages/ui/src/components/ProTable/Header/index.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement } from 'react';
-import { Divider, Space } from 'antd';
+import { CloseOutlined } from '@ant-design/icons';
+import { Button, Divider, Space } from 'antd';
 
 import { IProTableDictionary } from '../types';
 
@@ -23,14 +24,18 @@ interface OwnProps {
     onClearSelection?: () => void;
     className?: string;
     extraCountInfo?: React.ReactNode[];
+    hasFilter?: boolean;
+    clearFilter?: () => void;
 }
 
 const TableHeader = ({
     className,
+    clearFilter,
     dictionary = {},
     extra = [],
     extraCountInfo = [],
     extraSpacing = 12,
+    hasFilter = false,
     hideItemsCount = false,
     onClearSelection,
     onSelectAllResults,
@@ -68,6 +73,18 @@ const TableHeader = ({
                         <div>{element}</div>
                     </div>
                 ))}
+
+            {hasFilter && clearFilter && (
+                <Button
+                    className={styles.clearFilterLink}
+                    icon={<CloseOutlined />}
+                    onClick={clearFilter}
+                    size="small"
+                    type="link"
+                >
+                    {dictionary.itemCount?.clearFilters || 'Clear filters'}
+                </Button>
+            )}
         </div>
         <Space size={extraSpacing}>
             {extra.map((element, index) => (

diff --git a/packages/ui/src/components/ProTable/index.tsx b/packages/ui/src/components/ProTable/index.tsx
@@ -114,11 +114,15 @@ const ProTable = <RecordType extends object & { key: string } = any>({
     dictionary = {},
     enableRowSelection = false,
     headerConfig = {
+        clearFilter: () => {
+            // optional function when omit
+        },
         enableColumnSort: false,
         enableTableExport: false,
         extra: [],
         extraCountInfo: [],
         extraSpacing: 12,
+        hasFilter: false,
         itemCount: {
             pageIndex: 1,
             pageSize: 15,
@@ -270,10 +274,12 @@ const ProTable = <RecordType extends object & { key: string } = any>({
         >
             <TableHeader
                 className={tableHeaderClassName}
+                clearFilter={headerConfig.clearFilter}
                 dictionary={dictionary}
                 extra={getExtraConfig()}
                 extraCountInfo={headerConfig.extraCountInfo}
                 extraSpacing={headerConfig.extraSpacing}
+                hasFilter={headerConfig.hasFilter}
                 hideItemsCount={headerConfig.hideItemsCount}
                 onClearSelection={() => {
                     if (headerConfig.onClearSelection) {

diff --git a/packages/ui/src/components/ProTable/types.ts b/packages/ui/src/components/ProTable/types.ts
@@ -38,6 +38,7 @@ export interface IProTableDictionary {
         selectedPlural: ReactNode;
         selectAllResults: ReactNode;
         clear: ReactNode;
+        clearFilters: ReactNode;
     };
     tooltips?: {
         tableExport: ReactNode;
@@ -122,6 +123,8 @@ export type THeaderConfig<RecordType> = {
         total: number;
     };
     hideItemsCount?: boolean;
+    hasFilter?: boolean;
+    clearFilter?: () => void;
 };
 
 export type TColumnStates = Array<{