From f41f150cd889fbfb28dfd1300a769e45810cd6b0 Mon Sep 17 00:00:00 2001 From: Yaman KATBY Date: Thu, 3 Mar 2022 13:31:22 +0300 Subject: [PATCH] fix: Work on TextInput animation bug (#32) --- package.json | 2 +- src/Avatar.tsx | 4 +-- src/TextInput.tsx | 34 ++++++++----------------- tsconfig.json | 1 - yarn.lock | 64 +++++++++++++++++++++++------------------------ 5 files changed, 46 insertions(+), 59 deletions(-) diff --git a/package.json b/package.json index 44479ff..c7371b1 100644 --- 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 index e3b5edc..d91ecae 100644 --- a/src/Avatar.tsx +++ b/src/Avatar.tsx @@ -85,7 +85,7 @@ const Avatar: React.FC = ({ borderRadius: size / 2, }, }), - [size, uppercase, palette] + [size, uppercase, palette], ); const getLabel = () => { @@ -117,7 +117,7 @@ const Avatar: React.FC = ({ return ( {(label || icon) && ( - {icon ? getIcon() : label && getLabel()} + {label ? getLabel() : icon && getIcon()} )} {image && {getImage()}} diff --git a/src/TextInput.tsx b/src/TextInput.tsx index 85a7d80..cba3009 100644 --- a/src/TextInput.tsx +++ b/src/TextInput.tsx @@ -109,7 +109,6 @@ const TextInput: React.FC = React.forwardRef( placeholder, onFocus, onBlur, - onChangeText, ...rest }, ref @@ -126,21 +125,11 @@ const TextInput: React.FC = 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 = 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 = 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 = 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 = 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 index 5ca37be..b869850 100644 --- 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 index 5a329dc..a5b3891 100644 --- 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"