17782: Fixes almost all tests (4 left) mostly by fixing namespace-type imports.

[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 93c4080f0fead0c7330f0a65a6824bdb628da8e1..09fa2dd82830ea9444a0f204c53b2f8820849751 100644 (file)
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -2,9 +2,9 @@
 //
 // SPDX-License-Identifier: AGPL-3.0
 
-import * as React from 'react';
+import React from 'react';
 import { WrappedFieldProps } from 'redux-form';
-import { ArvadosTheme } from '~/common/custom-theme';
+import { ArvadosTheme } from 'common/custom-theme';
 import {
     TextField as MaterialTextField,
     StyleRulesCallback,
@@ -13,23 +13,35 @@ import {
     PropTypes
 } from '@material-ui/core';
 import RichTextEditor from 'react-rte';
-import Margin = PropTypes.Margin;
+import Margin from 'PropTypes';
 
-type CssRules = 'textField';
+type CssRules = 'textField' | 'rte';
 
 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     textField: {
-        marginBottom: theme.spacing.unit * 3
+        marginBottom: theme.spacing.unit
     },
+    rte: {
+        fontFamily: 'Arial',
+        '& a': {
+            textDecoration: 'none',
+            color: theme.palette.primary.main,
+            '&:hover': {
+                cursor: 'pointer',
+                textDecoration: 'underline'
+            }
+        }
+    }
 });
 
 type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
 
 export const TextField = withStyles(styles)((props: TextFieldProps & {
-    label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode, margin?: Margin, placeholder?: string
+    label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode, margin?: Margin, placeholder?: string,
+    helperText?: string, type?: string,
 }) =>
     <MaterialTextField
-        helperText={props.meta.touched && props.meta.error}
+        helperText={(props.meta.touched && props.meta.error) || props.helperText}
         className={props.classes.textField}
         label={props.label}
         disabled={props.disabled || props.meta.submitting}
@@ -42,6 +54,7 @@ export const TextField = withStyles(styles)((props: TextFieldProps & {
         children={props.children}
         margin={props.margin}
         placeholder={props.placeholder}
+        type={props.type}
         {...props.input}
     />);
 
@@ -65,6 +78,7 @@ export const RichEditorTextField = withStyles(styles)(
 
         render() {
             return <RichTextEditor
+                className={this.props.classes.rte}
                 value={this.state.value}
                 onChange={this.onChange}
                 placeholder={this.props.label} />;