fix: 结构调整

antvis · Nov 24, 2023 · c801e92 · c801e92
1 parent c9714e4
commit c801e92
Show file tree

Hide file tree

Showing 16 changed files with 63 additions and 66 deletions.
diff --git a/.../CustomCat/CustomInput/InputCat/index.tsx → ...s/CustomCat/CustomItem/InputCat/index.tsx b/.../CustomCat/CustomInput/InputCat/index.tsx → ...s/CustomCat/CustomItem/InputCat/index.tsx
diff --git a/...ingColors/CustomCat/CustomInput/index.tsx → ...pingColors/CustomCat/CustomItem/index.tsx b/...ingColors/CustomCat/CustomInput/index.tsx → ...pingColors/CustomCat/CustomItem/index.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import InputCat from './InputCat';
 import useStyle from './style';
 
-type RangeItemProps = {
+type CustomItemProps = {
   min?: number;
   max?: number;
   color: string;
@@ -16,14 +16,14 @@ type RangeItemProps = {
   onChange: (value: number[], color: string) => void;
 };
 
-const RangeItem = ({
+const CustomItem = ({
   color: defaultColor,
   value: defaultValue,
   min = 0,
   max = 100,
   onDelete,
   onChange,
-}: RangeItemProps) => {
+}: CustomItemProps) => {
   const prefixCls = usePrefixCls('formily-rester--scale-selector__custom-input');
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -61,4 +61,4 @@ const RangeItem = ({
   );
 };
 
-export default RangeItem;
+export default CustomItem;
diff --git a/...pingColors/CustomCat/CustomInput/style.ts → ...ppingColors/CustomCat/CustomItem/style.ts b/...pingColors/CustomCat/CustomInput/style.ts → ...ppingColors/CustomCat/CustomItem/style.ts
diff --git a/...src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomCat/index.tsx b/...src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomCat/index.tsx
@@ -4,38 +4,38 @@ import classnames from 'classnames';
 import { uniqueId } from 'lodash-es';
 import React from 'react';
 import type { CustomMappingColorItem } from '../../type';
-import CustomInput from './CustomInput';
+import CustomItem from './CustomItem';
 import useStyle from './style';
 
 type CustomStringProps = {
-  customRanges: CustomMappingColorItem[];
+  value: CustomMappingColorItem[];
   onChange: (value: CustomMappingColorItem[]) => void;
   className?: string;
 };
 
 const CustomString = (props: CustomStringProps) => {
-  const { customRanges = [], onChange, className } = props;
+  const { value: defaultValue = [], onChange, className } = props;
   const prefixCls = usePrefixCls('formily-color-range-selector__custom-string');
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const addPaletteRangeItem = () => {
     const addItem: CustomMappingColorItem = {
       id: uniqueId(),
       value: [],
-      color: customRanges[customRanges.length - 1]?.color ?? '#5B8FF9',
+      color: defaultValue[defaultValue.length - 1]?.color ?? '#5B8FF9',
     };
 
-    const list: CustomMappingColorItem[] = [...customRanges, addItem];
+    const list: CustomMappingColorItem[] = [...defaultValue, addItem];
     onChange(list);
   };
 
   const deletePaletteRangeItem = (index: number) => {
-    const _ranges = customRanges.filter((_, _index) => _index !== index);
+    const _ranges = defaultValue.filter((_, _index) => _index !== index);
     onChange(_ranges);
   };
 
   const onChangePaletteRangeItem = (value: number[], color: string, index: number) => {
-    const list = customRanges.map((item, _index) => {
+    const list = defaultValue.map((item, _index) => {
       if (index === _index) {
         const _item: CustomMappingColorItem = {
           ...item,
@@ -53,9 +53,9 @@ const CustomString = (props: CustomStringProps) => {
 
   return wrapSSR(
     <div className={classnames(`${prefixCls}`, hashId, className)}>
-      {customRanges.map((customItem: CustomMappingColorItem, index: number) => {
+      {defaultValue.map((customItem: CustomMappingColorItem, index: number) => {
         return (
-          <CustomInput
+          <CustomItem
             key={`custom-input-cat${index}`}
             color={customItem.color}
             value={customItem.value}

diff --git a/...ges/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/index.tsx b/...ges/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/index.tsx
@@ -47,11 +47,11 @@ const CustomMappingColor = (props: CustomMappingColorProps) => {
   return wrapSSR(
     <div className={classnames(`${prefixCls}`, hashId, className)}>
       <div className={classnames(`${prefixCls}_custom-content`, hashId, className)}>
-        {type === 'cat' && <CustomCat customRanges={customRanges} onChange={onCustomRangesChange} />}
+        {type === 'cat' && <CustomCat value={customRanges} onChange={onCustomRangesChange} />}
         {type === 'custom' && (
           <CustomNumber
             domain={domain}
-            customRanges={customRanges}
+            value={customRanges}
             onChange={(list) => onCustomRangesChange(list as CustomMappingColorItem[])}
           />
         )}

diff --git a/...mNumber/CustomInput/InputNumber/index.tsx → ...omNumber/CustomItem/InputNumber/index.tsx b/...mNumber/CustomInput/InputNumber/index.tsx → ...omNumber/CustomItem/InputNumber/index.tsx
diff --git a/...omNumber/CustomInput/InputNumber/style.ts → ...tomNumber/CustomItem/InputNumber/style.ts b/...omNumber/CustomInput/InputNumber/style.ts → ...tomNumber/CustomItem/InputNumber/style.ts
diff --git a/...Colors/CustomNumber/CustomInput/index.tsx → ...gColors/CustomNumber/CustomItem/index.tsx b/...Colors/CustomNumber/CustomInput/index.tsx → ...gColors/CustomNumber/CustomItem/index.tsx
@@ -1,31 +1,33 @@
 import { DeleteOutlined } from '@ant-design/icons';
 import { usePrefixCls } from '@formily/antd-v5/esm/__builtins__';
-import { ColorPicker } from 'antd';
+import { Button, ColorPicker } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import classnames from 'classnames';
 import React from 'react';
 import InputNumber from './InputNumber';
 import useStyle from './style';
 
-type RangeItemProps = {
+type CustomItemProps = {
   position: string | null;
   min?: number;
   max?: number;
   color: string;
+  delDisable: boolean;
   value: (string | number)[];
   onDelete: () => void;
   onChange: (value: (string | number)[], color: string) => void;
 };
 
-const RangeItem = ({
+const CustomItem = ({
   position,
   color: defaultColor,
   value: defaultValue,
+  delDisable = false,
   min = 0,
   max = 100,
   onDelete,
   onChange,
-}: RangeItemProps) => {
+}: CustomItemProps) => {
   const prefixCls = usePrefixCls('formily-scale-selector__custom-content__custom-number__input');
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -62,12 +64,12 @@ const RangeItem = ({
           />
         </div>
 
-        <div className={`${prefixCls}__infor__delete-icon`} onClick={onDelete}>
-          <DeleteOutlined />
-        </div>
+        <Button type="link" disabled={delDisable} className={`${prefixCls}__infor__delete-icon`}>
+          <DeleteOutlined onClick={onDelete} />
+        </Button>
       </div>
     </div>,
   );
 };
 
-export default RangeItem;
+export default CustomItem;
diff --git a/...gColors/CustomNumber/CustomInput/style.ts → ...ngColors/CustomNumber/CustomItem/style.ts b/...gColors/CustomNumber/CustomInput/style.ts → ...ngColors/CustomNumber/CustomItem/style.ts
@@ -1,7 +1,7 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('scale-selector__custom-content__custom-number__input', (token) => {
-  const { componentCls, antCls, colorInfoTextHover } = token;
+  const { componentCls, antCls, colorTextDescription } = token;
 
   return {
     [componentCls]: {
@@ -31,10 +31,8 @@ export default genStyleHook('scale-selector__custom-content__custom-number__inpu
 
         '&__delete-icon': {
           width: '14px',
-        },
-
-        '&__delete-icon:hover': {
-          color: colorInfoTextHover,
+          padding: 0,
+          color: colorTextDescription,
         },
       },
     },

diff --git a/...p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/index.tsx b/...p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomNumber/index.tsx
@@ -4,24 +4,23 @@ import classnames from 'classnames';
 import { uniqueId } from 'lodash-es';
 import React from 'react';
 import type { CustomMappingColorItem } from '../../type';
-import CustomInput from './CustomInput';
+import CustomItem from './CustomItem';
 import useStyle from './style';
 
 type CustomNumberProps = {
   domain: string[] | [number, number];
-  value?: CustomMappingColorItem[];
-  customRanges: CustomMappingColorItem[];
+  value: CustomMappingColorItem[];
   onChange: (value: CustomMappingColorItem[]) => void;
   className?: string;
 };
 
 const CustomNumber = (props: CustomNumberProps) => {
-  const { customRanges = [], domain, onChange, className } = props;
+  const { value: defaultValue = [], domain, onChange, className } = props;
   const prefixCls = usePrefixCls('formily-color-range-selector__custom-number');
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const addPaletteRangeItem = () => {
-    const _item = customRanges[customRanges.length - 2];
+    const _item = defaultValue[defaultValue.length - 2];
     const min = Number(_item.value[0]);
     const _interval = Number(((Number(_item.value[1]) - Number(_item.value[0])) / 2).toFixed(2));
     const _range = [min, Number((_interval + min).toFixed(2)), Number(_item.value[1])];
@@ -33,24 +32,24 @@ const CustomNumber = (props: CustomNumberProps) => {
         color: _item.color ?? '#5B8FF9',
       },
       {
-        id: customRanges[customRanges.length - 1].id,
+        id: defaultValue[defaultValue.length - 1].id,
         value: [_range[1], _range[2]],
-        color: customRanges[customRanges.length - 1].color ?? '#5B8FF9',
+        color: defaultValue[defaultValue.length - 1].color ?? '#5B8FF9',
       },
       {
         id: uniqueId(),
         value: [_range[2], Infinity],
-        color: customRanges[customRanges.length - 1].color ?? '#5B8FF9',
+        color: defaultValue[defaultValue.length - 1].color ?? '#5B8FF9',
       },
     ];
-    const list = [...customRanges.slice(0, -2), ...addList];
+    const list = [...defaultValue.slice(0, -2), ...addList];
     onChange(list);
   };
 
   const deletePaletteRangeItem = (index: number, position: string | null) => {
-    const _value = customRanges[index];
+    const _value = defaultValue[index];
 
-    const list: CustomMappingColorItem[] = customRanges
+    const list: CustomMappingColorItem[] = defaultValue
       .map((item, _index) => {
         if (index === _index) {
           return item;
@@ -84,7 +83,7 @@ const CustomNumber = (props: CustomNumberProps) => {
   };
 
   const onChangePaletteRangeItem = (value: (string | number)[], color: string, index: number) => {
-    const list: CustomMappingColorItem[] = customRanges.map((item, _index) => {
+    const list: CustomMappingColorItem[] = defaultValue.map((item, _index) => {
       if (index === _index) {
         return {
           ...item,
@@ -115,19 +114,20 @@ const CustomNumber = (props: CustomNumberProps) => {
 
   return wrapSSR(
     <div className={classnames(`${prefixCls}`, hashId, className)}>
-      {customRanges.map((customItem: CustomMappingColorItem, index: number) => {
+      {defaultValue.map((customItem: CustomMappingColorItem, index: number) => {
         const [min, max] = domain as [number, number];
-        const position = index === 0 ? 'first' : index === customRanges.length - 1 ? 'last' : null;
-        const _min = index === 0 ? min : (customRanges[index - 1].value[1] as number);
+        const position = index === 0 ? 'first' : index === defaultValue.length - 1 ? 'last' : null;
+        const _min = index === 0 ? min : (defaultValue[index - 1].value[1] as number);
 
         return (
-          <CustomInput
+          <CustomItem
             key={`custom-input-number${index}`}
             color={customItem.color}
             value={customItem.value}
             min={_min}
             max={max}
             position={position}
+            delDisable={defaultValue.length <= 3}
             onDelete={() => deletePaletteRangeItem(index, position)}
             onChange={(value: (string | number)[], color: string) => onChangePaletteRangeItem(value, color, index)}
           />

diff --git a/...mString/CustomInput/InputString/index.tsx → ...omString/CustomItem/InputString/index.tsx b/...mString/CustomInput/InputString/index.tsx → ...omString/CustomItem/InputString/index.tsx
diff --git a/...Colors/CustomString/CustomInput/index.tsx → ...gColors/CustomString/CustomItem/index.tsx b/...Colors/CustomString/CustomInput/index.tsx → ...gColors/CustomString/CustomItem/index.tsx
@@ -7,7 +7,7 @@ import React, { useMemo } from 'react';
 import InputString from './InputString';
 import useStyle from './style';
 
-type RangeItemProps = {
+type CustomItemProps = {
   selectedOption: (string | number)[];
   selectOptions: { label: string; value: string }[];
   color: string;
@@ -16,14 +16,14 @@ type RangeItemProps = {
   onChange: (value: (string | number)[], color: string) => void;
 };
 
-const RangeItem = ({
+const CustomItem = ({
   selectedOption,
   selectOptions,
   color: defaultColor,
   value: defaultValue,
   onDelete,
   onChange,
-}: RangeItemProps) => {
+}: CustomItemProps) => {
   const prefixCls = usePrefixCls('formily-scale-selector__custom-string');
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
@@ -70,4 +70,4 @@ const RangeItem = ({
   );
 };
 
-export default RangeItem;
+export default CustomItem;
diff --git a/...gColors/CustomString/CustomInput/style.ts → ...ngColors/CustomString/CustomItem/style.ts b/...gColors/CustomString/CustomInput/style.ts → ...ngColors/CustomString/CustomItem/style.ts
diff --git a/...p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/index.tsx b/...p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomString/index.tsx
@@ -4,29 +4,29 @@ import classnames from 'classnames';
 import { uniqueId } from 'lodash-es';
 import React, { useMemo } from 'react';
 import type { CustomMappingColorItem } from '../../type';
-import CustomInput from './CustomInput';
+import CustomItem from './CustomItem';
 import useStyle from './style';
 
 type CustomStringProps = {
   domain: string[] | [number, number];
-  customRanges: CustomMappingColorItem[];
+  value: CustomMappingColorItem[];
   onChange: (value: CustomMappingColorItem[]) => void;
   className?: string;
 };
 
 const CustomString = (props: CustomStringProps) => {
-  const { customRanges = [], domain, onChange, className } = props;
+  const { value: defaultValue = [], domain, onChange, className } = props;
   const prefixCls = usePrefixCls('formily-color-range-selector__custom-string');
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const selectedOption = useMemo(() => {
-    if (customRanges.length) {
-      const values = customRanges.map((item) => item.value).flat();
+    if (defaultValue.length) {
+      const values = defaultValue.map((item) => item.value).flat();
       return values;
     }
 
     return [];
-  }, [customRanges]);
+  }, [defaultValue]);
 
   const selectOptions = useMemo(() => {
     return (domain as string[]).map((value: string) => ({ label: value, value }));
@@ -36,20 +36,20 @@ const CustomString = (props: CustomStringProps) => {
     const addItem: CustomMappingColorItem = {
       id: uniqueId(),
       value: [],
-      color: customRanges[customRanges.length - 1]?.color ?? '#5B8FF9',
+      color: defaultValue[defaultValue.length - 1]?.color ?? '#5B8FF9',
     };
 
-    const list: CustomMappingColorItem[] = [...customRanges, addItem];
+    const list: CustomMappingColorItem[] = [...defaultValue, addItem];
     onChange(list);
   };
 
   const deletePaletteRangeItem = (index: number) => {
-    const _ranges = customRanges.filter((_, _index) => _index !== index);
+    const _ranges = defaultValue.filter((_, _index) => _index !== index);
     onChange(_ranges);
   };
 
   const onChangePaletteRangeItem = (value: (string | number)[], color: string, index: number) => {
-    const list: CustomMappingColorItem[] = customRanges.map((item, _index) => {
+    const list: CustomMappingColorItem[] = defaultValue.map((item, _index) => {
       if (index === _index) {
         return {
           ...item,
@@ -66,9 +66,9 @@ const CustomString = (props: CustomStringProps) => {
 
   return wrapSSR(
     <div className={classnames(`${prefixCls}`, hashId, className)}>
-      {customRanges.map((customItem: CustomMappingColorItem, index: number) => {
+      {defaultValue.map((customItem: CustomMappingColorItem, index: number) => {
         return (
-          <CustomInput
+          <CustomItem
             key={`custom-input-string${index}`}
             color={customItem.color}
             value={customItem.value}

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx
@@ -47,13 +47,9 @@ const CustomMappingColor = (props: CustomMappingColorProps) => {
   return wrapSSR(
     <div className={classnames(`${prefixCls}`, hashId, className)}>
       <div className={classnames(`${prefixCls}_custom-content`, hashId, className)}>
-        {dataType === 'number' && (
-          <CustomNumber domain={domain} customRanges={customRanges} onChange={onCustomRangesChange} />
-        )}
+        {dataType === 'number' && <CustomNumber domain={domain} value={customRanges} onChange={onCustomRangesChange} />}
 
-        {dataType === 'string' && (
-          <CustomString domain={domain} customRanges={customRanges} onChange={onCustomRangesChange} />
-        )}
+        {dataType === 'string' && <CustomString domain={domain} value={customRanges} onChange={onCustomRangesChange} />}
       </div>
 
       <div className={`${prefixCls}__btn`}>