fix: 修复一些逻辑上的 bug

antvis · Dec 26, 2023 · 0bfcfca · 0bfcfca
1 parent 21ca8ba
commit 0bfcfca
Show file tree

Hide file tree

Showing 8 changed files with 123 additions and 175 deletions.
diff --git a/...2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/DateItem/index.tsx b/...2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/DateItem/index.tsx
@@ -18,34 +18,20 @@ export interface DateItemProps {
 const DateItem: React.FC<DateItemProps> = (props) => {
   const prefixCls = usePrefixCls('formily-filter-setting-modal-date-item');
   const [wrapSSR, hashId] = useStyle(prefixCls);
-  const { value: defaultValue, format, onChange } = props;
-
-  const timer = useMemo(() => {
-    return defaultValue.value;
-  }, [defaultValue.value]);
-
-  const [granularity, setGranularity] = useState<GranularityItem>(DEFAULT_OPTIONS[0]);
-
+  const { value: outterValue, format, onChange } = props;
+  const dateValue = outterValue.value;
   // 粒度 options
-  const options = useMemo(() => {
-    if (format) {
-      const _options = getOptions(format);
+  const options = useMemo(() => (format ? getOptions(format) : []), [format]);
 
-      const _granularity = _options.find(
-        (item) => defaultValue.granularity && [item.granularity, item.value].includes(defaultValue.granularity),
-      );
-      if (_granularity) {
-        setGranularity(_granularity);
-      }
-      return _options;
-    }
-    return [];
-  }, [defaultValue, format]);
+  const [granularity, setGranularity] = useState<GranularityItem>(() => {
+    const _granularity = options.find((item) => [item.granularity, item.value].includes(outterValue.granularity));
+    return _granularity || DEFAULT_OPTIONS[0];
+  });
 
   // 时间类型
   const onDateTypeChange = (e: 'date' | 'range') => {
-    const _times = timer ? getTimeFormat(timer[0], granularity?.value) : undefined;
-    onChange({ ...defaultValue, value: _times, params: { ...defaultValue.params, dateType: e } });
+    const _times = dateValue ? getTimeFormat(dateValue[0], granularity?.value) : undefined;
+    onChange({ ...outterValue, value: _times, params: { ...outterValue.params, dateType: e } });
   };
 
   // 选择粒度
@@ -54,11 +40,11 @@ const DateItem: React.FC<DateItemProps> = (props) => {
 
     if (_granularity) {
       const _value: FilterDateConfigType = {
-        ...defaultValue,
+        ...outterValue,
         granularity: _granularity.granularity,
-        value: timer ? getTimeFormat(timer, _granularity?.value) : undefined,
+        value: dateValue ? getTimeFormat(dateValue, _granularity?.value) : undefined,
         params: {
-          ...defaultValue.params,
+          ...outterValue.params,
           format: _granularity.value,
         },
       };
@@ -71,7 +57,7 @@ const DateItem: React.FC<DateItemProps> = (props) => {
   const onValueChange = (val: any) => {
     const { value } = val;
     onChange({
-      ...defaultValue,
+      ...outterValue,
       value,
     });
   };
@@ -80,7 +66,7 @@ const DateItem: React.FC<DateItemProps> = (props) => {
     <>
       <div className={cls(`${prefixCls}__filter`, hashId)}>
         <div className={cls(`${prefixCls}__field`, hashId)}>日期类型</div>
-        <Radio.Group value={defaultValue.params.dateType || 'date'} onChange={(e) => onDateTypeChange(e.target.value)}>
+        <Radio.Group value={outterValue.params.dateType || 'date'} onChange={(e) => onDateTypeChange(e.target.value)}>
           <Radio value="date">单日期</Radio>
           <Radio value="range">日期区间</Radio>
         </Radio.Group>
@@ -91,7 +77,7 @@ const DateItem: React.FC<DateItemProps> = (props) => {
         <Select
           size="small"
           style={{ width: '100%' }}
-          value={granularity?.value}
+          value={granularity.value}
           options={options}
           onChange={onGranularityChange}
         />
@@ -101,10 +87,10 @@ const DateItem: React.FC<DateItemProps> = (props) => {
         <div className={cls(`${prefixCls}__field`, hashId)}>默认值</div>
         <FilterDateSetting
           isRenderExtraFooter={false}
-          value={defaultValue.value}
-          defaultFormat={defaultValue.params.format}
-          defaultGranularity={defaultValue.granularity}
-          defaultType={defaultValue.params.dateType}
+          value={outterValue.value}
+          format={outterValue.params.format}
+          granularity={outterValue.granularity}
+          type={outterValue.params.dateType}
           onChange={onValueChange}
         />
       </div>

diff --git a/...src/components/Formily/FilterConfiguration/FilterModal/FilterContent/NumberItem/index.tsx b/...src/components/Formily/FilterConfiguration/FilterModal/FilterContent/NumberItem/index.tsx
@@ -16,12 +16,12 @@ export interface NumberItemProps {
 const NumberItem: React.FC<NumberItemProps> = (props) => {
   const prefixCls = usePrefixCls('formily-filter-setting-modal-number-item');
   const [wrapSSR, hashId] = useStyle(prefixCls);
-  const { value: defaultValue, onChange } = props;
-  const { value, operator } = defaultValue;
+  const { value: outterValue, onChange } = props;
+  const { value, operator } = outterValue;
 
   const onValueChange = (val: number | [number, number] | undefined, operator: '>=' | '<=' | 'BETWEEN') => {
     const _value = {
-      ...defaultValue,
+      ...outterValue,
       value: val,
       operator,
     } as FilterNumberConfigType;

diff --git a/...src/components/Formily/FilterConfiguration/FilterModal/FilterContent/StringItem/index.tsx b/...src/components/Formily/FilterConfiguration/FilterModal/FilterContent/StringItem/index.tsx
@@ -14,14 +14,14 @@ export interface StringItemProps {
 const StringItem: React.FC<StringItemProps> = (props) => {
   const prefixCls = usePrefixCls('formily-filter-setting-modal-string-item');
   const [wrapSSR, hashId] = useStyle(prefixCls);
-  const { value: defaluValue, options = [], onChange } = props;
+  const { value: outterValue, options = [], onChange } = props;
 
   // 类型变化
   const onTypeChange = (type: 'single' | 'multiple') => {
     onChange({
-      ...defaluValue,
+      ...outterValue,
       params: {
-        ...defaluValue.params,
+        ...outterValue.params,
         filterType: type,
       },
       value: undefined,
@@ -30,7 +30,7 @@ const StringItem: React.FC<StringItemProps> = (props) => {
 
   const onValueChange = (val: string[] | undefined) => {
     onChange({
-      ...defaluValue,
+      ...outterValue,
       value: val,
     });
   };
@@ -39,7 +39,7 @@ const StringItem: React.FC<StringItemProps> = (props) => {
     <>
       <div className={cls(`${prefixCls}__filter`, hashId)}>
         <div className={cls(`${prefixCls}__field`, hashId)}>筛选方式</div>
-        <Radio.Group value={defaluValue.params?.filterType} onChange={(e) => onTypeChange(e.target.value)}>
+        <Radio.Group value={outterValue.params?.filterType} onChange={(e) => onTypeChange(e.target.value)}>
           <Radio value="single">单选</Radio>
           <Radio value="multiple">多选</Radio>
         </Radio.Group>
@@ -48,9 +48,9 @@ const StringItem: React.FC<StringItemProps> = (props) => {
       <div className={cls(`${prefixCls}__filter`, hashId)}>
         <div className={cls(`${prefixCls}__field`, hashId)}>设定默认值</div>
         <FilterStringConfig
-          value={defaluValue.value}
+          value={outterValue.value}
           domain={options}
-          filterType={defaluValue.params.filterType}
+          filterType={outterValue.params.filterType}
           onChange={onValueChange}
         />
       </div>

diff --git a/...ages/li-p2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/index.tsx b/...ages/li-p2/src/components/Formily/FilterConfiguration/FilterModal/FilterContent/index.tsx
@@ -24,21 +24,23 @@ export interface FilterContentProps {
 const FilterContent: React.FC<FilterContentProps> = (props) => {
   const prefixCls = usePrefixCls('formily-filter-setting-content');
   const [wrapSSR, hashId] = useStyle(prefixCls);
-  const { value: defaultValue, options, onChange } = props;
-  const [filter, setFilter] = useState<FilterConfigType>(defaultValue);
+  const { value: outterValue, options, onChange } = props;
+  const [filter, setFilter] = useState<FilterConfigType>(outterValue);
   const [format, setFormat] = useState<string>('YYYY');
   const [domain, setDomain] = useState<string[] | [number, number]>([]);
 
-  const openFieldSelect = defaultValue.field ? false : true;
+  const openFieldSelect = outterValue.field ? false : true;
 
   // 筛选字段变更
   const onFieldChange = (field: string) => {
-    const _field = options.find((item) => item.value === field) as OptionType;
-    setDomain(_field.domain ?? []);
-    setFormat(_field.format ?? '');
-    const _filter = { ...getDefaultValue(_field, filter.id) };
-    setFilter(_filter);
-    onChange(_filter);
+    const _field = options.find((item) => item.value === field);
+    if (_field) {
+      setDomain(_field?.domain ?? []);
+      setFormat(_field?.format ?? 'YYYY');
+      const _filter = { ...getDefaultValue(_field, filter.id) };
+      setFilter(_filter);
+      onChange(_filter);
+    }
   };
 
   // 配置项变更
@@ -48,15 +50,15 @@ const FilterContent: React.FC<FilterContentProps> = (props) => {
   };
 
   useEffect(() => {
-    setFilter(defaultValue);
-    if (defaultValue.field && options) {
-      const _field = options.find((item) => item.value === defaultValue.field);
+    if (outterValue.field && options) {
+      const _field = options.find((item) => item.value === outterValue.field);
       setDomain(_field?.domain ?? []);
       if (_field?.type === 'date') {
         setFormat(_field?.format || 'YYYY');
       }
     }
-  }, [defaultValue, options]);
+    setFilter(outterValue);
+  }, [outterValue, options]);
 
   if (!filter) {
     return null;