@megafon/ui-core 5.1.2 → 5.2.0

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

@@ -0,0 +1,286 @@
+"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.SnackbarTypes = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+require("core-js/modules/web.timers.js");
+
+require("core-js/modules/es.object.values.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var PropTypes = _interopRequireWildcard(require("prop-types"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _Caption = _interopRequireDefault(require("../Caption/Caption"));
+
+var _Header = _interopRequireDefault(require("../Header/Header"));
+
+var _Tile = _interopRequireDefault(require("../Tile/Tile"));
+
+var _useSwipe2 = _interopRequireWildcard(require("hooks/useSwipe"));
+
+var _SnackbarTimer = _interopRequireDefault(require("./SnackbarTimer/SnackbarTimer"));
+
+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 _DEFAULT_SNACKBARS;
+
+var HeartIcon16 = function HeartIcon16(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M13.25 3A3.78 3.78 0 0010 4.82 3.78 3.78 0 006.75 3C4.6 3 3 5.18 3 7.13a3.42 3.42 0 00.49 1.77c1.2 2 5 7.64 5.15 7.88l.15.22h2.51l.15-.22c.16-.24 4-5.83 5.1-7.92A4.14 4.14 0 0017 7.13C17 5.18 15.4 3 13.25 3zm2.41 5.4c-.94 1.81-4.16 6.53-4.89 7.59H9.32c-.73-1.09-3.92-5.87-5-7.62A2.42 2.42 0 014 7.13C4 5.71 5.23 4 6.75 4a2.73 2.73 0 012.67 2h1.15a2.73 2.73 0 012.67-2C14.77 4 16 5.71 16 7.13a3.14 3.14 0 01-.34 1.27z"
+  }));
+};
+
+var HeartIcon24 = function HeartIcon24(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M20.5 6A5.55 5.55 0 0016 8.27 5.55 5.55 0 0011.5 6C8.35 6 6 9.18 6 12a5 5 0 00.73 2.61c1.67 2.77 6.92 10.59 7.14 10.93l.3.44H18l.3-.43c.23-.33 5.58-8.09 7.09-11A6 6 0 0026 12c0-2.82-2.35-6-5.5-6zm3.07 7.65c-1.25 2.42-5.5 8.65-6.66 10.35h-1.68c-1.16-1.73-5.37-8-6.79-10.4A3 3 0 018 12c0-1.82 1.56-4 3.5-4a3.47 3.47 0 013.38 2.51h2.24A3.47 3.47 0 0120.5 8c1.94 0 3.5 2.2 3.5 4a4 4 0 01-.43 1.65z"
+  }));
+};
+
+var AttentionIcon16 = function AttentionIcon16(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M9 5h2v6H9V5zm1 8c-.2 0-.5.1-.7.3s-.3.4-.3.7.1.5.3.7.5.3.7.3.5-.1.7-.3.3-.4.3-.7-.1-.5-.3-.7c-.1-.2-.4-.3-.7-.3zm0 4c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zm-8-7c0 4.4 3.6 8 8 8s8-3.6 8-8-3.6-8-8-8-8 3.6-8 8z"
+  }));
+};
+
+var CheckedIcon16 = function CheckedIcon16(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 20 20"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M8.832 11.547L6.619 9.335l-1.414 1.413 2.462 2.462 1.445 1.446 5.932-8.486-1.638-1.148-4.574 6.525z"
+  }));
+};
+
+var AttentionIcon24 = function AttentionIcon24(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M15 22h2v-2h-2v2zm0-4h2v-8h-2v8zm1 10C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12zM6 16c0 5.5 4.5 10 10 10s10-4.5 10-10S21.5 6 16 6 6 10.5 6 16z"
+  }));
+};
+
+var CheckedIcon24 = function CheckedIcon24(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 32 32"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M22.2 9l-7.8 9.4-3.6-3.7L9 16.5c3.6 3.7 5.4 5.5 5.5 5.5.1 0 3.3-3.8 9.5-11.3L22.2 9z"
+  }));
+};
+
+var CancelIcon = function CancelIcon(props) {
+  return /*#__PURE__*/_react["default"].createElement("svg", (0, _extends2["default"])({
+    viewBox: "0 0 40 40"
+  }, props), /*#__PURE__*/_react["default"].createElement("path", {
+    d: "M20 18.586l6.364-6.364 1.414 1.414L21.414 20l6.364 6.364-1.414 1.414L20 21.414l-6.364 6.364-1.414-1.414L18.586 20l-6.364-6.364 1.414-1.414L20 18.586z"
+  }));
+};
+
+var DEFAULT_MAX_TIMER_SECONDS = 4;
+var CLOSE_DELAY_MS = 80;
+var SnackbarTypes = {
+  ATTENTION: 'attention',
+  SUCCESS: 'success',
+  TIMER: 'timer',
+  INFO: 'info'
+};
+exports.SnackbarTypes = SnackbarTypes;
+var ATTENTION = SnackbarTypes.ATTENTION,
+    SUCCESS = SnackbarTypes.SUCCESS,
+    TIMER = SnackbarTypes.TIMER,
+    INFO = SnackbarTypes.INFO;
+var DEFAULT_SNACKBARS = (_DEFAULT_SNACKBARS = {}, (0, _defineProperty2["default"])(_DEFAULT_SNACKBARS, ATTENTION, {
+  mobileIcon: /*#__PURE__*/_react["default"].createElement(AttentionIcon16, null),
+  desktopIcon: /*#__PURE__*/_react["default"].createElement(AttentionIcon24, null),
+  buttonText: 'Подробнее'
+}), (0, _defineProperty2["default"])(_DEFAULT_SNACKBARS, SUCCESS, {
+  mobileIcon: /*#__PURE__*/_react["default"].createElement(CheckedIcon16, null),
+  desktopIcon: /*#__PURE__*/_react["default"].createElement(CheckedIcon24, null),
+  buttonText: 'Подробнее'
+}), (0, _defineProperty2["default"])(_DEFAULT_SNACKBARS, TIMER, {
+  buttonText: 'Отмена'
+}), (0, _defineProperty2["default"])(_DEFAULT_SNACKBARS, INFO, {
+  mobileIcon: /*#__PURE__*/_react["default"].createElement(HeartIcon16, null),
+  desktopIcon: /*#__PURE__*/_react["default"].createElement(HeartIcon24, null),
+  buttonText: 'Хорошо'
+}), _DEFAULT_SNACKBARS);
+var cn = (0, _uiHelpers.cnCreate)('mfui-snackbar');
+
+var Snackbar = function Snackbar(_ref) {
+  var text = _ref.text,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? INFO : _ref$type,
+      icon = _ref.icon,
+      _ref$hasIcon = _ref.hasIcon,
+      hasIcon = _ref$hasIcon === void 0 ? true : _ref$hasIcon,
+      buttonText = _ref.buttonText,
+      _ref$maxTimerValue = _ref.maxTimerValue,
+      maxTimerValue = _ref$maxTimerValue === void 0 ? DEFAULT_MAX_TIMER_SECONDS : _ref$maxTimerValue,
+      _ref$hasTextButton = _ref.hasTextButton,
+      hasTextButton = _ref$hasTextButton === void 0 ? false : _ref$hasTextButton,
+      _ref$disableCloseAnim = _ref.disableCloseAnimation,
+      disableCloseAnimation = _ref$disableCloseAnim === void 0 ? false : _ref$disableCloseAnim,
+      className = _ref.className,
+      _ref$classes = _ref.classes,
+      classes = _ref$classes === void 0 ? {} : _ref$classes,
+      dataAttrs = _ref.dataAttrs,
+      onClose = _ref.onClose,
+      onButtonClick = _ref.onButtonClick;
+
+  var _useState = (0, _react.useState)(true),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      isOpened = _useState2[0],
+      setIsOpened = _useState2[1];
+
+  var containerRef = (0, _react.useRef)(null);
+
+  var _useSwipe = (0, _useSwipe2["default"])(containerRef),
+      transform = _useSwipe.transform,
+      transitionStep = _useSwipe.transitionStep;
+
+  var isTransitionMoveStep = transitionStep === _useSwipe2.TransitionSteps.MOVE_STEP;
+  var isTransitionMoveEndStep = transitionStep === _useSwipe2.TransitionSteps.MOVE_END_STEP;
+  var defaultSnackbar = DEFAULT_SNACKBARS[type];
+  var isTimerType = type === TIMER;
+  var isInfoType = type === INFO;
+  var isHiddenIcon = isTimerType || !hasIcon && isInfoType;
+  var isCustomIcon = isInfoType && icon;
+  var currentButtonText = buttonText && !isTimerType ? buttonText : defaultSnackbar.buttonText;
+  var handleClose = (0, _react.useCallback)(function () {
+    setIsOpened(false);
+  }, []);
+  (0, _react.useEffect)(function () {
+    if (isOpened) {
+      return undefined;
+    }
+
+    if (disableCloseAnimation) {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }
+
+    var closeTimeoutId = setTimeout(function () {
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    }, CLOSE_DELAY_MS);
+    return function () {
+      clearTimeout(closeTimeoutId);
+    };
+  }, [isOpened, disableCloseAnimation, onClose]);
+  (0, _react.useEffect)(function () {
+    isTransitionMoveEndStep && handleClose();
+  }, [isTransitionMoveEndStep, handleClose]);
+  var handleTextButtonClick = (0, _react.useCallback)(function () {
+    onButtonClick === null || onButtonClick === void 0 ? void 0 : onButtonClick();
+  }, [onButtonClick]);
+  var renderedTimer = (0, _react.useMemo)(function () {
+    return /*#__PURE__*/_react["default"].createElement(_SnackbarTimer["default"], {
+      isTimerType: isTimerType,
+      maxTimerValue: maxTimerValue,
+      onTimerEnd: handleClose
+    });
+  }, [isTimerType, maxTimerValue, handleClose]);
+  var renderedIcons = (0, _react.useMemo)(function () {
+    return isCustomIcon ? /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('icon-container', [classes.icon])
+    }, icon) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('icon-container', {
+        mobile: true
+      }, [classes.icon])
+    }, defaultSnackbar.mobileIcon), /*#__PURE__*/_react["default"].createElement("div", {
+      className: cn('icon-container', {
+        desktop: true
+      }, [classes.icon])
+    }, defaultSnackbar.desktopIcon));
+  }, [isCustomIcon, icon, defaultSnackbar, classes]);
+  return /*#__PURE__*/_react["default"].createElement("div", (0, _extends2["default"])({
+    className: cn({
+      move: isTransitionMoveStep
+    }, [className, classes.root]),
+    ref: containerRef,
+    style: {
+      transform: transform
+    }
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.root)), /*#__PURE__*/_react["default"].createElement(_Tile["default"], {
+    className: cn('tile', {
+      type: type,
+      closed: !isOpened
+    }, [classes.container]),
+    radius: "rounded"
+  }, !isHiddenIcon && renderedIcons, renderedTimer, /*#__PURE__*/_react["default"].createElement(_Caption["default"], {
+    className: cn('text', {
+      mobile: true
+    }, [classes.text]),
+    variant: "medium",
+    color: "white",
+    hasMargin: false,
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text
+    }
+  }, text), /*#__PURE__*/_react["default"].createElement(_Header["default"], {
+    as: "h5",
+    color: "white",
+    className: cn('text', {
+      desktop: true,
+      "short": !!hasTextButton
+    }, [classes.text]),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.text
+    }
+  }, text), hasTextButton && /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+    type: "text",
+    sizeAll: "small",
+    sizeMobile: "extra-small",
+    className: cn('text-button'),
+    dataAttrs: {
+      root: dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.textButton
+    },
+    onClick: handleTextButtonClick
+  }, currentButtonText), /*#__PURE__*/_react["default"].createElement("button", (0, _extends2["default"])({
+    type: "button",
+    className: cn('close-button')
+  }, (0, _uiHelpers.filterDataAttrs)(dataAttrs === null || dataAttrs === void 0 ? void 0 : dataAttrs.closeButton), {
+    onClick: handleClose
+  }), /*#__PURE__*/_react["default"].createElement(CancelIcon, {
+    className: cn('close-button-icon')
+  }))));
+};
+
+Snackbar.propTypes = {
+  text: PropTypes.string.isRequired,
+  type: PropTypes.oneOf(Object.values(SnackbarTypes)),
+  icon: PropTypes.element,
+  hasIcon: PropTypes.bool,
+  buttonText: PropTypes.string,
+  hasTextButton: PropTypes.bool,
+  maxTimerValue: PropTypes.number,
+  disableCloseAnimation: PropTypes.bool,
+  className: PropTypes.string,
+  classes: PropTypes.objectOf(PropTypes.string),
+  dataAttrs: PropTypes.objectOf(PropTypes.object),
+  onButtonClick: PropTypes.func,
+  onClose: PropTypes.func
+};
+var _default = Snackbar;
+exports["default"] = _default;

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

@@ -0,0 +1,63 @@
+h1,
+h2,
+h3,
+h4,
+h5 {
+  margin: 0;
+}
+@-webkit-keyframes snackbar-progress-bar {
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes snackbar-progress-bar {
+  0% {
+    stroke-dashoffset: 100;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+.mfui-snackbar-timer__timer {
+  position: relative;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
+  margin-right: 8px;
+  width: 24px;
+  height: 24px;
+}
+.mfui-snackbar-timer__timer svg {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+}
+.mfui-snackbar-timer__timer-bg {
+  fill: none;
+  stroke-width: 1px;
+  stroke: var(--spbSky0);
+}
+.mfui-snackbar-timer__timer-progress {
+  fill: none;
+  stroke-width: 2px;
+  stroke-linecap: round;
+  stroke: var(--content);
+  stroke-dasharray: 100;
+  -webkit-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  -webkit-transform-origin: 50% 50%;
+          transform-origin: 50% 50%;
+  -webkit-animation-name: snackbar-progress-bar;
+          animation-name: snackbar-progress-bar;
+  -webkit-animation-timing-function: linear;
+          animation-timing-function: linear;
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import './SnackbarTimer.less';
+declare type SnackbarTimerProps = {
+    isTimerType: boolean;
+    maxTimerValue: number;
+    onTimerEnd: () => void;
+};
+declare const SnackbarTimer: React.FC<SnackbarTimerProps>;
+export default SnackbarTimer;

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

@@ -0,0 +1,99 @@
+"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"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+require("core-js/modules/web.timers.js");
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uiHelpers = require("@megafon/ui-helpers");
+
+var _Caption = _interopRequireDefault(require("../../Caption/Caption"));
+
+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 TIMER_END_DELAY_MS = 100;
+var MS_IN_SECOND = 1000;
+var cn = (0, _uiHelpers.cnCreate)('mfui-snackbar-timer');
+
+var SnackbarTimer = function SnackbarTimer(_ref) {
+  var isTimerType = _ref.isTimerType,
+      maxTimerValue = _ref.maxTimerValue,
+      onTimerEnd = _ref.onTimerEnd;
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      timerValue = _useState2[0],
+      setTimerValue = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setTimerValue(maxTimerValue);
+  }, [maxTimerValue]);
+  (0, _react.useEffect)(function () {
+    var timerTimeoutId;
+    var closeTimeoutId;
+
+    switch (timerValue) {
+      case null:
+        {
+          break;
+        }
+
+      case 0:
+        {
+          closeTimeoutId = setTimeout(function () {
+            setTimerValue(null);
+            onTimerEnd();
+          }, TIMER_END_DELAY_MS);
+          break;
+        }
+
+      default:
+        {
+          timerTimeoutId = setTimeout(function () {
+            return setTimerValue(timerValue - 1);
+          }, MS_IN_SECOND);
+        }
+    }
+
+    return function () {
+      clearTimeout(timerTimeoutId);
+      clearTimeout(closeTimeoutId);
+    };
+  }, [timerValue, onTimerEnd]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: cn()
+  }, isTimerType && /*#__PURE__*/_react["default"].createElement(_Caption["default"], {
+    color: "white",
+    variant: "medium",
+    hasMargin: false,
+    className: cn('timer')
+  }, /*#__PURE__*/_react["default"].createElement("svg", null, /*#__PURE__*/_react["default"].createElement("circle", {
+    className: cn('timer-bg'),
+    cx: "50%",
+    cy: "50%",
+    r: "11"
+  }), /*#__PURE__*/_react["default"].createElement("circle", {
+    className: cn('timer-progress'),
+    style: {
+      animationDuration: "".concat(maxTimerValue * 1.5, "s")
+    },
+    cx: "50%",
+    cy: "50%",
+    r: "11"
+  })), timerValue));
+};
+
+var _default = SnackbarTimer;
+exports["default"] = _default;

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

@@ -0,0 +1,5 @@
+declare type UseResolutionReturnType = {
+    isMobile: boolean;
+};
+declare function useResolution(): UseResolutionReturnType;
+export default useResolution;

package/dist/lib/hooks/useResolution.js

@@ -0,0 +1,58 @@
+"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"] = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var React = _interopRequireWildcard(require("react"));
+
+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 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 = (0, _slicedToArray2["default"])(_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
+  };
+}
+
+var _default = useResolution;
+exports["default"] = _default;

package/dist/lib/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/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;