@megafon/ui-shared 4.5.3 → 4.6.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.6.0](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.5.3...@megafon/ui-shared@4.6.0) (2022-12-06)
+
+
+### Features
+
+* **textwithicon:** fix playground ([44c4b6a](https://github.com/MegafonWebLab/megafon-ui/commit/44c4b6ad323a88f48d3b79191e3be4c44fa2ac14))
+* **textwithiconitem:** add example and fix text ([3db8692](https://github.com/MegafonWebLab/megafon-ui/commit/3db869242615caacf1101e4fcff1877ee43c9c95))
+* **textwithiconitem:** add render html and classes ([74e21bc](https://github.com/MegafonWebLab/megafon-ui/commit/74e21bcb78e3f4764ceb58d8fa102b6b000c5ae2))
+* **videoblock:** add playsinline prop ([c383928](https://github.com/MegafonWebLab/megafon-ui/commit/c383928473596bb962e68a15125fa9574bce4a64))
+
+
+
+
+
 ## [4.5.3](https://github.com/MegafonWebLab/megafon-ui/compare/@megafon/ui-shared@4.5.2...@megafon/ui-shared@4.5.3) (2022-11-29)
 
 

package/dist/es/components/TextWithIcon/TextWithIconItem.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import './TextWithIconItem.less';
 export interface ITextWithIconItem {
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        icon?: string;
+        text?: string;
+    };
     /** Текст */
     text: string | string[];
     /** Иконка */

package/dist/es/components/TextWithIcon/TextWithIconItem.js

@@ -1,28 +1,41 @@
+import "core-js/modules/es.array.is-array";
+import "core-js/modules/es.array.map";
 import _extends from "@babel/runtime/helpers/extends";
 import * as React from 'react';
-import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import { cnCreate, convert, filterDataAttrs, textConvertConfig } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./TextWithIconItem.css";
 var cn = cnCreate('mfui-text-with-icon-item');
 
 var TextWithIconItem = function TextWithIconItem(_ref) {
-  var text = _ref.text,
+  var className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      text = _ref.text,
       icon = _ref.icon,
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       _ref$centeringOnMobil = _ref.centeringOnMobile,
-      centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
-      className = _ref.className;
+      centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil;
+  var renderText = React.useMemo(function () {
+    if (Array.isArray(text)) {
+      return text.map(function (item) {
+        return convert(item, textConvertConfig);
+      });
+    }
+
+    return convert(text, textConvertConfig);
+  }, [text]);
   return /*#__PURE__*/React.createElement("div", _extends({
     className: cn({
       'centering-on-mobile': centeringOnMobile
     }, [className]),
     ref: rootRef
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
-    className: cn('svg-icon')
+    className: cn('svg-icon', [classes.icon])
   }, icon), /*#__PURE__*/React.createElement("div", {
-    className: cn('text')
-  }, text));
+    className: cn('text', [classes.text])
+  }, renderText));
 };
 
 TextWithIconItem.propTypes = {

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

@@ -49,6 +49,8 @@ export interface IVideoBlockProps {
     poster?: string;
     /** Расположение контента справа от видео. Только для десктопа */
     contentPositionRight?: boolean;
+    /** Воспроизводит видео на iOS устройствах без перехода в полноэкранный режим */
+    playsinline?: boolean;
 }
 declare const VideoBlock: React.FC<IVideoBlockProps>;
 export default VideoBlock;

package/dist/es/components/VideoBlock/VideoBlock.js

@@ -30,7 +30,9 @@ var VideoBlock = function VideoBlock(_ref) {
       isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
       _ref$contentPositionR = _ref.contentPositionRight,
       contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
-      poster = _ref.poster;
+      poster = _ref.poster,
+      _ref$playsinline = _ref.playsinline,
+      playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline;
   var renderVideo = React.useCallback(function () {
     switch (videoType) {
       case VideoTypes.YOUTUBE:
@@ -44,7 +46,8 @@ var VideoBlock = function VideoBlock(_ref) {
           var showinfo = "&showinfo=0";
           var ivLoadPolicy = "&iv_load_policy=3";
           var playlist = "&playlist=".concat(videoSrc);
-          var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(showinfo).concat(ivLoadPolicy).concat(playlist);
+          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", {
@@ -70,7 +73,8 @@ var VideoBlock = function VideoBlock(_ref) {
               muted: isMuted,
               controls: !isAutoplay,
               loop: true,
-              poster: poster
+              poster: poster,
+              playsInline: playsinline
             }, /*#__PURE__*/React.createElement("source", {
               src: videoSrc,
               type: "video/mp4"
@@ -83,7 +87,7 @@ var VideoBlock = function VideoBlock(_ref) {
           return null;
         }
     }
-  }, [videoType, videoSrc, isAutoplay, isMuted, poster]);
+  }, [videoType, videoSrc, isAutoplay, isMuted, poster, playsinline]);
   var renderContent = React.useCallback(function (_ref2) {
     var title = _ref2.title,
         description = _ref2.description,
@@ -175,6 +179,7 @@ VideoBlock.propTypes = {
   isMuted: PropTypes.bool,
   isAutoplay: PropTypes.bool,
   poster: PropTypes.string,
+  playsinline: PropTypes.bool,
   contentPositionRight: PropTypes.bool
 };
 export default VideoBlock;

package/dist/lib/components/TextWithIcon/TextWithIconItem.d.ts

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import './TextWithIconItem.less';
 export interface ITextWithIconItem {
+    /** Дополнительные классы для внутренних элементов */
+    classes?: {
+        icon?: string;
+        text?: string;
+    };
     /** Текст */
     text: string | string[];
     /** Иконка */

package/dist/lib/components/TextWithIcon/TextWithIconItem.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+require("core-js/modules/es.array.is-array");
+
+require("core-js/modules/es.array.map");
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
 var React = _interopRequireWildcard(require("react"));
@@ -24,23 +28,34 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var cn = (0, _uiHelpers.cnCreate)('mfui-text-with-icon-item');
 
 var TextWithIconItem = function TextWithIconItem(_ref) {
-  var text = _ref.text,
+  var className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      text = _ref.text,
       icon = _ref.icon,
       rootRef = _ref.rootRef,
       dataAttrs = _ref.dataAttrs,
       _ref$centeringOnMobil = _ref.centeringOnMobile,
-      centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil,
-      className = _ref.className;
+      centeringOnMobile = _ref$centeringOnMobil === void 0 ? true : _ref$centeringOnMobil;
+  var renderText = React.useMemo(function () {
+    if (Array.isArray(text)) {
+      return text.map(function (item) {
+        return (0, _uiHelpers.convert)(item, _uiHelpers.textConvertConfig);
+      });
+    }
+
+    return (0, _uiHelpers.convert)(text, _uiHelpers.textConvertConfig);
+  }, [text]);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
     className: cn({
       'centering-on-mobile': centeringOnMobile
     }, [className]),
     ref: rootRef
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement("div", {
-    className: cn('svg-icon')
+    className: cn('svg-icon', [classes.icon])
   }, icon), /*#__PURE__*/React.createElement("div", {
-    className: cn('text')
-  }, text));
+    className: cn('text', [classes.text])
+  }, renderText));
 };
 
 TextWithIconItem.propTypes = {

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

@@ -49,6 +49,8 @@ export interface IVideoBlockProps {
     poster?: string;
     /** Расположение контента справа от видео. Только для десктопа */
     contentPositionRight?: boolean;
+    /** Воспроизводит видео на iOS устройствах без перехода в полноэкранный режим */
+    playsinline?: boolean;
 }
 declare const VideoBlock: React.FC<IVideoBlockProps>;
 export default VideoBlock;

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

@@ -48,7 +48,9 @@ var VideoBlock = function VideoBlock(_ref) {
       isAutoplay = _ref$isAutoplay === void 0 ? false : _ref$isAutoplay,
       _ref$contentPositionR = _ref.contentPositionRight,
       contentPositionRight = _ref$contentPositionR === void 0 ? false : _ref$contentPositionR,
-      poster = _ref.poster;
+      poster = _ref.poster,
+      _ref$playsinline = _ref.playsinline,
+      playsinline = _ref$playsinline === void 0 ? false : _ref$playsinline;
 
   var renderVideo = _react["default"].useCallback(function () {
     switch (videoType) {
@@ -63,7 +65,8 @@ var VideoBlock = function VideoBlock(_ref) {
           var showinfo = "&showinfo=0";
           var ivLoadPolicy = "&iv_load_policy=3";
           var playlist = "&playlist=".concat(videoSrc);
-          var src = "".concat(url).concat(autoplay).concat(mute).concat(loop).concat(rel).concat(controls).concat(showinfo).concat(ivLoadPolicy).concat(playlist);
+          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["default"].createElement("div", {
             className: cn('youtube')
           }, /*#__PURE__*/_react["default"].createElement("iframe", {
@@ -89,7 +92,8 @@ var VideoBlock = function VideoBlock(_ref) {
               muted: isMuted,
               controls: !isAutoplay,
               loop: true,
-              poster: poster
+              poster: poster,
+              playsInline: playsinline
             }, /*#__PURE__*/_react["default"].createElement("source", {
               src: videoSrc,
               type: "video/mp4"
@@ -102,7 +106,7 @@ var VideoBlock = function VideoBlock(_ref) {
           return null;
         }
     }
-  }, [videoType, videoSrc, isAutoplay, isMuted, poster]);
+  }, [videoType, videoSrc, isAutoplay, isMuted, poster, playsinline]);
 
   var renderContent = _react["default"].useCallback(function (_ref2) {
     var title = _ref2.title,
@@ -197,6 +201,7 @@ VideoBlock.propTypes = {
   isMuted: _propTypes["default"].bool,
   isAutoplay: _propTypes["default"].bool,
   poster: _propTypes["default"].string,
+  playsinline: _propTypes["default"].bool,
   contentPositionRight: _propTypes["default"].bool
 };
 var _default = VideoBlock;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "4.5.3",
+  "version": "4.6.0",
   "files": [
     "dist"
   ],
@@ -85,7 +85,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.8.4",
-    "@megafon/ui-core": "^4.9.0",
+    "@megafon/ui-core": "^4.9.1",
     "@megafon/ui-helpers": "^2.3.0",
     "core-js": "^3.6.4",
     "htmr": "^0.9.2",
@@ -93,5 +93,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "ab9cb505dca6ae5f4e3db5d4a21add24d10a1be1"
+  "gitHead": "079e229d423944ab3643730e461d4d5b4342cff0"
 }