@megafon/ui-core 2.0.0-beta.99 → 2.1.2

package/dist/lib/components/Tabs/Tabs.css

@@ -5,43 +5,44 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-tabs__swiper {
+.mfui-tabs__swiper {
   font-family: inherit;
   font-size: 15px;
   line-height: 24px;
   font-weight: 500;
   position: relative;
-  overflow: hidden;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
+  overflow: hidden;
 }
-.mfui-beta-tabs__swiper:before,
-.mfui-beta-tabs__swiper:after {
+.mfui-tabs__swiper:before,
+.mfui-tabs__swiper:after {
   content: '';
   position: absolute;
-  z-index: 1;
   top: 0;
   bottom: 0;
+  z-index: 1;
   width: 64px;
+  pointer-events: none;
 }
-.mfui-beta-tabs__swiper:before {
+.mfui-tabs__swiper:before {
   left: 0;
   background: -webkit-gradient(linear, left top, right top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to right, #FFFFFF, rgba(255, 255, 255, 0));
 }
-.mfui-beta-tabs__swiper:after {
+.mfui-tabs__swiper:after {
   right: 0;
   background: -webkit-gradient(linear, right top, left top, from(#FFFFFF), to(rgba(255, 255, 255, 0)));
   background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
 }
-.mfui-beta-tabs__swiper_beginning:before {
+.mfui-tabs__swiper_beginning:before {
   display: none;
 }
-.mfui-beta-tabs__swiper_end:after {
+.mfui-tabs__swiper_end:after {
   display: none;
 }
-.mfui-beta-tabs .swiper-wrapper {
+.mfui-tabs .swiper-wrapper {
   position: relative;
   z-index: 0;
   display: -webkit-box;
@@ -50,70 +51,67 @@ h5 {
   max-width: 100%;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-tabs .swiper-wrapper {
+  .mfui-tabs .swiper-wrapper {
     width: 100%;
   }
 }
-.mfui-beta-tabs__slide {
+.mfui-tabs__slide {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-tabs__slide {
+  .mfui-tabs__slide {
     -webkit-box-flex: 1;
         -ms-flex-positive: 1;
             flex-grow: 1;
   }
 }
-.mfui-beta-tabs__tab {
-  border-bottom: 1px solid #D8D8D8;
-}
-.mfui-beta-tabs__tab-inner {
-  color: #333333;
-  fill: #333333;
-  white-space: nowrap;
-  -webkit-box-sizing: content-box;
-          box-sizing: content-box;
+.mfui-tabs__tab-inner {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  height: 32px;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
-  cursor: pointer;
+  -webkit-box-sizing: content-box;
+          box-sizing: content-box;
+  height: 32px;
+  color: #333333;
+  white-space: nowrap;
   text-decoration: none;
+  cursor: pointer;
+  fill: #333333;
 }
-.mfui-beta-tabs__tab-inner:hover {
+.mfui-tabs__tab-inner:hover {
   color: #00B956;
   fill: #00B956;
 }
-.mfui-beta-tabs__tab-inner_current {
+.mfui-tabs__tab-inner_current {
   color: #00B956;
   fill: #00B956;
 }
-.mfui-beta-tabs__tab-icon {
+.mfui-tabs__tab-icon {
   width: 32px;
   height: 32px;
 }
-.mfui-beta-tabs__tab-icon:not(:last-child) {
+.mfui-tabs__tab-icon:not(:last-child) {
   margin-right: 8px;
 }
-.mfui-beta-tabs__tab-icon svg {
+.mfui-tabs__tab-icon svg {
   width: 100%;
   height: 100%;
 }
-.mfui-beta-tabs__panel {
+.mfui-tabs__panel {
   display: none;
 }
-.mfui-beta-tabs__panel_current {
+.mfui-tabs__panel_current {
   display: block;
 }
-.mfui-beta-tabs__underline {
+.mfui-tabs__underline {
   position: absolute;
   bottom: 0;
   left: 0;
@@ -122,104 +120,119 @@ h5 {
   -webkit-transition-duration: 0.3s;
           transition-duration: 0.3s;
 }
-.mfui-beta-tabs__arrow {
+.mfui-tabs__arrow {
   position: absolute;
-  z-index: 2;
   top: 50%;
-  -webkit-transform: translateY(-50%);
-          transform: translateY(-50%);
+  z-index: 2;
   display: block;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background-color: #333333;
-  fill: #FFFFFF;
+  -webkit-transform: translateY(-50%);
+          transform: translateY(-50%);
   cursor: pointer;
+  fill: #FFFFFF;
 }
 @media screen and (max-width: 1023px) {
-  .mfui-beta-tabs__arrow {
+  .mfui-tabs__arrow {
     display: none;
   }
 }
-.mfui-beta-tabs__arrow_prev {
+.mfui-tabs__arrow_prev {
   left: 0;
 }
-.mfui-beta-tabs__arrow_next {
+.mfui-tabs__arrow_next {
   right: 0;
 }
-.mfui-beta-tabs__arrow_hide {
+.mfui-tabs__arrow_hide {
   display: none;
 }
-.mfui-beta-tabs_size_small .mfui-beta-tabs__slide:not(:last-child) .mfui-beta-tabs__tab {
+.mfui-tabs_size_small .mfui-tabs__slide:not(:last-child) .mfui-tabs__tab {
   padding-right: 40px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-tabs_size_small .mfui-beta-tabs__slide:not(:last-child) .mfui-beta-tabs__tab {
+  .mfui-tabs_size_small .mfui-tabs__slide:not(:last-child) .mfui-tabs__tab {
     padding-right: 32px;
   }
 }
-.mfui-beta-tabs_size_small .mfui-beta-tabs__tab-inner {
-  height: 24px;
-  padding: 7px 0;
+.mfui-tabs_size_small .mfui-tabs__tab-inner {
   -webkit-box-pack: start;
       -ms-flex-pack: start;
           justify-content: start;
+  height: 24px;
+  padding: 7px 0;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-tabs_size_small .mfui-beta-tabs__tab-inner {
+  .mfui-tabs_size_small .mfui-tabs__tab-inner {
     padding: 3px 0;
   }
 }
-.mfui-beta-tabs_size_small .mfui-beta-tabs__tab-icon {
+.mfui-tabs_size_small .mfui-tabs__tab-icon {
   width: 24px;
   height: 24px;
 }
-.mfui-beta-tabs_size_medium .mfui-beta-tabs__tab-inner {
+.mfui-tabs_size_medium .mfui-tabs__tab-inner {
   padding: 7px 24px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-tabs_size_medium .mfui-beta-tabs__tab-inner {
+  .mfui-tabs_size_medium .mfui-tabs__tab-inner {
     padding: 3px 16px;
   }
 }
-.mfui-beta-tabs_size_large .mfui-beta-tabs__swiper {
+.mfui-tabs_size_large .mfui-tabs__swiper {
+  font-weight: 500;
   font-size: 18px;
   line-height: 24px;
-  font-weight: 500;
   letter-spacing: 0.5px;
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-tabs_size_large .mfui-beta-tabs__swiper {
+  .mfui-tabs_size_large .mfui-tabs__swiper {
     font-size: 20px;
     line-height: 28px;
   }
 }
-.mfui-beta-tabs_size_large .mfui-beta-tabs__tab-inner {
+.mfui-tabs_size_large .mfui-tabs__tab-inner {
   padding: 11px 24px;
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-tabs_size_large .mfui-beta-tabs__tab-inner {
+  .mfui-tabs_size_large .mfui-tabs__tab-inner {
     padding: 7px 16px;
   }
 }
-.mfui-beta-tabs_h-align_center .mfui-beta-tabs__swiper {
+.mfui-tabs_h-align_center .mfui-tabs__swiper {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
 }
+.mfui-tabs_h-align_center .mfui-tabs__tab {
+  border-bottom: 1px solid #D8D8D8;
+}
+.mfui-tabs_h-align_left .mfui-tabs__swiper-wrapper {
+  position: relative;
+}
+.mfui-tabs_h-align_left .mfui-tabs__swiper-wrapper:before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background-color: #D8D8D8;
+}
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-tabs_indents .mfui-beta-tabs__swiper {
+  .mfui-tabs_indents .mfui-tabs__swiper {
     margin: 0 -48px;
     padding: 0 48px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-tabs_indents .mfui-beta-tabs__swiper {
+  .mfui-tabs_indents .mfui-tabs__swiper {
     margin: 0 -16px;
     padding: 0 16px;
   }
 }
-.mfui-beta-tabs_sticky .mfui-beta-tabs__swiper-wrapper {
+.mfui-tabs_sticky .mfui-tabs__swiper-wrapper {
   position: fixed;
   top: 0;
   right: 0;
@@ -227,35 +240,35 @@ h5 {
   z-index: 100;
   background-color: #FFFFFF;
 }
-.mfui-beta-tabs_tab-color_green:not(.mfui-beta-tabs_sticky) .mfui-beta-tabs__swiper:before {
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:before {
   left: 0;
   background: -webkit-gradient(linear, left top, right top, from(#00B956), to(transparent));
   background: linear-gradient(to right, #00B956, transparent);
 }
-.mfui-beta-tabs_tab-color_green:not(.mfui-beta-tabs_sticky) .mfui-beta-tabs__swiper:after {
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__swiper:after {
   right: 0;
   background: -webkit-gradient(linear, right top, left top, from(#00B956), to(transparent));
   background: linear-gradient(to left, #00B956, transparent);
 }
-.mfui-beta-tabs_tab-color_green:not(.mfui-beta-tabs_sticky) .mfui-beta-tabs__tab {
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab {
   border-color: rgba(237, 237, 237, 0.5);
 }
-.mfui-beta-tabs_tab-color_green:not(.mfui-beta-tabs_sticky) .mfui-beta-tabs__tab-inner {
-  color: rgba(255, 255, 255, 0.5);
-  fill: rgba(255, 255, 255, 0.5);
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner {
+  color: #FFFFFF80;
+  fill: #FFFFFF80;
 }
-.mfui-beta-tabs_tab-color_green:not(.mfui-beta-tabs_sticky) .mfui-beta-tabs__tab-inner:hover {
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:hover {
   color: #FFFFFF;
   fill: #FFFFFF;
 }
-.mfui-beta-tabs_tab-color_green:not(.mfui-beta-tabs_sticky) .mfui-beta-tabs__tab-inner_current {
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {
   color: #FFFFFF;
   fill: #FFFFFF;
 }
-.mfui-beta-tabs_tab-color_green:not(.mfui-beta-tabs_sticky) .mfui-beta-tabs__underline {
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__underline {
   background-color: #FFFFFF;
 }
-.mfui-beta-tabs_tab-color_green:not(.mfui-beta-tabs_sticky) .mfui-beta-tabs__arrow {
+.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__arrow {
   background-color: #FFFFFF;
   fill: #00B956;
 }

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

@@ -24,6 +24,8 @@ export interface ITabsProps {
     classes?: {
         root?: string;
         innerIndents?: string;
+        tab?: string;
+        activeTab?: string;
     };
     /** Размер табов */
     size?: TabSizeType;
@@ -37,6 +39,8 @@ export interface ITabsProps {
     currentIndex?: number;
     /** Индекс активного таба по умолчанию (не работает в режиме управления табами снаружи) */
     defaultIndex?: number;
+    /** Рендер содержимого только для текущего таба */
+    renderOnlyCurrentPanel?: boolean;
     /** Обработчика клика по табам */
     onTabClick?: (index: number) => void;
     children: Array<React.ReactElement<ITabProps>>;

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

@@ -2,19 +2,13 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-require("core-js/modules/es.array.map");
-
-require("core-js/modules/es.array.reduce");
-
-require("core-js/modules/es.array.splice");
-
-require("core-js/modules/es.object.values");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.TabColorTheme = exports.TabHAlign = exports.TabSize = void 0;
 
+require("core-js/modules/es.array.for-each");
+
 require("core-js/modules/es.array.map");
 
 require("core-js/modules/es.array.reduce");
@@ -23,6 +17,8 @@ require("core-js/modules/es.array.splice");
 
 require("core-js/modules/es.object.values");
 
+require("core-js/modules/web.dom-collections.for-each");
+
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -31,13 +27,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var React = _interopRequireWildcard(require("react"));
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _react2 = require("swiper/react");
+var _uiHelpers = require("@megafon/ui-helpers");
 
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
 
-var _cnCreate = _interopRequireDefault(require("../../utils/cnCreate"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react2 = require("swiper/react");
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
@@ -77,7 +73,7 @@ var TabColorTheme = {
   GREEN: 'green'
 };
 exports.TabColorTheme = TabColorTheme;
-var cn = (0, _cnCreate["default"])('mfui-beta-tabs');
+var cn = (0, _uiHelpers.cnCreate)('mfui-tabs');
 
 var Tabs = function Tabs(_ref) {
   var className = _ref.className,
@@ -85,6 +81,8 @@ var Tabs = function Tabs(_ref) {
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
   var rootClass = _ref$classes.root,
       innerIndentsClass = _ref$classes.innerIndents,
+      tabClass = _ref$classes.tab,
+      activeTabClass = _ref$classes.activeTab,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
       _ref$hAlign = _ref.hAlign,
@@ -96,6 +94,8 @@ var Tabs = function Tabs(_ref) {
       _ref$defaultIndex = _ref.defaultIndex,
       defaultIndex = _ref$defaultIndex === void 0 ? 0 : _ref$defaultIndex,
       outerIndex = _ref.currentIndex,
+      _ref$renderOnlyCurren = _ref.renderOnlyCurrentPanel,
+      renderOnlyCurrentPanel = _ref$renderOnlyCurren === void 0 ? false : _ref$renderOnlyCurren,
       children = _ref.children,
       onTabClick = _ref.onTabClick;
   var tabsRef = React.useRef([]);
@@ -186,24 +186,15 @@ var Tabs = function Tabs(_ref) {
     }
 
     var _rootRef$current$getB = rootRef.current.getBoundingClientRect(),
-        top = _rootRef$current$getB.top,
         left = _rootRef$current$getB.left,
         right = _rootRef$current$getB.right;
 
     var documentWidth = document.documentElement.clientWidth;
-    var listHeight = tabListRef.current.clientHeight;
-    var rootHeight = rootRef.current.clientHeight;
-    var contentHeight = rootHeight - listHeight;
-    var needSetSticky = top < 0 && Math.abs(top) < contentHeight;
-    var stickyLeftOffset = needSetSticky ? left : 0;
-    var stickyRightOffset = needSetSticky ? documentWidth - right : 0;
-    setTabListHeight(needSetSticky ? listHeight : 'auto');
-    setSticky(needSetSticky);
     setStickyOffset({
-      left: stickyLeftOffset,
-      right: stickyRightOffset
+      left: left,
+      right: documentWidth - right
     });
-  }, [sticky]);
+  }, [stickyOffset, isSticky]);
   var handleTabInnerClick = React.useCallback(function (index) {
     return function () {
       setUnderlineTransition('all');
@@ -212,8 +203,10 @@ var Tabs = function Tabs(_ref) {
       if (outerIndex === undefined) {
         setInnerIndex(index);
       }
+
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(index);
     };
-  }, [onTabClick, outerIndex]);
+  }, [onTabClick, outerIndex, swiperInstance]);
   var handleSwiper = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
   }, []);
@@ -243,23 +236,32 @@ var Tabs = function Tabs(_ref) {
           title = _child$props.title,
           icon = _child$props.icon,
           href = _child$props.href,
-          renderTabWrapper = _child$props.renderTabWrapper;
+          renderTabWrapper = _child$props.renderTabWrapper,
+          dataAttrs = _child$props.dataAttrs;
       var tab = renderTab(i, title, icon, href);
+      var activeTabClassName = currentIndex === i ? activeTabClass : undefined;
       return /*#__PURE__*/React.createElement(_react2.SwiperSlide, {
         className: cn('slide')
-      }, /*#__PURE__*/React.createElement("div", {
-        className: cn('tab'),
+      }, /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
+        className: cn('tab', [tabClass, activeTabClassName]),
         ref: setTabRef
-      }, renderTabWrapper ? renderTabWrapper(tab) : tab));
+      }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), renderTabWrapper ? renderTabWrapper(tab) : tab));
     });
   }, [renderTab, children]);
   var renderPanels = React.useCallback(function () {
     return React.Children.map(children, function (child, i) {
+      var panel = child.props.children;
+      var isCurrentPanel = currentIndex === i;
+
+      if (!panel || renderOnlyCurrentPanel && !isCurrentPanel) {
+        return null;
+      }
+
       return /*#__PURE__*/React.createElement("div", {
         className: cn('panel', {
-          current: currentIndex === i
+          current: isCurrentPanel
         })
-      }, child);
+      }, panel);
     });
   }, [children, currentIndex]);
   var handleReachBeginning = React.useCallback(function (swiper) {
@@ -273,10 +275,50 @@ var Tabs = function Tabs(_ref) {
     setEnd(swiper.isEnd);
   }, []);
   React.useEffect(function () {
-    var handleScroll = (0, _lodash["default"])(calculateSticky, 50);
-    document.addEventListener('scroll', handleScroll);
+    var observer = new IntersectionObserver(function (entries) {
+      entries.forEach(function (_ref3) {
+        var isIntersecting = _ref3.isIntersecting,
+            _ref3$boundingClientR = _ref3.boundingClientRect,
+            top = _ref3$boundingClientR.top,
+            left = _ref3$boundingClientR.left,
+            right = _ref3$boundingClientR.right;
+
+        if (!sticky || !rootRef.current || !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 (isIntersecting) {
+          top < 0 ? stickyON(left, right) : stickyOFF();
+        } else {
+          top < 0 && stickyOFF();
+        }
+      });
+    }, {
+      threshold: [0, 1]
+    });
+    rootRef.current && observer.observe(rootRef.current);
     return function () {
-      document.removeEventListener('scroll', handleScroll);
+      rootRef.current && observer.unobserve(rootRef.current);
     };
   }, [calculateSticky]);
   React.useEffect(function () {
@@ -357,7 +399,9 @@ Tabs.propTypes = {
   className: _propTypes["default"].string,
   classes: _propTypes["default"].shape({
     root: _propTypes["default"].string,
-    innerIndents: _propTypes["default"].string
+    innerIndents: _propTypes["default"].string,
+    tab: _propTypes["default"].string,
+    activeTab: _propTypes["default"].string
   }),
   size: _propTypes["default"].oneOf(Object.values(TabSize)),
   hAlign: _propTypes["default"].oneOf(Object.values(TabHAlign)),
@@ -365,6 +409,7 @@ Tabs.propTypes = {
   sticky: _propTypes["default"].bool,
   currentIndex: _propTypes["default"].number,
   defaultIndex: _propTypes["default"].number,
+  renderOnlyCurrentPanel: _propTypes["default"].bool,
   onTabClick: _propTypes["default"].func
 };
 var _default = Tabs;