@megafon/ui-shared 2.0.0-beta.24 → 2.0.0-beta.240

package/dist/lib/components/Card/Card.js

@@ -0,0 +1,199 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.ObjectFit = exports.Target = void 0;
+
+require("core-js/modules/es.object.values");
+
+require("core-js/modules/es.string.link");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var Target = {
+  SELF: '_self',
+  BLANK: '_blank'
+};
+exports.Target = Target;
+var ObjectFit = {
+  FILL: 'fill',
+  CONTAIN: 'contain'
+};
+exports.ObjectFit = ObjectFit;
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-card');
+
+var Card = function Card(_ref) {
+  var dataAttrs = _ref.dataAttrs,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      rootRef = _ref.rootRef,
+      imageSrc = _ref.imageSrc,
+      svgSrc = _ref.svgSrc,
+      title = _ref.title,
+      text = _ref.text,
+      button = _ref.button,
+      link = _ref.link,
+      _ref$isCenteredText = _ref.isCenteredText,
+      isCenteredText = _ref$isCenteredText === void 0 ? false : _ref$isCenteredText,
+      _ref$isLeftHAlign = _ref.isLeftHAlign,
+      isLeftHAlign = _ref$isLeftHAlign === void 0 ? false : _ref$isLeftHAlign,
+      _ref$isFullHeight = _ref.isFullHeight,
+      isFullHeight = _ref$isFullHeight === void 0 ? false : _ref$isFullHeight,
+      href = _ref.href,
+      target = _ref.target,
+      _ref$objectFit = _ref.objectFit,
+      objectFit = _ref$objectFit === void 0 ? 'fill' : _ref$objectFit;
+  var isAlignAvailable = !button || !link;
+  var isCardLink = !!href;
+  var Element = href ? _uiCore.Link : 'div';
+
+  var renderImage = _react["default"].useCallback(function () {
+    switch (true) {
+      case !!imageSrc:
+        {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: cn('pic-wrapper', {
+              'object-fit': objectFit
+            })
+          }, /*#__PURE__*/_react["default"].createElement("img", {
+            className: cn('img'),
+            src: imageSrc
+          }));
+        }
+
+      case !!svgSrc:
+        {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: cn('svg-wrapper')
+          }, svgSrc);
+        }
+
+      default:
+        return null;
+    }
+  }, [imageSrc, svgSrc, objectFit]);
+
+  var renderLink = _react["default"].useCallback(function () {
+    if (!link) {
+      return null;
+    }
+
+    var linkHref = link.href,
+        linkTitle = link.title,
+        linkTarget = link.target,
+        download = link.download;
+
+    if (!linkHref || isCardLink) {
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        className: cn('fake-link')
+      }, linkTitle);
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.TextLink, {
+      className: cn('link', [classes.link]),
+      href: linkHref,
+      target: linkTarget,
+      download: download
+    }, linkTitle);
+  }, [link, isCardLink, classes]);
+
+  var renderBtn = _react["default"].useCallback(function () {
+    if (!button || isCardLink) {
+      return null;
+    }
+
+    var btnHref = button.href,
+        btnTitle = button.title,
+        btnTarget = button.target,
+        buttonDownload = button.download;
+    return /*#__PURE__*/_react["default"].createElement(_uiCore.Button, {
+      className: cn('button', [classes.button]),
+      href: btnHref,
+      target: btnTarget,
+      download: buttonDownload
+    }, btnTitle);
+  }, [button, isCardLink, classes]);
+
+  var renderBtnsWrapper = _react["default"].useCallback(function () {
+    var btnElem = renderBtn();
+    var linkElem = renderLink();
+
+    if (!btnElem && !linkElem) {
+      return null;
+    }
+
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('btns-wrapper', {
+        'left-align': isAlignAvailable && isLeftHAlign
+      })
+    }, btnElem, linkElem);
+  }, [renderBtn, renderLink, isAlignAvailable, isLeftHAlign]);
+
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({}, (0, _uiHelpers.filterDataAttrs)(dataAttrs), {
+    className: cn('', {
+      href: !!href,
+      'full-height': isFullHeight,
+      'centered-text': isCenteredText
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/_react["default"].createElement(Element, {
+    href: href,
+    target: target,
+    className: cn('inner', [classes.inner])
+  }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderImage(), /*#__PURE__*/_react["default"].createElement(_uiCore.Header, {
+    as: "h3",
+    className: cn('title')
+  }, title), !!text && /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn('text')
+  }, text), renderBtnsWrapper())));
+};
+
+Card.propTypes = {
+  dataAttrs: _propTypes["default"].objectOf(_propTypes["default"].string.isRequired),
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].shape({
+    root: _propTypes["default"].string,
+    button: _propTypes["default"].string,
+    link: _propTypes["default"].string,
+    inner: _propTypes["default"].string
+  }),
+  rootRef: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].oneOfType([_propTypes["default"].shape({
+    current: _propTypes["default"].elementType
+  }), _propTypes["default"].any])]),
+  imageSrc: _propTypes["default"].string,
+  svgSrc: _propTypes["default"].node,
+  title: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]).isRequired,
+  text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node, _propTypes["default"].arrayOf(_propTypes["default"].node)]),
+  button: _propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    href: _propTypes["default"].string.isRequired,
+    target: _propTypes["default"].oneOf(Object.values(Target)),
+    download: _propTypes["default"].bool
+  }),
+  link: _propTypes["default"].shape({
+    title: _propTypes["default"].string.isRequired,
+    href: _propTypes["default"].string,
+    target: _propTypes["default"].oneOf(Object.values(Target)),
+    download: _propTypes["default"].bool
+  }),
+  isCenteredText: _propTypes["default"].bool,
+  isLeftHAlign: _propTypes["default"].bool,
+  isFullHeight: _propTypes["default"].bool,
+  href: _propTypes["default"].string,
+  target: _propTypes["default"].oneOf(Object.values(Target)),
+  objectFit: _propTypes["default"].oneOf(Object.values(ObjectFit))
+};
+var _default = Card;
+exports["default"] = _default;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { ICard } from '../Card/Card';
+interface ICardsBoxProps {
+    /** Ссылка на корневой элемент */
+    rootRef?: React.Ref<HTMLDivElement>;
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Обработчик смены слайда (должен быть обернут в useCallback) */
+    onChange?: (currentIndex: number, previousIndex: number, slidesPerView?: number | 'auto') => void;
+    children: Array<React.ReactElement<ICard>> | React.ReactElement<ICard>;
+}
+declare const CardsBox: React.FC<ICardsBoxProps>;
+export default CardsBox;

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

@@ -0,0 +1,105 @@
+"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"] = void 0;
+
+require("core-js/modules/es.array.map");
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _lodash = _interopRequireDefault(require("lodash.throttle"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _throttleTime = _interopRequireDefault(require("../../constants/throttleTime"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 _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-beta-cards-box');
+
+var CardsBox = function CardsBox(_ref) {
+  var rootRef = _ref.rootRef,
+      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"
+    }, React.Children.map(children, function (child) {
+      return /*#__PURE__*/React.createElement(_uiCore.GridColumn, {
+        all: "4",
+        mobile: "12"
+      }, child);
+    }));
+  }, [children]);
+  var renderCarousel = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(_uiCore.Carousel, {
+      slidesSettings: SlidesSettings,
+      onChange: onChange
+    }, children);
+  }, [children]);
+  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());
+};
+
+CardsBox.propTypes = {
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.element.isRequired), PropTypes.element]).isRequired,
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  onChange: PropTypes.func
+};
+var _default = CardsBox;
+exports["default"] = _default;

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

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+declare type CarouselPropsTypes = React.ComponentProps<typeof Carousel>;
+declare const CarouselBox: React.FC<CarouselPropsTypes>;
+export default CarouselBox;

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

@@ -0,0 +1,49 @@
+"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"] = void 0;
+
+require("core-js/modules/es.symbol");
+
+require("core-js/modules/es.array.index-of");
+
+var React = _interopRequireWildcard(require("react"));
+
+var _uiCore = require("@megafon/ui-core");
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var cn = (0, _uiHelpers.cnCreate)('mfui-beta-carousel-box');
+
+var CarouselBox = function CarouselBox(_a) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn()
+  }, /*#__PURE__*/React.createElement(_uiCore.Carousel, props, children));
+};
+
+var _default = CarouselBox;
+exports["default"] = _default;