@megafon/ui-core 2.4.0 → 2.5.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.5.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.4.0...@megafon/ui-core@2.5.0) (2022-02-07)
+
+
+### Features
+
+* **tabs:** add prop outerObserveContainer for observing sticky mode from outside ([bc20c76](https://github.com/MegafonWebLab/megafon-ui/commit/bc20c76f497d88da19ea03cfc66a0c38a7559698))
+
+
+
+
+
 # [2.4.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-core@2.3.0...@megafon/ui-core@2.4.0) (2022-01-31)
 
 

package/dist/es/components/Tabs/Tabs.d.ts

@@ -41,6 +41,8 @@ export interface ITabsProps {
     defaultIndex?: number;
     /** Рендер содержимого только для текущего таба */
     renderOnlyCurrentPanel?: boolean;
+    /** Внешний контейнер для режима фиксация табов */
+    outerObserveContainer?: HTMLDivElement | null;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

package/dist/es/components/Tabs/Tabs.js

@@ -67,10 +67,12 @@ var Tabs = function Tabs(_ref) {
       _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
       renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
-      onTabClick = _ref.onTabClick;
+      onTabClick = _ref.onTabClick,
+      outerObserveContainer = _ref.outerObserveContainer;
   var tabsRef = React.useRef([]);
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
+  var intersectionObserverRef = React.useRef();
 
   var _React$useState = React.useState(),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -165,6 +167,65 @@ var Tabs = function Tabs(_ref) {
       right: documentWidth - right
     });
   }, [sticky]);
+  var stickyON = React.useCallback(function (leftOffset, rightOffset) {
+    var documentWidth = document.documentElement.clientWidth;
+    setStickyOffset({
+      left: leftOffset,
+      right: documentWidth - rightOffset
+    });
+    setSticky(true);
+  }, []);
+  var stickyOFF = React.useCallback(function () {
+    setStickyOffset({
+      left: 0,
+      right: 0
+    });
+    setSticky(false);
+  }, []);
+  var isContainerNotFitViewport = React.useCallback(function () {
+    var _a;
+
+    var containerHeight = (_a = outerObserveContainer || rootRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    return containerHeight && containerHeight > window.innerHeight;
+  }, [outerObserveContainer]);
+  var addIntersectionObserver = React.useCallback(function () {
+    var observerOptions = {
+      threshold: [0, 1]
+    };
+
+    if (isContainerNotFitViewport()) {
+      observerOptions.rootMargin = '0px 0px -100%';
+    }
+
+    intersectionObserverRef.current = new IntersectionObserver(function (entries) {
+      entries.forEach(function (_ref2) {
+        var isIntersecting = _ref2.isIntersecting,
+            _ref2$boundingClientR = _ref2.boundingClientRect,
+            top = _ref2$boundingClientR.top,
+            left = _ref2$boundingClientR.left,
+            right = _ref2$boundingClientR.right;
+
+        if (!tabListRef.current) {
+          return;
+        }
+
+        var _tabListRef$current$g = tabListRef.current.getBoundingClientRect(),
+            height = _tabListRef$current$g.height,
+            tabListNodeLeft = _tabListRef$current$g.left,
+            tabListNodeRight = _tabListRef$current$g.right;
+
+        var leftOffset = outerObserveContainer ? tabListNodeLeft : left;
+        var rightOffset = outerObserveContainer ? tabListNodeRight : right;
+        setTabListHeight(height);
+
+        if (isIntersecting) {
+          top < 0 ? stickyON(leftOffset, rightOffset) : stickyOFF();
+        } else {
+          stickyOFF();
+        }
+      });
+    }, observerOptions);
+  }, [isContainerNotFitViewport, outerObserveContainer, stickyOFF, stickyON]);
   var handleTabInnerClick = React.useCallback(function (index) {
     return function () {
       setUnderlineTransition('all');
@@ -186,6 +247,28 @@ var Tabs = function Tabs(_ref) {
   var handleNextArrowClick = React.useCallback(function () {
     swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
   }, [swiperInstance]);
+  var handleReachBeginning = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+  }, []);
+  var handleReachEnd = React.useCallback(function (swiper) {
+    setEnd(swiper.isEnd);
+  }, []);
+  var handleFromEdge = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+  }, []);
+  var addObserveEvent = React.useCallback(function () {
+    var _a;
+
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.observe(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
+  var removeObserveEvent = React.useCallback(function () {
+    var _a;
+
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
   var renderTab = React.useCallback(function (index, title, icon, href) {
     var ElementType = href ? 'a' : 'div';
     return /*#__PURE__*/React.createElement(ElementType, {
@@ -234,67 +317,26 @@ var Tabs = function Tabs(_ref) {
       }, panel);
     });
   }, [children, currentIndex, renderOnlyCurrentPanel]);
-  var handleReachBeginning = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-  }, []);
-  var handleReachEnd = React.useCallback(function (swiper) {
-    setEnd(swiper.isEnd);
-  }, []);
-  var handleFromEdge = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-    setEnd(swiper.isEnd);
-  }, []);
   React.useEffect(function () {
-    var rootRefNode = rootRef.current;
-    var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (_ref2) {
-        var isIntersecting = _ref2.isIntersecting,
-            _ref2$boundingClientR = _ref2.boundingClientRect,
-            top = _ref2$boundingClientR.top,
-            left = _ref2$boundingClientR.left,
-            right = _ref2$boundingClientR.right;
-
-        if (!sticky || !rootRefNode || !tabListRef.current) {
-          return;
-        }
-
-        var listHeight = tabListRef.current.clientHeight;
-        setTabListHeight(listHeight);
-
-        var stickyON = function stickyON(leftOffset, rightOffset) {
-          var documentWidth = document.documentElement.clientWidth;
-          setStickyOffset({
-            left: leftOffset,
-            right: documentWidth - rightOffset
-          });
-          setSticky(true);
-        };
-
-        var stickyOFF = function stickyOFF() {
-          setStickyOffset({
-            left: 0,
-            right: 0
-          });
-          setSticky(false);
-        };
+    if (!sticky) {
+      return undefined;
+    }
 
-        if (isIntersecting) {
-          top < 0 ? stickyON(left, right) : stickyOFF();
-        } else {
-          top < 0 && stickyOFF();
-        }
-      });
-    }, {
-      threshold: [0, 1]
-    });
-    rootRefNode && observer.observe(rootRefNode);
+    addIntersectionObserver();
+    addObserveEvent();
     return function () {
-      rootRefNode && observer.unobserve(rootRefNode);
+      removeObserveEvent();
     };
-  }, [calculateSticky, sticky]);
+  }, [addIntersectionObserver, sticky, addObserveEvent, removeObserveEvent]);
   React.useEffect(function () {
     var handleResize = throttle(function () {
       calculateSticky();
+
+      if (sticky && isContainerNotFitViewport()) {
+        removeObserveEvent();
+        addIntersectionObserver();
+        addObserveEvent();
+      }
     }, 300);
     var activeTabNode = tabsRef.current[currentIndex];
     var resizeObserver = new ResizeObserver(function (entries) {
@@ -311,8 +353,9 @@ var Tabs = function Tabs(_ref) {
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
+      resizeObserver.unobserve(activeTabNode);
     };
-  }, [calculateUnderline, calculateSticky, currentIndex]);
+  }, [sticky, currentIndex, addObserveEvent, calculateSticky, removeObserveEvent, calculateUnderline, addIntersectionObserver, isContainerNotFitViewport]);
   React.useEffect(function () {
     if (!swiperInstance) {
       return;
@@ -391,6 +434,7 @@ Tabs.propTypes = {
   currentIndex: PropTypes.number,
   defaultIndex: PropTypes.number,
   renderOnlyCurrentPanel: PropTypes.bool,
+  outerObserveContainer: PropTypes.oneOfType([PropTypes.elementType, PropTypes.any]),
   onTabClick: PropTypes.func
 };
 export default Tabs;

package/dist/lib/components/Tabs/Tabs.d.ts

@@ -41,6 +41,8 @@ export interface ITabsProps {
     defaultIndex?: number;
     /** Рендер содержимого только для текущего таба */
     renderOnlyCurrentPanel?: boolean;
+    /** Внешний контейнер для режима фиксация табов */
+    outerObserveContainer?: HTMLDivElement | null;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

package/dist/lib/components/Tabs/Tabs.js

@@ -97,10 +97,12 @@ var Tabs = function Tabs(_ref) {
       _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
       renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
-      onTabClick = _ref.onTabClick;
+      onTabClick = _ref.onTabClick,
+      outerObserveContainer = _ref.outerObserveContainer;
   var tabsRef = React.useRef([]);
   var rootRef = React.useRef(null);
   var tabListRef = React.useRef(null);
+  var intersectionObserverRef = React.useRef();
 
   var _React$useState = React.useState(),
       _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
@@ -194,6 +196,65 @@ var Tabs = function Tabs(_ref) {
       right: documentWidth - right
     });
   }, [sticky]);
+  var stickyON = React.useCallback(function (leftOffset, rightOffset) {
+    var documentWidth = document.documentElement.clientWidth;
+    setStickyOffset({
+      left: leftOffset,
+      right: documentWidth - rightOffset
+    });
+    setSticky(true);
+  }, []);
+  var stickyOFF = React.useCallback(function () {
+    setStickyOffset({
+      left: 0,
+      right: 0
+    });
+    setSticky(false);
+  }, []);
+  var isContainerNotFitViewport = React.useCallback(function () {
+    var _a;
+
+    var containerHeight = (_a = outerObserveContainer || rootRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight;
+    return containerHeight && containerHeight > window.innerHeight;
+  }, [outerObserveContainer]);
+  var addIntersectionObserver = React.useCallback(function () {
+    var observerOptions = {
+      threshold: [0, 1]
+    };
+
+    if (isContainerNotFitViewport()) {
+      observerOptions.rootMargin = '0px 0px -100%';
+    }
+
+    intersectionObserverRef.current = new IntersectionObserver(function (entries) {
+      entries.forEach(function (_ref2) {
+        var isIntersecting = _ref2.isIntersecting,
+            _ref2$boundingClientR = _ref2.boundingClientRect,
+            top = _ref2$boundingClientR.top,
+            left = _ref2$boundingClientR.left,
+            right = _ref2$boundingClientR.right;
+
+        if (!tabListRef.current) {
+          return;
+        }
+
+        var _tabListRef$current$g = tabListRef.current.getBoundingClientRect(),
+            height = _tabListRef$current$g.height,
+            tabListNodeLeft = _tabListRef$current$g.left,
+            tabListNodeRight = _tabListRef$current$g.right;
+
+        var leftOffset = outerObserveContainer ? tabListNodeLeft : left;
+        var rightOffset = outerObserveContainer ? tabListNodeRight : right;
+        setTabListHeight(height);
+
+        if (isIntersecting) {
+          top < 0 ? stickyON(leftOffset, rightOffset) : stickyOFF();
+        } else {
+          stickyOFF();
+        }
+      });
+    }, observerOptions);
+  }, [isContainerNotFitViewport, outerObserveContainer, stickyOFF, stickyON]);
   var handleTabInnerClick = React.useCallback(function (index) {
     return function () {
       setUnderlineTransition('all');
@@ -215,6 +276,28 @@ var Tabs = function Tabs(_ref) {
   var handleNextArrowClick = React.useCallback(function () {
     swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideNext();
   }, [swiperInstance]);
+  var handleReachBeginning = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+  }, []);
+  var handleReachEnd = React.useCallback(function (swiper) {
+    setEnd(swiper.isEnd);
+  }, []);
+  var handleFromEdge = React.useCallback(function (swiper) {
+    setBeginning(swiper.isBeginning);
+    setEnd(swiper.isEnd);
+  }, []);
+  var addObserveEvent = React.useCallback(function () {
+    var _a;
+
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.observe(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
+  var removeObserveEvent = React.useCallback(function () {
+    var _a;
+
+    var rootRefNode = rootRef.current;
+    rootRefNode && ((_a = intersectionObserverRef.current) === null || _a === void 0 ? void 0 : _a.unobserve(outerObserveContainer || rootRefNode));
+  }, [outerObserveContainer]);
   var renderTab = React.useCallback(function (index, title, icon, href) {
     var ElementType = href ? 'a' : 'div';
     return /*#__PURE__*/React.createElement(ElementType, {
@@ -263,67 +346,26 @@ var Tabs = function Tabs(_ref) {
       }, panel);
     });
   }, [children, currentIndex, renderOnlyCurrentPanel]);
-  var handleReachBeginning = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-  }, []);
-  var handleReachEnd = React.useCallback(function (swiper) {
-    setEnd(swiper.isEnd);
-  }, []);
-  var handleFromEdge = React.useCallback(function (swiper) {
-    setBeginning(swiper.isBeginning);
-    setEnd(swiper.isEnd);
-  }, []);
   React.useEffect(function () {
-    var rootRefNode = rootRef.current;
-    var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (_ref2) {
-        var isIntersecting = _ref2.isIntersecting,
-            _ref2$boundingClientR = _ref2.boundingClientRect,
-            top = _ref2$boundingClientR.top,
-            left = _ref2$boundingClientR.left,
-            right = _ref2$boundingClientR.right;
-
-        if (!sticky || !rootRefNode || !tabListRef.current) {
-          return;
-        }
-
-        var listHeight = tabListRef.current.clientHeight;
-        setTabListHeight(listHeight);
-
-        var stickyON = function stickyON(leftOffset, rightOffset) {
-          var documentWidth = document.documentElement.clientWidth;
-          setStickyOffset({
-            left: leftOffset,
-            right: documentWidth - rightOffset
-          });
-          setSticky(true);
-        };
-
-        var stickyOFF = function stickyOFF() {
-          setStickyOffset({
-            left: 0,
-            right: 0
-          });
-          setSticky(false);
-        };
+    if (!sticky) {
+      return undefined;
+    }
 
-        if (isIntersecting) {
-          top < 0 ? stickyON(left, right) : stickyOFF();
-        } else {
-          top < 0 && stickyOFF();
-        }
-      });
-    }, {
-      threshold: [0, 1]
-    });
-    rootRefNode && observer.observe(rootRefNode);
+    addIntersectionObserver();
+    addObserveEvent();
     return function () {
-      rootRefNode && observer.unobserve(rootRefNode);
+      removeObserveEvent();
     };
-  }, [calculateSticky, sticky]);
+  }, [addIntersectionObserver, sticky, addObserveEvent, removeObserveEvent]);
   React.useEffect(function () {
     var handleResize = (0, _lodash["default"])(function () {
       calculateSticky();
+
+      if (sticky && isContainerNotFitViewport()) {
+        removeObserveEvent();
+        addIntersectionObserver();
+        addObserveEvent();
+      }
     }, 300);
     var activeTabNode = tabsRef.current[currentIndex];
     var resizeObserver = new ResizeObserver(function (entries) {
@@ -340,8 +382,9 @@ var Tabs = function Tabs(_ref) {
     window.addEventListener('resize', handleResize);
     return function () {
       window.removeEventListener('resize', handleResize);
+      resizeObserver.unobserve(activeTabNode);
     };
-  }, [calculateUnderline, calculateSticky, currentIndex]);
+  }, [sticky, currentIndex, addObserveEvent, calculateSticky, removeObserveEvent, calculateUnderline, addIntersectionObserver, isContainerNotFitViewport]);
   React.useEffect(function () {
     if (!swiperInstance) {
       return;
@@ -420,6 +463,7 @@ Tabs.propTypes = {
   currentIndex: _propTypes["default"].number,
   defaultIndex: _propTypes["default"].number,
   renderOnlyCurrentPanel: _propTypes["default"].bool,
+  outerObserveContainer: _propTypes["default"].oneOfType([_propTypes["default"].elementType, _propTypes["default"].any]),
   onTabClick: _propTypes["default"].func
 };
 var _default = Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "files": [
     "dist",
     "styles"
@@ -53,7 +53,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^0.1.1",
+    "@megafon/ui-icons": "^0.2.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/react-hooks": "^7.0.1",
     "@types/enzyme": "^3.10.5",
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "1c92184284a8224e5832b4c2218231edfcbb4d5f"
+  "gitHead": "28c22a646a8c5c18ef4a4060c1b1232aa45db14c"
 }