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
},
+ rte: {
+ fontFamily: 'Arial',
+ '& a': {
+ textDecoration: 'none',
+ color: theme.palette.primary.main,
+ '&:hover': {
+ cursor: 'pointer',
+ textDecoration: 'underline'
+ }
+ }
+ }
});
-export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyles<CssRules> & { label?: string, autoFocus?: boolean, required?: boolean }) =>
+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,
+ 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}
fullWidth={true}
required={props.required}
+ select={props.select}
+ children={props.children}
+ margin={props.margin}
+ placeholder={props.placeholder}
+ type={props.type}
{...props.input}
/>);
label?: string;
}
-type RichEditorTextFieldProps = RichEditorTextFieldData & WrappedFieldProps & WithStyles<CssRules>;
+type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
export const RichEditorTextField = withStyles(styles)(
class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
}
render() {
- return <RichTextEditor
+ return <RichTextEditor
+ className={this.props.classes.rte}
value={this.state.value}
onChange={this.onChange}
placeholder={this.props.label} />;
}
}
-);
\ No newline at end of file
+);
+
+export const DateTextField = withStyles(styles)
+ ((props: TextFieldProps) =>
+ <MaterialTextField
+ type="date"
+ disabled={props.meta.submitting}
+ helperText={props.meta.error}
+ error={!!props.meta.error}
+ fullWidth={true}
+ InputLabelProps={{
+ shrink: true
+ }}
+ name={props.input.name}
+ onChange={props.input.onChange}
+ value={props.input.value}
+ />
+ );