services/workbench2/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 { CustomStyleRulesCallback } from 'common/custom-theme';
   9 import { TextField as MaterialTextField, FormControlOwnProps } from '@mui/material';
  10 import { WithStyles } from '@mui/styles';
  11 import withStyles from '@mui/styles/withStyles';
  12 import RichTextEditor from 'react-rte';
  13
  14 type CssRules = 'textField' | 'rte';
  15
  16 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  17     textField: {
  18         marginBottom: theme.spacing(1)
  19     },
  20     rte: {
  21         fontFamily: 'Arial',
  22         '& a': {
  23             textDecoration: 'none',
  24             color: theme.palette.primary.main,
  25             '&:hover': {
  26                 cursor: 'pointer',
  27                 textDecoration: 'underline'
  28             }
  29         }
  30     }
  31 });
  32
  33 type TextFieldProps = WrappedFieldProps & WithStyles<CssRules>;
  34
  35 export const TextField = withStyles(styles)((props: TextFieldProps & {
  36     label?: string, autoFocus?: boolean, required?: boolean, select?: boolean, disabled?: boolean, children: React.ReactNode, margin?: FormControlOwnProps["margin"], placeholder?: string,
  37     helperText?: string, type?: string,
  38 }) =>
  39     <MaterialTextField
  40         variant="standard"
  41         helperText={(props.meta.touched && props.meta.error) || props.helperText}
  42         className={props.classes.textField}
  43         label={props.label}
  44         disabled={props.disabled || props.meta.submitting}
  45         error={props.meta.touched && !!props.meta.error}
  46         autoComplete='off'
  47         autoFocus={props.autoFocus}
  48         fullWidth={true}
  49         required={props.required}
  50         select={props.select}
  51         children={props.children}
  52         margin={props.margin}
  53         placeholder={props.placeholder}
  54         type={props.type}
  55         {...props.input} />);
  56
  57
  58 interface RichEditorTextFieldData {
  59     label?: string;
  60 }
  61
  62 type RichEditorTextFieldProps = RichEditorTextFieldData & TextFieldProps;
  63
  64 export const RichEditorTextField = withStyles(styles)(
  65     class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
  66         state = {
  67             value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
  68         };
  69
  70         onChange = (value: any) => {
  71             this.setState({ value });
  72             this.props.input.onChange(
  73                 !!value.getEditorState().getCurrentContent().getPlainText().trim()
  74                 ? value.toString('html')
  75                 : null
  76             );
  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             variant="standard"
  93             type="date"
  94             disabled={props.meta.submitting}
  95             helperText={props.meta.error}
  96             error={!!props.meta.error}
  97             fullWidth={true}
  98             InputLabelProps={{
  99                 shrink: true
 100             }}
 101             name={props.input.name}
 102             onChange={props.input.onChange}
 103             value={props.input.value} />
 104     );