fix: 评审问题处理

antvis · Oct 20, 2023 · b8f46df · b8f46df
1 parent 27fda00
commit b8f46df
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 28 deletions.
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx
@@ -3,7 +3,7 @@ import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
 import classnames from 'classnames';
 import { isEmpty, uniqueId } from 'lodash-es';
 import React, { useEffect, useMemo, useState } from 'react';
-import type { CustomItems, CustomMappingData } from '../type';
+import type { CustomMappingColor, CustomMappingData } from '../type';
 import CustomItem from './CustomItem';
 import useStyle from './style';
 
@@ -19,7 +19,7 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => {
   const { dataType = 'string', domain, value, onChange, className } = props;
   const prefixCls = usePrefixCls('formily-color-range-selector__custom-range');
   const [wrapSSR, hashId] = useStyle(prefixCls);
-  const [customRanges, setCustomRanges] = useState<CustomItems[]>([]);
+  const [customRanges, setCustomRanges] = useState<CustomMappingColor[]>([]);
 
   const selectedOption = useMemo(() => {
     if (dataType === 'string' && customRanges.length) {
@@ -40,7 +40,7 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => {
 
   useEffect(() => {
     if (value?.list?.length) {
-      const list = value.list.map((item: CustomItems) => {
+      const list = value.list.map((item: CustomMappingColor) => {
         return {
           id: uniqueId(),
           ...item,
@@ -68,16 +68,16 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => {
           color: _item.color ?? '#5B8FF9',
         },
       ];
-      const list: CustomItems[] = [...customRanges.slice(0, -1), ...addList];
+      const list: CustomMappingColor[] = [...customRanges.slice(0, -1), ...addList];
       setCustomRanges(list);
     } else {
-      const addItem: CustomItems = {
+      const addItem: CustomMappingColor = {
         id: uniqueId(),
         value: [],
         color: customRanges[customRanges.length - 1]?.color ?? '#5B8FF9',
       };
 
-      const list: CustomItems[] = [...customRanges, addItem];
+      const list: CustomMappingColor[] = [...customRanges, addItem];
       setCustomRanges(list);
     }
   };
@@ -114,7 +114,7 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => {
             return item;
           }
         })
-        .filter((item) => !isEmpty(item)) as CustomItems[];
+        .filter((item) => !isEmpty(item)) as CustomMappingColor[];
 
       setCustomRanges(list);
     } else {
@@ -177,7 +177,7 @@ const CustomMaPpingColor = (props: CustomMaPpingColorProps) => {
 
   return wrapSSR(
     <div className={classnames(`${prefixCls}`, hashId, className)}>
-      {customRanges.map((customItem: CustomItems, index: number) => {
+      {customRanges.map((customItem: CustomMappingColor, index: number) => {
         const [min, max] = domain as [number, number];
         const position = index === 0 ? 'first' : index === customRanges.length - 1 ? 'last' : null;
 

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts
@@ -1,13 +1,13 @@
 import { fill } from 'lodash-es';
 import { CUSTOM } from './constants';
-import type { CustomItems, CustomMappingData, SelectorValue } from './type';
+import type { CustomMappingColor, CustomMappingData, SelectorValue } from './type';
 
-// 字符映射转化
-const arrayToMap = (list: CustomItems[]) => {
-  const mapList: { color: string; value: string }[] = [];
+// 通过自定义颜色映射转换为 Scale 的 domain 与 range 数据
+const getScaleDataByMappingColors = (list: CustomMappingColor[]) => {
+  const mapList: { color: string; value: string | number }[] = [];
   list.forEach((item) => {
     item.value.forEach((_item) => {
-      mapList.push({ color: item.color, value: _item as string });
+      mapList.push({ color: item.color, value: _item });
     });
   });
 
@@ -39,7 +39,7 @@ export const getDefaultValue = (
       type: 'threshold',
       domain: _domain,
       range,
-    } as SelectorValue;
+    };
   } else {
     // 数值类型为 string 时
     const _domain = range.map((item, index) => {
@@ -49,19 +49,19 @@ export const getDefaultValue = (
       return { color: item, value: [defaultDomain[index]] };
     });
 
-    const { domain, range: colors } = arrayToMap(_domain);
+    const { domain, range: colors } = getScaleDataByMappingColors(_domain);
 
     return {
       isCustom: true,
       type: 'cat',
       domain,
       range: colors,
-    } as SelectorValue;
+    };
   }
 };
 
-// 将组件内部数据结构转化为图层数据
-export const transformToLayer = (val: CustomMappingData) => {
+// 通过自定义颜色映射转换为 Scale 的数据格式
+export const getScaleByCustomMappingData = (val: CustomMappingData) => {
   const { type, list } = val;
 
   if (type === 'number') {
@@ -73,24 +73,24 @@ export const transformToLayer = (val: CustomMappingData) => {
       type: 'threshold',
       domain: _val,
       range,
-    } as SelectorValue;
+    };
 
     return layerValue;
   }
 
-  const { domain, range } = arrayToMap(list);
+  const { domain, range } = getScaleDataByMappingColors(list);
   const layerValue = {
     isCustom: true,
     type: 'cat',
     domain,
     range,
-  } as SelectorValue;
+  };
 
   return layerValue;
 };
 
 // 将图层数据转化为组件内部数据结构
-export const transformToScale = (dataType: 'string' | 'number', val: SelectorValue) => {
+export const getCustomMappingData = (dataType: 'string' | 'number', val: SelectorValue) => {
   const isCustom = val.type === 'threshold' || (val.type === 'cat' && val.domain && val.domain.length !== 0);
 
   if (!isCustom) {

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/index.tsx
@@ -6,7 +6,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { useUpdateEffect } from 'ahooks';
 import { DEHAULT_OPTIONS } from './constants';
 import CustomMaPpingColor from './CustomMaPpingColor';
-import { getDefaultValue, transformToLayer, transformToScale } from './helper';
+import { getDefaultValue, getScaleByCustomMappingData, getCustomMappingData } from './helper';
 import useStyle from './style';
 import type { CustomMappingData, SelectorValue, SelectorValueType, SelectType } from './type';
 
@@ -28,7 +28,7 @@ const Internal = (props: ScaleSelectorProp) => {
 
   const defaultValue = useMemo(() => {
     if (value) {
-      return transformToScale(dataType, value);
+      return getCustomMappingData(dataType, value);
     }
   }, [value]);
 
@@ -43,7 +43,7 @@ const Internal = (props: ScaleSelectorProp) => {
 
   // 自定义数据变动
   const onValueChange = (ranges: CustomMappingData) => {
-    const _val = transformToLayer(ranges);
+    const _val = getScaleByCustomMappingData(ranges);
     onChange?.({ ..._val });
     setCustomOpen(false);
   };

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/type.ts
@@ -1,12 +1,12 @@
-export type CustomItems = {
+export type CustomMappingColor = {
   color: string;
-  value: (string | number | null)[];
+  value: (string | number)[];
   id?: string;
 };
 
 export type CustomMappingData = {
   type: 'number' | 'string';
-  list: CustomItems[];
+  list: CustomMappingColor[];
 };
 
 export type SelectType = 'custom' | 'quantize' | 'quantile' | 'cat';

diff --git a/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/index.tsx b/packages/li-p2/src/components/Formily/ColorRangeSelector/Internal/index.tsx
@@ -10,6 +10,9 @@ import useStyle from './style';
 import type { ColorRange, SelectorValue } from './types';
 
 export interface ColorRangeSelectorProps {
+  /**
+   * 是否可用
+   */
   disabled?: boolean;
   /**
    * 颜色值