Add missing functionality for Incubator.TextField (#1121)

Author: ethanshar

demo/src/screens/componentScreens/IncubatorTextFieldScreen.tsx

@@ -146,6 +146,7 @@ export default class TextFieldScreen extends Component {
             validationMessagePosition={errorPosition}
             validate={['required', 'email']}
             validateOnChange
+            onChangeValidity={(isValid: boolean) => console.warn('validity changed:', isValid, Date.now())}
             // validateOnStart
             // validateOnBlur
             fieldStyle={styles.withUnderline}

generatedTypes/incubator/TextField/index.d.ts

@@ -47,6 +47,10 @@ export declare type TextFieldProps = MarginModifiers & PaddingModifiers & Typogr
      * 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)
      */
@@ -101,6 +105,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean | undefined;
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     /**
      * The position of the validation message (top/bottom)
      */
@@ -152,6 +160,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean | undefined;
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     /**
      * The position of the validation message (top/bottom)
      */
@@ -203,6 +215,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean | undefined;
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     /**
      * The position of the validation message (top/bottom)
      */
@@ -254,6 +270,10 @@ declare const _default: React.ComponentClass<(Partial<Record<"margin" | "marginL
      * Should validate when losing focus of TextField
      */
     validateOnBlur?: boolean | undefined;
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     /**
      * The position of the validation message (top/bottom)
      */

generatedTypes/incubator/TextField/useFieldState.d.ts

@@ -8,8 +8,12 @@ export interface FieldStateProps extends TextInputProps {
      * A single or multiple validator. Can be a string (required, email) or custom function.
      */
     validate?: Validator | Validator[];
+    /**
+     * Callback for when field validity has changed
+     */
+    onChangeValidity?: (isValid: boolean) => void;
 }
-export default function useFieldState({ validate, validateOnBlur, validateOnChange, validateOnStart, ...props }: FieldStateProps): {
+export default function useFieldState({ validate, validateOnBlur, validateOnChange, validateOnStart, onChangeValidity, ...props }: FieldStateProps): {
     onFocus: (...args: any) => void;
     onBlur: (...args: any) => void;
     onChangeText: (text: any) => void;

generatedTypes/incubator/TextField/usePreset.d.ts

@@ -204,6 +204,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     fieldStyle?: import("react-native").ViewStyle | undefined;
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
@@ -581,6 +582,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     fieldStyle?: import("react-native").ViewStyle | undefined;
     containerStyle?: import("react-native").ViewStyle | undefined;
     modifiers: import("../../commons/modifiers").ExtractedStyle;
@@ -1078,6 +1080,7 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur: boolean;
+    onChangeValidity?: ((isValid: boolean) => void) | undefined;
     fieldStyle: import("react-native").ViewStyle | {
         borderBottomWidth: number;
         borderBottomColor: string;

src/incubator/TextField/index.tsx

@@ -36,7 +36,7 @@ export type TextFieldProps = MarginModifiers &
   InputProps &
   LabelProps &
   FloatingPlaceholderProps &
-  // We're declaring these props explicitly here for react-docgen
+  // We're declaring these props explicitly here for react-docgen (which can't read hooks)
   // FieldStateProps &
   ValidationMessageProps &
   Omit<CharCounterProps, 'maxLength'> & {
@@ -72,6 +72,10 @@ export type TextFieldProps = MarginModifiers &
      * 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)
      */

src/incubator/TextField/useFieldState.ts

@@ -2,8 +2,10 @@ import {useCallback, useState, useEffect, useMemo} from 'react';
 import {TextInputProps} from 'react-native';
 import _ from 'lodash';
 import * as Presenter from './Presenter';
+import {useDidUpdate} from '../../hooks';
 import {Validator} from './types';
 
+
 export interface FieldStateProps extends TextInputProps {
   validateOnStart?: boolean;
   validateOnChange?: boolean;
@@ -12,13 +14,18 @@ export interface FieldStateProps extends TextInputProps {
    * A single or multiple validator. Can be a string (required, email) or custom function.
    */
   validate?: Validator | Validator[];
+  /**
+   * Callback for when field validity has changed
+   */
+  onChangeValidity?: (isValid: boolean) => void
 }
 
 export default function useFieldState({
   validate,
   validateOnBlur,
   validateOnChange,
   validateOnStart,
+  onChangeValidity,
   ...props
 }: FieldStateProps) {
   const [value, setValue] = useState(props.value);
@@ -32,6 +39,10 @@ export default function useFieldState({
     }
   }, []);
 
+  useDidUpdate(() => {
+    onChangeValidity?.(isValid);
+  }, [isValid]);
+
   const validateField = useCallback((valueToValidate = value) => {
     const [_isValid, _failingValidatorIndex] = Presenter.validate(valueToValidate, validate);