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

fix: 继续优化Input组件的样式问题
thundersdata-frontend · Jan 2, 2024 · bb6f66d · bb6f66d
2 parents 5125dd8 + b541087
commit bb6f66d
Show file tree

Hide file tree

Showing 17 changed files with 67 additions and 23 deletions.
diff --git a/.changeset/shiny-islands-approve.md b/.changeset/shiny-islands-approve.md
@@ -0,0 +1,6 @@
+---
+'@td-design/react-native-picker': patch
+'@td-design/react-native': patch
+---
+
+fix: 继续优化Input组件的样式问题
diff --git a/packages/react-native-picker/src/date-period-input/index.tsx b/packages/react-native-picker/src/date-period-input/index.tsx
@@ -85,7 +85,7 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
       borderWidth={ONE_PIXEL}
       borderColor="border"
       borderRadius="x1"
-      height={itemHeight}
+      style={itemHeight ? { height: itemHeight } : {}}
     >
       <Pressable disabled={disabled} onPress={handleStartPress} activeOpacity={activeOpacity} style={styles.content}>
         <Flex>

diff --git a/packages/react-native-picker/src/date-picker-input/index.tsx b/packages/react-native-picker/src/date-picker-input/index.tsx
@@ -73,7 +73,6 @@ const DatePickerInput = forwardRef<PickerRef, DatePickerInputProps>(
         borderWidth: ONE_PIXEL,
         borderColor: theme.colors.border,
         borderRadius: theme.borderRadii.x1,
-        height: itemHeight,
       },
       top: {},
       left: { flex: 1 },
@@ -84,7 +83,12 @@ const DatePickerInput = forwardRef<PickerRef, DatePickerInputProps>(
       <Pressable
         onPress={handlePress}
         activeOpacity={activeOpacity}
-        style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}
+        style={[
+          itemHeight ? { height: itemHeight } : {},
+          styles.content,
+          style,
+          labelPosition === 'top' ? styles.top : styles.left,
+        ]}
       >
         <Flex flex={1}>
           <SvgIcon name="date" color={theme.colors.icon} />

diff --git a/packages/react-native-picker/src/date-picker-item/index.tsx b/packages/react-native-picker/src/date-picker-item/index.tsx
@@ -16,6 +16,7 @@ interface PickerItemProps extends DatePickerPropsBase, Omit<ModalPickerProps, 'v
   /** 是否禁用 */
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
+  inForm?: boolean;
 }
 
 const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
@@ -29,6 +30,7 @@ const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
       allowClear = true,
       disabled = false,
       activeOpacity = 0.6,
+      inForm,
       ...restProps
     },
     ref
@@ -47,6 +49,8 @@ const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
         justifyContent: 'flex-end',
         alignItems: 'center',
         flexDirection: 'row',
+        flexGrow: 1,
+        paddingHorizontal: theme.spacing[inForm ? 'x0' : 'x1'],
       },
       icon: { alignItems: 'flex-end' },
     });

diff --git a/packages/react-native-picker/src/picker-input/index.tsx b/packages/react-native-picker/src/picker-input/index.tsx
@@ -73,7 +73,6 @@ const PickerInput = forwardRef<PickerRef, PickerInputProps>(
         borderWidth: ONE_PIXEL,
         borderColor: theme.colors.border,
         borderRadius: theme.borderRadii.x1,
-        height: itemHeight,
       },
       top: {},
       left: { flex: 1 },
@@ -106,12 +105,26 @@ const PickerInput = forwardRef<PickerRef, PickerInputProps>(
       <Pressable
         onPress={handlePress}
         activeOpacity={activeOpacity}
-        style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}
+        style={[
+          itemHeight ? { height: itemHeight } : {},
+          styles.content,
+          style,
+          labelPosition === 'top' ? styles.top : styles.left,
+        ]}
       >
         {BaseContent}
       </Pressable>
     ) : (
-      <Box style={[styles.content, style, labelPosition === 'top' ? styles.top : styles.left]}>{BaseContent}</Box>
+      <Box
+        style={[
+          itemHeight ? { height: itemHeight } : {},
+          styles.content,
+          style,
+          labelPosition === 'top' ? styles.top : styles.left,
+        ]}
+      >
+        {BaseContent}
+      </Box>
     );
 
     return (

diff --git a/packages/react-native-picker/src/picker-item/index.tsx b/packages/react-native-picker/src/picker-item/index.tsx
@@ -17,6 +17,7 @@ interface PickerItemProps extends PickerProps, Omit<ModalPickerProps, 'visible'
   disabled?: boolean;
   /** 自定义样式 */
   style?: StyleProp<ViewStyle>;
+  inForm?: boolean;
 }
 
 const PickerItem = forwardRef<PickerRef, PickerItemProps>(
@@ -31,6 +32,7 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
       style,
       allowClear = true,
       activeOpacity = 0.6,
+      inForm,
       ...restProps
     },
     ref
@@ -51,6 +53,7 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
         justifyContent: 'flex-end',
         alignItems: 'center',
         flexDirection: 'row',
+        paddingHorizontal: theme.spacing[inForm ? 'x0' : 'x1'],
       },
       icon: { alignItems: 'flex-end' },
     });

diff --git a/packages/react-native/src/form/FormItem.tsx b/packages/react-native/src/form/FormItem.tsx
@@ -26,7 +26,8 @@ const FormItem: FC<FormItemProps> = ({ children, noStyle = false, name, ...field
       }
     ) => {
       setErrors(meta.errors);
-      const fieldErrors = fieldContext.getFieldsError().filter(item => item.errors.length > 0);
+      const errors = fieldContext.getFieldsError() || [];
+      const fieldErrors = errors.filter(item => item.errors.length > 0);
       if (fieldErrors.length > 0 && name === fieldErrors[0]?.name?.[0]) {
         ref.current?.focus();
       }

diff --git a/packages/react-native/src/form/FormListItem.tsx b/packages/react-native/src/form/FormListItem.tsx
@@ -40,7 +40,8 @@ const FormListItem: FC<FormListItemProps> = ({
       }
     ) => {
       setErrors(meta.errors);
-      const fieldErrors = fieldContext.getFieldsError().filter(item => item.errors.length > 0);
+      const errors = fieldContext.getFieldsError() || [];
+      const fieldErrors = errors.filter(item => item.errors.length > 0);
       if (fieldErrors.length > 0 && name === fieldErrors[0]?.name?.[0]) {
         ref.current?.focus();
       }
@@ -70,6 +71,7 @@ const FormListItem: FC<FormListItemProps> = ({
         <Field {...fieldProps} name={name} onMetaChange={onMetaChange}>
           {React.cloneElement(children, {
             ref,
+            inForm: true,
           })}
         </Field>
       }

diff --git a/packages/react-native/src/input/InputItem.tsx b/packages/react-native/src/input/InputItem.tsx
@@ -31,6 +31,7 @@ export interface InputItemProps
   onClear?: () => void;
   /** 容器自定义样式 */
   style?: StyleProp<ViewStyle>;
+  inForm?: boolean;
 }
 const InputItem = forwardRef<TextInput, InputItemProps>(
   (
@@ -45,6 +46,7 @@ const InputItem = forwardRef<TextInput, InputItemProps>(
       onClear,
       style,
       defaultValue,
+      inForm,
       ...restProps
     },
     ref
@@ -68,7 +70,7 @@ const InputItem = forwardRef<TextInput, InputItemProps>(
     });
 
     return (
-      <Flex flex={1} justifyContent="flex-end" style={style}>
+      <Flex flexGrow={1} paddingHorizontal={inForm ? 'x0' : 'x1'} style={style}>
         <Box flexGrow={1}>
           <TextInput
             ref={ref}

diff --git a/packages/react-native/src/input/index.tsx b/packages/react-native/src/input/index.tsx
@@ -87,7 +87,6 @@ const Input = forwardRef<TextInput, InputProps>(
         paddingHorizontal: theme.spacing.x1,
         paddingVertical: theme.spacing.x2,
         fontSize: px(14),
-        height: itemHeight,
         color: theme.colors.text,
         includeFontPadding: false,
         textAlignVertical: 'center',
@@ -112,7 +111,7 @@ const Input = forwardRef<TextInput, InputProps>(
             autoCapitalize="none"
             autoCorrect={false}
             autoComplete="off"
-            style={[styles.input, inputStyle]}
+            style={[itemHeight ? { height: itemHeight } : {}, styles.input, inputStyle]}
             editable={!disabled}
             placeholderTextColor={theme.colors.gray300}
             selectionColor={theme.colors.primary200}
@@ -134,7 +133,7 @@ const Input = forwardRef<TextInput, InputProps>(
             <SvgIcon name={eyeOpen ? 'eyeclose' : 'eyeopen'} color={theme.colors.icon} />
           </Pressable>
         )}
-        {!!rightIcon && <Box>{rightIcon}</Box>}
+        {!!rightIcon && <Box marginLeft={allowClear ? 'x1' : 'x0'}>{rightIcon}</Box>}
       </Flex>
     );
 

diff --git a/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx b/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx
@@ -62,10 +62,10 @@ const NumberKeyboardInput = forwardRef<NumberKeyboardRef, NumberKeyboardInputPro
             setTrue();
           }}
           style={[
+            itemHeight ? { height: itemHeight } : {},
             {
               flex: 1,
               paddingVertical: theme.spacing.x2,
-              height: itemHeight,
             },
             style,
           ]}

diff --git a/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx b/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx
@@ -29,6 +29,7 @@ const NumberKeyboardItem = forwardRef<NumberKeyboardRef, NumberKeyboardItemProps
       allowClear = true,
       digit = 0,
       activeOpacity = 0.6,
+      inForm,
       ...restProps
     },
     ref
@@ -53,8 +54,8 @@ const NumberKeyboardItem = forwardRef<NumberKeyboardRef, NumberKeyboardItemProps
     });
 
     return (
-      <Box width="100%">
-        <Flex style={style}>
+      <Box flexGrow={1} paddingHorizontal={inForm ? 'x0' : 'x1'} justifyContent={'center'} style={style}>
+        <Flex>
           <Pressable
             activeOpacity={activeOpacity}
             onPress={() => {

diff --git a/packages/react-native/src/number-keyboard/type.ts b/packages/react-native/src/number-keyboard/type.ts
@@ -34,6 +34,7 @@ export interface NumberKeyboardItemProps extends Pick<NumberKeyboardViewProps, '
   disabled?: boolean;
   /** 保留小数位 */
   digit?: number;
+  inForm?: boolean;
 }
 
 export interface NumberKeyboardInputProps extends NumberKeyboardItemProps {

diff --git a/packages/react-native/src/search-bar/index.tsx b/packages/react-native/src/search-bar/index.tsx
@@ -89,30 +89,36 @@ const SearchBar: FC<SearchBarProps> = props => {
   const CancelBtn = useMemo(() => {
     if (!showCancelButton || !focused) return null;
     return (
-      <Pressable onPress={onCancel} activeOpacity={activeOpacity} style={{ marginHorizontal: theme.spacing.x2 }}>
+      <Pressable
+        onPress={onCancel}
+        activeOpacity={activeOpacity}
+        style={{
+          marginLeft: allowClear ? 0 : theme.spacing.x1,
+          marginRight: theme.spacing.x1,
+        }}
+      >
         <Text variant="p0" color="primary200">
           {cancelText}
         </Text>
       </Pressable>
     );
-  }, [showCancelButton, focused, activeOpacity, theme.spacing.x2, cancelText, onCancel]);
+  }, [showCancelButton, focused, activeOpacity, theme.spacing.x1, cancelText, onCancel, allowClear]);
 
   return (
     <Flex style={[styles.container, style]}>
       {!!children && (
         <Box
           justifyContent="center"
           alignItems="center"
-          paddingLeft={'x1'}
-          paddingRight={'x2'}
+          marginHorizontal={'x1'}
           borderRightWidth={ONE_PIXEL}
           borderRightColor={'gray500'}
         >
           {children}
         </Box>
       )}
       {/* 搜索小图标 */}
-      <SvgIcon name="search" color={theme.colors.icon} style={{ marginHorizontal: theme.spacing.x2 }} />
+      <SvgIcon name="search" color={theme.colors.icon} style={{ marginHorizontal: theme.spacing.x1 }} />
       <InputItem
         ref={inputRef}
         style={styles.textInput}

diff --git a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardInput.tsx
@@ -59,10 +59,10 @@ const VehicleKeyboardInput = forwardRef<VehicleKeyboardRef, VehicleKeyboardInput
             setTrue();
           }}
           style={[
+            itemHeight ? { height: itemHeight } : {},
             {
               flex: 1,
               paddingVertical: theme.spacing.x2,
-              height: itemHeight,
             },
             style,
           ]}

diff --git a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx
@@ -27,6 +27,7 @@ const VehicleKeyboardItem = forwardRef<VehicleKeyboardRef, VehicleKeyboardItemPr
       extra,
       allowClear = true,
       activeOpacity = 0.6,
+      inForm,
       ...restProps
     },
     ref
@@ -41,8 +42,8 @@ const VehicleKeyboardItem = forwardRef<VehicleKeyboardRef, VehicleKeyboardItemPr
     });
 
     return (
-      <Box width="100%">
-        <Flex style={style}>
+      <Box flexGrow={1} paddingHorizontal={inForm ? 'x0' : 'x1'} justifyContent={'center'} style={style}>
+        <Flex>
           <Pressable
             activeOpacity={activeOpacity}
             onPress={() => {

diff --git a/packages/react-native/src/vehicle-keyboard/type.ts b/packages/react-native/src/vehicle-keyboard/type.ts
@@ -39,6 +39,7 @@ export interface VehicleKeyboardItemProps extends Pick<VehicleKeyboardViewProps,
   extra?: ReactNode;
   allowClear?: boolean;
   disabled?: boolean;
+  inForm?: boolean;
 }
 
 export interface VehicleKeyboardInputProps extends VehicleKeyboardItemProps {