@vkontakte/vkui 4.24.0 → 4.26.0

package/dist/cssm/components/ModalRoot/ModalRoot.js

@@ -33,6 +33,10 @@ var warn = warnOnce("ModalRoot");
 var IS_DEV = process.env.NODE_ENV === "development";
 
 function numberInRange(number, range) {
+  if (!range) {
+    return false;
+  }
+
   return number >= range[0] && number <= range[1];
 }
 
@@ -52,19 +56,19 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
     _this = _super.call(this, props);
 
-    _defineProperty(_assertThisInitialized(_this), "documentScrolling", void 0);
+    _defineProperty(_assertThisInitialized(_this), "documentScrolling", false);
 
     _defineProperty(_assertThisInitialized(_this), "maskElementRef", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "viewportRef", /*#__PURE__*/React.createRef());
 
-    _defineProperty(_assertThisInitialized(_this), "maskAnimationFrame", void 0);
+    _defineProperty(_assertThisInitialized(_this), "maskAnimationFrame", undefined);
 
     _defineProperty(_assertThisInitialized(_this), "modalRootContext", void 0);
 
     _defineProperty(_assertThisInitialized(_this), "frameIds", void 0);
 
-    _defineProperty(_assertThisInitialized(_this), "restoreFocusTo", void 0);
+    _defineProperty(_assertThisInitialized(_this), "restoreFocusTo", undefined);
 
     _defineProperty(_assertThisInitialized(_this), "preventTouch", function (event) {
       if (!event) {
@@ -129,16 +133,18 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onTouchEnd", function (e) {
       var modalState = _this.getModalState(_this.props.activeModal);
 
-      if (modalState.type === ModalType.PAGE) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE) {
         return _this.onPageTouchEnd(e, modalState);
       }
 
-      if (modalState.type === ModalType.CARD) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.CARD) {
         return _this.onCardTouchEnd(e, modalState);
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "onScroll", function (e) {
+      var _modalState$contentEl;
+
       var activeModal = _this.props.activeModal;
       var target = e.target;
 
@@ -148,9 +154,13 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
 
       var modalState = _this.getModalState(activeModal);
 
-      if (modalState.type === ModalType.PAGE && modalState.contentElement.contains(target)) {
+      if ((modalState === null || modalState === void 0 ? void 0 : modalState.type) === ModalType.PAGE && modalState !== null && modalState !== void 0 && (_modalState$contentEl = modalState.contentElement) !== null && _modalState$contentEl !== void 0 && _modalState$contentEl.contains(target)) {
         modalState.contentScrolled = true;
-        clearTimeout(modalState.contentScrollStopTimeout);
+
+        if (modalState.contentScrollStopTimeout) {
+          clearTimeout(modalState.contentScrollStopTimeout);
+        }
+
         modalState.contentScrollStopTimeout = setTimeout(function () {
           if (modalState.contentScrolled) {
             modalState.contentScrolled = false;
@@ -199,6 +209,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "getModalState",
     value: function getModalState(id) {
+      if (!id) {
+        return undefined;
+      }
+
       return this.props.getModalState(id);
     }
   }, {
@@ -211,7 +225,9 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     value: function componentDidMount() {
       // Отслеживаем изменение размеров viewport (Необходимо для iOS)
       if (this.props.platform === IOS) {
-        this.window.addEventListener("resize", this.updateModalTranslate, false);
+        var _this$window;
+
+        (_this$window = this.window) === null || _this$window === void 0 ? void 0 : _this$window.addEventListener("resize", this.updateModalTranslate, false);
       }
     }
   }, {
@@ -235,12 +251,17 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var enteringModal = this.props.enteringModal;
         var enteringState = this.getModalState(enteringModal);
         this.waitTransitionFinish(enteringState, function () {
-          enteringState.innerElement.style.transitionDelay = null;
+          if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
+            enteringState.innerElement.style.transitionDelay = "";
+          }
 
           _this2.props.onEnter(enteringModal);
         });
-        enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : null;
-        this.animateTranslate(enteringState, enteringState.translateY);
+
+        if (enteringState !== null && enteringState !== void 0 && enteringState.innerElement) {
+          enteringState.innerElement.style.transitionDelay = this.props.delayEnter ? "".concat(this.timeout, "ms") : "";
+          this.animateTranslate(enteringState, enteringState.translateY);
+        }
       } // focus restoration
 
 
@@ -310,7 +331,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "closeModal",
     value: function closeModal(id) {
-      var _this3 = this;
+      var _this3 = this,
+          _prevModalState$trans,
+          _nextModalState$trans,
+          _nextModalState$trans2;
 
       // Сбрасываем состояния, которые могут помешать закрытию модального окна
       this.setState({
@@ -329,7 +353,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       this.waitTransitionFinish(prevModalState, function () {
         return _this3.props.onExit(id);
       });
-      var exitTranslate = prevIsPage && nextIsPage && prevModalState.translateY <= nextModalState.translateYFrom && !this.props.isBack ? nextModalState.translateYFrom + 10 : 100;
+      var exitTranslate = prevIsPage && nextIsPage && ((_prevModalState$trans = prevModalState.translateY) !== null && _prevModalState$trans !== void 0 ? _prevModalState$trans : 0) <= ((_nextModalState$trans = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState$trans !== void 0 ? _nextModalState$trans : 0) && !this.props.isBack ? ((_nextModalState$trans2 = nextModalState === null || nextModalState === void 0 ? void 0 : nextModalState.translateYFrom) !== null && _nextModalState$trans2 !== void 0 ? _nextModalState$trans2 : 0) + 10 : 100;
       this.animateTranslate(prevModalState, exitTranslate);
 
       if (!nextModalState) {
@@ -340,19 +364,23 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onPageTouchMove",
     value: function onPageTouchMove(event, modalState) {
+      var _modalState$innerElem, _modalState$headerEle;
+
       var shiftY = event.shiftY,
           originalEvent = event.originalEvent;
       var target = originalEvent.target;
 
       if (!event.isY) {
-        if (this.viewportRef.current.contains(target)) {
+        var _this$viewportRef$cur;
+
+        if ((_this$viewportRef$cur = this.viewportRef.current) !== null && _this$viewportRef$cur !== void 0 && _this$viewportRef$cur.contains(target)) {
           originalEvent.preventDefault();
         }
 
         return;
       }
 
-      if (!modalState.innerElement.contains(target)) {
+      if (!((_modalState$innerElem = modalState.innerElement) !== null && _modalState$innerElem !== void 0 && _modalState$innerElem.contains(target))) {
         return originalEvent.preventDefault();
       }
 
@@ -363,7 +391,9 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
           expanded = modalState.expanded;
 
       if (!this.state.touchDown) {
-        modalState.touchStartContentScrollTop = modalState.contentElement.scrollTop;
+        var _modalState$contentEl2;
+
+        modalState.touchStartContentScrollTop = (_modalState$contentEl2 = modalState.contentElement) === null || _modalState$contentEl2 === void 0 ? void 0 : _modalState$contentEl2.scrollTop;
         this.setState({
           touchDown: true
         });
@@ -377,10 +407,12 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         modalState.touchMovePositive = shiftY > 0;
       }
 
-      if (!modalState.expandable || collapsed || expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0 || modalState.headerElement.contains(target)) {
+      if (!modalState.expandable || collapsed || expanded && modalState.touchMovePositive && modalState.touchStartContentScrollTop === 0 || (_modalState$headerEle = modalState.headerElement) !== null && _modalState$headerEle !== void 0 && _modalState$headerEle.contains(target)) {
+        var _modalState$translate;
+
         originalEvent.preventDefault();
 
-        if (!expandable && shiftY < 0) {
+        if (!expandable && shiftY < 0 || !this.window) {
           return;
         }
 
@@ -390,7 +422,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var shiftYPercent = shiftY / this.window.innerHeight * 100;
         var shiftYCurrent = rubber(shiftYPercent, 72, 0.8, this.props.platform === ANDROID || this.props.platform === VKCOM);
         modalState.touchShiftYPercent = shiftYPercent;
-        modalState.translateYCurrent = rangeTranslate(modalState.translateY + shiftYCurrent);
+        modalState.translateYCurrent = rangeTranslate(((_modalState$translate = modalState.translateY) !== null && _modalState$translate !== void 0 ? _modalState$translate : 0) + shiftYCurrent);
         this.animateTranslate(modalState, modalState.translateYCurrent);
         this.setMaskOpacity(modalState);
       }
@@ -398,11 +430,15 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "onCardTouchMove",
     value: function onCardTouchMove(event, modalState) {
+      var _modalState$innerElem2;
+
       var originalEvent = event.originalEvent,
           shiftY = event.shiftY;
       var target = originalEvent.target;
 
-      if (modalState.innerElement.contains(target)) {
+      if ((_modalState$innerElem2 = modalState.innerElement) !== null && _modalState$innerElem2 !== void 0 && _modalState$innerElem2.contains(target)) {
+        var _modalState$translate2;
+
         if (!this.state.touchDown) {
           this.setState({
             touchDown: true,
@@ -413,7 +449,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         var shiftYPercent = shiftY / modalState.innerElement.offsetHeight * 100;
         var shiftYCurrent = rubber(shiftYPercent, 72, 1.2, this.props.platform === ANDROID || this.props.platform === VKCOM);
         modalState.touchShiftYPercent = shiftYPercent;
-        modalState.translateYCurrent = Math.max(0, modalState.translateY + shiftYCurrent);
+        modalState.translateYCurrent = Math.max(0, ((_modalState$translate2 = modalState.translateY) !== null && _modalState$translate2 !== void 0 ? _modalState$translate2 : 0) + shiftYCurrent);
         this.animateTranslate(modalState, modalState.translateYCurrent);
         this.setMaskOpacity(modalState);
       }
@@ -429,21 +465,29 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       modalState.touchMovePositive = null;
       var setStateCallback;
 
-      if (this.state.dragging) {
+      if (this.state.dragging && this.window) {
+        var _modalState$translate3, _modalState$touchShif;
+
         var shiftYEndPercent = (startY + shiftY) / this.window.innerHeight * 100;
-        var translateY = modalState.translateYCurrent;
-        var expectTranslateY = translateY / event.duration * 240 * 0.6 * (modalState.touchShiftYPercent < 0 ? -1 : 1);
+        var translateY = (_modalState$translate3 = modalState.translateYCurrent) !== null && _modalState$translate3 !== void 0 ? _modalState$translate3 : 0;
+        var expectTranslateY = translateY / event.duration * 240 * 0.6 * (((_modalState$touchShif = modalState.touchShiftYPercent) !== null && _modalState$touchShif !== void 0 ? _modalState$touchShif : 0) < 0 ? -1 : 1);
         translateY = rangeTranslate(translateY + expectTranslateY);
 
         if (modalState.settlingHeight !== 100) {
           if (numberInRange(translateY, modalState.expandedRange)) {
-            translateY = modalState.expandedRange[0];
+            var _modalState$expandedR, _modalState$expandedR2;
+
+            translateY = (_modalState$expandedR = (_modalState$expandedR2 = modalState.expandedRange) === null || _modalState$expandedR2 === void 0 ? void 0 : _modalState$expandedR2[0]) !== null && _modalState$expandedR !== void 0 ? _modalState$expandedR : 0;
           } else if (numberInRange(translateY, modalState.collapsedRange)) {
-            translateY = modalState.translateYFrom;
+            var _modalState$translate4;
+
+            translateY = (_modalState$translate4 = modalState.translateYFrom) !== null && _modalState$translate4 !== void 0 ? _modalState$translate4 : 0;
           } else if (numberInRange(translateY, modalState.hiddenRange)) {
             translateY = 100;
           } else {
-            translateY = modalState.translateYFrom;
+            var _modalState$translate5;
+
+            translateY = (_modalState$translate5 = modalState.translateYFrom) !== null && _modalState$translate5 !== void 0 ? _modalState$translate5 : 0;
           }
         } else {
           if (numberInRange(translateY, [0, 25])) {
@@ -490,8 +534,10 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       var setStateCallback;
 
       if (this.state.dragging) {
-        var translateY = modalState.translateYCurrent;
-        var expectTranslateY = translateY / duration * 240 * 0.6 * (modalState.touchShiftYPercent < 0 ? -1 : 1);
+        var _modalState$translate6, _modalState$touchShif2;
+
+        var translateY = (_modalState$translate6 = modalState.translateYCurrent) !== null && _modalState$translate6 !== void 0 ? _modalState$translate6 : 0;
+        var expectTranslateY = translateY / duration * 240 * 0.6 * (((_modalState$touchShif2 = modalState.touchShiftYPercent) !== null && _modalState$touchShif2 !== void 0 ? _modalState$touchShif2 : 0) < 0 ? -1 : 1);
         translateY = Math.max(0, translateY + expectTranslateY);
 
         if (translateY >= 30) {
@@ -525,12 +571,16 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
     key: "waitTransitionFinish",
     value: function waitTransitionFinish(modalState, eventHandler) {
       if (transitionEvent.supported) {
+        var _modalState$innerElem4;
+
         var onceHandler = function onceHandler() {
-          modalState === null || modalState === void 0 ? void 0 : modalState.innerElement.removeEventListener(transitionEvent.name, onceHandler);
+          var _modalState$innerElem3;
+
+          modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem3 = modalState.innerElement) === null || _modalState$innerElem3 === void 0 ? void 0 : _modalState$innerElem3.removeEventListener(transitionEvent.name, onceHandler);
           eventHandler();
         };
 
-        modalState === null || modalState === void 0 ? void 0 : modalState.innerElement.addEventListener(transitionEvent.name, onceHandler);
+        modalState === null || modalState === void 0 ? void 0 : (_modalState$innerElem4 = modalState.innerElement) === null || _modalState$innerElem4 === void 0 ? void 0 : _modalState$innerElem4.addEventListener(transitionEvent.name, onceHandler);
       } else {
         setTimeout(eventHandler, this.timeout);
       }
@@ -556,19 +606,25 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "setMaskOpacity",
     value: function setMaskOpacity(modalState) {
-      var _this6 = this;
+      var _this$props$history,
+          _this6 = this;
 
       var forceOpacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
 
-      if (forceOpacity === null && this.props.history[0] !== modalState.id) {
+      if (forceOpacity === null && ((_this$props$history = this.props.history) === null || _this$props$history === void 0 ? void 0 : _this$props$history[0]) !== modalState.id) {
         return;
       }
 
-      cancelAnimationFrame(this.maskAnimationFrame);
+      if (this.maskAnimationFrame) {
+        cancelAnimationFrame(this.maskAnimationFrame);
+      }
+
       this.maskAnimationFrame = requestAnimationFrame(function () {
         if (_this6.maskElementRef.current) {
-          var translateY = modalState.translateY,
-              translateYCurrent = modalState.translateYCurrent;
+          var _modalState$translate7 = modalState.translateY,
+              translateY = _modalState$translate7 === void 0 ? 0 : _modalState$translate7,
+              _modalState$translate8 = modalState.translateYCurrent,
+              translateYCurrent = _modalState$translate8 === void 0 ? 0 : _modalState$translate8;
           var opacity = forceOpacity === null ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0 : forceOpacity;
           _this6.maskElementRef.current.style.opacity = Math.max(0, Math.min(100, opacity)).toString();
         }
@@ -577,7 +633,8 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this7 = this;
+      var _this$props$configPro,
+          _this7 = this;
 
       var _this$props = this.props,
           activeModal = _this$props.activeModal,
@@ -597,7 +654,7 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
         value: this.modalRootContext
       }, createScopedElement(Touch, {
         vkuiClass: classNames(getClassName("ModalRoot", this.props.platform), {
-          "ModalRoot--vkapps": this.props.configProvider.webviewType === WebviewType.VKAPPS,
+          "ModalRoot--vkapps": ((_this$props$configPro = this.props.configProvider) === null || _this$props$configPro === void 0 ? void 0 : _this$props$configPro.webviewType) === WebviewType.VKAPPS,
           "ModalRoot--touched": touchDown,
           "ModalRoot--switching": !!(enteringModal || exitingModal)
         }),
@@ -614,18 +671,24 @@ var ModalRootTouchComponent = /*#__PURE__*/function (_React$Component) {
       }, this.getModals().map(function (Modal) {
         var modalId = getNavId(Modal.props, warn);
 
-        if (modalId !== activeModal && modalId !== exitingModal) {
+        var _modalState = _this7.getModalState(modalId);
+
+        if (modalId !== activeModal && modalId !== exitingModal || !_modalState) {
           return null;
         }
 
-        var modalState = _objectSpread({}, _this7.getModalState(modalId));
+        var modalState = _objectSpread({}, _modalState);
 
         var isPage = modalState.type === ModalType.PAGE;
         var key = "modal-".concat(modalId);
         return createScopedElement(FocusTrap, {
           key: key,
           getRootRef: function getRootRef(e) {
-            return _this7.getModalState(modalId).modalElement = e;
+            var modalState = _this7.getModalState(modalId);
+
+            if (modalState) {
+              modalState.modalElement = e;
+            }
           },
           onClose: _this7.props.closeActiveModal,
           timeout: _this7.timeout,
@@ -667,10 +730,12 @@ function initModal(modalState) {
 }
 
 function initPageModal(modalState) {
+  var _contentElement$clien;
+
   var contentElement = modalState.contentElement;
-  var contentHeight = contentElement.firstElementChild.offsetHeight;
+  var contentHeight = (contentElement === null || contentElement === void 0 ? void 0 : contentElement.firstElementChild).offsetHeight;
   var prevTranslateY = modalState.translateY;
-  modalState.expandable = contentHeight > contentElement.clientHeight || modalState.settlingHeight === 100;
+  modalState.expandable = contentHeight > ((_contentElement$clien = contentElement === null || contentElement === void 0 ? void 0 : contentElement.clientHeight) !== null && _contentElement$clien !== void 0 ? _contentElement$clien : 0) || modalState.settlingHeight === 100;
   var collapsed = false;
   var expanded = false;
   var translateYFrom;
@@ -680,7 +745,9 @@ function initPageModal(modalState) {
   var hiddenRange;
 
   if (modalState.expandable) {
-    translateYFrom = 100 - modalState.settlingHeight;
+    var _modalState$settlingH;
+
+    translateYFrom = 100 - ((_modalState$settlingH = modalState.settlingHeight) !== null && _modalState$settlingH !== void 0 ? _modalState$settlingH : 0);
     var shiftHalf = translateYFrom / 2;
     var visiblePart = 100 - translateYFrom;
     expandedRange = [0, shiftHalf];
@@ -690,9 +757,11 @@ function initPageModal(modalState) {
     expanded = translateYFrom <= 0;
     translateY = translateYFrom;
   } else {
-    var headerHeight = modalState.headerElement.offsetHeight;
+    var _modalState$headerEle2, _modalState$headerEle3, _modalState$innerElem5, _modalState$innerElem6, _modalState$innerElem7;
+
+    var headerHeight = (_modalState$headerEle2 = (_modalState$headerEle3 = modalState.headerElement) === null || _modalState$headerEle3 === void 0 ? void 0 : _modalState$headerEle3.offsetHeight) !== null && _modalState$headerEle2 !== void 0 ? _modalState$headerEle2 : 0;
     var height = contentHeight + headerHeight;
-    translateYFrom = 100 - height / modalState.innerElement.parentElement.offsetHeight * 100;
+    translateYFrom = 100 - height / ((_modalState$innerElem5 = (_modalState$innerElem6 = modalState.innerElement) === null || _modalState$innerElem6 === void 0 ? void 0 : (_modalState$innerElem7 = _modalState$innerElem6.parentElement) === null || _modalState$innerElem7 === void 0 ? void 0 : _modalState$innerElem7.offsetHeight) !== null && _modalState$innerElem5 !== void 0 ? _modalState$innerElem5 : 0) * 100;
     translateY = translateYFrom;
     expandedRange = [translateY, translateY + 25];
     collapsedRange = [translateY + 25, translateY + 25];
@@ -700,7 +769,7 @@ function initPageModal(modalState) {
   } // Если модалка может открываться на весь экран, и новый сдвиг больше предыдущего, то откроем её на весь экран
 
 
-  if (modalState.expandable && translateY > prevTranslateY || modalState.settlingHeight === 100) {
+  if (modalState.expandable && translateY > (prevTranslateY !== null && prevTranslateY !== void 0 ? prevTranslateY : 0) || modalState.settlingHeight === 100) {
     translateY = 0;
   }