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

package/dist/es/components/Card/Card.d.ts

@@ -0,0 +1,67 @@
+import React, { Ref } from 'react';
+import './Card.less';
+export declare const Target: {
+    readonly SELF: "_self";
+    readonly BLANK: "_blank";
+};
+declare type TargetType = typeof Target[keyof typeof Target];
+interface IButton {
+    title: string;
+    href: string;
+    target?: TargetType;
+    download?: boolean;
+}
+interface ILink {
+    title: string;
+    href?: string;
+    target?: TargetType;
+    download?: boolean;
+}
+export declare const ObjectFit: {
+    readonly FILL: "fill";
+    readonly CONTAIN: "contain";
+};
+declare type ObjectFitType = typeof ObjectFit[keyof typeof ObjectFit];
+export interface ICard {
+    /** Дата атрибуты для корневого элемента */
+    dataAttrs?: {
+        [key: string]: string;
+    };
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        button?: string;
+        link?: string;
+        inner?: string;
+    };
+    /** Ссылка на корневой элемент */
+    rootRef?: Ref<HTMLDivElement>;
+    /** Изображение в карточке */
+    imageSrc?: string;
+    /** Иконка в карточке */
+    svgSrc?: React.ReactNode;
+    /** Заголовок карточки */
+    title: string | React.ReactNode[] | React.ReactNode;
+    /** Текст карточки */
+    text?: string | React.ReactNode[] | React.ReactNode;
+    /** Данные для кнопки */
+    button?: IButton;
+    /** Данные для ссылки */
+    link?: ILink;
+    /** Выравнивание текста по центру */
+    isCenteredText?: boolean;
+    /** Расположение кнопки/ссылки по левой стороне */
+    isLeftHAlign?: boolean;
+    /** Высота корневого элемента 100% */
+    isFullHeight?: boolean;
+    /** Ссылка для всей карточки */
+    href?: string;
+    /** Target свойство, аналогично свойству 'target' тега 'a' */
+    target?: TargetType;
+    /** Режим позиционирования изображения */
+    objectFit?: ObjectFitType;
+}
+declare const Card: React.FC<ICard>;
+export default Card;

package/dist/es/components/Card/Card.js

@@ -0,0 +1,176 @@
+import "core-js/modules/es.object.values";
+import "core-js/modules/es.string.link";
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import "./Card.css";
+import { Header, Button, TextLink, Link } from '@megafon/ui-core';
+import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import PropTypes from 'prop-types';
+export var Target = {
+  SELF: '_self',
+  BLANK: '_blank'
+};
+export var ObjectFit = {
+  FILL: 'fill',
+  CONTAIN: 'contain'
+};
+var cn = 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 ? Link : 'div';
+  var renderImage = React.useCallback(function () {
+    switch (true) {
+      case !!imageSrc:
+        {
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('pic-wrapper', {
+              'object-fit': objectFit
+            })
+          }, /*#__PURE__*/React.createElement("img", {
+            className: cn('img'),
+            src: imageSrc
+          }));
+        }
+
+      case !!svgSrc:
+        {
+          return /*#__PURE__*/React.createElement("div", {
+            className: cn('svg-wrapper')
+          }, svgSrc);
+        }
+
+      default:
+        return null;
+    }
+  }, [imageSrc, svgSrc, objectFit]);
+  var renderLink = React.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.createElement("span", {
+        className: cn('fake-link')
+      }, linkTitle);
+    }
+
+    return /*#__PURE__*/React.createElement(TextLink, {
+      className: cn('link', [classes.link]),
+      href: linkHref,
+      target: linkTarget,
+      download: download
+    }, linkTitle);
+  }, [link, isCardLink, classes]);
+  var renderBtn = React.useCallback(function () {
+    if (!button || isCardLink) {
+      return null;
+    }
+
+    var btnHref = button.href,
+        btnTitle = button.title,
+        btnTarget = button.target,
+        buttonDownload = button.download;
+    return /*#__PURE__*/React.createElement(Button, {
+      className: cn('button', [classes.button]),
+      href: btnHref,
+      target: btnTarget,
+      download: buttonDownload
+    }, btnTitle);
+  }, [button, isCardLink, classes]);
+  var renderBtnsWrapper = React.useCallback(function () {
+    var btnElem = renderBtn();
+    var linkElem = renderLink();
+
+    if (!btnElem && !linkElem) {
+      return null;
+    }
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: cn('btns-wrapper', {
+        'left-align': isAlignAvailable && isLeftHAlign
+      })
+    }, btnElem, linkElem);
+  }, [renderBtn, renderLink, isAlignAvailable, isLeftHAlign]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, filterDataAttrs(dataAttrs), {
+    className: cn('', {
+      href: !!href,
+      'full-height': isFullHeight,
+      'centered-text': isCenteredText
+    }, [className, classes.root]),
+    ref: rootRef
+  }), /*#__PURE__*/React.createElement(Element, {
+    href: href,
+    target: target,
+    className: cn('inner', [classes.inner])
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, renderImage(), /*#__PURE__*/React.createElement(Header, {
+    as: "h3",
+    className: cn('title')
+  }, title), !!text && /*#__PURE__*/React.createElement("div", {
+    className: cn('text')
+  }, text), renderBtnsWrapper())));
+};
+
+Card.propTypes = {
+  dataAttrs: PropTypes.objectOf(PropTypes.string.isRequired),
+  className: PropTypes.string,
+  classes: PropTypes.shape({
+    root: PropTypes.string,
+    button: PropTypes.string,
+    link: PropTypes.string,
+    inner: PropTypes.string
+  }),
+  rootRef: PropTypes.oneOfType([PropTypes.func, PropTypes.oneOfType([PropTypes.shape({
+    current: PropTypes.elementType
+  }), PropTypes.any])]),
+  imageSrc: PropTypes.string,
+  svgSrc: PropTypes.node,
+  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
+  text: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  button: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string.isRequired,
+    target: PropTypes.oneOf(Object.values(Target)),
+    download: PropTypes.bool
+  }),
+  link: PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    href: PropTypes.string,
+    target: PropTypes.oneOf(Object.values(Target)),
+    download: PropTypes.bool
+  }),
+  isCenteredText: PropTypes.bool,
+  isLeftHAlign: PropTypes.bool,
+  isFullHeight: PropTypes.bool,
+  href: PropTypes.string,
+  target: PropTypes.oneOf(Object.values(Target)),
+  objectFit: PropTypes.oneOf(Object.values(ObjectFit))
+};
+export default Card;

package/dist/es/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/es/components/CardsBox/CardsBox.js

@@ -0,0 +1,80 @@
+import "core-js/modules/es.array.map";
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+var _SlidesSettings;
+
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import throttle from 'lodash.throttle';
+import { Grid, GridColumn, Carousel } from '@megafon/ui-core';
+import { breakpoints, cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import throttleTime from "../../constants/throttleTime";
+var MAX_CARDS_COUNT_IN_GRID_ON_MOBILE = 2;
+var SlidesSettings = (_SlidesSettings = {}, _defineProperty(_SlidesSettings, breakpoints.MOBILE_SMALL_START, {
+  slidesPerView: 1,
+  spaceBetween: 16
+}), _defineProperty(_SlidesSettings, breakpoints.MOBILE_BIG_START, {
+  slidesPerView: 2,
+  spaceBetween: 20
+}), _SlidesSettings);
+var cn = 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 = _slicedToArray(_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(Grid, {
+      guttersBottom: "medium",
+      guttersLeft: "medium"
+    }, React.Children.map(children, function (child) {
+      return /*#__PURE__*/React.createElement(GridColumn, {
+        all: "4",
+        mobile: "12"
+      }, child);
+    }));
+  }, [children]);
+  var renderCarousel = React.useCallback(function () {
+    return /*#__PURE__*/React.createElement(Carousel, {
+      slidesSettings: SlidesSettings,
+      onChange: onChange
+    }, children);
+  }, [children]);
+  React.useEffect(function () {
+    var resizeHandler = function resizeHandler() {
+      return window.innerWidth <= breakpoints.MOBILE_BIG_END ? setIsMobile(true) : setIsMobile(false);
+    };
+
+    var resizeHandlerThrottled = throttle(resizeHandler, throttleTime.resize);
+    resizeHandler();
+    window.addEventListener('resize', resizeHandlerThrottled);
+    return function () {
+      window.removeEventListener('resize', resizeHandlerThrottled);
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: cn(),
+    ref: rootRef
+  }, 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
+};
+export default CardsBox;

package/dist/es/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/es/components/CarouselBox/CarouselBox.js

@@ -0,0 +1,31 @@
+import "core-js/modules/es.symbol";
+import "core-js/modules/es.array.index-of";
+
+var __rest = this && this.__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;
+};
+
+import * as React from 'react';
+import { Carousel } from '@megafon/ui-core';
+import { cnCreate } from '@megafon/ui-helpers';
+var cn = 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(Carousel, props, children));
+};
+
+export default CarouselBox;