Incubator.TextField fixes (#1288)

* Fix issue with FloatingPlaceholderColor ignore default preset

* Support passing color object preset to placeholderTextColor

* Support floatOnFocus prop

* Fix issue with floatingPlaceholder overlappying top validation message

* Support passing a function based on field context to fieldStyle

Author: ethanshar

generatedTypes/incubator/TextField/FieldContext.d.ts

@@ -1,11 +1,11 @@
 /// <reference types="react" />
-export declare type ContextType = {
+export declare type FieldContextType = {
     value?: string;
     isFocused: boolean;
     hasValue: boolean;
     isValid: boolean;
     failingValidatorIndex?: number;
     disabled: boolean;
 };
-declare const FieldContext: import("react").Context<ContextType>;
+declare const FieldContext: import("react").Context<FieldContextType>;
 export default FieldContext;

generatedTypes/incubator/TextField/FloatingPlaceholder.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { TextStyle, StyleProp } from 'react-native';
-import { ColorType } from './types';
+import { ColorType, ValidationMessagePosition } from './types';
 export interface FloatingPlaceholderProps {
     /**
      * The placeholder for the field
@@ -14,9 +14,14 @@ export interface FloatingPlaceholderProps {
      * Custom style to pass to the floating placeholder
      */
     floatingPlaceholderStyle?: StyleProp<TextStyle>;
+    /**
+     * Should placeholder float on focus or when start typing
+     */
+    floatOnFocus?: boolean;
+    validationMessagePosition?: ValidationMessagePosition;
 }
 declare const FloatingPlaceholder: {
-    ({ placeholder, floatingPlaceholderColor, floatingPlaceholderStyle }: FloatingPlaceholderProps): JSX.Element;
+    ({ placeholder, floatingPlaceholderColor, floatingPlaceholderStyle, floatOnFocus, validationMessagePosition }: FloatingPlaceholderProps): JSX.Element;
     displayName: string;
 };
 export default FloatingPlaceholder;

generatedTypes/incubator/TextField/Input.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { TextInput, TextInputProps } from 'react-native';
 import { ForwardRefInjectedProps } from '../../commons/new';
 import { ColorType } from './types';
-export interface InputProps extends TextInputProps, React.ComponentPropsWithRef<typeof TextInput> {
+export interface InputProps extends Omit<TextInputProps, 'placeholderTextColor'>, Omit<React.ComponentPropsWithRef<typeof TextInput>, 'placeholderTextColor'> {
     /**
      * A hint text to display when focusing the field
      */
@@ -11,6 +11,10 @@ export interface InputProps extends TextInputProps, React.ComponentPropsWithRef<
      * Input color
      */
     color?: ColorType;
+    /**
+     * placeholder text color
+     */
+    placeholderTextColor?: ColorType;
 }
 declare const Input: {
     ({ style, hint, color, forwardedRef, ...props }: InputProps & ForwardRefInjectedProps): JSX.Element;

generatedTypes/incubator/TextField/Presenter.d.ts

@@ -1,5 +1,5 @@
-import { ContextType } from './FieldContext';
+import { FieldContextType } from './FieldContext';
 import { ColorType, Validator } from './types';
-export declare function getColorByState(color: ColorType, context?: ContextType): string;
+export declare function getColorByState(color?: ColorType, context?: FieldContextType): string | undefined;
 export declare function validate(value?: string, validator?: Validator | Validator[]): [boolean, number?];
 export declare function getRelevantValidationMessage(validationMessage: string | string[] | undefined, failingValidatorIndex: undefined | number): string | undefined;

generatedTypes/incubator/TextField/index.d.ts

@@ -12,8 +12,10 @@ import { ValidationMessagePosition, Validator } from './types';
 import { InputProps } from './Input';
 import { ValidationMessageProps } from './ValidationMessage';
 import { LabelProps } from './Label';
+import { FieldContextType as _FieldContextType } from './FieldContext';
 import { FloatingPlaceholderProps } from './FloatingPlaceholder';
 import { CharCounterProps } from './CharCounter';
+export declare type FieldContextType = _FieldContextType;
 export declare type TextFieldProps = MarginModifiers & PaddingModifiers & TypographyModifiers & ColorsModifiers & InputProps & LabelProps & FloatingPlaceholderProps & ValidationMessageProps & Omit<CharCounterProps, 'maxLength'> & {
     /**
      * Pass to render a leading element
@@ -58,7 +60,7 @@ export declare type TextFieldProps = MarginModifiers & PaddingModifiers & Typogr
     /**
      * Internal style for the field container
      */
-    fieldStyle?: ViewStyle;
+    fieldStyle?: ViewStyle | ((context: FieldContextType) => ViewStyle);
     /**
      * Container style of the whole component
      */
@@ -116,7 +118,7 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
     /**
      * Internal style for the field container
      */
-    fieldStyle?: ViewStyle | undefined;
+    fieldStyle?: ViewStyle | ((context: _FieldContextType) => ViewStyle) | undefined;
     /**
      * Container style of the whole component
      */
@@ -171,7 +173,7 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
     /**
      * Internal style for the field container
      */
-    fieldStyle?: ViewStyle | undefined;
+    fieldStyle?: ViewStyle | ((context: _FieldContextType) => ViewStyle) | undefined;
     /**
      * Container style of the whole component
      */
@@ -226,7 +228,7 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
     /**
      * Internal style for the field container
      */
-    fieldStyle?: ViewStyle | undefined;
+    fieldStyle?: ViewStyle | ((context: _FieldContextType) => ViewStyle) | undefined;
     /**
      * Container style of the whole component
      */
@@ -281,7 +283,7 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
     /**
      * Internal style for the field container
      */
-    fieldStyle?: ViewStyle | undefined;
+    fieldStyle?: ViewStyle | ((context: _FieldContextType) => ViewStyle) | undefined;
     /**
      * Container style of the whole component
      */

generatedTypes/incubator/TextField/useFieldState.d.ts

@@ -1,6 +1,6 @@
-import { TextInputProps } from 'react-native';
 import { Validator } from './types';
-export interface FieldStateProps extends TextInputProps {
+import { InputProps } from './Input';
+export interface FieldStateProps extends InputProps {
     validateOnStart?: boolean;
     validateOnChange?: boolean;
     validateOnBlur?: boolean;