@megafon/ui-shared 5.15.0 → 6.0.0-beta.1

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

@@ -1,14 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
-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.map.js";
 import "core-js/modules/es.array.concat.js";
-import "core-js/modules/es.object.values.js";
-import React from 'react';
+import "core-js/modules/es.array.map.js";
+import * as React from 'react';
 import { Header, PriceBadge } 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',
@@ -31,18 +28,15 @@ 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: {
@@ -56,70 +50,46 @@ 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,
-      _ref2$badges = _ref2.badges,
-      badges = _ref2$badges === void 0 ? [] : _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.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 () {
-      mediaQuery.removeEventListener('change', handleMediaChange);
-    };
-  }, []);
+    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$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,
+    _ref2$badges = _ref2.badges,
+    badges = _ref2$badges === void 0 ? [] : _ref2$badges,
+    hasBottomOffset = _ref2.hasBottomOffset,
+    adBlock = _ref2.adBlock,
+    _ref2$children = _ref2.children,
+    children = _ref2$children === void 0 ? [] : _ref2$children;
   var navTheme = getTheme(backgroundColor);
   var hasImage = !!(imageMobile || imageMobile2x || imageDesktop || imageDesktop2x);
   var renderBadges = !!badges.length && /*#__PURE__*/React.createElement("div", {
     className: cn('badges', [classes.badges])
-  }, badges.map(function (_ref4) {
-    var text = _ref4.text,
-        iconType = _ref4.iconType;
+  }, badges.map(function (_ref3) {
+    var text = _ref3.text,
+      iconType = _ref3.iconType;
     return /*#__PURE__*/React.createElement(PriceBadge, {
       className: classes.badge,
       theme: navTheme,
@@ -136,8 +106,7 @@ var ImageBanner = function ImageBanner(_ref2) {
     className: cn('badges-container', [classes.badgesContainer])
   }, renderBadges, renderAdBlock), !!title && /*#__PURE__*/React.createElement(Header, {
     className: cn('title', [classes.title]),
-    color: "inherit",
-    as: isMobile ? headerLevelMobile : headerLevel
+    color: "inherit"
   }, typeof title === 'string' ? convert(title, titleConvertConfig) : title), !!description && /*#__PURE__*/React.createElement(Header, {
     className: cn('description', [classes.description]),
     as: "h5",
@@ -167,51 +136,12 @@ var ImageBanner = function ImageBanner(_ref2) {
       'has-image': hasImage,
       'auto-height': autoHeight,
       'full-width': isImageFullWidth,
+      'bottom-offset': hasBottomOffset && !hasImage,
       radius: radius
     }, [className, classes.root]),
     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,
-    title: PropTypes.string,
-    description: PropTypes.string,
-    cost: PropTypes.string,
-    badgesContainer: PropTypes.string,
-    badges: PropTypes.string,
-    badge: PropTypes.string,
-    adBlock: 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.arrayOf(PropTypes.shape({
-    iconType: PropTypes.oneOf(['timer', 'price', 'check', 'attention', 'info', 'profile']).isRequired,
-    text: PropTypes.string.isRequired
-  }).isRequired),
-  adBlock: PropTypes.element
+  }), /*#__PURE__*/React.createElement("div", {
+    className: cn('wrapper')
+  }, renderContent, hasImage && renderImage));
 };
 export default ImageBanner;