index.js 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. "use strict";
  2. var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
  3. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
  4. Object.defineProperty(exports, "__esModule", {
  5. value: true
  6. });
  7. exports.default = void 0;
  8. var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
  9. var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
  10. var _findDOMNode = _interopRequireDefault(require("rc-util/lib/Dom/findDOMNode"));
  11. var _ref = require("rc-util/lib/ref");
  12. var React = _interopRequireWildcard(require("react"));
  13. var _Collection = require("../Collection");
  14. var _observerUtil = require("../utils/observerUtil");
  15. var _DomWrapper = _interopRequireDefault(require("./DomWrapper"));
  16. function SingleObserver(props, ref) {
  17. var children = props.children,
  18. disabled = props.disabled;
  19. var elementRef = React.useRef(null);
  20. var wrapperRef = React.useRef(null);
  21. var onCollectionResize = React.useContext(_Collection.CollectionContext);
  22. // =========================== Children ===========================
  23. var isRenderProps = typeof children === 'function';
  24. var mergedChildren = isRenderProps ? children(elementRef) : children;
  25. // ============================= Size =============================
  26. var sizeRef = React.useRef({
  27. width: -1,
  28. height: -1,
  29. offsetWidth: -1,
  30. offsetHeight: -1
  31. });
  32. // ============================= Ref ==============================
  33. var canRef = !isRenderProps && /*#__PURE__*/React.isValidElement(mergedChildren) && (0, _ref.supportRef)(mergedChildren);
  34. var originRef = canRef ? (0, _ref.getNodeRef)(mergedChildren) : null;
  35. var mergedRef = (0, _ref.useComposeRef)(originRef, elementRef);
  36. var getDom = function getDom() {
  37. var _elementRef$current;
  38. return (0, _findDOMNode.default)(elementRef.current) || (
  39. // Support `nativeElement` format
  40. elementRef.current && (0, _typeof2.default)(elementRef.current) === 'object' ? (0, _findDOMNode.default)((_elementRef$current = elementRef.current) === null || _elementRef$current === void 0 ? void 0 : _elementRef$current.nativeElement) : null) || (0, _findDOMNode.default)(wrapperRef.current);
  41. };
  42. React.useImperativeHandle(ref, function () {
  43. return getDom();
  44. });
  45. // =========================== Observe ============================
  46. var propsRef = React.useRef(props);
  47. propsRef.current = props;
  48. // Handler
  49. var onInternalResize = React.useCallback(function (target) {
  50. var _propsRef$current = propsRef.current,
  51. onResize = _propsRef$current.onResize,
  52. data = _propsRef$current.data;
  53. var _target$getBoundingCl = target.getBoundingClientRect(),
  54. width = _target$getBoundingCl.width,
  55. height = _target$getBoundingCl.height;
  56. var offsetWidth = target.offsetWidth,
  57. offsetHeight = target.offsetHeight;
  58. /**
  59. * Resize observer trigger when content size changed.
  60. * In most case we just care about element size,
  61. * let's use `boundary` instead of `contentRect` here to avoid shaking.
  62. */
  63. var fixedWidth = Math.floor(width);
  64. var fixedHeight = Math.floor(height);
  65. if (sizeRef.current.width !== fixedWidth || sizeRef.current.height !== fixedHeight || sizeRef.current.offsetWidth !== offsetWidth || sizeRef.current.offsetHeight !== offsetHeight) {
  66. var size = {
  67. width: fixedWidth,
  68. height: fixedHeight,
  69. offsetWidth: offsetWidth,
  70. offsetHeight: offsetHeight
  71. };
  72. sizeRef.current = size;
  73. // IE is strange, right?
  74. var mergedOffsetWidth = offsetWidth === Math.round(width) ? width : offsetWidth;
  75. var mergedOffsetHeight = offsetHeight === Math.round(height) ? height : offsetHeight;
  76. var sizeInfo = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, size), {}, {
  77. offsetWidth: mergedOffsetWidth,
  78. offsetHeight: mergedOffsetHeight
  79. });
  80. // Let collection know what happened
  81. onCollectionResize === null || onCollectionResize === void 0 || onCollectionResize(sizeInfo, target, data);
  82. if (onResize) {
  83. // defer the callback but not defer to next frame
  84. Promise.resolve().then(function () {
  85. onResize(sizeInfo, target);
  86. });
  87. }
  88. }
  89. }, []);
  90. // Dynamic observe
  91. React.useEffect(function () {
  92. var currentElement = getDom();
  93. if (currentElement && !disabled) {
  94. (0, _observerUtil.observe)(currentElement, onInternalResize);
  95. }
  96. return function () {
  97. return (0, _observerUtil.unobserve)(currentElement, onInternalResize);
  98. };
  99. }, [elementRef.current, disabled]);
  100. // ============================ Render ============================
  101. return /*#__PURE__*/React.createElement(_DomWrapper.default, {
  102. ref: wrapperRef
  103. }, canRef ? /*#__PURE__*/React.cloneElement(mergedChildren, {
  104. ref: mergedRef
  105. }) : mergedChildren);
  106. }
  107. var RefSingleObserver = /*#__PURE__*/React.forwardRef(SingleObserver);
  108. if (process.env.NODE_ENV !== 'production') {
  109. RefSingleObserver.displayName = 'SingleObserver';
  110. }
  111. var _default = exports.default = RefSingleObserver;