import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2"; import { composeRef, supportRef } from "rc-util/es/ref"; import * as React from 'react'; import findDOMNode from "rc-util/es/Dom/findDOMNode"; import { observe, unobserve } from '../utils/observerUtil'; import DomWrapper from './DomWrapper'; import { CollectionContext } from '../Collection'; function SingleObserver(props, ref) { var children = props.children, disabled = props.disabled; var elementRef = React.useRef(null); var wrapperRef = React.useRef(null); var onCollectionResize = React.useContext(CollectionContext); // =========================== Children =========================== var isRenderProps = typeof children === 'function'; var mergedChildren = isRenderProps ? children(elementRef) : children; // ============================= Size ============================= var sizeRef = React.useRef({ width: -1, height: -1, offsetWidth: -1, offsetHeight: -1 }); // ============================= Ref ============================== var canRef = !isRenderProps && /*#__PURE__*/React.isValidElement(mergedChildren) && supportRef(mergedChildren); var originRef = canRef ? mergedChildren.ref : null; var mergedRef = React.useMemo(function () { return composeRef(originRef, elementRef); }, [originRef, elementRef]); var getDom = function getDom() { return findDOMNode(elementRef.current) || findDOMNode(wrapperRef.current); }; React.useImperativeHandle(ref, function () { return getDom(); }); // =========================== Observe ============================ var propsRef = React.useRef(props); propsRef.current = props; // Handler var onInternalResize = React.useCallback(function (target) { var _propsRef$current = propsRef.current, onResize = _propsRef$current.onResize, data = _propsRef$current.data; var _target$getBoundingCl = target.getBoundingClientRect(), width = _target$getBoundingCl.width, height = _target$getBoundingCl.height; var offsetWidth = target.offsetWidth, offsetHeight = target.offsetHeight; /** * Resize observer trigger when content size changed. * In most case we just care about element size, * let's use `boundary` instead of `contentRect` here to avoid shaking. */ var fixedWidth = Math.floor(width); var fixedHeight = Math.floor(height); if (sizeRef.current.width !== fixedWidth || sizeRef.current.height !== fixedHeight || sizeRef.current.offsetWidth !== offsetWidth || sizeRef.current.offsetHeight !== offsetHeight) { var size = { width: fixedWidth, height: fixedHeight, offsetWidth: offsetWidth, offsetHeight: offsetHeight }; sizeRef.current = size; // IE is strange, right? var mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth; var mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight; var sizeInfo = _objectSpread(_objectSpread({}, size), {}, { offsetWidth: mergedOffsetWidth, offsetHeight: mergedOffsetHeight }); // Let collection know what happened onCollectionResize === null || onCollectionResize === void 0 ? void 0 : onCollectionResize(sizeInfo, target, data); if (onResize) { // defer the callback but not defer to next frame Promise.resolve().then(function () { onResize(sizeInfo, target); }); } } }, []); // Dynamic observe React.useEffect(function () { var currentElement = getDom(); if (currentElement && !disabled) { observe(currentElement, onInternalResize); } return function () { return unobserve(currentElement, onInternalResize); }; }, [elementRef.current, disabled]); // ============================ Render ============================ return /*#__PURE__*/React.createElement(DomWrapper, { ref: wrapperRef }, canRef ? /*#__PURE__*/React.cloneElement(mergedChildren, { ref: mergedRef }) : mergedChildren); } var RefSingleObserver = /*#__PURE__*/React.forwardRef(SingleObserver); if (process.env.NODE_ENV !== 'production') { RefSingleObserver.displayName = 'SingleObserver'; } export default RefSingleObserver;