@megafon/ui-core 6.2.1 → 7.0.0

package/dist/es/components/Banner/Banner.js

@@ -2,17 +2,28 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.array.map.js";
-import "core-js/modules/es.object.values.js";
+/* eslint-disable global-require */
 import * as React from 'react';
 import { cnCreate, detectTouch, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
-import SwiperCore, { Autoplay } from 'swiper';
-import { Swiper, SwiperSlide } from 'swiper/react';
 import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
 import BannerDot from "./BannerDot";
 import SLIDES_SETTINGS from "./slidesSettings";
 import "./Banner.css";
-SwiperCore.use([Autoplay]);
+var Autoplay = null;
+var Swiper = null;
+var SwiperSlide = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  var SwiperAll = require('swiper/react');
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  var Modules = require('swiper/modules');
+  Swiper = SwiperAll.Swiper;
+  SwiperSlide = SwiperAll.SwiperSlide;
+  Autoplay = Modules.Autoplay;
+} catch (e) {
+  // eslint-disable-next-line no-console
+  console.warn("\n        WARNING: megafon/ui-core is using the latest version of swiper.       \n        For more information about server-side rendering\n        please check the Banner component documentation at:\n        https://ui.megafon.ru/components/banner\n    ");
+}
 export var BackgroundColor = {
   TRANSPARENT: 'transparent',
   GREEN: 'green',
@@ -29,7 +40,6 @@ export var NavTheme = {
   LIGHT: 'light',
   DARK: 'dark'
 };
-
 var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   return {
     delay: delay,
@@ -38,97 +48,84 @@ var getAutoPlayConfig = function getAutoPlayConfig(delay) {
     stopOnLastSlide: true
   };
 };
-
 var cn = cnCreate('mfui-banner');
-
 var Banner = function Banner(_ref) {
   var className = _ref.className,
-      _ref$classes = _ref.classes,
-      classes = _ref$classes === void 0 ? {} : _ref$classes,
-      dataAttrs = _ref.dataAttrs,
-      _ref$withPaginationBo = _ref.withPaginationBottomOffset,
-      withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
-      _ref$autoPlay = _ref.autoPlay,
-      autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
-      _ref$autoPlayDelay = _ref.autoPlayDelay,
-      autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
-      _ref$loop = _ref.loop,
-      loop = _ref$loop === void 0 ? false : _ref$loop,
-      _ref$pauseOnHover = _ref.pauseOnHover,
-      pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover,
-      _ref$backgroundColor = _ref.backgroundColor,
-      backgroundColor = _ref$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref$backgroundColor,
-      _ref$radius = _ref.radius,
-      radius = _ref$radius === void 0 ? Radius.ROUNDED : _ref$radius,
-      _ref$arrowTheme = _ref.arrowTheme,
-      arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.DARK : _ref$arrowTheme,
-      _ref$autoHeight = _ref.autoHeight,
-      autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
-      noIncreaseAutoplayDelay = _ref.noIncreaseAutoplayDelay,
-      showNextSlide = _ref.showNextSlide,
-      _ref$children = _ref.children,
-      children = _ref$children === void 0 ? [] : _ref$children,
-      getSwiper = _ref.getSwiper,
-      onNextClick = _ref.onNextClick,
-      onPrevClick = _ref.onPrevClick,
-      onDotClick = _ref.onDotClick,
-      onChange = _ref.onChange;
+    _ref$classes = _ref.classes,
+    classes = _ref$classes === void 0 ? {} : _ref$classes,
+    dataAttrs = _ref.dataAttrs,
+    _ref$withPaginationBo = _ref.withPaginationBottomOffset,
+    withPaginationBottomOffset = _ref$withPaginationBo === void 0 ? false : _ref$withPaginationBo,
+    _ref$autoPlay = _ref.autoPlay,
+    autoPlay = _ref$autoPlay === void 0 ? false : _ref$autoPlay,
+    _ref$autoPlayDelay = _ref.autoPlayDelay,
+    autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
+    _ref$loop = _ref.loop,
+    loop = _ref$loop === void 0 ? false : _ref$loop,
+    _ref$pauseOnHover = _ref.pauseOnHover,
+    pauseOnHover = _ref$pauseOnHover === void 0 ? false : _ref$pauseOnHover,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref$backgroundColor,
+    _ref$radius = _ref.radius,
+    radius = _ref$radius === void 0 ? Radius.ROUNDED : _ref$radius,
+    _ref$arrowTheme = _ref.arrowTheme,
+    arrowTheme = _ref$arrowTheme === void 0 ? ArrowTheme.DARK : _ref$arrowTheme,
+    _ref$autoHeight = _ref.autoHeight,
+    autoHeight = _ref$autoHeight === void 0 ? false : _ref$autoHeight,
+    noIncreaseAutoplayDelay = _ref.noIncreaseAutoplayDelay,
+    showNextSlide = _ref.showNextSlide,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? [] : _ref$children,
+    getSwiper = _ref.getSwiper,
+    onNextClick = _ref.onNextClick,
+    onPrevClick = _ref.onPrevClick,
+    onDotClick = _ref.onDotClick,
+    onChange = _ref.onChange;
   var isSingleSlide = React.Children.count(children) === 1;
   var canAutoPlay = autoPlay && !isSingleSlide;
-
   var _React$useState = React.useState(false),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      isTouch = _React$useState2[0],
-      setTouch = _React$useState2[1];
-
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    isTouch = _React$useState2[0],
+    setTouch = _React$useState2[1];
   var _React$useState3 = React.useState(),
-      _React$useState4 = _slicedToArray(_React$useState3, 2),
-      swiperInstance = _React$useState4[0],
-      setSwiperInstance = _React$useState4[1];
-
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    swiperInstance = _React$useState4[0],
+    setSwiperInstance = _React$useState4[1];
   var _React$useState5 = React.useState(true),
-      _React$useState6 = _slicedToArray(_React$useState5, 2),
-      isBeginning = _React$useState6[0],
-      setBeginning = _React$useState6[1];
-
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    isBeginning = _React$useState6[0],
+    setBeginning = _React$useState6[1];
   var _React$useState7 = React.useState(false),
-      _React$useState8 = _slicedToArray(_React$useState7, 2),
-      isEnd = _React$useState8[0],
-      setEnd = _React$useState8[1];
-
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isEnd = _React$useState8[0],
+    setEnd = _React$useState8[1];
   var _React$useState9 = React.useState(canAutoPlay),
-      _React$useState10 = _slicedToArray(_React$useState9, 2),
-      isAutoPlaying = _React$useState10[0],
-      setAutoPlaying = _React$useState10[1];
-
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    isAutoPlaying = _React$useState10[0],
+    setAutoPlaying = _React$useState10[1];
   var _React$useState11 = React.useState(0),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      activeIndex = _React$useState12[0],
-      setActiveIndex = _React$useState12[1];
-
+    _React$useState12 = _slicedToArray(_React$useState11, 2),
+    activeIndex = _React$useState12[0],
+    setActiveIndex = _React$useState12[1];
   var _React$useState13 = React.useState(autoPlayDelay),
-      _React$useState14 = _slicedToArray(_React$useState13, 2),
-      delay = _React$useState14[0],
-      setDelay = _React$useState14[1];
-
+    _React$useState14 = _slicedToArray(_React$useState13, 2),
+    delay = _React$useState14[0],
+    setDelay = _React$useState14[1];
   var _React$useState15 = React.useState(false),
-      _React$useState16 = _slicedToArray(_React$useState15, 2),
-      isIncreasedDelay = _React$useState16[0],
-      setIsIncreasedDelay = _React$useState16[1];
-
+    _React$useState16 = _slicedToArray(_React$useState15, 2),
+    isIncreasedDelay = _React$useState16[0],
+    setIsIncreasedDelay = _React$useState16[1];
   var showDotTimer = loop ? isAutoPlaying : isAutoPlaying && !isEnd;
   var dotTimerDelay = delay / 1000;
   var rootRef = React.useRef(null);
   var increaseAutoplayDelay = React.useCallback(function (_ref2) {
     var params = _ref2.params,
-        autoplay = _ref2.autoplay;
-
+      autoplay = _ref2.autoplay;
     if (_typeof(params.autoplay) !== 'object' || !canAutoPlay || noIncreaseAutoplayDelay) {
       return;
     }
-
-    autoplay.stop(); // eslint-disable-next-line no-param-reassign
-
+    autoplay.stop();
+    // eslint-disable-next-line no-param-reassign
     params.autoplay.delay = autoPlayDelay * 3;
     setDelay(autoPlayDelay * 3);
     setIsIncreasedDelay(true);
@@ -138,7 +135,6 @@ var Banner = function Banner(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slidePrev();
     onPrevClick === null || onPrevClick === void 0 ? void 0 : onPrevClick(swiperInstance.realIndex);
     !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
@@ -147,7 +143,6 @@ var Banner = function Banner(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     swiperInstance.slideNext();
     onNextClick === null || onNextClick === void 0 ? void 0 : onNextClick(swiperInstance.realIndex);
     !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
@@ -156,13 +151,11 @@ var Banner = function Banner(_ref) {
     if (!swiperInstance) {
       return;
     }
-
     if (loop) {
       swiperInstance.slideToLoop(index);
     } else {
       swiperInstance.slideTo(index);
     }
-
     onDotClick === null || onDotClick === void 0 ? void 0 : onDotClick(swiperInstance.realIndex);
     !isIncreasedDelay && increaseAutoplayDelay(swiperInstance);
   }, [swiperInstance, loop, onDotClick, isIncreasedDelay, increaseAutoplayDelay]);
@@ -171,9 +164,8 @@ var Banner = function Banner(_ref) {
   }, []);
   var handleReachEnd = React.useCallback(function (_ref3) {
     var params = _ref3.params,
-        autoplay = _ref3.autoplay;
+      autoplay = _ref3.autoplay;
     setEnd(true);
-
     if (!params.loop && autoplay.running) {
       autoplay.stop();
     }
@@ -196,11 +188,9 @@ var Banner = function Banner(_ref) {
   }, []);
   React.useEffect(function () {
     var rootElement = rootRef.current;
-
     if (!pauseOnHover || !canAutoPlay) {
       return;
     }
-
     rootElement === null || rootElement === void 0 ? void 0 : rootElement.addEventListener('mouseenter', function () {
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
       setAutoPlaying(false);
@@ -212,12 +202,10 @@ var Banner = function Banner(_ref) {
   }, [canAutoPlay, pauseOnHover, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
   React.useEffect(function () {
     setAutoPlaying(canAutoPlay);
-
     if (canAutoPlay) {
       swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.start();
       return;
     }
-
     swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay.stop();
   }, [canAutoPlay, swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.autoplay]);
   var renderNavArrows = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(NavArrow, {
@@ -248,7 +236,7 @@ var Banner = function Banner(_ref) {
     className: cn('pagination', {
       'bottom-offset': withPaginationBottomOffset
     }, [classes.pagination])
-  }), React.Children.map(children, function (_, i) {
+  }), children && React.Children.map(children, function (_, i) {
     return /*#__PURE__*/React.createElement(BannerDot, {
       className: cn('dot', [classes.dot]),
       dataAttrs: {
@@ -262,6 +250,9 @@ var Banner = function Banner(_ref) {
       onClick: handleDotClick
     });
   }));
+  if (!Swiper || !Autoplay || !SwiperSlide) {
+    return null;
+  }
   return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
     className: cn({
       'auto-height': autoHeight,
@@ -277,7 +268,7 @@ var Banner = function Banner(_ref) {
     className: cn('swiper', [classes.swiper]),
     loop: loop,
     autoplay: canAutoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
-    watchSlidesVisibility: true,
+    watchSlidesProgress: true,
     noSwipingClass: classes.noSwiping,
     breakpoints: showNextSlide ? SLIDES_SETTINGS : undefined,
     onSwiper: handleSwiper,
@@ -285,8 +276,9 @@ var Banner = function Banner(_ref) {
     onReachEnd: handleReachEnd,
     onFromEdge: handleFromEdge,
     onSlideChange: handleSlideChange,
-    onTouchEnd: increaseAutoplayDelay
-  }), React.Children.map(children, function (child, i) {
+    onTouchEnd: increaseAutoplayDelay,
+    modules: [Autoplay]
+  }), children && React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(SwiperSlide, _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.slide, i + 1), {
       className: cn('slide', [classes.slide]),
       key: i
@@ -295,44 +287,4 @@ var Banner = function Banner(_ref) {
     }));
   })), !isSingleSlide && renderNavArrows), !isSingleSlide && renderPagination);
 };
-
-Banner.propTypes = {
-  className: PropTypes.string,
-  classes: PropTypes.shape({
-    swiper: PropTypes.string,
-    slide: PropTypes.string,
-    arrow: PropTypes.string,
-    arrowPrev: PropTypes.string,
-    arrowNext: PropTypes.string,
-    pagination: PropTypes.string,
-    dot: PropTypes.string,
-    noSwiping: PropTypes.string
-  }),
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    swiper: PropTypes.objectOf(PropTypes.string.isRequired),
-    slide: PropTypes.objectOf(PropTypes.string.isRequired),
-    arrowPrev: PropTypes.objectOf(PropTypes.string.isRequired),
-    arrowNext: PropTypes.objectOf(PropTypes.string.isRequired),
-    pagination: PropTypes.objectOf(PropTypes.string.isRequired),
-    dot: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  withPaginationBottomOffset: PropTypes.bool,
-  autoPlay: PropTypes.bool,
-  autoPlayDelay: PropTypes.number,
-  loop: PropTypes.bool,
-  pauseOnHover: PropTypes.bool,
-  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
-  radius: PropTypes.oneOf(Object.values(Radius)),
-  navTheme: PropTypes.oneOf(Object.values(NavTheme)),
-  arrowTheme: PropTypes.oneOf(Object.values(ArrowTheme)),
-  autoHeight: PropTypes.bool,
-  noIncreaseAutoplayDelay: PropTypes.bool,
-  showNextSlide: PropTypes.bool,
-  getSwiper: PropTypes.func,
-  onNextClick: PropTypes.func,
-  onPrevClick: PropTypes.func,
-  onDotClick: PropTypes.func,
-  onChange: PropTypes.func
-};
 export default Banner;

package/dist/es/components/Banner/BannerDot.css

@@ -1,69 +1 @@
-.mfui-banner-dot {
-  position: relative;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  margin: -2px;
-  padding: 2px;
-  cursor: pointer;
-}
-.mfui-banner-dot:before {
-  content: '';
-  display: block;
-  width: 8px;
-  height: 8px;
-  border-radius: 4px;
-  background-color: var(--spbSky2);
-}
-.mfui-banner-dot_active {
-  cursor: default;
-}
-.mfui-banner-dot_active:before {
-  width: 20px;
-  background-color: var(--brandGreen);
-}
-.mfui-banner-dot_active .mfui-banner-dot__timer-inner {
-  fill: var(--brandGreen);
-}
-.mfui-banner-dot_active.mfui-banner-dot_timer:before {
-  background-color: var(--spbSky2);
-}
-.mfui-banner-dot__timer {
-  position: absolute;
-  display: block;
-  width: 20px;
-  height: 8px;
-  border-radius: 4px;
-}
-.mfui-banner-dot__timer-inner {
-  -webkit-transform: scale(-1, 1);
-          transform: scale(-1, 1);
-  -webkit-transform-origin: center;
-          transform-origin: center;
-  -webkit-animation: timer linear;
-          animation: timer linear;
-}
-@-webkit-keyframes timer {
-  0% {
-    width: 100%;
-  }
-  100% {
-    width: 0;
-  }
-}
-@keyframes timer {
-  0% {
-    width: 100%;
-  }
-  100% {
-    width: 0;
-  }
-}
+h1,h2,h3,h4,h5{margin:0}.mfui-banner-dot{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;justify-content:center;margin:-2px;padding:2px}.mfui-banner-dot:before{background-color:var(--spbSky2);border-radius:4px;content:"";display:block;height:8px;width:8px}.mfui-banner-dot_active{cursor:default}.mfui-banner-dot_active:before{background-color:var(--brandGreen);width:24px}.mfui-banner-dot_active .mfui-banner-dot__timer-inner{fill:var(--brandGreen)}.mfui-banner-dot_active.mfui-banner-dot_timer:before{background-color:var(--spbSky2)}.mfui-banner-dot__timer{border-radius:4px;display:block;height:8px;position:absolute;width:24px}.mfui-banner-dot__timer-inner{-webkit-animation:timer linear;animation:timer linear;-webkit-transform:scaleX(-1);transform:scaleX(-1);-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes timer{0%{width:100%}to{width:0}}@keyframes timer{0%{width:100%}to{width:0}}

package/dist/es/components/Banner/BannerDot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import './BannerDot.less';
+import './BannerDot.scss';
 export interface IBannerDotProps {
     className?: string;
     index: number;

package/dist/es/components/Banner/BannerDot.js

@@ -1,18 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
-import * as PropTypes from 'prop-types';
 import "./BannerDot.css";
 var cn = cnCreate('mfui-banner-dot');
-
 var BannerDot = function BannerDot(_ref) {
   var className = _ref.className,
-      dataAttrs = _ref.dataAttrs,
-      index = _ref.index,
-      isActive = _ref.isActive,
-      showTimer = _ref.showTimer,
-      timerDelay = _ref.timerDelay,
-      onClick = _ref.onClick;
+    dataAttrs = _ref.dataAttrs,
+    index = _ref.index,
+    isActive = _ref.isActive,
+    showTimer = _ref.showTimer,
+    timerDelay = _ref.timerDelay,
+    onClick = _ref.onClick;
   var handleDotClick = React.useCallback(function () {
     onClick(index);
   }, [onClick, index]);
@@ -38,18 +36,4 @@ var BannerDot = function BannerDot(_ref) {
     ry: "50"
   }))));
 };
-
-BannerDot.propTypes = {
-  className: PropTypes.string,
-  dataAttrs: PropTypes.shape({
-    root: PropTypes.objectOf(PropTypes.string.isRequired),
-    svg: PropTypes.objectOf(PropTypes.string.isRequired),
-    inner: PropTypes.objectOf(PropTypes.string.isRequired)
-  }),
-  index: PropTypes.number.isRequired,
-  isActive: PropTypes.bool.isRequired,
-  showTimer: PropTypes.bool.isRequired,
-  timerDelay: PropTypes.number.isRequired,
-  onClick: PropTypes.func.isRequired
-};
 export default BannerDot;

package/dist/es/components/Banner/slidesSettings.d.ts

@@ -1,5 +1,7 @@
-import type { SwiperOptions } from 'swiper';
 declare const SLIDES_SETTINGS: {
-    [width: number]: SwiperOptions;
+    [x: number]: {
+        slidesPerView: number;
+        spaceBetween: number;
+    };
 };
 export default SLIDES_SETTINGS;

package/dist/es/components/Banner/slidesSettings.js

@@ -1,13 +1,10 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-var _SLIDES_SETTINGS;
-
 import { breakpoints } from '@megafon/ui-helpers';
-var SLIDES_SETTINGS = (_SLIDES_SETTINGS = {}, _defineProperty(_SLIDES_SETTINGS, breakpoints.MOBILE_SMALL_START, {
+var SLIDES_SETTINGS = _defineProperty(_defineProperty({}, breakpoints.MOBILE_SMALL_START, {
   slidesPerView: 1,
   spaceBetween: 16
-}), _defineProperty(_SLIDES_SETTINGS, breakpoints.MOBILE_BIG_START, {
+}), breakpoints.MOBILE_BIG_START, {
   slidesPerView: 1,
   spaceBetween: 0
-}), _SLIDES_SETTINGS);
+});
 export default SLIDES_SETTINGS;