src/views-components/virtual-machines-dialog/group-array-input.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { StringArrayCommandInputParameter } from 'models/workflow';
   7 import { Field } from 'redux-form';
   8 import { GenericInputProps } from 'views/run-process-panel/inputs/generic-input';
   9 import { ChipsInput } from 'components/chips-input/chips-input';
  10 import { identity } from 'lodash';
  11 import { withStyles, WithStyles, FormGroup, Input, InputLabel, FormControl } from '@material-ui/core';
  12
  13 export interface StringArrayInputProps {
  14   name: string;
  15   input: StringArrayCommandInputParameter;
  16   required: boolean;
  17 }
  18
  19 type CssRules = 'chips';
  20
  21 const styles = {
  22     chips: {
  23         marginTop: "16px",
  24     },
  25 };
  26
  27 export const GroupArrayInput = ({name, input}: StringArrayInputProps) =>
  28     <Field
  29         name={name}
  30         commandInput={input}
  31         component={StringArrayInputComponent as any}
  32         />;
  33
  34 const StringArrayInputComponent = (props: GenericInputProps) => {
  35   return <FormGroup>
  36         <FormControl fullWidth error={props.meta.error}>
  37           <InputLabel shrink={props.meta.active || props.input.value.length > 0}>{props.commandInput.id}</InputLabel>
  38           <StyledInputComponent {...props} />
  39         </FormControl>
  40     </FormGroup>;
  41     };
  42
  43 const StyledInputComponent = withStyles(styles)(
  44   class InputComponent extends React.PureComponent<GenericInputProps & WithStyles<CssRules>>{
  45       render() {
  46           const { classes } = this.props;
  47           const { commandInput, input, meta } = this.props;
  48           return <ChipsInput
  49               deletable={!commandInput.disabled}
  50               orderable={!commandInput.disabled}
  51               disabled={commandInput.disabled}
  52               values={input.value}
  53               onChange={this.handleChange}
  54               handleFocus={input.onFocus}
  55               handleBlur={this.handleBlur}
  56               createNewValue={identity}
  57               inputComponent={Input}
  58               chipsClassName={classes.chips}
  59               pattern={/[_a-z][-0-9_a-z]*/ig}
  60               inputProps={{
  61                   error: meta.error,
  62               }} />;
  63       }
  64
  65       handleChange = (values: {}[]) => {
  66         const { input, meta } = this.props;
  67           if (!meta.touched) {
  68               input.onBlur(values);
  69           }
  70           input.onChange(values);
  71       }
  72
  73       handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
  74         const { input } = this.props;
  75         if (!input.value?.length) {
  76           input.onBlur(e);
  77         }
  78       }
  79   }
  80 );