diff --git a/app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.tsx b/app/scripts/modules/core/src/presentation/forms/inputs/ChecklistInput.tsx index 2087350ae8d..79bb202afa3 100644 --- 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> { - options: string[]; + options?: IChecklistInputOption[]; + stringOptions?: string[]; +} + +export interface IChecklistInputOption { + label: string; + value: string; } export class ChecklistInput extends React.Component { 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) => { @@ -21,20 +27,25 @@ export class ChecklistInput extends React.Component { onChange(createFakeReactSyntheticEvent({ value: newValue, name: e.target.name })); }; + let checkListOptions = options || []; + if (isStringArray(stringOptions)) { + checkListOptions = stringOptions.map(s => ({ label: s, value: s })); + } + return (
- {options.map(o => ( -
+ {checkListOptions.map(o => ( +
))} diff --git a/app/scripts/modules/titus/src/serverGroup/configure/wizard/pages/disruptionBudget/WindowPicker.tsx b/app/scripts/modules/titus/src/serverGroup/configure/wizard/pages/disruptionBudget/WindowPicker.tsx index cc8bb03e654..002af5c125f 100644 --- a/app/scripts/modules/titus/src/serverGroup/configure/wizard/pages/disruptionBudget/WindowPicker.tsx +++ b/app/scripts/modules/titus/src/serverGroup/configure/wizard/pages/disruptionBudget/WindowPicker.tsx @@ -144,7 +144,7 @@ export class WindowPicker extends React.Component } + input={props => } />