Merge pull request #807 from thundersdata-frontend/form-issue

fix: 修复Input组件在复杂布局场景下的样式问题
thundersdata-frontend · Jan 2, 2024 · 6d8a57e · 6d8a57e
2 parents 1bbc064 + 2d63b59
commit 6d8a57e
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/packages/react-native/src/input/index.tsx b/packages/react-native/src/input/index.tsx
@@ -102,6 +102,7 @@ const Input = forwardRef<TextInput, InputProps>(
         position="relative"
         paddingHorizontal={'x1'}
         flex={1}
+        style={style}
       >
         {!!leftIcon && <Box>{leftIcon}</Box>}
         <Box flexGrow={1}>
@@ -138,15 +139,15 @@ const Input = forwardRef<TextInput, InputProps>(
     );
 
     return labelPosition === 'left' ? (
-      <Box style={style}>
+      <Box>
         <Flex alignItems="center">
           <Label {...{ colon, label, required }} />
           {InputContent}
         </Flex>
         <Brief brief={brief} />
       </Box>
     ) : (
-      <Box style={style}>
+      <Box>
         <Label {...{ colon, label, required }} />
         {InputContent}
         <Brief brief={brief} />

diff --git a/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx b/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx
@@ -61,11 +61,14 @@ const NumberKeyboardInput = forwardRef<NumberKeyboardRef, NumberKeyboardInputPro
             Keyboard.dismiss();
             setTrue();
           }}
-          style={{
-            paddingVertical: theme.spacing.x2,
-            justifyContent: 'center',
-            height: itemHeight,
-          }}
+          style={[
+            {
+              flex: 1,
+              paddingVertical: theme.spacing.x2,
+              height: itemHeight,
+            },
+            style,
+          ]}
         >
           <Text variant="p1" color={currentText === placeholder ? 'gray300' : 'text'} style={inputStyle} selectable>
             {currentText}
@@ -82,7 +85,7 @@ const NumberKeyboardInput = forwardRef<NumberKeyboardRef, NumberKeyboardInputPro
 
     if (labelPosition === 'top')
       return (
-        <Box style={style}>
+        <Box>
           <Label {...{ colon, label, required }} />
           {InputContent}
           <Brief brief={brief} />
@@ -99,7 +102,7 @@ const NumberKeyboardInput = forwardRef<NumberKeyboardRef, NumberKeyboardInputPro
       );
 
     return (
-      <Box style={style}>
+      <Box>
         <Flex alignItems="center">
           <Label {...{ colon, label, required }} />
           {InputContent}

diff --git a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx
@@ -58,11 +58,14 @@ const VehicleKeyboardInput = forwardRef<VehicleKeyboardRef, VehicleKeyboardInput
             Keyboard.dismiss();
             setTrue();
           }}
-          style={{
-            paddingVertical: theme.spacing.x2,
-            justifyContent: 'center',
-            height: itemHeight,
-          }}
+          style={[
+            {
+              flex: 1,
+              paddingVertical: theme.spacing.x2,
+              height: itemHeight,
+            },
+            style,
+          ]}
         >
           <Text variant="p1" color={currentText === placeholder ? 'gray300' : 'text'} style={inputStyle} selectable>
             {currentText}
@@ -79,7 +82,7 @@ const VehicleKeyboardInput = forwardRef<VehicleKeyboardRef, VehicleKeyboardInput
 
     if (labelPosition === 'top')
       return (
-        <Box style={style}>
+        <Box>
           <Label {...{ label, colon, required }} />
           {InputContent}
           <Brief brief={brief} />
@@ -96,7 +99,7 @@ const VehicleKeyboardInput = forwardRef<VehicleKeyboardRef, VehicleKeyboardInput
       );
 
     return (
-      <Box style={style}>
+      <Box>
         <Flex alignItems="center">
           <Label {...{ colon, label, required }} />
           {InputContent}