tdesign-react
Version:
TDesign Component for React
263 lines (259 loc) • 11.5 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _asyncToGenerator, r as regenerator } from '../_chunks/dep-4f115c18.js';
import { _ as _typeof } from '../_chunks/dep-8abcbcbc.js';
import { _ as _slicedToArray } from '../_chunks/dep-10d5731f.js';
import { _ as _defineProperty } from '../_chunks/dep-d67deb2c.js';
import React, { useState, useRef, useMemo, useLayoutEffect } from 'react';
import { CSSTransition } from 'react-transition-group';
import { createPopper } from '@popperjs/core';
import classNames from 'classnames';
import { isString } from 'lodash-es';
import { b as getAttach } from '../_chunks/dep-ca8d3fa0.js';
import { on, off } from '../_util/listener.js';
import { unmount, render } from '../_util/react-render.js';
import PluginContainer from '../common/PluginContainer.js';
import ConfigProvider from '../config-provider/ConfigProvider.js';
import '../config-provider/ConfigContext.js';
import useConfig from '../hooks/useConfig.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import { popupDefaultProps } from './defaultProps.js';
import '../_chunks/dep-74a10cfb.js';
import 'react-dom';
import '../_chunks/dep-6b235a32.js';
import '../_chunks/dep-b9afa32b.js';
import 'dayjs';
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 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 = 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 _useConfig = useConfig(),
classPrefix = _useConfig.classPrefix;
var componentName = "".concat(classPrefix, "-popup");
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];
}, [componentName, content, showArrow, disabled, overlayInnerClassName]);
var popperOptions = useMemo(function () {
var _baseOptions$modifier;
var baseOptions = _objectSpread({}, props.popperOptions);
var modifiers = ((_baseOptions$modifier = baseOptions.modifiers) === null || _baseOptions$modifier === void 0 ? void 0 : _baseOptions$modifier.slice()) || [];
var hasArrowModifier = modifiers.some(function (m) {
return m.name === "arrow";
});
if (showArrow && !hasArrowModifier) {
modifiers.unshift({
name: "arrow"
});
}
return _objectSpread(_objectSpread({}, baseOptions), {}, {
modifiers: modifiers
});
}, [props.popperOptions, showArrow]);
var arrowModifierEnabled = useMemo(function () {
var _popperOptions$modifi;
var arrowModifier = (_popperOptions$modifi = popperOptions.modifiers) === null || _popperOptions$modifi === void 0 ? void 0 : _popperOptions$modifi.find(function (m) {
return m.name === "arrow";
});
return arrowModifier && arrowModifier.enabled !== false;
}, [popperOptions]);
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 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")
}, arrowModifierEnabled && {
"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$, _baseOptions$modifier2;
var hasTrigger, currentTriggerEl, attach, delay, closeDelay, popupDom, instance, _mouseoutEvent, _focusoutEvent, baseOptions, modifiers, hasArrowModifier;
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);
}
baseOptions = _objectSpread({}, popupProps === null || popupProps === void 0 ? void 0 : popupProps.popperOptions);
modifiers = ((_baseOptions$modifier2 = baseOptions.modifiers) === null || _baseOptions$modifier2 === void 0 ? void 0 : _baseOptions$modifier2.slice()) || [];
hasArrowModifier = modifiers.some(function (m) {
return m.name === "arrow";
});
if (popupProps !== null && popupProps !== void 0 && popupProps.showArrow && !hasArrowModifier) {
modifiers.unshift({
name: "arrow"
});
}
popperInstance = createPopper(triggerEl, instance, _objectSpread(_objectSpread({
placement: getPopperPlacement((popupProps === null || popupProps === void 0 ? void 0 : popupProps.placement) || "top")
}, baseOptions), {}, {
modifiers: modifiers
}));
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