☰

use-resize-observer-umd

A UMD build of use-resize-observer

当前为 2024-11-07 提交的版本，查看 最新版本。

此脚本不应直接安装。它是供其他脚本使用的外部库，要使用该库请加入元指令 // @require https://update.cn-greasyfork.org/scripts/516163/1479101/use-resize-observer-umd.js 

  1. (function (global, factory) {
  2.     typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react')) :
  3.     typeof define === 'function' && define.amd ? define(['react'], factory) :
  4.     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.useResizeObserver = factory(global.React));
  5. })(this, (function (react) { 'use strict';
  6.     /* esm.sh - esbuild bundle(use-resize-observer@9.1.0) es2022 development */
  7.     // ../esmd/npm/use-resize-observer@9.1.0/node_modules/.pnpm/use-resize-observer@9.1.0_react-dom@18.3.1_react@18.3.1/node_modules/use-resize-observer/dist/bundle.esm.js
  8.     function useResolvedElement(subscriber, refOrElement) {
  9.         var lastReportRef = react.useRef(null);
  10.         var refOrElementRef = react.useRef(null);
  11.         refOrElementRef.current = refOrElement;
  12.         var cbElementRef = react.useRef(null);
  13.         react.useEffect(function() {
  14.             evaluateSubscription();
  15.         });
  16.         var evaluateSubscription = react.useCallback(function() {
  17.             var cbElement = cbElementRef.current;
  18.             var refOrElement2 = refOrElementRef.current;
  19.             var element = cbElement ? cbElement : refOrElement2 ? refOrElement2 instanceof Element ? refOrElement2 : refOrElement2.current : null;
  20.             if (lastReportRef.current && lastReportRef.current.element === element && lastReportRef.current.subscriber === subscriber) {
  21.                 return;
  22.             }
  23.             if (lastReportRef.current && lastReportRef.current.cleanup) {
  24.                 lastReportRef.current.cleanup();
  25.             }
  26.             lastReportRef.current = {
  27.                 element,
  28.                 subscriber,
  29.                 // Only calling the subscriber, if there's an actual element to report.
  30.                 // Setting cleanup to undefined unless a subscriber returns one, as an existing cleanup function would've been just called.
  31.                 cleanup: element ? subscriber(element) : void 0
  32.             };
  33.         }, [subscriber]);
  34.         react.useEffect(function() {
  35.             return function() {
  36.                 if (lastReportRef.current && lastReportRef.current.cleanup) {
  37.                     lastReportRef.current.cleanup();
  38.                     lastReportRef.current = null;
  39.                 }
  40.             };
  41.         }, []);
  42.         return react.useCallback(function(element) {
  43.             cbElementRef.current = element;
  44.             evaluateSubscription();
  45.         }, [evaluateSubscription]);
  46.     }
  47.     function extractSize(entry, boxProp, sizeType) {
  48.         if (!entry[boxProp]) {
  49.             if (boxProp === "contentBoxSize") {
  50.                 return entry.contentRect[sizeType === "inlineSize" ? "width" : "height"];
  51.             }
  52.             return void 0;
  53.         }
  54.         return entry[boxProp][0] ? entry[boxProp][0][sizeType] : (
  55.             // TS complains about this, because the RO entry type follows the spec and does not reflect Firefox's current
  56.             // behaviour of returning objects instead of arrays for `borderBoxSize` and `contentBoxSize`.
  57.             // @ts-ignore
  58.             entry[boxProp][sizeType]
  59.         );
  60.     }
  61.     function useResizeObserver(opts) {
  62.         if (opts === void 0) {
  63.             opts = {};
  64.         }
  65.         var onResize = opts.onResize;
  66.         var onResizeRef = react.useRef(void 0);
  67.         onResizeRef.current = onResize;
  68.         var round = opts.round || Math.round;
  69.         var resizeObserverRef = react.useRef();
  70.         var _useState = react.useState({
  71.             width: void 0,
  72.             height: void 0
  73.         }), size = _useState[0], setSize = _useState[1];
  74.         var didUnmount = react.useRef(false);
  75.         react.useEffect(function() {
  76.             didUnmount.current = false;
  77.             return function() {
  78.                 didUnmount.current = true;
  79.             };
  80.         }, []);
  81.         var previous = react.useRef({
  82.             width: void 0,
  83.             height: void 0
  84.         });
  85.         var refCallback = useResolvedElement(react.useCallback(function(element) {
  86.             if (!resizeObserverRef.current || resizeObserverRef.current.box !== opts.box || resizeObserverRef.current.round !== round) {
  87.                 resizeObserverRef.current = {
  88.                     box: opts.box,
  89.                     round,
  90.                     instance: new ResizeObserver(function(entries) {
  91.                         var entry = entries[0];
  92.                         var boxProp = opts.box === "border-box" ? "borderBoxSize" : opts.box === "device-pixel-content-box" ? "devicePixelContentBoxSize" : "contentBoxSize";
  93.                         var reportedWidth = extractSize(entry, boxProp, "inlineSize");
  94.                         var reportedHeight = extractSize(entry, boxProp, "blockSize");
  95.                         var newWidth = reportedWidth ? round(reportedWidth) : void 0;
  96.                         var newHeight = reportedHeight ? round(reportedHeight) : void 0;
  97.                         if (previous.current.width !== newWidth || previous.current.height !== newHeight) {
  98.                             var newSize = {
  99.                                 width: newWidth,
  100.                                 height: newHeight
  101.                             };
  102.                             previous.current.width = newWidth;
  103.                             previous.current.height = newHeight;
  104.                             if (onResizeRef.current) {
  105.                                 onResizeRef.current(newSize);
  106.                             } else {
  107.                                 if (!didUnmount.current) {
  108.                                     setSize(newSize);
  109.                                 }
  110.                             }
  111.                         }
  112.                     })
  113.                 };
  114.             }
  115.             resizeObserverRef.current.instance.observe(element, {
  116.                 box: opts.box
  117.             });
  118.             return function() {
  119.                 if (resizeObserverRef.current) {
  120.                     resizeObserverRef.current.instance.unobserve(element);
  121.                 }
  122.             };
  123.         }, [opts.box, round]), opts.ref);
  124.         return react.useMemo(function() {
  125.             return {
  126.                 ref: refCallback,
  127.                 width: size.width,
  128.                 height: size.height
  129.             };
  130.         }, [refCallback, size.width, size.height]);
  131.     }
  132.     return useResizeObserver;
  133. }));