[ARVADOS-WORKBENCH2] updated: 1.2.0-503-g9c15617
Git user
git at public.curoverse.com
Mon Oct 1 20:16:54 EDT 2018
Summary of changes:
.../run-process-panel/inputs/boolean-input.tsx | 28 ++++++-----
src/views/run-process-panel/inputs/file-input.tsx | 25 ++++++++--
src/views/run-process-panel/inputs/float-input.tsx | 21 +++++---
.../run-process-panel/inputs/generic-input.tsx | 29 +++++++++++
src/views/run-process-panel/inputs/int-input.tsx | 16 ++++--
.../run-process-panel/inputs/string-input.tsx | 16 ++++--
.../run-process-panel/run-process-inputs-form.tsx | 58 ++++++++++++----------
7 files changed, 136 insertions(+), 57 deletions(-)
create mode 100644 src/views/run-process-panel/inputs/generic-input.tsx
via 9c15617f293ab41ea8b8e2962ecd1d109b80a026 (commit)
from f0553f71caddcf44371c616e7177c2716b6bcb88 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 9c15617f293ab41ea8b8e2962ecd1d109b80a026
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Tue Oct 2 02:16:33 2018 +0200
Extract GenericInput component
Feature #13863
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/views/run-process-panel/inputs/boolean-input.tsx b/src/views/run-process-panel/inputs/boolean-input.tsx
index 2d0d8c6..e66ec3d 100644
--- a/src/views/run-process-panel/inputs/boolean-input.tsx
+++ b/src/views/run-process-panel/inputs/boolean-input.tsx
@@ -3,10 +3,10 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { BooleanCommandInputParameter, getInputLabel, isRequiredInput } from '~/models/workflow';
-import { Field, WrappedFieldProps } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
-import { FormGroup, FormLabel, FormHelperText, Switch } from '@material-ui/core';
+import { BooleanCommandInputParameter } from '~/models/workflow';
+import { Field } from 'redux-form';
+import { Switch } from '@material-ui/core';
+import { GenericInputProps, GenericInput } from './generic-input';
export interface BooleanInputProps {
input: BooleanCommandInputParameter;
@@ -14,16 +14,18 @@ export interface BooleanInputProps {
export const BooleanInput = ({ input }: BooleanInputProps) =>
<Field
name={input.id}
- label={getInputLabel(input)}
+ commandInput={input}
component={BooleanInputComponent}
normalize={(value, prevValue) => !prevValue}
/>;
-const BooleanInputComponent = (props: WrappedFieldProps & { label?: string }) =>
- <FormGroup>
- <FormLabel>{props.label}</FormLabel>
- <Switch
- color='primary'
- checked={props.input.value}
- onChange={() => props.input.onChange(props.input.value)} />
- </FormGroup>;
\ No newline at end of file
+const BooleanInputComponent = (props: GenericInputProps) =>
+ <GenericInput
+ component={Input}
+ {...props} />;
+
+const Input = (props: GenericInputProps) =>
+ <Switch
+ color='primary'
+ checked={props.input.value}
+ onChange={() => props.input.onChange(props.input.value)} />;
\ No newline at end of file
diff --git a/src/views/run-process-panel/inputs/file-input.tsx b/src/views/run-process-panel/inputs/file-input.tsx
index 6b001b2..a356d82 100644
--- a/src/views/run-process-panel/inputs/file-input.tsx
+++ b/src/views/run-process-panel/inputs/file-input.tsx
@@ -3,10 +3,17 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { getInputLabel, isRequiredInput, FileCommandInputParameter, File } from '~/models/workflow';
+import {
+ getInputLabel,
+ isRequiredInput,
+ FileCommandInputParameter,
+ File,
+ CWLType
+} from '~/models/workflow';
import { Field } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
import { require } from '~/validators/require';
+import { Input } from '@material-ui/core';
+import { GenericInputProps, GenericInput } from './generic-input';
export interface FileInputProps {
input: FileCommandInputParameter;
@@ -14,12 +21,22 @@ export interface FileInputProps {
export const FileInput = ({ input }: FileInputProps) =>
<Field
name={input.id}
- label={getInputLabel(input)}
- component={TextField}
+ commandInput={input}
+ component={FileInputComponent}
format={(value?: File) => value ? value.location : ''}
+ parse={(value: string): File => ({
+ class: CWLType.FILE,
+ location: value,
+ basename: value.split('/').slice(1).join('/')
+ })}
validate={[
isRequiredInput(input)
? require
: () => undefined,
]} />;
+const FileInputComponent = (props: GenericInputProps) =>
+ <GenericInput
+ component={props =>
+ <Input readOnly value={props.input.value} />}
+ {...props} />;
diff --git a/src/views/run-process-panel/inputs/float-input.tsx b/src/views/run-process-panel/inputs/float-input.tsx
index f6fffed..62093ac 100644
--- a/src/views/run-process-panel/inputs/float-input.tsx
+++ b/src/views/run-process-panel/inputs/float-input.tsx
@@ -3,18 +3,20 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { getInputLabel, FloatCommandInputParameter, isRequiredInput } from '~/models/workflow';
-import { Field, WrappedFieldProps } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
+import { FloatCommandInputParameter, isRequiredInput } from '~/models/workflow';
+import { Field } from 'redux-form';
import { isNumber } from '~/validators/is-number';
+import { GenericInput } from '~/views/run-process-panel/inputs/generic-input';
+import { Input as MaterialInput } from '@material-ui/core';
+import { GenericInputProps } from './generic-input';
export interface FloatInputProps {
input: FloatCommandInputParameter;
}
export const FloatInput = ({ input }: FloatInputProps) =>
<Field
name={input.id}
- label={getInputLabel(input)}
- component={DecimalInput}
+ commandInput={input}
+ component={FloatInputComponent}
parse={parseFloat}
format={value => isNaN(value) ? '' : JSON.stringify(value)}
validate={[
@@ -22,7 +24,7 @@ export const FloatInput = ({ input }: FloatInputProps) =>
? isNumber
: () => undefined,]} />;
-class DecimalInput extends React.Component<WrappedFieldProps & { label?: string }> {
+class FloatInputComponent extends React.Component<GenericInputProps> {
state = {
endsWithDecimalSeparator: false,
};
@@ -42,6 +44,11 @@ class DecimalInput extends React.Component<WrappedFieldProps & { label?: string
onChange: this.handleChange,
},
};
- return <TextField {...props} />;
+ return <GenericInput
+ component={Input}
+ {...props} />;
}
}
+
+const Input = (props: GenericInputProps) =>
+ <MaterialInput {...props.input} />;
diff --git a/src/views/run-process-panel/inputs/generic-input.tsx b/src/views/run-process-panel/inputs/generic-input.tsx
new file mode 100644
index 0000000..8eb1ca3
--- /dev/null
+++ b/src/views/run-process-panel/inputs/generic-input.tsx
@@ -0,0 +1,29 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import * as React from 'react';
+import { WrappedFieldProps } from 'redux-form';
+import { FormGroup, FormLabel, Input, FormHelperText } from '@material-ui/core';
+import { GenericCommandInputParameter, getInputLabel } from '../../../models/workflow';
+
+export type GenericInputProps = WrappedFieldProps & {
+ commandInput: GenericCommandInputParameter<any, any>;
+};
+
+type GenericInputContainerProps = GenericInputProps & {
+ component: React.ComponentType<GenericInputProps>;
+};
+export const GenericInput = ({ component: Component, ...props }: GenericInputContainerProps) => {
+ return <FormGroup>
+ <FormLabel error={props.meta.touched && props.meta.error}>{getInputLabel(props.commandInput)}</FormLabel>
+ <Component {...props} />
+ <FormHelperText error={props.meta.touched && props.meta.error}>
+ {
+ props.meta.touched && props.meta.error
+ ? props.meta.error
+ : props.commandInput.doc
+ }
+ </FormHelperText>
+ </FormGroup>;
+};
\ No newline at end of file
diff --git a/src/views/run-process-panel/inputs/int-input.tsx b/src/views/run-process-panel/inputs/int-input.tsx
index 60a49b6..6d0307a 100644
--- a/src/views/run-process-panel/inputs/int-input.tsx
+++ b/src/views/run-process-panel/inputs/int-input.tsx
@@ -5,8 +5,9 @@
import * as React from 'react';
import { IntCommandInputParameter, getInputLabel, isRequiredInput } from '~/models/workflow';
import { Field } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
import { isInteger } from '~/validators/is-integer';
+import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
+import { Input as MaterialInput } from '@material-ui/core';
export interface IntInputProps {
input: IntCommandInputParameter;
@@ -14,8 +15,8 @@ export interface IntInputProps {
export const IntInput = ({ input }: IntInputProps) =>
<Field
name={input.id}
- label={getInputLabel(input)}
- component={TextField}
+ commandInput={input}
+ component={IntInputComponent}
parse={value => parseInt(value, 10)}
format={value => isNaN(value) ? '' : JSON.stringify(value)}
validate={[
@@ -24,3 +25,12 @@ export const IntInput = ({ input }: IntInputProps) =>
: () => undefined,
]} />;
+const IntInputComponent = (props: GenericInputProps) =>
+ <GenericInput
+ component={Input}
+ {...props} />;
+
+
+const Input = (props: GenericInputProps) =>
+ <MaterialInput type='number' {...props.input} />;
+
diff --git a/src/views/run-process-panel/inputs/string-input.tsx b/src/views/run-process-panel/inputs/string-input.tsx
index 8c72a46..e952593 100644
--- a/src/views/run-process-panel/inputs/string-input.tsx
+++ b/src/views/run-process-panel/inputs/string-input.tsx
@@ -3,10 +3,11 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { getInputLabel, isRequiredInput, StringCommandInputParameter } from '~/models/workflow';
+import { isRequiredInput, StringCommandInputParameter } from '~/models/workflow';
import { Field } from 'redux-form';
-import { TextField } from '~/components/text-field/text-field';
import { require } from '~/validators/require';
+import { GenericInputProps, GenericInput } from '~/views/run-process-panel/inputs/generic-input';
+import { Input as MaterialInput } from '@material-ui/core';
export interface StringInputProps {
input: StringCommandInputParameter;
@@ -14,11 +15,18 @@ export interface StringInputProps {
export const StringInput = ({ input }: StringInputProps) =>
<Field
name={input.id}
- label={getInputLabel(input)}
- component={TextField}
+ commandInput={input}
+ component={StringInputComponent}
validate={[
isRequiredInput(input)
? require
: () => undefined,
]} />;
+const StringInputComponent = (props: GenericInputProps) =>
+ <GenericInput
+ component={Input}
+ {...props} />;
+
+const Input = (props: GenericInputProps) =>
+ <MaterialInput {...props.input} />;
\ No newline at end of file
diff --git a/src/views/run-process-panel/run-process-inputs-form.tsx b/src/views/run-process-panel/run-process-inputs-form.tsx
index 90bb8c2..de5903b 100644
--- a/src/views/run-process-panel/run-process-inputs-form.tsx
+++ b/src/views/run-process-panel/run-process-inputs-form.tsx
@@ -12,6 +12,7 @@ import { FloatInput } from '~/views/run-process-panel/inputs/float-input';
import { BooleanInput } from './inputs/boolean-input';
import { FileInput } from './inputs/file-input';
import { connect } from 'react-redux';
+import { compose } from 'redux';
const RUN_PROCESS_INPUTS_FORM = 'runProcessInputsForm';
@@ -19,32 +20,37 @@ export interface RunProcessInputFormProps {
inputs: CommandInputParameter[];
}
-export const RunProcessInputsForm = connect(
- (_: any, props: RunProcessInputFormProps) => ({
+export const RunProcessInputsForm = compose(
+ connect((_: any, props: RunProcessInputFormProps) => ({
initialValues: props.inputs.reduce(
(values, input) => ({ ...values, [input.id]: input.default }),
{}),
- }))(
- reduxForm<any, RunProcessInputFormProps>({
- form: RUN_PROCESS_INPUTS_FORM
- })((props: InjectedFormProps & RunProcessInputFormProps) =>
- <form>
- {props.inputs.map(input => {
- switch (true) {
- case input.type === CWLType.BOOLEAN:
- return <BooleanInput key={input.id} input={input as BooleanCommandInputParameter} />;
- case input.type === CWLType.INT:
- case input.type === CWLType.LONG:
- return <IntInput key={input.id} input={input as IntCommandInputParameter} />;
- case input.type === CWLType.FLOAT:
- case input.type === CWLType.DOUBLE:
- return <FloatInput key={input.id} input={input as FloatCommandInputParameter} />;
- case input.type === CWLType.STRING:
- return <StringInput key={input.id} input={input as StringCommandInputParameter} />;
- case input.type === CWLType.FILE:
- return <FileInput key={input.id} input={input as FileCommandInputParameter} />;
- default:
- return null;
- }
- })}
- </form>));
\ No newline at end of file
+ })),
+ reduxForm<any, RunProcessInputFormProps>({
+ form: RUN_PROCESS_INPUTS_FORM
+ }))((props: InjectedFormProps & RunProcessInputFormProps) =>
+ <form>
+ {props.inputs.map(input => {
+ switch (true) {
+ case input.type === CWLType.BOOLEAN:
+ return <BooleanInput key={input.id} input={input as BooleanCommandInputParameter} />;
+
+ case input.type === CWLType.INT:
+ case input.type === CWLType.LONG:
+ return <IntInput key={input.id} input={input as IntCommandInputParameter} />;
+
+ case input.type === CWLType.FLOAT:
+ case input.type === CWLType.DOUBLE:
+ return <FloatInput key={input.id} input={input as FloatCommandInputParameter} />;
+
+ case input.type === CWLType.STRING:
+ return <StringInput key={input.id} input={input as StringCommandInputParameter} />;
+
+ case input.type === CWLType.FILE:
+ return <FileInput key={input.id} input={input as FileCommandInputParameter} />;
+
+ default:
+ return null;
+ }
+ })}
+ </form>);
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list