tdesign-react
Version:
TDesign Component for React
272 lines (267 loc) • 10.3 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from './dep-8618a2f1.js';
import React, { forwardRef, useState, useImperativeHandle, useEffect, useContext } from 'react';
import classNames from 'classnames';
import { CloseIcon, InfoCircleFilledIcon, CheckCircleFilledIcon } from 'tdesign-icons-react';
import { _ as _toConsumableArray } from './dep-132961ab.js';
import { _ as _slicedToArray } from './dep-118954e6.js';
import { render } from '../_util/react-render.js';
import useConfig from '../hooks/useConfig.js';
import noop from '../_util/noop.js';
import parseTNode from '../_util/parseTNode.js';
import useGlobalIcon from '../hooks/useGlobalIcon.js';
import { notificationDefaultProps } from '../notification/defaultProps.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import ConfigProvider from '../config-provider/ConfigProvider.js';
import '../config-provider/ConfigContext.js';
import PluginContainer from '../common/PluginContainer.js';
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; }
var seed = 0;
var listMap = /* @__PURE__ */new Map();
var NotificationRemoveContext = /*#__PURE__*/React.createContext(noop);
var NotificationList = /*#__PURE__*/forwardRef(function (props, ref) {
var placement = props.placement,
zIndex = props.zIndex,
renderCallback = props.renderCallback;
var _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var _useState = useState([]),
_useState2 = _slicedToArray(_useState, 2),
list = _useState2[0],
setList = _useState2[1];
var remove = function remove(key) {
setList(function (oldList) {
var index = oldList.findIndex(function (item) {
return item.key === key;
});
if (index !== -1) {
var tempList = _toConsumableArray(oldList);
tempList.splice(index, 1);
return _toConsumableArray(tempList);
}
return oldList;
});
};
var calOffset = function calOffset(offset) {
return isNaN(Number(offset)) ? offset : "".concat(offset, "px");
};
var push = function push(theme, options) {
var key = String(seed += 1);
var _ref = _toConsumableArray(options.offset),
horizontal = _ref[0],
vertical = _ref[1];
var horizontalOffset = calOffset(horizontal);
var verticalOffset = calOffset(vertical);
var style = {
top: verticalOffset,
left: horizontalOffset,
marginBottom: 16,
position: "relative"
};
var ref2 = /*#__PURE__*/React.createRef();
setList(function (oldList) {
return [].concat(_toConsumableArray(oldList), [_objectSpread(_objectSpread({}, options), {}, {
key: key,
theme: theme,
style: style,
ref: ref2,
id: key
})]);
});
return new Promise(function (resolve) {
setTimeout(function () {
resolve(ref2.current);
}, 1e3 / 60);
});
};
var removeAll = function removeAll() {
return setList([]);
};
useImperativeHandle(ref, function () {
return {
push: push,
remove: remove,
removeAll: removeAll
};
});
useEffect(function () {
renderCallback({
push: push,
remove: remove,
removeAll: removeAll
});
}, []);
return /* @__PURE__ */React.createElement(NotificationRemoveContext.Provider, {
value: remove
}, /* @__PURE__ */React.createElement("div", {
className: "".concat(classPrefix, "-notification__show--").concat(placement),
style: {
zIndex: zIndex
}
}, list.map(function (props2) {
var _props2$onDurationEnd = props2.onDurationEnd,
_onDurationEnd = _props2$onDurationEnd === void 0 ? noop : _props2$onDurationEnd,
_props2$onCloseBtnCli = props2.onCloseBtnClick,
_onCloseBtnClick = _props2$onCloseBtnCli === void 0 ? noop : _props2$onCloseBtnCli;
return /* @__PURE__ */React.createElement(Notification, _objectSpread(_objectSpread({
ref: props2.ref
}, props2), {}, {
key: props2.key,
onDurationEnd: function onDurationEnd() {
remove(props2.key);
_onDurationEnd();
},
onCloseBtnClick: function onCloseBtnClick(e) {
remove(props2.key);
_onCloseBtnClick(e);
}
}));
})));
});
var renderNotification = false;
var fetchListInstance = function fetchListInstance(placement, attach, zIndex) {
return new Promise(function (resolve) {
function idle() {
if (listMap.has(placement)) {
resolve(listMap.get(placement));
return;
}
if (!renderNotification) {
renderNotification = true;
var nGlobalConfig = ConfigProvider.getGlobalConfig();
render(/* @__PURE__ */React.createElement(PluginContainer, {
globalConfig: nGlobalConfig
}, /* @__PURE__ */React.createElement(NotificationList, {
attach: attach,
placement: placement,
zIndex: Number(zIndex),
renderCallback: function renderCallback(instance) {
renderNotification = false;
listMap.set(placement, instance);
resolve(instance);
}
})), attach);
return;
}
setTimeout(idle, 1e3 / 60);
}
idle();
});
};
var Notification = /*#__PURE__*/forwardRef(function (props, ref) {
var _useDefaultProps = useDefaultProps(props, notificationDefaultProps),
title = _useDefaultProps.title,
content = _useDefaultProps.content,
theme = _useDefaultProps.theme,
icon = _useDefaultProps.icon,
closeBtn = _useDefaultProps.closeBtn,
footer = _useDefaultProps.footer,
duration = _useDefaultProps.duration,
_useDefaultProps$onCl = _useDefaultProps.onCloseBtnClick,
onCloseBtnClick = _useDefaultProps$onCl === void 0 ? noop : _useDefaultProps$onCl,
_useDefaultProps$onDu = _useDefaultProps.onDurationEnd,
onDurationEnd = _useDefaultProps$onDu === void 0 ? noop : _useDefaultProps$onDu,
style = _useDefaultProps.style,
className = _useDefaultProps.className,
id = _useDefaultProps.id;
var _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var baseClassPrefix = "".concat(classPrefix, "-notification");
var _useGlobalIcon = useGlobalIcon({
CloseIcon: CloseIcon,
InfoCircleFilledIcon: InfoCircleFilledIcon,
CheckCircleFilledIcon: CheckCircleFilledIcon
}),
CloseIcon$1 = _useGlobalIcon.CloseIcon,
InfoCircleFilledIcon$1 = _useGlobalIcon.InfoCircleFilledIcon,
CheckCircleFilledIcon$1 = _useGlobalIcon.CheckCircleFilledIcon;
var remove = useContext(NotificationRemoveContext);
React.useImperativeHandle(ref, function () {
return {
close: function close() {
return remove(id);
}
};
});
React.useEffect(function () {
var timer;
if (duration > 0) {
timer = setTimeout(function () {
clearTimeout(timer);
onDurationEnd();
}, duration);
}
return function () {
if (timer) {
clearTimeout(timer);
}
};
}, []);
var renderIcon = function renderIcon() {
if (typeof icon === "boolean" && !icon) {
return null;
}
var IconWrapper = function IconWrapper(_ref) {
var children = _ref.children;
return /* @__PURE__ */React.createElement("div", {
className: "".concat(baseClassPrefix, "__icon")
}, children);
};
if (/*#__PURE__*/React.isValidElement(icon)) {
return /* @__PURE__ */React.createElement(IconWrapper, null, icon);
}
if (theme && theme === "success") {
return /* @__PURE__ */React.createElement(IconWrapper, null, /* @__PURE__ */React.createElement(CheckCircleFilledIcon$1, {
className: "".concat(classPrefix, "-is-success")
}));
}
if (theme && ["info", "warning", "error"].indexOf(theme) >= 0) {
return /* @__PURE__ */React.createElement(IconWrapper, null, /* @__PURE__ */React.createElement(InfoCircleFilledIcon$1, {
className: "".concat(classPrefix, "-is-").concat(theme)
}));
}
return null;
};
var renderCloseBtn = function renderCloseBtn() {
if (typeof closeBtn === "boolean") {
return closeBtn && /* @__PURE__ */React.createElement(CloseIcon$1, {
className: "".concat(baseClassPrefix, "-icon-close"),
onClick: function onClick(e) {
onCloseBtnClick({
e: e
});
}
});
}
return /* @__PURE__ */React.createElement("div", {
className: "".concat(baseClassPrefix, "-close"),
onClick: function onClick(e) {
onCloseBtnClick({
e: e
});
}
}, parseTNode(closeBtn));
};
return /* @__PURE__ */React.createElement("div", {
className: classNames(className, baseClassPrefix, _defineProperty({}, "".concat(baseClassPrefix, "-is-").concat(theme), theme)),
style: style
}, renderIcon(), /* @__PURE__ */React.createElement("div", {
className: "".concat(baseClassPrefix, "__main")
}, /* @__PURE__ */React.createElement("div", {
className: "".concat(baseClassPrefix, "__title__wrap")
}, /* @__PURE__ */React.createElement("span", {
className: "".concat(baseClassPrefix, "__title")
}, title), renderCloseBtn()), content && /* @__PURE__ */React.createElement("div", {
className: "".concat(baseClassPrefix, "__content")
}, parseTNode(content)), footer && /* @__PURE__ */React.createElement("div", {
className: "".concat(baseClassPrefix, "__detail")
}, parseTNode(footer))));
});
Notification.displayName = "Notification";
export { Notification as N, NotificationRemoveContext as a, fetchListInstance as f, listMap as l };
//# sourceMappingURL=dep-6c91801b.js.map