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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _clsx = _interopRequireDefault(require("clsx"));

var _makeStyles = _interopRequireDefault(require("@material-ui/core/styles/makeStyles"));

var _draftJs = require("draft-js");

var _NotchedOutline = _interopRequireDefault(require("./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 = (0, _makeStyles.default)(styles);

const OutlineEditor = /*#__PURE__*/_react.default.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 = (0, _objectWithoutProperties2.default)(props, ["className", "labelWidth", "onContainerClick", "readOnly", "disabled", "error", "focused"]);
  const classes = useStyles(props);

  const editorEl = _react.default.useRef(null);

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

  return /*#__PURE__*/_react.default.createElement("div", {
    className: (0, _clsx.default)(classes.root, {
      [classes.disabled]: disabled,
      [classes.error]: error,
      [classes.focused]: focused
    }, classNameProp),
    ref: ref
  }, /*#__PURE__*/_react.default.createElement(_NotchedOutline.default, {
    className: classes.notchedOutline,
    labelWidth: labelWidth
  }), /*#__PURE__*/_react.default.createElement("div", {
    className: classes.editorContainer,
    onClick: handleContainerClick
  }, /*#__PURE__*/_react.default.createElement(_draftJs.Editor, (0, _extends2.default)({
    ref: editorEl,
    readOnly: readOnly || disabled
  }, other))));
});

OutlineEditor.propTypes = {
  labelWidth: _propTypes.default.number.isRequired,
  EditorProps: _propTypes.default.object,
  onContainerClick: _propTypes.default.func,

  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * @ignore
   */
  muiFormControl: _propTypes.default.object
};
var _default = OutlineEditor;
exports.default = _default;