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,
33 helperText={(props.meta.touched && props.meta.error) || props.helperText}
34 className={props.classes.textField}
36 disabled={props.disabled || props.meta.submitting}
37 error={props.meta.touched && !!props.meta.error}
39 autoFocus={props.autoFocus}
41 required={props.required}
43 children={props.children}
45 placeholder={props.placeholder}
50 interface RichEditorTextFieldData {
54 type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
56 export const RichEditorTextField = withStyles(styles)(
57 class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
59 value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
62 onChange = (value: any) => {
63 this.setState({ value });
64 this.props.input.onChange(value.toString('html'));
68 return <RichTextEditor
69 value={this.state.value}
70 onChange={this.onChange}
71 placeholder={this.props.label} />;
76 export const DateTextField = withStyles(styles)
77 ((props: TextFieldProps) =>
80 disabled={props.meta.submitting}
81 helperText={props.meta.error}
82 error={!!props.meta.error}
87 name={props.input.name}
88 onChange={props.input.onChange}
89 value={props.input.value}