Merge pull request #21 from kasonyang/fix-input-prop-and-style-values

fix(input): 无效属性和样式值
jd-opensource · Aug 24, 2023 · 0836924 · 0836924
2 parents f9fe2b8 + 23bcf8e
commit 0836924
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 11 deletions.
diff --git a/components/input/input.tsx b/components/input/input.tsx
@@ -10,7 +10,7 @@ import React, {
   forwardRef,
   useImperativeHandle,
 } from 'react';
-import { TextInput, View, Text, TouchableOpacity } from 'react-native';
+import { TextInput, View, Text, TouchableOpacity, Platform } from 'react-native';
 
 import { formatNumber, BasicComponent, ComponentDefaults } from '../utils';
 import Icon from '../icon';
@@ -114,7 +114,7 @@ const defaultProps = {
   rules: [],
   rows: null,
   errorMessage: '',
-  errorMessageAlign: '',
+  errorMessageAlign: undefined,
   showWordLimit: false,
   autofocus: false,
   slotButton: null,
@@ -287,7 +287,7 @@ export const Input: FunctionComponent<
       SetActive(false);
     }, 200);
     let val = event.nativeEvent?.text;
-    if (maxlength && val.length > Number(maxlength)) {
+    if (maxlength && val && val.length > Number(maxlength)) {
       val = val.slice(0, Number(maxlength));
     }
     updateValue(getModelValue(), 'onBlur');
@@ -420,10 +420,10 @@ export const Input: FunctionComponent<
                       disabled && styles.nutInputText_disabled,
                       error && styles.nutInputText_error,
                     ]}
-                    maxLength={maxlength || undefined}
+                    maxLength={maxlength ? Number(maxlength) : undefined}
                     placeholder={placeholder || locale.placeholder}
                     placeholderTextColor={
-                      error ? theme['$input-required-color'] : ''
+                      error ? theme['$input-required-color'] : undefined
                     }
                     editable={!readonly && !disabled}
                     value={inputValue}
@@ -448,10 +448,10 @@ export const Input: FunctionComponent<
                       error && styles.nutInputText_error,
                     ]}
                     // type={inputType(type)}
-                    maxLength={maxlength || undefined}
+                    maxLength={maxlength ? Number(maxlength) : undefined}
                     placeholder={placeholder || locale.placeholder}
                     placeholderTextColor={
-                      error ? theme['$input-required-color'] : ''
+                      error ? theme['$input-required-color'] : undefined
                     }
                     editable={!readonly && !disabled}
                     value={

diff --git a/components/input/styles.ts b/components/input/styles.ts
@@ -1,4 +1,4 @@
-import { StyleSheet } from 'react-native';
+import { Platform, StyleSheet } from 'react-native';
 import pt from '../utils/pt';
 import px from '../utils/px';
 
@@ -64,14 +64,22 @@ export default (theme: any) =>
       height: pt(48),
       textAlign: 'left',
       borderWidth: 0,
-      outlineWidh: 0,
+      ...Platform.select({
+        web: {
+          outlineWidth: 0,
+        }
+      }),
       backgroundColor: 'transparent',
       color: theme['$gray1'],
     },
     nutInputText_disabled: {
       color: theme['$input-disabled-color'],
-      backgroundColor: 'none',
-      cursor: 'not-allowed',
+      backgroundColor: undefined,
+      ...Platform.select({
+        web: {
+          cursor: 'not-allowed',
+        },
+      }),
       opacity: 1,
     },
     nutInputText_error: {