zp-bee/es/bee-rect/index.js

zp-bee，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useLayoutEffect } from 'react';
import observeRect from './rect';
export function isBoolean(value) {
  return typeof value === 'boolean';
} // eslint-disable-next-line @typescript-eslint/ban-types

export function isFunction(value) {
  // eslint-disable-next-line eqeqeq
  return !!(value && {}.toString.call(value) == '[object Function]');
}
/**
 * Rect
 *
 * @param props
 */

var Rect = function Rect(_ref) {
  var onChange = _ref.onChange,
      _ref$observe = _ref.observe,
      observe = _ref$observe === void 0 ? true : _ref$observe,
      children = _ref.children;
  var ref = React.useRef(null);
  var rect = useRect(ref, {
    observe: observe,
    onChange: onChange
  });
  return children({
    ref: ref,
    rect: rect
  });
};
/**
 * useRect
 *
 * @param nodeRef
 * @param observe
 * @param onChange
 */


function useRect(nodeRef, observeOrOptions, deprecated_onChange) {
  var _a;

  var observe;
  var onChange;

  if (isBoolean(observeOrOptions)) {
    observe = observeOrOptions;
  } else {
    observe = (_a = observeOrOptions === null || observeOrOptions === void 0 ? void 0 : observeOrOptions.observe) !== null && _a !== void 0 ? _a : true;
    onChange = observeOrOptions === null || observeOrOptions === void 0 ? void 0 : observeOrOptions.onChange;
  }

  if (isFunction(deprecated_onChange)) {
    onChange = deprecated_onChange;
  }

  var _React$useState = React.useState(nodeRef.current),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      element = _React$useState2[0],
      setElement = _React$useState2[1];

  var initialRectIsSet = React.useRef(false);
  var initialRefIsSet = React.useRef(false);

  var _React$useState3 = React.useState(null),
      _React$useState4 = _slicedToArray(_React$useState3, 2),
      rect = _React$useState4[0],
      setRect = _React$useState4[1];

  var onChangeRef = React.useRef(onChange); // eslint-disable-next-line react-hooks/exhaustive-deps

  useLayoutEffect(function () {
    onChangeRef.current = onChange;

    if (nodeRef.current !== element) {
      setElement(nodeRef.current);
    }
  });
  useLayoutEffect(function () {
    if (element && !initialRectIsSet.current) {
      initialRectIsSet.current = true;
      setRect(element.getBoundingClientRect());
    }
  }, [element]);
  useLayoutEffect(function () {
    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore
    if (!observe) return;
    var elem = element;

    if (!initialRefIsSet.current) {
      initialRefIsSet.current = true;
      elem = nodeRef.current;
    } // eslint-disable-next-line @typescript-eslint/ban-ts-comment
    // @ts-ignore


    if (!elem) return;
    var observer = observeRect(elem, function (rect) {
      var _a;

      (_a = onChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onChangeRef, rect);
      setRect(rect);
    });
    observer.observe();
    return function () {
      observer.unobserve();
    };
  }, [observe, element, nodeRef]);
  return rect;
}

export default Rect;
export { Rect, useRect };