tdesign-react
Version:
TDesign Component for React
298 lines (290 loc) • 13.4 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var index = require('../_chunks/dep-e88f025c.js');
var _typeof = require('../_chunks/dep-b325182b.js');
var slicedToArray = require('../_chunks/dep-5cb0d66d.js');
var defineProperty = require('../_chunks/dep-0fe55884.js');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var core = require('@popperjs/core');
var classNames = require('classnames');
var _util_style = require('../_chunks/dep-e0735b5f.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_useConfig = require('../hooks/useConfig.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var popup_defaultProps = require('./defaultProps.js');
var isString = require('../_chunks/dep-b304bc94.js');
require('../_chunks/dep-737b8bd8.js');
require('react-dom');
require('../_chunks/dep-542bd26e.js');
require('../_chunks/dep-c89d3d1e.js');
require('../_chunks/dep-474eb386.js');
require('../_chunks/dep-3b256bc0.js');
require('../_chunks/dep-4ce0670e.js');
require('../_chunks/dep-3448f35f.js');
require('../_chunks/dep-b6a3ada9.js');
require('../_chunks/dep-967e785f.js');
require('../_chunks/dep-5c8525ea.js');
require('../_chunks/dep-735cd5b9.js');
require('../_chunks/dep-bdafd287.js');
require('../_chunks/dep-4d300b8f.js');
require('../_chunks/dep-3332ad6f.js');
require('../_chunks/dep-98783318.js');
require('../_chunks/dep-fc884a8e.js');
require('../_chunks/dep-008b21d4.js');
require('../_chunks/dep-9193eded.js');
require('../_chunks/dep-afe817f9.js');
require('../_chunks/dep-e018b522.js');
require('../_chunks/dep-7f4d0687.js');
require('../_chunks/dep-b23d5e45.js');
require('../_chunks/dep-481a1ecc.js');
require('../_chunks/dep-0b70c7ec.js');
require('../_chunks/dep-a1e3e59b.js');
require('../_chunks/dep-24ab8f68.js');
require('../_chunks/dep-753b7d52.js');
require('../_chunks/dep-17dea53e.js');
require('../_chunks/dep-a0cbf081.js');
require('dayjs');
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 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 _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var componentName = "".concat(classPrefix, "-popup");
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];
}, [componentName, content, showArrow, disabled, overlayInnerClassName]);
var popperOptions = React.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 = React.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._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: 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")
}, arrowModifierEnabled && {
"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$, _baseOptions$modifier2;
var hasTrigger, currentTriggerEl, attach, delay, closeDelay, popupDom, instance, _mouseoutEvent, _focusoutEvent, baseOptions, modifiers, hasArrowModifier;
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);
}
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 = core.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);
};
exports["default"] = PopupPlugin;
//# sourceMappingURL=PopupPlugin.js.map