feat: add support for affix and icon in textinput (#1651)

Author: Trancever

example/src/Examples/TextInputExample.tsx

@@ -18,6 +18,7 @@ type State = {
   name: string;
   outlinedText: string;
   largeText: string;
+  flatTextPassword: string;
   outlinedLargeText: string;
   nameNoPadding: string;
   flatDenseText: string;
@@ -29,6 +30,11 @@ type State = {
   outlinedMultiline: string;
   outlinedTextArea: string;
   maxLengthName: string;
+  flatTextSecureEntry: boolean;
+  outlineTextSecureEntry: boolean;
+  iconsColor: {
+    [key: string]: string | undefined;
+  };
 };
 
 class TextInputExample extends React.Component<Props, State> {
@@ -39,7 +45,9 @@ class TextInputExample extends React.Component<Props, State> {
     name: '',
     outlinedText: '',
     largeText: '',
+    flatTextPassword: 'Password',
     outlinedLargeText: '',
+    outlinedTextPassword: 'Password',
     nameNoPadding: '',
     flatDenseText: '',
     flatDense: '',
@@ -50,10 +58,37 @@ class TextInputExample extends React.Component<Props, State> {
     outlinedMultiline: '',
     outlinedTextArea: '',
     maxLengthName: '',
+    flatTextSecureEntry: true,
+    outlineTextSecureEntry: true,
+    iconsColor: {
+      flatLeftIcon: undefined,
+      flatRightIcon: undefined,
+      outlineLeftIcon: undefined,
+      outlineRightIcon: undefined,
+    },
   };
 
   _isUsernameValid = (name: string) => /^[a-zA-Z]*$/.test(name);
 
+  _changeIconColor = (name: string) => {
+    const {
+      theme: {
+        colors: { accent },
+      },
+    } = this.props;
+
+    const { iconsColor: currentColors } = this.state;
+
+    const color = (currentColors as State['iconsColor'])[name];
+
+    const iconsColor = {
+      ...currentColors,
+      [name]: !color ? accent : undefined,
+    };
+
+    this.setState({ iconsColor });
+  };
+
   render() {
     const {
       theme: {
@@ -78,13 +113,53 @@ class TextInputExample extends React.Component<Props, State> {
             placeholder="Type something"
             value={this.state.text}
             onChangeText={text => this.setState({ text })}
+            left={
+              <TextInput.Icon
+                name="heart"
+                color={this.state.iconsColor['flatLeftIcon']}
+                onPress={() => {
+                  this._changeIconColor('flatLeftIcon');
+                }}
+              />
+            }
+            right={<TextInput.Affix text="/100" />}
           />
           <TextInput
             style={[styles.inputContainerStyle, styles.fontSize]}
             label="Flat input large font"
             placeholder="Type something"
             value={this.state.largeText}
             onChangeText={largeText => this.setState({ largeText })}
+            left={<TextInput.Affix text="#" />}
+            right={
+              <TextInput.Icon
+                name="heart"
+                color={this.state.iconsColor['flatRightIcon']}
+                onPress={() => {
+                  this._changeIconColor('flatRightIcon');
+                }}
+              />
+            }
+          />
+          <TextInput
+            style={[styles.inputContainerStyle, styles.fontSize]}
+            label="Flat input large font"
+            placeholder="Type something"
+            value={this.state.flatTextPassword}
+            onChangeText={flatTextPassword =>
+              this.setState({ flatTextPassword })
+            }
+            secureTextEntry={this.state.flatTextSecureEntry}
+            right={
+              <TextInput.Icon
+                name={this.state.flatTextSecureEntry ? 'eye' : 'eye-off'}
+                onPress={() =>
+                  this.setState({
+                    flatTextSecureEntry: !this.state.flatTextSecureEntry,
+                  })
+                }
+              />
+            }
           />
           <TextInput
             style={styles.inputContainerStyle}
@@ -93,6 +168,7 @@ class TextInputExample extends React.Component<Props, State> {
             placeholder="Type something"
             value={this.state.flatDenseText}
             onChangeText={flatDenseText => this.setState({ flatDenseText })}
+            left={<TextInput.Affix text="#" />}
           />
           <TextInput
             style={styles.inputContainerStyle}
@@ -129,6 +205,16 @@ class TextInputExample extends React.Component<Props, State> {
             placeholder="Type something"
             value={this.state.outlinedText}
             onChangeText={outlinedText => this.setState({ outlinedText })}
+            left={
+              <TextInput.Icon
+                name="heart"
+                color={this.state.iconsColor['outlineLeftIcon']}
+                onPress={() => {
+                  this._changeIconColor('outlineLeftIcon');
+                }}
+              />
+            }
+            right={<TextInput.Affix text="/100" />}
           />
           <TextInput
             mode="outlined"
@@ -139,6 +225,37 @@ class TextInputExample extends React.Component<Props, State> {
             onChangeText={outlinedLargeText =>
               this.setState({ outlinedLargeText })
             }
+            left={<TextInput.Affix text="$" />}
+            right={
+              <TextInput.Icon
+                name="heart"
+                color={this.state.iconsColor['outlineRightIcon']}
+                onPress={() => {
+                  this._changeIconColor('outlineRightIcon');
+                }}
+              />
+            }
+          />
+          <TextInput
+            mode="outlined"
+            style={[styles.inputContainerStyle, styles.fontSize]}
+            label="Outlined large font"
+            placeholder="Type something"
+            value={this.state.outlinedTextPassword}
+            onChangeText={outlinedLargeText =>
+              this.setState({ outlinedLargeText })
+            }
+            secureTextEntry={this.state.outlineTextSecureEntry}
+            right={
+              <TextInput.Icon
+                name={this.state.outlineTextSecureEntry ? 'eye' : 'eye-off'}
+                onPress={() =>
+                  this.setState({
+                    outlineTextSecureEntry: !this.state.outlineTextSecureEntry,
+                  })
+                }
+              />
+            }
           />
           <TextInput
             mode="outlined"
@@ -150,6 +267,7 @@ class TextInputExample extends React.Component<Props, State> {
             onChangeText={outlinedDenseText =>
               this.setState({ outlinedDenseText })
             }
+            left={<TextInput.Affix text="$" />}
           />
           <TextInput
             mode="outlined"
@@ -196,7 +314,7 @@ class TextInputExample extends React.Component<Props, State> {
               onChangeText={name => this.setState({ name })}
             />
             <HelperText
-              type="error"
+              type="info"
               visible={!this._isUsernameValid(this.state.name)}
             >
               Error: Only letters are allowed
@@ -269,7 +387,7 @@ const styles = StyleSheet.create({
     margin: 8,
   },
   fontSize: {
-    fontSize: 24,
+    fontSize: 32,
   },
   textArea: {
     height: 80,

src/components/TextInput/Adornment/Affix.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import color from 'color';
+import {
+  Text,
+  StyleSheet,
+  StyleProp,
+  TextStyle,
+  LayoutChangeEvent,
+  Animated,
+} from 'react-native';
+
+import { withTheme } from '../../../core/theming';
+import { Theme } from '../../../types';
+import { AdornmentSide } from './enums';
+
+const AFFIX_OFFSET = 12;
+
+type Props = {
+  text: string;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  /**
+   * @optional
+   */
+  theme: Theme;
+};
+
+type ContextState = {
+  affixTopPosition: number | null;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  visible?: Animated.Value;
+  textStyle?: StyleProp<TextStyle>;
+  side: AdornmentSide;
+};
+
+const AffixContext = React.createContext<ContextState>({
+  textStyle: { fontFamily: '', color: '' },
+  affixTopPosition: null,
+  side: AdornmentSide.Left,
+});
+
+export const AffixAdornment: React.FunctionComponent<{
+  affix: React.ReactNode;
+  testID: string;
+} & ContextState> = ({
+  affix,
+  side,
+  textStyle,
+  affixTopPosition,
+  onLayout,
+  visible,
+}) => {
+  return (
+    <AffixContext.Provider
+      value={{
+        side,
+        textStyle,
+        affixTopPosition,
+        onLayout,
+        visible,
+      }}
+    >
+      {affix}
+    </AffixContext.Provider>
+  );
+};
+
+const TextInputAffix = ({ text, theme }: Props) => {
+  const {
+    textStyle,
+    onLayout,
+    affixTopPosition,
+    side,
+    visible,
+  } = React.useContext(AffixContext);
+  const textColor = color(theme.colors.text)
+    .alpha(theme.dark ? 0.7 : 0.54)
+    .rgb()
+    .string();
+
+  const style = {
+    top: affixTopPosition,
+    [side]: AFFIX_OFFSET,
+  };
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        style,
+        {
+          opacity:
+            visible?.interpolate({
+              inputRange: [0, 1],
+              outputRange: [1, 0],
+            }) || 1,
+        },
+      ]}
+      onLayout={onLayout}
+    >
+      <Text style={[{ color: textColor }, textStyle]}>{text}</Text>
+    </Animated.View>
+  );
+};
+TextInputAffix.displayName = 'TextInput.Affix';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});
+
+export default withTheme(TextInputAffix);
+
+// @component-docs ignore-next-line
+export { TextInputAffix };

src/components/TextInput/Adornment/Icon.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+
+import IconButton from '../../IconButton';
+import { $Omit, Theme } from '../../../../src/types';
+
+type Props = $Omit<
+  React.ComponentProps<typeof IconButton>,
+  'icon' | 'theme'
+> & {
+  name: string;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  theme?: Theme;
+};
+
+export const ICON_SIZE = 24;
+const ICON_OFFSET = 12;
+
+const StyleContext = React.createContext<{ style?: StyleProp<ViewStyle> }>({
+  style: {},
+});
+
+export const IconAdornment: React.FunctionComponent<{
+  testID: string;
+  icon: React.ReactNode;
+  iconTopPosition: number;
+  side: 'left' | 'right';
+}> = ({ icon, iconTopPosition, side }) => {
+  const style = {
+    top: iconTopPosition,
+    [side]: ICON_OFFSET,
+  };
+
+  return (
+    <StyleContext.Provider value={{ style }}>{icon}</StyleContext.Provider>
+  );
+};
+
+const TextInputIcon = ({ name, onPress, ...rest }: Props) => {
+  const { style } = React.useContext(StyleContext);
+  return (
+    <View style={[styles.container, style]}>
+      <IconButton
+        icon={name}
+        style={styles.iconButton}
+        size={ICON_SIZE}
+        onPress={onPress}
+        {...rest}
+      />
+    </View>
+  );
+};
+TextInputIcon.displayName = 'TextInput.Icon';
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  iconButton: {
+    margin: 0,
+  },
+});
+
+export default TextInputIcon;