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' | 'rte';
  19
  20 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  21     textField: {
  22         marginBottom: theme.spacing.unit * 3
  23     },
  24     rte: {
  25         fontFamily: 'Arial',
  26         '& a': {
  27             textDecoration: 'none',
  28             color: theme.palette.primary.main,
  29             '&:hover': {
  30                 cursor: 'pointer',
  31                 textDecoration: 'underline'
  32             }
  33         }
  34     }
  35 });
  36
  37 type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
  38
  39 export const TextField = withStyles(styles)((props: TextFieldProps & {
  40     label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode, margin?: Margin, placeholder?: string,
  41     helperText?: string, type?: string,
  42 }) =>
  43     <MaterialTextField
  44         helperText={(props.meta.touched && props.meta.error) || props.helperText}
  45         className={props.classes.textField}
  46         label={props.label}
  47         disabled={props.disabled || props.meta.submitting}
  48         error={props.meta.touched && !!props.meta.error}
  49         autoComplete='off'
  50         autoFocus={props.autoFocus}
  51         fullWidth={true}
  52         required={props.required}
  53         select={props.select}
  54         children={props.children}
  55         margin={props.margin}
  56         placeholder={props.placeholder}
  57         type={props.type}
  58         {...props.input}
  59     />);
  60
  61
  62 interface RichEditorTextFieldData {
  63     label?: string;
  64 }
  65
  66 type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
  67
  68 export const RichEditorTextField = withStyles(styles)(
  69     class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
  70         state = {
  71             value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
  72         };
  73
  74         onChange = (value: any) => {
  75             this.setState({ value });
  76             this.props.input.onChange(value.toString('html'));
  77         }
  78
  79         render() {
  80             return <RichTextEditor
  81                 className={this.props.classes.rte}
  82                 value={this.state.value}
  83                 onChange={this.onChange}
  84                 placeholder={this.props.label} />;
  85         }
  86     }
  87 );
  88
  89 export const DateTextField = withStyles(styles)
  90     ((props: TextFieldProps) =>
  91         <MaterialTextField
  92             type="date"
  93             disabled={props.meta.submitting}
  94             helperText={props.meta.error}
  95             error={!!props.meta.error}
  96             fullWidth={true}
  97             InputLabelProps={{
  98                 shrink: true
  99             }}
 100             name={props.input.name}
 101             onChange={props.input.onChange}
 102             value={props.input.value}
 103         />
 104     );