Page MenuHomec4science
Files F102280699

NotchedOutline.js
No OneTemporary
Actions

File Metadata

Created
Wed, Feb 19, 01:47

NotchedOutline.js
View Options

import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
import _extends from "@babel/runtime/helpers/esm/extends";
var _span;
const _excluded = ["children", "classes", "className", "label", "notched"];
import * as React from 'react';
import PropTypes from 'prop-types';
import styled from '../styles/styled';
import { jsx as _jsx } from "react/jsx-runtime";
const NotchedOutlineRoot = styled('fieldset')({
textAlign: 'left',
position: 'absolute',
bottom: 0,
right: 0,
top: -5,
left: 0,
margin: 0,
padding: '0 8px',
pointerEvents: 'none',
borderRadius: 'inherit',
borderStyle: 'solid',
borderWidth: 1,
overflow: 'hidden',
minWidth: '0%'
});
const NotchedOutlineLegend = styled('legend')(({
ownerState,
theme
}) => _extends({
float: 'unset',
// Fix conflict with bootstrap
width: 'auto',
// Fix conflict with bootstrap
overflow: 'hidden'
}, !ownerState.withLabel && {
padding: 0,
lineHeight: '11px',
// sync with `height` in `legend` styles
transition: theme.transitions.create('width', {
duration: 150,
easing: theme.transitions.easing.easeOut
})
}, ownerState.withLabel && _extends({
display: 'block',
// Fix conflict with normalize.css and sanitize.css
padding: 0,
height: 11,
// sync with `lineHeight` in `legend` styles
fontSize: '0.75em',
visibility: 'hidden',
maxWidth: 0.01,
transition: theme.transitions.create('max-width', {
duration: 50,
easing: theme.transitions.easing.easeOut
}),
whiteSpace: 'nowrap',
'& > span': {
paddingLeft: 5,
paddingRight: 5,
display: 'inline-block',
opacity: 0,
visibility: 'visible'
}
}, ownerState.notched && {
maxWidth: '100%',
transition: theme.transitions.create('max-width', {
duration: 100,
easing: theme.transitions.easing.easeOut,
delay: 50
})
})));
/**
* @ignore - internal component.
*/
export default function NotchedOutline(props) {
const {
className,
label,
notched
} = props,
other = _objectWithoutPropertiesLoose(props, _excluded);
const withLabel = label != null && label !== '';
const ownerState = _extends({}, props, {
notched,
withLabel
});
return /*#__PURE__*/_jsx(NotchedOutlineRoot, _extends({
"aria-hidden": true,
className: className,
ownerState: ownerState
}, other, {
children: /*#__PURE__*/_jsx(NotchedOutlineLegend, {
ownerState: ownerState,
children: withLabel ? /*#__PURE__*/_jsx("span", {
children: label
}) : // notranslate needed while Google Translate will not fix zero-width space issue
_span || (_span = /*#__PURE__*/_jsx("span", {
className: "notranslate",
children: "\u200B"
}))
})
}));
}
process.env.NODE_ENV !== "production" ? NotchedOutline.propTypes = {
/**
* The content of the component.
*/
children: PropTypes.node,
/**
* Override or extend the styles applied to the component.
* See [CSS API](#css) below for more details.
*/
classes: PropTypes.object,
/**
* @ignore
*/
className: PropTypes.string,
/**
* The label.
*/
label: PropTypes.node,
/**
* If `true`, the outline is notched to accommodate the label.
*/
notched: PropTypes.bool.isRequired,
/**
* @ignore
*/
style: PropTypes.object
} : void 0;

Event Timeline

c4science · Help