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