UNPKG

@fluent-windows/hooks

Version:
52 lines (44 loc) 2.04 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports["default"] = void 0; var React = _interopRequireWildcard(require("react")); function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; } function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; } /** * Subscribe to events that click on a location other than the specified element. * * Demo * import { useClickOutside } from '@fluent-windows/hooks' * * const reference = React.useRef(null) * * useClickOutside( * reference, * (): void => { * // ... * } * ) * * <div ref={reference}>xxx</div> */ function useClickOutside(ref, handler) { React.useEffect(function () { var listener = function listener(event) { // @ts-ignore if (!ref.current || typeof ref.current.contains === 'function' && event.target && ref.current.contains(event.target)) { return; } handler(event); }; document.addEventListener('mousedown', listener); document.addEventListener('touchstart', listener); return function () { document.removeEventListener('mousedown', listener); document.removeEventListener('touchstart', listener); }; }, [ref, handler]); } var _default = useClickOutside; exports["default"] = _default;