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

fix: 修复 TextArea 的标签高度跟其他表单项不一致的问题
thundersdata-frontend · Dec 11, 2023 · c95a269 · c95a269
2 parents e638d98 + f52667d
commit c95a269
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 7 deletions.
diff --git a/.changeset/shiny-months-roll.md b/.changeset/shiny-months-roll.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+fix: 修复 TextArea 的标签高度跟其他表单项不一致的问题
diff --git a/packages/react-native/src/form/FormItem.tsx b/packages/react-native/src/form/FormItem.tsx
@@ -56,7 +56,7 @@ const FormItem: FC<FormItemProps> = ({ children, type = 'bottom', name, ...field
 
   return (
     <Box
-      height={formItemHeight}
+      minHeight={formItemHeight}
       justifyContent={'center'}
       borderBottomColor={'border'}
       borderBottomWidth={ONE_PIXEL}
@@ -66,6 +66,7 @@ const FormItem: FC<FormItemProps> = ({ children, type = 'bottom', name, ...field
         {React.cloneElement(children, {
           ref,
           brief: Error,
+          labelHeight: formItemHeight,
         })}
       </Field>
     </Box>

diff --git a/packages/react-native/src/form/FormListItem.tsx b/packages/react-native/src/form/FormListItem.tsx
@@ -64,7 +64,7 @@ const FormListItem: FC<FormListItemProps> = ({
       }
       style={[
         {
-          height: formItemHeight,
+          minHeight: formItemHeight,
           paddingHorizontal: 0,
         },
         errors.length > 0

diff --git a/packages/react-native/src/input/TextArea.tsx b/packages/react-native/src/input/TextArea.tsx
@@ -31,11 +31,25 @@ export interface TextAreaProps
   style?: StyleProp<ViewStyle>;
   /** 额外内容 */
   brief?: ReactNode;
+  /** 在表单项里时 label 的高度应该要跟其他的高度保持一致 */
+  labelHeight?: number;
 }
 
 const TextArea = forwardRef<TextInput, TextAreaProps>(
   (
-    { label, height = px(150), limit, value = '', border = true, onChange, style, brief, required, ...restProps },
+    {
+      label,
+      height = px(150),
+      limit,
+      value = '',
+      border = true,
+      onChange,
+      style,
+      brief,
+      required,
+      labelHeight,
+      ...restProps
+    },
     ref
   ) => {
     const theme = useTheme<Theme>();
@@ -53,7 +67,7 @@ const TextArea = forwardRef<TextInput, TextAreaProps>(
 
     return (
       <Box>
-        <Label {...{ label, required }} />
+        <Label {...{ label, required, labelHeight }} />
         <Box borderWidth={border ? ONE_PIXEL : 0} borderColor="border" style={style}>
           <TextInput
             ref={ref}
@@ -98,12 +112,23 @@ TextArea.displayName = 'TextArea';
 
 export default TextArea;
 
-const Label = memo(({ label, required }: Pick<TextAreaProps, 'label' | 'required'>) => {
+const Label = memo(({ label, required, labelHeight }: Pick<TextAreaProps, 'label' | 'required' | 'labelHeight'>) => {
   if (!label) return null;
+  const theme = useTheme<Theme>();
+  const style = {};
+  if (labelHeight) {
+    Object.assign(style, {
+      height: labelHeight,
+    });
+  } else {
+    Object.assign(style, {
+      paddingVertical: theme.spacing.x2,
+    });
+  }
 
   if (typeof label === 'string')
     return (
-      <Flex alignItems={'center'} paddingVertical={'x1'}>
+      <Flex alignItems={'center'} style={style}>
         {required && <Text color="func600">*</Text>}
         <Text variant="p1" color="text">
           {label}
@@ -112,7 +137,7 @@ const Label = memo(({ label, required }: Pick<TextAreaProps, 'label' | 'required
     );
 
   return (
-    <Flex alignItems={'center'} paddingVertical={'x1'}>
+    <Flex alignItems={'center'} style={style}>
       {required && <Text color="func600">*</Text>}
       {label}
     </Flex>