@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
237 lines • 9.78 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
var _excluded = ["detail", "message", "description", "onClose", "className"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
import { MinusSquareOutlined, PlusSquareOutlined, WarningFilled } from '@ant-design/icons';
import { notification as AntdNotification, Collapse, Typography } from 'antd';
import React, { isValidElement, useState } from 'react';
import { Fragment as _Fragment } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
import { jsx as _jsx } from "react/jsx-runtime";
var Panel = Collapse.Panel;
var Link = Typography.Link,
Paragraph = Typography.Paragraph,
Text = Typography.Text;
var NOTICE_MAP = {};
var setNoticeMap = function setNoticeMap(key, noticeProps) {
if (!NOTICE_MAP[key]) {
NOTICE_MAP[key] = [];
}
NOTICE_MAP[key].push(noticeProps);
};
var removeNoticeMap = function removeNoticeMap(key) {
delete NOTICE_MAP[key];
};
var reactNodeToString = function reactNodeToString(reactNode) {
var string = '';
if (typeof reactNode === 'string') {
string = reactNode;
} else if (typeof reactNode === 'number') {
string = reactNode.toString();
} else if (Array.isArray(reactNode)) {
var _iterator = _createForOfIteratorHelper(reactNode),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var child = _step.value;
string += reactNodeToString(child);
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
} else if ( /*#__PURE__*/isValidElement(reactNode)) {
string += reactNodeToString(reactNode.props.children);
}
return string;
};
var Message = function Message(props) {
var _NOTICE_MAP$key;
var key = props.noticeKey,
message = props.message;
var count = ((_NOTICE_MAP$key = NOTICE_MAP[key]) === null || _NOTICE_MAP$key === void 0 ? void 0 : _NOTICE_MAP$key.length) || 0;
return /*#__PURE__*/_jsxs(_Fragment, {
children: [message, count > 1 && " (".concat(count, ")")]
});
};
var Description = function Description(props) {
var key = props.noticeKey;
var _useState = useState(),
_useState2 = _slicedToArray(_useState, 2),
activePanels = _useState2[0],
setActivePanels = _useState2[1];
var descMap = {};
var _iterator2 = _createForOfIteratorHelper(NOTICE_MAP[key]),
_step2;
try {
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
var noticeProps = _step2.value;
var descKey = reactNodeToString(noticeProps.description);
noticeProps.descKey = descKey;
descMap[descKey] = noticeProps;
}
} catch (err) {
_iterator2.e(err);
} finally {
_iterator2.f();
}
return /*#__PURE__*/_jsx(Collapse, {
accordion: true,
activeKey: activePanels,
className: "yunti-notification-collapse",
expandIcon: function expandIcon(_ref) {
var isActive = _ref.isActive;
return /*#__PURE__*/_jsx("span", {
className: "yunti-notification-collapse-expand-icon",
children: isActive ? /*#__PURE__*/_jsx(Link, {
className: "yunti-notification-link",
children: /*#__PURE__*/_jsx(MinusSquareOutlined, {
title: "\u70B9\u51FB\u5173\u95ED\u9519\u8BEF\u8BE6\u60C5"
})
}) : /*#__PURE__*/_jsx(PlusSquareOutlined, {
title: "\u70B9\u51FB\u67E5\u770B\u9519\u8BEF\u8BE6\u60C5"
})
});
},
ghost: true,
onChange: function onChange(keys) {
setActivePanels(keys);
},
children: Object.values(descMap).map(function (_ref2) {
var descKey = _ref2.descKey,
description = _ref2.description,
detail = _ref2.detail;
return /*#__PURE__*/_jsx(Panel, {
header: /*#__PURE__*/_jsx(Text, {
ellipsis: {
tooltip: false
},
style: {
width: 250
},
children: description
}),
children: /*#__PURE__*/_jsx(Paragraph, {
className: "yunti-notification-collapse-content-p",
copyable: {
text: JSON.stringify(detail, null, 2)
},
type: "secondary",
children: /*#__PURE__*/_jsx("pre", {
children: JSON.stringify(detail, null, 2)
})
})
}, descKey);
})
});
};
var notice = function notice(args) {
var detail = args.detail,
message = args.message,
description = args.description,
onCloseFromProps = args.onClose,
className = args.className,
restArgs = _objectWithoutProperties(args, _excluded);
var key = reactNodeToString(message);
setNoticeMap(key, args);
var onClose = function onClose() {
onCloseFromProps === null || onCloseFromProps === void 0 || onCloseFromProps();
removeNoticeMap(key);
};
if (args.type === 'warning' && !args.icon) {
restArgs.icon = /*#__PURE__*/_jsx(WarningFilled, {
style: {
color: '#ff7d00'
}
});
}
if (!detail) {
return AntdNotification.open(_objectSpread({
key: key,
message: /*#__PURE__*/_jsx(Message, {
message: message,
noticeKey: key
}),
description: description,
onClose: onClose,
className: "yunti-notification ".concat(className)
}, restArgs));
}
return AntdNotification.open(_objectSpread({
key: key,
message: /*#__PURE__*/_jsx(Message, {
message: message,
noticeKey: key
}),
description: /*#__PURE__*/_jsx(Description, {
noticeKey: key
}),
onClose: onClose,
className: "yunti-notification ".concat(className)
}, restArgs));
};
var warnsFun = function warnsFun(args) {
var _args$errors;
if (((args === null || args === void 0 || (_args$errors = args.errors) === null || _args$errors === void 0 ? void 0 : _args$errors.length) || 0) > 0) {
if (args !== null && args !== void 0 && args.errors || []) {
var _iterator3 = _createForOfIteratorHelper((args === null || args === void 0 ? void 0 : args.errors) || []),
_step3;
try {
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
var item = _step3.value;
notice(_objectSpread(_objectSpread({
detail: item,
description: item.message
}, args), {}, {
type: 'warning'
}));
}
} catch (err) {
_iterator3.e(err);
} finally {
_iterator3.f();
}
}
} else {
notice(_objectSpread(_objectSpread({}, args), {}, {
type: 'warning'
}));
}
};
export var notification = _objectSpread(_objectSpread({}, AntdNotification), {}, {
success: function success(args) {
return notice(_objectSpread(_objectSpread({}, args), {}, {
type: 'success'
}));
},
info: function info(args) {
return notice(_objectSpread(_objectSpread({}, args), {}, {
type: 'info'
}));
},
warning: function warning(args) {
return notice(_objectSpread(_objectSpread({}, args), {}, {
type: 'warning'
}));
},
warn: function warn(args) {
return notice(_objectSpread(_objectSpread({}, args), {}, {
type: 'warning'
}));
},
error: function error(args) {
return notice(_objectSpread(_objectSpread({}, args), {}, {
type: 'error'
}));
},
warnings: warnsFun,
warns: warnsFun
});
export default notification;
export { NotificationGlobalStyle } from "./style";