From 6a51f5e885677fb0d82f6605d36c9f386e33fc30 Mon Sep 17 00:00:00 2001
From: yxh01132861 <yxh01132861@antgroup.com>
Date: Tue, 10 Oct 2023 09:36:11 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=A1=A5=E5=85=85=E8=87=AA=E5=AE=9A?=
 =?UTF-8?q?=E4=B9=89=E6=95=B0=E6=8D=AE=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../CustomContent/CustomItem/Item/index.tsx   | 30 ++++++++++++-------
 .../CustomContent/CustomItem/Item/style.ts    |  8 +++--
 .../CustomContent/CustomItem/style.ts         |  4 +++
 .../components/ScaleSelector/helper.ts        |  5 ++--
 4 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/index.tsx
index 7b8a95d6..625fac33 100644
--- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/index.tsx
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/index.tsx
@@ -12,13 +12,13 @@ type ItemProps = {
   min: number;
   max: number;
   position: string | null;
-  onChange: (val: (string | number)[]) => void;
+  onChange: (val: (string | number | null)[]) => void;
 };
 
 const Item = ({ customType, value, options, min, max, position, onChange }: ItemProps) => {
   const prefixCls = usePrefixCls('formily-scale-selector__custom-content__custom-item__item');
   const [wrapSSR, hashId] = useStyle(prefixCls);
-  const [itemVal, setItemVal] = useState<(string | number)[]>(value);
+  const [itemVal, setItemVal] = useState<(string | number | null)[]>(value);
 
   const onSelectChange = (val: string[]) => {
     setItemVal(val);
@@ -32,9 +32,19 @@ const Item = ({ customType, value, options, min, max, position, onChange }: Item
   };
 
   const onLastInputChange = (e: number) => {
-    const val = itemVal?.length > 0 ? [itemVal[0], e] : [e];
-    onChange(val);
-    setItemVal(val);
+    if (position === 'first') {
+      const val = [null, e];
+      onChange(val);
+      setItemVal(val);
+    } else if (position === 'last') {
+      const val = [e, null];
+      onChange(val);
+      setItemVal(val);
+    } else {
+      const val = itemVal?.length > 0 ? [itemVal[0], e] : [e];
+      onChange(val);
+      setItemVal(val);
+    }
   };
 
   return wrapSSR(
@@ -44,7 +54,7 @@ const Item = ({ customType, value, options, min, max, position, onChange }: Item
           mode="multiple"
           maxTagCount={1}
           allowClear
-          style={{ width: 150 }}
+          style={{ width: '100%' }}
           placeholder="请选择"
           value={itemVal as string[]}
           onChange={onSelectChange}
@@ -57,13 +67,13 @@ const Item = ({ customType, value, options, min, max, position, onChange }: Item
       )}
 
       {customType === 'number' && (
-        <div className={`${prefixCls}__input-group`}>
+        <div className={classnames(`${prefixCls}__input-group`, hashId)}>
           {position === 'first' && (
             <>
               <span style={{ margin: '0 8px' }}>小于</span>
               <InputNumber
                 size="small"
-                min={itemVal[0]}
+                min={min}
                 max={max}
                 value={itemVal?.[1]}
                 className={`${prefixCls}__input-group__input`}
@@ -77,7 +87,7 @@ const Item = ({ customType, value, options, min, max, position, onChange }: Item
               <span style={{ margin: '0 8px' }}>大于</span>
               <InputNumber
                 size="small"
-                min={itemVal[0]}
+                min={min}
                 max={max}
                 value={itemVal?.[0]}
                 className={`${prefixCls}__input-group__input`}
@@ -99,7 +109,7 @@ const Item = ({ customType, value, options, min, max, position, onChange }: Item
               <span style={{ margin: '0 8px' }}>-</span>
               <InputNumber
                 size="small"
-                min={itemVal[0]}
+                min={min}
                 max={max}
                 value={itemVal?.[1]}
                 className={`${prefixCls}__input-group__input`}
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/style.ts
index 2f78e0e7..0a218df3 100644
--- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/style.ts
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/style.ts
@@ -7,14 +7,16 @@ export default genStyleHook('scale-selector__custom-content__custom-item__item',
     [componentCls]: {
       flex: 1,
       margin: '0 5px',
-      textAlign: 'right',
 
       '&__input-group': {
-        margin: '0 5px',
+        width: '100%',
+        textAlign: 'right',
         display: 'flex',
+        flex: 1,
+        justifyContent: 'space-between',
 
         '&__input': {
-          width: 60,
+          maxWidth: 60,
         },
       },
     },
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/style.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/style.ts
index b13cec9b..7763f9aa 100644
--- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/style.ts
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/style.ts
@@ -26,6 +26,10 @@ export default genStyleHook('scale-selector__custom-content__custom-item', (toke
           height: '18px',
         },
 
+        '&__delete-icon': {
+          width: '14px',
+        },
+
         '&__delete-icon:hover': {
           color: colorInfoTextHover,
         },
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts
index 38bc32ab..f654368a 100644
--- a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts
+++ b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/helper.ts
@@ -4,7 +4,8 @@ export const transformToLayer = (val: CustomItemType) => {
   const { type, thresholdType, list } = val;
   const colors = list.map((item) => item.color);
   if (thresholdType === 'number') {
-    const _val = Array.from(new Set(list.map((item) => item.value).flat())).filter((item) => item);
+    const _val = list.map((item) => item.value[1]).filter((item) => item);
+
     return {
       thresholdType,
       type,
@@ -40,7 +41,7 @@ export const transformToScale = (val: Record<string, any>) => {
   if (thresholdType === 'number') {
     const list = colors.map((item: string, index: number) => {
       return {
-        value: [domain[index - 1], domain[index]],
+        value: [domain[index - 1] ?? null, domain[index] ?? null],
         color: item,
       };
     });