UNPKG

@alicloudfe/components

Version:

A react component library for aliyun

361 lines (360 loc) 18.9 kB
"use strict"; var __assign = (this && this.__assign) || function () { __assign = Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; return __assign.apply(this, arguments); }; var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) { if (k2 === undefined) k2 = k; Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } }); }) : (function(o, m, k, k2) { if (k2 === undefined) k2 = k; o[k2] = m[k]; })); var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) { Object.defineProperty(o, "default", { enumerable: true, value: v }); }) : function(o, v) { o["default"] = v; }); var __importStar = (this && this.__importStar) || function (mod) { if (mod && mod.__esModule) return mod; var result = {}; if (mod != null) for (var k in mod) if (k !== "default" && Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k); __setModuleDefault(result, mod); return result; }; var __rest = (this && this.__rest) || function (s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; }; var __importDefault = (this && this.__importDefault) || function (mod) { return (mod && mod.__esModule) ? mod : { "default": mod }; }; Object.defineProperty(exports, "__esModule", { value: true }); var next_1 = require("@alifd/next"); var react_dom_1 = __importDefault(require("react-dom")); var hoist_non_react_statics_1 = __importDefault(require("hoist-non-react-statics")); var react_1 = __importStar(require("react")); var useCssVar_1 = require("../utils/useCssVar"); var sizeMap = { mini: 400, small: 600, medium: 800, large: 1200 }; var yunxiaoSizeMap = { mini: 440, small: 600, medium: 800, large: 1200 }; // yunxiao v5测试主题 var yunxiaoV5SizeMap = { mini: 480, small: 640, medium: 800, large: '70%' }; // 获取常规Dialog size 大小 var getCustomWidth = function (size, theme) { var sizeWidth = theme.startsWith('yunxiao') ? (theme === 'yunxiao-v5' ? yunxiaoV5SizeMap[size] : yunxiaoSizeMap[size]) : sizeMap[size]; if (sizeWidth) { return sizeWidth; } // 云效主题返回非法值,以可使fusion的width默认值失效,兼容历史通过className设置的宽度的场景 if (theme.startsWith('yunxiao')) { return 'null'; } // 如果想内部撑开要设置width=auto,但会时历史通过className设置的宽度失效 return 'auto'; }; // 判断是否是云效主题,云效主题的 Dialog 局顶 var isYunxiaoTheme = function (theme) { return theme === 'yunxiao' || theme === 'yunxiao-dark' || theme.startsWith('yunxiao'); }; // 获取快捷调用 size 大小 var getQuickCustomWidth = function (size, theme) { var sizeWidth = theme.startsWith('yunxiao') ? (theme === 'yunxiao-v5' ? yunxiaoV5SizeMap[size] : yunxiaoSizeMap[size]) : sizeMap[size]; if (sizeWidth) { return sizeWidth; } // 云效主题返回非法值,以可使fusion的width默认值失效,兼容历史通过className设置的宽度的场景 if (theme.startsWith('yunxiao')) { return 'null'; } // 如果想内部撑开要设置width=auto,但会时历史通过className设置的宽度失效 return 'auto'; }; // 设置阴影 var setFooterShadow = function (dom, prefix) { var _a, _b; if (dom) { var dialogBodyDom = (_a = dom === null || dom === void 0 ? void 0 : dom.getElementsByClassName(prefix + "dialog-body")) === null || _a === void 0 ? void 0 : _a[0]; var dialogFooterDom = (_b = dom === null || dom === void 0 ? void 0 : dom.getElementsByClassName(prefix + "dialog-footer")) === null || _b === void 0 ? void 0 : _b[0]; if (dialogFooterDom) { if ((dialogBodyDom === null || dialogBodyDom === void 0 ? void 0 : dialogBodyDom.clientHeight) < (dialogBodyDom === null || dialogBodyDom === void 0 ? void 0 : dialogBodyDom.scrollHeight)) { dialogFooterDom.classList.add(prefix + "dialog-footer-has-shadow"); } else { dialogFooterDom.classList.remove(prefix + "dialog-footer-has-shadow"); } } } }; // 渲染表头 var renderTitle = function (prefix, theme, title, extra) { if (!(theme.startsWith('hybridcloud') || theme.startsWith('hybridcloud-dark'))) { return title; } if (extra) { return (react_1.default.createElement("div", { className: prefix + "dialog-header-container" }, react_1.default.createElement("span", { className: prefix + "dialog-header-title" }, title), react_1.default.createElement("span", { className: prefix + "dialog-header-extra" }, extra, extra && react_1.default.createElement("div", { className: prefix + "dialog-header-line" })))); } return title; }; var Dialog = function (props) { var size = props.size, sidebar = props.sidebar, extra = props.extra, title = props.title, children = props.children, quickShow = props.quickShow, _a = props.messageProps, messageProps = _a === void 0 ? { type: 'notice' } : _a, others = __rest(props, ["size", "sidebar", "extra", "title", "children", "quickShow", "messageProps"]); var _b = props.prefix, prefix = _b === void 0 ? 'next-' : _b; var theme = useCssVar_1.useCssVar('--alicloudfe-components-theme').trim(); var customRef = react_1.useRef(null); // 有滚动条时底部显示阴影 var setFooterShadowOfRef = function () { if (theme !== 'wind' && !theme.startsWith('xconsole')) { setTimeout(function () { var dialogDom = react_dom_1.default.findDOMNode(customRef.current); setFooterShadow(dialogDom, prefix); }); } }; var observer = null; // 绑定监听器 react_1.useEffect(function () { var timeout = setTimeout(function () { var _a; setFooterShadowOfRef(); var drawerDom = react_dom_1.default.findDOMNode(customRef.current); var drawerBodyDom = (_a = drawerDom === null || drawerDom === void 0 ? void 0 : drawerDom.getElementsByClassName(prefix + "dialog-body")) === null || _a === void 0 ? void 0 : _a[0]; if (drawerBodyDom && !observer) { observer = new MutationObserver(function () { setFooterShadowOfRef(); }); observer.observe(drawerBodyDom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true, childList: true, subtree: true }); } }); // 销毁 return function () { if (observer) { observer.disconnect(); observer.takeRecords(); observer = null; } if (timeout) { clearTimeout(timeout); } }; }, [others.visible]); // 云效混合云主题样式主操作在右边 var defaultFooterActions = (function () { if (theme === 'yunxiao' || theme === 'yunxiao-dark' || theme === 'hybridcloud' || theme === 'hybridcloud-dark' || theme.startsWith('yunxiao')) return ['cancel', 'ok']; return ['ok', 'cancel']; })(); // 云效主题align在上方 var defaultAlign = (function () { if (theme === 'yunxiao' || theme === 'yunxiao-dark' || theme.startsWith('yunxiao')) return 'tc tc'; return 'cc cc'; })(); var defaultMinMargin = (function () { if (theme === 'yunxiao' || theme === 'yunxiao-dark' || theme.startsWith('yunxiao')) return 100; return 40; })(); return (react_1.default.createElement(next_1.Dialog, __assign({ className: "" + (size === 'large' ? prefix + "dialog-large" : '') + (theme === 'yunxiao-v5' && sidebar ? " " + prefix + "dialog-with-sidebar" : '') + (theme === 'yunxiao-v5' && quickShow ? " " + prefix + "dialog-quick" : ''), title: !(theme === 'yunxiao-v5' && quickShow) && renderTitle(prefix, theme, title, extra), width: getCustomWidth(size, theme), footerActions: defaultFooterActions, v2: true, centered: isYunxiaoTheme(theme) ? false : true, bottom: isYunxiaoTheme(theme) ? 40 : 80 }, others, { ref: customRef }), theme === 'yunxiao-v5' && !quickShow && (react_1.default.createElement(react_1.default.Fragment, null, sidebar ? (react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("div", { className: prefix + "dialog-sidebar" }, sidebar), react_1.default.createElement("div", { className: prefix + "dialog-content" }, children))) : children)), theme === 'yunxiao-v5' && quickShow && react_1.default.createElement(next_1.Message, __assign({ className: prefix + "dialog-message", title: title, shape: "addon" }, messageProps), children), theme !== 'yunxiao-v5' && children)); }; var showDefaultFooterActions = function (theme) { if (theme === 'yunxiao' || theme === 'yunxiao-dark' || theme === 'hybridcloud' || theme === 'hybridcloud-dark' || theme.startsWith('yunxiao')) return ['cancel', 'ok']; return ['ok', 'cancel']; }; var showDefaultAlign = function (theme) { if (theme === 'yunxiao' || theme === 'yunxiao-dark' || theme.startsWith('yunxiao')) return 'tc tc'; return 'cc cc'; }; var showDefaultMinMargin = function (theme) { if (theme === 'yunxiao' || theme === 'yunxiao-dark' || theme.startsWith('yunxiao')) return 100; return 40; }; // 快捷调用的操作按钮顺序 var show = function (config) { var _a; var size = config.size, type = config.type, title = config.title, extra = config.extra, others = __rest(config, ["size", "type", "title", "extra"]); var _b = config.prefix, prefix = _b === void 0 ? 'next-' : _b; var theme = (_a = window .getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, window.document.body).getPropertyValue('--alicloudfe-components-theme').trim(); var confirmClassName = (theme === 'hybridcloud' || theme === 'hybridcloud-dark') && type ? 'quick-show-confirm-or-alert' : ''; setTimeout(function () { var _a, _b; var doms = ((_a = document.getElementsByClassName('quick-show')) !== null && _a !== void 0 ? _a : []); var _loop_1 = function (item) { // 初始化判断是否有阴影 setFooterShadow(item, prefix); // 绑定body监听器。监听高度变化 var dialogBodyDom = (_b = item === null || item === void 0 ? void 0 : item.getElementsByClassName(prefix + "dialog-body")) === null || _b === void 0 ? void 0 : _b[0]; var observer = new MutationObserver(function () { setFooterShadow(item, prefix); }); if (dialogBodyDom) { observer.observe(dialogBodyDom, { attributes: true, attributeFilter: ['style'], attributeOldValue: true, childList: true, subtree: true }); } // 绑定dialog监听器,用于监听dialog被销毁时销毁所有监听器 var domObserver = new MutationObserver(function () { var _a, _b; if (((_b = (_a = item === null || item === void 0 ? void 0 : item.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode) === null || _b === void 0 ? void 0 : _b.tagName) !== 'BODY') { observer.disconnect(); observer.takeRecords(); observer = null; domObserver.disconnect(); domObserver.takeRecords(); domObserver = null; } }); domObserver.observe(document.body, { attributes: true, attributeFilter: ['style'], attributeOldValue: true, childList: true, subtree: true }); }; for (var _i = 0, doms_1 = doms; _i < doms_1.length; _i++) { var item = doms_1[_i]; _loop_1(item); } }); return next_1.Dialog.show(__assign(__assign({ width: getCustomWidth(size, theme), footerActions: showDefaultFooterActions(theme), // align: showDefaultAlign(theme), // minMargin: showDefaultMinMargin(theme), v2: true, centered: isYunxiaoTheme(theme) ? false : true, bottom: isYunxiaoTheme(theme) ? 40 : 80, // shouldUpdatePosition: true, type: type, title: renderTitle(prefix, theme, title, extra) }, others), { // 将Dialog.show与其他quick弹窗区分出来,单独做样式覆盖, // 因为它的body是不包含Message的 // 也有可能使用show方法调用confirm和alert。。。。 className: ['quick-show', config.className, confirmClassName] .filter(Boolean) .join(' ') })); }; var confirm = function (config) { var _a; var theme = (_a = window .getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, window.document.body).getPropertyValue('--alicloudfe-components-theme').trim(); var size = config.size, style = config.style, title = config.title, extra = config.extra, others = __rest(config, ["size", "style", "title", "extra"]); var _b = config.prefix, prefix = _b === void 0 ? 'next-' : _b; return next_1.Dialog.confirm(__assign({ width: getQuickCustomWidth(size, theme), footerActions: showDefaultFooterActions(theme), // align: showDefaultAlign(theme), // minMargin: showDefaultMinMargin(theme), messageProps: { type: 'notice' }, centered: isYunxiaoTheme(theme) ? false : true, bottom: isYunxiaoTheme(theme) ? 40 : 80, v2: true, title: renderTitle(prefix, theme, title, extra) }, others)); }; var alert = function (config) { var _a; var theme = (_a = window .getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, window.document.body).getPropertyValue('--alicloudfe-components-theme').trim(); var size = config.size, title = config.title, extra = config.extra, others = __rest(config, ["size", "title", "extra"]); var _b = config.prefix, prefix = _b === void 0 ? 'next-' : _b; return next_1.Dialog.alert(__assign({ width: getQuickCustomWidth(size, theme), footerActions: showDefaultFooterActions(theme), // align: showDefaultAlign(theme), // minMargin: showDefaultMinMargin(theme), messageProps: { type: 'warning' }, // shouldUpdatePosition: true, centered: isYunxiaoTheme(theme) ? false : true, bottom: isYunxiaoTheme(theme) ? 40 : 80, v2: true, title: renderTitle(prefix, theme, title, extra) }, others)); }; var moderateAlert = function (config) { var _a; var theme = (_a = window .getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, window.document.body).getPropertyValue('--alicloudfe-components-theme').trim(); var size = config.size, others = __rest(config, ["size"]); return next_1.Dialog.alert(__assign(__assign({ width: getQuickCustomWidth(size, theme), footerActions: showDefaultFooterActions(theme), messageProps: { type: 'warning' }, centered: isYunxiaoTheme(theme) ? false : true, bottom: isYunxiaoTheme(theme) ? 40 : 80, v2: true }, others), { okProps: __assign({ warning: true }, others.okProps) })); }; var severeAlert = function (config) { var _a; var theme = (_a = window .getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, window.document.body).getPropertyValue('--alicloudfe-components-theme').trim(); var size = config.size, others = __rest(config, ["size"]); return next_1.Dialog.alert(__assign(__assign({ width: getQuickCustomWidth(size, theme), footerActions: showDefaultFooterActions(theme), messageProps: { type: 'warning', className: 'message-severe-alert' }, centered: isYunxiaoTheme(theme) ? false : true, bottom: isYunxiaoTheme(theme) ? 40 : 80, v2: true }, others), { okProps: __assign({ warning: true }, others.okProps) })); }; var error = function (config) { var _a; var theme = (_a = window .getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, window.document.body).getPropertyValue('--alicloudfe-components-theme').trim(); var size = config.size, title = config.title, extra = config.extra, others = __rest(config, ["size", "title", "extra"]); var _b = config.prefix, prefix = _b === void 0 ? 'next-' : _b; return next_1.Dialog.alert(__assign(__assign({ width: getQuickCustomWidth(size, theme), footerActions: showDefaultFooterActions(theme), messageProps: { type: 'error' }, centered: isYunxiaoTheme(theme) ? false : true, bottom: isYunxiaoTheme(theme) ? 40 : 80, v2: true, title: renderTitle(prefix, theme, title, extra) }, others), { okProps: __assign({ warning: true }, others.okProps) })); }; var success = function (config) { var _a; var theme = (_a = window .getComputedStyle) === null || _a === void 0 ? void 0 : _a.call(window, window.document.body).getPropertyValue('--alicloudfe-components-theme').trim(); var size = config.size, title = config.title, extra = config.extra, others = __rest(config, ["size", "title", "extra"]); var _b = config.prefix, prefix = _b === void 0 ? 'next-' : _b; return next_1.Dialog.alert(__assign({ width: getQuickCustomWidth(size, theme), footerActions: showDefaultFooterActions(theme), messageProps: { type: 'success' }, centered: isYunxiaoTheme(theme) ? false : true, bottom: isYunxiaoTheme(theme) ? 40 : 80, v2: true, title: renderTitle(prefix, theme, title, extra) }, others)); }; hoist_non_react_statics_1.default(Dialog, next_1.Dialog, { show: true, confirm: true }); Dialog.show = show; Dialog.confirm = confirm; Dialog.alert = alert; Dialog.error = error; Dialog.success = success; Dialog.moderateAlert = moderateAlert; Dialog.severeAlert = severeAlert; exports.default = Dialog;