diff --git a/.changeset/eighty-parents-thank.md b/.changeset/eighty-parents-thank.md new file mode 100644 index 0000000000..a2b0bab366 --- /dev/null +++ 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 new file mode 100644 index 0000000000..9221ae8e18 --- /dev/null +++ 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 new file mode 100644 index 0000000000..9599aa8d0e --- /dev/null +++ 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 index 3b0347b4ea..3eaad0b011 100644 --- 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( useImperativeHandle(ref, () => ({})); return ( - <> + {!!currentImgSource ? ( ( /> - + ); } ); diff --git a/packages/react-native-picker/src/date-period-input/index.tsx b/packages/react-native-picker/src/date-period-input/index.tsx index afd04ef29e..797982c324 100644 --- 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 = ({ {!disabled && allowClear && dates[0] && ( - + )} @@ -93,7 +93,7 @@ const DatePeriodInput: FC = ({ {!disabled && allowClear && dates[1] && ( - + )} diff --git a/packages/react-native-picker/src/date-picker-item/index.tsx b/packages/react-native-picker/src/date-picker-item/index.tsx index 91e70147dd..4107f1f318 100644 --- 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( const styles = StyleSheet.create({ content: { - paddingVertical: theme.spacing.x1, justifyContent: 'flex-end', alignItems: 'center', flexDirection: 'row', @@ -58,7 +57,7 @@ const DatePickerItem = forwardRef( {currentText} {!disabled && allowClear && !!currentText && currentText !== placeholder && ( - + )} diff --git a/packages/react-native-picker/src/picker-input/index.tsx b/packages/react-native-picker/src/picker-input/index.tsx index c9aab9c649..2aabf5e61f 100644 --- 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( {!disabled && allowClear && !!currentText && currentText !== placeholder && ( - + )} diff --git a/packages/react-native-picker/src/picker-item/index.tsx b/packages/react-native-picker/src/picker-item/index.tsx index 7f3e92f687..dbd90b17a3 100644 --- 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( 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( {currentText} {!disabled && allowClear && !!currentText && currentText !== placeholder && ( - + )} diff --git a/packages/react-native-picker/src/usePicker.ts b/packages/react-native-picker/src/usePicker.ts index 814f791d0b..9b60ce5845 100644 --- 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 index b1dbe3399d..51c62ac329 100644 --- 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 = 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 = props => { return ( {!!loading && ( - + )} {Title} diff --git a/packages/react-native/src/button/useButton.ts b/packages/react-native/src/button/useButton.ts index c089337cd9..021f5014b7 100644 --- 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(); 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 index 58121d945b..456f11696d 100644 --- 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 = ({ children, type = 'bottom', name, ...fieldProps }) => { const theme = useTheme(); const ref = useRef<{ focus: () => void }>(null); const fieldContext = useContext(FieldContext); const [errors, setErrors] = useSafeState([]); + const { formItemHeight } = useContext(FormContext); + const onMetaChange = ( meta: Meta & { destroy?: boolean; @@ -48,13 +55,20 @@ const FormItem: FC = ({ children, type = 'bottom', name, ...field }, [errors]); return ( - - {React.cloneElement(children, { - ref, - style: errors.length > 0 ? createStyleByType() : {}, - brief: Error, - })} - + 0 ? createStyleByType() : {}} + > + + {React.cloneElement(children, { + ref, + brief: Error, + })} + + ); }; FormItem.displayName = 'FormItem'; diff --git a/packages/react-native/src/form/FormListItem.tsx b/packages/react-native/src/form/FormListItem.tsx index ee9b8cba4d..299a23cb73 100644 --- 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 = ({ @@ -26,6 +27,7 @@ const FormListItem: FC = ({ const ref = useRef<{ focus: () => void }>(null); const fieldContext = useContext(FieldContext); const [errors, setErrors] = useSafeState([]); + const { formItemHeight } = useContext(FormContext); const onMetaChange = ( meta: Meta & { @@ -51,7 +53,7 @@ const FormListItem: FC = ({ return ( @@ -60,14 +62,19 @@ const FormListItem: FC = ({ })} } - 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 new file mode 100644 index 0000000000..e7350ae5c8 --- /dev/null +++ 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 index 5a274de0d1..309eef861d 100644 --- 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; +const { px } = helpers; -const Form: FC = ({ children, ...props }) => { +export type FormProps = Omit & { formItemHeight?: number }; + +const Form: FC = ({ children, formItemHeight = px(54), ...props }) => { return ( - {children} + {children} ); }; diff --git a/packages/react-native/src/input/InputItem.tsx b/packages/react-native/src/input/InputItem.tsx index bd53c46e5c..c64469d004 100644 --- 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 { /** 标签 */ @@ -80,16 +80,6 @@ const InputItem = forwardRef( 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,12 +104,12 @@ const InputItem = forwardRef( /> {allowClear && editable && !!inputValue && ( - + )} {inputType === 'password' && ( - + )} @@ -127,7 +117,7 @@ const InputItem = forwardRef( ); return ( - + {allowClear && !disabled && !!inputValue && ( - + )} {inputType === 'password' && ( - + )} diff --git a/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx b/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx index ee17794fe0..5f5269a75d 100644 --- a/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx +++ b/packages/react-native/src/number-keyboard/NumberKeyboardInput.tsx @@ -14,7 +14,7 @@ import NumberKeyboardModal from './NumberKeyboardModal'; import { NumberKeyboardInputProps, NumberKeyboardRef } from './type'; import useNumberKeyboard from './useNumberKeyboard'; -const { px, ONE_PIXEL } = helpers; +const { ONE_PIXEL } = helpers; const NumberKeyboardInput = forwardRef( ( { @@ -30,7 +30,6 @@ const NumberKeyboardInput = forwardRef {allowClear && !disabled && !!currentText && currentText !== placeholder && ( - + )} diff --git a/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx b/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx index 682e93a8c5..c66942e3df 100644 --- a/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx +++ b/packages/react-native/src/number-keyboard/NumberKeyboardItem.tsx @@ -5,7 +5,6 @@ import { useTheme } from '@shopify/restyle'; import Box from '../box'; import Flex from '../flex'; -import helpers from '../helpers'; import Pressable from '../pressable'; import SvgIcon from '../svg-icon'; import Text from '../text'; @@ -14,7 +13,6 @@ import NumberKeyboardModal from './NumberKeyboardModal'; import { NumberKeyboardItemProps, NumberKeyboardRef } from './type'; import useNumberKeyboard from './useNumberKeyboard'; -const { px } = helpers; const NumberKeyboardItem = forwardRef( ( { @@ -29,7 +27,6 @@ const NumberKeyboardItem = forwardRef {allowClear && !disabled && !!currentText && currentText !== placeholder && ( - + )} diff --git a/packages/react-native/src/number-keyboard/index.md b/packages/react-native/src/number-keyboard/index.md index 4724a5e906..cc8d43ddea 100644 --- a/packages/react-native/src/number-keyboard/index.md +++ b/packages/react-native/src/number-keyboard/index.md @@ -199,7 +199,6 @@ group: | arrowClear | `false` | 是否允许清空 | `boolean` | `true` | | disabled | `false` | 是否禁用 | `boolean` | `false` | | digit | `false` | 保留的小数位数 | `number` | `0` | -| minHeight | `false` | 最小高度 | `number` | `32` | | activeOpacity | `false` | 按下时的不透明度 | `number` | `0.6` | ### NumberKeyboardInput 组件 diff --git a/packages/react-native/src/number-keyboard/type.ts b/packages/react-native/src/number-keyboard/type.ts index f854dae55a..f1f059f0f4 100644 --- a/packages/react-native/src/number-keyboard/type.ts +++ b/packages/react-native/src/number-keyboard/type.ts @@ -34,8 +34,6 @@ export interface NumberKeyboardItemProps extends Pick {allowClear && !disabled && !!currentText && currentText !== placeholder && ( - + )} diff --git a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx index a9f0197e78..d1e83739ad 100644 --- a/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx +++ b/packages/react-native/src/vehicle-keyboard/VehicleKeyboardItem.tsx @@ -67,7 +67,7 @@ const VehicleKeyboardItem = forwardRef {allowClear && !disabled && !!currentText && currentText !== placeholder && ( - + )}