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