tdesign-react
Version:
TDesign Component for React
232 lines (228 loc) • 10.1 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _asyncToGenerator, r as regenerator } from '../_chunks/dep-a74cc5e4.js';
import { _ as _typeof } from '../_chunks/dep-eca3a3de.js';
import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import { createPopper } from '@popperjs/core';
import classNames from 'classnames';
import { isString } from 'lodash-es';
import React, { useState, useRef, useMemo, useLayoutEffect } from 'react';
import { CSSTransition } from 'react-transition-group';
import { b as getAttach } from '../_chunks/dep-3a09424a.js';
import { off, on } from '../_util/listener.js';
import { unmount, render } from '../_util/react-render.js';
import PluginContainer from '../common/PluginContainer.js';
import '../config-provider/index.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import { popupDefaultProps } from './defaultProps.js';
import ConfigProvider from '../config-provider/ConfigProvider.js';
import '../_chunks/dep-e29214cb.js';
import '../_chunks/dep-026a4c6b.js';
import 'react-dom';
import '../config-provider/ConfigContext.js';
import '../locale/zh_CN.js';
import 'dayjs';
import '../_chunks/dep-3c9ab31a.js';
import '../config-provider/type.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 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({}, 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 = useDefaultProps(originalProps, 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 = useState(false),
_useState2 = _slicedToArray(_useState, 2),
visibleState = _useState2[0],
setVisibleState = _useState2[1];
var popperRef = useRef(null);
var overlayRef = useRef(null);
var hidePopup = hideEmptyPopup && 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 = useMemo(function () {
return triggerType(trigger);
}, [trigger]);
var overlayClasses = useMemo(function () {
return ["".concat(componentName, "__content"), _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(overlayInnerStyle) === "object") {
return overlayInnerStyle;
}
return overlayInnerStyle(triggerEl, popperRef.current);
};
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.createElement("div", _objectSpread({
ref: function ref(_ref2) {
popperRef.current = _ref2;
renderCallback(_ref2);
},
className: classNames([componentName, overlayClassName]),
style: stylePopper()
}, eventProps), /* @__PURE__ */React.createElement("div", {
ref: overlayRef,
className: classNames(overlayClasses),
style: overlayInnerStyleMerge()
}, content, showArrow && /* @__PURE__ */React.createElement("div", _objectSpread({
className: "".concat(componentName, "__arrow")
}, hasArrowModifier && {
"data-popper-arrow": ""
}))));
return visibleState ? /* @__PURE__ */React.createElement(CSSTransition, {
appear: true,
timeout: 0,
"in": visibleState,
nodeRef: popperRef
}, renderNode) : null;
};
function removeOverlayInstance() {
if (overlayInstance) {
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.getGlobalConfig();
render(/* @__PURE__ */React.createElement(PluginContainer, {
globalConfig: pGlobalConfig
}, /* @__PURE__ */React.createElement(Overlay, _objectSpread(_objectSpread({}, props), {}, {
renderCallback: function renderCallback(instance) {
return resolve(instance);
}
}))), attach);
});
};
var createPopupInstance = /*#__PURE__*/function () {
var _ref3 = _asyncToGenerator(/*#__PURE__*/regenerator.mark(function _callee(trigger, content, popupProps) {
var _popupProps$delay, _delay$;
var hasTrigger, currentTriggerEl, attach, delay, closeDelay, popupDom, instance, _mouseoutEvent, _focusoutEvent;
return 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 = getAttach(trigger);
if (!(triggerEl && hasTrigger.click)) {
_context.next = 1;
break;
}
return _context.abrupt("return");
case 1:
triggerEl = currentTriggerEl;
removeOverlayInstance();
attach = 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);
off(triggerEl, "mouseleave", _mouseoutEvent);
};
on(triggerEl, "mouseleave", _mouseoutEvent);
} else if (hasTrigger.focus) {
_focusoutEvent = function focusoutEvent() {
timeout = setTimeout(removeOverlayInstance, closeDelay);
off(triggerEl, "focusout", _focusoutEvent);
};
on(triggerEl, "focusout", _focusoutEvent);
}
popperInstance = 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);
};
export { PopupPlugin as default };
//# sourceMappingURL=PopupPlugin.js.map