fix: Work on TextInput animation bug (#32)

yamankatby · Mar 3, 2022 · f41f150 · f41f150
1 parent 51e6ef8
commit f41f150
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 59 deletions.
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "rn-material",
+  "name": "@react-native-material/core",
   "version": "1.3.5",
   "description": "Modular and customizable Material Design UI components for React Native",
   "main": "lib/commonjs/index",

diff --git a/src/Avatar.tsx b/src/Avatar.tsx
@@ -85,7 +85,7 @@ const Avatar: React.FC<AvatarProps> = ({
         borderRadius: size / 2,
       },
     }),
-    [size, uppercase, palette]
+    [size, uppercase, palette],
   );
 
   const getLabel = () => {
@@ -117,7 +117,7 @@ const Avatar: React.FC<AvatarProps> = ({
   return (
     <View style={[styles.container, style]}>
       {(label || icon) && (
-        <View style={[styles.contentContainer, contentContainerStyle]}>{icon ? getIcon() : label && getLabel()}</View>
+        <View style={[styles.contentContainer, contentContainerStyle]}>{label ? getLabel() : icon && getIcon()}</View>
       )}
       {image && <View style={[StyleSheet.absoluteFillObject, imageContainerStyle]}>{getImage()}</View>}
     </View>

diff --git a/src/TextInput.tsx b/src/TextInput.tsx
@@ -109,7 +109,6 @@ const TextInput: React.FC<TextInputProps> = React.forwardRef(
       placeholder,
       onFocus,
       onBlur,
-      onChangeText,
       ...rest
     },
     ref
@@ -126,21 +125,11 @@ const TextInput: React.FC<TextInputProps> = React.forwardRef(
     const trailingNode =
       typeof trailing === 'function'
         ? trailing({
-          color: surfaceScale(0.62).hex(),
-          size: 24,
-        })
+            color: surfaceScale(0.62).hex(),
+            size: 24,
+          })
         : trailing;
 
-    const [text, setText] = useState('');
-
-    const handleChangeText = useCallback(
-      (text: string) => {
-        onChangeText?.(text);
-        setText(text);
-      },
-      [onChangeText]
-    );
-
     const [hovered, setHovered] = useState(false);
 
     const handleMouseEnter = useCallback(
@@ -188,7 +177,7 @@ const TextInput: React.FC<TextInputProps> = React.forwardRef(
       }).start();
     }, [focused]);
 
-    const active = useMemo(() => focused || text.length > 0, [focused, text]);
+    const active = useMemo(() => focused || (rest.value?.length || 0) > 0, [focused, rest.value]);
 
     const activeAnimation = useMemo(() => new Animated.Value(active ? 1 : 0), []);
 
@@ -210,17 +199,17 @@ const TextInput: React.FC<TextInputProps> = React.forwardRef(
               ? focused
                 ? surfaceScale(0.14).hex()
                 : hovered
-                  ? surfaceScale(0.08).hex()
-                  : surfaceScale(0.04).hex()
+                ? surfaceScale(0.08).hex()
+                : surfaceScale(0.04).hex()
               : variant === 'outlined'
-                ? surfaceScale(0).hex()
-                : undefined,
+              ? surfaceScale(0).hex()
+              : undefined,
         },
         input: {
           flex: 1,
           minHeight: variant === 'standard' ? 48 : 56,
-          paddingStart: !!leadingNode ? 12 : variant === 'standard' ? 0 : 16,
-          paddingEnd: !!trailingNode ? 12 : variant === 'standard' ? 0 : 16,
+          paddingStart: leadingNode ? 12 : variant === 'standard' ? 0 : 16,
+          paddingEnd: trailingNode ? 12 : variant === 'standard' ? 0 : 16,
           color: surfaceScale(0.87).hex(),
         },
         leading: {
@@ -271,7 +260,7 @@ const TextInput: React.FC<TextInputProps> = React.forwardRef(
           justifyContent: 'center',
           position: 'absolute',
           top: 0,
-          start: variant === 'standard' ? (!!leadingNode ? 36 : 0) : !!leadingNode ? 48 : 16,
+          start: variant === 'standard' ? (leadingNode ? 36 : 0) : leadingNode ? 48 : 16,
           height: variant === 'standard' ? 48 : 56,
         },
         helperText: {
@@ -304,7 +293,6 @@ const TextInput: React.FC<TextInputProps> = React.forwardRef(
             placeholder={label ? (focused ? placeholder : undefined) : placeholder}
             selectionColor={palette.main}
             placeholderTextColor={surfaceScale(0.4).hex()}
-            onChangeText={handleChangeText}
             onFocus={handleFocus}
             onBlur={handleBlur}
             {...({ onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, ...rest } as any)}

diff --git a/tsconfig.json b/tsconfig.json
@@ -7,7 +7,6 @@
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,
     "esModuleInterop": true,
-    "importsNotUsedAsValues": "error",
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["esnext"],

diff --git a/yarn.lock b/yarn.lock
@@ -2459,6 +2459,38 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@react-native-material/core@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "@react-native-material/core@workspace:."
+  dependencies:
+    "@commitlint/config-conventional": ^11.0.0
+    "@react-native-community/eslint-config": ^2.0.0
+    "@release-it/conventional-changelog": ^2.0.0
+    "@types/chroma-js": ^2.1.3
+    "@types/jest": ^26.0.0
+    "@types/react": ^17.0.39
+    "@types/react-native": 0.66.16
+    chroma-js: ^2.4.2
+    commitlint: ^11.0.0
+    eslint: ^7.2.0
+    eslint-config-prettier: ^7.0.0
+    eslint-plugin-prettier: ^3.1.3
+    husky: ^6.0.0
+    jest: ^26.0.1
+    pod-install: ^0.1.0
+    prettier: ^2.0.5
+    react: 16.13.1
+    react-native: 0.63.4
+    react-native-builder-bob: ^0.18.0
+    react-native-flex-layout: ^0.1.2
+    release-it: ^14.2.2
+    typescript: ^4.1.3
+  peerDependencies:
+    react: "*"
+    react-native: "*"
+  languageName: unknown
+  linkType: soft
+
 "@release-it/conventional-changelog@npm:^2.0.0":
   version: 2.0.1
   resolution: "@release-it/conventional-changelog@npm:2.0.1"
@@ -11029,38 +11061,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rn-material@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "rn-material@workspace:."
-  dependencies:
-    "@commitlint/config-conventional": ^11.0.0
-    "@react-native-community/eslint-config": ^2.0.0
-    "@release-it/conventional-changelog": ^2.0.0
-    "@types/chroma-js": ^2.1.3
-    "@types/jest": ^26.0.0
-    "@types/react": ^17.0.39
-    "@types/react-native": 0.66.16
-    chroma-js: ^2.4.2
-    commitlint: ^11.0.0
-    eslint: ^7.2.0
-    eslint-config-prettier: ^7.0.0
-    eslint-plugin-prettier: ^3.1.3
-    husky: ^6.0.0
-    jest: ^26.0.1
-    pod-install: ^0.1.0
-    prettier: ^2.0.5
-    react: 16.13.1
-    react-native: 0.63.4
-    react-native-builder-bob: ^0.18.0
-    react-native-flex-layout: ^0.1.2
-    release-it: ^14.2.2
-    typescript: ^4.1.3
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-  languageName: unknown
-  linkType: soft
-
 "rsvp@npm:^4.8.4":
   version: 4.8.5
   resolution: "rsvp@npm:4.8.5"