Support passing a static validation message (#1486)

ethanshar · web-flow · commit 0d750386d33a · 2021-08-24T15:03:23.000+03:00
* Support passing a static validation message regardless to the validate prop

* Fix typing

* Fix validate typing
diff --git a/generatedTypes/src/incubator/TextField/Presenter.d.ts b/generatedTypes/src/incubator/TextField/Presenter.d.ts
@@ -2,4 +2,4 @@ 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 getRelevantValidationMessage(validationMessage: string | string[] | undefined, failingValidatorIndex: undefined | number): string | undefined;
+export declare function getRelevantValidationMessage(validationMessage: string | string[] | undefined, failingValidatorIndex: undefined | number): string | string[] | undefined;
diff --git a/generatedTypes/src/incubator/TextField/ValidationMessage.d.ts b/generatedTypes/src/incubator/TextField/ValidationMessage.d.ts
@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { TextStyle } from 'react-native';
+import { FieldStateProps } from './useFieldState';
 export interface ValidationMessageProps {
     /**
      * Should support showing validation error message
@@ -14,9 +15,10 @@ export interface ValidationMessageProps {
      */
     validationMessageStyle?: TextStyle;
     retainSpace?: boolean;
+    validate?: FieldStateProps['validate'];
 }
 declare const ValidationMessage: {
-    ({ validationMessage, enableErrors, validationMessageStyle, retainSpace }: ValidationMessageProps): JSX.Element | null;
+    ({ validationMessage, enableErrors, validationMessageStyle, retainSpace, validate }: ValidationMessageProps): JSX.Element | null;
     displayName: string;
 };
 export default ValidationMessage;
diff --git a/generatedTypes/src/incubator/TextField/usePreset.d.ts b/generatedTypes/src/incubator/TextField/usePreset.d.ts
@@ -149,11 +149,11 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validationMessage?: string | string[] | undefined;
     validationMessageStyle?: import("react-native").TextStyle | undefined;
     retainSpace?: boolean | undefined;
+    validate?: import("./types").Validator | import("./types").Validator[] | undefined;
     showCharCounter?: boolean | undefined;
     charCounterStyle?: import("react-native").TextStyle | undefined;
     leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    validate?: import("./types").Validator | import("./types").Validator[] | undefined;
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
@@ -481,11 +481,11 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validationMessage?: string | string[] | undefined;
     validationMessageStyle?: import("react-native").TextStyle | undefined;
     retainSpace?: boolean | undefined;
+    validate?: import("./types").Validator | import("./types").Validator[] | undefined;
     showCharCounter?: boolean | undefined;
     charCounterStyle?: import("react-native").TextStyle | undefined;
     leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    validate?: import("./types").Validator | import("./types").Validator[] | undefined;
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur?: boolean | undefined;
@@ -1045,11 +1045,11 @@ export default function usePreset({ preset, ...props }: InternalTextFieldProps):
     validationMessage?: string | string[] | undefined;
     validationMessageStyle?: import("react-native").TextStyle | undefined;
     retainSpace?: boolean | undefined;
+    validate?: import("./types").Validator | import("./types").Validator[] | undefined;
     showCharCounter?: boolean | undefined;
     charCounterStyle?: import("react-native").TextStyle | undefined;
     leadingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
     trailingAccessory?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    validate?: import("./types").Validator | import("./types").Validator[] | undefined;
     validateOnStart?: boolean | undefined;
     validateOnChange?: boolean | undefined;
     validateOnBlur: boolean;
diff --git a/src/incubator/TextField/Presenter.ts b/src/incubator/TextField/Presenter.ts
@@ -50,7 +50,9 @@ export function validate(value?: string, validator?: Validator | Validator[]): [
 
 export function getRelevantValidationMessage(validationMessage: string | string[] | undefined,
   failingValidatorIndex: undefined | number) {
-  if (_.isUndefined(failingValidatorIndex) || _.isUndefined(validationMessage)) {
+  if (_.isUndefined(failingValidatorIndex)) {
+    return validationMessage;
+  } else if (_.isUndefined(validationMessage)) {
     return;
   }
 
diff --git a/src/incubator/TextField/ValidationMessage.tsx b/src/incubator/TextField/ValidationMessage.tsx
@@ -3,6 +3,7 @@ import {TextStyle, StyleSheet} from 'react-native';
 import Text from '../../components/text';
 import FieldContext from './FieldContext';
 import {getRelevantValidationMessage} from './Presenter';
+import {FieldStateProps} from './useFieldState';
 
 export interface ValidationMessageProps {
   /**
@@ -18,13 +19,15 @@ export interface ValidationMessageProps {
    */
   validationMessageStyle?: TextStyle;
   retainSpace?: boolean;
+  validate?: FieldStateProps['validate'];
 }
 
 const ValidationMessage = ({
   validationMessage,
   enableErrors,
   validationMessageStyle,
-  retainSpace
+  retainSpace,
+  validate
 }: ValidationMessageProps) => {
   const context = useContext(FieldContext);
 
@@ -33,10 +36,11 @@ const ValidationMessage = ({
   }
 
   const relevantValidationMessage = getRelevantValidationMessage(validationMessage, context.failingValidatorIndex);
+  const showValidationMessage = !context.isValid || (!validate && !!validationMessage);
 
   return (
     <Text red30 style={[styles.validationMessage, validationMessageStyle]}>
-      {context.isValid ? '' : relevantValidationMessage}
+      {showValidationMessage ? relevantValidationMessage : ''}
     </Text>
   );
 };
diff --git a/src/incubator/TextField/__tests__/Presenter.spec.js b/src/incubator/TextField/__tests__/Presenter.spec.js
@@ -44,17 +44,19 @@ describe('TextField:Presenter', () => {
     it('should return undefined when there is no validationMessage', () => {
       expect(uut.getRelevantValidationMessage(undefined, 0)).toBeUndefined();
     });
+    
+    it('should return the validation message when there is no validate method', () => {
+      expect(uut.getRelevantValidationMessage('error message', undefined)).toBe('error message');
+    });
 
     it('should return the relevant validation message when there is a single message', () => {
       expect(uut.getRelevantValidationMessage('error message', 0)).toBe('error message');
-      expect(uut.getRelevantValidationMessage('error message', undefined)).toBeUndefined();
     });
 
     it('should return the relevant validation message when there are multiple messages', () => {
       const messages = ['Field is required', 'Email is invalid'];
       expect(uut.getRelevantValidationMessage(messages, 0)).toBe(messages[0]);
       expect(uut.getRelevantValidationMessage(messages, 1)).toBe(messages[1]);
-      expect(uut.getRelevantValidationMessage(messages, undefined)).toBeUndefined();
     });
   });
 });
diff --git a/src/incubator/TextField/index.tsx b/src/incubator/TextField/index.tsx
@@ -168,6 +168,7 @@ const TextField = (props: InternalTextFieldProps) => {
         {validationMessagePosition === ValidationMessagePosition.TOP && (
           <ValidationMessage
             enableErrors={enableErrors}
+            validate={others.validate}
             validationMessage={validationMessage}
             validationMessageStyle={validationMessageStyle}
           />
@@ -202,6 +203,7 @@ const TextField = (props: InternalTextFieldProps) => {
           {validationMessagePosition === ValidationMessagePosition.BOTTOM && (
             <ValidationMessage
               enableErrors={enableErrors}
+              validate={others.validate}
               validationMessage={validationMessage}
               validationMessageStyle={validationMessageStyle}
               retainSpace

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,9 @@ export function validate(value?: string, validator?: Validator \| Validator[]): [`
`50`	`50`
`51`	`51`	`export function getRelevantValidationMessage(validationMessage: string \| string[] \| undefined,`
`52`	`52`	`failingValidatorIndex: undefined \| number) {`
`53`		`- if (_.isUndefined(failingValidatorIndex) \|\| _.isUndefined(validationMessage)) {`
	`53`	`+ if (_.isUndefined(failingValidatorIndex)) {`
	`54`	`+ return validationMessage;`
	`55`	`+ } else if (_.isUndefined(validationMessage)) {`
`54`	`56`	`return;`
`55`	`57`	`}`
`56`	`58`