add textsizeRem parameter to FilledTextInput

EdgeApp · Jan 17, 2024 · 53a3c87 · 53a3c87
1 parent 7a0a44d
commit 53a3c87
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 8 deletions.
diff --git a/src/components/scenes/InputTesterScene.tsx b/src/components/scenes/InputTesterScene.tsx
@@ -29,6 +29,8 @@ export function InputTesterScene() {
   const [filledTextInputValue2, setFilledTextInputValue2] = useState<string>('')
   const [filledTextInputValue3, setFilledTextInputValue3] = useState<string>('')
   const [filledTextInputValue4, setFilledTextInputValue4] = useState<string>('')
+  const [filledTextInputValue5, setFilledTextInputValue5] = useState<string>('')
+  const [filledTextInputValue6, setFilledTextInputValue6] = useState<string>('')
   const walletId = selectedWallet?.wallet.id ?? ''
   const tokenId = selectedWallet?.tokenId ?? null
   const exchangedFlipInputRef = React.useRef<ExchangedFlipInputRef>(null)
@@ -80,6 +82,25 @@ export function InputTesterScene() {
   return (
     <SceneWrapper scroll hasTabs hasHeader={false}>
       <View style={styles.headerContainer}>
+        <FilledTextInput
+          vertical={1}
+          value={filledTextInputValue5}
+          onChangeText={setFilledTextInputValue5}
+          autoFocus={false}
+          placeholder="Test big text"
+          textsizeRem={1.5}
+          maxLength={100}
+        />
+        <FilledTextInput
+          numeric
+          vertical={1}
+          value={filledTextInputValue6}
+          onChangeText={setFilledTextInputValue6}
+          autoFocus={false}
+          placeholder="Test big number"
+          textsizeRem={1.25}
+          maxLength={100}
+        />
         <FilledTextInput
           vertical={1}
           value={filledTextInputValue}

diff --git a/src/components/themed/FilledTextInput.tsx b/src/components/themed/FilledTextInput.tsx
@@ -44,6 +44,7 @@ export interface FilledTextInputProps extends SpaceProps {
   showSpinner?: boolean
   prefix?: string // Text input is left-left justified with a persistent prefix
   suffix?: string // Text input is right-right justified with a persistent suffix
+  textsizeRem?: number
 
   // Callbacks:
   onBlur?: () => void
@@ -124,6 +125,7 @@ export const FilledTextInput = React.forwardRef<FilledTextInputRef, FilledTextIn
     maxLength,
     secureTextEntry,
     testID,
+    textsizeRem,
     ...spaceProps
   } = props
   const theme = useTheme()
@@ -216,7 +218,7 @@ export const FilledTextInput = React.forwardRef<FilledTextInputRef, FilledTextIn
           <InnerContainer focusValue={focusValue} hasPlaceholder={placeholder != null}>
             {placeholder == null ? null : (
               <Placeholder shift={focusValue}>
-                <PlaceholderText disableAnimation={disableAnimation} focusAnimation={focusAnimation} scale={scale} shift={focusValue}>
+                <PlaceholderText disableAnimation={disableAnimation} focusAnimation={focusAnimation} scale={scale} shift={focusValue} textsizeRem={textsizeRem}>
                   {placeholder}
                 </PlaceholderText>
               </Placeholder>
@@ -239,6 +241,7 @@ export const FilledTextInput = React.forwardRef<FilledTextInputRef, FilledTextIn
               selectionColor={theme.textInputTextColor}
               testID={`${testID}.textInput`}
               textAlignVertical="top"
+              textsizeRem={textsizeRem}
               scale={scale}
               value={value}
               // Callbacks:
@@ -351,6 +354,7 @@ const InnerContainer = styled(Animated.View)<{
 
   return [
     {
+      // backgroundColor: 'red',
       left: androidHShift,
       flex: 1,
       flexDirection: 'row',
@@ -405,6 +409,7 @@ const Placeholder = styled(Animated.View)<{ shift: SharedValue<number> }>(theme
   const androidVShift = isAndroid ? rem / 16 : 0
   return [
     {
+      // backgroundColor: 'green',
       position: 'absolute',
       top: androidVShift,
       left: rem * 0.4,
@@ -432,8 +437,10 @@ const PlaceholderText = styled(Animated.Text)<{
   focusAnimation: SharedValue<number>
   scale: SharedValue<number>
   shift: SharedValue<number>
-}>(theme => ({ disableAnimation, focusAnimation, scale, shift }) => {
-  const fontSizeBase = theme.rem(scale.value)
+  textsizeRem?: number
+}>(theme => ({ disableAnimation, focusAnimation, scale, shift, textsizeRem }) => {
+  const fontSizeBase = theme.rem(textsizeRem ?? scale.value)
+  const fontSizeScaled = theme.rem(scale.value) * 0.75
   const interpolatePlaceholderTextColor = useAnimatedColorInterpolateFn(
     theme.textInputPlaceholderColor,
     theme.textInputPlaceholderColorFocused,
@@ -449,7 +456,7 @@ const PlaceholderText = styled(Animated.Text)<{
     useAnimatedStyle(() => {
       return {
         color: interpolatePlaceholderTextColor(focusAnimation, disableAnimation),
-        fontSize: interpolate(shift.value, [0, 1], [fontSizeBase, 0.75 * fontSizeBase])
+        fontSize: interpolate(shift.value, [0, 1], [fontSizeBase, fontSizeScaled])
       }
     })
   ]
@@ -459,8 +466,9 @@ const StyledAnimatedTextInput = styledWithRef(AnimatedTextInput)<{
   disableAnimation: SharedValue<number>
   focusAnimation: SharedValue<number>
   scale: SharedValue<number>
-}>(theme => ({ disableAnimation, focusAnimation, scale }) => {
-  const rem = theme.rem(1)
+  textsizeRem?: number
+}>(theme => ({ disableAnimation, focusAnimation, scale, textsizeRem }) => {
+  const rem = theme.rem(textsizeRem ?? 1)
   const interpolateTextColor = useAnimatedColorInterpolateFn(theme.textInputTextColor, theme.textInputTextColorFocused, theme.textInputTextColorDisabled)
 
   return [
@@ -484,8 +492,9 @@ const StyledNumericInput = styledWithRef(NumericInput)<{
   disableAnimation: SharedValue<number>
   focusAnimation: SharedValue<number>
   scale: SharedValue<number>
-}>(theme => ({ disableAnimation, focusAnimation, scale }) => {
-  const rem = theme.rem(1)
+  textsizeRem?: number
+}>(theme => ({ disableAnimation, focusAnimation, textsizeRem, scale }) => {
+  const rem = theme.rem(textsizeRem ?? 1)
   const interpolateTextColor = useAnimatedColorInterpolateFn(theme.textInputTextColor, theme.textInputTextColorFocused, theme.textInputTextColorDisabled)
 
   return [