diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMaPpingColor/index.tsx index 67547615..942c6f89 100644 --- 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([]); + const [customRanges, setCustomRanges] = useState([]); 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(
- {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 index 2f328b41..cf8394b1 100644 --- 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 index a5916ec5..76744a8e 100644 --- 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 index 8bead7c3..b31bb33d 100644 --- 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 index 8980345a..7e311e92 100644 --- 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; /** * 颜色值