src/views/run-process-panel/inputs/string-array-input.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { isRequiredInput, StringArrayCommandInputParameter } from '~/models/workflow';
   7 import { Field } from 'redux-form';
   8 import { ERROR_MESSAGE } from '~/validators/require';
   9 import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
  10 import { ChipsInput } from '~/components/chips-input/chips-input';
  11 import { identity } from 'lodash';
  12 import { createSelector } from 'reselect';
  13 import { Input } from '@material-ui/core';
  14
  15 export interface StringArrayInputProps {
  16     input: StringArrayCommandInputParameter;
  17 }
  18 export const StringArrayInput = ({ input }: StringArrayInputProps) =>
  19     <Field
  20         name={input.id}
  21         commandInput={input}
  22         component={StringArrayInputComponent}
  23         validate={validationSelector(input)} />;
  24
  25
  26 const validationSelector = createSelector(
  27     isRequiredInput,
  28     isRequired => isRequired
  29         ? [required]
  30         : undefined
  31 );
  32
  33 const required = (value: string[]) =>
  34     value.length > 0
  35         ? undefined
  36         : ERROR_MESSAGE;
  37
  38 const StringArrayInputComponent = (props: GenericInputProps) =>
  39     <GenericInput
  40         component={InputComponent}
  41         {...props} />;
  42
  43 class InputComponent extends React.PureComponent<GenericInputProps>{
  44     render() {
  45         return <ChipsInput
  46             deletable
  47             orderable
  48             value={this.props.input.value}
  49             onChange={this.handleChange}
  50             createNewValue={identity}
  51             inputComponent={Input}
  52             inputProps={{
  53                 error: this.props.meta.error,
  54             }} />;
  55     }
  56
  57     handleChange = (values: {}[]) => {
  58         const { input, meta } = this.props;
  59         if (!meta.touched) {
  60             input.onBlur(values);
  61         }
  62         input.onChange(values);
  63     }
  64 }