@megafon/ui-core 5.3.0 → 5.4.1

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.4.1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.4.0...@megafon/ui-core@5.4.1) (2023-11-27)
+
+
+### Bug Fixes
+
+* **search:** change index to correct one on mouse down to item in dropdown ([363e1bc](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/363e1bc43f884fecec1057e74f071ab1e9904e24))
+
+
+
+
+
+# [5.4.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.3.0...@megafon/ui-core@5.4.0) (2023-11-22)
+
+
+### Bug Fixes
+
+* **snackbar:** fix swipe ([ce8b5eb](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/ce8b5ebd8bae725befab8adc08dbaa879f430bd4))
+* **snackbar:** fix transform ([286e976](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/286e976a6bf395de41392efcd3cbf66ecc949a1a))
+* **snackbar:** refactoring ([6f49ad1](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/6f49ad130d8ce2e810660ae0bbb7a270269d29e0))
+* **snackbar:** refactoring ([b58f943](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/b58f943f364995da610374140287b64a229b7aed))
+* **tabs:** fix text color in not active tab ([d0bd99b](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/d0bd99b710ce97813df671eeeb4edf6f8ae5be44))
+
+
+### Features
+
+* **pricebadge:** add new iconType profile ([0259dd8](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/commit/0259dd8c3989e4041bb0a4d9100e0a76352c1377))
+
+
+
+
+
 # [5.3.0](https://hq-gitlab.megafon.ru/site-portal/services/megafon-ui/compare/@megafon/ui-core@5.2.3...@megafon/ui-core@5.3.0) (2023-11-08)
 
 

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.d.ts

@@ -12,6 +12,7 @@ export declare const PriceBadgeIcon: {
     readonly CHECK: "check";
     readonly ATTENTION: "attention";
     readonly INFO: "info";
+    readonly PROFILE: "profile";
 };
 export declare const PriseBadgeSize: {
     readonly SMALL: "small";

package/dist/es/components/Badges/components/PriceBadge/PriceBadge.js

@@ -5,6 +5,22 @@ import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import "./PriceBadge.css";
 
+var ProfileIcon = function ProfileIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
+  }));
+};
+
+var ProfileIconBig = function ProfileIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M23 28l2-7.43-.32-.31A12.67 12.67 0 0016 17a12.68 12.68 0 00-8.68 3.27l-.32.3L9 28h14zM10 9a6 6 0 1012 0 6 6 0 00-12 0z"
+  }));
+};
+
 var AttentionIcon = function AttentionIcon(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     viewBox: "0 0 20 20"
@@ -108,7 +124,8 @@ export var PriceBadgeIcon = {
   PRICE: 'price',
   CHECK: 'check',
   ATTENTION: 'attention',
-  INFO: 'info'
+  INFO: 'info',
+  PROFILE: 'profile'
 };
 export var PriseBadgeSize = {
   SMALL: 'small',
@@ -134,6 +151,9 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
     case iconType === PriceBadgeIcon.INFO && isBigIcon:
       return InfoIconBig;
 
+    case iconType === PriceBadgeIcon.PROFILE && isBigIcon:
+      return ProfileIconBig;
+
     case iconType === PriceBadgeIcon.PRICE:
       return PriceIcon;
 
@@ -146,6 +166,9 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
     case iconType === PriceBadgeIcon.INFO:
       return InfoIcon;
 
+    case iconType === PriceBadgeIcon.PROFILE:
+      return ProfileIcon;
+
     default:
       return TimerIcon;
   }

package/dist/es/components/Search/Search.js

@@ -9,10 +9,10 @@ import "core-js/modules/es.array.map.js";
 import "core-js/modules/es.object.values.js";
 import React from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
+import Preloader from "../Preloader/Preloader";
 import debounce from 'lodash.debounce';
 import * as PropTypes from 'prop-types';
 import "./Search.css";
-import Preloader from "../Preloader/Preloader";
 
 var SearchIcon16 = function SearchIcon16(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
@@ -131,11 +131,11 @@ var Search = function Search(_ref) {
     var chosenValue = items[index].value;
     onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenValue);
   }, [disabled, items, onSubmit]);
-  var handleSelectSubmit = React.useCallback(function () {
+  var handleSelectSubmit = React.useCallback(function (index) {
     return function () {
-      handleItemSubmit(activeIndex);
+      handleItemSubmit(index);
     };
-  }, [handleItemSubmit, activeIndex]);
+  }, [handleItemSubmit]);
   var handleFocus = React.useCallback(function (e) {
     setFocus(true);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);

package/dist/es/components/Snackbar/Snackbar.js

@@ -6,7 +6,7 @@ var _DEFAULT_SNACKBARS;
 
 import "core-js/modules/web.timers.js";
 import "core-js/modules/es.object.values.js";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { cnCreate, filterDataAttrs } from '@megafon/ui-helpers';
 import * as PropTypes from 'prop-types';
 import Button from "../Button/Button";
@@ -128,7 +128,10 @@ var Snackbar = function Snackbar(_ref) {
       isOpened = _useState2[0],
       setIsOpened = _useState2[1];
 
-  var containerRef = useRef(null);
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      containerRef = _useState4[0],
+      setContainerRef = _useState4[1];
 
   var _useSwipe = useSwipe(containerRef),
       transform = _useSwipe.transform,
@@ -142,6 +145,11 @@ var Snackbar = function Snackbar(_ref) {
   var isHiddenIcon = isTimerType || !hasIcon && isInfoType;
   var isCustomIcon = isInfoType && icon;
   var currentButtonText = buttonText && !isTimerType ? buttonText : defaultSnackbar.buttonText;
+
+  var setRef = function setRef(instance) {
+    return setContainerRef(instance);
+  };
+
   var handleClose = useCallback(function () {
     setIsOpened(false);
   }, []);
@@ -191,10 +199,10 @@ var Snackbar = function Snackbar(_ref) {
     className: cn({
       move: isTransitionMoveStep
     }, [className, classes.root]),
-    ref: containerRef,
-    style: {
+    ref: setRef,
+    style: transform !== 'none' ? {
       transform: transform
-    }
+    } : undefined
   }, filterDataAttrs(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/React.createElement(Tile, {
     className: cn('tile', {
       type: type,

package/dist/es/components/Tabs/Tabs.css

@@ -146,24 +146,30 @@
           box-sizing: border-box;
   height: 36px;
   padding: 2px 12px;
-  color: var(--spbSky3);
+  color: var(--content);
   white-space: nowrap;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   -webkit-transition: color 0.3s, fill 0.3s;
   transition: color 0.3s, fill 0.3s;
-  fill: var(--spbSky3);
+  fill: var(--content);
 }
 .mfui-tabs__tab-inner:hover {
   text-decoration: none;
 }
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current) {
+  opacity: 0.8;
+}
 @media screen and (min-width: 1024px) {
   .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
     color: var(--content);
     fill: var(--content);
   }
 }
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
+  opacity: 1;
+}
 .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):active {
   color: var(--buttonDown);
   fill: var(--buttonDown);
@@ -255,11 +261,13 @@
   background-color: var(--stcBlack20);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current) {
-  color: #ffffffb2;
-  fill: #ffffffb2;
+  color: var(--stcWhite);
+  opacity: 0.8;
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover {
   color: var(--stcWhite);
+  opacity: 1;
   fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export declare enum TransitionSteps {
     INITIAL_STEP = "initial-step",
     MOVE_STEP = "move-step",
@@ -10,5 +9,5 @@ declare type UseSwipeReturnType = {
     /** Текущий этап смахивания элемента */
     transitionStep: TransitionSteps;
 };
-declare function useSwipe(element: React.MutableRefObject<null>): UseSwipeReturnType;
+declare function useSwipe(element: HTMLElement | null): UseSwipeReturnType;
 export default useSwipe;

package/dist/es/hooks/useSwipe.js

@@ -1,4 +1,9 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.regexp.exec.js";
+import "core-js/modules/es.string.match.js";
+import "core-js/modules/es.string.split.js";
+import "core-js/modules/es.number.is-nan.js";
+import "core-js/modules/es.number.constructor.js";
 import * as React from 'react';
 import useResolution from "./useResolution";
 export var TransitionSteps;
@@ -31,14 +36,17 @@ function useSwipe(element) {
       setTransform = _React$useState6[1];
 
   var animationFrameId = React.useRef(0);
-  var currentElement = element.current;
+  var currentElement = element;
   var isTransitionMoveStep = transitionStep === TransitionSteps.MOVE_STEP;
+  var currentTransform = currentElement ? getComputedStyle(currentElement).transform : '';
   var handleWindowTouchMove = React.useCallback(function (e) {
     if (animationFrameId) {
       window.cancelAnimationFrame(animationFrameId.current);
     }
 
     animationFrameId.current = window.requestAnimationFrame(function () {
+      var _a;
+
       setTransitionStep(TransitionSteps.MOVE_STEP);
 
       if (!currentElement) {
@@ -51,10 +59,12 @@ function useSwipe(element) {
       }
 
       var positionsDiff = initialTouchPosition - e.touches[0].clientX;
-      positionsDiff !== 0 && setTransform("translateX(".concat(-positionsDiff, "px)"));
+      var values = !!currentTransform && currentTransform !== 'none' ? (_a = currentTransform.match(/\(((?:[0-9][,\s]*)+)\)/)) === null || _a === void 0 ? void 0 : _a[0].split(', ') : undefined;
+      var currentTranslateX = !values || Number.isNaN(Number(values === null || values === void 0 ? void 0 : values[4])) ? 0 : Number(values === null || values === void 0 ? void 0 : values[4]);
+      positionsDiff !== 0 && setTransform("translateX(".concat(currentTranslateX - positionsDiff, "px)"));
       animationFrameId.current = 0;
     });
-  }, [currentElement, animationFrameId, initialTouchPosition]);
+  }, [currentElement, animationFrameId, initialTouchPosition, currentTransform]);
   var handleWindowTouchEnd = React.useCallback(function (e) {
     var _a;
 
@@ -93,16 +103,23 @@ function useSwipe(element) {
     }
   }, [currentElement, isTransitionMoveStep, initialTouchPosition, animationFrameId]);
   React.useEffect(function () {
-    if (isMobile) {
-      window.addEventListener('touchmove', handleWindowTouchMove);
-      window.addEventListener('touchend', handleWindowTouchEnd);
+    if (!isMobile || !currentElement) {
+      return;
     }
 
+    currentElement.addEventListener('touchmove', handleWindowTouchMove);
+    currentElement.addEventListener('touchend', handleWindowTouchEnd);
+    /* eslint-disable-next-line consistent-return */
+
     return function () {
-      window.removeEventListener('touchmove', handleWindowTouchMove);
-      window.removeEventListener('touchend', handleWindowTouchEnd);
+      if (!currentElement) {
+        return;
+      }
+
+      currentElement.removeEventListener('touchmove', handleWindowTouchMove);
+      currentElement.removeEventListener('touchend', handleWindowTouchEnd);
     };
-  }, [isMobile, handleWindowTouchMove, handleWindowTouchEnd]);
+  }, [isMobile, handleWindowTouchMove, handleWindowTouchEnd, currentElement]);
   return {
     transform: transform,
     transitionStep: transitionStep

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.d.ts

@@ -12,6 +12,7 @@ export declare const PriceBadgeIcon: {
     readonly CHECK: "check";
     readonly ATTENTION: "attention";
     readonly INFO: "info";
+    readonly PROFILE: "profile";
 };
 export declare const PriseBadgeSize: {
     readonly SMALL: "small";

package/dist/lib/components/Badges/components/PriceBadge/PriceBadge.js

@@ -23,6 +23,22 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+var ProfileIcon = function ProfileIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M5.22 18h9.55L16 13.47A8.28 8.28 0 0010 11a8.302 8.302 0 00-6 2.5L5.22 18zM14 6a4 4 0 10-8 0 4 4 0 008 0z"
+  }));
+};
+
+var ProfileIconBig = function ProfileIconBig(props) {
+  return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M23 28l2-7.43-.32-.31A12.67 12.67 0 0016 17a12.68 12.68 0 00-8.68 3.27l-.32.3L9 28h14zM10 9a6 6 0 1012 0 6 6 0 00-12 0z"
+  }));
+};
+
 var AttentionIcon = function AttentionIcon(props) {
   return /*#__PURE__*/React.createElement("svg", (0, _extends2["default"])({
     viewBox: "0 0 20 20"
@@ -127,7 +143,8 @@ var PriceBadgeIcon = {
   PRICE: 'price',
   CHECK: 'check',
   ATTENTION: 'attention',
-  INFO: 'info'
+  INFO: 'info',
+  PROFILE: 'profile'
 };
 exports.PriceBadgeIcon = PriceBadgeIcon;
 var PriseBadgeSize = {
@@ -155,6 +172,9 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
     case iconType === PriceBadgeIcon.INFO && isBigIcon:
       return InfoIconBig;
 
+    case iconType === PriceBadgeIcon.PROFILE && isBigIcon:
+      return ProfileIconBig;
+
     case iconType === PriceBadgeIcon.PRICE:
       return PriceIcon;
 
@@ -167,6 +187,9 @@ var getPriceBadgeIcon = function getPriceBadgeIcon(iconType, size) {
     case iconType === PriceBadgeIcon.INFO:
       return InfoIcon;
 
+    case iconType === PriceBadgeIcon.PROFILE:
+      return ProfileIcon;
+
     default:
       return TimerIcon;
   }

package/dist/lib/components/Search/Search.js

@@ -29,12 +29,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _uiHelpers = require("@megafon/ui-helpers");
 
+var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
+
 var _lodash = _interopRequireDefault(require("lodash.debounce"));
 
 var PropTypes = _interopRequireWildcard(require("prop-types"));
 
-var _Preloader = _interopRequireDefault(require("../Preloader/Preloader"));
-
 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); }
 
 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; }
@@ -168,11 +168,11 @@ var Search = function Search(_ref) {
     onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(chosenValue);
   }, [disabled, items, onSubmit]);
 
-  var handleSelectSubmit = _react["default"].useCallback(function () {
+  var handleSelectSubmit = _react["default"].useCallback(function (index) {
     return function () {
-      handleItemSubmit(activeIndex);
+      handleItemSubmit(index);
     };
-  }, [handleItemSubmit, activeIndex]);
+  }, [handleItemSubmit]);
 
   var handleFocus = _react["default"].useCallback(function (e) {
     setFocus(true);

package/dist/lib/components/Snackbar/Snackbar.js

@@ -155,7 +155,10 @@ var Snackbar = function Snackbar(_ref) {
       isOpened = _useState2[0],
       setIsOpened = _useState2[1];
 
-  var containerRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+      containerRef = _useState4[0],
+      setContainerRef = _useState4[1];
 
   var _useSwipe = (0, _useSwipe2["default"])(containerRef),
       transform = _useSwipe.transform,
@@ -169,6 +172,11 @@ var Snackbar = function Snackbar(_ref) {
   var isHiddenIcon = isTimerType || !hasIcon && isInfoType;
   var isCustomIcon = isInfoType && icon;
   var currentButtonText = buttonText && !isTimerType ? buttonText : defaultSnackbar.buttonText;
+
+  var setRef = function setRef(instance) {
+    return setContainerRef(instance);
+  };
+
   var handleClose = (0, _react.useCallback)(function () {
     setIsOpened(false);
   }, []);
@@ -218,10 +226,10 @@ var Snackbar = function Snackbar(_ref) {
     className: cn({
       move: isTransitionMoveStep
     }, [className, classes.root]),
-    ref: containerRef,
-    style: {
+    ref: setRef,
+    style: transform !== 'none' ? {
       transform: transform
-    }
+    } : undefined
   }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
     className: cn('tile', {
       type: type,

package/dist/lib/components/Tabs/Tabs.css

@@ -146,24 +146,30 @@
           box-sizing: border-box;
   height: 36px;
   padding: 2px 12px;
-  color: var(--spbSky3);
+  color: var(--content);
   white-space: nowrap;
   text-align: center;
   text-decoration: none;
   cursor: pointer;
   -webkit-transition: color 0.3s, fill 0.3s;
   transition: color 0.3s, fill 0.3s;
-  fill: var(--spbSky3);
+  fill: var(--content);
 }
 .mfui-tabs__tab-inner:hover {
   text-decoration: none;
 }
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current) {
+  opacity: 0.8;
+}
 @media screen and (min-width: 1024px) {
   .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
     color: var(--content);
     fill: var(--content);
   }
 }
+.mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):hover {
+  opacity: 1;
+}
 .mfui-tabs__tab-inner:not(.mfui-tabs__tab-inner_current):active {
   color: var(--buttonDown);
   fill: var(--buttonDown);
@@ -255,11 +261,13 @@
   background-color: var(--stcBlack20);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current) {
-  color: #ffffffb2;
-  fill: #ffffffb2;
+  color: var(--stcWhite);
+  opacity: 0.8;
+  fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner:not(.mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current):hover {
   color: var(--stcWhite);
+  opacity: 1;
   fill: var(--stcWhite);
 }
 .mfui-tabs_tab-color_green:not(.mfui-tabs_sticky) .mfui-tabs__tab-inner_current {

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 export declare enum TransitionSteps {
     INITIAL_STEP = "initial-step",
     MOVE_STEP = "move-step",
@@ -10,5 +9,5 @@ declare type UseSwipeReturnType = {
     /** Текущий этап смахивания элемента */
     transitionStep: TransitionSteps;
 };
-declare function useSwipe(element: React.MutableRefObject<null>): UseSwipeReturnType;
+declare function useSwipe(element: HTMLElement | null): UseSwipeReturnType;
 export default useSwipe;

package/dist/lib/hooks/useSwipe.js

@@ -9,6 +9,16 @@ exports["default"] = exports.TransitionSteps = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.match.js");
+
+require("core-js/modules/es.string.split.js");
+
+require("core-js/modules/es.number.is-nan.js");
+
+require("core-js/modules/es.number.constructor.js");
+
 var React = _interopRequireWildcard(require("react"));
 
 var _useResolution2 = _interopRequireDefault(require("./useResolution"));
@@ -50,14 +60,17 @@ function useSwipe(element) {
       setTransform = _React$useState6[1];
 
   var animationFrameId = React.useRef(0);
-  var currentElement = element.current;
+  var currentElement = element;
   var isTransitionMoveStep = transitionStep === TransitionSteps.MOVE_STEP;
+  var currentTransform = currentElement ? getComputedStyle(currentElement).transform : '';
   var handleWindowTouchMove = React.useCallback(function (e) {
     if (animationFrameId) {
       window.cancelAnimationFrame(animationFrameId.current);
     }
 
     animationFrameId.current = window.requestAnimationFrame(function () {
+      var _a;
+
       setTransitionStep(TransitionSteps.MOVE_STEP);
 
       if (!currentElement) {
@@ -70,10 +83,12 @@ function useSwipe(element) {
       }
 
       var positionsDiff = initialTouchPosition - e.touches[0].clientX;
-      positionsDiff !== 0 && setTransform("translateX(".concat(-positionsDiff, "px)"));
+      var values = !!currentTransform && currentTransform !== 'none' ? (_a = currentTransform.match(/\(((?:[0-9][,\s]*)+)\)/)) === null || _a === void 0 ? void 0 : _a[0].split(', ') : undefined;
+      var currentTranslateX = !values || Number.isNaN(Number(values === null || values === void 0 ? void 0 : values[4])) ? 0 : Number(values === null || values === void 0 ? void 0 : values[4]);
+      positionsDiff !== 0 && setTransform("translateX(".concat(currentTranslateX - positionsDiff, "px)"));
       animationFrameId.current = 0;
     });
-  }, [currentElement, animationFrameId, initialTouchPosition]);
+  }, [currentElement, animationFrameId, initialTouchPosition, currentTransform]);
   var handleWindowTouchEnd = React.useCallback(function (e) {
     var _a;
 
@@ -112,16 +127,23 @@ function useSwipe(element) {
     }
   }, [currentElement, isTransitionMoveStep, initialTouchPosition, animationFrameId]);
   React.useEffect(function () {
-    if (isMobile) {
-      window.addEventListener('touchmove', handleWindowTouchMove);
-      window.addEventListener('touchend', handleWindowTouchEnd);
+    if (!isMobile || !currentElement) {
+      return;
     }
 
+    currentElement.addEventListener('touchmove', handleWindowTouchMove);
+    currentElement.addEventListener('touchend', handleWindowTouchEnd);
+    /* eslint-disable-next-line consistent-return */
+
     return function () {
-      window.removeEventListener('touchmove', handleWindowTouchMove);
-      window.removeEventListener('touchend', handleWindowTouchEnd);
+      if (!currentElement) {
+        return;
+      }
+
+      currentElement.removeEventListener('touchmove', handleWindowTouchMove);
+      currentElement.removeEventListener('touchend', handleWindowTouchEnd);
     };
-  }, [isMobile, handleWindowTouchMove, handleWindowTouchEnd]);
+  }, [isMobile, handleWindowTouchMove, handleWindowTouchEnd, currentElement]);
   return {
     transform: transform,
     transitionStep: transitionStep

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.3.0",
+  "version": "5.4.1",
   "files": [
     "dist",
     "styles"
@@ -50,7 +50,7 @@
     "@babel/preset-env": "^7.8.6",
     "@babel/preset-react": "^7.8.3",
     "@babel/preset-typescript": "^7.8.3",
-    "@megafon/ui-icons": "^2.14.1",
+    "@megafon/ui-icons": "^2.15.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "0a8f8d140ed863cb8bb9f05e4226edcb7925c74d"
+  "gitHead": "d65bc4cd4de9180971e4285c2d0b5beec27d0542"
 }