linkmore-design/es/lm-table/hooks/useResizeObserver.js

🌈 🚀lm组件库。🚀

import _createForOfIteratorHelper from "@babel/runtime/helpers/esm/createForOfIteratorHelper";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import { useEffect, useRef, useState } from 'react';
export default function useResizeObserver() {
  var ref = useRef();
  var _useState = useState({
      x: 0,
      y: 0,
      width: 0,
      height: 0,
      left: 0,
      right: 0,
      bottom: 0,
      top: 0
    }),
    _useState2 = _slicedToArray(_useState, 2),
    rect = _useState2[0],
    setRect = _useState2[1];
  console.log('useResizeObserver');
  useEffect(function () {
    var ro = new ResizeObserver(function (entries) {
      // 遍历改变的元素属性
      var _iterator = _createForOfIteratorHelper(entries),
        _step;
      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var entry = _step.value;
          setRect(entry.target.getBoundingClientRect());
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }
    });
    if (ref.current) {
      ro.observe(ref.current);
    }
    return function () {
      ro.disconnect();
    };
  }, []);
  return [ref, rect];
}