Merge branch '21128-toolbar-context-menu'

[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 d9f11f43322a5a9dcfe70e0e5a59692592c08c39..b2a8dd4848602a24eb66fba407f545d0cf992c35 100644 (file)
--- a/src/components/text-field/text-field.tsx
+++ b/src/components/text-field/text-field.tsx
@@ -2,27 +2,106 @@
 //
 // 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 { TextField as MaterialTextField, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { ArvadosTheme } from 'common/custom-theme';
+import {
+    TextField as MaterialTextField,
+    StyleRulesCallback,
+    WithStyles,
+    withStyles,
+    PropTypes
+} from '@material-ui/core';
+import RichTextEditor from 'react-rte';
 
-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'
+            }
+        }
+    }
 });
 
-export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyles<CssRules> & { label?: string }) =>
+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?: PropTypes.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.meta.submitting}
+        disabled={props.disabled || props.meta.submitting}
         error={props.meta.touched && !!props.meta.error}
         autoComplete='off'
+        autoFocus={props.autoFocus}
         fullWidth={true}
+        required={props.required}
+        select={props.select}
+        children={props.children}
+        margin={props.margin}
+        placeholder={props.placeholder}
+        type={props.type}
         {...props.input}
-    />);
\ No newline at end of file
+    />);
+
+
+interface RichEditorTextFieldData {
+    label?: string;
+}
+
+type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
+
+export const RichEditorTextField = withStyles(styles)(
+    class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
+        state = {
+            value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
+        };
+
+        onChange = (value: any) => {
+            this.setState({ value });
+            this.props.input.onChange(
+                !!value.getEditorState().getCurrentContent().getPlainText().trim()
+                ? value.toString('html')
+                : null
+            );
+        }
+
+        render() {
+            return <RichTextEditor
+                className={this.props.classes.rte}
+                value={this.state.value}
+                onChange={this.onChange}
+                placeholder={this.props.label} />;
+        }
+    }
+);
+
+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}
+        />
+    );