tdesign-react
Version:
TDesign Component for React
263 lines (259 loc) • 11.1 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _defineProperty } from '../_chunks/dep-cb0a3966.js';
import { _ as _slicedToArray } from '../_chunks/dep-48805ab8.js';
import classNames from 'classnames';
import { isFunction, debounce } from 'lodash-es';
import React, { forwardRef, useState, useRef, useEffect, useMemo, useImperativeHandle } from 'react';
import { CSSTransition } from 'react-transition-group';
import { getRefDom } from '../_util/ref.js';
import { g as getCssVarsValue } from '../_chunks/dep-3a09424a.js';
import Portal from '../common/Portal.js';
import useAnimation from '../hooks/useAnimation.js';
import useAttach from '../hooks/useAttach.js';
import useConfig from '../hooks/useConfig.js';
import useControlled from '../hooks/useControlled.js';
import useDefaultProps from '../hooks/useDefaultProps.js';
import useMutationObservable from '../hooks/useMutationObserver.js';
import usePopper from '../hooks/usePopper.js';
import useWindowSize from '../hooks/useWindowSize.js';
import { popupDefaultProps } from './defaultProps.js';
import useTrigger from './hooks/useTrigger.js';
import { getTransitionParams } from './utils/transition.js';
import '../_chunks/dep-eca3a3de.js';
import '../_chunks/dep-026a4c6b.js';
import 'react-is';
import '../_util/isFragment.js';
import 'react-dom';
import '../hooks/useLayoutEffect.js';
import '../config-provider/ConfigContext.js';
import '../locale/zh_CN.js';
import '../_chunks/dep-e29214cb.js';
import 'dayjs';
import '../_chunks/dep-3c9ab31a.js';
import '../_util/noop.js';
import '../hooks/useLatest.js';
import '../_chunks/dep-87d110df.js';
import '@popperjs/core';
import 'react-fast-compare';
import '../_util/composeRefs.js';
import '../_util/listener.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 Popup = /*#__PURE__*/forwardRef(function (originalProps, ref) {
var _popperOptions$modifi;
var props = useDefaultProps(originalProps, 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 = useConfig(),
classPrefix = _useConfig.classPrefix;
var popupAttach = useAttach("popup", attach);
var _useAnimation = useAnimation(),
keepExpand = _useAnimation.keepExpand,
keepFade = _useAnimation.keepFade;
var _useWindowSize = useWindowSize(),
windowHeight = _useWindowSize.height,
windowWidth = _useWindowSize.width;
var _useControlled = useControlled(props, "visible", props.onVisibleChange),
_useControlled2 = _slicedToArray(_useControlled, 2),
visible = _useControlled2[0],
onVisibleChange = _useControlled2[1];
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
popupElement = _useState2[0],
setPopupElement = _useState2[1];
var triggerRef = useRef(null);
var popupRef = useRef(null);
var portalRef = useRef(null);
var contentRef = useRef(null);
var popperRef = useRef(null);
var DEFAULT_TRANSITION_TIMEOUT = 180;
useEffect(function () {
if (!content && hideEmptyPopup) {
requestAnimationFrame(function () {
return setPopupElement(null);
});
}
}, [content, hideEmptyPopup]);
var showOverlay = useMemo(function () {
if (hideEmptyPopup && !content) return false;
return visible || popupElement;
}, [hideEmptyPopup, content, visible, popupElement]);
var popperPlacement = useMemo(function () {
return placement.replace(/-(left|top)$/, "-start").replace(/-(right|bottom)$/, "-end");
}, [placement]);
var _useTrigger = useTrigger({
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 = usePopper(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(children) ? getTriggerNode(children({
visible: visible
})) : getTriggerNode(children);
var updateTimeRef = useRef(null);
useMutationObservable(getRefDom(triggerRef), function () {
var isDisplayNone = getCssVarsValue("display", 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);
}
});
useEffect(function () {
return function () {
return clearTimeout(updateTimeRef.current);
};
}, []);
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]);
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(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 (getRefDom(triggerRef) && popupRef.current && typeof overlayStyle2 === "function") {
return _objectSpread({}, overlayStyle2(getRefDom(triggerRef), popupRef.current));
}
return _objectSpread({}, overlayStyle2);
}
var overlay = showOverlay && /* @__PURE__ */React.createElement(CSSTransition, {
appear: true,
"in": visible,
timeout: DEFAULT_TRANSITION_TIMEOUT,
nodeRef: portalRef,
unmountOnExit: destroyOnClose,
onEnter: handleEnter,
onExited: handleExited
}, /* @__PURE__ */React.createElement(Portal, {
triggerNode: getRefDom(triggerRef),
attach: popupAttach,
ref: portalRef
}, /* @__PURE__ */React.createElement(CSSTransition, _objectSpread({
appear: true,
timeout: 0,
"in": visible,
nodeRef: popupRef
}, getTransitionParams({
classPrefix: classPrefix,
fadeAnimation: keepFade,
expandAnimation: expandAnimation && keepExpand
})), /* @__PURE__ */React.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("".concat(classPrefix, "-popup"), overlayClassName)
}, attributes.popper), getPopupProps()), /* @__PURE__ */React.createElement("div", {
ref: contentRef,
className: classNames("".concat(classPrefix, "-popup__content"), _defineProperty({}, "".concat(classPrefix, "-popup__content--arrow"), showArrow), overlayInnerClassName),
style: getOverlayStyle(overlayInnerStyle),
onScroll: handleScroll
}, content, showArrow && /* @__PURE__ */React.createElement("div", _objectSpread({
style: styles.arrow,
className: "".concat(classPrefix, "-popup__arrow")
}, hasArrowModifier && {
"data-popper-arrow": ""
})))))));
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.createElement(React.Fragment, null, triggerNode, overlay);
});
Popup.displayName = "Popup";
export { Popup as default };
//# sourceMappingURL=Popup.js.map