@megafon/ui-shared 4.21.2 → 5.0.1

package/dist/lib/components/CardsBox/CardsBox.js

@@ -9,10 +9,6 @@ exports["default"] = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 require("core-js/modules/es.array.map.js");
 
 var React = _interopRequireWildcard(require("react"));
@@ -21,11 +17,9 @@ var _uiCore = require("@megafon/ui-core");
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
-var _lodash = _interopRequireDefault(require("lodash.throttle"));
-
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
-var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+var _helpers = _interopRequireDefault(require("./helpers"));
 
 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); }
 
@@ -33,76 +27,34 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _SlidesSettings;
-
-var MAX_CARDS_COUNT_IN_GRID_ON_MOBILE = 2;
-var SlidesSettings = (_SlidesSettings = {}, (0, _defineProperty2["default"])(_SlidesSettings, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
-  slidesPerView: 1,
-  spaceBetween: 16
-}), (0, _defineProperty2["default"])(_SlidesSettings, _uiHelpers.breakpoints.MOBILE_BIG_START, {
-  slidesPerView: 2,
-  spaceBetween: 20
-}), _SlidesSettings);
 var cn = (0, _uiHelpers.cnCreate)('mfui-cards-box');
 
 var CardsBox = function CardsBox(_ref) {
-  var gridHAlign = _ref.gridHAlign,
-      rootRef = _ref.rootRef,
+  var _ref$renderTwoColumns = _ref.renderTwoColumnsInRow,
+      renderTwoColumnsInRow = _ref$renderTwoColumns === void 0 ? false : _ref$renderTwoColumns,
       dataAttrs = _ref.dataAttrs,
-      onChange = _ref.onChange,
       children = _ref.children;
-
-  var _React$useState = React.useState(false),
-      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
-      isMobile = _React$useState2[0],
-      setIsMobile = _React$useState2[1];
-
-  var itemsCount = React.Children.count(children);
-  var isRenderCarousel = isMobile && itemsCount > MAX_CARDS_COUNT_IN_GRID_ON_MOBILE;
-  var renderGrid = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(_uiCore.Grid, {
-      guttersBottom: "medium",
-      guttersLeft: "medium",
-      hAlign: gridHAlign
-    }, React.Children.map(children, function (child) {
-      return /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
-        all: "4",
-        mobile: "12"
-      }, child);
-    }));
-  }, [children, gridHAlign]);
-  var renderCarousel = React.useCallback(function () {
-    return /*#__PURE__*/React.createElement(_uiCore.Carousel, {
-      slidesSettings: SlidesSettings,
-      onChange: onChange
-    }, children);
-  }, [children, onChange]);
-  React.useEffect(function () {
-    var resizeHandler = function resizeHandler() {
-      return window.innerWidth <= _uiHelpers.breakpoints.MOBILE_BIG_END ? setIsMobile(true) : setIsMobile(false);
-    };
-
-    var resizeHandlerThrottled = (0, _lodash["default"])(resizeHandler, _throttleTime["default"].resize);
-    resizeHandler();
-    window.addEventListener('resize', resizeHandlerThrottled);
-    return function () {
-      window.removeEventListener('resize', resizeHandlerThrottled);
-    };
-  }, []);
   return /*#__PURE__*/React.createElement("div", (0, _extends2["default"])({
-    className: cn(),
-    ref: rootRef
-  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs)), isRenderCarousel ? renderCarousel() : renderGrid());
+    className: cn()
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(_uiCore.Grid, {
+    guttersBottom: "medium",
+    guttersLeft: "medium"
+  }, React.Children.map(children, function (child, i) {
+    return /*#__PURE__*/React.createElement(_uiCore.GridColumn, (0, _extends2["default"])({
+      dataAttrs: {
+        root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.column
+      }
+    }, (0, _helpers["default"])(React.Children.count(children), i, renderTwoColumnsInRow)), child);
+  })));
 };
 
 CardsBox.propTypes = {
-  gridHAlign: PropTypes.oneOf(['left', 'right', 'center', 'between', 'around']),
-  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
-    current: PropTypes.elementType
-  }), PropTypes.any])]),
+  renderTwoColumnsInRow: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]).isRequired,
-  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
-  onChange: PropTypes.func
+  dataAttrs: PropTypes.shape({
+    root: PropTypes.objectOf(PropTypes.string.isRequired),
+    column: PropTypes.objectOf(PropTypes.string.isRequired)
+  })
 };
 var _default = CardsBox;
 exports["default"] = _default;

package/dist/lib/components/CardsBox/helpers.d.ts

@@ -0,0 +1,10 @@
+declare type TGridSizeValues = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+declare type GridConfig = {
+    all?: TGridSizeValues;
+    tablet?: TGridSizeValues;
+    mobile?: TGridSizeValues;
+    leftOffsetWide?: TGridSizeValues;
+    leftOffsetDesktop?: TGridSizeValues;
+};
+declare const getColumnConfig: (count: number, index: number, renderTwoColumnsInRow: boolean) => GridConfig;
+export default getColumnConfig;

package/dist/lib/components/CardsBox/helpers.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var getColumnConfig = function getColumnConfig(count, index, renderTwoColumnsInRow) {
+  var offset = renderTwoColumnsInRow ? '2' : undefined;
+  var offsetForEvenColumn = index % 2 ? undefined : offset;
+  var columnSize = {
+    all: '4',
+    tablet: '6',
+    mobile: '12'
+  };
+
+  switch (count) {
+    case 2:
+    case 4:
+      return (0, _extends2["default"])((0, _extends2["default"])({}, columnSize), {
+        leftOffsetWide: offsetForEvenColumn,
+        leftOffsetDesktop: offsetForEvenColumn
+      });
+
+    default:
+      return (0, _extends2["default"])({}, columnSize);
+  }
+};
+
+var _default = getColumnConfig;
+exports["default"] = _default;

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
 import { Carousel } from '@megafon/ui-core';
 declare type CarouselPropsTypes = React.ComponentProps<typeof Carousel>;
-declare const CarouselBox: React.FC<CarouselPropsTypes>;
+declare type DesktopSlidesPerView = 3 | 4;
+interface ICarouselBox extends CarouselPropsTypes {
+    /** Количество видимых слайдов на разрешении 1280 и выше */
+    desktopSlidesPerView?: DesktopSlidesPerView;
+}
+declare const CarouselBox: React.FC<ICarouselBox>;
 export default CarouselBox;

package/dist/lib/components/CarouselBox/CarouselBox.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 require("core-js/modules/es.array.index-of.js");
 
 require("core-js/modules/es.symbol.js");
@@ -21,6 +25,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
 
@@ -34,15 +40,39 @@ var __rest = void 0 && (void 0).__rest || function (s, e) {
   return t;
 };
 
+var getDefaultSlideSettings = function getDefaultSlideSettings(desktopSlidesPerView) {
+  var _ref;
+
+  return _ref = {}, (0, _defineProperty2["default"])(_ref, _uiHelpers.breakpoints.MOBILE_SMALL_START, {
+    slidesPerView: 1,
+    spaceBetween: 16
+  }), (0, _defineProperty2["default"])(_ref, _uiHelpers.breakpoints.MOBILE_BIG_START, {
+    slidesPerView: 2,
+    spaceBetween: 20
+  }), (0, _defineProperty2["default"])(_ref, _uiHelpers.breakpoints.DESKTOP_SMALL_START, {
+    slidesPerView: 3,
+    spaceBetween: 20
+  }), (0, _defineProperty2["default"])(_ref, _uiHelpers.breakpoints.DESKTOP_MIDDLE_START, {
+    slidesPerView: desktopSlidesPerView,
+    spaceBetween: 20
+  }), _ref;
+};
+
 var cn = (0, _uiHelpers.cnCreate)('mfui-carousel-box');
 
 var CarouselBox = function CarouselBox(_a) {
   var children = _a.children,
-      props = __rest(_a, ["children"]);
+      slidesSettings = _a.slidesSettings,
+      _a$desktopSlidesPerVi = _a.desktopSlidesPerView,
+      desktopSlidesPerView = _a$desktopSlidesPerVi === void 0 ? 4 : _a$desktopSlidesPerVi,
+      props = __rest(_a, ["children", "slidesSettings", "desktopSlidesPerView"]);
 
+  var settings = slidesSettings || getDefaultSlideSettings(desktopSlidesPerView);
   return /*#__PURE__*/React.createElement("div", {
     className: cn()
-  }, /*#__PURE__*/React.createElement(_uiCore.Carousel, props, children));
+  }, /*#__PURE__*/React.createElement(_uiCore.Carousel, (0, _extends2["default"])({}, props, {
+    slidesSettings: settings
+  }), children));
 };
 
 var _default = CarouselBox;

package/dist/lib/components/Property/Property.js

@@ -152,7 +152,7 @@ var Property = function Property(_ref) {
         _ref3$titleSize = _ref3.titleSize,
         titleSize = _ref3$titleSize === void 0 ? 'default' : _ref3$titleSize,
         _ref3$valueFrameColor = _ref3.valueFrameColor,
-        valueFrameColor = _ref3$valueFrameColor === void 0 ? 'default' : _ref3$valueFrameColor;
+        valueFrameColor = _ref3$valueFrameColor === void 0 ? 'none' : _ref3$valueFrameColor;
     var isFirstItem = i === 0;
     var isRenderBadge = isFirstItem && !!badge;
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, {
@@ -184,7 +184,7 @@ Property.propTypes = {
     value: _propTypes["default"].string,
     titleSize: _propTypes["default"].oneOf(['default', 'big']),
     valueUnit: _propTypes["default"].string,
-    valueFrameColor: _propTypes["default"].oneOf(['default', 'gray'])
+    valueFrameColor: _propTypes["default"].oneOf(['none', 'default', 'gray'])
   }).isRequired).isRequired,
   className: _propTypes["default"].string,
   badge: _propTypes["default"].string,

package/dist/lib/components/Property/types.d.ts

@@ -16,5 +16,5 @@ export declare type Item = {
     description?: Desc[];
     value?: string;
     valueUnit?: string;
-    valueFrameColor?: 'default' | 'gray';
+    valueFrameColor?: 'none' | 'default' | 'gray';
 };

package/dist/lib/index.d.ts

@@ -18,6 +18,7 @@ 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 helpers } from './components/CardsBox/helpers';
 export { default as Instructions } from './components/Instructions/Instructions';
 export { default as NotificationBox } from './components/NotificationBox/NotificationBox';
 export { default as PageTitle } from './components/PageTitle/PageTitle';

package/dist/lib/index.js

@@ -123,6 +123,12 @@ Object.defineProperty(exports, "FaqWrapper", {
     return _FaqWrapper["default"];
   }
 });
+Object.defineProperty(exports, "helpers", {
+  enumerable: true,
+  get: function get() {
+    return _helpers["default"];
+  }
+});
 Object.defineProperty(exports, "Instructions", {
   enumerable: true,
   get: function get() {
@@ -314,6 +320,8 @@ var _DownloadLinks = _interopRequireDefault(require("./components/DownloadLinks/
 
 var _FaqWrapper = _interopRequireDefault(require("./components/FaqWrapper/FaqWrapper"));
 
+var _helpers = _interopRequireDefault(require("./components/CardsBox/helpers"));
+
 var _Instructions = _interopRequireDefault(require("./components/Instructions/Instructions"));
 
 var _NotificationBox = _interopRequireDefault(require("./components/NotificationBox/NotificationBox"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-shared",
-  "version": "4.21.2",
+  "version": "5.0.1",
   "files": [
     "dist"
   ],
@@ -90,5 +90,5 @@
     "prop-types": "^15.7.2",
     "swiper": "^6.5.6"
   },
-  "gitHead": "61659ea89aca6bac2ebcd3befa866f430ad0ee30"
+  "gitHead": "c69a92daeb0568c343f3ca3b0dc4b2ca6de338d7"
 }