Merge pull request #857 from thundersdata-frontend/rn-issue

feat: 数字输入组件支持输入负数

Author: chj-damon

.changeset/tame-dolphins-doubt.md

@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+feat: 数字输入组件支持输入负数

packages/lego/src/three-dimensional-pie/index.tsx

@@ -96,14 +96,18 @@ export default forwardRef<ReactEcharts, ThreeDimensionalPieProps>(
         const endRatio = option.series[hoveredIndex]?.pieData?.endRatio;
         const k = option.series[hoveredIndex]?.pieStatus?.k;
 
+        const value =
+          option.series[hoveredIndex] && option.series[hoveredIndex].pieData
+            ? option.series[hoveredIndex].pieData.value
+            : 30;
         // 对当前点击的扇形，执行取消高亮操作（对 option 更新）
         option.series[hoveredIndex].parametricEquation = getParametricEquation(
           startRatio,
           endRatio,
           isSelected,
           isHovered,
           k * kCondition,
-          generate3DHeight(isFlat, option.series[hoveredIndex].pieData?.value, upCondition * coefficient)
+          generate3DHeight(isFlat, value, upCondition * coefficient)
         );
 
         if (option?.series[hoveredIndex]?.pieStatus) {

packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx

@@ -38,6 +38,7 @@ const NumberKeyboardInput = forwardRef<NumberKeyboardRef, NumberKeyboardInputPro
       brief,
       activeOpacity = 0.6,
       itemHeight,
+      allowNegative = false,
       ...restProps
     },
     ref
@@ -61,6 +62,7 @@ const NumberKeyboardInput = forwardRef<NumberKeyboardRef, NumberKeyboardInputPro
         value: currentText === placeholder ? '' : currentText,
         onSubmit: handleSubmit,
         activeOpacity,
+        allowNegative,
       });
     };
 

packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx

@@ -30,6 +30,7 @@ const NumberKeyboardItem = forwardRef<NumberKeyboardRef, NumberKeyboardItemProps
       digit = 0,
       activeOpacity = 0.6,
       inForm,
+      allowNegative = false,
       ...restProps
     },
     ref
@@ -53,6 +54,7 @@ const NumberKeyboardItem = forwardRef<NumberKeyboardRef, NumberKeyboardItemProps
         value: currentText === placeholder ? '' : currentText,
         onSubmit: handleSubmit,
         activeOpacity,
+        allowNegative,
       });
     };
 

packages/react-native/src/number-keyboard/NumberKeyboardModal.tsx

@@ -21,7 +21,7 @@ const NumberKeyboardModal: FC<
   NumberKeyboardModalProps & {
     onAnimationEnd?: (visible: boolean) => void;
   }
-> = ({ type, value = '', onPress, onDelete, onSubmit, prefixLabel = '当前值', onAnimationEnd }) => {
+> = ({ type, allowNegative, value = '', onPress, onDelete, onSubmit, prefixLabel = '当前值', onAnimationEnd }) => {
   const theme = useTheme<Theme>();
   const { text, visible, setFalse, handleChange, handleSubmit, handleDelete } = useNumberKeyboardModal({
     value,
@@ -59,7 +59,7 @@ const NumberKeyboardModal: FC<
           <SvgIcon name="down" size={px(20)} color={theme.colors.gray500} />
         </Pressable>
       </Flex>
-      <NumberKeyboardView type={type} onPress={handleChange} onDelete={handleDelete} onSubmit={handleSubmit} />
+      <NumberKeyboardView type={type} allowNegative={allowNegative} onPress={handleChange} onDelete={handleDelete} onSubmit={handleSubmit} />
     </Modal>
   );
 };

packages/react-native/src/number-keyboard/NumberKeyboardView.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 
@@ -17,42 +17,14 @@ const keys = ['1', '2', '3', '4', '5', '6', '7', '8', '9'];
 
 const PER_WIDTH = deviceWidth / 4;
 
-const keyTypes = {
-  number: [
-    {
-      key: '0',
-      flex: 2,
-    },
-    {
-      key: '.',
-      flex: 1,
-    },
-  ],
-  idcard: [
-    {
-      key: '0',
-      flex: 2,
-    },
-    {
-      key: 'X',
-      flex: 1,
-    },
-  ],
-  integer: [
-    {
-      key: '0',
-      flex: 1,
-    },
-  ],
-};
-
 const NumberKeyboardView: FC<NumberKeyboardViewProps> = ({
   type = 'number',
   onPress,
   onDelete,
   onSubmit,
   submitText = '确定',
   activeOpacity = 0.6,
+  allowNegative,
 }) => {
   const theme = useTheme<Theme>();
 
@@ -76,6 +48,64 @@ const NumberKeyboardView: FC<NumberKeyboardViewProps> = ({
     },
   });
 
+  const keyTypes = useMemo(() => {
+    const numberType = allowNegative ? [
+      {
+        key: '0',
+        flex: 1,
+      },
+      {
+        key: '.',
+        flex: 1,
+      },
+      {
+        key: '-',
+        flex: 1,
+      },
+    ] : [
+      {
+        key: '0',
+        flex: 2,
+      },
+      {
+        key: '.',
+        flex: 1,
+      },
+    ];
+    const integerType = allowNegative ? [
+      {
+        key: '0',
+        flex: 2,
+      },
+      {
+        key: '-',
+        flex: 1,
+      },
+    ] : [
+      {
+        key: '0',
+        flex: 1,
+      },
+    ];
+
+    const types = {
+      number: numberType,
+      idcard: [
+        {
+          key: '0',
+          flex: 2,
+        },
+        {
+          key: 'X',
+          flex: 1,
+        },
+      ],
+      integer: integerType,
+    };
+
+    return types;
+  }, [allowNegative]);
+
   return (
     <Flex backgroundColor="transparent">
       <Box width={PER_WIDTH * 3}>

packages/react-native/src/number-keyboard/type.ts

@@ -16,9 +16,11 @@ export interface NumberKeyboardViewProps {
   submitText?: string;
   /** 按下时的不透明度 */
   activeOpacity?: number;
+  /** 是否允许负数 */
+  allowNegative?: boolean;
 }
 
-export interface NumberKeyboardItemProps extends Pick<NumberKeyboardViewProps, 'type' | 'activeOpacity'> {
+export interface NumberKeyboardItemProps extends Pick<NumberKeyboardViewProps, 'type' | 'activeOpacity' | 'allowNegative'> {
   value?: string;
   onChange?: (value: string) => void;
   onCheck?: (value: string) => Promise<any>;