Fix/ TextField (Incubator) Validation (#1590)

* set isValid to false if there's validationMessage without validator

* test validate's validationMessage param

* update validate method

Author: lidord-wix

generatedTypes/src/incubator/TextField/Presenter.d.ts

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

generatedTypes/src/incubator/TextField/useFieldState.d.ts

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

src/incubator/TextField/Presenter.ts

@@ -23,9 +23,11 @@ export function getColorByState(color?: ColorType, context?: FieldContextType) {
   return finalColor;
 }
 
-export function validate(value?: string, validator?: Validator | Validator[]): [boolean, number?] {
+export function validate(value?: string,
+  validator?: Validator | Validator[],
+  validationMessage?: string | string[]): [boolean, number?] {
   if (_.isUndefined(validator)) {
-    return [true, undefined];
+    return [!validationMessage, undefined];
   }
 
   let _isValid = true;

src/incubator/TextField/__tests__/Presenter.spec.js

@@ -2,8 +2,13 @@ import * as uut from '../Presenter';
 
 describe('TextField:Presenter', () => {
   describe('validate', () => {
-    it('should return true if validator is undefined', () => {
+    it('should return true if validator and validationMessage are undefined', () => {
       expect(uut.validate('value', undefined)).toEqual([true, undefined]);
+      expect(uut.validate('value', undefined, undefined)).toEqual([true, undefined]);
+    });
+
+    it('should return false if validator is undefined and there is a validationMessage', () => {
+      expect(uut.validate('value', undefined, 'Error!')).toEqual([false, undefined]);
     });
 
     it('should validate email', () => {

src/incubator/TextField/index.tsx

@@ -134,7 +134,6 @@ const TextField = (props: InternalTextFieldProps) => {
     trailingAccessory,
     // Validation
     enableErrors, // TODO: rename to enableValidation
-    validationMessage,
     validationMessageStyle,
     validationMessagePosition = ValidationMessagePosition.BOTTOM,
     // Char Counter
@@ -172,7 +171,7 @@ const TextField = (props: InternalTextFieldProps) => {
           <ValidationMessage
             enableErrors={enableErrors}
             validate={others.validate}
-            validationMessage={validationMessage}
+            validationMessage={props.validationMessage}
             validationMessageStyle={validationMessageStyle}
           />
         )}
@@ -210,7 +209,7 @@ const TextField = (props: InternalTextFieldProps) => {
             <ValidationMessage
               enableErrors={enableErrors}
               validate={others.validate}
-              validationMessage={validationMessage}
+              validationMessage={props.validationMessage}
               validationMessageStyle={validationMessageStyle}
               retainSpace
             />

src/incubator/TextField/useFieldState.ts

@@ -13,6 +13,10 @@ export interface FieldStateProps extends InputProps {
    * A single or multiple validator. Can be a string (required, email) or custom function.
    */
   validate?: Validator | Validator[];
+  /**
+   * The validation message to display when field is invalid (depends on validate)
+   */
+  validationMessage?: string | string[];
   /**
    * Callback for when field validity has changed
    */
@@ -21,6 +25,7 @@ export interface FieldStateProps extends InputProps {
 
 export default function useFieldState({
   validate,
+  validationMessage,
   validateOnBlur,
   validateOnChange,
   validateOnStart,
@@ -40,9 +45,8 @@ export default function useFieldState({
 
   useEffect(() => {
     if (props.value !== value) {
-      
       setValue(props.value);
-      
+
       if (validateOnChange) {
         validateField(props.value);
       }
@@ -56,12 +60,12 @@ export default function useFieldState({
   }, [isValid]);
 
   const validateField = useCallback((valueToValidate = value) => {
-    const [_isValid, _failingValidatorIndex] = Presenter.validate(valueToValidate, validate);
+    const [_isValid, _failingValidatorIndex] = Presenter.validate(valueToValidate, validate, validationMessage);
 
     setIsValid(_isValid);
     setFailingValidatorIndex(_failingValidatorIndex);
   },
-  [value, validate]);
+  [value, validate, validationMessage]);
 
   const onFocus = useCallback((...args: any) => {
     setIsFocused(true);