tdesign-react
Version:
TDesign Component for React
228 lines (220 loc) • 10 kB
JavaScript
/**
* tdesign v1.11.6
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var index = require('../_chunks/dep-e9660f30.js');
var _typeof = require('../_chunks/dep-5b35215f.js');
var slicedToArray = require('../_chunks/dep-48e1db8c.js');
var defineProperty = require('../_chunks/dep-56a79f9c.js');
var React = require('react');
var core = require('@popperjs/core');
var classNames = require('classnames');
var reactTransitionGroup = require('react-transition-group');
var _util_reactRender = require('../_util/react-render.js');
var _util_dom = require('../_util/dom.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var popup_defaultProps = require('./defaultProps.js');
var isString = require('../_chunks/dep-3c8023f1.js');
require('../_chunks/dep-6b4846c3.js');
require('react-dom');
require('raf');
require('../_util/easing.js');
require('../_chunks/dep-6e34d7d7.js');
require('../_chunks/dep-ec3beb8d.js');
require('../_chunks/dep-d45b3350.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 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 = 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();
var overlayRef = React.useRef();
var hidePopup = hideEmptyPopup && isString.isString(content) && ["", void 0, null].includes(content);
var stylePoper = function stylePoper() {
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 renderNode = /* @__PURE__ */React__default["default"].createElement("div", _objectSpread({
ref: function ref(_ref2) {
popperRef.current = _ref2;
renderCallback(_ref2);
},
className: classNames__default["default"]([componentName, overlayClassName]),
style: stylePoper()
}, eventProps), /* @__PURE__ */React__default["default"].createElement("div", {
ref: overlayRef,
className: classNames__default["default"](overlayClasses),
style: overlayInnerStyleMerge()
}, content, showArrow && /* @__PURE__ */React__default["default"].createElement("div", {
className: "".concat(componentName, "__arrow"),
"data-popper-arrow": true
})));
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) {
_util_reactRender.render(/* @__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 _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
hasTrigger = triggerType((popupProps === null || popupProps === void 0 ? void 0 : popupProps.trigger) || "hover");
currentTriggerEl = _util_dom.getAttach(trigger);
if (!(triggerEl && hasTrigger.click)) {
_context.next = 4;
break;
}
return _context.abrupt("return");
case 4:
triggerEl = currentTriggerEl;
removeOverlayInstance();
attach = _util_dom.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 = 12;
return renderInstance(_objectSpread({}, _objectSpread(_objectSpread({}, popupProps), {}, {
content: content,
triggerEl: triggerEl
})), attach);
case 12:
instance = _context.sent;
if (hasTrigger.hover) {
_mouseoutEvent = function mouseoutEvent() {
timeout = setTimeout(removeOverlayInstance, closeDelay);
_util_dom.off(triggerEl, "mouseleave", _mouseoutEvent);
};
_util_dom.on(triggerEl, "mouseleave", _mouseoutEvent);
} else if (hasTrigger.focus) {
_focusoutEvent = function focusoutEvent() {
timeout = setTimeout(removeOverlayInstance, closeDelay);
_util_dom.off(triggerEl, "focusout", _focusoutEvent);
};
_util_dom.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 16:
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