tdesign-react
Version:
TDesign Component for React
282 lines (274 loc) • 11.6 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
;
var defineProperty = require('./dep-0fe55884.js');
var React = require('react');
var classNames = require('classnames');
var tdesignIconsReact = require('tdesign-icons-react');
var toConsumableArray = require('./dep-a7fe58de.js');
var slicedToArray = require('./dep-5cb0d66d.js');
var _util_reactRender = require('../_util/react-render.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var _util_noop = require('../_util/noop.js');
var _util_parseTNode = require('../_util/parseTNode.js');
var hooks_useGlobalIcon = require('../hooks/useGlobalIcon.js');
var notification_defaultProps = require('../notification/defaultProps.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var configProvider_ConfigProvider = require('../config-provider/ConfigProvider.js');
require('../config-provider/ConfigContext.js');
var common_PluginContainer = require('../common/PluginContainer.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
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._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__default["default"].createContext(_util_noop["default"]);
var NotificationList = /*#__PURE__*/React.forwardRef(function (props, ref) {
var placement = props.placement,
zIndex = props.zIndex,
renderCallback = props.renderCallback;
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var _useState = React.useState([]),
_useState2 = slicedToArray._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._toConsumableArray(oldList);
tempList.splice(index, 1);
return toConsumableArray._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._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__default["default"].createRef();
setList(function (oldList) {
return [].concat(toConsumableArray._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([]);
};
React.useImperativeHandle(ref, function () {
return {
push: push,
remove: remove,
removeAll: removeAll
};
});
React.useEffect(function () {
renderCallback({
push: push,
remove: remove,
removeAll: removeAll
});
}, []);
return /* @__PURE__ */React__default["default"].createElement(NotificationRemoveContext.Provider, {
value: remove
}, /* @__PURE__ */React__default["default"].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 ? _util_noop["default"] : _props2$onDurationEnd,
_props2$onCloseBtnCli = props2.onCloseBtnClick,
_onCloseBtnClick = _props2$onCloseBtnCli === void 0 ? _util_noop["default"] : _props2$onCloseBtnCli;
return /* @__PURE__ */React__default["default"].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_ConfigProvider["default"].getGlobalConfig();
_util_reactRender.render(/* @__PURE__ */React__default["default"].createElement(common_PluginContainer["default"], {
globalConfig: nGlobalConfig
}, /* @__PURE__ */React__default["default"].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__*/React.forwardRef(function (props, ref) {
var _useDefaultProps = hooks_useDefaultProps["default"](props, notification_defaultProps.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 ? _util_noop["default"] : _useDefaultProps$onCl,
_useDefaultProps$onDu = _useDefaultProps.onDurationEnd,
onDurationEnd = _useDefaultProps$onDu === void 0 ? _util_noop["default"] : _useDefaultProps$onDu,
style = _useDefaultProps.style,
className = _useDefaultProps.className,
id = _useDefaultProps.id;
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var baseClassPrefix = "".concat(classPrefix, "-notification");
var _useGlobalIcon = hooks_useGlobalIcon["default"]({
CloseIcon: tdesignIconsReact.CloseIcon,
InfoCircleFilledIcon: tdesignIconsReact.InfoCircleFilledIcon,
CheckCircleFilledIcon: tdesignIconsReact.CheckCircleFilledIcon
}),
CloseIcon = _useGlobalIcon.CloseIcon,
InfoCircleFilledIcon = _useGlobalIcon.InfoCircleFilledIcon,
CheckCircleFilledIcon = _useGlobalIcon.CheckCircleFilledIcon;
var remove = React.useContext(NotificationRemoveContext);
React__default["default"].useImperativeHandle(ref, function () {
return {
close: function close() {
return remove(id);
}
};
});
React__default["default"].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__default["default"].createElement("div", {
className: "".concat(baseClassPrefix, "__icon")
}, children);
};
if (/*#__PURE__*/React__default["default"].isValidElement(icon)) {
return /* @__PURE__ */React__default["default"].createElement(IconWrapper, null, icon);
}
if (theme && theme === "success") {
return /* @__PURE__ */React__default["default"].createElement(IconWrapper, null, /* @__PURE__ */React__default["default"].createElement(CheckCircleFilledIcon, {
className: "".concat(classPrefix, "-is-success")
}));
}
if (theme && ["info", "warning", "error"].indexOf(theme) >= 0) {
return /* @__PURE__ */React__default["default"].createElement(IconWrapper, null, /* @__PURE__ */React__default["default"].createElement(InfoCircleFilledIcon, {
className: "".concat(classPrefix, "-is-").concat(theme)
}));
}
return null;
};
var renderCloseBtn = function renderCloseBtn() {
if (typeof closeBtn === "boolean") {
return closeBtn && /* @__PURE__ */React__default["default"].createElement(CloseIcon, {
className: "".concat(baseClassPrefix, "-icon-close"),
onClick: function onClick(e) {
onCloseBtnClick({
e: e
});
}
});
}
return /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(baseClassPrefix, "-close"),
onClick: function onClick(e) {
onCloseBtnClick({
e: e
});
}
}, _util_parseTNode["default"](closeBtn));
};
return /* @__PURE__ */React__default["default"].createElement("div", {
className: classNames__default["default"](className, baseClassPrefix, defineProperty._defineProperty({}, "".concat(baseClassPrefix, "-is-").concat(theme), theme)),
style: style
}, renderIcon(), /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(baseClassPrefix, "__main")
}, /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(baseClassPrefix, "__title__wrap")
}, /* @__PURE__ */React__default["default"].createElement("span", {
className: "".concat(baseClassPrefix, "__title")
}, title), renderCloseBtn()), content && /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(baseClassPrefix, "__content")
}, _util_parseTNode["default"](content)), footer && /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(baseClassPrefix, "__detail")
}, _util_parseTNode["default"](footer))));
});
Notification.displayName = "Notification";
exports.Notification = Notification;
exports.NotificationRemoveContext = NotificationRemoveContext;
exports.fetchListInstance = fetchListInstance;
exports.listMap = listMap;
//# sourceMappingURL=dep-69fa6a63.js.map