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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.isBoolean = isBoolean;
exports.isFunction = isFunction;
exports.useRect = useRect;
exports.Rect = exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = _interopRequireWildcard(require("react"));

var _rect = _interopRequireDefault(require("./rect"));

function isBoolean(value) {
  return typeof value === 'boolean';
} // eslint-disable-next-line @typescript-eslint/ban-types


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.default.useRef(null);

  var rect = useRect(ref, {
    observe: observe,
    onChange: onChange
  });
  return children({
    ref: ref,
    rect: rect
  });
};
/**
 * useRect
 *
 * @param nodeRef
 * @param observe
 * @param onChange
 */


exports.Rect = Rect;

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.default.useState(nodeRef.current),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      element = _React$useState2[0],
      setElement = _React$useState2[1];

  var initialRectIsSet = _react.default.useRef(false);

  var initialRefIsSet = _react.default.useRef(false);

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

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


  (0, _react.useLayoutEffect)(function () {
    onChangeRef.current = onChange;

    if (nodeRef.current !== element) {
      setElement(nodeRef.current);
    }
  });
  (0, _react.useLayoutEffect)(function () {
    if (element && !initialRectIsSet.current) {
      initialRectIsSet.current = true;
      setRect(element.getBoundingClientRect());
    }
  }, [element]);
  (0, _react.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 = (0, _rect.default)(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;
}

var _default = Rect;
exports.default = _default;