refactor(core): allow checklist component to accept objects as a prop (…

…#7058)
spinnaker · May 23, 2019 · 50f23fc · 50f23fc
1 parent 0eaae9a
commit 50f23fc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.tsx b/app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.tsx
@@ -1,15 +1,21 @@
 import * as React from 'react';
 
-import { createFakeReactSyntheticEvent, orEmptyString, validationClassName } from './utils';
+import { createFakeReactSyntheticEvent, isStringArray, orEmptyString, validationClassName } from './utils';
 import { IFormInputProps, OmitControlledInputPropsFrom } from '../interface';
 
 interface IChecklistInputProps extends IFormInputProps, OmitControlledInputPropsFrom<React.InputHTMLAttributes<any>> {
-  options: string[];
+  options?: IChecklistInputOption[];
+  stringOptions?: string[];
+}
+
+export interface IChecklistInputOption {
+  label: string;
+  value: string;
 }
 
 export class ChecklistInput extends React.Component<IChecklistInputProps> {
   public render() {
-    const { value, validation, inputClassName, options, onChange, ...otherProps } = this.props;
+    const { value, validation, inputClassName, options, stringOptions, onChange, ...otherProps } = this.props;
     const className = `${orEmptyString(inputClassName)} ${validationClassName(validation)}`;
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -21,20 +27,25 @@ export class ChecklistInput extends React.Component<IChecklistInputProps> {
       onChange(createFakeReactSyntheticEvent({ value: newValue, name: e.target.name }));
     };
 
+    let checkListOptions = options || [];
+    if (isStringArray(stringOptions)) {
+      checkListOptions = stringOptions.map(s => ({ label: s, value: s }));
+    }
+
     return (
       <div className="checklist">
-        {options.map(o => (
-          <div className="checkbox" key={o}>
+        {checkListOptions.map(o => (
+          <div className="checkbox" key={o.value}>
             <label>
               <input
                 className={className}
                 type="checkbox"
-                value={o}
+                value={o.value}
                 onChange={e => handleChange(e)}
-                checked={!!value.includes(o)}
+                checked={!!value.includes(o.value)}
                 {...otherProps}
               />
-              {o}
+              {o.label}
             </label>
           </div>
         ))}

diff --git a/...ts/modules/titus/src/serverGroup/configure/wizard/pages/disruptionBudget/WindowPicker.tsx b/...ts/modules/titus/src/serverGroup/configure/wizard/pages/disruptionBudget/WindowPicker.tsx
@@ -144,7 +144,7 @@ export class WindowPicker extends React.Component<IWindowPickerProps, IWindowPic
             <FormikFormField
               name="days"
               label="Define a New Window"
-              input={props => <ChecklistInput {...props} options={DAYS} />}
+              input={props => <ChecklistInput {...props} stringOptions={DAYS} />}
             />
             <FormikFormField
               name="startHour"