tethysfaceid
Version:
1 lines • 7.63 kB
JSON
{"ast":null,"code":"\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nexports.__esModule = true;\nexports.useIntersection = useIntersection;\n\nvar _react = require(\"react\");\n\nvar _requestIdleCallback = _interopRequireDefault(require(\"./request-idle-callback\"));\n\nconst hasIntersectionObserver = typeof IntersectionObserver !== 'undefined';\n\nfunction useIntersection({\n rootMargin,\n disabled\n}) {\n const isDisabled = disabled || !hasIntersectionObserver;\n const unobserve = (0, _react.useRef)();\n const [visible, setVisible] = (0, _react.useState)(false);\n const setRef = (0, _react.useCallback)(el => {\n if (unobserve.current) {\n unobserve.current();\n unobserve.current = undefined;\n }\n\n if (isDisabled || visible) return;\n\n if (el && el.tagName) {\n unobserve.current = observe(el, isVisible => isVisible && setVisible(isVisible), {\n rootMargin\n });\n }\n }, [isDisabled, rootMargin, visible]);\n (0, _react.useEffect)(() => {\n if (!hasIntersectionObserver) {\n if (!visible) (0, _requestIdleCallback.default)(() => setVisible(true));\n }\n }, [visible]);\n return [setRef, visible];\n}\n\nfunction observe(element, callback, options) {\n const {\n id,\n observer,\n elements\n } = createObserver(options);\n elements.set(element, callback);\n observer.observe(element);\n return function unobserve() {\n observer.unobserve(element); // Destroy observer when there's nothing left to watch:\n\n if (elements.size === 0) {\n observer.disconnect();\n observers.delete(id);\n }\n };\n}\n\nconst observers = new Map();\n\nfunction createObserver(options) {\n const id = options.rootMargin || '';\n let instance = observers.get(id);\n\n if (instance) {\n return instance;\n }\n\n const elements = new Map();\n const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n const callback = elements.get(entry.target);\n const isVisible = entry.isIntersecting || entry.intersectionRatio > 0;\n\n if (callback && isVisible) {\n callback(isVisible);\n }\n });\n }, options);\n observers.set(id, instance = {\n id,\n observer,\n elements\n });\n return instance;\n}","map":{"version":3,"sources":["../../client/use-intersection.tsx"],"names":["hasIntersectionObserver","isDisabled","disabled","unobserve","setRef","el","observe","isVisible","setVisible","createObserver","elements","observer","observers","id","options","instance","entries","entry","callback"],"mappings":"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","sourcesContent":["import { useCallback, useEffect, useRef, useState } from 'react'\nimport requestIdleCallback from './request-idle-callback'\n\ntype UseIntersectionObserverInit = Pick<IntersectionObserverInit, 'rootMargin'>\ntype UseIntersection = { disabled?: boolean } & UseIntersectionObserverInit\ntype ObserveCallback = (isVisible: boolean) => void\n\nconst hasIntersectionObserver = typeof IntersectionObserver !== 'undefined'\n\nexport function useIntersection<T extends Element>({\n rootMargin,\n disabled,\n}: UseIntersection): [(element: T | null) => void, boolean] {\n const isDisabled = disabled || !hasIntersectionObserver\n\n const unobserve = useRef<Function>()\n const [visible, setVisible] = useState(false)\n\n const setRef = useCallback(\n (el: T | null) => {\n if (unobserve.current) {\n unobserve.current()\n unobserve.current = undefined\n }\n\n if (isDisabled || visible) return\n\n if (el && el.tagName) {\n unobserve.current = observe(\n el,\n (isVisible) => isVisible && setVisible(isVisible),\n { rootMargin }\n )\n }\n },\n [isDisabled, rootMargin, visible]\n )\n\n useEffect(() => {\n if (!hasIntersectionObserver) {\n if (!visible) requestIdleCallback(() => setVisible(true))\n }\n }, [visible])\n\n return [setRef, visible]\n}\n\nfunction observe(\n element: Element,\n callback: ObserveCallback,\n options: UseIntersectionObserverInit\n) {\n const { id, observer, elements } = createObserver(options)\n elements.set(element, callback)\n\n observer.observe(element)\n return function unobserve() {\n observer.unobserve(element)\n\n // Destroy observer when there's nothing left to watch:\n if (elements.size === 0) {\n observer.disconnect()\n observers.delete(id)\n }\n }\n}\n\nconst observers = new Map<\n string,\n {\n id: string\n observer: IntersectionObserver\n elements: Map<Element, ObserveCallback>\n }\n>()\nfunction createObserver(options: UseIntersectionObserverInit) {\n const id = options.rootMargin || ''\n let instance = observers.get(id)\n if (instance) {\n return instance\n }\n\n const elements = new Map<Element, ObserveCallback>()\n const observer = new IntersectionObserver((entries) => {\n entries.forEach((entry) => {\n const callback = elements.get(entry.target)\n const isVisible = entry.isIntersecting || entry.intersectionRatio > 0\n if (callback && isVisible) {\n callback(isVisible)\n }\n })\n }, options)\n\n observers.set(\n id,\n (instance = {\n id,\n observer,\n elements,\n })\n )\n return instance\n}\n"]},"metadata":{},"sourceType":"script"}