From 6bcfba48aca8e4f3d7d843406b3a3f659d630f12 Mon Sep 17 00:00:00 2001 From: Samuel Holmes Date: Mon, 15 Jan 2024 18:59:18 -0800 Subject: [PATCH 1/2] Hide placeholder when SimpleTextInput has a value --- .../__snapshots__/WalletListModal.test.tsx.snap | 6 ++++++ .../CreateWalletSelectCryptoScene.test.tsx.snap | 6 ++++++ src/components/themed/SimpleTextInput.tsx | 11 +++++++++-- 3 files changed, 21 insertions(+), 2 deletions(-) diff --git a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap index 5d6143d8b47..61b72378b25 100644 --- a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap @@ -251,6 +251,11 @@ exports[`WalletListModal should render with loading props 1`] = ` "value": 0, } } + hasValueAnimation={ + { + "value": 0, + } + } scale={ { "value": 1, @@ -275,6 +280,7 @@ exports[`WalletListModal should render with loading props 1`] = ` { "color": undefined, "fontSize": 22, + "opacity": undefined, }, ] } diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap index cc9492c2a4a..75ec9ed254f 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap @@ -421,6 +421,11 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = ` "value": 0, } } + hasValueAnimation={ + { + "value": 0, + } + } scale={ { "value": 1, @@ -445,6 +450,7 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = ` { "color": undefined, "fontSize": 22, + "opacity": undefined, }, ] } diff --git a/src/components/themed/SimpleTextInput.tsx b/src/components/themed/SimpleTextInput.tsx index 5e12ffe8b63..8e70b7c9921 100644 --- a/src/components/themed/SimpleTextInput.tsx +++ b/src/components/themed/SimpleTextInput.tsx @@ -166,6 +166,11 @@ export const SimpleTextInput = React.forwardRef scaleProp?.value ?? 1) + const hasValueAnimation = useDerivedValue( + () => (hasValue ? withTiming(1, { duration: baseDuration }) : withTiming(0, { duration: baseDuration })), + [hasValue] + ) + const interpolateIconColor = useAnimatedColorInterpolateFn(theme.textInputIconColor, theme.textInputIconColorFocused, theme.textInputIconColorDisabled) const iconColor = useDerivedValue(() => interpolateIconColor(focusAnimation, disableAnimation)) @@ -176,7 +181,7 @@ export const SimpleTextInput = React.forwardRef {placeholder == null ? null : ( - + {placeholder} )} @@ -277,8 +282,9 @@ const InnerContainer = styled(View)({ const PlaceholderText = styled(Animated.Text)<{ disableAnimation: SharedValue focusAnimation: SharedValue + hasValueAnimation: SharedValue scale: SharedValue -}>(theme => ({ disableAnimation, focusAnimation, scale }) => { +}>(theme => ({ disableAnimation, focusAnimation, hasValueAnimation, scale }) => { const rem = theme.rem(1) const interpolatePlaceholderTextColor = useAnimatedColorInterpolateFn( theme.textInputPlaceholderColor, @@ -303,6 +309,7 @@ const PlaceholderText = styled(Animated.Text)<{ }, useAnimatedStyle(() => { return { + opacity: interpolate(hasValueAnimation.value, [0, 1], [1, 0]), color: interpolatePlaceholderTextColor(focusAnimation, disableAnimation), fontSize: scale.value * rem } From 98013eeb031057ea21ec698057d4870e2eb23a5f Mon Sep 17 00:00:00 2001 From: Samuel Holmes Date: Mon, 15 Jan 2024 19:17:29 -0800 Subject: [PATCH 2/2] Adjust placeholder text and input text theme colors --- .../modals/__snapshots__/WalletListModal.test.tsx.snap | 1 - .../__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap | 1 - src/components/themed/SimpleTextInput.tsx | 1 - src/theme/variables/edgeDark.ts | 2 +- 4 files changed, 1 insertion(+), 4 deletions(-) diff --git a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap index 61b72378b25..4ff0da7303e 100644 --- a/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap +++ b/src/__tests__/modals/__snapshots__/WalletListModal.test.tsx.snap @@ -319,7 +319,6 @@ exports[`WalletListModal should render with loading props 1`] = ` style={ [ { - "color": "hsla(0, 0%, 100%, 0.20)", "flexGrow": 1, "flexShrink": 1, "fontFamily": "Quicksand-Regular", diff --git a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap index 75ec9ed254f..90a4ae94d29 100644 --- a/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap +++ b/src/__tests__/scenes/__snapshots__/CreateWalletSelectCryptoScene.test.tsx.snap @@ -490,7 +490,6 @@ exports[`CreateWalletSelectCrypto should render with loading props 1`] = ` style={ [ { - "color": "hsla(0, 0%, 100%, 0.20)", "flexGrow": 1, "flexShrink": 1, "fontFamily": "Quicksand-Regular", diff --git a/src/components/themed/SimpleTextInput.tsx b/src/components/themed/SimpleTextInput.tsx index 8e70b7c9921..489aeef2a65 100644 --- a/src/components/themed/SimpleTextInput.tsx +++ b/src/components/themed/SimpleTextInput.tsx @@ -327,7 +327,6 @@ const InputField = styledWithRef(AnimatedTextInput)<{ return [ { - color: theme.textInputBackgroundColor, flexGrow: 1, flexShrink: 1, fontFamily: theme.fontFaceDefault, diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts index 1dadd71515e..ee3b98b6e07 100644 --- a/src/theme/variables/edgeDark.ts +++ b/src/theme/variables/edgeDark.ts @@ -418,7 +418,7 @@ export const edgeDark: Theme = { textInputIconColorFocused: palette.edgeMint, textInputPlaceholderColor: palette.whiteOp50, textInputPlaceholderColorDisabled: palette.whiteOp50, - textInputPlaceholderColorFocused: palette.edgeMint, + textInputPlaceholderColorFocused: palette.whiteOp50, // Animation fadeDisable: palette.gray,