@invoicebox/ui 0.1.0-alpha.294 → 0.1.0-alpha.295

package/dist/components/common/Drawer/index.d.ts

@@ -1,6 +1,5 @@
 import { FC, ReactNode } from 'react';
-import { SheetProps } from 'react-modal-sheet/src/types';
-export type TProps = Pick<SheetProps, 'onOpenEnd'> & {
+export type TProps = {
     children: ReactNode;
     onClose: () => void;
     title?: string;
@@ -9,5 +8,6 @@ export type TProps = Pick<SheetProps, 'onOpenEnd'> & {
     isPadding?: boolean;
     borderColor?: string;
     overflow?: string;
+    onOpenEnd?: () => void;
 };
 export declare const Drawer: FC<TProps>;

package/dist/components/common/Drawer/index.js

@@ -9,7 +9,6 @@ var _react = _interopRequireWildcard(require("react"));
 var S = _interopRequireWildcard(require("./styles"));
 var _Typography = require("../Typography");
 var _palette = require("../../../palette");
-var _reactModalSheet = require("react-modal-sheet");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -18,6 +17,8 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var ANIMATION_MS = 300;
+var DRAG_CLOSE_THRESHOLD = 80;
 var Drawer = exports.Drawer = function Drawer(_ref) {
   var isOpen = _ref.isOpen,
     children = _ref.children,
@@ -34,32 +35,102 @@ var Drawer = exports.Drawer = function Drawer(_ref) {
     _useState2 = _slicedToArray(_useState, 2),
     shouldRender = _useState2[0],
     setShouldRender = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isEntered = _useState4[0],
+    setIsEntered = _useState4[1];
+  var _useState5 = (0, _react.useState)(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    dragOffset = _useState6[0],
+    setDragOffset = _useState6[1];
+  var dragStartYRef = (0, _react.useRef)(null);
+  var sheetRef = (0, _react.useRef)(null);
 
-  // delay for close drawer and unmount
+  // Монтируем при открытии, размонтируем после анимации закрытия (как раньше — задержка 300мс).
   (0, _react.useEffect)(function () {
     if (isOpen) {
       setShouldRender(true);
     } else {
+      setIsEntered(false);
       var timer = setTimeout(function () {
         return setShouldRender(false);
-      }, 300);
+      }, ANIMATION_MS);
       return function () {
         return clearTimeout(timer);
       };
     }
+    return undefined;
   }, [isOpen]);
+
+  // Запускаем enter-переход на кадр позже маунта: сначала лист за экраном (translateY 100%), затем 0.
+  (0, _react.useEffect)(function () {
+    if (!shouldRender || !isOpen) return undefined;
+    var raf = requestAnimationFrame(function () {
+      return setIsEntered(true);
+    });
+    return function () {
+      return cancelAnimationFrame(raf);
+    };
+  }, [shouldRender, isOpen]);
+
+  // Блокируем скролл фона, пока боттомшит открыт (как делал react-modal-sheet).
+  (0, _react.useEffect)(function () {
+    if (!shouldRender) return undefined;
+    var prev = document.body.style.overflow;
+    document.body.style.overflow = 'hidden';
+    return function () {
+      document.body.style.overflow = prev;
+    };
+  }, [shouldRender]);
+  var handleTransitionEnd = (0, _react.useCallback)(function (event) {
+    if (event.target !== sheetRef.current || event.propertyName !== 'transform') return;
+    if (isOpen && isEntered && onOpenEnd) onOpenEnd();
+  }, [isOpen, isEntered, onOpenEnd]);
+  var handlePointerDown = (0, _react.useCallback)(function (event) {
+    var _event$currentTarget$, _event$currentTarget;
+    dragStartYRef.current = event.clientY;
+    (_event$currentTarget$ = (_event$currentTarget = event.currentTarget).setPointerCapture) === null || _event$currentTarget$ === void 0 || _event$currentTarget$.call(_event$currentTarget, event.pointerId);
+  }, []);
+  var handlePointerMove = (0, _react.useCallback)(function (event) {
+    if (dragStartYRef.current === null) return;
+    var delta = event.clientY - dragStartYRef.current;
+    setDragOffset(delta > 0 ? delta : 0);
+  }, []);
+  var handlePointerUp = (0, _react.useCallback)(function () {
+    if (dragStartYRef.current === null) return;
+    var offset = dragOffset;
+    dragStartYRef.current = null;
+    setDragOffset(0);
+    if (offset > DRAG_CLOSE_THRESHOLD) onClose();
+  }, [dragOffset, onClose]);
   if (!shouldRender) return null;
-  return /*#__PURE__*/_react["default"].createElement(_reactModalSheet.Sheet, {
-    detent: "content",
-    isOpen: isOpen,
-    onClose: onClose,
-    onOpenEnd: onOpenEnd
-  }, /*#__PURE__*/_react["default"].createElement(S.StyledSheetContainer, {
+  var isDragging = dragOffset > 0;
+  var translateY = !isEntered ? '100%' : "".concat(dragOffset, "px");
+  return /*#__PURE__*/_react["default"].createElement(S.Root, {
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/_react["default"].createElement(S.Backdrop, {
+    $bgColor: palette.backdropBg,
+    $isVisible: isEntered,
+    onClick: onClose
+  }), /*#__PURE__*/_react["default"].createElement(S.Sheet, {
+    ref: sheetRef,
+    style: {
+      transform: "translateY(".concat(translateY, ")")
+    },
+    $isDragging: isDragging,
     $isErrorBorder: isErrorBorder,
     $errorColor: palette.error,
     $borderColor: borderColor,
-    $overflow: overflow
-  }, /*#__PURE__*/_react["default"].createElement(_reactModalSheet.Sheet.Content, null, /*#__PURE__*/_react["default"].createElement(S.DragIndicatorWrapper, null, /*#__PURE__*/_react["default"].createElement(_reactModalSheet.Sheet.DragIndicator, null)), title && /*#__PURE__*/_react["default"].createElement(S.Title, {
+    $overflow: overflow,
+    onTransitionEnd: handleTransitionEnd
+  }, /*#__PURE__*/_react["default"].createElement(S.DragHandle, {
+    $bg: title ? palette.titleBg : palette.bg,
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerUp
+  }, /*#__PURE__*/_react["default"].createElement(S.DragIndicator, null)), title && /*#__PURE__*/_react["default"].createElement(S.Title, {
     $bg: palette.titleBg
   }, /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
     variant: "headline4"
@@ -67,8 +138,5 @@ var Drawer = exports.Drawer = function Drawer(_ref) {
     $isBorderRadius: !title,
     $bgColor: palette.bg,
     $isPadding: isPadding
-  }, children))), /*#__PURE__*/_react["default"].createElement(S.StyledSheetBackdrop, {
-    onTap: onClose,
-    $bgColor: palette.backdropBg
-  }));
+  }, children)));
 };