@megafon/ui-shared 6.0.0-beta.4 → 6.0.0

package/dist/es/components/ImageBanner/ImageBanner.js

@@ -3,9 +3,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "core-js/modules/es.symbol.js";
 import "core-js/modules/es.symbol.description.js";
 import "core-js/modules/es.array.concat.js";
-import * as React from 'react';
+import "core-js/modules/es.object.values.js";
+import React from 'react';
 import { Header } from '@megafon/ui-core';
 import { breakpoints, cnCreate, filterDataAttrs, convert, titleConvertConfig } from '@megafon/ui-helpers';
+import * as PropTypes from 'prop-types';
 import "./ImageBanner.css";
 export var BackgroundColor = {
   TRANSPARENT: 'transparent',
@@ -28,15 +30,18 @@ export var ImageVerticalAlign = {
   CENTER: 'center',
   BOTTOM: 'bottom'
 };
+
 var getTheme = function getTheme(backgrounColor) {
   switch (backgrounColor) {
     case BackgroundColor.GREEN:
     case BackgroundColor.PURPLE:
       return NavTheme.LIGHT;
+
     default:
       return NavTheme.DARK;
   }
 };
+
 var cn = cnCreate('mfui-image-banner');
 var typographyConfig = {
   b: {
@@ -50,51 +55,56 @@ var typographyConfig = {
     }
   }
 };
+
 var ImageBanner = function ImageBanner(_ref2) {
   var dataAttrs = _ref2.dataAttrs,
-    className = _ref2.className,
-    _ref2$classes = _ref2.classes,
-    classes = _ref2$classes === void 0 ? {} : _ref2$classes,
-    rootRef = _ref2.rootRef,
-    _ref2$imageMobile = _ref2.imageMobile,
-    imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
-    _ref2$imageMobile2x = _ref2.imageMobile2x,
-    imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
-    _ref2$imageDesktop = _ref2.imageDesktop,
-    imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
-    _ref2$imageDesktop2x = _ref2.imageDesktop2x,
-    imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
-    _ref2$imageAlt = _ref2.imageAlt,
-    imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
-    _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
-    imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
-    title = _ref2.title,
-    description = _ref2.description,
-    cost = _ref2.cost,
-    _ref2$headerLevelMobi = _ref2.headerLevelMobile,
-    headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
-    _ref2$headerLevel = _ref2.headerLevel,
-    headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
-    _ref2$backgroundColor = _ref2.backgroundColor,
-    backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
-    _ref2$radius = _ref2.radius,
-    radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
-    autoHeight = _ref2.autoHeight,
-    isImageFullWidth = _ref2.isImageFullWidth,
-    badges = _ref2.badges,
-    adBlock = _ref2.adBlock,
-    _ref2$children = _ref2.children,
-    children = _ref2$children === void 0 ? [] : _ref2$children;
+      className = _ref2.className,
+      _ref2$classes = _ref2.classes,
+      classes = _ref2$classes === void 0 ? {} : _ref2$classes,
+      rootRef = _ref2.rootRef,
+      _ref2$imageMobile = _ref2.imageMobile,
+      imageMobile = _ref2$imageMobile === void 0 ? '' : _ref2$imageMobile,
+      _ref2$imageMobile2x = _ref2.imageMobile2x,
+      imageMobile2x = _ref2$imageMobile2x === void 0 ? '' : _ref2$imageMobile2x,
+      _ref2$imageDesktop = _ref2.imageDesktop,
+      imageDesktop = _ref2$imageDesktop === void 0 ? '' : _ref2$imageDesktop,
+      _ref2$imageDesktop2x = _ref2.imageDesktop2x,
+      imageDesktop2x = _ref2$imageDesktop2x === void 0 ? '' : _ref2$imageDesktop2x,
+      _ref2$imageAlt = _ref2.imageAlt,
+      imageAlt = _ref2$imageAlt === void 0 ? '' : _ref2$imageAlt,
+      _ref2$imageVerticalAl = _ref2.imageVerticalAlign,
+      imageVerticalAlign = _ref2$imageVerticalAl === void 0 ? ImageVerticalAlign.CENTER : _ref2$imageVerticalAl,
+      title = _ref2.title,
+      description = _ref2.description,
+      cost = _ref2.cost,
+      _ref2$headerLevelMobi = _ref2.headerLevelMobile,
+      headerLevelMobile = _ref2$headerLevelMobi === void 0 ? 'h1' : _ref2$headerLevelMobi,
+      _ref2$headerLevel = _ref2.headerLevel,
+      headerLevel = _ref2$headerLevel === void 0 ? 'h1' : _ref2$headerLevel,
+      _ref2$backgroundColor = _ref2.backgroundColor,
+      backgroundColor = _ref2$backgroundColor === void 0 ? BackgroundColor.TRANSPARENT : _ref2$backgroundColor,
+      _ref2$radius = _ref2.radius,
+      radius = _ref2$radius === void 0 ? Radius.CORNERS : _ref2$radius,
+      autoHeight = _ref2.autoHeight,
+      isImageFullWidth = _ref2.isImageFullWidth,
+      badges = _ref2.badges,
+      adBlock = _ref2.adBlock,
+      _ref2$children = _ref2.children,
+      children = _ref2$children === void 0 ? [] : _ref2$children;
+
   var _React$useState = React.useState(false),
-    _React$useState2 = _slicedToArray(_React$useState, 2),
-    isMobile = _React$useState2[0],
-    setIsMobile = _React$useState2[1];
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isMobile = _React$useState2[0],
+      setIsMobile = _React$useState2[1];
+
   React.useEffect(function () {
     var mediaQuery = window.matchMedia("(max-width: ".concat(breakpoints.MOBILE_MIDDLE_END, "px)"));
+
     var handleMediaChange = function handleMediaChange(_ref3) {
       var matches = _ref3.matches;
       setIsMobile(matches);
     };
+
     setIsMobile(mediaQuery.matches);
     mediaQuery.addEventListener('change', handleMediaChange);
     return function () {
@@ -152,4 +162,45 @@ var ImageBanner = function ImageBanner(_ref2) {
     ref: rootRef
   }), renderContent, hasImage && renderImage);
 };
+
+ImageBanner.propTypes = {
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    image: PropTypes.objectOf(PropTypes.string.isRequired)
+  }),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    image: PropTypes.string,
+    imageSource: PropTypes.string,
+    title: PropTypes.string,
+    description: PropTypes.string,
+    cost: PropTypes.string,
+    badgesContainer: PropTypes.string,
+    badges: PropTypes.string,
+    badge: PropTypes.string,
+    adBlock: PropTypes.string,
+    children: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  description: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  cost: PropTypes.string,
+  headerLevelMobile: PropTypes.oneOf(['h1', 'h2']),
+  headerLevel: PropTypes.oneOf(['h1', 'h2']),
+  backgroundColor: PropTypes.oneOf(Object.values(BackgroundColor)),
+  radius: PropTypes.oneOf(Object.values(Radius)),
+  imageMobile: PropTypes.string,
+  imageMobile2x: PropTypes.string,
+  imageDesktop: PropTypes.string,
+  imageDesktop2x: PropTypes.string,
+  imageAlt: PropTypes.string,
+  imageVerticalAlign: PropTypes.oneOf(Object.values(ImageVerticalAlign)),
+  autoHeight: PropTypes.bool,
+  isImageFullWidth: PropTypes.bool,
+  badges: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]),
+  adBlock: PropTypes.element
+};
 export default ImageBanner;