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 export const TextField = withStyles(styles)((props: WrappedFieldProps & WithStyles<CssRules> & { label?: string, autoFocus?: boolean }) =>
  20     <MaterialTextField
  21         helperText={props.meta.touched && props.meta.error}
  22         className={props.classes.textField}
  23         label={props.label}
  24         disabled={props.meta.submitting}
  25         error={props.meta.touched && !!props.meta.error}
  26         autoComplete='off'
  27         autoFocus={props.autoFocus}
  28         fullWidth={true}
  29         {...props.input}
  30     />);
  31
  32
  33 interface RichEditorTextFieldData {
  34     label?: string;
  35 }
  36
  37 type RichEditorTextFieldProps = RichEditorTextFieldData & WrappedFieldProps & WithStyles<CssRules>;
  38
  39 export const RichEditorTextField = withStyles(styles)(
  40     class RichEditorTextField extends React.Component<RichEditorTextFieldProps> {
  41         state = {
  42             value: RichTextEditor.createValueFromString(this.props.input.value, 'html')
  43         };
  44
  45         onChange = (value: any) => {
  46             this.setState({ value });
  47             this.props.input.onChange(value.toString('html'));
  48         }
  49
  50         render() {
  51             return (
  52                 <RichTextEditor
  53                     value={this.state.value}
  54                     onChange={this.onChange}
  55                     placeholder={this.props.label} />
  56             );
  57         }
  58     }
  59 );