tdesign-react
Version:
TDesign Component for React
288 lines (284 loc) • 11.2 kB
JavaScript
/**
* tdesign v1.15.1
* (c) 2025 tdesign
* @license MIT
*/
import { _ as _slicedToArray } from '../../_chunks/dep-48805ab8.js';
import React, { useRef, useMemo, useEffect, useCallback, isValidElement } from 'react';
import { isFragment } from 'react-is';
import classNames from 'classnames';
import { getRefDom, supportRef, getNodeRef } from '../../_util/ref.js';
import composeRefs from '../../_util/composeRefs.js';
import { on, off } from '../../_util/listener.js';
import '../../_chunks/dep-026a4c6b.js';
import '../../_chunks/dep-eca3a3de.js';
import '../../_util/isFragment.js';
import '../../_chunks/dep-3a09424a.js';
import 'lodash-es';
var ESC_KEY = "Escape";
function useTrigger(_ref) {
var content = _ref.content,
disabled = _ref.disabled,
trigger = _ref.trigger,
visible = _ref.visible,
onVisibleChange = _ref.onVisibleChange,
triggerRef = _ref.triggerRef,
delay = _ref.delay;
var hasPopupMouseDown = useRef(false);
var mouseDownTimer = useRef(0);
var visibleTimer = useRef(null);
var triggerDataKey = useRef("t-popup--".concat(Math.random().toFixed(10)));
var leaveFlag = useRef(false);
var shouldToggle = useMemo(function () {
if (disabled) return false;
return !disabled && content === 0 ? true : content;
}, [disabled, content]);
var _useMemo = useMemo(function () {
if (Array.isArray(delay)) return delay;
return [delay, delay];
}, [delay]),
_useMemo2 = _slicedToArray(_useMemo, 2),
_useMemo2$ = _useMemo2[0],
appearDelay = _useMemo2$ === void 0 ? 0 : _useMemo2$,
_useMemo2$2 = _useMemo2[1],
exitDelay = _useMemo2$2 === void 0 ? 0 : _useMemo2$2;
function callFuncWithDelay(_ref2) {
var delay2 = _ref2.delay,
callback = _ref2.callback;
clearTimeout(visibleTimer.current);
if (delay2) {
visibleTimer.current = setTimeout(callback, delay2);
} else {
callback();
}
}
useEffect(function () {
if (!shouldToggle) return;
var handleDocumentClick = function handleDocumentClick(e) {
var _getRefDom, _getRefDom$contains;
if ((_getRefDom = getRefDom(triggerRef)) !== null && _getRefDom !== void 0 && (_getRefDom$contains = _getRefDom.contains) !== null && _getRefDom$contains !== void 0 && _getRefDom$contains.call(_getRefDom, e.target) || hasPopupMouseDown.current) {
return;
}
visible && onVisibleChange(false, {
e: e,
trigger: "document"
});
};
on(document, "mousedown", handleDocumentClick);
on(document, "touchend", handleDocumentClick);
return function () {
off(document, "mousedown", handleDocumentClick);
off(document, "touchend", handleDocumentClick);
};
}, [shouldToggle, visible, onVisibleChange, triggerRef]);
function getPopupProps() {
if (!shouldToggle) return {};
return {
onMouseEnter: function onMouseEnter(e) {
if (trigger === "hover" && !leaveFlag.current) {
clearTimeout(visibleTimer.current);
onVisibleChange(true, {
e: e,
trigger: "trigger-element-hover"
});
}
},
onMouseLeave: function onMouseLeave(e) {
if (trigger === "hover") {
leaveFlag.current = true;
clearTimeout(visibleTimer.current);
onVisibleChange(false, {
e: e,
trigger: "trigger-element-hover"
});
}
},
onMouseDown: function onMouseDown() {
clearTimeout(mouseDownTimer.current);
hasPopupMouseDown.current = true;
mouseDownTimer.current = window.setTimeout(function () {
hasPopupMouseDown.current = false;
});
},
onTouchEnd: function onTouchEnd() {
clearTimeout(mouseDownTimer.current);
hasPopupMouseDown.current = true;
mouseDownTimer.current = window.setTimeout(function () {
hasPopupMouseDown.current = false;
});
}
};
}
function getTriggerProps(triggerNode) {
if (!shouldToggle) return {};
var triggerProps = {
className: visible ? classNames(triggerNode.props.className, "t-popup-open") : triggerNode.props.className,
onMouseDown: function onMouseDown(e) {
var _triggerNode$props$on, _triggerNode$props;
if (trigger === "mousedown") {
callFuncWithDelay({
delay: visible ? appearDelay : exitDelay,
callback: function callback() {
return onVisibleChange(!visible, {
e: e,
trigger: "trigger-element-mousedown"
});
}
});
}
(_triggerNode$props$on = (_triggerNode$props = triggerNode.props).onMouseDown) === null || _triggerNode$props$on === void 0 || _triggerNode$props$on.call(_triggerNode$props, e);
},
onClick: function onClick(e) {
var _triggerNode$props$on2, _triggerNode$props2;
if (trigger === "click") {
callFuncWithDelay({
delay: visible ? appearDelay : exitDelay,
callback: function callback() {
return onVisibleChange(!visible, {
e: e,
trigger: "trigger-element-click"
});
}
});
}
(_triggerNode$props$on2 = (_triggerNode$props2 = triggerNode.props).onClick) === null || _triggerNode$props$on2 === void 0 || _triggerNode$props$on2.call(_triggerNode$props2, e);
},
onTouchStart: function onTouchStart(e) {
var _triggerNode$props$on3, _triggerNode$props3;
if (trigger === "hover" || trigger === "mousedown") {
leaveFlag.current = false;
callFuncWithDelay({
delay: appearDelay,
callback: function callback() {
return onVisibleChange(true, {
e: e,
trigger: "trigger-element-hover"
});
}
});
}
(_triggerNode$props$on3 = (_triggerNode$props3 = triggerNode.props).onTouchStart) === null || _triggerNode$props$on3 === void 0 || _triggerNode$props$on3.call(_triggerNode$props3, e);
},
onMouseEnter: function onMouseEnter(e) {
var _triggerNode$props$on4, _triggerNode$props4;
if (trigger === "hover") {
leaveFlag.current = false;
callFuncWithDelay({
delay: appearDelay,
callback: function callback() {
return onVisibleChange(true, {
e: e,
trigger: "trigger-element-hover"
});
}
});
}
(_triggerNode$props$on4 = (_triggerNode$props4 = triggerNode.props).onMouseEnter) === null || _triggerNode$props$on4 === void 0 || _triggerNode$props$on4.call(_triggerNode$props4, e);
},
onMouseLeave: function onMouseLeave(e) {
var _triggerNode$props$on5, _triggerNode$props5;
if (trigger === "hover") {
leaveFlag.current = false;
callFuncWithDelay({
delay: exitDelay,
callback: function callback() {
return onVisibleChange(false, {
e: e,
trigger: "trigger-element-hover"
});
}
});
}
(_triggerNode$props$on5 = (_triggerNode$props5 = triggerNode.props).onMouseLeave) === null || _triggerNode$props$on5 === void 0 || _triggerNode$props$on5.call(_triggerNode$props5, e);
},
onFocus: function onFocus() {
var _triggerNode$props$on6, _triggerNode$props6;
if (trigger === "focus") {
callFuncWithDelay({
delay: appearDelay,
callback: function callback() {
return onVisibleChange(true, {
trigger: "trigger-element-focus"
});
}
});
}
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
(_triggerNode$props$on6 = (_triggerNode$props6 = triggerNode.props).onFocus) === null || _triggerNode$props$on6 === void 0 || _triggerNode$props$on6.call.apply(_triggerNode$props$on6, [_triggerNode$props6].concat(args));
},
onBlur: function onBlur() {
var _triggerNode$props$on7, _triggerNode$props7;
if (trigger === "focus") {
callFuncWithDelay({
delay: appearDelay,
callback: function callback() {
return onVisibleChange(false, {
trigger: "trigger-element-blur"
});
}
});
}
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
(_triggerNode$props$on7 = (_triggerNode$props7 = triggerNode.props).onBlur) === null || _triggerNode$props$on7 === void 0 || _triggerNode$props$on7.call.apply(_triggerNode$props$on7, [_triggerNode$props7].concat(args));
},
onContextMenu: function onContextMenu(e) {
var _triggerNode$props$on8, _triggerNode$props8;
if (trigger === "context-menu") {
e.preventDefault();
callFuncWithDelay({
delay: appearDelay,
callback: function callback() {
return onVisibleChange(true, {
e: e,
trigger: "context-menu"
});
}
});
}
(_triggerNode$props$on8 = (_triggerNode$props8 = triggerNode.props).onContextMenu) === null || _triggerNode$props$on8 === void 0 || _triggerNode$props$on8.call(_triggerNode$props8, e);
},
onKeyDown: function onKeyDown(e) {
var _triggerNode$props$on9, _triggerNode$props9;
if ((e === null || e === void 0 ? void 0 : e.key) === ESC_KEY) {
callFuncWithDelay({
delay: exitDelay,
callback: function callback() {
return onVisibleChange(false, {
e: e,
trigger: "keydown-esc"
});
}
});
}
(_triggerNode$props$on9 = (_triggerNode$props9 = triggerNode.props).onKeyDown) === null || _triggerNode$props$on9 === void 0 || _triggerNode$props$on9.call(_triggerNode$props9, e);
}
};
if (supportRef(triggerNode)) {
triggerProps.ref = composeRefs(triggerRef, getNodeRef(triggerNode));
} else {
triggerProps["data-popup"] = triggerDataKey.current;
}
return triggerProps;
}
function getTriggerNode(children) {
var triggerNode = /*#__PURE__*/isValidElement(children) && !isFragment(children) ? children : /* @__PURE__ */React.createElement("span", {
className: "t-trigger"
}, children);
return /*#__PURE__*/React.cloneElement(triggerNode, getTriggerProps(triggerNode));
}
var getTriggerDom = useCallback(function () {
if (typeof document === "undefined") return {};
return document.querySelector("[data-popup=\"".concat(triggerDataKey.current, "\"]"));
}, []);
return {
getTriggerNode: getTriggerNode,
getPopupProps: getPopupProps,
getTriggerDom: getTriggerDom
};
}
export { useTrigger as default };
//# sourceMappingURL=useTrigger.js.map