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,
30 helperText?: string, type?: 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}
51 interface RichEditorTextFieldData {
55 type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
57 export const RichEditorTextField = withStyles(styles)(
58 class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
60 value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
63 onChange = (value: any) => {
64 this.setState({ value });
65 this.props.input.onChange(value.toString('html'));
69 return <RichTextEditor
70 value={this.state.value}
71 onChange={this.onChange}
72 placeholder={this.props.label} />;
77 export const DateTextField = withStyles(styles)
78 ((props: TextFieldProps) =>
81 disabled={props.meta.submitting}
82 helperText={props.meta.error}
83 error={!!props.meta.error}
88 name={props.input.name}
89 onChange={props.input.onChange}
90 value={props.input.value}