Merge pull request #783 from thundersdata-frontend/list-issue

fix: 修复多个组件在表单中使用的 bug
thundersdata-frontend · Dec 8, 2023 · 1bb2138 · 1bb2138
2 parents d30735c + 839433b
commit 1bb2138
Show file tree

Hide file tree

Showing 24 changed files with 105 additions and 74 deletions.
diff --git a/.changeset/eighty-parents-thank.md b/.changeset/eighty-parents-thank.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native': patch
+---
+
+fix: 修复多个组件在表单中使用时的样式问题
diff --git a/.changeset/happy-yaks-teach.md b/.changeset/happy-yaks-teach.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-image-picker': patch
+---
+
+fix: 修复 loading 图标定位 bug
diff --git a/.changeset/olive-melons-shave.md b/.changeset/olive-melons-shave.md
@@ -0,0 +1,5 @@
+---
+'@td-design/react-native-picker': patch
+---
+
+fix: 修复在表单中使用时的样式问题
diff --git a/packages/react-native-image-picker/src/index.tsx b/packages/react-native-image-picker/src/index.tsx
@@ -92,13 +92,13 @@ const ImagePicker = forwardRef<ImagePickerRef, ImagePickerProps>(
     useImperativeHandle(ref, () => ({}));
 
     return (
-      <>
+      <Box>
         <Pressable
           activeOpacity={activeOpacity}
           onPress={handlePress}
           onLongPress={handleLongPress}
           disabled={loading}
-          style={{ justifyContent: 'center', alignItems: 'center', width, height }}
+          style={{ justifyContent: 'center', alignItems: 'flex-start', width, height }}
         >
           {!!currentImgSource ? (
             <Image
@@ -160,7 +160,7 @@ const ImagePicker = forwardRef<ImagePickerRef, ImagePickerProps>(
             />
           </TouchableWithoutFeedback>
         </Modal>
-      </>
+      </Box>
     );
   }
 );

diff --git a/packages/react-native-picker/src/date-period-input/index.tsx b/packages/react-native-picker/src/date-period-input/index.tsx
@@ -77,7 +77,7 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
         </Text>
       </Flex>
       {!disabled && allowClear && dates[0] && (
-        <Pressable activeOpacity={1} onPress={handleInputClear1} style={styles.icon}>
+        <Pressable activeOpacity={1} onPress={handleInputClear1} hitOffset={10} style={styles.icon}>
           <SvgIcon name="closecircleo" color={theme.colors.icon} />
         </Pressable>
       )}
@@ -93,7 +93,7 @@ const DatePeriodInput: FC<DatePeriodInputProps> = ({
         </Text>
       </Flex>
       {!disabled && allowClear && dates[1] && (
-        <Pressable activeOpacity={1} onPress={handleInputClear2} style={styles.icon}>
+        <Pressable activeOpacity={1} onPress={handleInputClear2} hitOffset={10} style={styles.icon}>
           <SvgIcon name="closecircleo" color={theme.colors.icon} />
         </Pressable>
       )}

diff --git a/packages/react-native-picker/src/date-picker-item/index.tsx b/packages/react-native-picker/src/date-picker-item/index.tsx
@@ -44,7 +44,6 @@ const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
 
     const styles = StyleSheet.create({
       content: {
-        paddingVertical: theme.spacing.x1,
         justifyContent: 'flex-end',
         alignItems: 'center',
         flexDirection: 'row',
@@ -58,7 +57,7 @@ const DatePickerItem = forwardRef<PickerRef, PickerItemProps>(
           {currentText}
         </Text>
         {!disabled && allowClear && !!currentText && currentText !== placeholder && (
-          <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.icon}>
+          <Pressable activeOpacity={1} onPress={handleInputClear} hitOffset={10} style={styles.icon}>
             <SvgIcon name="closecircleo" color={theme.colors.icon} />
           </Pressable>
         )}

diff --git a/packages/react-native-picker/src/picker-input/index.tsx b/packages/react-native-picker/src/picker-input/index.tsx
@@ -85,7 +85,7 @@ const PickerInput = forwardRef<PickerRef, PickerInputProps>(
         </Box>
         <Flex>
           {!disabled && allowClear && !!currentText && currentText !== placeholder && (
-            <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.icon}>
+            <Pressable activeOpacity={1} onPress={handleInputClear} hitOffset={10} style={styles.icon}>
               <SvgIcon name="closecircleo" color={theme.colors.icon} />
             </Pressable>
           )}

diff --git a/packages/react-native-picker/src/picker-item/index.tsx b/packages/react-native-picker/src/picker-item/index.tsx
@@ -48,7 +48,6 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
     const styles = StyleSheet.create({
       content: {
         flexGrow: 1,
-        paddingVertical: theme.spacing.x1,
         justifyContent: 'flex-end',
         alignItems: 'center',
         flexDirection: 'row',
@@ -68,7 +67,7 @@ const PickerItem = forwardRef<PickerRef, PickerItemProps>(
           {currentText}
         </Text>
         {!disabled && allowClear && !!currentText && currentText !== placeholder && (
-          <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.icon}>
+          <Pressable activeOpacity={1} onPress={handleInputClear} hitOffset={10} style={styles.icon}>
             <SvgIcon name="closecircleo" color={theme.colors.icon} />
           </Pressable>
         )}

diff --git a/packages/react-native-picker/src/usePicker.ts b/packages/react-native-picker/src/usePicker.ts
@@ -15,7 +15,7 @@ function getText(
   placeholder?: string
 ) {
   if (value) {
-    return transformValueToLabel(data, value, cascade);
+    return transformValueToLabel(data, value, cascade) || placeholder;
   }
   return placeholder;
 }

diff --git a/packages/react-native/src/button/index.tsx b/packages/react-native/src/button/index.tsx
@@ -32,7 +32,7 @@ export type ButtonProps = PressableProps & {
 const Button: FC<ButtonProps> = props => {
   const { loading, title } = props;
 
-  const { pressableProps, textColor, variant, indicatorColor } = useButton(props);
+  const { pressableProps, textColor, variant, indicatorColor, loadingIconSize } = useButton(props);
 
   const Title = useMemo(() => {
     if (typeof title === 'string')
@@ -47,7 +47,12 @@ const Button: FC<ButtonProps> = props => {
   return (
     <Pressable {...pressableProps}>
       {!!loading && (
-        <UIActivityIndicator color={indicatorColor} size={px(18)} animating={loading} style={{ marginRight: px(4) }} />
+        <UIActivityIndicator
+          color={indicatorColor}
+          size={loadingIconSize}
+          animating={loading}
+          style={{ marginRight: px(4) }}
+        />
       )}
       {Title}
     </Pressable>

diff --git a/packages/react-native/src/button/useButton.ts b/packages/react-native/src/button/useButton.ts
@@ -8,7 +8,8 @@ import helpers from '../helpers';
 import { PressableProps } from '../pressable';
 import { Color, Theme, Variant } from '../theme';
 
-const { ONE_PIXEL } = helpers;
+const { px, ONE_PIXEL } = helpers;
+
 export default function useButton(props: ButtonProps) {
   const theme = useTheme<Theme>();
   const {
@@ -41,17 +42,29 @@ export default function useButton(props: ButtonProps) {
     borderWidth = type === 'secondary' ? ONE_PIXEL : 0;
   }
 
-  const { variant, paddingVertical } = useMemo(() => {
+  const { variant, paddingVertical, loadingIconSize } = useMemo(() => {
     switch (size) {
       case 'default':
       default:
-        return { variant: 'p1' as Variant, paddingVertical: theme.spacing.x2 };
+        return {
+          variant: 'p1' as Variant,
+          paddingVertical: theme.spacing.x2,
+          loadingIconSize: px(16),
+        };
 
       case 'large':
-        return { variant: 'p0' as Variant, paddingVertical: theme.spacing.x3 };
+        return {
+          variant: 'p0' as Variant,
+          paddingVertical: theme.spacing.x3,
+          loadingIconSize: px(20),
+        };
 
       case 'small':
-        return { variant: 'p2' as Variant, paddingVertical: theme.spacing.x1 };
+        return {
+          variant: 'p2' as Variant,
+          paddingVertical: theme.spacing.x1,
+          loadingIconSize: px(12),
+        };
     }
   }, [size]);
 
@@ -86,5 +99,6 @@ export default function useButton(props: ButtonProps) {
     textColor,
     indicatorColor,
     pressableProps,
+    loadingIconSize,
   };
 }
diff --git a/packages/react-native/src/form/FormItem.tsx b/packages/react-native/src/form/FormItem.tsx
@@ -5,16 +5,23 @@ import { useSafeState } from '@td-design/rn-hooks';
 import { Field, FieldContext } from 'rc-field-form';
 import { Meta } from 'rc-field-form/es/interface';
 
+import Box from '../box';
+import helpers from '../helpers';
 import Text from '../text';
 import { Theme } from '../theme';
+import { FormContext } from './context';
 import { FormItemProps } from './type';
 
+const { ONE_PIXEL } = helpers;
+
 const FormItem: FC<FormItemProps> = ({ children, type = 'bottom', name, ...fieldProps }) => {
   const theme = useTheme<Theme>();
   const ref = useRef<{ focus: () => void }>(null);
   const fieldContext = useContext(FieldContext);
   const [errors, setErrors] = useSafeState<string[]>([]);
 
+  const { formItemHeight } = useContext(FormContext);
+
   const onMetaChange = (
     meta: Meta & {
       destroy?: boolean;
@@ -48,13 +55,20 @@ const FormItem: FC<FormItemProps> = ({ children, type = 'bottom', name, ...field
   }, [errors]);
 
   return (
-    <Field name={name} {...fieldProps} onMetaChange={onMetaChange}>
-      {React.cloneElement(children, {
-        ref,
-        style: errors.length > 0 ? createStyleByType() : {},
-        brief: Error,
-      })}
-    </Field>
+    <Box
+      height={formItemHeight}
+      justifyContent={'center'}
+      borderBottomColor={'border'}
+      borderBottomWidth={ONE_PIXEL}
+      style={errors.length > 0 ? createStyleByType() : {}}
+    >
+      <Field name={name} {...fieldProps} onMetaChange={onMetaChange}>
+        {React.cloneElement(children, {
+          ref,
+          brief: Error,
+        })}
+      </Field>
+    </Box>
   );
 };
 FormItem.displayName = 'FormItem';

diff --git a/packages/react-native/src/form/FormListItem.tsx b/packages/react-native/src/form/FormListItem.tsx
@@ -8,6 +8,7 @@ import { Meta } from 'rc-field-form/es/interface';
 import ListItem from '../list-item';
 import Text from '../text';
 import { Theme } from '../theme';
+import { FormContext } from './context';
 import { FormListItemProps } from './type';
 
 const FormListItem: FC<FormListItemProps> = ({
@@ -26,6 +27,7 @@ const FormListItem: FC<FormListItemProps> = ({
   const ref = useRef<{ focus: () => void }>(null);
   const fieldContext = useContext(FieldContext);
   const [errors, setErrors] = useSafeState<string[]>([]);
+  const { formItemHeight } = useContext(FormContext);
 
   const onMetaChange = (
     meta: Meta & {
@@ -51,7 +53,7 @@ const FormListItem: FC<FormListItemProps> = ({
 
   return (
     <ListItem
-      {...{ title, required, style, thumb, onPress, arrow, backgroundColor }}
+      {...{ title, required, thumb, onPress, arrow, backgroundColor }}
       brief={Error}
       extra={
         <Field {...fieldProps} name={name} onMetaChange={onMetaChange}>
@@ -60,14 +62,19 @@ const FormListItem: FC<FormListItemProps> = ({
           })}
         </Field>
       }
-      style={
+      style={[
+        {
+          height: formItemHeight,
+          paddingHorizontal: 0,
+        },
         errors.length > 0
           ? {
               borderBottomColor: theme.colors.func600,
               borderBottomWidth: 1,
             }
-          : {}
-      }
+          : {},
+        style,
+      ]}
     />
   );
 };

diff --git a/packages/react-native/src/form/context.ts b/packages/react-native/src/form/context.ts
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const FormContext = createContext<{ formItemHeight: number }>({ formItemHeight: 0 });
diff --git a/packages/react-native/src/form/index.tsx b/packages/react-native/src/form/index.tsx
@@ -3,15 +3,19 @@ import React, { FC } from 'react';
 import RcForm, { useForm } from 'rc-field-form';
 import { FormProps as RcFormProps } from 'rc-field-form/es/Form';
 
+import helpers from '../helpers';
+import { FormContext } from './context';
 import FormItem from './FormItem';
 import FormListItem from './FormListItem';
 
-export type FormProps = Omit<RcFormProps, 'component'>;
+const { px } = helpers;
 
-const Form: FC<FormProps> = ({ children, ...props }) => {
+export type FormProps = Omit<RcFormProps, 'component'> & { formItemHeight?: number };
+
+const Form: FC<FormProps> = ({ children, formItemHeight = px(54), ...props }) => {
   return (
     <RcForm component={false} {...props}>
-      {children}
+      <FormContext.Provider value={{ formItemHeight }}>{children}</FormContext.Provider>
     </RcForm>
   );
 };

diff --git a/packages/react-native/src/input/InputItem.tsx b/packages/react-native/src/input/InputItem.tsx
@@ -12,7 +12,7 @@ import Text from '../text';
 import { Theme } from '../theme';
 import useInputItem from './useInputItem';
 
-const { ONE_PIXEL, px } = helpers;
+const { px } = helpers;
 export interface InputItemProps
   extends Omit<TextInputProps, 'placeholderTextColor' | 'onChange' | 'onChangeText' | 'style'> {
   /** 标签 */
@@ -80,16 +80,6 @@ const InputItem = forwardRef<TextInput, InputItemProps>(
         fontSize: px(14),
         color: theme.colors.text,
       },
-      clearIcon: {
-        position: 'absolute',
-        zIndex: 99,
-        right: inputType === 'password' ? theme.spacing.x6 : theme.spacing.x1,
-      },
-      password: {
-        position: 'absolute',
-        zIndex: 99,
-        right: theme.spacing.x1,
-      },
     });
 
     const InputContent = (
@@ -114,20 +104,20 @@ const InputItem = forwardRef<TextInput, InputItemProps>(
           />
         </Box>
         {allowClear && editable && !!inputValue && (
-          <Pressable activeOpacity={1} onPress={handleInputClear} style={styles.clearIcon}>
+          <Pressable activeOpacity={1} onPress={handleInputClear} hitOffset={10}>
             <SvgIcon name="closecircleo" color={theme.colors.icon} />
           </Pressable>
         )}
         {inputType === 'password' && (
-          <Pressable activeOpacity={1} onPress={triggerPasswordType} style={styles.password}>
+          <Pressable activeOpacity={1} onPress={triggerPasswordType} hitOffset={10}>
             <SvgIcon name={eyeOpen ? 'eyeclose' : 'eyeopen'} color={theme.colors.icon} />
           </Pressable>
         )}
       </Flex>
     );
 
     return (
-      <Box borderBottomWidth={border ? ONE_PIXEL : 0} borderColor="border" width="100%" style={style}>
+      <Box width="100%" style={style}>
         <Flex>
           <Label {...{ colon, label, required }} />
           {InputContent}

diff --git a/packages/react-native/src/input/TextArea.tsx b/packages/react-native/src/input/TextArea.tsx
@@ -103,7 +103,7 @@ const Label = memo(({ label, required }: Pick<TextAreaProps, 'label' | 'required
 
   if (typeof label === 'string')
     return (
-      <Flex alignItems={'center'}>
+      <Flex alignItems={'center'} paddingVertical={'x1'}>
         {required && <Text color="func600">*</Text>}
         <Text variant="p1" color="text">
           {label}
@@ -112,7 +112,7 @@ const Label = memo(({ label, required }: Pick<TextAreaProps, 'label' | 'required
     );
 
   return (
-    <Flex alignItems={'center'}>
+    <Flex alignItems={'center'} paddingVertical={'x1'}>
       {required && <Text color="func600">*</Text>}
       {label}
     </Flex>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { createContext } from 'react';

		export const FormContext = createContext<{ formItemHeight: number }>({ formItemHeight: 0 });