X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/6de571a660401585bc96dd92fd2563e9b64c58c6..2f83fcd45b4b23db2bb5bb4afbe1e863ebd77ec6:/services/workbench2/src/components/form-field/form-field.tsx?ds=sidebyside

diff --git a/services/workbench2/src/components/form-field/form-field.tsx b/services/workbench2/src/components/form-field/form-field.tsx
new file mode 100644
index 0000000000..81e08813ce
--- /dev/null
+++ b/services/workbench2/src/components/form-field/form-field.tsx
@@ -0,0 +1,41 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import { WrappedFieldProps, WrappedFieldInputProps } from 'redux-form';
+import { FormGroup, FormLabel, FormHelperText } from '@material-ui/core';
+
+interface FormFieldCustomProps {
+    children: <P>(props: WrappedFieldInputProps) => React.ReactElement<P>;
+    label?: string;
+    helperText?: string;
+    required?: boolean;
+}
+
+export type FormFieldProps = FormFieldCustomProps & WrappedFieldProps;
+
+export const FormField = ({ children, ...props }: FormFieldProps & WrappedFieldProps) => {
+    return (
+        <FormGroup>
+
+            <FormLabel
+                focused={props.meta.active}
+                required={props.required}
+                error={props.meta.touched && !!props.meta.error}>
+                {props.label}
+            </FormLabel>
+
+            { children(props.input) }
+
+            <FormHelperText error={props.meta.touched && !!props.meta.error}>
+                {
+                    props.meta.touched && props.meta.error
+                        ? props.meta.error
+                        : props.helperText
+                }
+            </FormHelperText>
+
+        </FormGroup>
+    );
+};