@e-group/material-lab/esm/FormControlEditor/OutlineEditor.js

EGroup Team Lab - Incubator for EGroup Team experimental React components.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import makeStyles from '@material-ui/core/styles/makeStyles';
import { Editor } from 'draft-js';
import NotchedOutline from './NotchedOutline';

const styles = theme => {
  const borderColor = theme.palette.type === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
  return {
    root: {
      position: 'relative',
      '& $notchedOutline': {
        borderColor
      },
      '&:hover $notchedOutline': {
        borderColor: theme.palette.text.primary,
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          borderColor
        }
      },
      '&$focused $notchedOutline': {
        borderColor: theme.palette.primary.main,
        borderWidth: 2
      },
      '&$error $notchedOutline': {
        borderColor: theme.palette.error.main
      },
      '&$disabled $notchedOutline': {
        borderColor: theme.palette.action.disabled
      }
    },
    editorContainer: {
      padding: '18.5px 14px'
    },
    notchedOutline: {},
    disabled: {},
    focused: {},
    error: {}
  };
};

const useStyles = makeStyles(styles);
const OutlineEditor = /*#__PURE__*/React.forwardRef((props, ref) => {
  const classNameProp = props.className,
        labelWidth = props.labelWidth,
        onContainerClick = props.onContainerClick,
        readOnly = props.readOnly,
        disabled = props.disabled,
        error = props.error,
        focused = props.focused,
        other = _objectWithoutProperties(props, ["className", "labelWidth", "onContainerClick", "readOnly", "disabled", "error", "focused"]);

  const classes = useStyles(props);
  const editorEl = React.useRef(null);

  const handleContainerClick = () => {
    if (onContainerClick) {
      onContainerClick(editorEl.current);
    } else {
      editorEl.current.focus();
    }
  };

  return /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.root, {
      [classes.disabled]: disabled,
      [classes.error]: error,
      [classes.focused]: focused
    }, classNameProp),
    ref: ref
  }, /*#__PURE__*/React.createElement(NotchedOutline, {
    className: classes.notchedOutline,
    labelWidth: labelWidth
  }), /*#__PURE__*/React.createElement("div", {
    className: classes.editorContainer,
    onClick: handleContainerClick
  }, /*#__PURE__*/React.createElement(Editor, _extends({
    ref: editorEl,
    readOnly: readOnly || disabled
  }, other))));
});
OutlineEditor.propTypes = {
  labelWidth: PropTypes.number.isRequired,
  EditorProps: PropTypes.object,
  onContainerClick: PropTypes.func,

  /**
   * @ignore
   */
  className: PropTypes.string,

  /**
   * @ignore
   */
  muiFormControl: PropTypes.object
};
export default OutlineEditor;