refactor(core): Remove formsy; replace-ish with formik (#4902)

spinnaker · Feb 22, 2018 · 5ae4083 · 5ae4083
1 parent d24f5bf
commit 5ae4083
Show file tree

Hide file tree

Showing 19 changed files with 231 additions and 749 deletions.
diff --git a/app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx b/app/scripts/modules/core/src/entityTag/EntityTagEditor.tsx
diff --git a/app/scripts/modules/core/src/modal/wizard/WizardModal.tsx b/app/scripts/modules/core/src/modal/wizard/WizardModal.tsx
@@ -40,7 +40,7 @@ export interface IWizardModalState {
 }
 
 @BindAll()
-export class WizardModal<T> extends React.Component<IWizardModalProps, IWizardModalState> {
+export class WizardModal<T extends FormikValues> extends React.Component<IWizardModalProps, IWizardModalState> {
   private pages: { [label: string]: IWizardPageData } = {};
   private stepsElement: HTMLDivElement;
 
@@ -130,7 +130,7 @@ export class WizardModal<T> extends React.Component<IWizardModalProps, IWizardMo
     return this.getFilteredChildren().map((child: any) => child.type.label);
   }
 
-  private validate(values: {}): any {
+  private validate(values: FormikValues): any {
     const errors: { [key: string]: string }[] = [];
     const newErrorPages: Set<string> = new Set();
 
@@ -149,7 +149,7 @@ export class WizardModal<T> extends React.Component<IWizardModalProps, IWizardMo
     return flattenedErrors;
   }
 
-  private revalidate(values: {}, setErrors: (errors: {}) => void) {
+  private revalidate(values: FormikValues, setErrors: (errors: any) => void) {
     setErrors(this.validate(values));
   }
 

diff --git a/...ion/formsy/components/ExpressionInput.tsx → ...tion/forms/components/ExpressionInput.tsx b/...ion/formsy/components/ExpressionInput.tsx → ...tion/forms/components/ExpressionInput.tsx
@@ -3,23 +3,29 @@ import * as spel2js from 'spel2js';
 import { BindAll } from 'lodash-decorators';
 import { truncate } from 'lodash';
 
-import { FormsyComponent, IFormsyComponentProps, IFormComponentState } from '../FormsyComponent';
 import { Markdown } from 'core/presentation/Markdown';
 
 import '../spel2js.templateParser';
 import { Modal } from 'react-bootstrap';
 
-export interface IExpressionInputProps extends IFormsyComponentProps {
+export interface IExpressionInputProps {
   placeholder?: string;
   context?: object;
   locals?: object;
   markdown?: boolean;
+  Help?: JSX.Element;
+  label: string;
+  name: string;
+  onChange: (event: React.ChangeEvent<any>) => void;
+  value?: string;
+  required?: boolean;
 }
 
-export interface IExpressionInputState extends IFormComponentState {
+export interface IExpressionInputState {
   showContextModal: boolean;
   spelPreview: string;
   spelError: ISpelError;
+  value: string;
 }
 
 export interface ISpelError {
@@ -28,17 +34,30 @@ export interface ISpelError {
   contextTruncated: string;
 }
 
-/**
- * A validating Formsy form component for SpEL Expressions
- */
 @BindAll()
-export class ExpressionInput extends FormsyComponent<string, IExpressionInputProps, IExpressionInputState> {
-  public static contextTypes = FormsyComponent.contextTypes;
-  public static defaultProps = Object.assign({ context: {}, locals: {} }, FormsyComponent.defaultProps);
+export class ExpressionInput extends React.Component<IExpressionInputProps, IExpressionInputState> {
+  public static defaultProps = { context: {}, locals: {} };
+
+  constructor(props: IExpressionInputProps) {
+    super(props);
+    this.state = {
+      showContextModal: false,
+      spelPreview: null,
+      spelError: null,
+      value: props.value || '',
+    }
+  }
+
+  public componentWillReceiveProps(nextProps: IExpressionInputProps): void {
+    if (this.props.value !== nextProps.value) {
+      this.validate(nextProps.value);
+    }
+  }
+
+  private validate(value: string): void {
+    if (!value) { return; }
 
-  public validate(props: IExpressionInputProps = this.props): boolean {
-    const value = this.getValue();
-    const { context, locals } = props;
+    const { context, locals, onChange } = this.props;
 
     const stringify = (obj: any): string => {
       return obj === null ? 'null' :
@@ -47,15 +66,11 @@ export class ExpressionInput extends FormsyComponent<string, IExpressionInputPro
     };
 
     try {
-      if (!value) {
-        return true;
-      }
-
       const exprs = spel2js.TemplateParser.parse(value);
       const results = exprs.map(expr => expr.eval(context, locals));
-      this.setState({ spelError: null, spelPreview: results.join('') });
+      this.setState({ spelError: null, spelPreview: results.join(''), value });
 
-      return true;
+      onChange({ target: { value } } as React.ChangeEvent<any>);
     } catch (err) {
       const spelError: ISpelError = {
         message: null,
@@ -77,22 +92,16 @@ export class ExpressionInput extends FormsyComponent<string, IExpressionInputPro
         }
       }
 
-      this.setState({ spelError, spelPreview: null });
-      return false;
+      this.setState({ spelError, spelPreview: null, value });
+      onChange({ target: { value: '' } } as React.ChangeEvent<any>);
     }
   }
 
-  public componentWillReceiveProps(nextProps: IExpressionInputProps): void {
-    this.validate(nextProps);
-  }
-
-  public getErrorMessage(): string {
-    const { spelError } = this.state;
+  public getErrorMessage(spelError: ISpelError): string {
     if (spelError) {
       return spelError.message + (spelError.contextTruncated ? ' -- ' + spelError.contextTruncated : '');
     }
-
-    return super.getErrorMessage();
+    return null;
   }
 
   private hideContextModal(): void {
@@ -103,13 +112,11 @@ export class ExpressionInput extends FormsyComponent<string, IExpressionInputPro
     this.setState({ showContextModal: true })
   }
 
-  public renderError(): JSX.Element {
+  private renderError(): JSX.Element {
     const { spelError } = this.state;
 
     return (
       <div>
-        {super.renderError()}
-
         {spelError && spelError.message && (
           <Modal show={this.state.showContextModal} onHide={this.hideContextModal}>
             <Modal.Header>
@@ -133,29 +140,40 @@ export class ExpressionInput extends FormsyComponent<string, IExpressionInputPro
     )
   }
 
-  public renderInput(): JSX.Element {
-    const { name, placeholder, markdown } = this.props;
-    const { spelPreview } = this.state;
-    const inputClass = this.getInputClass();
+  private handleChange(event: React.ChangeEvent<HTMLInputElement>): void {
+    const { value } = event.target;
+    this.validate(value);
+  }
+
+  public render(): JSX.Element {
+    const { Help, label, markdown, placeholder, required } = this.props;
+    const { spelError, spelPreview, value } = this.state;
+
+    const error = spelError ? <span className="error-message">{this.getErrorMessage(spelError)}</span> : null;
 
     return (
-      <div className="flex-container-v">
-        <input
-          autoComplete="off"
-          className={inputClass}
-          type="text"
-          name={name}
-          id={name}
-          placeholder={placeholder}
-          onChange={this.handleChange}
-          value={this.getValue() || ''}
-        />
-
-        { spelPreview && (
-          <div className="flex-container-h baseline margin-between">
-            <span className="no-grow">Preview:</span> {markdown ? <Markdown message={spelPreview} /> : <span>{spelPreview}</span>}
+      <div className="flex-container-h baseline margin-between">
+        <div className="sm-label-right" style={{ minWidth: '120px' }}>{label} {Help}</div>
+          <div className="flex-grow flex-container-v">
+            <div className="flex-container-v">
+              <input
+                autoComplete="off"
+                className="form-control"
+                type="text"
+                value={value}
+                onChange={this.handleChange}
+                placeholder={placeholder}
+                required={required}
+              />
+              {spelPreview && (
+                <div className="flex-container-h baseline margin-between">
+                  <span className="no-grow">Preview:</span> {markdown ? <Markdown message={spelPreview} /> : <span>{spelPreview}</span>}
+                </div>
+              )}
+            </div>
+            {error}
+            {spelError && this.renderError()}
           </div>
-        )}
       </div>
     )
   }

diff --git a/app/scripts/modules/core/src/presentation/forms/components/index.ts b/app/scripts/modules/core/src/presentation/forms/components/index.ts
@@ -0,0 +1 @@
+export * from './ExpressionInput';
diff --git a/app/scripts/modules/core/src/presentation/forms/index.ts b/app/scripts/modules/core/src/presentation/forms/index.ts
@@ -0,0 +1,4 @@
+///<reference path="./spel2js.d.ts" />
+
+export * from './components';
+import './spel2js.templateParser';
diff --git a/...core/src/presentation/formsy/spel2js.d.ts → .../core/src/presentation/forms/spel2js.d.ts b/...core/src/presentation/formsy/spel2js.d.ts → .../core/src/presentation/forms/spel2js.d.ts
diff --git a/...entation/formsy/spel2js.templateParser.ts → ...sentation/forms/spel2js.templateParser.ts b/...entation/formsy/spel2js.templateParser.ts → ...sentation/forms/spel2js.templateParser.ts