@e-group/material-lab/FormControlEditor/NotchedOutline.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"));

const styles = theme => ({
  root: {
    paddingLeft: 8,
    position: 'absolute',
    bottom: 0,
    right: 0,
    top: -5,
    left: 0,
    pointerEvents: 'none',
    margin: 0,
    padding: 0,
    borderRadius: theme.shape.borderRadius,
    borderStyle: 'solid',
    borderWidth: 1,
    transition: theme.transitions.create(['padding-left', 'border-color', 'border-width'], {
      duration: theme.transitions.duration.shorter,
      easing: theme.transitions.easing.easeOut
    })
  },
  legend: {
    textAlign: 'left',
    padding: 0,
    lineHeight: '11px',
    transition: theme.transitions.create('width', {
      duration: theme.transitions.duration.shorter,
      easing: theme.transitions.easing.easeOut
    })
  }
});

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

const NotchedOutline = props => {
  const className = props.className,
        labelWidth = props.labelWidth,
        other = (0, _objectWithoutProperties2.default)(props, ["className", "labelWidth"]);
  const classes = useStyles(props);
  return /*#__PURE__*/_react.default.createElement("fieldset", (0, _extends2.default)({
    className: (0, _clsx.default)(classes.root, className)
  }, other), /*#__PURE__*/_react.default.createElement("legend", {
    className: classes.legend,
    style: {
      // IE 11: fieldset with legend does not render
      // a border radius. This maintains consistency
      // by always having a legend rendered
      width: labelWidth
    }
  }, /*#__PURE__*/_react.default.createElement("span", {
    dangerouslySetInnerHTML: {
      __html: '​'
    }
  })));
};

NotchedOutline.propTypes = {
  labelWidth: _propTypes.default.number.isRequired
};
var _default = NotchedOutline;
exports.default = _default;