update: filter 优化

packages/app/src/components/filter-fields/Tool.tsx

@@ -8,10 +8,11 @@ import {
   LDFilterSelect,
   LDFilterWrapper,
   LDFilterButtonGroup,
+  LDFilterSelectorModal,
 } from '@components';
-import {RangeValue} from '@hooks';
+import {RangeValue, createTableSettingContext, useContextSection} from '@hooks';
 
-export type FilterField<S extends Record<string, string | string[]>> =
+export type FilterField<S extends Record<string, unknown>> =
   | {label: string; type: 'input'; value: keyof S}
   | {label: string; type: 'date'; value: keyof S; enableTime?: boolean}
   | {
@@ -23,21 +24,23 @@ export type FilterField<S extends Record<string, string | string[]>> =
     hideClear?: boolean;
   };
 
-export type FilterGroupMap<S extends Record<string, string | string[]>> = Map<
+export type FilterGroupMap<S extends Record<string, unknown>> = Map<
 string,
 FilterField<S>
 >;
 
 type Props<S extends Record<string, string | string[]>> = {
-  filterData?: string;
-  sourceMap?: FilterGroupMap<S>;
+  fieldsMap?: FilterGroupMap<S>;
   fixedFields: FilterField<S>[];
   fields: Record<string, string | string[]>;
   isSearching: boolean;
   dates?: RangeValue<Dayjs>;
+  modalVisible?: boolean;
+  settingContext: ReturnType<typeof createTableSettingContext>,
   onReset: () => void;
   onSearch: () => void;
   onScreen?: () => void;
+  onCloseModal?: () => void;
   onChange?: (key: any) => (value: string | number) => void;
   onDatesChange?: (dates: RangeValue<Dayjs>) => void;
   'date-testid'?: string;
@@ -53,27 +56,38 @@ function LDFilterTool<S extends Record<string, string | string[]>>(
     onDatesChange,
     fixedFields,
     onSearch,
-    filterData,
-    sourceMap,
+    fieldsMap,
     onScreen,
     onReset,
     isSearching,
+    modalVisible,
+    onCloseModal,
+    settingContext,
   } = props;
 
+  const [conditions, dispatch] = useContextSection(
+    settingContext,
+    state => [state[0].conditions, state[1]],
+  );
+
+  function onScreenConfirm(value: string) {
+    dispatch({type: 'MODIFY', payload: {conditions: value}});
+  }
+
   const prevEls = useRef<FilterField<S>[]>([]);
 
   const list = useMemo<FilterField<S>[]>(
     function() {
-      if (!filterData || !sourceMap) return fixedFields;
+      if (!conditions || !fieldsMap) return fixedFields;
 
-      const arr = filterData.split(',').filter(Boolean);
+      const arr = conditions.split(',').filter(Boolean);
 
       const els = arr
         .map(function(id) {
-          if (!sourceMap.has(id))
+          if (!fieldsMap.has(id))
             return;
 
-          return {...sourceMap.get(id)!, id: Number(id)};
+          return {...fieldsMap.get(id)!, id: Number(id)};
         })
         .filter(Boolean)
         .sort((a, b) => a.id - b.id);
@@ -82,7 +96,7 @@ function LDFilterTool<S extends Record<string, string | string[]>>(
 
       return nextEls;
     },
-    [filterData, fixedFields, sourceMap],
+    [conditions, fixedFields, fieldsMap],
   );
 
   const onSearchFn = useLatest(onSearch);
@@ -125,56 +139,66 @@ function LDFilterTool<S extends Record<string, string | string[]>>(
   );
 
   return (
-    <LDFilterWrapper onSearch={onSearch} data-testid={props['date-testid']}>
-      {list.map(function(state) {
-        switch (state.type) {
-          default:
-          case 'input': {
-            return (
-              <LDFilterInput
-                key={state.label}
-                name={state.value as string}
-                label={state.label}
-                value={fields[state.value as string] as string}
-                onChange={onChange!(state.value)}
-              />
-            );
-          }
-          case 'date': {
-            return (
-              <LDFilterDate
-                key={state.label}
-                name={state.value as string}
-                label={state.label}
-                value={dates!}
-                onChange={onDatesChange!}
-                enableTime={state?.enableTime}
-              />
-            );
-          }
-          case 'select': {
-            return (
-              <LDFilterSelect
-                key={state.label}
-                name={state.value as string}
-                label={state.label}
-                value={fields[state.value as string]}
-                onChange={onChange?.(state.value)}
-                options={state.options}
-                hideClear={state.hideClear}
-                multiple={state.multiple}
-              />
-            );
+    <>
+      <LDFilterWrapper onSearch={onSearch} data-testid={props['date-testid']}>
+        {list.map(function(state) {
+          switch (state.type) {
+            default:
+            case 'input': {
+              return (
+                <LDFilterInput
+                  key={state.label}
+                  name={state.value as string}
+                  label={state.label}
+                  value={fields[state.value as string] as string}
+                  onChange={onChange!(state.value)}
+                />
+              );
+            }
+            case 'date': {
+              return (
+                <LDFilterDate
+                  key={state.label}
+                  name={state.value as string}
+                  label={state.label}
+                  value={dates!}
+                  onChange={onDatesChange!}
+                  enableTime={state?.enableTime}
+                />
+              );
+            }
+            case 'select': {
+              return (
+                <LDFilterSelect
+                  key={state.label}
+                  name={state.value as string}
+                  label={state.label}
+                  value={fields[state.value as string]}
+                  onChange={onChange?.(state.value)}
+                  options={state.options}
+                  hideClear={state.hideClear}
+                  multiple={state.multiple}
+                />
+              );
+            }
           }
-        }
-      })}
-      <LDFilterButtonGroup
-        onSearch={onSearch}
-        isSearching={isSearching}
-        onReset={onReset}
-        onScreen={onScreen}
-      />
-    </LDFilterWrapper>
+        })}
+        <LDFilterButtonGroup
+          onSearch={onSearch}
+          isSearching={isSearching}
+          onReset={onReset}
+          onScreen={onScreen}
+        />
+      </LDFilterWrapper>
+
+      {onScreen && <LDFilterSelectorModal
+        visible={modalVisible!}
+        onClose={onCloseModal!}
+        filtermap={fieldsMap!}
+        source={conditions}
+        onConfirm={onScreenConfirm}
+      />}
+    </>
   );
 }
 

packages/app/src/components/filter-selector-modal/hooks.ts

@@ -1,20 +1,28 @@
 import {FilterGroupMap} from '@components';
 import {FormEventHandler, useEffect, useMemo, useState} from 'react';
 
+function paraseData(data: string) {
+  return data.length > 0 ? data.split(',') : [];
+}
+
 export function useTransfer(
   map: FilterGroupMap<any>,
   data: string,
-  options: {onConfirm: (val: string) => void; onClose: () => void},
+  options: {
+    onConfirm: (val: string) => void,
+    onClose: () => void,
+    visible: boolean,
+  },
 ) {
   const {onConfirm, onClose} = options;
 
-  const [selected, setSelected] = useState<string[]>(data.split(','));
+  const [selected, setSelected] = useState<string[]>(paraseData(data));
 
   useEffect(
     function() {
-      setSelected(data.split(','));
+      options.visible && setSelected(paraseData(data));
     },
-    [data],
+    [data, options.visible],
   );
 
   const dataSourece = useMemo(
@@ -32,7 +40,7 @@ export function useTransfer(
 
   const onSubmit: FormEventHandler<HTMLFormElement> = function(e) {
     e.preventDefault();
-    onConfirm(selected.join(','));
+    onConfirm(selected.filter(Boolean).join(','));
     onClose();
   };
 

packages/app/src/components/filter-selector-modal/index.tsx

@@ -25,6 +25,7 @@ const LDFilterSelectorModal: FC<Props> = function({
     {
       onConfirm,
       onClose,
+      visible,
     },
   );
 

packages/app/src/pages/menu-second/filter/index.tsx

@@ -1,6 +1,11 @@
 import {FC} from 'react';
 import {useContextSection, useFilterState, useTableFilterEvents} from '@hooks';
-import {paramsContext, searchState, searchContext} from '../context';
+import {
+  paramsContext,
+  searchState,
+  searchContext,
+  settingContext,
+} from '../context';
 import {FilterField, LDFilterTool} from '@components';
 
 const fixedFields: FilterField<typeof searchState>[]
@@ -28,6 +33,7 @@ const MenuFilter: FC = function() {
       onChange={setState}
       isSearching={isSearching}
       fixedFields={fixedFields}
+      settingContext={settingContext}
     />
   );
 };

packages/app/src/pages/menu/filter/index.tsx

@@ -1,6 +1,11 @@
 import {FC} from 'react';
 import {useContextSection, useFilterState, useTableFilterEvents} from '@hooks';
-import {paramsContext, searchState, searchContext} from '../context';
+import {
+  paramsContext,
+  searchState,
+  searchContext,
+  settingContext,
+} from '../context';
 import {FilterField, LDFilterTool} from '@components';
 
 const fixedFields: FilterField<typeof searchState>[]
@@ -28,6 +33,7 @@ const MenuFilter: FC = function() {
       onChange={setState}
       isSearching={isSearching}
       fixedFields={fixedFields}
+      settingContext={settingContext}
     />
   );
 };

packages/app/src/pages/role/filter/index.tsx

@@ -1,6 +1,11 @@
 import {FC} from 'react';
 import {useContextSection, useFilterState, useTableFilterEvents} from '@hooks';
-import {paramsContext, searchState, searchContext} from '../context';
+import {
+  paramsContext,
+  searchState,
+  searchContext,
+  settingContext,
+} from '../context';
 import {FilterField, LDFilterTool} from '@components';
 
 const fixedFields: FilterField<typeof searchState>[]
@@ -28,6 +33,7 @@ const RoleFilter: FC = function() {
       onChange={setState}
       isSearching={isSearching}
       fixedFields={fixedFields}
+      settingContext={settingContext}
     />
   );
 };