@e-group/material-lab/FormControlEditor/FormControlEditor.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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

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

var _reactDom = _interopRequireDefault(require("react-dom"));

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

var _warning = _interopRequireDefault(require("warning"));

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

var _FormLabel = _interopRequireDefault(require("@material-ui/core/FormLabel"));

var _FormControl = _interopRequireDefault(require("@material-ui/core/FormControl"));

var _FormHelperText = _interopRequireDefault(require("@material-ui/core/FormHelperText"));

var _OutlineEditor = _interopRequireDefault(require("./OutlineEditor"));

const styles = theme => ({
  label: {
    position: 'absolute',
    top: 0,
    left: 0,
    transform: 'translate(14px, -6px) scale(0.75)',
    transformOrigin: 'top left'
  }
});

const useStyles = (0, _makeStyles.default)(styles);

const FormControlEditor = props => {
  const label = props.label,
        helperText = props.helperText,
        onContainerClick = props.onContainerClick,
        MuiFormLabelProps = props.MuiFormLabelProps,
        EditorProps = props.EditorProps,
        MuiFormHelperTextProps = props.MuiFormHelperTextProps,
        other = (0, _objectWithoutProperties2.default)(props, ["label", "helperText", "onContainerClick", "MuiFormLabelProps", "EditorProps", "MuiFormHelperTextProps"]);

  const _ref = EditorProps || {},
        onFocus = _ref.onFocus,
        onBlur = _ref.onBlur;

  const _React$useState = _react.default.useState(props.focused),
        _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
        focused = _React$useState2[0],
        setFocused = _React$useState2[1];

  const classes = useStyles(props);

  const _React$useState3 = _react.default.useState(0),
        _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
        labelWidth = _React$useState4[0],
        setLabelWidth = _React$useState4[1];

  const labelRef = _react.default.useRef();

  (0, _warning.default)(false, "FormControlEditor is deprecated and it'll drop in next major release please avoid use it.");

  _react.default.useEffect(() => {
    const labelNode = _reactDom.default.findDOMNode(labelRef.current);

    setLabelWidth(labelNode != null ? labelNode.offsetWidth : 0);
  }, []);

  const handleFocus = e => {
    if (onFocus) {
      onFocus(e);
    }

    setFocused(true);
  };

  const handleBlur = e => {
    if (onBlur) {
      onBlur(e);
    }

    setFocused(false);
  };

  return /*#__PURE__*/_react.default.createElement(_FormControl.default, other, label && /*#__PURE__*/_react.default.createElement(_FormLabel.default, (0, _extends2.default)({
    ref: labelRef,
    className: classes.label,
    focused: focused
  }, MuiFormLabelProps), label), /*#__PURE__*/_react.default.createElement(_OutlineEditor.default, (0, _extends2.default)({
    labelWidth: labelWidth,
    onContainerClick: onContainerClick,
    disabled: props.disabled,
    error: props.error,
    onFocus: handleFocus,
    onBlur: handleBlur,
    focused: focused
  }, EditorProps)), helperText && /*#__PURE__*/_react.default.createElement(_FormHelperText.default, MuiFormHelperTextProps, helperText));
};

FormControlEditor.propTypes = {
  label: _propTypes.default.string,
  helperText: _propTypes.default.string,
  MuiFormLabelProps: _propTypes.default.object,
  EditorProps: _propTypes.default.object,
  MuiFormHelperTextProps: _propTypes.default.object
};
var _default = FormControlEditor;
exports.default = _default;