src/views/run-process-panel/inputs/int-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, IntArrayCommandInputParameter } 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 { createSelector } from 'reselect';
  12 import { IntInput } from '~/components/int-input/int-input';
  13
  14 export interface IntArrayInputProps {
  15     input: IntArrayCommandInputParameter;
  16 }
  17 export const IntArrayInput = ({ input }: IntArrayInputProps) =>
  18     <Field
  19         name={input.id}
  20         commandInput={input}
  21         component={IntArrayInputComponent}
  22         validate={validationSelector(input)} />;
  23
  24
  25 const validationSelector = createSelector(
  26     isRequiredInput,
  27     isRequired => isRequired
  28         ? [required]
  29         : undefined
  30 );
  31
  32 const required = (value: string[]) =>
  33     value.length > 0
  34         ? undefined
  35         : ERROR_MESSAGE;
  36
  37 const IntArrayInputComponent = (props: GenericInputProps) =>
  38     <GenericInput
  39         component={InputComponent}
  40         {...props} />;
  41
  42 class InputComponent extends React.PureComponent<GenericInputProps>{
  43     render() {
  44         const { commandInput, input, meta } = this.props;
  45         return <ChipsInput
  46             deletable={!commandInput.disabled}
  47             orderable={!commandInput.disabled}
  48             disabled={commandInput.disabled}
  49             value={input.value}
  50             onChange={this.handleChange}
  51             createNewValue={value => parseInt(value, 10)}
  52             inputComponent={IntInput}
  53             inputProps={{
  54                 error: meta.error,
  55             }} />;
  56     }
  57
  58     handleChange = (values: {}[]) => {
  59         const { input, meta } = this.props;
  60         if (!meta.touched) {
  61             input.onBlur(values);
  62         }
  63         input.onChange(values);
  64     }
  65 }