@prom-ui/core 0.0.17 → 0.0.20

package/SideOverlay/index.js

@@ -0,0 +1,254 @@
+'use strict';
+
+require('./style.css');
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var ttag = require('ttag');
+var PropTypes = require('prop-types');
+var ScrollLock = require('react-scrolllock');
+var Portal = require('@prom-ui/core/Portal');
+var KeyPress = require('@prom-ui/core/KeyPress');
+var evokit = require('evokit');
+var reactTransitionGroup = require('react-transition-group');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var ScrollLock__default = /*#__PURE__*/_interopDefaultLegacy(ScrollLock);
+
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(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;
+}
+
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+
+var css = {"root":"SideOverlay__root___zoSc7","backdrop":"SideOverlay__backdrop___v5Neh","popup":"SideOverlay__popup___LsB4w","content":"SideOverlay__content___D9ezA","close":"SideOverlay__close___aiN5k","popup_placement_top":"SideOverlay__popup_placement_top___BSFf7","popup_placement_bottom":"SideOverlay__popup_placement_bottom___k1gGY","popup_placement_right":"SideOverlay__popup_placement_right___w9HUr","popup_placement_left":"SideOverlay__popup_placement_left___DWBxa","enter":"SideOverlay__enter___ukL-B","exit":"SideOverlay__exit___QE5yq","enterActive":"SideOverlay__enterActive___VPRAq","exitActive":"SideOverlay__exitActive___FhiSX"};
+
+var BLOCKS_PRESET = {
+  css: css,
+  b: ''
+};
+var Root = evokit.createBlock('div', 'root', [], BLOCKS_PRESET);
+var Backdrop = evokit.createBlock('div', 'backdrop', [], BLOCKS_PRESET);
+var Popup = evokit.createBlock('div', 'popup', ['placement'], BLOCKS_PRESET);
+var Content = evokit.createBlock('div', 'content', [], BLOCKS_PRESET);
+var Close = evokit.createBlock('button', 'close', [], BLOCKS_PRESET);
+var Animate = function (_a) {
+  var _b = _a.open,
+      open = _b === void 0 ? false : _b,
+      children = _a.children,
+      _c = _a.enabled,
+      enabled = _c === void 0 ? true : _c,
+      onEnter = _a.onEnter;
+  return React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
+    in: open,
+    timeout: enabled ? 225 : 0,
+    classNames: css,
+    unmountOnExit: true,
+    onEnter: onEnter
+  }, children);
+};
+
+var getPopupStyle = function (placement, size) {
+  if (['top', 'bottom'].includes(placement)) {
+    return {
+      height: size
+    };
+  }
+
+  return {
+    width: size
+  };
+};
+
+var SideOverlay = function (_a) {
+  var children = _a.children,
+      _b = _a.classNames,
+      classNames = _b === void 0 ? {} : _b,
+      onClose = _a.onClose,
+      onOpen = _a.onOpen,
+      _c = _a.open,
+      open = _c === void 0 ? false : _c,
+      _d = _a.padding,
+      padding = _d === void 0 ? '45px 30px 30px 30px' : _d,
+      _e = _a.placement,
+      placement = _e === void 0 ? 'left' : _e,
+      _f = _a.size,
+      size = _f === void 0 ? 400 : _f,
+      _g = _a.useCloseButton,
+      useCloseButton = _g === void 0 ? true : _g,
+      _h = _a.useEscapeClose,
+      useEscapeClose = _h === void 0 ? true : _h,
+      _j = _a.useOutsideClose,
+      useOutsideClose = _j === void 0 ? true : _j,
+      _k = _a.usePortal,
+      usePortal = _k === void 0 ? true : _k,
+      _l = _a.useScrollLock,
+      useScrollLock = _l === void 0 ? true : _l,
+      _m = _a.useTouchScrollable,
+      useTouchScrollable = _m === void 0 ? true : _m,
+      _o = _a.zIndex,
+      zIndex = _o === void 0 ? 5000 : _o,
+      dataQaId = _a.dataQaId,
+      contentRef = _a.contentRef,
+      _p = _a.animationEnabled,
+      animationEnabled = _p === void 0 ? true : _p,
+      props = __rest(_a, ["children", "classNames", "onClose", "onOpen", "open", "padding", "placement", "size", "useCloseButton", "useEscapeClose", "useOutsideClose", "usePortal", "useScrollLock", "useTouchScrollable", "zIndex", "dataQaId", "contentRef", "animationEnabled"]);
+
+  return React__default["default"].createElement(Animate, {
+    open: open,
+    onEnter: function () {
+      onOpen && onOpen();
+    },
+    enabled: animationEnabled
+  }, React__default["default"].createElement(Portal.Portal, {
+    isActive: usePortal
+  }, React__default["default"].createElement(Root, __assign({
+    role: 'presentation',
+    style: {
+      zIndex: zIndex
+    },
+    className: classNames.Root
+  }, props), React__default["default"].createElement(ScrollLock__default["default"], {
+    isActive: useScrollLock
+  }), React__default["default"].createElement(KeyPress.KeyPress, {
+    isActive: useEscapeClose,
+    code: 'Escape',
+    onKeyDown: onClose
+  }), React__default["default"].createElement(Backdrop, {
+    className: classNames.Backdrop,
+    "aria-hidden": true,
+    onClick: function () {
+      if (useOutsideClose && onClose) {
+        onClose();
+      }
+    }
+  }), React__default["default"].createElement(Popup, {
+    "popup-placement": placement,
+    className: classNames.Popup,
+    style: getPopupStyle(placement, size),
+    "data-qaid": dataQaId
+  }, useCloseButton && onClose && React__default["default"].createElement(Close, {
+    className: classNames.Close,
+    type: 'button',
+    onClick: onClose,
+    "aria-label": ttag.t(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"], ["\u0417\u0430\u043A\u0440\u044B\u0442\u044C"]))),
+    "data-qaid": 'close'
+  }), useTouchScrollable ? React__default["default"].createElement(ScrollLock.TouchScrollable, null, React__default["default"].createElement(Content, {
+    ref: contentRef,
+    className: classNames.Content,
+    style: {
+      padding: padding
+    }
+  }, children)) : React__default["default"].createElement(Content, {
+    ref: contentRef,
+    className: classNames.Content,
+    style: {
+      padding: padding
+    }
+  }, children)))));
+};
+SideOverlay.propTypes = {
+  /** React children */
+  // children: PropTypes.node,
+
+  /** Кастомные классы */
+  // classNames: PropTypes.shape({
+  //     Root: PropTypes.string,
+  //     Backdrop: PropTypes.string,
+  //     Popup: PropTypes.string,
+  //     Content: PropTypes.string,
+  //     Close: PropTypes.string,
+  // }),
+
+  /** Handle для закрытия попапа */
+  onClose: PropTypes__default["default"].func,
+
+  /** Срабатывает когда попап открыт */
+  onOpen: PropTypes__default["default"].func,
+
+  /** Состояние, открыто или нет */
+  open: PropTypes__default["default"].bool,
+
+  /** Внутренние отступы */
+  padding: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /** Расположение */
+  placement: PropTypes__default["default"].oneOf(['top', 'right', 'bottom', 'left']),
+
+  /** Ширина или высота взависимости от placement */
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /** Отображение кнопки закрытия (крестик) */
+  useCloseButton: PropTypes__default["default"].bool,
+
+  /** Разрешает закрыть попап по клавише `Escape` */
+  useEscapeClose: PropTypes__default["default"].bool,
+
+  /** Разрешает закрытие при клике на свободное пространство (затемнение документа) */
+  useOutsideClose: PropTypes__default["default"].bool,
+
+  /** Рендер в конец `<body>` */
+  usePortal: PropTypes__default["default"].bool,
+
+  /** Запрещает прокрутку `<body>` */
+  useScrollLock: PropTypes__default["default"].bool,
+
+  /** Запрещает прокрутку `<body>` для ios */
+  useTouchScrollable: PropTypes__default["default"].bool,
+
+  /** Размещением по z-оси */
+  zIndex: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
+  /** HTML Атрибут `data-qaid` для автотестов */
+  dataQaId: PropTypes__default["default"].string,
+
+  /** `ref` для блока с контентом */
+  // contentRef: PropTypes.shape({ current: PropTypes.any }),
+
+  /** Включает/отключает анимацию открытия/скрытия шторки */
+  animationEnabled: PropTypes__default["default"].bool
+};
+var templateObject_1;
+
+exports.SideOverlay = SideOverlay;

package/SideOverlay/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@prom-ui/core/SideOverlay",
+  "version": "0.0.20",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "*.css"
+  ],
+  "dependencies": {
+    "evokit": "^3.2.3",
+    "react-scrolllock": "^5.0.1",
+    "react-transition-group": "^4.4.2",
+    "ttag": "^1.7.24"
+  }
+}

package/SideOverlay/style.css

@@ -0,0 +1,208 @@
+.SideOverlay__root___zoSc7 {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+.SideOverlay__backdrop___v5Neh {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    z-index: -1;
+    position: fixed;
+    align-items: center;
+    justify-content: center;
+    opacity: .5;
+    background-color: var(--black-400);
+    -webkit-tap-highlight-color: transparent;
+    will-change: opacity;
+}
+
+.SideOverlay__popup___LsB4w {
+    z-index: 1200;
+    position: fixed;
+    background: var(--white);
+    box-sizing: border-box;
+}
+
+.SideOverlay__content___D9ezA {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+}
+
+.SideOverlay__close___aiN5k {
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 30px;
+    line-height: 24px;
+    color: inherit;
+    box-sizing: border-box;
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    background: transparent;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    outline: none;
+    cursor: pointer;
+    border: none;
+    padding: 0;
+    font-weight: normal;
+    width: 24px;
+    height: 24px;
+    margin: 10px
+}
+
+.SideOverlay__close___aiN5k::after {
+        content: "\00D7";
+    }
+
+.SideOverlay__popup_placement_top___BSFf7,
+.SideOverlay__popup_placement_bottom___k1gGY,
+.SideOverlay__popup_placement_right___w9HUr,
+.SideOverlay__popup_placement_left___DWBxa {
+    transform: none;
+    will-change: transform;
+}
+
+.SideOverlay__popup_placement_top___BSFf7,
+.SideOverlay__popup_placement_bottom___k1gGY {
+    right: 0;
+    left: 0;
+    max-height: 90%;
+}
+
+.SideOverlay__popup_placement_right___w9HUr,
+.SideOverlay__popup_placement_left___DWBxa {
+    top: 0;
+    bottom: 0;
+    max-width: 90%;
+}
+
+.SideOverlay__popup_placement_top___BSFf7 {
+    top: 0;
+    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
+}
+
+.SideOverlay__popup_placement_bottom___k1gGY {
+    bottom: 0;
+    box-shadow: 0 -3px 6px 0 rgba(0, 0, 0, 0.1);
+}
+
+.SideOverlay__popup_placement_right___w9HUr {
+    right: 0;
+    box-shadow: -3px 0 6px 0 rgba(0, 0, 0, 0.1);
+}
+
+.SideOverlay__popup_placement_left___DWBxa {
+    left: 0;
+    box-shadow: 3px 0 6px 0 rgba(0, 0, 0, 0.1);
+}
+
+/* animation */
+
+.SideOverlay__enter___ukL-B,
+.SideOverlay__exit___QE5yq {
+    pointer-events: auto;
+}
+
+.SideOverlay__enterActive___VPRAq,
+.SideOverlay__exitActive___FhiSX {
+    pointer-events: none
+}
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__backdrop___v5Neh, .SideOverlay__exitActive___FhiSX .SideOverlay__backdrop___v5Neh {
+        transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_top___BSFf7,
+    .SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_top___BSFf7,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_right___w9HUr,
+    .SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_right___w9HUr,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_bottom___k1gGY,
+    .SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_bottom___k1gGY,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_left___DWBxa,
+    .SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_left___DWBxa {
+        transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__backdrop___v5Neh {
+        opacity: 0;
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__popup_placement_top___BSFf7 {
+        transform: translateY(-100%);
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__popup_placement_right___w9HUr {
+        transform: translateX(100%);
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__popup_placement_bottom___k1gGY {
+        transform: translateY(100%);
+    }
+
+.SideOverlay__enter___ukL-B .SideOverlay__popup_placement_left___DWBxa {
+        transform: translateX(-100%);
+    }
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__backdrop___v5Neh {
+        opacity: .5;
+    }
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_top___BSFf7,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_bottom___k1gGY {
+        transform: translateY(0);
+    }
+
+.SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_left___DWBxa,
+    .SideOverlay__enterActive___VPRAq .SideOverlay__popup_placement_right___w9HUr {
+        transform: translateX(0);
+    }
+
+.SideOverlay__exit___QE5yq .SideOverlay__backdrop___v5Neh {
+        opacity: .5;
+    }
+
+.SideOverlay__exit___QE5yq .SideOverlay__popup_placement_top___BSFf7,
+    .SideOverlay__exit___QE5yq .SideOverlay__popup_placement_bottom___k1gGY {
+        transform: translateY(0);
+    }
+
+.SideOverlay__exit___QE5yq .SideOverlay__popup_placement_left___DWBxa,
+    .SideOverlay__exit___QE5yq .SideOverlay__popup_placement_right___w9HUr {
+        transform: translateX(0);
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__backdrop___v5Neh {
+        opacity: 0;
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_top___BSFf7 {
+        transform: translateY(-100%);
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_right___w9HUr {
+        transform: translateX(100%);
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_bottom___k1gGY {
+        transform: translateY(100%);
+    }
+
+.SideOverlay__exitActive___FhiSX .SideOverlay__popup_placement_left___DWBxa {
+        transform: translateX(-100%);
+    }

package/SideOverlay/utils.d.ts

@@ -0,0 +1,8 @@
+declare type tPlacement = 'top' | 'right' | 'bottom' | 'left';
+declare type tSize = string | number;
+declare type tGetPopupStyle = {
+    height?: tSize;
+    width?: tSize;
+};
+export declare const getPopupStyle: (placement: tPlacement, size: tSize) => tGetPopupStyle;
+export {};

package/SimpleSlider/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import 'intersection-observer';
+export declare type tSimpleSliderProps = {
+    children: React.ReactNode;
+    height: number | string;
+    width: number | string;
+    autoPlay?: number;
+    className?: string;
+    duration?: number;
+    infinite?: boolean;
+    ratio: string;
+    style?: React.CSSProperties;
+    showOnHoverButtons?: boolean;
+    showOnHoverDots?: boolean;
+    onChangeIndex?: (index: number) => void;
+    onClickDot?: (index: number) => void;
+    onClickItem?: (index: number) => void;
+    onClickButtonNext?: (index: number) => void;
+    onClickButtonPrev?: (index: number) => void;
+    onSwipeNext?: (index: number) => void;
+    onSwipePrev?: (index: number) => void;
+};
+export declare const SimpleSlider: React.FC<tSimpleSliderProps>;