import * as React from 'react';
import { WrappedFieldProps } from 'redux-form';
-import { ArvadosTheme } from '../../common/custom-theme';
+import { ArvadosTheme } from '~/common/custom-theme';
import { TextField as MaterialTextField, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import RichTextEditor from 'react-rte';
type CssRules = 'textField';
},
});
-export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyles<CssRules> & { label?: string }) =>
+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
+}) =>
<MaterialTextField
helperText={props.meta.touched && props.meta.error}
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}
{...props.input}
- />);
\ No newline at end of file
+ />);
+
+
+interface RichEditorTextFieldData {
+ label?: string;
+}
+
+type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
+
+export const RichEditorTextField = withStyles(styles)(
+ class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
+ state = {
+ value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
+ };
+
+ onChange = (value: any) => {
+ this.setState({ value });
+ this.props.input.onChange(value.toString('html'));
+ }
+
+ render() {
+ return <RichTextEditor
+ value={this.state.value}
+ onChange={this.onChange}
+ placeholder={this.props.label} />;
+ }
+ }
+);
+
+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}
+ />
+ );
\ No newline at end of file