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

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 = makeStyles(styles);

const NotchedOutline = props => {
  const className = props.className,
        labelWidth = props.labelWidth,
        other = _objectWithoutProperties(props, ["className", "labelWidth"]);

  const classes = useStyles(props);
  return /*#__PURE__*/React.createElement("fieldset", _extends({
    className: clsx(classes.root, className)
  }, other), /*#__PURE__*/React.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.createElement("span", {
    dangerouslySetInnerHTML: {
      __html: '​'
    }
  })));
};

NotchedOutline.propTypes = {
  labelWidth: PropTypes.number.isRequired
};
export default NotchedOutline;