fix: 受控组件逻辑

antvis · Dec 26, 2023 · 604aa4f · 604aa4f
1 parent b0bdc05
commit 604aa4f
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 71 deletions.
diff --git a/packages/li-analysis-assets/src/widgets/FilterControl/Component/DateItem.tsx b/packages/li-analysis-assets/src/widgets/FilterControl/Component/DateItem.tsx
@@ -1,24 +1,23 @@
 import type { FilterDateConfigType } from '@antv/li-p2';
-import React from 'react';
 import { FilterDateConfig } from '@antv/li-p2';
+import React from 'react';
 
 export interface DateItemProps {
-  value: FilterDateConfigType;
+  defaultValue: FilterDateConfigType;
   onChange: (value: FilterDateConfigType) => void;
 }
 
 const DateItem: React.FC<DateItemProps> = (props) => {
-  const { value: defaultValue, onChange } = props;
+  const { defaultValue, onChange } = props;
 
   const onValueChange = (val: any) => {
-    const { format, type, granularity, value } = val;
+    const { type, granularity, value } = val;
     onChange({
       ...defaultValue,
       value,
       granularity,
       params: {
         ...defaultValue.params,
-        format,
         dateType: type,
       },
     });

diff --git a/packages/li-analysis-assets/src/widgets/FilterControl/Component/NumberItem.tsx b/packages/li-analysis-assets/src/widgets/FilterControl/Component/NumberItem.tsx
@@ -6,19 +6,19 @@ import React, { useState } from 'react';
 import useStyle from './style';
 
 export interface NumberItemProps {
-  value: FilterNumberConfigType;
+  defaluValue: FilterNumberConfigType;
   onChange: (value: FilterNumberConfigType) => void;
 }
 
 const NumberItem: React.FC<NumberItemProps> = (props) => {
-  const { value: defaluValue, onChange } = props;
+  const { defaluValue, onChange } = props;
   const styles = useStyle();
   const [open, setOpen] = useState(false);
 
-  const [valAndOperator, setValAndOperator] = useState<{
-    value?: number | [number, number];
-    operator: '>=' | '<=' | 'BETWEEN';
-  }>({ value: defaluValue.value, operator: defaluValue.operator });
+  const [valAndOperator, setValAndOperator] = useState<Pick<FilterNumberConfigType, 'operator' | 'value'>>({
+    value: defaluValue.value,
+    operator: defaluValue.operator,
+  });
 
   const onValueChange = (val: number | [number, number] | undefined, operator: '>=' | '<=' | 'BETWEEN') => {
     setValAndOperator({ value: val, operator });
@@ -45,11 +45,11 @@ const NumberItem: React.FC<NumberItemProps> = (props) => {
     </div>
   );
 
-  const title = !defaluValue.value
+  const title = !valAndOperator.value
     ? '不限'
-    : defaluValue.operator === 'BETWEEN'
-    ? `${defaluValue.value[0]} ~ ${defaluValue.value[1]}`
-    : `${defaluValue.operator} ${defaluValue.value}`;
+    : valAndOperator.operator === 'BETWEEN' && Array.isArray(valAndOperator.value)
+    ? `${valAndOperator.value[0]} ~ ${valAndOperator.value[1]}`
+    : `${valAndOperator.operator} ${valAndOperator.value}`;
 
   return (
     <Popover content={content} trigger="click" open={open} onOpenChange={handleOpenChange}>

diff --git a/packages/li-analysis-assets/src/widgets/FilterControl/Component/StringItem.tsx b/packages/li-analysis-assets/src/widgets/FilterControl/Component/StringItem.tsx
@@ -4,14 +4,14 @@ import { uniq } from 'lodash-es';
 import React, { useMemo } from 'react';
 
 export interface StringItemProps {
-  value: FilterStringConfigType;
+  defaluValue: FilterStringConfigType;
   field: string;
   data: Record<string, any>[];
   onChange: (value: FilterStringConfigType) => void;
 }
 
 const StringItem: React.FC<StringItemProps> = (props) => {
-  const { value: defaluValue, field, data, onChange } = props;
+  const { defaluValue, field, data, onChange } = props;
 
   const domain = useMemo(() => {
     const fieldData = data.map((item) => (typeof item[field] === 'object' ? JSON.stringify(item[field]) : item[field]));

diff --git a/packages/li-analysis-assets/src/widgets/FilterControl/Component/index.tsx b/packages/li-analysis-assets/src/widgets/FilterControl/Component/index.tsx
@@ -67,15 +67,6 @@ const LIFilterControl: React.FC<LIFilterControlProps> = (props) => {
   }, [defaultFilters]);
 
   const onValueChange = (val: FilterConfigType) => {
-    const _filterList = filterList.map((item) => {
-      if (item.id === val.id) {
-        return val;
-      }
-      return item;
-    });
-
-    setFilterList(_filterList);
-
     const updateNode = getFilterNode(val);
     updateFilterNode(val.id, updateNode);
   };
@@ -95,10 +86,10 @@ const LIFilterControl: React.FC<LIFilterControlProps> = (props) => {
               </div>
               <div className={classNames(`${CLS_PREFIX}__filter-item__content`, styles.filterItemContent)}>
                 {item.type === 'string' && (
-                  <StringItem value={item} field={item.field} data={tableData} onChange={onValueChange} />
+                  <StringItem defaluValue={item} field={item.field} data={tableData} onChange={onValueChange} />
                 )}
-                {item.type === 'number' && <NumberItem value={item} onChange={onValueChange} />}
-                {item.type === 'date' && <DateItem value={item} onChange={onValueChange} />}
+                {item.type === 'number' && <NumberItem defaluValue={item} onChange={onValueChange} />}
+                {item.type === 'date' && <DateItem defaultValue={item} onChange={onValueChange} />}
               </div>
             </div>
           );

diff --git a/...2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/DateItem/helper.ts b/...2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/DateItem/helper.ts
@@ -1,5 +1,5 @@
 import { isEmpty } from 'lodash-es';
-import { DEFAULT_OPTIONS } from '../../../components/FilterDateConfig/contents';
+import { DEFAULT_OPTIONS } from '../../../components/FilterDateConfig/constants';
 
 export const getOptions = (format: string) => {
   const isDiagonalLineSplit = format.indexOf('/') === -1;

diff --git a/...2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/DateItem/index.tsx b/...2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/DateItem/index.tsx
@@ -3,7 +3,7 @@ import { Radio, Select } from 'antd';
 import cls from 'classnames';
 import React, { useMemo, useState } from 'react';
 import { FilterDateSetting } from '../../../components';
-import { DEFAULT_OPTIONS } from '../../../components/FilterDateConfig/contents';
+import { DEFAULT_OPTIONS } from '../../../components/FilterDateConfig/constants';
 import { getTimeFormat } from '../../../components/FilterDateConfig/helper';
 import type { GranularityItem } from '../../../components/FilterDateConfig/type';
 import type { FilterDateConfigType } from '../../../type';

diff --git a/...n/components/FilterDateConfig/contents.ts → .../components/FilterDateConfig/constants.ts b/...n/components/FilterDateConfig/contents.ts → .../components/FilterDateConfig/constants.ts
diff --git a/...es/li-p2/src/components/Formily/FilterConfiguration/components/FilterDateConfig/helper.ts b/...es/li-p2/src/components/Formily/FilterConfiguration/components/FilterDateConfig/helper.ts
@@ -1,5 +1,5 @@
 import dayjs from 'dayjs';
-import { DEFAULT_OPTIONS, DateGranularity } from './contents';
+import { DateGranularity, DEFAULT_OPTIONS } from './constants';
 
 export const getTimeFormat = (
   times: [string, string] | string,

diff --git a/...es/li-p2/src/components/Formily/FilterConfiguration/components/FilterDateConfig/index.tsx b/...es/li-p2/src/components/Formily/FilterConfiguration/components/FilterDateConfig/index.tsx
@@ -3,7 +3,7 @@ import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import { DatePicker, Dropdown, Space } from 'antd';
 import cls from 'classnames';
 import dayjs from 'dayjs';
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { getGranularityOptions, getTimeFormat } from './helper';
 import useStyle from './style';
 import type { Granularity } from './type';
@@ -36,7 +36,7 @@ const FilterDateConfig: React.FC<FilterDateConfigProps> = (props) => {
     format,
     granularity,
     type = 'date',
-    value: defaultValue,
+    value: outterValue,
     size = 'middle',
     bordered = true,
     onChange,
@@ -46,8 +46,8 @@ const FilterDateConfig: React.FC<FilterDateConfigProps> = (props) => {
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const dataRef = useRef(0);
 
-  // 开关变化
-  const onOpenChange = (open: boolean) => {
+  // RangePicker 开关变化
+  const onRangePickerOpenChange = (open: boolean) => {
     setOpen(open);
     dataRef.current = 0;
   };
@@ -61,7 +61,7 @@ const FilterDateConfig: React.FC<FilterDateConfigProps> = (props) => {
           onChange({ value: _timer, format, type, granularity });
         }
       } else {
-        onChange({ value: '', format, type, granularity });
+        onChange({ value: undefined, format, type, granularity });
       }
     } else {
       if (dateString[0]) {
@@ -70,35 +70,31 @@ const FilterDateConfig: React.FC<FilterDateConfigProps> = (props) => {
           onChange({ value: _timer, format, type, granularity });
         }
       } else {
-        onChange({ value: '', format, type, granularity });
+        onChange({ value: undefined, format, type, granularity });
       }
     }
   };
 
   // 粒度变化
   const onGranularityChange = (format: string, granularity: Granularity) => {
-    const _timer = defaultValue ? getTimeFormat(defaultValue, format) : undefined;
+    const _timer = outterValue ? getTimeFormat(outterValue, format) : undefined;
     onChange({ value: _timer, format, type, granularity });
     setOpen(true);
   };
 
   // 区间变化
   const onDateOrRange = (type: 'date' | 'range') => {
-    const _times = defaultValue ? getTimeFormat(defaultValue[0], format) : '';
+    const _times = outterValue ? getTimeFormat(outterValue[0], format) : undefined;
     onChange({ value: _times, format, type, granularity });
     setOpen(true);
   };
 
-  const granularityOptions = useMemo(() => {
-    if (format) {
-      const _options = getGranularityOptions(format).map((item) => ({
+  const granularityOptions = format
+    ? getGranularityOptions(format).map((item) => ({
         ...item,
         label: <div onClick={() => onGranularityChange(item.value, item.granularity)}>{item.label}</div>,
-      }));
-      return _options;
-    }
-    return [];
-  }, [defaultValue]);
+      }))
+    : [];
 
   const dateRangeTtpe = [
     { key: 'date', value: 'date', label: <div onClick={() => onDateOrRange('date')}>单日期</div> },
@@ -142,9 +138,7 @@ const FilterDateConfig: React.FC<FilterDateConfigProps> = (props) => {
               showToday={false}
               onOpenChange={(open) => setOpen(open)}
               value={
-                defaultValue
-                  ? dayjs(typeof defaultValue === 'string' ? defaultValue : defaultValue[0], format)
-                  : undefined
+                outterValue ? dayjs(typeof outterValue === 'string' ? outterValue : outterValue[0], format) : undefined
               }
               picker={(granularity === 'day' ? 'date' : granularity) as 'year' | 'month' | 'date'}
               format={format}
@@ -159,9 +153,7 @@ const FilterDateConfig: React.FC<FilterDateConfigProps> = (props) => {
               open={open}
               onOpenChange={(open) => setOpen(open)}
               value={
-                defaultValue
-                  ? dayjs(typeof defaultValue === 'string' ? defaultValue : defaultValue[0], format)
-                  : undefined
+                outterValue ? dayjs(typeof outterValue === 'string' ? outterValue : outterValue[0], format) : undefined
               }
               showTime={{ format: format }}
               format={format}
@@ -179,8 +171,8 @@ const FilterDateConfig: React.FC<FilterDateConfigProps> = (props) => {
               bordered={bordered}
               size={size}
               open={open}
-              onOpenChange={onOpenChange}
-              value={defaultValue ? [dayjs(defaultValue[0], format), dayjs(defaultValue[1], format)] : undefined}
+              onOpenChange={onRangePickerOpenChange}
+              value={outterValue ? [dayjs(outterValue[0], format), dayjs(outterValue[1], format)] : undefined}
               picker={(granularity === 'day' ? 'date' : granularity) as 'year' | 'month' | 'date'}
               onChange={onRangePickerChange}
               format={format}
@@ -198,8 +190,8 @@ const FilterDateConfig: React.FC<FilterDateConfigProps> = (props) => {
               bordered={bordered}
               size={size}
               open={open}
-              onOpenChange={onOpenChange}
-              value={defaultValue ? [dayjs(defaultValue[0], format), dayjs(defaultValue[1], format)] : undefined}
+              onOpenChange={onRangePickerOpenChange}
+              value={outterValue ? [dayjs(outterValue[0], format), dayjs(outterValue[1], format)] : undefined}
               showTime={{ format: format }}
               onChange={onRangePickerChange}
               onCalendarChange={() => {

diff --git a/.../li-p2/src/components/Formily/FilterConfiguration/components/FilterNumberConfig/index.tsx b/.../li-p2/src/components/Formily/FilterConfiguration/components/FilterNumberConfig/index.tsx
@@ -10,24 +10,24 @@ export interface FilterNumberConfigProps {
 }
 
 const FilterNumberConfig: React.FC<FilterNumberConfigProps> = (props) => {
-  const { value: defaluValue, operator, size = 'middle', bordered = true, onChange } = props;
+  const { value: outterValue, operator, size = 'middle', bordered = true, onChange } = props;
   const [ranges, setRanges] = useState<[number | null, number | null]>([null, null]);
 
   useEffect(() => {
-    if (!defaluValue) {
+    if (!outterValue) {
       return;
     }
 
-    if (typeof defaluValue === 'number') {
+    if (typeof outterValue === 'number') {
       if (operator === '>=') {
-        setRanges([defaluValue, null]);
+        setRanges([outterValue, null]);
       } else if (operator === '<=') {
-        setRanges([null, defaluValue]);
+        setRanges([null, outterValue]);
       }
     } else {
-      setRanges(defaluValue);
+      setRanges(outterValue);
     }
-  }, [defaluValue]);
+  }, [outterValue]);
 
   const onValueChange = (val: [number | null, number | null]) => {
     const [minVal, maxVal] = val;

diff --git a/.../li-p2/src/components/Formily/FilterConfiguration/components/FilterStringConfig/index.tsx b/.../li-p2/src/components/Formily/FilterConfiguration/components/FilterStringConfig/index.tsx
@@ -2,6 +2,7 @@ import { Select } from 'antd';
 import React, { useEffect, useState } from 'react';
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import cls from 'classnames';
+import { useUpdateEffect } from 'ahooks';
 import { getOptions } from './helper';
 import useStyle from './style';
 
@@ -16,8 +17,8 @@ export interface FilterStringConfigProps {
 }
 
 const FilterStringConfig: React.FC<FilterStringConfigProps> = (props) => {
-  const { value: defaluValue, domain, filterType, size = 'middle', bordered = true, onChange } = props;
-  const [selectedOptions, setSelectedOptions] = useState<undefined | string[]>();
+  const { value: outterValue, domain, filterType, size = 'middle', bordered = true, onChange } = props;
+  const [selectedOptions, setSelectedOptions] = useState<undefined | string[]>(outterValue);
   const [options, setOptions] = useState<{ label: string; value: string; disabled?: boolean }[]>();
   const prefixCls = usePrefixCls('formily-filter-string-config');
   const [wrapSSR, hashId] = useStyle(prefixCls);
@@ -43,13 +44,13 @@ const FilterStringConfig: React.FC<FilterStringConfigProps> = (props) => {
     }
   };
 
-  useEffect(() => {
-    setSelectedOptions(defaluValue);
-  }, [defaluValue]);
+  useUpdateEffect(() => {
+    setSelectedOptions(outterValue);
+  }, [outterValue]);
 
   useEffect(() => {
     if (domain && domain.length) {
-      const isUsable = filterType === 'multiple' && defaluValue && defaluValue[0] === 'all' ? true : false;
+      const isUsable = filterType === 'multiple' && outterValue && outterValue[0] === 'all' ? true : false;
       const _options = getOptions(domain, isUsable);
       setOptions(_options);
     }