expose an imperative validate method on Incubator.TextField component (#1459)

* expose an imperative validate method on Incubator.TextField component

* Update example screen imperative validation example

Author: ethanshar

demo/src/screens/incubatorScreens/IncubatorTextFieldScreen.tsx

@@ -8,6 +8,7 @@ const {KeyboardAwareInsetsView} = Keyboard;
 export default class TextFieldScreen extends Component {
   input = React.createRef<TextInput>();
   input2 = React.createRef<TextInput>();
+  inputWithValidation = React.createRef<TextInput>();
   state = {
     errorPosition: TextField.validationMessagePositions.TOP,
     shouldDisable: false,
@@ -121,6 +122,7 @@ export default class TextFieldScreen extends Component {
             <Text h3 blue50>
               Validation
             </Text>
+
             <Button
               size={Button.sizes.xSmall}
               label={`Error Position: ${_.upperCase(errorPosition)}`}
@@ -150,8 +152,28 @@ export default class TextFieldScreen extends Component {
             // validateOnStart
             // validateOnBlur
             fieldStyle={styles.withUnderline}
+            marginB-s4
           />
 
+          <View row top marginT-s4>
+            <TextField
+              ref={this.inputWithValidation}
+              placeholder="Enter full name"
+              validate="required"
+              validationMessage="This field is required"
+              containerStyle={{flexGrow: 1}}
+              fieldStyle={styles.withUnderline}
+            />
+            <Button
+              marginL-s5
+              label="Validate"
+              size={Button.sizes.xSmall}
+              onPress={() => {
+                this.inputWithValidation.current?.validate?.();
+              }}
+            />
+          </View>
+
           <View row centerV spread>
             <Text h3 blue50 marginV-s4>
               Colors By State

generatedTypes/incubator/TextField/FieldContext.d.ts

@@ -6,6 +6,7 @@ export declare type FieldContextType = {
     isValid: boolean;
     failingValidatorIndex?: number;
     disabled: boolean;
+    validateField: () => void;
 };
 declare const FieldContext: import("react").Context<FieldContextType>;
 export default FieldContext;

generatedTypes/incubator/TextField/useFieldState.d.ts

@@ -24,4 +24,5 @@ export default function useFieldState({ validate, validateOnBlur, validateOnChan
         isFocused: boolean;
         failingValidatorIndex: number | undefined;
     };
+    validateField: (valueToValidate?: any) => void;
 };

generatedTypes/incubator/TextField/useImperativeInputHandle.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TextInput } from 'react-native';
+declare const useImperativeInputHandle: (ref: React.Ref<any>) => React.MutableRefObject<TextInput | undefined>;
+export default useImperativeInputHandle;

src/incubator/TextField/FieldContext.ts

@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import {createContext} from 'react';
 
 export type FieldContextType = {
@@ -7,14 +8,16 @@ export type FieldContextType = {
   isValid: boolean;
   failingValidatorIndex?: number;
   disabled: boolean;
+  validateField: () => void
 };
 
 const FieldContext = createContext<FieldContextType>({
   isFocused: false,
   hasValue: false,
   isValid: true,
   failingValidatorIndex: undefined,
-  disabled: false
+  disabled: false,
+  validateField: _.noop
 });
 
 export default FieldContext;

src/incubator/TextField/Input.tsx

@@ -6,6 +6,7 @@ import {getColorByState} from './Presenter';
 import {Colors} from '../../style';
 import {Constants} from '../../helpers';
 import FieldContext from './FieldContext';
+import useImperativeInputHandle from './useImperativeInputHandle';
 
 const DEFAULT_INPUT_COLOR: ColorType = {
   default: Colors.grey10,
@@ -35,6 +36,7 @@ const Input = ({
   forwardedRef,
   ...props
 }: InputProps & ForwardRefInjectedProps) => {
+  const inputRef = useImperativeInputHandle(forwardedRef);
   const context = useContext(FieldContext);
   const placeholder = !context.isFocused ? props.placeholder : hint || props.placeholder;
   const inputColor = getColorByState(color, context);
@@ -46,7 +48,8 @@ const Input = ({
       {...props}
       placeholder={placeholder}
       placeholderTextColor={placeholderTextColor}
-      ref={forwardedRef}
+      // @ts-expect-error
+      ref={inputRef}
       underlineColorAndroid="transparent"
       accessibilityState={{disabled: props.editable === false}}
     />

src/incubator/TextField/index.tsx

@@ -142,11 +142,11 @@ const TextField = (props: InternalTextFieldProps) => {
     placeholder,
     ...others
   } = usePreset(props);
-  const {onFocus, onBlur, onChangeText, fieldState} = useFieldState(others);
+  const {onFocus, onBlur, onChangeText, fieldState, validateField} = useFieldState(others);
 
   const context = useMemo(() => {
-    return {...fieldState, disabled: others.editable === false};
-  }, [fieldState, others.editable]);
+    return {...fieldState, disabled: others.editable === false, validateField};
+  }, [fieldState, others.editable, validateField]);
 
   const {margins, paddings, typography, color} = modifiers;
   const typographyStyle = useMemo(() => omit(typography, 'lineHeight'), [typography]);

src/incubator/TextField/useFieldState.ts

@@ -93,6 +93,7 @@ export default function useFieldState({
     onFocus,
     onBlur,
     onChangeText,
-    fieldState
+    fieldState,
+    validateField
   };
 }

src/incubator/TextField/useImperativeInputHandle.ts

@@ -0,0 +1,22 @@
+import React, {useContext, useImperativeHandle, useRef} from 'react';
+import {TextInput} from 'react-native';
+import FieldContext from './FieldContext';
+
+const useImperativeInputHandle = (ref: React.Ref<any>) => {
+  const inputRef = useRef<TextInput>();
+  const context = useContext(FieldContext);
+  useImperativeHandle(ref, () => {
+    return {
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+      clear: () => inputRef.current?.clear(),
+      validate: () => {
+        context.validateField();
+      }
+    };
+  });
+
+  return inputRef;
+};
+
+export default useImperativeInputHandle;