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, disabled?: boolean, children: React.ReactNode, margin?: Margin, placeholder?: string
32 helperText={props.meta.touched && props.meta.error}
33 className={props.classes.textField}
35 disabled={props.disabled || props.meta.submitting}
36 error={props.meta.touched && !!props.meta.error}
38 autoFocus={props.autoFocus}
40 required={props.required}
42 children={props.children}
44 placeholder={props.placeholder}
49 interface RichEditorTextFieldData {
53 type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
55 export const RichEditorTextField = withStyles(styles)(
56 class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
58 value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
61 onChange = (value: any) => {
62 this.setState({ value });
63 this.props.input.onChange(value.toString('html'));
67 return <RichTextEditor
68 value={this.state.value}
69 onChange={this.onChange}
70 placeholder={this.props.label} />;
75 export const DateTextField = withStyles(styles)
76 ((props: TextFieldProps) =>
79 disabled={props.meta.submitting}
80 helperText={props.meta.error}
81 error={!!props.meta.error}
86 name={props.input.name}
87 onChange={props.input.onChange}
88 value={props.input.value}