@rc-component/dialog
Version:
dialog ui component for react
394 lines (393 loc) • 18.2 kB
JavaScript
globalThis.makoModuleHotUpdate('common', {
modules: {
"src/Dialog/index.tsx": function(module, exports, __mako_require__) {
"use strict";
__mako_require__.d(exports, "__esModule", {
value: true
});
__mako_require__.d(exports, "default", {
enumerable: true,
get: function() {
return _default;
}
});
var _interop_require_default = __mako_require__("@swc/helpers/_/_interop_require_default");
var _interop_require_wildcard = __mako_require__("@swc/helpers/_/_interop_require_wildcard");
var _reactrefresh = /*#__PURE__*/ _interop_require_wildcard._(__mako_require__("node_modules/_react-refresh@0.14.2@react-refresh/runtime.js"));
var _jsxdevruntime = __mako_require__("node_modules/_react@18.3.1@react/jsx-dev-runtime.js");
var _classnames = /*#__PURE__*/ _interop_require_default._(__mako_require__("node_modules/_classnames@2.5.1@classnames/index.js"));
var _contains = /*#__PURE__*/ _interop_require_default._(__mako_require__("node_modules/_@rc-component_util@1.2.1@@rc-component/util/lib/Dom/contains.js"));
var _useId = /*#__PURE__*/ _interop_require_default._(__mako_require__("node_modules/_@rc-component_util@1.2.1@@rc-component/util/lib/hooks/useId.js"));
var _KeyCode = /*#__PURE__*/ _interop_require_default._(__mako_require__("node_modules/_@rc-component_util@1.2.1@@rc-component/util/lib/KeyCode.js"));
var _pickAttrs = /*#__PURE__*/ _interop_require_default._(__mako_require__("node_modules/_@rc-component_util@1.2.1@@rc-component/util/lib/pickAttrs.js"));
var _react = /*#__PURE__*/ _interop_require_wildcard._(__mako_require__("node_modules/_react@18.3.1@react/index.js"));
var _util = __mako_require__("src/util.ts");
var _Content = /*#__PURE__*/ _interop_require_default._(__mako_require__("src/Dialog/Content/index.tsx"));
var _Mask = /*#__PURE__*/ _interop_require_default._(__mako_require__("src/Dialog/Mask.tsx"));
var _warning = __mako_require__("node_modules/_@rc-component_util@1.2.1@@rc-component/util/lib/warning.js");
var prevRefreshReg;
var prevRefreshSig;
prevRefreshReg = self.$RefreshReg$;
prevRefreshSig = self.$RefreshSig$;
self.$RefreshReg$ = (type, id)=>{
_reactrefresh.register(type, module.id + id);
};
self.$RefreshSig$ = _reactrefresh.createSignatureFunctionForTransform;
var _s = $RefreshSig$();
const Dialog = (props)=>{
_s();
const { prefixCls = 'rc-dialog', zIndex, visible = false, keyboard = true, focusTriggerAfterClose = true, // scrollLocker,
// Wrapper
wrapStyle, wrapClassName, wrapProps, onClose, afterOpenChange, afterClose, // Dialog
transitionName, animation, closable = true, // Mask
mask = true, maskTransitionName, maskAnimation, maskClosable = true, maskStyle, maskProps, rootClassName, rootStyle, classNames: modalClassNames, styles: modalStyles } = props;
[
'wrapStyle',
'bodyStyle',
'maskStyle'
].forEach((prop)=>{
// (prop in props) && console.error(`Warning: ${prop} is deprecated, please use styles instead.`)
(0, _warning.warning)(!(prop in props), `${prop} is deprecated, please use styles instead.`);
});
if ('wrapClassName' in props) (0, _warning.warning)(false, `wrapClassName is deprecated, please use classNames instead.`);
const lastOutSideActiveElementRef = (0, _react.useRef)();
const wrapperRef = (0, _react.useRef)();
const contentRef = (0, _react.useRef)();
const [animatedVisible, setAnimatedVisible] = _react.useState(visible);
// ========================== Init ==========================
const ariaId = (0, _useId.default)();
function saveLastOutSideActiveElementRef() {
if (!(0, _contains.default)(wrapperRef.current, document.activeElement)) lastOutSideActiveElementRef.current = document.activeElement;
}
function focusDialogContent() {
if (!(0, _contains.default)(wrapperRef.current, document.activeElement)) {
var _contentRef_current;
(_contentRef_current = contentRef.current) === null || _contentRef_current === void 0 || _contentRef_current.focus();
}
}
// ========================= Events =========================
// Close action will trigger by:
// 1. When hide motion end
// 2. Controlled `open` to `false` immediately after set to `true` which will not trigger motion
function doClose() {
// Clean up scroll bar & focus back
setAnimatedVisible(false);
if (mask && lastOutSideActiveElementRef.current && focusTriggerAfterClose) {
try {
lastOutSideActiveElementRef.current.focus({
preventScroll: true
});
} catch (e) {
// Do nothing
}
lastOutSideActiveElementRef.current = null;
}
// Trigger afterClose only when change visible from true to false
if (animatedVisible) afterClose === null || afterClose === void 0 || afterClose();
}
function onDialogVisibleChanged(newVisible) {
// Try to focus
if (newVisible) focusDialogContent();
else {
console.log('hide???');
doClose();
}
afterOpenChange === null || afterOpenChange === void 0 || afterOpenChange(newVisible);
}
function onInternalClose(e) {
onClose === null || onClose === void 0 || onClose(e);
}
// >>> Content
const contentClickRef = (0, _react.useRef)(false);
const contentTimeoutRef = (0, _react.useRef)();
// We need record content click incase content popup out of dialog
const onContentMouseDown = ()=>{
clearTimeout(contentTimeoutRef.current);
contentClickRef.current = true;
};
const onContentMouseUp = ()=>{
contentTimeoutRef.current = setTimeout(()=>{
contentClickRef.current = false;
});
};
// >>> Wrapper
// Close only when element not on dialog
let onWrapperClick = null;
if (maskClosable) onWrapperClick = (e)=>{
if (contentClickRef.current) contentClickRef.current = false;
else if (wrapperRef.current === e.target) onInternalClose(e);
};
function onWrapperKeyDown(e) {
if (keyboard && e.keyCode === _KeyCode.default.ESC) {
e.stopPropagation();
onInternalClose(e);
return;
}
// keep focus inside dialog
if (visible && e.keyCode === _KeyCode.default.TAB) contentRef.current.changeActive(!e.shiftKey);
}
// ========================= Effect =========================
(0, _react.useEffect)(()=>{
if (visible) {
setAnimatedVisible(true);
saveLastOutSideActiveElementRef();
} else if (animatedVisible && contentRef.current.enableMotion() && !contentRef.current.inMotion()) doClose();
}, [
visible
]);
// Remove direct should also check the scroll bar update
(0, _react.useEffect)(()=>()=>{
clearTimeout(contentTimeoutRef.current);
}, []);
const mergedStyle = {
zIndex,
...wrapStyle,
...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.wrapper,
display: !animatedVisible ? 'none' : null
};
// ========================= Render =========================
return /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("div", {
className: (0, _classnames.default)(`${prefixCls}-root`, rootClassName),
style: rootStyle,
...(0, _pickAttrs.default)(props, {
data: true
}),
children: [
/*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)(_Mask.default, {
prefixCls: prefixCls,
visible: mask && visible,
motionName: (0, _util.getMotionName)(prefixCls, maskTransitionName, maskAnimation),
style: {
zIndex,
...maskStyle,
...modalStyles === null || modalStyles === void 0 ? void 0 : modalStyles.mask
},
maskProps: maskProps,
className: modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.mask
}, void 0, false, {
fileName: "src/Dialog/index.tsx",
lineNumber: 195,
columnNumber: 7
}, this),
/*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)("div", {
tabIndex: -1,
onKeyDown: onWrapperKeyDown,
className: (0, _classnames.default)(`${prefixCls}-wrap`, wrapClassName, modalClassNames === null || modalClassNames === void 0 ? void 0 : modalClassNames.wrapper),
ref: wrapperRef,
onClick: onWrapperClick,
style: mergedStyle,
...wrapProps,
children: /*#__PURE__*/ (0, _jsxdevruntime.jsxDEV)(_Content.default, {
...props,
onMouseDown: onContentMouseDown,
onMouseUp: onContentMouseUp,
ref: contentRef,
closable: closable,
ariaId: ariaId,
prefixCls: prefixCls,
visible: visible && animatedVisible,
onClose: onInternalClose,
onVisibleChanged: onDialogVisibleChanged,
motionName: (0, _util.getMotionName)(prefixCls, transitionName, animation)
}, void 0, false, {
fileName: "src/Dialog/index.tsx",
lineNumber: 212,
columnNumber: 9
}, this)
}, void 0, false, {
fileName: "src/Dialog/index.tsx",
lineNumber: 203,
columnNumber: 7
}, this)
]
}, void 0, true, {
fileName: "src/Dialog/index.tsx",
lineNumber: 190,
columnNumber: 5
}, this);
};
_s(Dialog, "jpgAGSop6biDTxPFPAMT85ShMu0=", false, function() {
return [
_useId.default
];
});
_c = Dialog;
var _default = Dialog;
var _c;
$RefreshReg$(_c, "Dialog");
if (prevRefreshReg) self.$RefreshReg$ = prevRefreshReg;
if (prevRefreshSig) self.$RefreshSig$ = prevRefreshSig;
function registerClassComponent(filename, moduleExports) {
for(const key in moduleExports)try {
if (key === "__esModule") continue;
const exportValue = moduleExports[key];
if (_reactrefresh.isLikelyComponentType(exportValue) && exportValue.prototype && exportValue.prototype.isReactComponent) _reactrefresh.register(exportValue, filename + " " + key);
} catch (e) {}
}
function $RefreshIsReactComponentLike$(moduleExports) {
if (_reactrefresh.isLikelyComponentType(moduleExports || moduleExports.default)) return true;
for(var key in moduleExports)try {
if (_reactrefresh.isLikelyComponentType(moduleExports[key])) return true;
} catch (e) {}
return false;
}
registerClassComponent(module.id, module.exports);
if ($RefreshIsReactComponentLike$(module.exports)) {
module.meta.hot.accept();
_reactrefresh.performReactRefresh();
}
}
}
}, function(runtime) {
runtime._h = '7338948553039754745';
runtime.updateEnsure2Map({
".dumi/tmp/dumi/theme/ContextWrapper.tsx": [
"dumi__tmp__dumi__theme__ContextWrapper"
],
"docs/changelog.md": [
"vendors",
"docs/changelog.md"
],
"docs/changelog.md?type=demo": [
"vendors",
"common",
"meta__docs"
],
"docs/changelog.md?type=text": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/ant-design.md": [
"vendors",
"docs/demo/ant-design.md"
],
"docs/demo/ant-design.md?type=demo": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/ant-design.md?type=text": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/bootstrap.md": [
"vendors",
"docs/demo/bootstrap.md"
],
"docs/demo/bootstrap.md?type=demo": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/bootstrap.md?type=text": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/draggable.md": [
"vendors",
"docs/demo/draggable.md"
],
"docs/demo/draggable.md?type=demo": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/draggable.md?type=text": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/multiple-Portal.md": [
"vendors",
"docs/demo/multiple-Portal.md"
],
"docs/demo/multiple-Portal.md?type=demo": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/multiple-Portal.md?type=text": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/pure.md": [
"vendors",
"docs/demo/pure.md"
],
"docs/demo/pure.md?type=demo": [
"vendors",
"common",
"meta__docs"
],
"docs/demo/pure.md?type=text": [
"vendors",
"common",
"meta__docs"
],
"docs/examples/ant-design.tsx?techStack=react": [
"vendors",
"common",
"demos"
],
"docs/examples/bootstrap.tsx?techStack=react": [
"vendors",
"common",
"demos"
],
"docs/examples/draggable.tsx?techStack=react": [
"vendors",
"common",
"demos"
],
"docs/examples/multiple-Portal.tsx?techStack=react": [
"vendors",
"common",
"demos"
],
"docs/examples/pure.tsx?techStack=react": [
"vendors",
"common",
"demos"
],
"docs/index.md": [
"vendors",
"docs/index.md"
],
"docs/index.md?type=demo": [
"vendors",
"common",
"meta__docs"
],
"docs/index.md?type=text": [
"vendors",
"common",
"meta__docs"
],
"node_modules/_dumi@2.4.17@dumi/dist/client/misc/reactDemoCompiler.js": [
"vendors",
"node_modules/_dumi@2.4.17@dumi/dist/client/misc/reactDemoCompiler.js"
],
"node_modules/_dumi@2.4.17@dumi/dist/client/pages/404.js": [
"vendors",
"nm__dumi__dist__client__pages__404"
],
"node_modules/_dumi@2.4.17@dumi/dist/client/pages/Demo/index.js": [
"vendors",
"nm__dumi__dist__client__pages__Demo__index"
],
"node_modules/_dumi@2.4.17@dumi/theme-default/layouts/DocLayout/index.js": [
"vendors",
"node_modules/_dumi@2.4.17@dumi/theme-default/layouts/DocLayout/index.js"
],
"node_modules/_react-dom@18.3.1@react-dom/server.browser.js": [
"vendors",
"node_modules/_react-dom@18.3.1@react-dom/server.browser.js"
]
});
;
});
//# sourceMappingURL=common-async.7441995189917427860.hot-update.js.map