tdesign-react
Version:
TDesign Component for React
308 lines (300 loc) • 13.6 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-0006fcfa.js');
var slicedToArray = require('../_chunks/dep-8e4d656d.js');
var classNames = require('classnames');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var _util_ref = require('../_util/ref.js');
var _util_style = require('../_chunks/dep-381fa848.js');
var common_Portal = require('../common/Portal.js');
var hooks_useAnimation = require('../hooks/useAnimation.js');
var hooks_useAttach = require('../hooks/useAttach.js');
var hooks_useConfig = require('../hooks/useConfig.js');
var hooks_useControlled = require('../hooks/useControlled.js');
var hooks_useDefaultProps = require('../hooks/useDefaultProps.js');
var hooks_useMutationObserver = require('../hooks/useMutationObserver.js');
var hooks_usePopper = require('../hooks/usePopper.js');
var hooks_useWindowSize = require('../hooks/useWindowSize.js');
var popup_defaultProps = require('./defaultProps.js');
var popup_hooks_useTrigger = require('./hooks/useTrigger.js');
var popup_utils_transition = require('./utils/transition.js');
var isFunction = require('../_chunks/dep-ec8d2dca.js');
var debounce = require('../_chunks/dep-a231fdc5.js');
require('../_chunks/dep-667ac7af.js');
require('../_chunks/dep-00b49251.js');
require('react-is');
require('../_util/isFragment.js');
require('../_chunks/dep-4ed9eda4.js');
require('../_chunks/dep-25585736.js');
require('../_chunks/dep-64577888.js');
require('../_chunks/dep-62e73936.js');
require('react-dom');
require('../hooks/useLayoutEffect.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-1df1dad8.js');
require('../_chunks/dep-5b5ab11b.js');
require('dayjs');
require('../_chunks/dep-f32c03f1.js');
require('../_chunks/dep-31c4bc3d.js');
require('../_chunks/dep-eea2872a.js');
require('../_chunks/dep-71455db7.js');
require('../_chunks/dep-9e5a468d.js');
require('../_chunks/dep-f26edb7b.js');
require('../_chunks/dep-f33c1939.js');
require('../_chunks/dep-21ece627.js');
require('../_chunks/dep-25e4aa84.js');
require('../_chunks/dep-fc596d16.js');
require('../_chunks/dep-e1fbe1c3.js');
require('../_chunks/dep-df2b541f.js');
require('../_chunks/dep-edd366db.js');
require('../_chunks/dep-a56c4939.js');
require('../_chunks/dep-6c297e20.js');
require('../_chunks/dep-b7ad4d54.js');
require('../_chunks/dep-a2cb9299.js');
require('../_chunks/dep-f981815b.js');
require('../_util/noop.js');
require('../_chunks/dep-66114ce9.js');
require('../_chunks/dep-62d1dd66.js');
require('../_chunks/dep-7a148045.js');
require('../_chunks/dep-255ceed8.js');
require('../_chunks/dep-79629634.js');
require('../hooks/useLatest.js');
require('../_chunks/dep-eb6d55c1.js');
require('../_chunks/dep-014b9b78.js');
require('../_chunks/dep-abdd786a.js');
require('../_chunks/dep-3d4656ee.js');
require('../_chunks/dep-0ffc9d96.js');
require('../_chunks/dep-efe6d243.js');
require('../_chunks/dep-4b18243f.js');
require('../_chunks/dep-bff2c990.js');
require('../_chunks/dep-e4e1901e.js');
require('@popperjs/core');
require('react-fast-compare');
require('../_util/composeRefs.js');
require('../_util/listener.js');
require('../_chunks/dep-cf14666e.js');
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 Popup = /*#__PURE__*/React.forwardRef(function (originalProps, ref) {
var _popperOptions$modifi;
var props = hooks_useDefaultProps["default"](originalProps, popup_defaultProps.popupDefaultProps);
var trigger = props.trigger,
content = props.content,
placement = props.placement,
attach = props.attach,
showArrow = props.showArrow,
destroyOnClose = props.destroyOnClose,
overlayClassName = props.overlayClassName,
overlayInnerClassName = props.overlayInnerClassName,
overlayStyle = props.overlayStyle,
overlayInnerStyle = props.overlayInnerStyle,
triggerElement = props.triggerElement,
_props$children = props.children,
children = _props$children === void 0 ? triggerElement : _props$children,
disabled = props.disabled,
zIndex = props.zIndex,
onScroll = props.onScroll,
onScrollToBottom = props.onScrollToBottom,
expandAnimation = props.expandAnimation,
delay = props.delay,
hideEmptyPopup = props.hideEmptyPopup,
updateScrollTop = props.updateScrollTop;
var _useConfig = hooks_useConfig["default"](),
classPrefix = _useConfig.classPrefix;
var popupAttach = hooks_useAttach["default"]("popup", attach);
var _useAnimation = hooks_useAnimation["default"](),
keepExpand = _useAnimation.keepExpand,
keepFade = _useAnimation.keepFade;
var _useWindowSize = hooks_useWindowSize["default"](),
windowHeight = _useWindowSize.height,
windowWidth = _useWindowSize.width;
var _useControlled = hooks_useControlled["default"](props, "visible", props.onVisibleChange),
_useControlled2 = slicedToArray._slicedToArray(_useControlled, 2),
visible = _useControlled2[0],
onVisibleChange = _useControlled2[1];
var _useState = React.useState(null),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
popupElement = _useState2[0],
setPopupElement = _useState2[1];
var triggerRef = React.useRef(null);
var popupRef = React.useRef(null);
var portalRef = React.useRef(null);
var contentRef = React.useRef(null);
var popperRef = React.useRef(null);
var DEFAULT_TRANSITION_TIMEOUT = 180;
React.useEffect(function () {
if (!content && hideEmptyPopup) {
requestAnimationFrame(function () {
return setPopupElement(null);
});
}
}, [content, hideEmptyPopup]);
var showOverlay = React.useMemo(function () {
if (hideEmptyPopup && !content) return false;
return visible || popupElement;
}, [hideEmptyPopup, content, visible, popupElement]);
var popperPlacement = React.useMemo(function () {
return placement.replace(/-(left|top)$/, "-start").replace(/-(right|bottom)$/, "-end");
}, [placement]);
var _useTrigger = popup_hooks_useTrigger["default"]({
triggerRef: triggerRef,
content: content,
disabled: disabled,
trigger: trigger,
visible: visible,
delay: delay,
onVisibleChange: onVisibleChange
}),
getTriggerNode = _useTrigger.getTriggerNode,
getPopupProps = _useTrigger.getPopupProps,
getTriggerDom = _useTrigger.getTriggerDom;
var popperOptions = props.popperOptions;
popperRef.current = hooks_usePopper["default"](_util_ref.getRefDom(triggerRef), popupElement, _objectSpread({
placement: popperPlacement
}, popperOptions));
var hasArrowModifier = popperOptions === null || popperOptions === void 0 || (_popperOptions$modifi = popperOptions.modifiers) === null || _popperOptions$modifi === void 0 ? void 0 : _popperOptions$modifi.some(function (modifier) {
return modifier.name === "arrow";
});
var _popperRef$current = popperRef.current,
styles = _popperRef$current.styles,
attributes = _popperRef$current.attributes;
var triggerNode = isFunction.isFunction(children) ? getTriggerNode(children({
visible: visible
})) : getTriggerNode(children);
var updateTimeRef = React.useRef(null);
hooks_useMutationObserver["default"](_util_ref.getRefDom(triggerRef), function () {
var isDisplayNone = _util_style.getCssVarsValue("display", _util_ref.getRefDom(triggerRef)) === "none";
if (visible && !isDisplayNone) {
clearTimeout(updateTimeRef.current);
updateTimeRef.current = setTimeout(function () {
var _popperRef$current2, _popperRef$current2$u;
return (_popperRef$current2 = popperRef.current) === null || _popperRef$current2 === void 0 || (_popperRef$current2$u = _popperRef$current2.update) === null || _popperRef$current2$u === void 0 ? void 0 : _popperRef$current2$u.call(_popperRef$current2);
}, 0);
}
});
React.useEffect(function () {
return function () {
return clearTimeout(updateTimeRef.current);
};
}, []);
React.useEffect(function () {
if (visible) {
requestAnimationFrame(function () {
var _popperRef$current3, _popperRef$current3$u;
return (_popperRef$current3 = popperRef.current) === null || _popperRef$current3 === void 0 || (_popperRef$current3$u = _popperRef$current3.update) === null || _popperRef$current3$u === void 0 ? void 0 : _popperRef$current3$u.call(_popperRef$current3);
});
}
}, [visible, content, windowHeight, windowWidth]);
React.useEffect(function () {
if (!triggerRef.current) triggerRef.current = getTriggerDom();
if (visible) {
updateScrollTop === null || updateScrollTop === void 0 || updateScrollTop(contentRef.current);
}
}, [visible, updateScrollTop, getTriggerDom]);
function handleExited() {
!destroyOnClose && popupElement && (popupElement.style.display = "none");
}
function handleEnter() {
!destroyOnClose && popupElement && (popupElement.style.display = "block");
}
function handleScroll(e) {
onScroll === null || onScroll === void 0 || onScroll({
e: e
});
var debounceOnScrollBottom = debounce.debounce(function (e2) {
return onScrollToBottom === null || onScrollToBottom === void 0 ? void 0 : onScrollToBottom({
e: e2
});
}, 100);
var _e$target = e.target,
scrollTop = _e$target.scrollTop,
clientHeight = _e$target.clientHeight,
scrollHeight = _e$target.scrollHeight;
if (clientHeight + Math.floor(scrollTop) === scrollHeight) {
debounceOnScrollBottom(e);
}
}
function getOverlayStyle(overlayStyle2) {
if (_util_ref.getRefDom(triggerRef) && popupRef.current && typeof overlayStyle2 === "function") {
return _objectSpread({}, overlayStyle2(_util_ref.getRefDom(triggerRef), popupRef.current));
}
return _objectSpread({}, overlayStyle2);
}
var overlay = showOverlay && /* @__PURE__ */React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
appear: true,
"in": visible,
timeout: DEFAULT_TRANSITION_TIMEOUT,
nodeRef: portalRef,
unmountOnExit: destroyOnClose,
onEnter: handleEnter,
onExited: handleExited
}, /* @__PURE__ */React__default["default"].createElement(common_Portal["default"], {
triggerNode: _util_ref.getRefDom(triggerRef),
attach: popupAttach,
ref: portalRef
}, /* @__PURE__ */React__default["default"].createElement(reactTransitionGroup.CSSTransition, _objectSpread({
appear: true,
timeout: 0,
"in": visible,
nodeRef: popupRef
}, popup_utils_transition.getTransitionParams({
classPrefix: classPrefix,
fadeAnimation: keepFade,
expandAnimation: expandAnimation && keepExpand
})), /* @__PURE__ */React__default["default"].createElement("div", _objectSpread(_objectSpread({
ref: function ref(node) {
if (node) {
popupRef.current = node;
setPopupElement(node);
}
},
style: _objectSpread(_objectSpread({}, styles.popper), {}, {
zIndex: zIndex
}, getOverlayStyle(overlayStyle)),
className: classNames__default["default"]("".concat(classPrefix, "-popup"), overlayClassName)
}, attributes.popper), getPopupProps()), /* @__PURE__ */React__default["default"].createElement("div", {
ref: contentRef,
className: classNames__default["default"]("".concat(classPrefix, "-popup__content"), defineProperty._defineProperty({}, "".concat(classPrefix, "-popup__content--arrow"), showArrow), overlayInnerClassName),
style: getOverlayStyle(overlayInnerStyle),
onScroll: handleScroll
}, content, showArrow && /* @__PURE__ */React__default["default"].createElement("div", _objectSpread({
style: styles.arrow,
className: "".concat(classPrefix, "-popup__arrow")
}, hasArrowModifier && {
"data-popper-arrow": ""
})))))));
React.useImperativeHandle(ref, function () {
return {
getPopper: function getPopper() {
return popperRef.current;
},
getPopupElement: function getPopupElement() {
return popupRef.current;
},
getPortalElement: function getPortalElement() {
return portalRef.current;
},
getPopupContentElement: function getPopupContentElement() {
return contentRef.current;
},
setVisible: function setVisible(visible2) {
return onVisibleChange(visible2, {
trigger: "document"
});
}
};
});
return /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, triggerNode, overlay);
});
Popup.displayName = "Popup";
exports["default"] = Popup;
//# sourceMappingURL=Popup.js.map