@megafon/ui-shared 8.13.1 → 8.14.0

package/dist/lib/components/VideoBlock/VideoBlock.js

@@ -1,238 +0,0 @@
-"use strict";
-
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.testIdPrefix = exports["default"] = exports.VideoTypes = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-require("core-js/modules/es.symbol.js");
-require("core-js/modules/es.symbol.description.js");
-require("core-js/modules/es.array.concat.js");
-require("core-js/modules/es.date.to-json.js");
-require("core-js/modules/es.json.stringify.js");
-var React = _interopRequireWildcard(require("react"));
-var _uiCore = require("@megafon/ui-core");
-var _uiHelpers = require("@megafon/ui-helpers");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var VideoTypes = exports.VideoTypes = {
-  YOUTUBE: 'youtube',
-  RUTUBE: 'rutube',
-  VK: 'vk',
-  VIDEO: 'video'
-};
-var testIdPrefix = exports.testIdPrefix = 'VideoBlock';
-var cn = (0, _uiHelpers.cnCreate)('mfui-video-block');
-var VideoBlock = function VideoBlock(_ref) {
-  var dataAttrs = _ref.dataAttrs,
-    className = _ref.className,
-    _ref$classes = _ref.classes,
-    classes = _ref$classes === void 0 ? {} : _ref$classes,
-    rootRef = _ref.rootRef,
-    content = _ref.content,
-    _ref$videoType = _ref.videoType,
-    videoType = _ref$videoType === void 0 ? 'video' : _ref$videoType,
-    videoSrc = _ref.videoSrc,
-    _ref$isMuted = _ref.isMuted,
-    isMuted = _ref$isMuted === void 0 ? true : _ref$isMuted,
-    _ref$isAutoplay = _ref.isAutoplay,
-    isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
-    _ref$contentPositionR = _ref.contentPositionRight,
-    contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
-    poster = _ref.poster,
-    _ref$playsinline = _ref.playsinline,
-    playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline,
-    _ref$fixWhiteVideoBac = _ref.fixWhiteVideoBackground,
-    fixWhiteVideoBackground = _ref$fixWhiteVideoBac === void 0 ? false : _ref$fixWhiteVideoBac;
-  var rutubeRef = React.useRef(null);
-  var autoPlayRutube = function autoPlayRutube() {
-    var current = rutubeRef.current;
-    if (current == null) {
-      return;
-    }
-    window.IntersectionObserver && new window.IntersectionObserver(function (entries, obs) {
-      var _a;
-      var _entries = (0, _slicedToArray2["default"])(entries, 1),
-        entry = _entries[0];
-      if (entry && entry.isIntersecting) {
-        (_a = current.contentWindow) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({
-          type: 'player:play',
-          data: {}
-        }), '*');
-        obs.disconnect();
-      }
-    }, {
-      threshold: 0.5
-    }).observe(current);
-  };
-  React.useEffect(function () {
-    if (!isAutoplay || videoType !== VideoTypes.RUTUBE) {
-      return;
-    }
-    autoPlayRutube();
-  }, [isAutoplay, videoType]);
-  var renderVideo = React.useCallback(function () {
-    switch (videoType) {
-      case VideoTypes.YOUTUBE:
-        {
-          var url = "https://www.youtube.com/embed/".concat(videoSrc, "?");
-          var autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
-          var mute = "&mute=".concat(isMuted ? 1 : 0);
-          var loop = "&loop=1";
-          var rel = "&rel=0";
-          var controls = "&controls=".concat(isAutoplay ? 0 : 1);
-          var showinfo = "&showinfo=0";
-          var ivLoadPolicy = "&iv_load_policy=3";
-          var playlist = "&playlist=".concat(videoSrc);
-          var playsinlineProp = "&playsinline=".concat(playsinline ? 1 : 0);
-          var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(showinfo).concat(ivLoadPolicy).concat(playlist).concat(playsinlineProp);
-          return /*#__PURE__*/React.createElement("div", {
-            className: cn('youtube')
-          }, /*#__PURE__*/React.createElement("iframe", {
-            className: cn('iframe'),
-            src: src,
-            width: "100%",
-            height: "100%",
-            frameBorder: "0",
-            allow: "autoplay",
-            title: "iframe",
-            allowFullScreen: true,
-            "data-testid": "".concat(testIdPrefix, "-iframe-video")
-          }));
-        }
-      case VideoTypes.RUTUBE:
-        {
-          var _src = "https://rutube.ru/play/embed/".concat(videoSrc, "?");
-          return /*#__PURE__*/React.createElement("div", {
-            className: cn('rutube')
-          }, /*#__PURE__*/React.createElement("iframe", {
-            className: cn('iframe'),
-            ref: rutubeRef,
-            src: _src,
-            width: "100%",
-            height: "100%",
-            frameBorder: "0",
-            allow: "autoplay",
-            title: "iframe",
-            allowFullScreen: true,
-            "data-testid": "".concat(testIdPrefix, "-iframe-video")
-          }));
-        }
-      case VideoTypes.VK:
-        {
-          var _videoSrc$split = videoSrc.split('_'),
-            _videoSrc$split2 = (0, _slicedToArray2["default"])(_videoSrc$split, 2),
-            oid = _videoSrc$split2[0],
-            id = _videoSrc$split2[1];
-          var _url = "https://vk.com/video_ext.php?oid=-".concat(oid, "}&id=").concat(id, "&");
-          var _autoplay = "&autoplay=".concat(isAutoplay ? 1 : 0);
-          var _src2 = "".concat(_url).concat(_autoplay);
-          return /*#__PURE__*/React.createElement("div", {
-            className: cn('vk')
-          }, /*#__PURE__*/React.createElement("iframe", {
-            className: cn('iframe'),
-            src: _src2,
-            width: "100%",
-            height: "100%",
-            frameBorder: "0",
-            allow: "autoplay",
-            title: "iframe",
-            allowFullScreen: true,
-            "data-testid": "".concat(testIdPrefix, "-iframe-video")
-          }));
-        }
-      case VideoTypes.VIDEO:
-        {
-          return /*#__PURE__*/(
-            // eslint-disable-next-line jsx-a11y/media-has-caption
-            React.createElement("video", {
-              className: cn('video', {
-                'fix-background': fixWhiteVideoBackground
-              }),
-              autoPlay: isAutoplay,
-              muted: isMuted,
-              controls: !isAutoplay,
-              loop: true,
-              poster: poster,
-              playsInline: playsinline,
-              "data-testid": "".concat(testIdPrefix, "-video")
-            }, /*#__PURE__*/React.createElement("source", {
-              src: videoSrc,
-              type: "video/mp4"
-            }))
-          );
-        }
-      default:
-        {
-          return null;
-        }
-    }
-  }, [videoType, videoSrc, isAutoplay, isMuted, poster, playsinline, fixWhiteVideoBackground]);
-  var renderContent = React.useCallback(function (_ref2) {
-    var title = _ref2.title,
-      description = _ref2.description,
-      href = _ref2.href,
-      buttonDownload = _ref2.buttonDownload,
-      buttonTitle = _ref2.buttonTitle,
-      buttonRel = _ref2.buttonRel,
-      onButtonClick = _ref2.onButtonClick;
-    return /*#__PURE__*/React.createElement("div", {
-      className: cn('content', {
-        'position-right': contentPositionRight
-      }),
-      "data-testid": "".concat(testIdPrefix, "-content")
-    }, /*#__PURE__*/React.createElement(_uiCore.Header, {
-      as: "h2",
-      className: cn('header')
-    }, (0, _uiHelpers.convert)(title, _uiHelpers.titleConvertConfig)), /*#__PURE__*/React.createElement("div", {
-      className: cn('description', [classes.description])
-    }, typeof description === 'string' ? (0, _uiHelpers.convert)(description, _uiHelpers.textConvertConfig) : description), buttonTitle && /*#__PURE__*/React.createElement(_uiCore.Button, {
-      dataAttrs: {
-        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button
-      },
-      className: cn('button', [classes.button]),
-      href: href,
-      onClick: onButtonClick,
-      download: buttonDownload,
-      rel: buttonRel
-    }, buttonTitle));
-  }, [classes.button, classes.description, dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.button, contentPositionRight]);
-  var renderGridColumns = React.useCallback(function () {
-    var columns = [];
-    var columnWidth = content ? '7' : '10';
-    if (content) {
-      columns.push(/*#__PURE__*/React.createElement(_uiCore.GridColumn, {
-        all: "5",
-        tablet: "12",
-        mobile: "12",
-        orderTablet: "1",
-        orderMobile: "1",
-        orderWide: contentPositionRight ? '1' : '0',
-        orderDesktop: contentPositionRight ? '1' : '0',
-        key: "column-content",
-        className: cn('content-column')
-      }, renderContent(content)));
-    }
-    columns.push(/*#__PURE__*/React.createElement(_uiCore.GridColumn, {
-      all: columnWidth,
-      tablet: "12",
-      mobile: "12",
-      key: "column-video",
-      orderDesktop: contentPositionRight ? '0' : '1',
-      orderWide: contentPositionRight ? '0' : '1',
-      className: cn('video-column')
-    }, renderVideo()));
-    return columns;
-  }, [renderContent, renderVideo, content, contentPositionRight]);
-  return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
-    className: cn([className, classes.root]),
-    ref: rootRef
-  }), /*#__PURE__*/React.createElement(_uiCore.Grid, {
-    hAlign: "center",
-    className: cn('grid')
-  }, renderGridColumns()));
-};
-var _default = exports["default"] = VideoBlock;

package/dist/lib/constants/throttleTime.d.ts

@@ -1,4 +0,0 @@
-declare const _default: {
-    resize: number;
-};
-export default _default;

package/dist/lib/constants/throttleTime.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _default = exports["default"] = {
-  resize: 300
-};

package/dist/lib/helpers/getColumnConfig.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-import { GridColumn } from '@megafon/ui-core';
-type GridColumnPropsType = React.ComponentProps<typeof GridColumn>;
-type GridColumnConfigType = Partial<Pick<GridColumnPropsType, 'all' | 'wide' | 'desktop' | 'tablet' | 'mobile'>>;
-export declare const getColumnConfig: (isFullWidth: boolean) => GridColumnConfigType;
-export {};

package/dist/lib/helpers/getColumnConfig.js

@@ -1,16 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getColumnConfig = void 0;
-var getColumnConfig = exports.getColumnConfig = function getColumnConfig(isFullWidth) {
-  return isFullWidth ? {
-    all: '12'
-  } : {
-    wide: '8',
-    desktop: '10',
-    tablet: '12',
-    mobile: '12'
-  };
-};

package/dist/lib/helpers/setRelAttribute.d.ts

@@ -1,3 +0,0 @@
-type TargetType = '_self' | '_blank' | '_parent' | '_top';
-export declare const setRelAttribute: (rel?: string, target?: TargetType) => string | undefined;
-export {};

package/dist/lib/helpers/setRelAttribute.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.setRelAttribute = void 0;
-var setRelAttribute = exports.setRelAttribute = function setRelAttribute(rel, target) {
-  if (rel) {
-    return rel;
-  }
-  if (target !== '_self') {
-    return 'noreferrer noopener';
-  }
-  return undefined;
-};

package/dist/lib/hooks/useResolutions.d.ts

@@ -1,8 +0,0 @@
-export type useResolutionsReturnType = {
-    isDesktopWide: boolean;
-    isDesktop: boolean;
-    isMobile: boolean;
-    isTablet: boolean;
-};
-declare const useResolutions: () => useResolutionsReturnType;
-export default useResolutions;

package/dist/lib/hooks/useResolutions.js

@@ -1,69 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-require("core-js/modules/es.array.concat.js");
-var _react = _interopRequireDefault(require("react"));
-var _uiHelpers = require("@megafon/ui-helpers");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var MOBILE_MIDDLE_END = _uiHelpers.breakpoints.MOBILE_MIDDLE_END,
-  MOBILE_BIG_START = _uiHelpers.breakpoints.MOBILE_BIG_START,
-  MOBILE_BIG_END = _uiHelpers.breakpoints.MOBILE_BIG_END,
-  DESKTOP_SMALL_START = _uiHelpers.breakpoints.DESKTOP_SMALL_START,
-  DESKTOP_MIDDLE_START = _uiHelpers.breakpoints.DESKTOP_MIDDLE_START;
-var useResolutions = function useResolutions() {
-  var _React$useState = _react["default"].useState(false),
-    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-    isMobile = _React$useState2[0],
-    setIsMobile = _React$useState2[1];
-  var _React$useState3 = _react["default"].useState(false),
-    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
-    isTablet = _React$useState4[0],
-    setIsTablet = _React$useState4[1];
-  var _React$useState5 = _react["default"].useState(false),
-    _React$useState6 = (0, _slicedToArray2["default"])(_React$useState5, 2),
-    isDesktop = _React$useState6[0],
-    setIsDesktop = _React$useState6[1];
-  var _React$useState7 = _react["default"].useState(false),
-    _React$useState8 = (0, _slicedToArray2["default"])(_React$useState7, 2),
-    isDesktopWide = _React$useState8[0],
-    setIsDesktopWide = _React$useState8[1];
-  _react["default"].useEffect(function () {
-    if (typeof window === 'undefined') {
-      return undefined;
-    }
-    var _window = window,
-      matchMedia = _window.matchMedia;
-    var mobileQuery = matchMedia("(max-width: ".concat(MOBILE_MIDDLE_END, "px)"));
-    var tabletQuery = matchMedia("(min-width: ".concat(MOBILE_BIG_START, "px) and (max-width: ").concat(MOBILE_BIG_END, "px)"));
-    var desktopQuery = matchMedia("(min-width: ".concat(DESKTOP_SMALL_START, "px)"));
-    var desktopWideQuery = matchMedia("(min-width: ".concat(DESKTOP_MIDDLE_START, "px)"));
-    var handleResize = function handleResize() {
-      setIsMobile(mobileQuery.matches);
-      setIsTablet(tabletQuery.matches);
-      setIsDesktop(desktopQuery.matches);
-      setIsDesktopWide(desktopWideQuery.matches);
-    };
-    handleResize();
-    mobileQuery.addEventListener('change', handleResize);
-    tabletQuery.addEventListener('change', handleResize);
-    desktopQuery.addEventListener('change', handleResize);
-    desktopWideQuery.addEventListener('change', handleResize);
-    return function () {
-      mobileQuery.removeEventListener('change', handleResize);
-      tabletQuery.removeEventListener('change', handleResize);
-      desktopQuery.removeEventListener('change', handleResize);
-      desktopWideQuery.addEventListener('change', handleResize);
-    };
-  }, []);
-  return {
-    isDesktopWide: isDesktopWide,
-    isDesktop: isDesktop,
-    isMobile: isMobile,
-    isTablet: isTablet
-  };
-};
-var _default = exports["default"] = useResolutions;

package/dist/lib/index.d.ts

@@ -1,67 +0,0 @@
-export { default as AccordionBox } from './components/AccordionBox/AccordionBox';
-export { default as AudioPlayer } from './components/AudioPlayer/AudioPlayer';
-export { default as AudioProgress } from './components/AudioPlayer/AudioProgress';
-export { default as AudioRange } from './components/AudioPlayer/AudioRange';
-export { default as AudioVolume } from './components/AudioPlayer/AudioVolume';
-export { default as BannerBox } from './components/BannerBox/BannerBox';
-export { default as BenefitsIcons } from './components/BenefitsIcons/BenefitsIcons';
-export { default as BenefitsIconsTile } from './components/BenefitsIcons/BenefitsIconsTile';
-export { default as BenefitsPictures } from './components/BenefitsPictures/BenefitsPictures';
-export { default as BlogBox } from './components/BlogBox/BlogBox';
-export { default as BlogBoxTile } from './components/BlogBox/components/BlogBoxTile';
-export { default as Breadcrumbs } from './components/Breadcrumbs/Breadcrumbs';
-export { default as BreadcrumbsItem } from './components/Breadcrumbs/components/BreadcrumbsItem';
-export { default as ButtonBanner } from './components/ButtonBanner/ButtonBanner';
-export { default as ButtonLinkBox } from './components/ButtonLinkBox/ButtonLinkBox';
-export { default as ButtonsBox } from './components/ButtonsBox/ButtonsBox';
-export { default as Card } from './components/Card/Card';
-export { default as CardsBox } from './components/CardsBox/CardsBox';
-export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
-export { default as ChipBox } from './components/ChipsBox/ChipBox';
-export { default as ChipsBox } from './components/ChipsBox/ChipsBox';
-export { default as Container } from './components/Container/Container';
-export { default as DarkGradientCard } from './components/DarkGradientCards/components/DarkGradientCard';
-export { default as DarkGradientCards } from './components/DarkGradientCards/DarkGradientCards';
-export { default as DownloadLink } from './components/DownloadLinks/DownloadLink';
-export { default as DownloadLinks } from './components/DownloadLinks/DownloadLinks';
-export { default as FaqWrapper } from './components/FaqWrapper/FaqWrapper';
-export { default as ImageBanner } from './components/ImageBanner/ImageBanner';
-export { default as InfoCard } from './components/InfoCards/components/InfoCard/InfoCard';
-export { default as InfoCards } from './components/InfoCards/InfoCards';
-export { default as Instructions } from './components/Instructions/Instructions';
-export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
-export { default as NumbersBox } from './components/NumbersBox/NumbersBox';
-export { default as NumbersCard } from './components/NumbersBox/components/NumbersCard/NumbersCard';
-export { default as PageTitle } from './components/PageTitle/PageTitle';
-export { default as Partners } from './components/Partners/Partners';
-export { default as PictureBox } from './components/PictureBox/PictureBox';
-export { default as PictureWithDescription } from './components/PictureWithDescription/PictureWithDescription';
-export { default as PromoBanner } from './components/PromoBanner/PromoBanner';
-export { default as PromoBannerSlide } from './components/PromoBanner/components/PromoBannerSlide/PromoBannerSlide';
-export { default as PromoCard } from './components/PromoCards/components/PromoCard/PromoCard';
-export { default as PromoCards } from './components/PromoCards/PromoCards';
-export { default as Property } from './components/Property/Property';
-export { default as ServiceCard } from './components/ServiceCards/components/ServiceCard/ServiceCard';
-export { default as ServiceCards } from './components/ServiceCards/ServiceCards';
-export { default as SidePictureCard } from './components/SidePictureCards/components/SidePictureCard';
-export { default as SidePictureCards } from './components/SidePictureCards/SidePictureCards';
-export { default as Stepper } from './components/Stepper/Stepper';
-export { default as StepperItem } from './components/Stepper/StepperItem';
-export { default as Steps } from './components/Steps/Steps';
-export { default as StepsItem } from './components/Steps/StepsItem';
-export { default as StoreBanner } from './components/StoreBanner/StoreBanner';
-export { default as StoreButton } from './components/StoreButton/StoreButton';
-export { default as TabBox } from './components/TabsBox/TabBox';
-export { default as Table } from './components/Table/Table';
-export { default as TableCell } from './components/Table/TableCell';
-export { default as TableRow } from './components/Table/TableRow';
-export { default as TabsBox } from './components/TabsBox/TabsBox';
-export { default as TextBox } from './components/TextBox/TextBox';
-export { default as TextBoxPicture } from './components/TextBox/TextBoxPicture';
-export { default as TextWithIcon } from './components/TextWithIcon/TextWithIcon';
-export { default as TextWithIconItem } from './components/TextWithIcon/TextWithIconItem';
-export { default as timerFormatUtil } from './components/AudioPlayer/timerFormatUtil';
-export { default as TitleDescriptionBox } from './components/TitleDescriptionBox/TitleDescriptionBox';
-export { default as useTrackDuration } from './components/AudioPlayer/hooks/useTrackDuration';
-export { default as VideoBanner } from './components/VideoBanner/VideoBanner';
-export { default as VideoBlock } from './components/VideoBlock/VideoBlock';