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

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

import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import React from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import warning from 'warning';
import makeStyles from '@material-ui/core/styles/makeStyles';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import FormHelperText from '@material-ui/core/FormHelperText';
import OutlineEditor from './OutlineEditor';

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

const useStyles = makeStyles(styles);

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

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

  const _React$useState = React.useState(props.focused),
        _React$useState2 = _slicedToArray(_React$useState, 2),
        focused = _React$useState2[0],
        setFocused = _React$useState2[1];

  const classes = useStyles(props);

  const _React$useState3 = React.useState(0),
        _React$useState4 = _slicedToArray(_React$useState3, 2),
        labelWidth = _React$useState4[0],
        setLabelWidth = _React$useState4[1];

  const labelRef = React.useRef();
  warning(false, "FormControlEditor is deprecated and it'll drop in next major release please avoid use it.");
  React.useEffect(() => {
    const labelNode = ReactDOM.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.createElement(FormControl, other, label && /*#__PURE__*/React.createElement(FormLabel, _extends({
    ref: labelRef,
    className: classes.label,
    focused: focused
  }, MuiFormLabelProps), label), /*#__PURE__*/React.createElement(OutlineEditor, _extends({
    labelWidth: labelWidth,
    onContainerClick: onContainerClick,
    disabled: props.disabled,
    error: props.error,
    onFocus: handleFocus,
    onBlur: handleBlur,
    focused: focused
  }, EditorProps)), helperText && /*#__PURE__*/React.createElement(FormHelperText, MuiFormHelperTextProps, helperText));
};

FormControlEditor.propTypes = {
  label: PropTypes.string,
  helperText: PropTypes.string,
  MuiFormLabelProps: PropTypes.object,
  EditorProps: PropTypes.object,
  MuiFormHelperTextProps: PropTypes.object
};
export default FormControlEditor;