@megafon/ui-core 5.1.1 → 5.2.0

package/dist/lib/hooks/useSwipe.js

@@ -0,0 +1,132 @@
+"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"] = exports.TransitionSteps = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _useResolution2 = _interopRequireDefault(require("./useResolution"));
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+var TransitionSteps;
+exports.TransitionSteps = TransitionSteps;
+
+(function (TransitionSteps) {
+  TransitionSteps["INITIAL_STEP"] = "initial-step";
+  TransitionSteps["MOVE_STEP"] = "move-step";
+  TransitionSteps["MOVE_END_STEP"] = "move-end-step";
+})(TransitionSteps || (exports.TransitionSteps = TransitionSteps = {})); // Смахивание элемента влево или вправо на мобильном устройстве.
+// Элемент закрывается на событии 'touchend', если он был смещен пользователем больше, чем на половину ширины окна.
+
+
+function useSwipe(element) {
+  var _useResolution = (0, _useResolution2["default"])(),
+      isMobile = _useResolution.isMobile;
+
+  var _React$useState = React.useState(null),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      initialTouchPosition = _React$useState2[0],
+      setInitialTouchPosition = _React$useState2[1];
+
+  var _React$useState3 = React.useState(TransitionSteps.INITIAL_STEP),
+      _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
+      transitionStep = _React$useState4[0],
+      setTransitionStep = _React$useState4[1];
+
+  var _React$useState5 = React.useState(''),
+      _React$useState6 = (0, _slicedToArray2["default"])(_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
+  };
+}
+
+var _default = useSwipe;
+exports["default"] = _default;

package/dist/lib/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/lib/index.js

@@ -231,6 +231,18 @@ Object.defineProperty(exports, "selectReducer", {
     return _selectReducer["default"];
   }
 });
+Object.defineProperty(exports, "Snackbar", {
+  enumerable: true,
+  get: function get() {
+    return _Snackbar["default"];
+  }
+});
+Object.defineProperty(exports, "SnackbarTimer", {
+  enumerable: true,
+  get: function get() {
+    return _SnackbarTimer["default"];
+  }
+});
 Object.defineProperty(exports, "Switcher", {
   enumerable: true,
   get: function get() {
@@ -374,6 +386,10 @@ var _Select = _interopRequireDefault(require("./components/Select/Select"));
 
 var _selectReducer = _interopRequireDefault(require("./components/Select/reducer/selectReducer"));
 
+var _Snackbar = _interopRequireDefault(require("./components/Snackbar/Snackbar"));
+
+var _SnackbarTimer = _interopRequireDefault(require("./components/Snackbar/SnackbarTimer/SnackbarTimer"));
+
 var _Switcher = _interopRequireDefault(require("./components/Switcher/Switcher"));
 
 var _Tab = _interopRequireDefault(require("./components/Tabs/Tab"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@megafon/ui-core",
-  "version": "5.1.1",
+  "version": "5.2.0",
   "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.13.0",
+    "@megafon/ui-icons": "^2.14.0",
     "@svgr/core": "^2.4.1",
     "@testing-library/jest-dom": "5.16.2",
     "@testing-library/react": "12.1.2",
@@ -85,7 +85,7 @@
   "dependencies": {
     "@babel/runtime": "^7.8.4",
     "@datepicker-react/hooks": "^2.7.0",
-    "@megafon/ui-helpers": "^2.5.1",
+    "@megafon/ui-helpers": "^2.5.2",
     "@popperjs/core": "^2.5.3",
     "core-js": "^3.6.4",
     "date-fns": "^2.16.1",
@@ -96,5 +96,5 @@
     "react-popper": "^2.2.3",
     "swiper": "^6.5.6"
   },
-  "gitHead": "9d1e595eebdde3e8652d07511c1bf3057d61a8f3"
+  "gitHead": "dcc83f03d9aa2088d55b98deecafe819051cda0d"
 }