Extract IntInput's format function
[arvados-workbench2.git] / src / views / run-process-panel / inputs / int-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 { IntCommandInputParameter, isRequiredInput } from '~/models/workflow';
7 import { Field } from 'redux-form';
8 import { isInteger } from '~/validators/is-integer';
9 import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
10 import { IntInput as IntInputComponent } from '~/components/int-input/int-input';
11
12 export interface IntInputProps {
13     input: IntCommandInputParameter;
14 }
15 export const IntInput = ({ input }: IntInputProps) =>
16     <Field
17         name={input.id}
18         commandInput={input}
19         component={InputComponent}
20         parse={parse}
21         format={format}
22         validate={[
23             isRequiredInput(input)
24                 ? isInteger
25                 : () => undefined,
26         ]} />;
27
28 const parse = (value: any) => parseInt(value, 10);
29
30 const format = (value: any) => isNaN(value) ? '' : JSON.stringify(value);
31
32 const InputComponent = (props: GenericInputProps) =>
33     <GenericInput
34         component={Input}
35         {...props} />;
36
37
38 const Input = (props: GenericInputProps) =>
39     <IntInputComponent
40         fullWidth
41         type='number'
42         error={props.meta.touched && !!props.meta.error}
43         disabled={props.commandInput.disabled}
44         {...props.input} />;
45