feat(core/presentation): support JSX for validationMessage in FormFie…

…lds (#7083) e.g.: <FormikFormField validationMessage={<Spinner />} />
spinnaker · Jun 4, 2019 · e6d1586 · e6d1586
1 parent aaf7745
commit e6d1586
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/app/scripts/modules/core/src/presentation/forms/FormField.tsx b/app/scripts/modules/core/src/presentation/forms/FormField.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Subject } from 'rxjs';
-import { isString } from 'lodash';
+import { isNil, isString } from 'lodash';
 
 import { noop } from 'core/utils';
 
@@ -37,6 +37,7 @@ interface IFormFieldState {
 }
 
 const ifString = (val: any): string => (isString(val) ? val : undefined);
+const firstDefinedNode = (...values: React.ReactNode[]): React.ReactNode => values.find(val => !isNil(val));
 
 export class FormField extends React.Component<IFormFieldProps, IFormFieldState> implements IFormFieldApi {
   public static defaultProps: Partial<IFormFieldProps> = {
@@ -63,7 +64,7 @@ export class FormField extends React.Component<IFormFieldProps, IFormFieldState>
 
   public touched = () => this.props.touched;
 
-  public validationMessage = () => ifString(this.props.validationMessage) || ifString(this.state.validationMessage);
+  public validationMessage = () => firstDefinedNode(this.props.validationMessage, this.state.validationMessage);
 
   public validationStatus = () => this.props.validationStatus || this.state.validationStatus;
 

diff --git a/app/scripts/modules/core/src/presentation/forms/FormikFormField.tsx b/app/scripts/modules/core/src/presentation/forms/FormikFormField.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { isString, isUndefined } from 'lodash';
+import { isNil, isString, isUndefined } from 'lodash';
 import { Field, FastField, FieldProps, getIn, connect, FormikContext } from 'formik';
 
 import {
@@ -42,6 +42,7 @@ export type IFormikFormFieldProps<T> = IFormikFieldProps<T> & ICommonFormFieldPr
 type IFormikFormFieldImplProps<T> = IFormikFormFieldProps<T> & { formik: FormikContext<T> };
 
 const ifString = (val: any): string => (isString(val) ? val : undefined);
+const firstDefinedNode = (...values: React.ReactNode[]): React.ReactNode => values.find(val => !isNil(val));
 
 export class FormikFormFieldImpl<T = any>
   extends React.Component<IFormikFormFieldImplProps<T>, IFormikFormFieldImplState>
@@ -79,7 +80,7 @@ export class FormikFormFieldImpl<T = any>
 
   public validationMessage = () => {
     const { name, formik, validationMessage } = this.props;
-    return ifString(validationMessage) || getIn(formik.errors, name);
+    return firstDefinedNode(validationMessage, getIn(formik.errors, name));
   };
 
   public validationStatus = () => {

diff --git a/app/scripts/modules/core/src/presentation/forms/interface.ts b/app/scripts/modules/core/src/presentation/forms/interface.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { FieldProps } from 'formik';
 
 import { IValidator } from './validation';
-export type IFieldValidationStatus = 'error' | 'warning' | 'message';
+export type IFieldValidationStatus = 'success' | 'none' | 'error' | 'warning' | 'message';
 
 /** These props are used by FormField and FormikFormField components */
 export interface IFieldLayoutPropsWithoutInput extends IValidationProps {
@@ -57,6 +57,6 @@ export interface IFormFieldApi {
   label(): string;
   value(): any;
   touched(): boolean;
-  validationMessage(): string;
+  validationMessage(): React.ReactNode;
   validationStatus(): IFieldValidationStatus;
 }