Merge branch '14361-broken-inputs-preview-layout'

[arvados-workbench2.git] / src / components / text-field / text-field.tsx

diff --git a/src/components/text-field/text-field.tsx b/src/components/text-field/text-field.tsx
index beea2ba3360fa51d796f58693706073142900617..dd864a938be2be39ab83a741cab820f907d49bc1 100644 (file)
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -16,7 +16,9 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     },
 });
 
-export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyles<CssRules> & { label?: string, autoFocus?: boolean }) =>
+type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
+
+export const TextField = withStyles(styles)((props: TextFieldProps & { label?: string, autoFocus?: boolean, required?: boolean }) =>
     <MaterialTextField
         helperText={props.meta.touched && props.meta.error}
         className={props.classes.textField}
@@ -26,6 +28,7 @@ export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyl
         autoComplete='off'
         autoFocus={props.autoFocus}
         fullWidth={true}
+        required={props.required}
         {...props.input}
     />);
 
@@ -34,7 +37,7 @@ interface RichEditorTextFieldData {
     label?: string;
 }
 
-type RichEditorTextFieldProps = RichEditorTextFieldData & WrappedFieldProps & WithStyles<CssRules>;
+type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
 
 export const RichEditorTextField = withStyles(styles)(
     class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
@@ -48,12 +51,27 @@ export const RichEditorTextField = withStyles(styles)(
         }
 
         render() {
-            return (
-                <RichTextEditor 
-                    value={this.state.value}
-                    onChange={this.onChange}
-                    placeholder={this.props.label} />
-            );
+            return <RichTextEditor 
+                value={this.state.value}
+                onChange={this.onChange}
+                placeholder={this.props.label} />;
         }
     }
-);
\ No newline at end of file
+);
+
+export const DateTextField = withStyles(styles)
+    ((props: TextFieldProps) => 
+        <MaterialTextField
+            type="date"
+            disabled={props.meta.submitting}
+            helperText={props.meta.error}
+            error={!!props.meta.error}
+            fullWidth={true}
+            InputLabelProps={{
+                shrink: true
+            }}
+            name={props.input.name}
+            onChange={props.input.onChange}
+            value={props.input.value}
+        />    
+    );
\ No newline at end of file