1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import * as React from 'react';
6 import { WrappedFieldProps } from 'redux-form';
7 import { ArvadosTheme } from '~/common/custom-theme';
8 import { TextField as MaterialTextField, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
9 import RichTextEditor from 'react-rte';
11 type CssRules = 'textField';
13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
15 marginBottom: theme.spacing.unit * 3
19 type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
21 export const TextField = withStyles(styles)((props: TextFieldProps & { label?: string, autoFocus?: boolean, required?: boolean }) =>
23 helperText={props.meta.touched && props.meta.error}
24 className={props.classes.textField}
26 disabled={props.meta.submitting}
27 error={props.meta.touched && !!props.meta.error}
29 autoFocus={props.autoFocus}
31 required={props.required}
36 interface RichEditorTextFieldData {
40 type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
42 export const RichEditorTextField = withStyles(styles)(
43 class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
45 value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
48 onChange = (value: any) => {
49 this.setState({ value });
50 this.props.input.onChange(value.toString('html'));
54 return <RichTextEditor
55 value={this.state.value}
56 onChange={this.onChange}
57 placeholder={this.props.label} />;
62 export const DateTextField = withStyles(styles)
63 ((props: TextFieldProps) =>
66 disabled={props.meta.submitting}
67 helperText={props.meta.error}
68 error={!!props.meta.error}
73 name={props.input.name}
74 onChange={props.input.onChange}
75 value={props.input.value}