@megafon/ui-core 5.1.2 → 5.2.0

package/dist/es/hooks/useResolution.js

@@ -0,0 +1,40 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from 'react';
+var RESOLUTIONS;
+
+(function (RESOLUTIONS) {
+  RESOLUTIONS[RESOLUTIONS["MOBILE_END"] = 767] = "MOBILE_END";
+})(RESOLUTIONS || (RESOLUTIONS = {}));
+
+var _RESOLUTIONS = RESOLUTIONS,
+    MOBILE_END = _RESOLUTIONS.MOBILE_END;
+var MEDIA_QUERIES = {
+  MAX_WIDTH_MOBILE_END: "(max-width: ".concat(MOBILE_END, "px)")
+};
+var MAX_WIDTH_MOBILE_END = MEDIA_QUERIES.MAX_WIDTH_MOBILE_END;
+
+function useResolution() {
+  var _React$useState = React.useState(window.innerWidth <= MOBILE_END),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      isMobile = _React$useState2[0],
+      setIsMobile = _React$useState2[1];
+
+  var handleMediaChange = function handleMediaChange(updateStateFn) {
+    return function (e) {
+      return updateStateFn(e.matches);
+    };
+  };
+
+  var handleMaxWidthMobileEnd = handleMediaChange(setIsMobile);
+  React.useEffect(function () {
+    window.matchMedia(MAX_WIDTH_MOBILE_END).addEventListener('change', handleMaxWidthMobileEnd);
+    return function () {
+      window.matchMedia(MAX_WIDTH_MOBILE_END).removeEventListener('change', handleMaxWidthMobileEnd);
+    };
+  }, [handleMaxWidthMobileEnd]);
+  return {
+    isMobile: isMobile
+  };
+}
+
+export default useResolution;

package/dist/es/hooks/useSwipe.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export declare enum TransitionSteps {
+    INITIAL_STEP = "initial-step",
+    MOVE_STEP = "move-step",
+    MOVE_END_STEP = "move-end-step"
+}
+declare type UseSwipeReturnType = {
+    /** Значение для css-свойства transform управляемого элемента */
+    transform: string;
+    /** Текущий этап смахивания элемента */
+    transitionStep: TransitionSteps;
+};
+declare function useSwipe(element: React.MutableRefObject<null>): UseSwipeReturnType;
+export default useSwipe;

package/dist/es/hooks/useSwipe.js

@@ -0,0 +1,112 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import * as React from 'react';
+import useResolution from "./useResolution";
+export var TransitionSteps;
+
+(function (TransitionSteps) {
+  TransitionSteps["INITIAL_STEP"] = "initial-step";
+  TransitionSteps["MOVE_STEP"] = "move-step";
+  TransitionSteps["MOVE_END_STEP"] = "move-end-step";
+})(TransitionSteps || (TransitionSteps = {})); // Смахивание элемента влево или вправо на мобильном устройстве.
+// Элемент закрывается на событии 'touchend', если он был смещен пользователем больше, чем на половину ширины окна.
+
+
+function useSwipe(element) {
+  var _useResolution = useResolution(),
+      isMobile = _useResolution.isMobile;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      initialTouchPosition = _React$useState2[0],
+      setInitialTouchPosition = _React$useState2[1];
+
+  var _React$useState3 = React.useState(TransitionSteps.INITIAL_STEP),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      transitionStep = _React$useState4[0],
+      setTransitionStep = _React$useState4[1];
+
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      transform = _React$useState6[0],
+      setTransform = _React$useState6[1];
+
+  var animationFrameId = React.useRef(0);
+  var currentElement = element.current;
+  var isTransitionMoveStep = transitionStep === TransitionSteps.MOVE_STEP;
+  var handleWindowTouchMove = React.useCallback(function (e) {
+    if (animationFrameId) {
+      window.cancelAnimationFrame(animationFrameId.current);
+    }
+
+    animationFrameId.current = window.requestAnimationFrame(function () {
+      setTransitionStep(TransitionSteps.MOVE_STEP);
+
+      if (!currentElement) {
+        return;
+      }
+
+      if (!initialTouchPosition) {
+        setInitialTouchPosition(e.touches[0].clientX);
+        return;
+      }
+
+      var positionsDiff = initialTouchPosition - e.touches[0].clientX;
+      positionsDiff !== 0 && setTransform("translateX(".concat(-positionsDiff, "px)"));
+      animationFrameId.current = 0;
+    });
+  }, [currentElement, animationFrameId, initialTouchPosition]);
+  var handleWindowTouchEnd = React.useCallback(function (e) {
+    var _a;
+
+    if (!currentElement || !isTransitionMoveStep || !initialTouchPosition) {
+      return;
+    }
+
+    window.cancelAnimationFrame(animationFrameId.current);
+    var windowCenterPosition = window.innerWidth / 2;
+    var touchPosition = (_a = e.changedTouches[0]) === null || _a === void 0 ? void 0 : _a.clientX;
+    var isRightSwipe = touchPosition > initialTouchPosition;
+    var isLeftSwipe = touchPosition < initialTouchPosition;
+    var isMoreHalfSwiped = Math.abs(initialTouchPosition - touchPosition) > windowCenterPosition;
+    setInitialTouchPosition(null);
+
+    switch (true) {
+      case isMoreHalfSwiped && isRightSwipe:
+        {
+          setTransform('translateX(110%)');
+          setTransitionStep(TransitionSteps.MOVE_END_STEP);
+          break;
+        }
+
+      case isMoreHalfSwiped && isLeftSwipe:
+        {
+          setTransform('translateX(-110%)');
+          setTransitionStep(TransitionSteps.MOVE_END_STEP);
+          break;
+        }
+
+      default:
+        {
+          setTransform('none');
+          setTransitionStep(TransitionSteps.INITIAL_STEP);
+        }
+    }
+  }, [currentElement, isTransitionMoveStep, initialTouchPosition, animationFrameId]);
+  React.useEffect(function () {
+    if (isMobile) {
+      window.addEventListener('touchmove', handleWindowTouchMove);
+      window.addEventListener('touchend', handleWindowTouchEnd);
+    }
+
+    return function () {
+      window.removeEventListener('touchmove', handleWindowTouchMove);
+      window.removeEventListener('touchend', handleWindowTouchEnd);
+    };
+  }, [isMobile, handleWindowTouchMove, handleWindowTouchEnd]);
+  return {
+    transform: transform,
+    transitionStep: transitionStep
+  };
+}
+
+export default useSwipe;

package/dist/es/index.d.ts

@@ -36,6 +36,8 @@ export { default as RadioButton } from './components/RadioButton/RadioButton';
 export { default as Search } from './components/Search/Search';
 export { default as Select } from './components/Select/Select';
 export { default as selectReducer } from './components/Select/reducer/selectReducer';
+export { default as Snackbar } from './components/Snackbar/Snackbar';
+export { default as SnackbarTimer } from './components/Snackbar/SnackbarTimer/SnackbarTimer';
 export { default as Switcher } from './components/Switcher/Switcher';
 export { default as Tab } from './components/Tabs/Tab';
 export { default as Tabs } from './components/Tabs/Tabs';

package/dist/es/index.js

@@ -36,6 +36,8 @@ export { default as RadioButton } from "./components/RadioButton/RadioButton";
 export { default as Search } from "./components/Search/Search";
 export { default as Select } from "./components/Select/Select";
 export { default as selectReducer } from "./components/Select/reducer/selectReducer";
+export { default as Snackbar } from "./components/Snackbar/Snackbar";
+export { default as SnackbarTimer } from "./components/Snackbar/SnackbarTimer/SnackbarTimer";
 export { default as Switcher } from "./components/Switcher/Switcher";
 export { default as Tab } from "./components/Tabs/Tab";
 export { default as Tabs } from "./components/Tabs/Tabs";

package/dist/lib/components/Snackbar/Snackbar.css

@@ -0,0 +1,217 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+.mfui-snackbar {
+  z-index: 1;
+  width: 480px;
+  -webkit-transition: -webkit-transform 300ms;
+  transition: -webkit-transform 300ms;
+  transition: transform 300ms;
+  transition: transform 300ms, -webkit-transform 300ms;
+}
+@-webkit-keyframes snackbar-show {
+  from {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+}
+@keyframes snackbar-show {
+  from {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  to {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+}
+@-webkit-keyframes snackbar-hide {
+  0% {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+  99% {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  100% {
+    display: none;
+  }
+}
+@keyframes snackbar-hide {
+  0% {
+    -webkit-transform: scale(100%);
+            transform: scale(100%);
+    opacity: 1;
+  }
+  99% {
+    -webkit-transform: scale(90%);
+            transform: scale(90%);
+    opacity: 0;
+  }
+  100% {
+    display: none;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar {
+    width: 304px;
+  }
+}
+.mfui-snackbar_move {
+  -webkit-transition: none;
+  transition: none;
+}
+.mfui-snackbar__tile {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  min-height: 64px;
+  padding: 12px 16px 12px 12px;
+  background-color: var(--content);
+  opacity: 0;
+  -webkit-animation: 200ms linear 200ms 1 forwards snackbar-show;
+          animation: 200ms linear 200ms 1 forwards snackbar-show;
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__tile {
+    min-height: 48px;
+  }
+}
+.mfui-snackbar__tile_closed {
+  -webkit-animation: 100ms linear 1 snackbar-hide;
+          animation: 100ms linear 1 snackbar-hide;
+}
+.mfui-snackbar__tile_type_success .mfui-snackbar__icon-container svg {
+  fill: var(--brandGreen);
+}
+.mfui-snackbar__tile_type_attention .mfui-snackbar__icon-container svg {
+  fill: var(--fury80);
+}
+.mfui-snackbar__icon-container {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  width: 32px;
+  min-width: 32px;
+  height: 32px;
+  margin-right: 8px;
+}
+.mfui-snackbar__icon-container svg {
+  fill: var(--base);
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__icon-container {
+    width: 20px;
+    min-width: 20px;
+    height: 20px;
+  }
+}
+.mfui-snackbar__icon-container_desktop {
+  display: none;
+}
+@media screen and (min-width: 768px) {
+  .mfui-snackbar__icon-container_desktop {
+    display: block;
+  }
+}
+.mfui-snackbar__icon-container_mobile {
+  display: none;
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__icon-container_mobile {
+    display: block;
+  }
+}
+.mfui-snackbar__text {
+  display: none;
+  -webkit-box-flex: 1;
+      -ms-flex-positive: 1;
+          flex-grow: 1;
+  overflow: hidden;
+}
+@media screen and (min-width: 768px) {
+  .mfui-snackbar__text_desktop {
+    display: block;
+    max-height: 48px;
+  }
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__text_mobile {
+    display: block;
+    max-height: 36px;
+  }
+}
+.mfui-snackbar__text_short {
+  max-width: 272px;
+}
+.mfui-snackbar__text-button {
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
+  margin-left: 12px;
+}
+.mfui-snackbar__close-button {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  margin-left: 24px;
+  padding: 0;
+  border: none;
+  border-radius: 40px;
+  background-color: transparent;
+  cursor: pointer;
+}
+@media screen and (max-width: 767px) {
+  .mfui-snackbar__close-button {
+    display: none;
+  }
+}
+.mfui-snackbar__close-button:hover {
+  background-color: #99999933;
+}
+.mfui-snackbar__close-button:active {
+  background-color: #99999966;
+}
+.mfui-snackbar__close-button-icon {
+  width: 40px;
+  min-width: 40px;
+  height: 40px;
+  fill: var(--spbSky3);
+}

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import './Snackbar.less';
+export declare const SnackbarTypes: {
+    readonly ATTENTION: "attention";
+    readonly SUCCESS: "success";
+    readonly TIMER: "timer";
+    readonly INFO: "info";
+};
+export declare type SnackbarType = typeof SnackbarTypes[keyof typeof SnackbarTypes];
+export interface ISnackbarProps {
+    /** Текст */
+    text: string;
+    /** Тип отображения */
+    type?: SnackbarType;
+    /** Кастомная иконка для типа 'info' */
+    icon?: JSX.Element;
+    /** Отображение иконки. Скрыть иконку можно только для типа 'info' */
+    hasIcon?: boolean;
+    /** Кастомный текст кнопки. Не работает для типа 'timer' */
+    buttonText?: string;
+    /** Максимальное значение таймера */
+    maxTimerValue?: number;
+    /** Отображение текстовой кнопки */
+    hasTextButton?: boolean;
+    /** Отключение анимации закрытия */
+    disableCloseAnimation?: boolean;
+    /** Дополнительный класс корневого элемента */
+    className?: string;
+    /** Дополнительные классы для корневого и внутренних элементов */
+    classes?: {
+        root?: string;
+        container?: string;
+        icon?: string;
+        text?: string;
+    };
+    /** Дополнительные data атрибуты к внутренним элементам */
+    dataAttrs?: {
+        root?: Record<string, string>;
+        text?: Record<string, string>;
+        closeButton?: Record<string, string>;
+        textButton?: Record<string, string>;
+    };
+    /** Обработчик клика по кнопке */
+    onButtonClick?: () => void;
+    /** Обработчик на закрытие */
+    onClose?: () => void;
+}
+declare const Snackbar: React.FC<ISnackbarProps>;
+export default Snackbar;