fix(Field): 🐛 修复 valueStyle marginTop 被覆盖

24jieqi · Jul 16, 2024 · 484bff5 · 484bff5
1 parent 19561db
commit 484bff5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/src/field/__fixtures__/text-input.tsx b/src/field/__fixtures__/text-input.tsx
@@ -55,6 +55,14 @@ const BasicFieldTextInput: React.FC = () => {
         value={text1}
         onChange={setText1}
       />
+      <Field.TextInput
+        vertical
+        title="自定义 valueStyle"
+        valueStyle={{ marginTop: 16 }}
+        placeholder="请输入"
+        value={text1}
+        onChange={setText1}
+      />
       <Field.TextInput
         type="textarea"
         title="多行输入"

diff --git a/src/field/field-password.tsx b/src/field/field-password.tsx
@@ -1,4 +1,5 @@
 import React, { memo } from 'react'
+import { StyleSheet } from 'react-native'
 
 import Cell from '../cell'
 import PasswordInput from '../password-input'
@@ -25,6 +26,7 @@ const FieldPasswordInput: React.FC<FieldPasswordInputProps> = ({
   }
 
   const TOKENS = Theme.useThemeTokens()
+  const outerValueStyle = StyleSheet.flatten(cellProps.valueStyle || {})
 
   return (
     <Cell
@@ -33,7 +35,7 @@ const FieldPasswordInput: React.FC<FieldPasswordInputProps> = ({
         cellProps.valueStyle,
         cellProps.vertical
           ? {
-              marginTop: TOKENS.space_2,
+              marginTop: outerValueStyle.marginTop ?? TOKENS.space_2,
             }
           : null,
       ]}

diff --git a/src/field/field-text-input.tsx b/src/field/field-text-input.tsx
@@ -1,4 +1,5 @@
 import React, { memo } from 'react'
+import { StyleSheet } from 'react-native'
 
 import Cell from '../cell'
 import TextInput from '../text-input'
@@ -35,6 +36,7 @@ const FieldTextInput: React.FC<FieldTextInputProps> = ({
   }
 
   const TOKENS = Theme.useThemeTokens()
+  const outerValueStyle = StyleSheet.flatten(cellProps.valueStyle || {})
 
   return (
     <Cell
@@ -43,7 +45,7 @@ const FieldTextInput: React.FC<FieldTextInputProps> = ({
         cellProps.valueStyle,
         cellProps.vertical
           ? {
-              marginTop: TOKENS.space_2,
+              marginTop: outerValueStyle.marginTop ?? TOKENS.space_2,
             }
           : null,
       ]}