X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/fc5181400a6e3c31e2fb975b28878372e420f47d..691afce5b8573b3a89592b506b3a37d615d60bc1:/src/views/run-process-panel/inputs/string-array-input.tsx

diff --git a/src/views/run-process-panel/inputs/string-array-input.tsx b/src/views/run-process-panel/inputs/string-array-input.tsx
index 7454e2ad..e560b337 100644
--- a/src/views/run-process-panel/inputs/string-array-input.tsx
+++ b/src/views/run-process-panel/inputs/string-array-input.tsx
@@ -7,7 +7,10 @@ import { isRequiredInput, StringArrayCommandInputParameter } from '~/models/work
 import { Field } from 'redux-form';
 import { ERROR_MESSAGE } from '~/validators/require';
 import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
-import { ChipsInput } from '../../../components/chips-input/chips-input';
+import { ChipsInput } from '~/components/chips-input/chips-input';
+import { identity } from 'lodash';
+import { createSelector } from 'reselect';
+import { Input } from '@material-ui/core';
 
 export interface StringArrayInputProps {
     input: StringArrayCommandInputParameter;
@@ -17,19 +20,47 @@ export const StringArrayInput = ({ input }: StringArrayInputProps) =>
         name={input.id}
         commandInput={input}
         component={StringArrayInputComponent}
-        validate={[
-            isRequiredInput(input)
-                ? (value: string[]) => value.length > 0 ? undefined : ERROR_MESSAGE
-                : () => undefined,
-        ]} />;
+        validate={validationSelector(input)} />;
+
+
+const validationSelector = createSelector(
+    isRequiredInput,
+    isRequired => isRequired
+        ? [required]
+        : undefined
+);
+
+const required = (value: string[]) =>
+    value.length > 0
+        ? undefined
+        : ERROR_MESSAGE;
 
 const StringArrayInputComponent = (props: GenericInputProps) =>
     <GenericInput
-        component={Input}
+        component={InputComponent}
         {...props} />;
 
-const Input = (props: GenericInputProps) =>
-    <ChipsInput
-        values={props.input.value}
-        onChange={props.input.onChange}
-        createNewValue={v => v} />;
+class InputComponent extends React.PureComponent<GenericInputProps>{
+    render() {
+        const { commandInput, input, meta } = this.props;
+        return <ChipsInput
+            deletable={!commandInput.disabled}
+            orderable={!commandInput.disabled}
+            disabled={commandInput.disabled}
+            value={input.value}
+            onChange={this.handleChange}
+            createNewValue={identity}
+            inputComponent={Input}
+            inputProps={{
+                error: meta.error
+            }} />;
+    }
+
+    handleChange = (values: {}[]) => {
+        const { input, meta } = this.props;
+        if (!meta.touched) {
+            input.onBlur(values);
+        }
+        input.onChange(values);
+    }
+}