@megafon/ui-shared 9.0.0-alpha.2 → 9.0.0-alpha.21

package/dist/lib/components/CardsOnBackground/useUniformHeights.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _react = _interopRequireDefault(require("react"));
+var _useIsomorphicLayoutEffect = _interopRequireDefault(require("../../hooks/useIsomorphicLayoutEffect"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var useUniformHeights = function useUniformHeights(itemsCount) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var _options$disabled = options.disabled,
+    disabled = _options$disabled === void 0 ? false : _options$disabled;
+  var _React$useState = _react["default"].useState(0),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    maxHeight = _React$useState2[0],
+    setMaxHeight = _React$useState2[1];
+  var refs = _react["default"].useRef([]);
+  var observerRef = _react["default"].useRef(null);
+  var maxHeightRef = _react["default"].useRef(maxHeight);
+  var updateMaxHeight = _react["default"].useCallback(function () {
+    if (disabled) {
+      return;
+    }
+    var heights = refs.current.map(function (ref) {
+      return (ref === null || ref === void 0 ? void 0 : ref.offsetHeight) || 0;
+    });
+    var newMaxHeight = Math.ceil(Math.max.apply(Math, (0, _toConsumableArray2["default"])(heights).concat([0])));
+    if (newMaxHeight !== maxHeightRef.current) {
+      maxHeightRef.current = newMaxHeight;
+      setMaxHeight(newMaxHeight);
+    }
+  }, [disabled]);
+  (0, _useIsomorphicLayoutEffect["default"])(function () {
+    if (disabled) {
+      return undefined;
+    }
+    if (!observerRef.current) {
+      observerRef.current = new ResizeObserver(function () {
+        requestAnimationFrame(function () {
+          updateMaxHeight();
+        });
+      });
+    }
+    return function () {
+      var _a;
+      (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+    };
+  }, [disabled, updateMaxHeight]);
+  (0, _useIsomorphicLayoutEffect["default"])(function () {
+    var _a;
+    if (disabled) {
+      (_a = observerRef.current) === null || _a === void 0 ? void 0 : _a.disconnect();
+      maxHeightRef.current = 0;
+      setMaxHeight(0);
+      return;
+    }
+    var observer = observerRef.current;
+    if (!observer) {
+      return;
+    }
+    observer.disconnect();
+    refs.current.forEach(function (ref) {
+      if (ref) {
+        observer.observe(ref);
+      }
+    });
+    updateMaxHeight();
+  }, [itemsCount, disabled, updateMaxHeight]);
+  var getRef = _react["default"].useCallback(function (index) {
+    return function (element) {
+      var observer = observerRef.current;
+      var oldElement = refs.current[index];
+      if (oldElement && observer) {
+        observer.unobserve(oldElement);
+      }
+      refs.current[index] = element;
+      if (element && observer && !disabled) {
+        observer.observe(element);
+      }
+    };
+  }, [disabled]);
+  return {
+    maxHeight: maxHeight,
+    getRef: getRef
+  };
+};
+var _default = exports["default"] = useUniformHeights;