src/components/text-field/text-field.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import * as React from 'react';
   6 import { WrappedFieldProps } from 'redux-form';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8 import { TextField as MaterialTextField, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
   9 import RichTextEditor from 'react-rte';
  10
  11 type CssRules = 'textField';
  12
  13 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  14     textField: {
  15         marginBottom: theme.spacing.unit * 3
  16     },
  17 });
  18
  19 type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
  20
  21 export const TextField = withStyles(styles)((props: TextFieldProps & {
  22     label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode
  23 }) =>
  24     <MaterialTextField
  25         helperText={props.meta.touched && props.meta.error}
  26         className={props.classes.textField}
  27         label={props.label}
  28         disabled={props.disabled || props.meta.submitting}
  29         error={props.meta.touched && !!props.meta.error}
  30         autoComplete='off'
  31         autoFocus={props.autoFocus}
  32         fullWidth={true}
  33         required={props.required}
  34         select={props.select}
  35         children={props.children}
  36         {...props.input}
  37     />);
  38
  39
  40 interface RichEditorTextFieldData {
  41     label?: string;
  42 }
  43
  44 type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
  45
  46 export const RichEditorTextField = withStyles(styles)(
  47     class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
  48         state = {
  49             value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
  50         };
  51
  52         onChange = (value: any) => {
  53             this.setState({ value });
  54             this.props.input.onChange(value.toString('html'));
  55         }
  56
  57         render() {
  58             return <RichTextEditor
  59                 value={this.state.value}
  60                 onChange={this.onChange}
  61                 placeholder={this.props.label} />;
  62         }
  63     }
  64 );
  65
  66 export const DateTextField = withStyles(styles)
  67     ((props: TextFieldProps) =>
  68         <MaterialTextField
  69             type="date"
  70             disabled={props.meta.submitting}
  71             helperText={props.meta.error}
  72             error={!!props.meta.error}
  73             fullWidth={true}
  74             InputLabelProps={{
  75                 shrink: true
  76             }}
  77             name={props.input.name}
  78             onChange={props.input.onChange}
  79             value={props.input.value}
  80         />
  81     );