import * as React from 'react';
import { WrappedFieldProps } from 'redux-form';
import { ArvadosTheme } from '~/common/custom-theme';
-import { TextField as MaterialTextField, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import {
+ TextField as MaterialTextField,
+ StyleRulesCallback,
+ WithStyles,
+ withStyles,
+ PropTypes
+} from '@material-ui/core';
import RichTextEditor from 'react-rte';
+import Margin = PropTypes.Margin;
-type CssRules = 'textField';
+type CssRules = 'textField' | 'rte';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
textField: {
- marginBottom: theme.spacing.unit * 3
+ marginBottom: theme.spacing.unit
},
+ rte: {
+ fontFamily: 'Arial',
+ '& a': {
+ textDecoration: 'none',
+ color: theme.palette.primary.main,
+ '&:hover': {
+ cursor: 'pointer',
+ textDecoration: 'underline'
+ }
+ }
+ }
});
type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
-export const TextField = withStyles(styles)((props: TextFieldProps & {
- label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, children: React.ReactNode
+export const TextField = withStyles(styles)((props: TextFieldProps & {
+ label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode, margin?: Margin, placeholder?: string,
+ helperText?: string, type?: string,
}) =>
<MaterialTextField
- helperText={props.meta.touched && props.meta.error}
+ helperText={(props.meta.touched && props.meta.error) || props.helperText}
className={props.classes.textField}
label={props.label}
- disabled={props.meta.submitting}
+ disabled={props.disabled || props.meta.submitting}
error={props.meta.touched && !!props.meta.error}
autoComplete='off'
autoFocus={props.autoFocus}
required={props.required}
select={props.select}
children={props.children}
+ margin={props.margin}
+ placeholder={props.placeholder}
+ type={props.type}
{...props.input}
/>);
render() {
return <RichTextEditor
+ className={this.props.classes.rte}
value={this.state.value}
onChange={this.onChange}
placeholder={this.props.label} />;
onChange={props.input.onChange}
value={props.input.value}
/>
- );
\ No newline at end of file
+ );