tdesign-react
Version:
TDesign Component for React
421 lines (413 loc) • 17.6 kB
JavaScript
/**
* tdesign v1.16.2
* (c) 2025 tdesign
* @license MIT
*/
;
Object.defineProperty(exports, '__esModule', { value: true });
var defineProperty = require('../_chunks/dep-0fe55884.js');
var slicedToArray = require('../_chunks/dep-5cb0d66d.js');
var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var classNames = require('classnames');
var _util_style = require('../_chunks/dep-e0735b5f.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-967e785f.js');
var debounce = require('../_chunks/dep-de1ebf3f.js');
require('../_chunks/dep-b325182b.js');
require('../_chunks/dep-737b8bd8.js');
require('../_chunks/dep-b304bc94.js');
require('../_chunks/dep-4ce0670e.js');
require('../_chunks/dep-bdafd287.js');
require('../_chunks/dep-3448f35f.js');
require('react-dom');
require('../hooks/useLayoutEffect.js');
require('../config-provider/ConfigContext.js');
require('../_chunks/dep-17dea53e.js');
require('../_chunks/dep-a0cbf081.js');
require('dayjs');
require('../_chunks/dep-481a1ecc.js');
require('../_chunks/dep-474eb386.js');
require('../_chunks/dep-3b256bc0.js');
require('../_chunks/dep-b6a3ada9.js');
require('../_chunks/dep-735cd5b9.js');
require('../_chunks/dep-4d300b8f.js');
require('../_chunks/dep-3332ad6f.js');
require('../_chunks/dep-98783318.js');
require('../_chunks/dep-5c8525ea.js');
require('../_chunks/dep-fc884a8e.js');
require('../_chunks/dep-008b21d4.js');
require('../_chunks/dep-9193eded.js');
require('../_chunks/dep-afe817f9.js');
require('../_chunks/dep-0b70c7ec.js');
require('../_chunks/dep-a1e3e59b.js');
require('../_chunks/dep-24ab8f68.js');
require('../_chunks/dep-753b7d52.js');
require('../_util/noop.js');
require('../_chunks/dep-908ffaed.js');
require('../_chunks/dep-a76ede3e.js');
require('../_chunks/dep-2ad01263.js');
require('../_chunks/dep-7659797a.js');
require('../_chunks/dep-eb2203ae.js');
require('../hooks/useLatest.js');
require('../_chunks/dep-1b7ce2a3.js');
require('../_chunks/dep-625279d1.js');
require('../_chunks/dep-4f4b2eb1.js');
require('../_chunks/dep-e018b522.js');
require('../_chunks/dep-7f4d0687.js');
require('../_chunks/dep-b23d5e45.js');
require('../_chunks/dep-a7fe58de.js');
require('react-fast-compare');
require('@popperjs/core');
require('../_util/listener.js');
require('../_util/ref.js');
require('react-is');
require('../_util/isFragment.js');
require('../_chunks/dep-ff8b8704.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 DEFAULT_TRANSITION_TIMEOUT = 180;
var ARROW_WIDTH = 8;
var ARROW_HEIGHT = 8;
var Popup = /*#__PURE__*/React.forwardRef(function (originalProps, ref) {
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,
popperOptions = props.popperOptions,
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(false),
_useState2 = slicedToArray._slicedToArray(_useState, 2),
isOverlayHover = _useState2[0],
setIsOverlayHover = _useState2[1];
var _useState3 = React.useState(null),
_useState4 = slicedToArray._slicedToArray(_useState3, 2),
popupElement = _useState4[0],
setPopupElement = _useState4[1];
var _useState5 = React.useState({}),
_useState6 = slicedToArray._slicedToArray(_useState5, 2),
arrowStyle = _useState6[0],
setArrowStyle = _useState6[1];
var popupRef = React.useRef(null);
var portalRef = React.useRef(null);
var contentRef = React.useRef(null);
var popperRef = React.useRef(null);
var arrowRef = React.useRef(null);
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"]({
triggerElement: triggerElement,
content: content,
disabled: disabled,
trigger: trigger,
visible: visible,
delay: delay,
onVisibleChange: onVisibleChange
}),
triggerElementIsString = _useTrigger.triggerElementIsString,
getTriggerElement = _useTrigger.getTriggerElement,
getTriggerNode = _useTrigger.getTriggerNode,
getPopupProps = _useTrigger.getPopupProps;
var triggerEl = getTriggerElement();
var arrowModifierEnabled = React.useMemo(function () {
var _popperOptions$modifi;
var arrowModifier = popperOptions === null || popperOptions === void 0 || (_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]);
popperRef.current = hooks_usePopper["default"](triggerEl, popupElement, _objectSpread({
placement: popperPlacement
}, popperOptions));
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"](triggerEl, function () {
var isDisplayNone = _util_style.getCssVarsValue("display", triggerEl) === "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);
};
}, []);
var calculateArrowStyle = function calculateArrowStyle() {
if (!triggerEl || !popupElement || !showArrow) return {};
var triggerRect = triggerEl.getBoundingClientRect();
var popupRect = popupElement.getBoundingClientRect();
var inRange = function inRange(value, min, max) {
return value >= min && value <= max;
};
if (placement.startsWith("top") || placement.startsWith("bottom")) {
var offsetLeft = Math.abs(triggerRect.left + triggerRect.width / 2 - popupRect.left);
var popupWidth = popupElement.offsetWidth || popupElement.clientWidth;
var maxPopupOffsetLeft = popupWidth - ARROW_WIDTH / 2;
var minPopupOffsetLeft = ARROW_WIDTH + ARROW_WIDTH / 2;
if (inRange(offsetLeft, 0, popupWidth)) {
return {
left: "".concat(Math.max(minPopupOffsetLeft, Math.min(maxPopupOffsetLeft, offsetLeft)) - ARROW_WIDTH / 2, "px"),
marginLeft: 0
};
}
return {};
}
var offsetTop = triggerRect.top + triggerRect.height / 2 - popupRect.top;
var popupHeight = popupElement.offsetHeight || popupElement.clientHeight;
var maxPopupOffsetTop = popupHeight - ARROW_HEIGHT;
var minPopupOffsetTop = ARROW_HEIGHT;
if (inRange(offsetTop, 0, popupHeight)) {
return {
top: "".concat(Math.max(minPopupOffsetTop, Math.min(maxPopupOffsetTop, offsetTop)) - ARROW_HEIGHT / 2, "px"),
marginTop: 0
};
}
return {};
};
var updateArrowPosition = function updateArrowPosition() {
if (visible && popupElement && showArrow) {
var newArrowStyle = calculateArrowStyle();
setArrowStyle(newArrowStyle);
}
};
React.useEffect(function () {
if (visible) {
requestAnimationFrame(function () {
var _popperRef$current3, _popperRef$current3$u;
(_popperRef$current3 = popperRef.current) === null || _popperRef$current3 === void 0 || (_popperRef$current3$u = _popperRef$current3.update) === null || _popperRef$current3$u === void 0 || _popperRef$current3$u.call(_popperRef$current3);
});
}
}, [visible, content, windowHeight, windowWidth]);
React.useEffect(function () {
if (visible && popupElement) {
updateScrollTop === null || updateScrollTop === void 0 || updateScrollTop(contentRef.current);
updateArrowPosition();
}
}, [visible, popupElement, updateScrollTop]);
function handleExited() {
setIsOverlayHover(false);
!destroyOnClose && popupElement && (popupElement.style.display = "none");
}
function handleEnter() {
setIsOverlayHover(true);
!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 (triggerEl && popupRef.current && typeof overlayStyle2 === "function") {
return _objectSpread({}, overlayStyle2(triggerEl, 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"], {
ref: portalRef,
triggerNode: triggerEl,
attach: popupAttach,
style: {
position: "absolute",
top: 0,
left: 0,
width: "100%"
}
}, /* @__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), {}, {
onClick: function onClick(e) {
var _props$onOverlayClick;
return (_props$onOverlayClick = props.onOverlayClick) === null || _props$onOverlayClick === void 0 ? void 0 : _props$onOverlayClick.call(props, {
e: e
});
}
}, 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({
ref: arrowRef,
style: _objectSpread(_objectSpread({}, styles.arrow), arrowStyle),
className: "".concat(classPrefix, "-popup__arrow")
}, arrowModifierEnabled && {
"data-popper-arrow": ""
})))))));
function updatePopper() {
var popper = popperRef.current;
if (!popper || !visible) return;
try {
var root = triggerEl === null || triggerEl === void 0 ? void 0 : triggerEl.getRootNode();
if (root && root instanceof ShadowRoot) {
if (popper.state) popper.state.elements.reference = triggerEl;
popper.update();
} else {
var rect = triggerEl === null || triggerEl === void 0 ? void 0 : triggerEl.getBoundingClientRect();
var parent = triggerEl;
while (parent && parent !== document.body) {
parent = parent.parentElement;
}
var isHidden = parent !== document.body || rect && rect.width === 0 && rect.height === 0;
if (!isHidden) {
if (popper.state) popper.state.elements.reference = triggerEl;
popper.update();
} else {
onVisibleChange(false, {
trigger: "document"
});
}
}
} catch (e) {
popper.update();
}
updateArrowPosition();
}
React.useImperativeHandle(ref, function () {
return {
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"
});
},
getPopper: function getPopper() {
var popper = popperRef.current;
if (!popper) return null;
return {
state: popper.state,
update: popper.update,
forceUpdate: popper.forceUpdate,
destroy: popper.destroy,
setOptions: popper.setOptions
};
},
getOverlay: function getOverlay() {
return portalRef.current;
},
getOverlayState: function getOverlayState() {
return {
hover: isOverlayHover
};
},
update: function update() {
return updatePopper();
}
};
});
return /* @__PURE__ */React__default["default"].createElement(React__default["default"].Fragment, null, triggerElementIsString ? null : triggerNode, overlay);
});
Popup.displayName = "Popup";
exports["default"] = Popup;
//# sourceMappingURL=Popup.js.map