centralized all textfield types in a single file (#1933)

Author: ethanshar

src/incubator/TextField/CharCounter.tsx

@@ -1,21 +1,9 @@
 import React, {useContext} from 'react';
-import {TextStyle, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import _ from 'lodash';
 import Text from '../../components/text';
 import FieldContext from './FieldContext';
-
-export interface CharCounterProps {
-  /**
-   * Should show a character counter (works only with maxLength)
-   */
-  showCharCounter?: boolean;
-  maxLength?: number;
-  /**
-   * Pass custom style to character counter text
-   */
-  charCounterStyle?: TextStyle;
-  testID: string;
-}
+import {CharCounterProps} from './types';
 
 const CharCounter = ({maxLength, charCounterStyle, testID}: CharCounterProps) => {
   const {value} = useContext(FieldContext);

src/incubator/TextField/FieldContext.ts

@@ -1,15 +1,6 @@
 import _ from 'lodash';
 import {createContext} from 'react';
-
-export type FieldContextType = {
-  value?: string;
-  isFocused: boolean;
-  hasValue: boolean;
-  isValid: boolean;
-  failingValidatorIndex?: number;
-  disabled: boolean;
-  validateField: () => void
-};
+import {FieldContextType} from './types';
 
 const FieldContext = createContext<FieldContextType>({
   isFocused: false,

src/incubator/TextField/FloatingPlaceholder.tsx

@@ -1,35 +1,13 @@
 import React, {useContext, useEffect, useRef, useCallback, useState, useMemo} from 'react';
-import {Animated, LayoutChangeEvent, StyleSheet, Platform, TextStyle, StyleProp} from 'react-native';
-import {ColorType, ValidationMessagePosition} from './types';
+import {Animated, LayoutChangeEvent, StyleSheet, Platform} from 'react-native';
+import {FloatingPlaceholderProps, ValidationMessagePosition} from './types';
 import {getColorByState} from './Presenter';
 import {Colors} from '../../style';
 import {Constants} from '../../commons/new';
 import View from '../../components/view';
 import Text from '../../components/text';
 import FieldContext from './FieldContext';
 
-export interface FloatingPlaceholderProps {
-  /**
-   * The placeholder for the field
-   */
-  placeholder?: string;
-  /**
-   * The floating placeholder color
-   */
-  floatingPlaceholderColor?: ColorType;
-  /**
-   * Custom style to pass to the floating placeholder
-   */
-  floatingPlaceholderStyle?: StyleProp<TextStyle>;
-  /**
-   * Should placeholder float on focus or when start typing
-   */
-  floatOnFocus?: boolean;
-  validationMessagePosition?: ValidationMessagePosition;
-  extraOffset?: number;
-  testID: string;
-}
-
 const FLOATING_PLACEHOLDER_SCALE = 0.875;
 
 const FloatingPlaceholder = ({

src/incubator/TextField/Input.tsx

@@ -1,7 +1,7 @@
 import React, {useContext} from 'react';
-import {TextInput, TextInputProps, StyleSheet, Platform} from 'react-native';
+import {TextInput, StyleSheet, Platform} from 'react-native';
 import {Constants, ForwardRefInjectedProps} from '../../commons/new';
-import {ColorType} from './types';
+import {InputProps, ColorType} from './types';
 import {getColorByState} from './Presenter';
 import {Colors} from '../../style';
 import FieldContext from './FieldContext';
@@ -11,26 +11,6 @@ const DEFAULT_INPUT_COLOR: ColorType = {
   default: Colors.$textDefault,
   disabled: Colors.$textDisabled
 };
-export interface InputProps
-  extends Omit<TextInputProps, 'placeholderTextColor'>,
-    Omit<React.ComponentPropsWithRef<typeof TextInput>, 'placeholderTextColor'> {
-  /**
-   * A hint text to display when focusing the field
-   */
-  hint?: string;
-  /**
-   * Input color
-   */
-  color?: ColorType;
-  /**
-   * placeholder text color
-   */
-  placeholderTextColor?: ColorType;
-  /**
-   * Custom formatter for the input value (used only when input if not focused)
-   */
-  formatter?: (value?: string) => string | undefined;
-}
 
 const Input = ({
   style,

src/incubator/TextField/Label.tsx

@@ -1,32 +1,11 @@
 import React, {useContext} from 'react';
-import {StyleSheet, TextStyle} from 'react-native';
+import {StyleSheet} from 'react-native';
 import {Colors} from '../../style';
-import Text, {TextProps} from '../../components/text';
-import {ColorType, ValidationMessagePosition} from './types';
+import Text from '../../components/text';
+import {LabelProps, ValidationMessagePosition} from './types';
 import {getColorByState} from './Presenter';
 import FieldContext from './FieldContext';
 
-export interface LabelProps {
-  /**
-   * Field label
-   */
-  label?: string;
-  /**
-   * Field label color. Either a string or color by state map ({default, focus, error, disabled})
-   */
-  labelColor?: ColorType;
-  /**
-   * Custom style for the field label
-   */
-  labelStyle?: TextStyle;
-  /**
-   * Pass extra props to the label Text element
-   */
-  labelProps?: TextProps;
-  validationMessagePosition?: ValidationMessagePosition;
-  floatingPlaceholder?: boolean;
-  testID?: string;
-}
 
 const Label = ({
   label,

src/incubator/TextField/Presenter.ts

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import {Colors} from './../../style';
-import {FieldContextType} from './FieldContext';
-import {ColorType, Validator} from './types';
+import {ColorType, Validator, FieldContextType} from './types';
 // TODO: Fix this import after moving all TextField types to a single file after we move to the new docs
 import {TextFieldProps} from './index';
 import formValidators from './validators';

src/incubator/TextField/ValidationMessage.tsx

@@ -1,27 +1,9 @@
 import React, {useContext} from 'react';
-import {TextStyle, StyleSheet} from 'react-native';
+import {StyleSheet} from 'react-native';
 import Text from '../../components/text';
 import FieldContext from './FieldContext';
 import {getRelevantValidationMessage} from './Presenter';
-import {FieldStateProps} from './useFieldState';
-
-export interface ValidationMessageProps {
-  /**
-   * Should support showing validation error message
-   */
-  enableErrors?: boolean;
-  /**
-   * The validation message to display when field is invalid (depends on validate)
-   */
-  validationMessage?: string | string[];
-  /**
-   * Custom style for the validation message
-   */
-  validationMessageStyle?: TextStyle;
-  retainSpace?: boolean;
-  validate?: FieldStateProps['validate'];
-  testID?: string;
-}
+import {ValidationMessageProps} from './types';
 
 const ValidationMessage = ({
   validationMessage,

src/incubator/TextField/index.tsx

@@ -5,113 +5,22 @@
  * 3. Passing typography preset that includes lineHeight usually cause alignment issues with
  * other elements (leading/trailing accessories). It usually best to set lineHeight with undefined
  */
-import React, {PropsWithChildren, ReactElement, useMemo} from 'react';
-import {ViewStyle, TextStyle, StyleProp} from 'react-native';
+import React, {useMemo} from 'react';
 import {omit} from 'lodash';
-import {
-  asBaseComponent,
-  forwardRef,
-  ForwardRefInjectedProps,
-  BaseComponentInjectedProps,
-  MarginModifiers,
-  PaddingModifiers,
-  TypographyModifiers,
-  ColorsModifiers
-} from '../../commons/new';
+import {asBaseComponent, forwardRef} from '../../commons/new';
 import View from '../../components/view';
 import {Colors} from '../../style';
 import {useMeasure} from '../../hooks';
-import {ValidationMessagePosition, Validator} from './types';
+import {TextFieldProps, InternalTextFieldProps, ValidationMessagePosition, FieldContextType} from './types';
 import {shouldHidePlaceholder} from './Presenter';
-import Input, {InputProps} from './Input';
-import ValidationMessage, {ValidationMessageProps} from './ValidationMessage';
-import Label, {LabelProps} from './Label';
-import FieldContext, {FieldContextType as _FieldContextType} from './FieldContext';
-import useFieldState /* , FieldStateProps */ from './useFieldState';
+import Input from './Input';
+import ValidationMessage from './ValidationMessage';
+import Label from './Label';
+import FieldContext from './FieldContext';
+import useFieldState from './useFieldState';
 import usePreset from './usePreset';
-import FloatingPlaceholder, {FloatingPlaceholderProps} from './FloatingPlaceholder';
-import CharCounter, {CharCounterProps} from './CharCounter';
-
-export type FieldContextType = _FieldContextType;
-export type TextFieldProps = MarginModifiers &
-  PaddingModifiers &
-  TypographyModifiers &
-  ColorsModifiers &
-  InputProps &
-  LabelProps &
-  Omit<FloatingPlaceholderProps, 'testID'> &
-  // We're declaring these props explicitly here for react-docgen (which can't read hooks)
-  // FieldStateProps &
-  ValidationMessageProps &
-  Omit<CharCounterProps, 'maxLength' | 'testID'> & {
-    /**
-     * Pass to render a leading element
-     */
-    leadingAccessory?: ReactElement;
-    /**
-     * Pass to render a trailing element
-     */
-    trailingAccessory?: ReactElement;
-    /**
-     * Pass to render a bottom element below the input
-     */
-    bottomAccessory?: ReactElement;
-    /**
-     * Pass to add floating placeholder support
-     */
-    floatingPlaceholder?: boolean;
-    /**
-     * Custom style for the floating placeholder
-     */
-    floatingPlaceholderStyle?: TextStyle;
-    /**
-     * A single or multiple validator. Can be a string (required, email) or custom function.
-     */
-    validate?: Validator | Validator[];
-    /**
-     * Should validate when the TextField mounts
-     */
-    validateOnStart?: boolean;
-    /**
-     * Should validate when the TextField value changes
-     */
-    validateOnChange?: boolean;
-    /**
-     * Should validate when losing focus of TextField
-     */
-    validateOnBlur?: boolean;
-    /**
-     * Callback for when field validity has changed
-     */
-    onChangeValidity?: (isValid: boolean) => void;
-    /**
-     * The position of the validation message (top/bottom)
-     */
-    validationMessagePosition?: ValidationMessagePosition;
-    /**
-     * Internal style for the field container
-     */
-    fieldStyle?: StyleProp<ViewStyle>;
-    /**
-     * Internal dynamic style callback for the field container
-     */
-    dynamicFieldStyle?: (context: FieldContextType, props: {preset: TextFieldProps['preset']}) => StyleProp<ViewStyle>;
-    /**
-     * Container style of the whole component
-     */
-    containerStyle?: ViewStyle;
-    /**
-     * Predefined preset to use for styling the field
-     */
-    preset?: 'default' | null | string;
-  };
-
-export type InternalTextFieldProps = PropsWithChildren<
-  TextFieldProps &
-    // Omit<FieldStateInjectedProps, keyof InputProps> &
-    BaseComponentInjectedProps &
-    ForwardRefInjectedProps
->;
+import FloatingPlaceholder from './FloatingPlaceholder';
+import CharCounter from './CharCounter';
 
 interface StaticMembers {
   validationMessagePositions: typeof ValidationMessagePosition;
@@ -243,7 +152,13 @@ const TextField = (props: InternalTextFieldProps) => {
             />
           )}
           {bottomAccessory}
-          {showCharCounter && <CharCounter maxLength={others.maxLength} charCounterStyle={charCounterStyle} testID={`${props.testID}.charCounter`}/>}
+          {showCharCounter && (
+            <CharCounter
+              maxLength={others.maxLength}
+              charCounterStyle={charCounterStyle}
+              testID={`${props.testID}.charCounter`}
+            />
+          )}
         </View>
       </View>
     </FieldContext.Provider>
@@ -253,4 +168,5 @@ const TextField = (props: InternalTextFieldProps) => {
 TextField.displayName = 'Incubator.TextField';
 TextField.validationMessagePositions = ValidationMessagePosition;
 
+export {TextFieldProps, FieldContextType};
 export default asBaseComponent<TextFieldProps, StaticMembers>(forwardRef(TextField as any));