fix: 补充自定义数据逻辑

antvis · Oct 10, 2023 · 6a51f5e · 6a51f5e
1 parent 736706c
commit 6a51f5e
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 15 deletions.
diff --git a/...li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/index.tsx b/...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/.../li-p2/src/LayerAttribute/components/ScaleSelector/CustomContent/CustomItem/Item/style.ts b/.../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
@@ -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
@@ -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,
       };
     });