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
},
+ 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, disabled?: boolean, children: React.ReactNode, margin?: Margin, placeholder?: string
+ 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.disabled || props.meta.submitting}
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} />;