tdesign-react
Version:
TDesign Component for React
267 lines (259 loc) • 12 kB
JavaScript
/**
* tdesign v1.13.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var index = require('../_chunks/dep-a93b6608.js');
var _typeof = require('../_chunks/dep-6d4d8660.js');
var slicedToArray = require('../_chunks/dep-e17e2d31.js');
var defineProperty = require('../_chunks/dep-cc768e34.js');
var core = require('@popperjs/core');
var classNames = require('classnames');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var _util_style = require('../_chunks/dep-3f65dfe7.js');
var _util_listener = require('../_util/listener.js');
var _util_reactRender = require('../_util/react-render.js');
var common_PluginContainer = require('../common/PluginContainer.js');
var configProvider_ConfigProvider = require('../config-provider/ConfigProvider.js');
require('../config-provider/ConfigContext.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var popup_defaultProps = require('./defaultProps.js');
var isString = require('../_chunks/dep-3e2d2665.js');
require('../_chunks/dep-b7d577ac.js');
require('react-dom');
require('../_chunks/dep-ed886f2a.js');
require('../_chunks/dep-aeef4e56.js');
require('../_chunks/dep-07b911d8.js');
require('../_chunks/dep-4b02d669.js');
require('../_chunks/dep-f0379c5f.js');
require('../_chunks/dep-ddacd27a.js');
require('../_chunks/dep-028b759d.js');
require('../_chunks/dep-8a116183.js');
require('../_chunks/dep-4671b9bd.js');
require('../_chunks/dep-bed9d73e.js');
require('../_chunks/dep-780eda7b.js');
require('../_chunks/dep-47bdc05f.js');
require('../_chunks/dep-cab13149.js');
require('../_chunks/dep-a30819a4.js');
require('../_chunks/dep-6a7ba247.js');
require('../_chunks/dep-c87d9752.js');
require('../_chunks/dep-bd956a2d.js');
require('../_chunks/dep-0cdb3286.js');
require('../_chunks/dep-865c186c.js');
require('../_chunks/dep-0c1ca63f.js');
require('../_chunks/dep-fd5d57c1.js');
require('../_chunks/dep-ac2874ce.js');
require('../_chunks/dep-6cfc06a0.js');
require('../_chunks/dep-5d9d080b.js');
require('../_chunks/dep-7da96a57.js');
require('../_chunks/dep-f4e58639.js');
require('../_chunks/dep-781a2854.js');
require('../_chunks/dep-1ef213f8.js');
require('../_chunks/dep-e2c832a5.js');
require('../_chunks/dep-3a869b87.js');
require('../_chunks/dep-ac58e1cc.js');
require('dayjs');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
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 triggers = ["click", "hover", "focus", "context-menu"];
var popperInstance;
var overlayInstance;
var timeout;
var triggerEl;
var componentName = "t-popup";
var triggerType = function triggerType(triggerProps) {
return triggers.reduce(function (map, trigger) {
return _objectSpread(_objectSpread({}, map), {}, defineProperty._defineProperty({}, trigger, triggerProps.includes(trigger)));
}, {});
};
function getPopperPlacement(placement) {
return placement.replace(/-(left|top)$/, "-start").replace(/-(right|bottom)$/, "-end");
}
var Overlay = function Overlay(originalProps) {
var _props$popperOptions;
var props = hooks_useDefaultProps["default"](originalProps, popup_defaultProps.popupDefaultProps);
var trigger = props.trigger,
content = props.content,
showArrow = props.showArrow,
disabled = props.disabled,
overlayInnerClassName = props.overlayInnerClassName,
hideEmptyPopup = props.hideEmptyPopup,
overlayClassName = props.overlayClassName,
overlayStyle = props.overlayStyle,
zIndex = props.zIndex,
overlayInnerStyle = props.overlayInnerStyle,
renderCallback = props.renderCallback;
var _useState = React.useState(false),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
visibleState = _useState2[0],
setVisibleState = _useState2[1];
var popperRef = React.useRef(null);
var overlayRef = React.useRef(null);
var hidePopup = hideEmptyPopup && isString.isString(content) && ["", void 0, null].includes(content);
var stylePopper = function stylePopper() {
var style = {};
if (hidePopup) {
style = {
visibility: "hidden",
pointerEvents: "none"
};
}
return _objectSpread(_objectSpread({}, style), {}, {
zIndex: zIndex
}, overlayStyle);
};
var hasTrigger = React.useMemo(function () {
return triggerType(trigger);
}, [trigger]);
var overlayClasses = React.useMemo(function () {
return ["".concat(componentName, "__content"), defineProperty._defineProperty(defineProperty._defineProperty(defineProperty._defineProperty({}, "".concat(componentName, "__content--text"), content === "string"), "".concat(componentName, "__content--arrow"), showArrow), "".concat(componentName, "-is-disabled"), disabled), overlayInnerClassName];
}, [content, overlayInnerClassName, showArrow, disabled]);
var handleMouseLeave = function handleMouseLeave() {
var _popperInstance;
setVisibleState(false);
removeOverlayInstance();
(_popperInstance = popperInstance) === null || _popperInstance === void 0 || _popperInstance.destroy();
popperInstance = null;
};
var handleMouseEnter = function handleMouseEnter() {
if (timeout) {
clearTimeout(timeout);
}
};
var overlayInnerStyleMerge = function overlayInnerStyleMerge() {
if (!overlayInnerStyle || !triggerEl || !popperRef.current) {
return {};
}
if (_typeof._typeof(overlayInnerStyle) === "object") {
return overlayInnerStyle;
}
return overlayInnerStyle(triggerEl, popperRef.current);
};
React.useLayoutEffect(function () {
setVisibleState(true);
}, []);
var eventProps = hasTrigger.hover && {
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onMouseMove: handleMouseEnter
};
var hasArrowModifier = (_props$popperOptions = props.popperOptions) === null || _props$popperOptions === void 0 || (_props$popperOptions = _props$popperOptions.modifiers) === null || _props$popperOptions === void 0 ? void 0 : _props$popperOptions.some(function (modifier) {
return modifier.name === "arrow";
});
var renderNode = /* @__PURE__ */React__default["default"].createElement("div", _objectSpread({
ref: function ref(_ref2) {
popperRef.current = _ref2;
renderCallback(_ref2);
},
className: classNames__default["default"]([componentName, overlayClassName]),
style: stylePopper()
}, eventProps), /* @__PURE__ */React__default["default"].createElement("div", {
ref: overlayRef,
className: classNames__default["default"](overlayClasses),
style: overlayInnerStyleMerge()
}, content, showArrow && /* @__PURE__ */React__default["default"].createElement("div", _objectSpread({
className: "".concat(componentName, "__arrow")
}, hasArrowModifier && {
"data-popper-arrow": ""
}))));
return visibleState ? /* @__PURE__ */React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
appear: true,
timeout: 0,
"in": visibleState,
nodeRef: popperRef
}, renderNode) : null;
};
function removeOverlayInstance() {
if (overlayInstance) {
_util_reactRender.unmount(overlayInstance);
overlayInstance.remove();
overlayInstance = null;
}
if (popperInstance) {
popperInstance.destroy();
popperInstance = null;
}
}
var renderInstance = function renderInstance(props, attach) {
return new Promise(function (resolve) {
var pGlobalConfig = configProvider_ConfigProvider["default"].getGlobalConfig();
_util_reactRender.render(/* @__PURE__ */React__default["default"].createElement(common_PluginContainer["default"], {
globalConfig: pGlobalConfig
}, /* @__PURE__ */React__default["default"].createElement(Overlay, _objectSpread(_objectSpread({}, props), {}, {
renderCallback: function renderCallback(instance) {
return resolve(instance);
}
}))), attach);
});
};
var createPopupInstance = /*#__PURE__*/function () {
var _ref3 = index._asyncToGenerator(/*#__PURE__*/index.regenerator.mark(function _callee(trigger, content, popupProps) {
var _popupProps$delay, _delay$;
var hasTrigger, currentTriggerEl, attach, delay, closeDelay, popupDom, instance, _mouseoutEvent, _focusoutEvent;
return index.regenerator.wrap(function (_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
hasTrigger = triggerType((popupProps === null || popupProps === void 0 ? void 0 : popupProps.trigger) || "hover");
currentTriggerEl = _util_style.getAttach(trigger);
if (!(triggerEl && hasTrigger.click)) {
_context.next = 1;
break;
}
return _context.abrupt("return");
case 1:
triggerEl = currentTriggerEl;
removeOverlayInstance();
attach = _util_style.getAttach((popupProps === null || popupProps === void 0 ? void 0 : popupProps.attach) || "body");
delay = [].concat((_popupProps$delay = popupProps === null || popupProps === void 0 ? void 0 : popupProps.delay) !== null && _popupProps$delay !== void 0 ? _popupProps$delay : [250, 150]);
closeDelay = (_delay$ = delay[1]) !== null && _delay$ !== void 0 ? _delay$ : delay[0];
if (attach === document.body) {
popupDom = document.createElement("div");
document.body.appendChild(popupDom);
attach = popupDom;
overlayInstance = attach;
}
_context.next = 2;
return renderInstance(_objectSpread({}, _objectSpread(_objectSpread({}, popupProps), {}, {
content: content,
triggerEl: triggerEl
})), attach);
case 2:
instance = _context.sent;
if (hasTrigger.hover) {
_mouseoutEvent = function mouseoutEvent() {
timeout = setTimeout(removeOverlayInstance, closeDelay);
_util_listener.off(triggerEl, "mouseleave", _mouseoutEvent);
};
_util_listener.on(triggerEl, "mouseleave", _mouseoutEvent);
} else if (hasTrigger.focus) {
_focusoutEvent = function focusoutEvent() {
timeout = setTimeout(removeOverlayInstance, closeDelay);
_util_listener.off(triggerEl, "focusout", _focusoutEvent);
};
_util_listener.on(triggerEl, "focusout", _focusoutEvent);
}
popperInstance = core.createPopper(triggerEl, instance, _objectSpread({
placement: getPopperPlacement((popupProps === null || popupProps === void 0 ? void 0 : popupProps.placement) || "top")
}, popupProps === null || popupProps === void 0 ? void 0 : popupProps.popperOptions));
return _context.abrupt("return", popperInstance);
case 3:
case "end":
return _context.stop();
}
}, _callee);
}));
return function createPopupInstance(_x, _x2, _x3) {
return _ref3.apply(this, arguments);
};
}();
var PopupPlugin = function PopupPlugin(trigger, content, popupProps) {
return createPopupInstance(trigger, content, popupProps);
};
exports["default"] = PopupPlugin;
//# sourceMappingURL=PopupPlugin.js.map