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         const { commandInput, input, meta } = this.props;
  46         return <ChipsInput
  47             deletable={!commandInput.disabled}
  48             orderable={!commandInput.disabled}
  49             disabled={commandInput.disabled}
  50             values={input.value}
  51             onChange={this.handleChange}
  52             createNewValue={identity}
  53             inputComponent={Input}
  54             inputProps={{
  55                 error: meta.error
  56             }} />;
  57     }
  58
  59     handleChange = (values: {}[]) => {
  60         const { input, meta } = this.props;
  61         if (!meta.touched) {
  62             input.onBlur(values);
  63         }
  64         input.onChange(values);
  65     }
  66 }