wip

EdgeApp · Jan 18, 2024 · d4065e0 · d4065e0
1 parent e39e18f
commit d4065e0
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 80 deletions.
diff --git a/src/components/scenes/InputTesterScene.tsx b/src/components/scenes/InputTesterScene.tsx
@@ -88,6 +88,7 @@ export function InputTesterScene() {
           placeholder="Test FilledTextInput"
           maxLength={100}
         />
+        <View style={{ height: theme.rem(1) }} />
         <FilledTextInput
           vertical={1}
           prefix="PRE"
@@ -97,15 +98,16 @@ export function InputTesterScene() {
           placeholder="Test FilledTextInput"
           maxLength={100}
         />
+        <View style={{ height: theme.rem(1) }} />
         <FilledTextInput
           numeric
           vertical={1}
           value={filledTextInputValue3}
           onChangeText={setFilledTextInputValue3}
           autoFocus={false}
           placeholder="Test FilledTextInput num"
-          maxLength={100}
         />
+        <View style={{ height: theme.rem(1) }} />
         <FilledTextInput
           numeric
           vertical={1}
@@ -115,8 +117,10 @@ export function InputTesterScene() {
           onChangeText={setFilledTextInputValue4}
           autoFocus={false}
           placeholder="Test FilledTextInput num"
+          error="Error"
           maxLength={100}
         />
+        <View style={{ height: theme.rem(1) }} />
         <CardUi4>
           <ExchangedFlipInput2
             ref={exchangedFlipInputRef}

diff --git a/src/components/themed/FilledTextInput.tsx b/src/components/themed/FilledTextInput.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { useMemo } from 'react'
-import { ActivityIndicator, Platform, TextInput, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
+import { ActivityIndicator, Platform, Text, TextInput, TouchableOpacity, TouchableWithoutFeedback, View } from 'react-native'
 import Animated, {
   interpolate,
   interpolateColor,
@@ -18,7 +18,6 @@ import { SpaceProps, useSpaceStyle } from '../../hooks/useSpaceStyle'
 import { styled, styledWithRef } from '../hoc/styled'
 import { AnimatedIconComponent, CloseIconAnimated, EyeIconAnimated } from '../icons/ThemedIcons'
 import { useTheme } from '../services/ThemeContext'
-import { EdgeText } from './EdgeText'
 import { NumericInput } from './NumericInput'
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)
@@ -207,81 +206,83 @@ export const FilledTextInput = React.forwardRef<FilledTextInputRef, FilledTextIn
 
   const InputComponent = numeric ? StyledNumericInput : StyledAnimatedTextInput
 
+  const green = 'green'
+
   return (
-    <>
-      <TouchableWithoutFeedback accessible={false} testID={testID} onPress={() => focus()}>
-        <Container disableAnimation={disableAnimation} focusAnimation={focusAnimation} multiline={multiline} scale={scale} spaceProps={spaceProps}>
-          <SideContainer scale={leftIconSize}>{LeftIcon == null ? null : <LeftIcon color={iconColor} size={leftIconSize} />}</SideContainer>
-
-          <InnerContainer focusValue={focusValue} hasPlaceholder={placeholder != null}>
-            {placeholder == null ? null : (
-              <Placeholder shift={focusValue}>
-                <PlaceholderText disableAnimation={disableAnimation} focusAnimation={focusAnimation} scale={scale} shift={focusValue}>
-                  {placeholder}
-                </PlaceholderText>
-              </Placeholder>
-            )}
-
-            {prefix == null ? null : <PrefixAnimatedText visibility={focusValue}>{prefix}</PrefixAnimatedText>}
-            <InputComponent
-              accessible
-              animated
-              ref={inputRef}
-              keyboardType={props.keyboardType}
-              returnKeyType={props.returnKeyType}
-              accessibilityState={{ disabled }}
-              autoFocus={autoFocus}
-              disableAnimation={disableAnimation}
-              focusAnimation={focusAnimation}
-              minDecimals={minDecimals}
-              maxDecimals={maxDecimals}
-              multiline={multiline}
-              selectionColor={theme.textInputTextColor}
-              testID={`${testID}.textInput`}
-              textAlignVertical="top"
-              scale={scale}
-              value={value}
-              // Callbacks:
-              onBlur={handleBlur}
-              onChangeText={handleChangeText}
-              onFocus={handleFocus}
-              onSubmitEditing={handleSubmitEditing}
-              maxLength={maxLength}
-              // Other Props:
-              autoCapitalize={autoCapitalize}
-              autoCorrect={autoCorrect}
-              blurOnSubmit={blurOnSubmit}
-              inputAccessoryViewID={inputAccessoryViewID}
-              secureTextEntry={hidePassword}
-            />
-            {suffix == null ? null : <SuffixText>{suffix}</SuffixText>}
-          </InnerContainer>
-
-          {showSpinner ? <ActivityIndicator /> : null}
-          {secureTextEntry ? (
-            <TouchableWithoutFeedback testID={`${testID}.eyeIcon`} onPress={handleHidePassword}>
-              <IconContainer>
-                <EyeIconAnimated accessible color={iconColor} off={!hidePassword} />
-              </IconContainer>
-            </TouchableWithoutFeedback>
-          ) : null}
-
-          {clearIcon ? (
-            <TouchableOpacity accessible onPress={handleClearPress} testID={`${testID}.clearIcon`}>
-              <SideContainer scale={rightIconSize}>
-                <CloseIconAnimated color={iconColor} size={rightIconSize} />
-              </SideContainer>
-            </TouchableOpacity>
-          ) : null}
-        </Container>
-      </TouchableWithoutFeedback>
+    <View style={{ backgroundColor: green, flexDirection: 'column' }}>
+      {/* <TouchableWithoutFeedback style={{ backgroundColor: green }} accessible={false} testID={testID} onPress={() => focus()}> */}
+      <Container disableAnimation={disableAnimation} focusAnimation={focusAnimation} multiline={multiline} scale={scale} spaceProps={spaceProps}>
+        <SideContainer scale={leftIconSize}>{LeftIcon == null ? null : <LeftIcon color={iconColor} size={leftIconSize} />}</SideContainer>
+
+        <InnerContainer focusValue={focusValue} hasPlaceholder={placeholder != null}>
+          {placeholder == null ? null : (
+            <Placeholder shift={focusValue}>
+              <PlaceholderText disableAnimation={disableAnimation} focusAnimation={focusAnimation} scale={scale} shift={focusValue}>
+                {placeholder}
+              </PlaceholderText>
+            </Placeholder>
+          )}
+
+          {prefix == null ? null : <PrefixAnimatedText visibility={focusValue}>{prefix}</PrefixAnimatedText>}
+          <InputComponent
+            accessible
+            animated
+            ref={inputRef}
+            keyboardType={props.keyboardType}
+            returnKeyType={props.returnKeyType}
+            accessibilityState={{ disabled }}
+            autoFocus={autoFocus}
+            disableAnimation={disableAnimation}
+            focusAnimation={focusAnimation}
+            minDecimals={minDecimals}
+            maxDecimals={maxDecimals}
+            multiline={multiline}
+            selectionColor={theme.textInputTextColor}
+            testID={`${testID}.textInput`}
+            textAlignVertical="top"
+            scale={scale}
+            value={value}
+            // Callbacks:
+            onBlur={handleBlur}
+            onChangeText={handleChangeText}
+            onFocus={handleFocus}
+            onSubmitEditing={handleSubmitEditing}
+            maxLength={maxLength}
+            // Other Props:
+            autoCapitalize={autoCapitalize}
+            autoCorrect={autoCorrect}
+            blurOnSubmit={blurOnSubmit}
+            inputAccessoryViewID={inputAccessoryViewID}
+            secureTextEntry={hidePassword}
+          />
+          {suffix == null ? null : <SuffixText>{suffix}</SuffixText>}
+        </InnerContainer>
+
+        {showSpinner ? <ActivityIndicator /> : null}
+        {secureTextEntry ? (
+          <TouchableWithoutFeedback testID={`${testID}.eyeIcon`} onPress={handleHidePassword}>
+            <IconContainer>
+              <EyeIconAnimated accessible color={iconColor} off={!hidePassword} />
+            </IconContainer>
+          </TouchableWithoutFeedback>
+        ) : null}
+
+        {clearIcon ? (
+          <TouchableOpacity accessible onPress={handleClearPress} testID={`${testID}.clearIcon`}>
+            <SideContainer scale={rightIconSize}>
+              <CloseIconAnimated color={iconColor} size={rightIconSize} />
+            </SideContainer>
+          </TouchableOpacity>
+        ) : null}
+      </Container>
+      {/* </TouchableWithoutFeedback> */}
       {valid != null || error != null || charactersLeft !== '' ? (
         <MessagesContainer>
           <Message danger={error != null}>{valid ?? error ?? null}</Message>
           <Message>{charactersLeft}</Message>
         </MessagesContainer>
       ) : null}
-    </>
+    </View>
   )
 })
 
@@ -295,8 +296,10 @@ const Container = styled(Animated.View)<{
   const rem = theme.rem(1)
   const interpolateInputBackgroundColor = useAnimatedColorInterpolateFn(
     theme.textInputBackgroundColor,
-    theme.textInputBackgroundColorFocused,
-    theme.textInputBackgroundColorDisabled
+    'red',
+    'green'
+    // theme.textInputBackgroundColorFocused,
+    // theme.textInputBackgroundColorDisabled
   )
   const interpolateOutlineColor = useAnimatedColorInterpolateFn(
     theme.textInputBorderColor,
@@ -351,6 +354,7 @@ const InnerContainer = styled(Animated.View)<{
 
   return [
     {
+      backgroundColor: 'pink',
       left: androidHShift,
       flex: 1,
       flexDirection: 'row',
@@ -369,12 +373,13 @@ const InnerContainer = styled(Animated.View)<{
 
 const PrefixAnimatedText = styled(Animated.Text)<{ visibility: SharedValue<number> }>(theme => ({ visibility }) => {
   const rem = theme.rem(1)
-  const androidVShift = isAndroid ? rem / 16 : 0
+  const androidVShift = isAndroid ? rem / 8 : 0
 
   return [
     {
       color: theme.secondaryText,
       fontFamily: theme.fontFaceDefault,
+      fontSize: theme.rem(1),
       includeFontPadding: false
     },
     useAnimatedStyle(() => {
@@ -387,13 +392,14 @@ const PrefixAnimatedText = styled(Animated.Text)<{ visibility: SharedValue<numbe
   ]
 })
 
-const SuffixText = styled(EdgeText)(theme => {
-  const rem3 = theme.rem(3)
-  const androidVShift = isAndroid ? rem3 / 16 : 0
+const SuffixText = styled(Text)(theme => {
+  const rem = theme.rem(1)
+  const androidVShift = isAndroid ? rem / 8 : 0
 
   return {
     color: theme.secondaryText,
     fontFamily: theme.fontFaceDefault,
+    fontSize: theme.rem(1),
     includeFontPadding: false,
     marginTop: androidVShift,
     marginRight: theme.rem(0.5)
@@ -506,15 +512,19 @@ const StyledNumericInput = styledWithRef(NumericInput)<{
 })
 
 const MessagesContainer = styled(Animated.View)(theme => ({
+  backgroundColor: 'blue',
   flexDirection: 'row',
   justifyContent: 'space-between',
   paddingHorizontal: theme.rem(0.5)
 }))
 
-const Message = styled(EdgeText)<{ danger?: boolean }>(theme => props => [
+const Message = styled(Text)<{ danger?: boolean }>(theme => props => [
   {
+    backgroundColor: 'yellow',
     color: props.danger === true ? theme.dangerText : theme.secondaryText,
-    fontSize: theme.rem(0.8)
+    fontFamily: theme.fontFaceDefault,
+    fontSize: theme.rem(0.75),
+    includeFontPadding: false
   }
 ])
 

diff --git a/src/theme/variables/edgeDark.ts b/src/theme/variables/edgeDark.ts
@@ -111,7 +111,7 @@ const deviceWidth = Dimensions.get('window').width
 
 export const edgeDark: Theme = {
   rem(size: number): number {
-    return Math.round(scale(16) * size)
+    return Math.round(scale(18) * size)
   },
   isDark: true,
   preferPrimaryButton: true,