@megafon/ui-core 2.0.0-beta.97 → 2.1.0

package/dist/es/components/Carousel/Carousel.css

@@ -5,126 +5,131 @@ h4,
 h5 {
   margin: 0;
 }
-.mfui-beta-carousel {
+.mfui-carousel {
   position: relative;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
 }
-.mfui-beta-carousel__swiper {
-  -ms-flex-negative: 1;
-      flex-shrink: 1;
+.mfui-carousel__swiper {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   -webkit-box-flex: 1;
       -ms-flex-positive: 1;
           flex-grow: 1;
-  position: relative;
+  -ms-flex-negative: 1;
+      flex-shrink: 1;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+  margin: -20px 0 -25px;
+  padding: 20px 0 25px;
   overflow: hidden;
-  padding-top: 20px;
-  margin-top: -20px;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-carousel__swiper {
-    padding-left: 20px !important;
-    padding-right: 20px !important;
-    margin-left: -20px !important;
+  .mfui-carousel__swiper {
     margin-right: -20px !important;
+    margin-left: -20px !important;
+    padding-right: 20px !important;
+    padding-left: 20px !important;
   }
 }
 @media screen and (min-width: 768px) and (max-width: 1023px) {
-  .mfui-beta-carousel__swiper_default-inner-indents {
-    padding-left: 48px;
-    padding-right: 48px;
-    margin-left: -48px;
+  .mfui-carousel__swiper_default-inner-indents {
     margin-right: -48px;
+    margin-left: -48px;
+    padding-right: 48px;
+    padding-left: 48px;
   }
 }
 @media screen and (max-width: 767px) {
-  .mfui-beta-carousel__swiper_default-inner-indents {
-    padding-left: 32px;
-    padding-right: 32px;
+  .mfui-carousel__swiper_default-inner-indents {
     margin-right: -16px;
     margin-left: -16px;
+    padding-right: 32px;
+    padding-left: 16px;
   }
 }
-.mfui-beta-carousel .swiper-wrapper {
+.mfui-carousel .swiper-wrapper {
+  z-index: 1;
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  z-index: 1;
-  padding-bottom: 40px;
 }
-.mfui-beta-carousel__slide {
+.mfui-carousel__slide {
   -ms-flex-negative: 0;
       flex-shrink: 0;
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-carousel__slide {
+  .mfui-carousel__slide {
+    -webkit-backface-visibility: hidden;
+            backface-visibility: hidden;
     opacity: 0;
     -webkit-transition: opacity 0.2s;
     transition: opacity 0.2s;
   }
 }
 @media screen and (min-width: 1024px) {
-  .mfui-beta-carousel .swiper-slide-visible {
+  .mfui-carousel .swiper-slide-visible {
     opacity: 1;
     -webkit-transition: opacity 0.4s;
     transition: opacity 0.4s;
   }
 }
-.mfui-beta-carousel__arrow {
+.mfui-carousel__arrow {
   position: absolute;
   top: 50%;
+  z-index: 2;
   -webkit-transform: translateY(calc(-50% - 40px / 2));
           transform: translateY(calc(-50% - 40px / 2));
 }
 @media screen and (max-width: 1023px) {
-  .mfui-beta-carousel__arrow {
+  .mfui-carousel__arrow {
     display: none;
   }
 }
-.mfui-beta-carousel__arrow_prev {
+.mfui-carousel__arrow_prev {
   right: calc(100% + 12px);
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-carousel__arrow_prev {
+  .mfui-carousel__arrow_prev {
     right: calc(100% + 20px);
   }
 }
-.mfui-beta-carousel__arrow_next {
+.mfui-carousel__arrow_next {
   left: calc(100% + 12px);
 }
 @media screen and (min-width: 1280px) {
-  .mfui-beta-carousel__arrow_next {
+  .mfui-carousel__arrow_next {
     left: calc(100% + 20px);
   }
 }
-.mfui-beta-carousel__arrow_locked {
+.mfui-carousel__arrow_locked {
   display: none;
 }
-.mfui-beta-carousel .swiper-pagination {
-  z-index: 2;
-  position: absolute;
-  bottom: 0;
-  left: 50%;
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
+.mfui-carousel .swiper-pagination {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
-  -webkit-box-pack: center;
-      -ms-flex-pack: center;
-          justify-content: center;
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  justify-self: center;
+  -webkit-box-ordinal-group: 3;
+      -ms-flex-order: 2;
+          order: 2;
+  width: 100%;
+  padding-top: 32px;
   border-radius: 12px;
 }
-.mfui-beta-carousel .swiper-pagination.swiper-pagination-lock {
+.mfui-carousel .swiper-pagination.swiper-pagination-lock {
   display: none;
 }
-.mfui-beta-carousel .swiper-pagination-bullet {
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+.mfui-carousel .swiper-pagination-bullet {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -134,43 +139,45 @@ h5 {
   -webkit-box-pack: center;
       -ms-flex-pack: center;
           justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
   width: 8px;
   height: 8px;
   padding: 1px;
   border-radius: 50%;
   cursor: pointer;
 }
-.mfui-beta-carousel .swiper-pagination-bullet:before {
+.mfui-carousel .swiper-pagination-bullet:before {
   content: '';
+  display: block;
   width: 100%;
   height: 100%;
-  display: block;
   border-radius: 50%;
 }
-.mfui-beta-carousel .swiper-pagination-bullet:not(:last-child) {
+.mfui-carousel .swiper-pagination-bullet:not(:last-child) {
   margin-right: 8px;
 }
-.mfui-beta-carousel_nav-theme_green .swiper-pagination-bullet:before {
+.mfui-carousel_nav-theme_green .swiper-pagination-bullet:before {
   background-color: rgba(255, 255, 255, 0.5);
 }
-.mfui-beta-carousel_nav-theme_light .swiper-pagination-bullet:before {
+.mfui-carousel_nav-theme_light .swiper-pagination-bullet:before {
   background-color: rgba(51, 51, 51, 0.25);
 }
-.mfui-beta-carousel .swiper-pagination-bullet-active {
+.mfui-carousel .swiper-pagination-bullet-active {
   padding: 0;
   cursor: default;
 }
-.mfui-beta-carousel_nav-theme_green .swiper-pagination-bullet-active {
+.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active {
   padding: 0;
   cursor: default;
 }
-.mfui-beta-carousel_nav-theme_green .swiper-pagination-bullet-active:before {
+.mfui-carousel_nav-theme_green .swiper-pagination-bullet-active:before {
   background-color: #FFFFFF;
 }
-.mfui-beta-carousel_nav-theme_light .swiper-pagination-bullet-active {
+.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active {
   padding: 0;
   cursor: default;
 }
-.mfui-beta-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
+.mfui-carousel_nav-theme_light .swiper-pagination-bullet-active:before {
   background-color: #731982;
 }

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

@@ -1,27 +1,43 @@
 import * as React from 'react';
+import { IFilterDataAttrs } from '@megafon/ui-helpers';
+import SwiperCore from 'swiper';
+import { PaginationOptions } from 'swiper/types/components/pagination';
 import './Carousel.less';
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly GREEN: "green";
 };
+export declare const EffectTheme: {
+    readonly SLIDE: "slide";
+    readonly FADE: "fade";
+};
 declare const SlidesPerView: {
     readonly AUTO: "auto";
 };
 declare type SlidesPerViewType = typeof SlidesPerView[keyof typeof SlidesPerView];
 declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
+declare type EffectThemeType = typeof EffectTheme[keyof typeof EffectTheme];
 export declare type SlidesSettingsType = {
     [key: number]: {
         slidesPerView: number | SlidesPerViewType;
+        slidesPerGroup?: number;
         spaceBetween: number;
     };
 };
-export interface ICarouselProps {
+export interface ICarouselProps extends IFilterDataAttrs {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
     /** Дополнительные классы для корневого элемента */
     className?: string;
     /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         root?: string;
         innerIndents?: string;
+        container?: string;
+        containerModifier?: string;
+        prev?: string;
+        next?: string;
+        slide?: string;
     };
     /** Настройки слайдов */
     slidesSettings?: SlidesSettingsType;
@@ -29,18 +45,34 @@ export interface ICarouselProps {
     loop?: boolean;
     /** Автоматическая прокрутка */
     autoPlay?: boolean;
+    /** Настройки пагинации */
+    pagination?: PaginationOptions;
     /** Задержка для авто прокрутки */
     autoPlayDelay?: number;
+    /** Скорость смены слайдов */
+    transitionSpeed?: number;
+    /** Пороговое значение свайпа при котором выполняется сдвиг слайдов в карусели */
+    threshold?: number;
+    /** Порядковый номер первого видимого слайда */
+    initialSlide?: number;
+    /** Отключение смены слайда свайпами */
+    disableTouchMove?: boolean;
+    /** Активный слайд по центру экрана */
+    centeredSlides?: boolean;
     /** Тема навигации */
     navTheme?: NavThemeType;
+    /** Эффект анимации */
+    effectTheme?: EffectThemeType;
     /** Css селектор элемента, при перетаскивании которого не будет происходить смена слайдов */
     noSwipingSelector?: string;
+    /** Ref на swiper */
+    getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке вперед (должен быть обернут в useCallback) */
     onNextClick?: (index: number) => void;
     /** Обработчик клика по стрелке назад (должен быть обернут в useCallback) */
     onPrevClick?: (index: number) => void;
     /** Обработчик смены слайда (должен быть обернут в useCallback) */
-    onChange?: (index: number) => void;
+    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
 }
 declare const Carousel: React.FC<ICarouselProps>;
 export default Carousel;

package/dist/es/components/Carousel/Carousel.js

@@ -1,5 +1,7 @@
+import "core-js/modules/es.array.index-of";
 import "core-js/modules/es.array.map";
 import "core-js/modules/es.object.values";
+import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -7,21 +9,24 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _defaultSlidesSetting;
 
 import * as React from 'react';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import throttle from 'lodash.throttle';
 import * as PropTypes from 'prop-types';
-import "./Carousel.css";
-import cnCreate from "../../utils/cnCreate";
-import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
-import SwiperCore, { Autoplay, Pagination } from 'swiper';
+import SwiperCore, { Autoplay, Pagination, EffectFade } from 'swiper';
 import { Swiper, SwiperSlide } from 'swiper/react';
-import throttle from 'lodash.throttle';
 import NavArrow, { Theme as ArrowTheme } from "../NavArrow/NavArrow";
-import breakpoints from "../../constants/breakpoints";
 import throttleTime from "../../constants/throttleTime";
-SwiperCore.use([Autoplay, Pagination]);
+import checkBreakpointsPropTypes from "./checkBreakpointsPropTypes";
+import "./Carousel.css";
+SwiperCore.use([Autoplay, Pagination, EffectFade]);
 export var NavTheme = {
   LIGHT: 'light',
   GREEN: 'green'
 };
+export var EffectTheme = {
+  SLIDE: 'slide',
+  FADE: 'fade'
+};
 var SlidesPerView = {
   AUTO: 'auto'
 };
@@ -35,24 +40,31 @@ var getAutoPlayConfig = function getAutoPlayConfig(delay) {
   };
 };
 
-var defaultSlidesSettings = (_defaultSlidesSetting = {}, _defineProperty(_defaultSlidesSetting, breakpoints.mobileSmallStart, {
+var defaultSlidesSettings = (_defaultSlidesSetting = {}, _defineProperty(_defaultSlidesSetting, breakpoints.MOBILE_SMALL_START, {
   slidesPerView: 1,
   spaceBetween: 16
-}), _defineProperty(_defaultSlidesSetting, breakpoints.mobileBigStart, {
+}), _defineProperty(_defaultSlidesSetting, breakpoints.MOBILE_BIG_START, {
   slidesPerView: 3,
   spaceBetween: 20
-}), _defineProperty(_defaultSlidesSetting, breakpoints.desktopMiddleStart, {
+}), _defineProperty(_defaultSlidesSetting, breakpoints.DESKTOP_MIDDLE_START, {
   slidesPerView: 4,
   spaceBetween: 20
 }), _defaultSlidesSetting);
-var cn = cnCreate('mfui-beta-carousel');
+var cn = cnCreate('mfui-carousel');
 
 var Carousel = function Carousel(_ref) {
-  var className = _ref.className,
+  var rootRef = _ref.rootRef,
+      className = _ref.className,
       _ref$classes = _ref.classes;
   _ref$classes = _ref$classes === void 0 ? {} : _ref$classes;
   var rootClass = _ref$classes.root,
       innerIndentsClass = _ref$classes.innerIndents,
+      prevClass = _ref$classes.prev,
+      nextClass = _ref$classes.next,
+      containerClass = _ref$classes.container,
+      containerModifier = _ref$classes.containerModifier,
+      slideClass = _ref$classes.slide,
+      dataAttrs = _ref.dataAttrs,
       _ref$slidesSettings = _ref.slidesSettings,
       slidesSettings = _ref$slidesSettings === void 0 ? defaultSlidesSettings : _ref$slidesSettings,
       _ref$autoPlay = _ref.autoPlay,
@@ -61,10 +73,23 @@ var Carousel = function Carousel(_ref) {
       autoPlayDelay = _ref$autoPlayDelay === void 0 ? 5000 : _ref$autoPlayDelay,
       _ref$loop = _ref.loop,
       loop = _ref$loop === void 0 ? false : _ref$loop,
+      _ref$transitionSpeed = _ref.transitionSpeed,
+      transitionSpeed = _ref$transitionSpeed === void 0 ? 300 : _ref$transitionSpeed,
+      threshold = _ref.threshold,
+      _ref$initialSlide = _ref.initialSlide,
+      initialSlide = _ref$initialSlide === void 0 ? 1 : _ref$initialSlide,
+      _ref$disableTouchMove = _ref.disableTouchMove,
+      disableTouchMove = _ref$disableTouchMove === void 0 ? false : _ref$disableTouchMove,
+      _ref$centeredSlides = _ref.centeredSlides,
+      centeredSlides = _ref$centeredSlides === void 0 ? false : _ref$centeredSlides,
       _ref$navTheme = _ref.navTheme,
       navTheme = _ref$navTheme === void 0 ? 'light' : _ref$navTheme,
+      _ref$effectTheme = _ref.effectTheme,
+      effectTheme = _ref$effectTheme === void 0 ? 'slide' : _ref$effectTheme,
       noSwipingSelector = _ref.noSwipingSelector,
       children = _ref.children,
+      pagination = _ref.pagination,
+      getSwiper = _ref.getSwiper,
       onNextClick = _ref.onNextClick,
       onPrevClick = _ref.onPrevClick,
       onChange = _ref.onChange;
@@ -122,6 +147,7 @@ var Carousel = function Carousel(_ref) {
   var handleSwiper = React.useCallback(function (swiper) {
     setSwiperInstance(swiper);
     setLocked(swiper.isBeginning && swiper.isEnd);
+    getSwiper && getSwiper(swiper);
   }, []);
   var handleReachBeginnig = React.useCallback(function () {
     setBeginning(true);
@@ -140,8 +166,10 @@ var Carousel = function Carousel(_ref) {
     setEnd(swiper.isEnd);
   }, []);
   var handleSlideChange = React.useCallback(function (_ref4) {
-    var realIndex = _ref4.realIndex;
-    onChange && onChange(realIndex);
+    var realIndex = _ref4.realIndex,
+        previousIndex = _ref4.previousIndex,
+        params = _ref4.params;
+    onChange && onChange(realIndex, previousIndex, params.slidesPerView);
   }, [onChange]);
 
   var handleRootClick = function handleRootClick(e) {
@@ -163,24 +191,56 @@ var Carousel = function Carousel(_ref) {
       swiper.slides.css('width', '');
     }
   }, throttleTime.resize), []);
-  return /*#__PURE__*/React.createElement("div", {
+
+  var handleSlideFocus = function handleSlideFocus(index) {
+    return function (e) {
+      var _a;
+
+      if (loop) {
+        // for correctly scroll the looped carousel to the focused element, we need to get its real index in the DOM-collection of slides
+        // because swiper does not provide this, only data-swiper-slide-index, whose values are in the range from 0 to children.length - 1,
+        // but method slideTo needs to be passed a real slide index in DOM-collection
+        var slideSelector = ".".concat(cn('slide'));
+        var slide = e.nativeEvent.target.closest(slideSelector);
+        var realIndex = Array.prototype.indexOf.call((_a = slide === null || slide === void 0 ? void 0 : slide.parentNode) === null || _a === void 0 ? void 0 : _a.children, slide);
+        swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(realIndex);
+        return;
+      }
+
+      swiperInstance === null || swiperInstance === void 0 ? void 0 : swiperInstance.slideTo(index);
+    };
+  };
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+    ref: rootRef,
     className: cn({
       'nav-theme': navTheme
     }, [className, rootClass]),
     onClick: handleRootClick
-  }, /*#__PURE__*/React.createElement(Swiper, {
+  }), /*#__PURE__*/React.createElement(Swiper, _extends({}, containerModifier ? {
+    containerModifierClass: containerModifier
+  } : {}, {
     className: cn('swiper', {
       'default-inner-indents': !innerIndentsClass
-    }, [innerIndentsClass]),
+    }, [innerIndentsClass, containerClass]),
     breakpoints: slidesSettings,
     watchSlidesVisibility: true,
     watchOverflow: true,
     loop: loop,
-    pagination: {
+    pagination: _extends({
       clickable: true
-    },
+    }, pagination),
     autoplay: autoPlay ? getAutoPlayConfig(autoPlayDelay) : false,
-    noSwipingSelector: noSwipingSelector,
+    speed: transitionSpeed,
+    threshold: threshold,
+    initialSlide: initialSlide - 1,
+    allowTouchMove: !disableTouchMove,
+    centeredSlides: centeredSlides,
+    effect: effectTheme,
+    fadeEffect: effectTheme === EffectTheme.FADE ? {
+      crossFade: effectTheme === EffectTheme.FADE
+    } : undefined,
+    noSwipingSelector: noSwipingSelector ? ".swiper-pagination, ".concat(noSwipingSelector) : '.swiper-pagination',
     onSwiper: handleSwiper,
     onReachBeginning: handleReachBeginnig,
     onReachEnd: handleReachEnd,
@@ -188,16 +248,17 @@ var Carousel = function Carousel(_ref) {
     onSlideChange: handleSlideChange,
     onTouchEnd: increaseAutoplayDelay,
     onResize: handleSwiperResize
-  }, React.Children.map(children, function (child, i) {
+  }), React.Children.map(children, function (child, i) {
     return /*#__PURE__*/React.createElement(SwiperSlide, {
       key: i,
-      className: cn('slide')
+      className: cn('slide', slideClass),
+      onFocus: handleSlideFocus(i)
     }, child);
   })), /*#__PURE__*/React.createElement(NavArrow, {
     className: cn('arrow', {
       prev: true,
       locked: isLocked
-    }),
+    }, [prevClass]),
     onClick: handlePrevClick,
     disabled: !loop && isBeginning,
     theme: ArrowTheme.PURPLE
@@ -205,7 +266,7 @@ var Carousel = function Carousel(_ref) {
     className: cn('arrow', {
       next: true,
       locked: isLocked
-    }),
+    }, [nextClass]),
     view: "next",
     onClick: handleNextClick,
     disabled: !loop && isEnd,
@@ -214,20 +275,46 @@ var Carousel = function Carousel(_ref) {
 };
 
 Carousel.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
   className: PropTypes.string,
   classes: PropTypes.shape({
     root: PropTypes.string,
-    innerIndents: PropTypes.string
+    innerIndents: PropTypes.string,
+    container: PropTypes.string,
+    containerModifier: PropTypes.string,
+    prev: PropTypes.string,
+    next: PropTypes.string,
+    slide: PropTypes.string
   }),
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
   slidesSettings: PropTypes.objectOf(checkBreakpointsPropTypes({
     slidesPerView: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(Object.values(SlidesPerView))]).isRequired,
-    spaceBetween: PropTypes.number.isRequired
+    spaceBetween: PropTypes.number.isRequired,
+    slidesPerGroup: PropTypes.number
   })),
+  pagination: PropTypes.shape({
+    el: PropTypes.string,
+    bulletElement: PropTypes.string,
+    dynamicBullets: PropTypes.string,
+    clickable: PropTypes.bool,
+    renderBullet: PropTypes.func,
+    bulletClass: PropTypes.string,
+    bulletActiveClass: PropTypes.string,
+    modifierClass: PropTypes.string
+  }),
   loop: PropTypes.bool,
+  threshold: PropTypes.number,
   autoPlay: PropTypes.bool,
   autoPlayDelay: PropTypes.number,
+  disableTouchMove: PropTypes.bool,
+  centeredSlides: PropTypes.bool,
+  transitionSpeed: PropTypes.number,
   navTheme: PropTypes.oneOf(Object.values(NavTheme)),
+  effectTheme: PropTypes.oneOf(Object.values(EffectTheme)),
   noSwipingSelector: PropTypes.string,
+  getSwiper: PropTypes.func,
   onNextClick: PropTypes.func,
   onPrevClick: PropTypes.func,
   onChange: PropTypes.func

package/dist/es/components/Carousel/checkBreakpointsPropTypes.d.ts

@@ -1,5 +1,5 @@
 declare type ObjectType = {
-    [key: string]: any;
+    [key: string]: unknown;
 };
 declare const checkBreakpointsPropTypes: (settingsPropTypes: ObjectType) => (object: ObjectType, key: string, componentName: string) => Error | null;
 export default checkBreakpointsPropTypes;