fix: 页面调整

antvis · Nov 17, 2023 · ec7ed46 · ec7ed46
1 parent 3ae18dd
commit ec7ed46
Show file tree

Hide file tree

Showing 15 changed files with 81 additions and 180 deletions.
diff --git a/...tribute/components/ResterScaleSelector/CustomMappingColors/CustomInput/InputCat/index.tsx b/...tribute/components/ResterScaleSelector/CustomMappingColors/CustomInput/InputCat/index.tsx
@@ -0,0 +1,37 @@
+import { InputNumber } from 'antd';
+import { isNumber } from 'lodash-es';
+import React, { useEffect, useState } from 'react';
+
+type ItemProps = {
+  size: 'small' | 'middle' | 'large';
+  value: [number];
+  min: number;
+  max: number;
+  onChange: (val: [number]) => void;
+};
+
+const InputCat = ({ size = 'middle', value, min, max, onChange }: ItemProps) => {
+  const [itemVal, setItemVal] = useState(value);
+
+  const onInputChange = (e: number) => {
+    onChange([e]);
+    setItemVal([e]);
+  };
+
+  useEffect(() => {
+    setItemVal(value);
+  }, [value]);
+
+  return (
+    <InputNumber
+      size={size}
+      min={min}
+      max={max}
+      value={itemVal?.[0]}
+      style={{ width: '100%' }}
+      onChange={(e) => isNumber(e) && onInputChange(e)}
+    />
+  );
+};
+
+export default InputCat;
diff --git a/.../CustomMappingColors/CustomItem/index.tsx → ...CustomMappingColors/CustomInput/index.tsx b/.../CustomMappingColors/CustomItem/index.tsx → ...CustomMappingColors/CustomInput/index.tsx
@@ -4,7 +4,8 @@ import { ColorPicker } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import classnames from 'classnames';
 import React from 'react';
-import Item from './Item';
+import InputNumber from '../../../ScaleSelector/CustomMappingColors/CustomInput/InputNumber';
+import InputCat from './InputCat';
 import useStyle from './style';
 
 type RangeItemProps = {
@@ -28,7 +29,7 @@ const RangeItem = ({
   onDelete,
   onChange,
 }: RangeItemProps) => {
-  const prefixCls = usePrefixCls('formily-rester--scale-selector__custom-content__custom-item');
+  const prefixCls = usePrefixCls('formily-rester--scale-selector__custom-input');
   const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const colorChange = (color: Color) => {
@@ -54,15 +55,20 @@ const RangeItem = ({
         </div>
 
         <div className={`${prefixCls}__infor__content`}>
-          <Item
-            size="middle"
-            type={customType}
-            value={defaultValue}
-            onChange={onValueChange}
-            min={min}
-            max={max}
-            position={position}
-          />
+          {customType === 'cat' && (
+            <InputCat size="small" min={min} max={max} value={defaultValue as [number]} onChange={onValueChange} />
+          )}
+
+          {customType === 'custom' && (
+            <InputNumber
+              size="small"
+              value={defaultValue as [number, number]}
+              min={min}
+              max={max}
+              position={position}
+              onChange={onValueChange}
+            />
+          )}
         </div>
 
         <div className={`${prefixCls}__infor__delete-icon`} onClick={onDelete}>

diff --git a/...r/CustomMappingColors/CustomItem/style.ts → .../CustomMappingColors/CustomInput/style.ts b/...r/CustomMappingColors/CustomItem/style.ts → .../CustomMappingColors/CustomInput/style.ts
@@ -1,7 +1,7 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
-export default genStyleHook('rester-scale-selector__custom-content__custom-item', (token) => {
-  const { componentCls, antCls, colorInfoTextHover, controlItemBgHover } = token;
+export default genStyleHook('rester-scale-selector__custom-input', (token) => {
+  const { componentCls, antCls, colorInfoTextHover } = token;
 
   return {
     [componentCls]: {
@@ -26,6 +26,7 @@ export default genStyleHook('rester-scale-selector__custom-content__custom-item'
           flex: 1,
           width: '100%',
           overflow: 'hidden',
+          margin: '0 3px',
         },
 
         '&__delete-icon': {

diff --git a/...bute/components/ResterScaleSelector/CustomMappingColors/CustomItem/Item/CatItem/index.tsx b/...bute/components/ResterScaleSelector/CustomMappingColors/CustomItem/Item/CatItem/index.tsx
diff --git a/...yerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomItem/Item/index.tsx b/...yerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomItem/Item/index.tsx
diff --git a/...ayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomItem/Item/style.ts b/...ayerAttribute/components/ResterScaleSelector/CustomMappingColors/CustomItem/Item/style.ts
diff --git a/...ges/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/index.tsx b/...ges/li-p2/src/LayerAttribute/components/ResterScaleSelector/CustomMappingColors/index.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { uniqueId } from 'lodash-es';
 import React, { useEffect, useState } from 'react';
 import type { CustomMappingColorItem, CustomMappingData } from '../type';
-import CustomItem from './CustomItem';
+import CustomInput from './CustomInput';
 import useStyle from './style';
 
 type CustomMappingColorProps = {
@@ -165,7 +165,7 @@ const CustomMappingColor = (props: CustomMappingColorProps) => {
         const position = index === 0 ? 'first' : index === customRanges.length - 1 ? 'last' : null;
 
         return (
-          <CustomItem
+          <CustomInput
             customType={type}
             key={`drag_card${index}`}
             color={customItem.color}

diff --git a/...lors/CustomItem/Item/NumberItem/index.tsx → ...gColors/CustomInput/InputNumber/index.tsx b/...lors/CustomItem/Item/NumberItem/index.tsx → ...gColors/CustomInput/InputNumber/index.tsx
@@ -14,7 +14,7 @@ type ItemProps = {
 };
 
 const NumberItem = ({ size = 'middle', value, min, max, position, onChange }: ItemProps) => {
-  const prefixCls = usePrefixCls('formily-scale-selector__custom-content__custom-item__item-number');
+  const prefixCls = usePrefixCls('formily-scale-selector__custom-input__number');
   const [wrapSSR, hashId] = useStyle(prefixCls);
   const [itemVal, setItemVal] = useState<[number, number]>(value);
 

diff --git a/...olors/CustomItem/Item/NumberItem/style.ts → ...ngColors/CustomInput/InputNumber/style.ts b/...olors/CustomItem/Item/NumberItem/style.ts → ...ngColors/CustomInput/InputNumber/style.ts
@@ -1,6 +1,6 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
-export default genStyleHook('scale-selector__custom-content__custom-item__item-number', (token) => {
+export default genStyleHook('scale-selector__custom-input__number', (token) => {
   const { componentCls } = token;
 
   return {

diff --git a/...lors/CustomItem/Item/StringItem/index.tsx → ...gColors/CustomInput/InputString/index.tsx b/...lors/CustomItem/Item/StringItem/index.tsx → ...gColors/CustomInput/InputString/index.tsx
diff --git a/.../CustomMappingColors/CustomItem/index.tsx → ...CustomMappingColors/CustomInput/index.tsx b/.../CustomMappingColors/CustomItem/index.tsx → ...CustomMappingColors/CustomInput/index.tsx
@@ -4,7 +4,8 @@ import { ColorPicker } from 'antd';
 import type { Color } from 'antd/es/color-picker';
 import classnames from 'classnames';
 import React, { useMemo } from 'react';
-import Item from './Item';
+import InputNumber from './InputNumber';
+import InputString from './InputString';
 import useStyle from './style';
 
 type RangeItemProps = {
@@ -67,16 +68,20 @@ const RangeItem = ({
         </div>
 
         <div className={`${prefixCls}__infor__content`}>
-          <Item
-            size="small"
-            customType={dataType}
-            value={defaultValue}
-            options={options}
-            onChange={onValueChange}
-            min={min}
-            max={max}
-            position={position}
-          />
+          {dataType === 'string' && (
+            <InputString size="small" value={defaultValue as string[]} onChange={onValueChange} options={options} />
+          )}
+
+          {dataType === 'number' && (
+            <InputNumber
+              size="small"
+              value={defaultValue as [number, number]}
+              min={min}
+              max={max}
+              position={position}
+              onChange={onValueChange}
+            />
+          )}
         </div>
 
         <div className={`${prefixCls}__infor__delete-icon`} onClick={onDelete}>

diff --git a/...r/CustomMappingColors/CustomItem/style.ts → .../CustomMappingColors/CustomInput/style.ts b/...r/CustomMappingColors/CustomItem/style.ts → .../CustomMappingColors/CustomInput/style.ts
@@ -1,7 +1,7 @@
 import { genStyleHook } from '@formily/antd-v5/esm/__builtins__';
 
 export default genStyleHook('scale-selector__custom-content__custom-item', (token) => {
-  const { componentCls, antCls, colorInfoTextHover, controlItemBgHover } = token;
+  const { componentCls, antCls, colorInfoTextHover } = token;
 
   return {
     [componentCls]: {
@@ -26,6 +26,7 @@ export default genStyleHook('scale-selector__custom-content__custom-item', (toke
           flex: 1,
           width: '100%',
           overflow: 'hidden',
+          margin: '0 3px',
         },
 
         '&__delete-icon': {

diff --git a/...src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/index.tsx b/...src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/index.tsx
diff --git a/.../src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/style.ts b/.../src/LayerAttribute/components/ScaleSelector/CustomMappingColors/CustomItem/Item/style.ts
diff --git a/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx b/packages/li-p2/src/LayerAttribute/components/ScaleSelector/CustomMappingColors/index.tsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import { uniqueId } from 'lodash-es';
 import React, { useEffect, useMemo, useState } from 'react';
 import type { CustomMappingColorItem, CustomMappingData } from '../type';
-import CustomItem from './CustomItem';
+import CustomInput from './CustomInput';
 import useStyle from './style';
 
 type CustomMappingColorProps = {
@@ -183,7 +183,7 @@ const CustomMappingColor = (props: CustomMappingColorProps) => {
         const _min = index === 0 ? min : (customRanges[index - 1].value[1] as number);
 
         return (
-          <CustomItem
+          <CustomInput
             dataType={dataType}
             key={`drag_card${index}`}
             color={customItem.color}