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';
9 TextField as MaterialTextField,
14 } from '@material-ui/core';
15 import RichTextEditor from 'react-rte';
16 import Margin = PropTypes.Margin;
18 type CssRules = 'textField';
20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
22 marginBottom: theme.spacing.unit * 3
26 type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
28 export const TextField = withStyles(styles)((props: TextFieldProps & {
29 label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, children: React.ReactNode, margin?: Margin
32 helperText={props.meta.touched && props.meta.error}
33 className={props.classes.textField}
35 disabled={props.meta.submitting}
36 error={props.meta.touched && !!props.meta.error}
38 autoFocus={props.autoFocus}
40 required={props.required}
42 children={props.children}
48 interface RichEditorTextFieldData {
52 type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
54 export const RichEditorTextField = withStyles(styles)(
55 class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
57 value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
60 onChange = (value: any) => {
61 this.setState({ value });
62 this.props.input.onChange(value.toString('html'));
66 return <RichTextEditor
67 value={this.state.value}
68 onChange={this.onChange}
69 placeholder={this.props.label} />;
74 export const DateTextField = withStyles(styles)
75 ((props: TextFieldProps) =>
78 disabled={props.meta.submitting}
79 helperText={props.meta.error}
80 error={!!props.meta.error}
85 name={props.input.name}
86 onChange={props.input.onChange}
87 value={props.input.value}