@megafon/ui-shared 4.6.0 → 4.8.0

package/dist/es/components/Breadcrumbs/Breadcrumbs.css

@@ -21,12 +21,6 @@ h5 {
 .mfui-breadcrumbs_color_white .mfui-breadcrumbs__item:before {
   color: var(--stcWhite);
 }
-.mfui-breadcrumbs__icon {
-  position: relative;
-  width: 14px;
-  height: 3px;
-  margin-right: 10px;
-}
 .mfui-breadcrumbs__item {
   position: relative;
   margin-right: 10px;

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

@@ -1,27 +1,37 @@
 import React from 'react';
+import { TextColor } from './components/BreadcrumbsItem';
 import './Breadcrumbs.less';
 declare type ItemObjectType = {
     title?: string;
     href?: string;
 };
 declare type ItemType = JSX.Element | ItemObjectType;
-export declare const TextColor: {
-    readonly DEFAULT: "default";
-    readonly BLACK: "black";
-    readonly WHITE: "white";
-};
-declare type TextColorType = typeof TextColor[keyof typeof TextColor];
+export declare type TextColorType = typeof TextColor[keyof typeof TextColor];
 export declare type Props = {
-    dataAttrs?: {
-        root?: Record<string, string>;
-        link?: Record<string, string>;
-    };
+    /** Дополнительный класс корневого элемента */
     className?: string;
+    /** Список элементов */
+    items: ItemType[];
+    /** Цвет */
+    color?: TextColorType;
+    /** Включить микроразметку */
+    hasMicrodata?: boolean;
+    /** Дополнительные классы для корневого и внутренних элементов */
     classes?: {
         item?: string;
+        itemTitle?: string;
+        lastItemTitle?: string;
+        link?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        item?: Record<string, string>;
+        itemInner?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        itemMeta?: Record<string, string>;
+        link?: Record<string, string>;
     };
-    items: ItemType[];
-    color?: TextColorType;
 };
 declare const Breadcrumbs: React.FC<Props>;
 export default Breadcrumbs;

package/dist/es/components/Breadcrumbs/Breadcrumbs.js

@@ -3,23 +3,14 @@ import "core-js/modules/es.object.values";
 import "core-js/modules/es.string.link";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
-import { TextLink } from '@megafon/ui-core';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import PropTypes from 'prop-types';
+import BreadcrumbsItem, { TextColor } from "./components/BreadcrumbsItem";
 import "./Breadcrumbs.css";
-export var TextColor = {
-  DEFAULT: 'default',
-  BLACK: 'black',
-  WHITE: 'white'
-};
 
-function isObjectElement(item) {
+var isObjectElement = function isObjectElement(item) {
   return !React.isValidElement(item);
-}
-
-function isJSXElement(item) {
-  return React.isValidElement(item);
-}
+};
 
 var cn = cnCreate('mfui-breadcrumbs');
 
@@ -30,49 +21,64 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
       className = _ref.className,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
-      dataAttrs = _ref.dataAttrs;
-  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+      dataAttrs = _ref.dataAttrs,
+      _ref$hasMicrodata = _ref.hasMicrodata,
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata;
+  return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       color: color
     }, className)
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), hasMicrodata && {
+    itemScope: true,
+    itemType: 'https://schema.org/BreadcrumbList'
   }), items.map(function (item, i) {
-    if (isJSXElement(item)) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn('item', classes.item),
-        key: i
-      }, item);
-    }
-
-    if (isObjectElement(item)) {
-      return /*#__PURE__*/React.createElement("div", {
-        className: cn('item', classes.item),
-        key: item.title
-      }, /*#__PURE__*/React.createElement(TextLink, {
-        href: item.href,
-        color: color,
-        dataAttrs: {
-          root: (dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link) ? _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link, i + 1)) : undefined
-        }
-      }, item.title));
-    }
-
-    return null;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn('item', classes.item)
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.item, i + 1), {
+      key: i
+    }), isObjectElement(item) ? /*#__PURE__*/React.createElement(BreadcrumbsItem, {
+      title: item.title,
+      href: item.href,
+      color: color,
+      index: i,
+      isLastItem: i === items.length - 1,
+      hasMicrodata: hasMicrodata,
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemInner,
+        link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link,
+        itemTitle: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle,
+        meta: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemMeta
+      },
+      classes: {
+        link: classes === null || classes === void 0 ? void 0 : classes.link,
+        itemTitle: classes === null || classes === void 0 ? void 0 : classes.itemTitle,
+        lastItemTitle: classes === null || classes === void 0 ? void 0 : classes.lastItemTitle
+      }
+    }) : item);
   }));
 };
 
 Breadcrumbs.propTypes = {
   dataAttrs: PropTypes.shape({
     root: PropTypes.objectOf(PropTypes.string.isRequired),
+    item: PropTypes.objectOf(PropTypes.string.isRequired),
+    itemInner: PropTypes.objectOf(PropTypes.string.isRequired),
+    itemTitle: PropTypes.objectOf(PropTypes.string.isRequired),
+    itemMeta: PropTypes.objectOf(PropTypes.string.isRequired),
     link: PropTypes.objectOf(PropTypes.string.isRequired)
   }),
   className: PropTypes.string,
   classes: PropTypes.shape({
-    item: PropTypes.string
+    item: PropTypes.string,
+    itemTitle: PropTypes.string,
+    lastItemTitle: PropTypes.string,
+    link: PropTypes.string
   }),
   items: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
     href: PropTypes.string
   }).isRequired)]).isRequired,
-  color: PropTypes.oneOf(Object.values(TextColor))
+  color: PropTypes.oneOf(Object.values(TextColor)),
+  hasMicrodata: PropTypes.bool
 };
 export default Breadcrumbs;

package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.css

@@ -0,0 +1,16 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-breadcrumbs-item_color_default {
+  color: var(--content);
+}
+.mfui-breadcrumbs-item_color_black {
+  color: var(--stcBlack);
+}
+.mfui-breadcrumbs-item_color_white {
+  color: var(--stcWhite);
+}

package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import './BreadcrumbsItem.less';
+export declare const TextColor: {
+    readonly DEFAULT: "default";
+    readonly BLACK: "black";
+    readonly WHITE: "white";
+};
+declare type TextColorType = typeof TextColor[keyof typeof TextColor];
+export declare type Props = {
+    title?: string;
+    href?: string;
+    color?: TextColorType;
+    index?: number;
+    isLastItem?: boolean;
+    hasMicrodata?: boolean;
+    classes?: {
+        link?: string;
+        itemTitle?: string;
+        lastItemTitle?: string;
+    };
+    dataAttrs?: {
+        root?: Record<string, string>;
+        link?: Record<string, string>;
+        itemTitle?: Record<string, string>;
+        meta?: Record<string, string>;
+    };
+};
+declare const BreadcrumbsItem: React.FC<Props>;
+export default BreadcrumbsItem;

package/dist/es/components/Breadcrumbs/components/BreadcrumbsItem.js

@@ -0,0 +1,82 @@
+import "core-js/modules/es.object.values";
+import "core-js/modules/es.string.link";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { TextLink } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+import "./BreadcrumbsItem.css";
+export var TextColor = {
+  DEFAULT: 'default',
+  BLACK: 'black',
+  WHITE: 'white'
+};
+var cn = cnCreate('mfui-breadcrumbs-item');
+
+var BreadcrumbsItem = function BreadcrumbsItem(_ref) {
+  var title = _ref.title,
+      href = _ref.href,
+      color = _ref.color,
+      _ref$index = _ref.index,
+      index = _ref$index === void 0 ? 0 : _ref$index,
+      _ref$isLastItem = _ref.isLastItem,
+      isLastItem = _ref$isLastItem === void 0 ? false : _ref$isLastItem,
+      _ref$hasMicrodata = _ref.hasMicrodata,
+      hasMicrodata = _ref$hasMicrodata === void 0 ? false : _ref$hasMicrodata,
+      classes = _ref.classes,
+      dataAttrs = _ref.dataAttrs;
+
+  if (isLastItem) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: cn({
+        color: color
+      })
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, index + 1)), /*#__PURE__*/React.createElement("span", _extends({
+      className: classes === null || classes === void 0 ? void 0 : classes.lastItemTitle
+    }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, index + 1)), title));
+  }
+
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn()
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root, index + 1), hasMicrodata && {
+    itemScope: true,
+    itemProp: 'itemListElement',
+    itemType: 'https://schema.org/ListItem'
+  }), /*#__PURE__*/React.createElement(TextLink, {
+    className: classes === null || classes === void 0 ? void 0 : classes.link,
+    href: href,
+    color: color,
+    dataAttrs: {
+      root: (dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link) ? _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.link, index + 1)) : undefined
+    },
+    itemProp: hasMicrodata ? 'item' : undefined
+  }, /*#__PURE__*/React.createElement("span", _extends({
+    className: classes === null || classes === void 0 ? void 0 : classes.itemTitle
+  }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.itemTitle, index + 1), hasMicrodata && {
+    itemProp: 'name'
+  }), title)), hasMicrodata && /*#__PURE__*/React.createElement("meta", _extends({}, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.meta, index + 1), {
+    itemProp: "position",
+    content: String(index + 1)
+  })));
+};
+
+BreadcrumbsItem.propTypes = {
+  title: PropTypes.string,
+  href: PropTypes.string,
+  color: PropTypes.oneOf(Object.values(TextColor)),
+  index: PropTypes.number,
+  isLastItem: PropTypes.bool,
+  hasMicrodata: PropTypes.bool,
+  classes: PropTypes.shape({
+    link: PropTypes.string,
+    itemTitle: PropTypes.string,
+    lastItemTitle: PropTypes.string
+  }),
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string),
+    link: PropTypes.objectOf(PropTypes.string),
+    itemTitle: PropTypes.objectOf(PropTypes.string),
+    meta: PropTypes.objectOf(PropTypes.string)
+  })
+};
+export default BreadcrumbsItem;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FaqWrapper: React.FC;
+export default FaqWrapper;

package/dist/es/components/FaqWrapper/FaqWrapper.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+var FaqWrapper = function FaqWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    itemScope: true,
+    itemType: "http://schema.org/FAQPage"
+  }, children);
+};
+
+export default FaqWrapper;

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

@@ -16,6 +16,8 @@ declare type Props = {
     badge?: string;
     /** Растягивание компонента на всю доступную ширину */
     isFullWidth?: boolean;
+    /** Включить микроразметку для хлебных крошек */
+    hasBreadcrumbsMicrodata?: boolean;
     /** Класс для корневого элемента */
     className?: string;
     /** Дополнительные классы для внутренних элементов */

package/dist/es/components/PageTitle/PageTitle.js

@@ -14,6 +14,8 @@ var PageTitle = function PageTitle(_ref) {
       badge = _ref.badge,
       _ref$isFullWidth = _ref.isFullWidth,
       isFullWidth = _ref$isFullWidth === void 0 ? true : _ref$isFullWidth,
+      _ref$hasBreadcrumbsMi = _ref.hasBreadcrumbsMicrodata,
+      hasBreadcrumbsMicrodata = _ref$hasBreadcrumbsMi === void 0 ? false : _ref$hasBreadcrumbsMi,
       className = _ref.className,
       _ref$classes = _ref.classes,
       classes = _ref$classes === void 0 ? {} : _ref$classes,
@@ -43,6 +45,7 @@ var PageTitle = function PageTitle(_ref) {
     className: cn([className]),
     ref: rootRef
   }), (breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    hasMicrodata: hasBreadcrumbsMicrodata,
     items: breadcrumbs,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
@@ -65,6 +68,7 @@ PageTitle.propTypes = {
   }).isRequired),
   badge: PropTypes.string,
   isFullWidth: PropTypes.bool,
+  hasBreadcrumbsMicrodata: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({
     breadcrumbs: PropTypes.string

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

@@ -96,6 +96,8 @@ interface IVideoBannerProps {
     imageDesktopWide?: string;
     /** Хлебные крошки */
     breadcrumbs?: BreadCrumbsItemsType;
+    /** Включить микроразметку хлебных крошек */
+    hasBreadcrumbsMicrodata?: boolean;
 }
 declare const VideoBanner: React.FC<IVideoBannerProps>;
 export default VideoBanner;

package/dist/es/components/VideoBanner/VideoBanner.js

@@ -65,7 +65,9 @@ var VideoBanner = function VideoBanner(_ref2) {
       isMuted = _ref2$isMuted === void 0 ? true : _ref2$isMuted,
       breadcrumbs = _ref2.breadcrumbs,
       _ref2$videoMobile = _ref2.videoMobile,
-      videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile;
+      videoMobile = _ref2$videoMobile === void 0 ? false : _ref2$videoMobile,
+      _ref2$hasBreadcrumbsM = _ref2.hasBreadcrumbsMicrodata,
+      hasBreadcrumbsMicrodata = _ref2$hasBreadcrumbsM === void 0 ? false : _ref2$hasBreadcrumbsM;
 
   var _React$useState = React.useState(true),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -207,6 +209,7 @@ var VideoBanner = function VideoBanner(_ref2) {
   }), /*#__PURE__*/React.createElement(ContentArea, null, /*#__PURE__*/React.createElement("div", {
     className: cn('wrapper')
   }, !!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && /*#__PURE__*/React.createElement(Breadcrumbs, {
+    hasMicrodata: hasBreadcrumbsMicrodata,
     dataAttrs: {
       root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbs,
       link: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.breadcrumbsLink
@@ -278,6 +281,7 @@ VideoBanner.propTypes = {
   breadcrumbs: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string.isRequired,
     href: PropTypes.string
-  }).isRequired)
+  }).isRequired),
+  hasBreadcrumbsMicrodata: PropTypes.bool
 };
 export default VideoBanner;

package/dist/es/index.d.ts

@@ -1,9 +1,14 @@
 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 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 Card } from './components/Card/Card';
@@ -12,6 +17,7 @@ export { default as CarouselBox } from './components/CarouselBox/CarouselBox';
 export { default as Container } from './components/Container/Container';
 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 Instructions } from './components/Instructions/Instructions';
 export { default as PageTitle } from './components/PageTitle/PageTitle';
 export { default as Partners } from './components/Partners/Partners';
@@ -31,6 +37,7 @@ 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 VideoBanner } from './components/VideoBanner/VideoBanner';
 export { default as VideoBlock } from './components/VideoBlock/VideoBlock';

package/dist/es/index.js

@@ -1,9 +1,14 @@
 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 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 Card } from "./components/Card/Card";
@@ -12,6 +17,7 @@ export { default as CarouselBox } from "./components/CarouselBox/CarouselBox";
 export { default as Container } from "./components/Container/Container";
 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 Instructions } from "./components/Instructions/Instructions";
 export { default as PageTitle } from "./components/PageTitle/PageTitle";
 export { default as Partners } from "./components/Partners/Partners";
@@ -31,6 +37,7 @@ 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 VideoBanner } from "./components/VideoBanner/VideoBanner";
 export { default as VideoBlock } from "./components/VideoBlock/VideoBlock";

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

@@ -21,6 +21,8 @@ export interface IAccordionBox {
     title: string;
     /** Состояние аккордеона, заданное извне */
     isOpened?: boolean;
+    /** Включить микроразметку */
+    hasMicrodata?: boolean;
     /** Отключить ограничение ширины */
     isFullWidth?: boolean;
     /** Центрирование по горизонтали для расширения 1280+ */

package/dist/lib/components/AccordionBox/AccordionBox.js

@@ -74,6 +74,7 @@ AccordionBox.propTypes = {
   title: PropTypes.string.isRequired,
   isFullWidth: PropTypes.bool,
   isOpened: PropTypes.bool,
+  hasMicrodata: PropTypes.bool,
   hCenterAlignWide: PropTypes.bool,
   className: PropTypes.string,
   classes: PropTypes.shape({

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import './style/AudioPlayer.less';
+export interface IAudioPlayerProps {
+    audioSrc: string;
+    audioTitle: string;
+    position?: 'left' | 'center' | 'right';
+    isFullWidth?: boolean;
+}
+declare const AudioPlayer: React.FC<IAudioPlayerProps>;
+export default AudioPlayer;

package/dist/lib/components/AudioPlayer/AudioPlayer.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _AudioProgress = _interopRequireDefault(require("./AudioProgress"));
+
+var _AudioVolume = _interopRequireDefault(require("./AudioVolume"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var IconPause = function IconPause(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M11 10.5v11a.5.5 0 00.5.5h2a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5h-2a.5.5 0 00-.5.5zm7 0v11a.5.5 0 00.5.5h2a.5.5 0 00.5-.5v-11a.5.5 0 00-.5-.5h-2a.5.5 0 00-.5.5z"
+  }));
+};
+
+var IconPlay = function IconPlay(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M11.5 22.13V9.87a.5.5 0 01.752-.431l10.508 6.13a.5.5 0 010 .863l-10.508 6.13a.5.5 0 01-.752-.433z"
+  }));
+};
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-audio-player');
+
+var AudioPlayer = function AudioPlayer(_ref) {
+  var audioSrc = _ref.audioSrc,
+      audioTitle = _ref.audioTitle,
+      _ref$position = _ref.position,
+      position = _ref$position === void 0 ? 'center' : _ref$position,
+      isFullWidth = _ref.isFullWidth;
+
+  var audioRef = _react["default"].useRef(null);
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isPlaying = _React$useState2[0],
+      setIsPlaying = _React$useState2[1];
+
+  var _React$useState3 = _react["default"].useState(false),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      isPause = _React$useState4[0],
+      setIsPause = _React$useState4[1];
+
+  var handlePLay = function handlePLay() {
+    var _a;
+
+    setIsPlaying(true);
+    setIsPause(false);
+    (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.play();
+  };
+
+  var handlePause = function handlePause() {
+    var _a;
+
+    setIsPlaying(false);
+    setIsPause(true);
+    (_a = audioRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+  };
+
+  var handleChangeAudioCurrentTime = function handleChangeAudioCurrentTime(currentTime) {
+    if (!audioRef || !audioRef.current) {
+      return;
+    }
+
+    audioRef.current.currentTime = currentTime;
+  };
+
+  var handleChangeAudioVolume = function handleChangeAudioVolume(volume) {
+    if (!audioRef || !audioRef.current) {
+      return;
+    }
+
+    audioRef.current.volume = volume;
+    audioRef.current.muted = !volume;
+  };
+
+  var playingIconHandleClick = _react["default"].useMemo(function () {
+    return isPlaying ? handlePause : handlePLay;
+  }, [isPlaying]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn({
+      'full-width': isFullWidth,
+      position: position
+    })
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('player')
+  }, /*#__PURE__*/_react["default"].createElement("audio", {
+    className: cn('audio'),
+    ref: audioRef,
+    controls: false
+  }, /*#__PURE__*/_react["default"].createElement("source", {
+    src: audioSrc,
+    type: "audio/mpeg"
+  })), /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('playing-controls')
+  }, /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+    icon: isPlaying ? /*#__PURE__*/_react["default"].createElement(IconPause, null) : /*#__PURE__*/_react["default"].createElement(IconPlay, null),
+    onClick: playingIconHandleClick,
+    sizeAll: "small",
+    className: cn('button')
+  })), /*#__PURE__*/_react["default"].createElement(_AudioProgress["default"], {
+    audioRef: audioRef,
+    audioTitle: audioTitle,
+    isPlaying: isPlaying,
+    isPause: isPause,
+    onChangeAudioCurrentTime: handleChangeAudioCurrentTime,
+    onPLay: handlePLay,
+    onSetIsPlaying: setIsPlaying
+  }), /*#__PURE__*/_react["default"].createElement(_AudioVolume["default"], {
+    onChangeAudioVolume: handleChangeAudioVolume
+  })));
+};
+
+var _default = AudioPlayer;
+exports["default"] = _default;

package/dist/lib/components/AudioPlayer/AudioProgress.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './style/AudioProgress.less';
+export declare const INTERVAL_DELAY = 1000;
+export interface IAudioProgressProps {
+    audioRef: React.MutableRefObject<HTMLAudioElement | null>;
+    audioTitle: string;
+    isPlaying: boolean;
+    isPause: boolean;
+    onChangeAudioCurrentTime: (currentTime: number) => void;
+    onPLay: () => void;
+    onSetIsPlaying: (value: boolean) => void;
+}
+declare const AudioProgress: React.FC<IAudioProgressProps>;
+export default AudioProgress;