@megafon/ui-core 6.0.0-beta.3 → 6.0.0

package/dist/lib/components/Badges/components/TimerBadge/TimerBadge.js

@@ -0,0 +1,135 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.TIMEOUT = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/es.date.now.js");
+
+require("core-js/modules/es.date.to-string.js");
+
+require("core-js/modules/web.timers.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _Timer = _interopRequireDefault(require("./Timer/Timer"));
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var TimerIcon = function TimerIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10 18a8 8 0 100-16 8 8 0 000 16zm1-8.414V5H9v5.414l3 3L13.414 12 11 9.586z"
+  }));
+};
+
+var SECONDS_IN_HOUR = 3600;
+var MS_IN_SECOND = 1000;
+var TIMEOUT = 1000;
+exports.TIMEOUT = TIMEOUT;
+var TimerBadgeTheme = {
+  RED: 'red',
+  GREY: 'grey'
+};
+var cn = (0, _uiHelpers.cnCreate)('mfui-timer-badge');
+
+var TimerBadge = function TimerBadge(_ref) {
+  var expirationDate = _ref.expirationDate,
+      _ref$countdownStart = _ref.countdownStart,
+      countdownStart = _ref$countdownStart === void 0 ? 86400 : _ref$countdownStart,
+      _ref$hasPrefix = _ref.hasPrefix,
+      hasPrefix = _ref$hasPrefix === void 0 ? false : _ref$hasPrefix,
+      _ref$countdownText = _ref.countdownText,
+      countdownText = _ref$countdownText === void 0 ? 'Закончится через' : _ref$countdownText,
+      _ref$expirationDateTe = _ref.expirationDateText,
+      expirationDateText = _ref$expirationDateTe === void 0 ? 'Воспользуйтесь до' : _ref$expirationDateTe,
+      className = _ref.className,
+      dataAttrs = _ref.dataAttrs;
+  var remainingTime = (expirationDate.getTime() - Date.now()) / MS_IN_SECOND;
+
+  var _useState = (0, _react.useState)(remainingTime),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      actualRemainingTime = _useState2[0],
+      setActualRemainingTime = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      showCountdown = _useState4[0],
+      setShowCountdown = _useState4[1];
+
+  var isLastHour = actualRemainingTime < SECONDS_IN_HOUR;
+  var isTimeExpired = actualRemainingTime < 1;
+  var theme = showCountdown ? TimerBadgeTheme.RED : TimerBadgeTheme.GREY;
+  var additionalText = showCountdown ? countdownText : expirationDateText;
+  (0, _react.useEffect)(function () {
+    setShowCountdown(actualRemainingTime < countdownStart);
+  }, [actualRemainingTime, countdownStart]);
+  (0, _react.useEffect)(function () {
+    if (isTimeExpired) {
+      return undefined;
+    }
+
+    var timeoutId = window.setTimeout(function () {
+      return setActualRemainingTime(actualRemainingTime - 1);
+    }, TIMEOUT);
+    return function () {
+      return clearTimeout(timeoutId);
+    };
+  }, [isTimeExpired, showCountdown, actualRemainingTime]);
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root), {
+    className: cn({
+      theme: theme
+    }, className)
+  }), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.iconContainer), {
+    className: cn('icon-container', {
+      shadow: isLastHour && showCountdown
+    })
+  }), /*#__PURE__*/_react["default"].createElement(TimerIcon, {
+    className: cn('icon')
+  })), /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text), {
+    className: cn('text')
+  }), isTimeExpired ? 'Время действия истекло' : /*#__PURE__*/_react["default"].createElement(_Timer["default"], {
+    additionalText: hasPrefix ? additionalText : undefined,
+    showCountdown: showCountdown,
+    expirationDate: expirationDate,
+    actualRemainingTime: actualRemainingTime,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.timer
+    }
+  })));
+};
+
+TimerBadge.propTypes = {
+  expirationDate: PropTypes.instanceOf(Date).isRequired,
+  countdownStart: PropTypes.number,
+  hasPrefix: PropTypes.bool,
+  countdownText: PropTypes.string,
+  expirationDateText: PropTypes.string,
+  className: PropTypes.string,
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    text: PropTypes.objectOf(PropTypes.string.isRequired),
+    timer: PropTypes.objectOf(PropTypes.string.isRequired),
+    iconContainer: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
+};
+var _default = TimerBadge;
+exports["default"] = _default;

package/dist/lib/components/Banner/Banner.css

@@ -1 +1,195 @@
-h1,h2,h3,h4,h5{margin:0}.mfui-banner{position:relative}.mfui-banner .swiper-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.mfui-banner .mfui-banner__swiper-container{position:relative}.mfui-banner__swiper{overflow:hidden}.mfui-banner__slide{-ms-flex-negative:0;flex-shrink:0;height:500px}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__slide{height:420px}}@media screen and (min-width:1280px){.mfui-banner__slide{height:400px}}.mfui-banner__slide-content{border-right:1px solid transparent;margin-right:-1px}@media screen and (max-width:1023px){.mfui-banner__slide-content{height:100%}}.mfui-banner_auto-height .mfui-banner__slide{height:auto}.mfui-banner .mfui-banner__arrow{position:absolute;top:50%;-webkit-transition:scale .2s linear;transition:scale .2s linear;translate:0 -50%;z-index:10}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow{display:none}}.mfui-banner .mfui-banner__arrow_theme_white{height:64px;width:64px}@media screen and (max-width:1023px){.mfui-banner .mfui-banner__arrow_theme_white{display:none}}.mfui-banner .mfui-banner__arrow_prev{left:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_prev{left:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_prev{left:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_prev{left:20px}}.mfui-banner .mfui-banner__arrow_next{right:12px}@media screen and (max-width:767px){.mfui-banner .mfui-banner__arrow_next{right:8px}}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner .mfui-banner__arrow_next{right:16px}}@media screen and (min-width:1280px){.mfui-banner .mfui-banner__arrow_next{right:20px}}.mfui-banner .mfui-banner__arrow_prev.mfui-banner__arrow_theme_white{left:0;translate:-50% -50%}.mfui-banner .mfui-banner__arrow_next.mfui-banner__arrow_theme_white{right:0;translate:50% -50%}.mfui-banner_no-touch .mfui-banner .mfui-banner__arrow__arrow_theme_white:hover{scale:1.25}.mfui-banner_no-touch .mfui-banner .mfui-banner__arrow__arrow_theme_white:active{scale:1.125}.mfui-banner__pagination{display:-webkit-box;display:-ms-flexbox;display:flex;gap:12px;left:50%;z-index:10;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:32px}.mfui-banner__pagination_bottom-offset{bottom:60px;left:50%;position:absolute;-webkit-transform:translateX(-50%);transform:translateX(-50%);z-index:10}@media screen and (min-width:768px) and (max-width:1023px){.mfui-banner__pagination_bottom-offset{bottom:89px}}@media screen and (min-width:1024px) and (max-width:1279px){.mfui-banner__pagination_bottom-offset{bottom:90px}}@media screen and (min-width:1280px) and (max-width:1439px){.mfui-banner__pagination_bottom-offset{bottom:65px}}@media screen and (min-width:1440px){.mfui-banner__pagination_bottom-offset{bottom:72px}}.mfui-banner_radius_rounded .mfui-banner__swiper{border-radius:24px}@media screen and (max-width:767px){.mfui-banner_show-next-slide .mfui-banner__swiper{border-radius:0;margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:32px}.mfui-banner_show-next-slide .mfui-banner__slide-content{border-right:none;margin-right:0}.mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content{border-radius:24px}}.mfui-banner_background-color_green .mfui-banner__swiper{background-color:var(--brandGreen)}.mfui-banner_background-color_purple .mfui-banner__swiper{background-color:var(--brandPurple)}.mfui-banner_background-color_gradient .mfui-banner__swiper{background:-webkit-gradient(linear,right top,left top,from(#ada6ba),to(#f6f2f9));background:linear-gradient(270deg,#ada6ba,#f6f2f9)}.mfui-banner_background-color_light .mfui-banner__swiper{background-color:#f6f2f9}.mfui-banner_background-color_spbSky0 .mfui-banner__swiper{background-color:var(--spbSky0)}
+.mfui-banner {
+  position: relative;
+}
+.mfui-banner .swiper-wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+}
+.mfui-banner .mfui-banner__swiper-container {
+  position: relative;
+}
+.mfui-banner__swiper {
+  overflow: hidden;
+}
+.mfui-banner__slide {
+  -ms-flex-negative: 0;
+      flex-shrink: 0;
+  height: 500px;
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-banner__slide {
+    height: 420px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-banner__slide {
+    height: 400px;
+  }
+}
+.mfui-banner__slide-content {
+  margin-right: -1px;
+  border-right: 1px solid transparent;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-banner__slide-content {
+    height: 100%;
+  }
+}
+.mfui-banner_auto-height .mfui-banner__slide {
+  height: auto;
+}
+.mfui-banner__arrow {
+  position: absolute;
+  top: 50%;
+  z-index: 10;
+  translate: 0 -50%;
+  -webkit-transition: scale 0.2s linear;
+  transition: scale 0.2s linear;
+}
+@media screen and (max-width: 767px) {
+  .mfui-banner__arrow {
+    display: none;
+  }
+}
+.mfui-banner__arrow_theme_white {
+  width: 64px;
+  height: 64px;
+}
+@media screen and (max-width: 1023px) {
+  .mfui-banner__arrow_theme_white {
+    display: none;
+  }
+}
+.mfui-banner__arrow_prev {
+  left: 12px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-banner__arrow_prev {
+    left: 8px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-banner__arrow_prev {
+    left: 16px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-banner__arrow_prev {
+    left: 20px;
+  }
+}
+.mfui-banner__arrow_next {
+  right: 12px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-banner__arrow_next {
+    right: 8px;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-banner__arrow_next {
+    right: 16px;
+  }
+}
+@media screen and (min-width: 1280px) {
+  .mfui-banner__arrow_next {
+    right: 20px;
+  }
+}
+.mfui-banner__arrow_prev.mfui-banner__arrow_theme_white {
+  left: 0;
+  translate: -50% -50%;
+}
+.mfui-banner__arrow_next.mfui-banner__arrow_theme_white {
+  right: 0;
+  translate: 50% -50%;
+}
+.mfui-banner_no-touch .mfui-banner__arrow_theme_white:hover {
+  scale: 1.25;
+}
+.mfui-banner_no-touch .mfui-banner__arrow_theme_white:active {
+  scale: 1.125;
+}
+.mfui-banner__pagination {
+  left: 50%;
+  z-index: 10;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  gap: 12px;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  margin-top: 32px;
+}
+.mfui-banner__pagination_bottom-offset {
+  position: absolute;
+  bottom: 60px;
+  left: 50%;
+  z-index: 10;
+  -webkit-transform: translateX(-50%);
+          transform: translateX(-50%);
+}
+@media screen and (min-width: 768px) and (max-width: 1023px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 89px;
+  }
+}
+@media screen and (min-width: 1024px) and (max-width: 1279px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 90px;
+  }
+}
+@media screen and (min-width: 1280px) and (max-width: 1439px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 65px;
+  }
+}
+@media screen and (min-width: 1440px) {
+  .mfui-banner__pagination_bottom-offset {
+    bottom: 72px;
+  }
+}
+.mfui-banner_radius_rounded .mfui-banner__swiper {
+  border-radius: 24px;
+}
+@media screen and (max-width: 767px) {
+  .mfui-banner_show-next-slide .mfui-banner__swiper {
+    margin-right: -16px;
+    margin-left: -16px;
+    padding-right: 32px;
+    padding-left: 16px;
+    border-radius: 0;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-banner_show-next-slide .mfui-banner__slide-content {
+    margin-right: 0;
+    border-right: none;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-banner_show-next-slide.mfui-banner_radius_rounded .mfui-banner__slide-content {
+    border-radius: 24px;
+  }
+}
+.mfui-banner_background-color_green .mfui-banner__swiper {
+  background-color: var(--brandGreen);
+}
+.mfui-banner_background-color_purple .mfui-banner__swiper {
+  background-color: var(--brandPurple);
+}
+.mfui-banner_background-color_gradient .mfui-banner__swiper {
+  background: -webkit-gradient(linear, right top, left top, from(#ADA6BA), to(#F6F2F9));
+  background: linear-gradient(270deg, #ADA6BA 0%, #F6F2F9 100%);
+}
+.mfui-banner_background-color_light .mfui-banner__swiper {
+  background-color: #F6F2F9;
+}
+.mfui-banner_background-color_spbSky0 .mfui-banner__swiper {
+  background-color: var(--spbSky0);
+}

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import SwiperCore from 'swiper';
 import { ThemeType as ArrowThemeType } from '../NavArrow/NavArrow';
-import './Banner.scss';
+import './Banner.less';
 export declare const BackgroundColor: {
     readonly TRANSPARENT: "transparent";
     readonly GREEN: "green";
@@ -10,17 +10,17 @@ export declare const BackgroundColor: {
     readonly GRADIENT: "gradient";
     readonly LIGHT: "light";
 };
-type BackgroundColorType = (typeof BackgroundColor)[keyof typeof BackgroundColor];
+declare type BackgroundColorType = typeof BackgroundColor[keyof typeof BackgroundColor];
 export declare const Radius: {
     readonly CORNERS: "corners";
     readonly ROUNDED: "rounded";
 };
-export type RadiusType = (typeof Radius)[keyof typeof Radius];
+export declare type RadiusType = typeof Radius[keyof typeof Radius];
 export declare const NavTheme: {
     readonly LIGHT: "light";
     readonly DARK: "dark";
 };
-type NavThemeType = (typeof NavTheme)[keyof typeof NavTheme];
+declare type NavThemeType = typeof NavTheme[keyof typeof NavTheme];
 export interface IBannerProps {
     /** Сss класс для внешнего контейнера */
     className?: string;
@@ -69,7 +69,6 @@ export interface IBannerProps {
     noIncreaseAutoplayDelay?: boolean;
     /** Показать часть следующего слайда */
     showNextSlide?: boolean;
-    children?: React.ReactNode;
     /** Ref на swiper */
     getSwiper?: (instance: SwiperCore) => void;
     /** Обработчик клика по стрелке "вперед" (должен быть обернут в useCallback) */