@gzued/antd-compiled
Version:
Pre-bundled Ant Design 4.x and related dependencies for @gzued packages
125 lines • 4.2 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useRef } from 'react';
import classNames from 'classnames';
import MemoChildren from './MemoChildren';
var sentinelStyle = {
width: 0,
height: 0,
overflow: 'hidden',
outline: 'none'
};
var Panel = /*#__PURE__*/React.forwardRef(function (props, ref) {
var prefixCls = props.prefixCls,
className = props.className,
style = props.style,
title = props.title,
ariaId = props.ariaId,
footer = props.footer,
closable = props.closable,
closeIcon = props.closeIcon,
onClose = props.onClose,
children = props.children,
bodyStyle = props.bodyStyle,
bodyProps = props.bodyProps,
modalRender = props.modalRender,
onMouseDown = props.onMouseDown,
onMouseUp = props.onMouseUp,
holderRef = props.holderRef,
visible = props.visible,
forceRender = props.forceRender,
width = props.width,
height = props.height;
// ================================= Refs =================================
var sentinelStartRef = useRef();
var sentinelEndRef = useRef();
React.useImperativeHandle(ref, function () {
return {
focus: function focus() {
var _sentinelStartRef$cur;
(_sentinelStartRef$cur = sentinelStartRef.current) === null || _sentinelStartRef$cur === void 0 ? void 0 : _sentinelStartRef$cur.focus({
preventScroll: true
});
},
changeActive: function changeActive(next) {
var _document = document,
activeElement = _document.activeElement;
if (next && activeElement === sentinelEndRef.current) {
sentinelStartRef.current.focus({
preventScroll: true
});
} else if (!next && activeElement === sentinelStartRef.current) {
sentinelEndRef.current.focus({
preventScroll: true
});
}
}
};
});
// ================================ Style =================================
var contentStyle = {};
if (width !== undefined) {
contentStyle.width = width;
}
if (height !== undefined) {
contentStyle.height = height;
}
// ================================ Render ================================
var footerNode;
if (footer) {
footerNode = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-footer")
}, footer);
}
var headerNode;
if (title) {
headerNode = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-header")
}, /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-title"),
id: ariaId
}, title));
}
var closer;
if (closable) {
closer = /*#__PURE__*/React.createElement("button", {
type: "button",
onClick: onClose,
"aria-label": "Close",
className: "".concat(prefixCls, "-close")
}, closeIcon || /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-close-x")
}));
}
var content = /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-content")
}, closer, headerNode, /*#__PURE__*/React.createElement("div", _extends({
className: "".concat(prefixCls, "-body"),
style: bodyStyle
}, bodyProps), children), footerNode);
return /*#__PURE__*/React.createElement("div", {
key: "dialog-element",
role: "dialog",
"aria-labelledby": title ? ariaId : null,
"aria-modal": "true",
ref: holderRef,
style: _objectSpread(_objectSpread({}, style), contentStyle),
className: classNames(prefixCls, className),
onMouseDown: onMouseDown,
onMouseUp: onMouseUp
}, /*#__PURE__*/React.createElement("div", {
tabIndex: 0,
ref: sentinelStartRef,
style: sentinelStyle
}), /*#__PURE__*/React.createElement(MemoChildren, {
shouldUpdate: visible || forceRender
}, modalRender ? modalRender(content) : content), /*#__PURE__*/React.createElement("div", {
tabIndex: 0,
ref: sentinelEndRef,
style: sentinelStyle
}));
});
if (process.env.NODE_ENV !== 'production') {
Panel.displayName = 'Panel';
}
export default Panel;