semantic-ui-react
Version:
The official Semantic-UI-React integration.
72 lines (62 loc) • 2.56 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { Ref } from '@fluentui/react-component-ref';
import cx from 'clsx';
import PropTypes from 'prop-types';
import React from 'react';
import { childrenUtils, createShorthandFactory, customPropTypes, getElementType, getUnhandledProps, useClassNamesOnNode, useKeyOnly } from '../../lib';
/**
* A modal has a dimmer.
*/
function ModalDimmer(props) {
var blurring = props.blurring,
children = props.children,
className = props.className,
centered = props.centered,
content = props.content,
inverted = props.inverted,
mountNode = props.mountNode,
scrolling = props.scrolling;
var ref = React.useRef();
var classes = cx('ui', useKeyOnly(inverted, 'inverted'), useKeyOnly(!centered, 'top aligned'), 'page modals dimmer transition visible active', className);
var bodyClasses = cx('dimmable dimmed', useKeyOnly(blurring, 'blurring'), useKeyOnly(scrolling, 'scrolling'));
var rest = getUnhandledProps(ModalDimmer, props);
var ElementType = getElementType(ModalDimmer, props);
useClassNamesOnNode(mountNode, bodyClasses);
React.useEffect(function () {
if (ref.current && ref.current.style) {
ref.current.style.setProperty('display', 'flex', 'important');
}
}, []);
return /*#__PURE__*/React.createElement(Ref, {
innerRef: ref
}, /*#__PURE__*/React.createElement(ElementType, _extends({}, rest, {
className: classes
}), childrenUtils.isNil(children) ? content : children));
}
ModalDimmer.handledProps = ["as", "blurring", "centered", "children", "className", "content", "inverted", "mountNode", "scrolling"];
ModalDimmer.propTypes = process.env.NODE_ENV !== "production" ? {
/** An element type to render as (string or function). */
as: PropTypes.elementType,
/** A dimmer can be blurred. */
blurring: PropTypes.bool,
/** Primary content. */
children: PropTypes.node,
/** Additional classes. */
className: PropTypes.string,
/** A dimmer can center its contents in the viewport. */
centered: PropTypes.bool,
/** Shorthand for primary content. */
content: customPropTypes.contentShorthand,
/** A dimmer can be inverted. */
inverted: PropTypes.bool,
/** The node where the modal should mount. Defaults to document.body. */
mountNode: PropTypes.any,
/** A dimmer can make body scrollable. */
scrolling: PropTypes.bool
} : {};
ModalDimmer.create = createShorthandFactory(ModalDimmer, function (content) {
return {
content: content
};
});
export default ModalDimmer;