You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

114 lines
4.3 KiB

"use strict";
exports.__esModule = true;
exports.default = exports.getRefTarget = void 0;
var _contains = _interopRequireDefault(require("dom-helpers/contains"));
var _listen = _interopRequireDefault(require("dom-helpers/listen"));
var _ownerDocument = _interopRequireDefault(require("dom-helpers/ownerDocument"));
var _react = require("react");
var _useEventCallback = _interopRequireDefault(require("@restart/hooks/useEventCallback"));
var _warning = _interopRequireDefault(require("warning"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const noop = () => {};
function isLeftClickEvent(event) {
return event.button === 0;
}
function isModifiedEvent(event) {
return !!(event.metaKey || event.altKey || event.ctrlKey || event.shiftKey);
}
const getRefTarget = ref => ref && ('current' in ref ? ref.current : ref);
exports.getRefTarget = getRefTarget;
const InitialTriggerEvents = {
click: 'mousedown',
mouseup: 'mousedown',
pointerup: 'pointerdown'
};
/**
* The `useClickOutside` hook registers your callback on the document that fires
* when a pointer event is registered outside of the provided ref or element.
*
* @param {Ref<HTMLElement>| HTMLElement} ref The element boundary
* @param {function} onClickOutside
* @param {object=} options
* @param {boolean=} options.disabled
* @param {string=} options.clickTrigger The DOM event name (click, mousedown, etc) to attach listeners on
*/
function useClickOutside(ref, onClickOutside = noop, {
disabled,
clickTrigger = 'click'
} = {}) {
const preventMouseClickOutsideRef = (0, _react.useRef)(false);
const waitingForTrigger = (0, _react.useRef)(false);
const handleMouseCapture = (0, _react.useCallback)(e => {
const currentTarget = getRefTarget(ref);
(0, _warning.default)(!!currentTarget, 'ClickOutside captured a close event but does not have a ref to compare it to. ' + 'useClickOutside(), should be passed a ref that resolves to a DOM node');
preventMouseClickOutsideRef.current = !currentTarget || isModifiedEvent(e) || !isLeftClickEvent(e) || !!(0, _contains.default)(currentTarget, e.target) || waitingForTrigger.current;
waitingForTrigger.current = false;
}, [ref]);
const handleInitialMouse = (0, _useEventCallback.default)(e => {
const currentTarget = getRefTarget(ref);
if (currentTarget && (0, _contains.default)(currentTarget, e.target)) {
waitingForTrigger.current = true;
}
});
const handleMouse = (0, _useEventCallback.default)(e => {
if (!preventMouseClickOutsideRef.current) {
onClickOutside(e);
}
});
(0, _react.useEffect)(() => {
if (disabled || ref == null) return undefined;
const doc = (0, _ownerDocument.default)(getRefTarget(ref)); // Store the current event to avoid triggering handlers immediately
// https://github.com/facebook/react/issues/20074
let currentEvent = (doc.defaultView || window).event;
let removeInitialTriggerListener = null;
if (InitialTriggerEvents[clickTrigger]) {
removeInitialTriggerListener = (0, _listen.default)(doc, InitialTriggerEvents[clickTrigger], handleInitialMouse, true);
} // Use capture for this listener so it fires before React's listener, to
// avoid false positives in the contains() check below if the target DOM
// element is removed in the React mouse callback.
const removeMouseCaptureListener = (0, _listen.default)(doc, clickTrigger, handleMouseCapture, true);
const removeMouseListener = (0, _listen.default)(doc, clickTrigger, e => {
// skip if this event is the same as the one running when we added the handlers
if (e === currentEvent) {
currentEvent = undefined;
return;
}
handleMouse(e);
});
let mobileSafariHackListeners = [];
if ('ontouchstart' in doc.documentElement) {
mobileSafariHackListeners = [].slice.call(doc.body.children).map(el => (0, _listen.default)(el, 'mousemove', noop));
}
return () => {
removeInitialTriggerListener == null ? void 0 : removeInitialTriggerListener();
removeMouseCaptureListener();
removeMouseListener();
mobileSafariHackListeners.forEach(remove => remove());
};
}, [ref, disabled, clickTrigger, handleMouseCapture, handleInitialMouse, handleMouse]);
}
var _default = useClickOutside;
exports.default = _default;