@vkontakte/vkui 4.23.0 → 4.25.2

package/src/components/View/ViewInfinite.tsx

@@ -1,29 +1,38 @@
-import * as React from 'react';
-import { classNames } from '../../lib/classNames';
-import { transitionEvent, animationEvent } from '../../lib/supportEvents';
-import { getClassName } from '../../helpers/getClassName';
-import { IOS, ANDROID, VKCOM } from '../../lib/platform';
-import { Touch, TouchEvent } from '../Touch/Touch';
-import { HasPlatform } from '../../types';
-import { withPlatform } from '../../hoc/withPlatform';
-import { withContext } from '../../hoc/withContext';
-import { ConfigProviderContext, ConfigProviderContextInterface } from '../ConfigProvider/ConfigProviderContext';
-import { SplitColContext, SplitColContextProps } from '../SplitCol/SplitCol';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { canUseDOM, withDOM, DOMProps } from '../../lib/dom';
-import { ScrollContext, ScrollContextInterface } from '../AppRoot/ScrollContext';
-import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
-import { getNavId, NavIdProps } from '../../lib/getNavId';
-import { warnOnce } from '../../lib/warnOnce';
-import { swipeBackExcluded } from './utils';
-import './View.css';
-
-const warn = warnOnce('ViewInfinite');
-
-enum SwipeBackResults { fail = 1, success}
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { transitionEvent, animationEvent } from "../../lib/supportEvents";
+import { getClassName } from "../../helpers/getClassName";
+import { IOS, ANDROID, VKCOM } from "../../lib/platform";
+import { Touch, TouchEvent } from "../Touch/Touch";
+import { HasPlatform } from "../../types";
+import { withPlatform } from "../../hoc/withPlatform";
+import { withContext } from "../../hoc/withContext";
+import {
+  ConfigProviderContext,
+  ConfigProviderContextInterface,
+} from "../ConfigProvider/ConfigProviderContext";
+import { SplitColContext, SplitColContextProps } from "../SplitCol/SplitCol";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { canUseDOM, withDOM, DOMProps } from "../../lib/dom";
+import {
+  ScrollContext,
+  ScrollContextInterface,
+} from "../AppRoot/ScrollContext";
+import { NavTransitionProvider } from "../NavTransitionContext/NavTransitionContext";
+import { getNavId, NavIdProps } from "../../lib/getNavId";
+import { warnOnce } from "../../lib/warnOnce";
+import { swipeBackExcluded } from "./utils";
+import "./View.css";
+
+const warn = warnOnce("ViewInfinite");
+
+enum SwipeBackResults {
+  fail = 1,
+  success,
+}
 
 interface Scrolls {
-  [index: string]: number[];
+  [index: string]: Array<number | undefined>;
 }
 
 interface ViewsScrolls {
@@ -34,9 +43,12 @@ type TransitionEventHandler = (e?: TransitionEvent) => void;
 
 let scrollsCache: ViewsScrolls = {};
 
-export type TransitionParams = { from: string; to: string };
+export type TransitionParams = { from: string | null; to: string | null };
 
-export interface ViewInfiniteProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, NavIdProps {
+export interface ViewInfiniteProps
+  extends React.HTMLAttributes<HTMLElement>,
+    HasPlatform,
+    NavIdProps {
   activePanel: string;
   popout?: React.ReactNode;
   modal?: React.ReactNode;
@@ -72,23 +84,26 @@ export interface ViewInfiniteProps extends React.HTMLAttributes<HTMLElement>, Ha
 export interface ViewInfiniteState {
   animated: boolean;
 
-  visiblePanels: string[];
-  activePanel: string;
-  isBack: boolean;
-  prevPanel: string;
-  nextPanel: string;
+  visiblePanels: Array<string | null>;
+  activePanel: string | null;
+  isBack?: boolean;
+  prevPanel: string | null;
+  nextPanel: string | null;
 
   swipingBack: boolean;
   swipebackStartX: number;
   swipeBackShift: number;
-  swipeBackNextPanel: string;
-  swipeBackPrevPanel: string;
-  swipeBackResult: SwipeBackResults;
+  swipeBackNextPanel: string | null;
+  swipeBackPrevPanel: string | null;
+  swipeBackResult: SwipeBackResults | null;
 
   browserSwipe: boolean;
 }
 
-class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInfiniteState> {
+class ViewInfinite extends React.Component<
+  ViewInfiniteProps & DOMProps,
+  ViewInfiniteState
+> {
   constructor(props: ViewInfiniteProps) {
     super(props);
 
@@ -116,9 +131,9 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
     history: [],
   };
 
-  private scrolls = scrollsCache[getNavId(this.props, warn)] || {};
-  private transitionFinishTimeout: ReturnType<typeof setTimeout>;
-  private animationFinishTimeout: ReturnType<typeof setTimeout>;
+  private scrolls = scrollsCache[getNavId(this.props, warn) as string] || {};
+  private transitionFinishTimeout: number | undefined = undefined;
+  private animationFinishTimeout: number | undefined = undefined;
 
   get document() {
     return this.props.document;
@@ -132,7 +147,7 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
     return React.Children.toArray(this.props.children) as React.ReactElement[];
   }
 
-  panelNodes: { [id: string]: HTMLDivElement } = {};
+  panelNodes: { [id: string]: HTMLDivElement | null } = {};
 
   componentWillUnmount() {
     const id = getNavId(this.props);
@@ -141,20 +156,33 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
     }
   }
 
-  componentDidUpdate(prevProps: ViewInfiniteProps, prevState: ViewInfiniteState) {
+  componentDidUpdate(
+    prevProps: ViewInfiniteProps,
+    prevState: ViewInfiniteState
+  ) {
     this.props.popout && !prevProps.popout && this.blurActiveElement();
     this.props.modal && !prevProps.modal && this.blurActiveElement();
 
     // Нужен переход
-    if (prevProps.activePanel !== this.props.activePanel && !prevState.swipingBack && !prevState.browserSwipe) {
+    if (
+      prevProps.activePanel !== this.props.activePanel &&
+      !prevState.swipingBack &&
+      !prevState.browserSwipe
+    ) {
       let isBack = false;
 
       if (this.props.isBackCheck) {
-        isBack = this.props.isBackCheck({ from: prevProps.activePanel, to: this.props.activePanel });
+        isBack = this.props.isBackCheck({
+          from: prevProps.activePanel,
+          to: this.props.activePanel,
+        });
       } else {
         const firstLayerId = this.panels
           .map((panel) => getNavId(panel.props, warn))
-          .find((id) => id === prevProps.activePanel || id === this.props.activePanel);
+          .find(
+            (id) =>
+              id === prevProps.activePanel || id === this.props.activePanel
+          );
         isBack = firstLayerId === this.props.activePanel;
       }
 
@@ -163,7 +191,10 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
       const prevScrolls = this.scrolls[prevProps.activePanel] || [];
       const scrolls = {
         ...this.scrolls,
-        [prevProps.activePanel]: [...prevScrolls, this.props.scroll.getScroll().y],
+        [prevProps.activePanel]: [
+          ...prevScrolls,
+          this.props.scroll?.getScroll().y,
+        ],
       };
       this.scrolls = scrolls;
 
@@ -181,39 +212,66 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
 
         // Фолбек анимации перехода
         if (!animationEvent.supported) {
-          clearTimeout(this.animationFinishTimeout);
-          this.animationFinishTimeout = setTimeout(this.transitionEndHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+          if (this.animationFinishTimeout) {
+            clearTimeout(this.animationFinishTimeout);
+          }
+          this.animationFinishTimeout = setTimeout(
+            this.transitionEndHandler,
+            this.props.platform === ANDROID || this.props.platform === VKCOM
+              ? 300
+              : 600
+          );
         }
       }
     }
 
     // Закончилась анимация свайпа назад
-    if (prevProps.activePanel !== this.props.activePanel && prevState.swipingBack) {
+    if (
+      prevProps.activePanel !== this.props.activePanel &&
+      prevState.swipingBack
+    ) {
       const nextPanel = this.state.swipeBackNextPanel;
       const prevPanel = this.state.swipeBackPrevPanel;
+      let scrollPosition: undefined | number = undefined;
 
-      const prevPanelScrolls = [...this.scrolls[prevPanel] || []].slice(0, -1);
-      const newPanelScrolls = [...this.scrolls[nextPanel] || []];
-      const scrollPosition = newPanelScrolls.pop();
       this.scrolls = {
         ...this.scrolls,
-        [nextPanel]: newPanelScrolls,
-        [prevPanel]: prevPanelScrolls,
       };
 
-      this.setState({
-        swipeBackPrevPanel: null,
-        swipeBackNextPanel: null,
-        swipingBack: false,
-        swipeBackResult: null,
-        swipebackStartX: 0,
-        swipeBackShift: 0,
-        activePanel: nextPanel,
-        visiblePanels: [nextPanel],
-      }, () => {
-        this.props.scroll.scrollTo(0, scrollPosition);
-        prevProps.onTransition && prevProps.onTransition({ isBack: true, from: prevPanel, to: nextPanel });
-      });
+      if (prevPanel !== null) {
+        const prevPanelScrolls = [...(this.scrolls[prevPanel] || [])].slice(
+          0,
+          -1
+        );
+        this.scrolls[prevPanel] = prevPanelScrolls;
+      }
+      if (nextPanel !== null) {
+        const newPanelScrolls = [...(this.scrolls[nextPanel] || [])];
+        scrollPosition = newPanelScrolls.pop();
+        this.scrolls[nextPanel] = newPanelScrolls;
+      }
+
+      this.setState(
+        {
+          swipeBackPrevPanel: null,
+          swipeBackNextPanel: null,
+          swipingBack: false,
+          swipeBackResult: null,
+          swipebackStartX: 0,
+          swipeBackShift: 0,
+          activePanel: nextPanel,
+          visiblePanels: [nextPanel],
+        },
+        () => {
+          this.props.scroll?.scrollTo(0, scrollPosition);
+          prevProps.onTransition &&
+            prevProps.onTransition({
+              isBack: true,
+              from: prevPanel,
+              to: nextPanel,
+            });
+        }
+      );
     }
 
     // Начался свайп назад
@@ -223,23 +281,33 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
 
     // Началась анимация завершения свайпа назад.
     if (!prevState.swipeBackResult && this.state.swipeBackResult) {
-      this.waitTransitionFinish(this.pickPanel(this.state.swipeBackNextPanel), this.swipingBackTransitionEndHandler);
+      this.waitTransitionFinish(
+        this.pickPanel(this.state.swipeBackNextPanel),
+        this.swipingBackTransitionEndHandler
+      );
     }
 
     // Если свайп назад отменился (когда пользователь недостаточно сильно свайпнул)
-    if (prevState.swipeBackResult === SwipeBackResults.fail && !this.state.swipeBackResult) {
-      const newPanelScrolls = [...this.scrolls[this.state.activePanel] || []];
+    if (
+      prevState.swipeBackResult === SwipeBackResults.fail &&
+      !this.state.swipeBackResult &&
+      this.state.activePanel !== null
+    ) {
+      const newPanelScrolls = [...(this.scrolls[this.state.activePanel] || [])];
       const scrollPosition = newPanelScrolls.pop();
       this.scrolls = {
         ...this.scrolls,
         [this.state.activePanel]: newPanelScrolls,
       };
 
-      this.props.scroll.scrollTo(0, scrollPosition);
+      this.props.scroll?.scrollTo(0, scrollPosition);
     }
 
     // Закончился Safari свайп
-    if (prevProps.activePanel !== this.props.activePanel && this.state.browserSwipe) {
+    if (
+      prevProps.activePanel !== this.props.activePanel &&
+      this.state.browserSwipe
+    ) {
       this.setState({
         browserSwipe: false,
         nextPanel: null,
@@ -252,35 +320,57 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
   }
 
   shouldDisableTransitionMotion(): boolean {
-    return this.props.configProvider.transitionMotionEnabled === false ||
-      !this.props.splitCol.animate;
+    return (
+      this.props.configProvider?.transitionMotionEnabled === false ||
+      !this.props.splitCol?.animate
+    );
   }
 
-  waitTransitionFinish(elem: HTMLElement, eventHandler: TransitionEventHandler): void {
-    if (transitionEvent.supported) {
-      elem.removeEventListener(transitionEvent.name, eventHandler);
-      elem.addEventListener(transitionEvent.name, eventHandler);
+  waitTransitionFinish(
+    elem: HTMLElement | null | undefined,
+    eventHandler: TransitionEventHandler
+  ): void {
+    if (transitionEvent.supported && transitionEvent.name && elem) {
+      elem.removeEventListener(
+        transitionEvent.name as keyof HTMLElementEventMap,
+        eventHandler as EventListener
+      );
+      elem.addEventListener(
+        transitionEvent.name as keyof HTMLElementEventMap,
+        eventHandler as EventListener
+      );
     } else {
-      clearTimeout(this.transitionFinishTimeout);
-      this.transitionFinishTimeout = setTimeout(eventHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 300 : 600);
+      if (this.transitionFinishTimeout) {
+        clearTimeout(this.transitionFinishTimeout);
+      }
+
+      this.transitionFinishTimeout = setTimeout(
+        eventHandler,
+        this.props.platform === ANDROID || this.props.platform === VKCOM
+          ? 300
+          : 600
+      );
     }
   }
 
   blurActiveElement(): void {
-    if (typeof this.window !== 'undefined' && this.document.activeElement) {
+    if (typeof this.window !== "undefined" && this.document?.activeElement) {
       (this.document.activeElement as HTMLElement).blur();
     }
   }
 
-  pickPanel(id: string) {
+  pickPanel(id: string | null) {
+    if (id === null) {
+      return undefined;
+    }
     return this.panelNodes[id];
   }
 
   flushTransition(prevPanel: string, isBack: boolean) {
     const activePanel = this.props.activePanel;
 
-    const prevPanelScrolls = [...this.scrolls[prevPanel] || []].slice(0, -1);
-    const newPanelScrolls = [...this.scrolls[activePanel] || []];
+    const prevPanelScrolls = [...(this.scrolls[prevPanel] || [])].slice(0, -1);
+    const newPanelScrolls = [...(this.scrolls[activePanel] || [])];
     const scrollPosition = isBack ? newPanelScrolls.pop() : 0;
     if (isBack) {
       this.scrolls = {
@@ -290,33 +380,45 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
       };
     }
 
-    this.setState({
-      prevPanel: null,
-      nextPanel: null,
-      visiblePanels: [activePanel],
-      activePanel: activePanel,
-      animated: false,
-      isBack: undefined,
-    }, () => {
-      this.props.scroll.scrollTo(0, isBack ? scrollPosition : 0);
-      this.props.onTransition && this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
-    });
+    this.setState(
+      {
+        prevPanel: null,
+        nextPanel: null,
+        visiblePanels: [activePanel],
+        activePanel: activePanel,
+        animated: false,
+        isBack: undefined,
+      },
+      () => {
+        this.props.scroll?.scrollTo(0, isBack ? scrollPosition : 0);
+        this.props.onTransition &&
+          this.props.onTransition({ isBack, from: prevPanel, to: activePanel });
+      }
+    );
   }
 
   transitionEndHandler = (e?: React.AnimationEvent): void => {
-    if (!e || [
-      'vkui-animation-ios-next-forward',
-      'vkui-animation-ios-prev-back',
-      'vkui-animation-view-next-forward',
-      'vkui-animation-view-prev-back',
-    ].includes(e.animationName)) {
-      this.flushTransition(this.state.prevPanel, this.state.isBack);
+    if (
+      (!e ||
+        [
+          "vkui-animation-ios-next-forward",
+          "vkui-animation-ios-prev-back",
+          "vkui-animation-view-next-forward",
+          "vkui-animation-view-prev-back",
+        ].includes(e.animationName)) &&
+      this.state.prevPanel !== null
+    ) {
+      this.flushTransition(this.state.prevPanel, Boolean(this.state.isBack));
     }
   };
 
   swipingBackTransitionEndHandler = (e?: TransitionEvent): void => {
     // indexOf because of vendor prefixes in old browsers
-    if (!e || e.propertyName.includes('transform') && e.target === this.pickPanel(this.state.swipeBackNextPanel)) {
+    if (
+      !e ||
+      (e.propertyName.includes("transform") &&
+        e.target === this.pickPanel(this.state.swipeBackNextPanel))
+    ) {
       switch (this.state.swipeBackResult) {
         case SwipeBackResults.fail:
           this.onSwipeBackCancel();
@@ -344,40 +446,61 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
   }
 
   onMoveX = (e: TouchEvent): void => {
-    if (swipeBackExcluded(e)) {
+    if (swipeBackExcluded(e) || !this.window) {
       return;
     }
 
     const { platform, configProvider } = this.props;
 
-    if (platform === IOS && !configProvider.isWebView && (e.startX <= 70 || e.startX >= this.window.innerWidth - 70) && !this.state.browserSwipe) {
+    if (
+      platform === IOS &&
+      !configProvider?.isWebView &&
+      (e.startX <= 70 || e.startX >= this.window.innerWidth - 70) &&
+      !this.state.browserSwipe
+    ) {
       this.setState({ browserSwipe: true });
     }
 
-    if (platform === IOS && configProvider.isWebView && this.props.onSwipeBack) {
+    if (
+      platform === IOS &&
+      configProvider?.isWebView &&
+      this.props.onSwipeBack
+    ) {
       if (this.state.animated && e.startX <= 70) {
         return;
       }
 
-      if (e.startX <= 70 && !this.state.swipingBack && this.props.history.length > 1) {
-        const prevScrolls = this.scrolls[this.state.activePanel] || [];
-        this.scrolls = {
-          ...this.scrolls,
-          [this.state.activePanel]: [...prevScrolls, this.props.scroll.getScroll().y],
-        };
+      if (
+        e.startX <= 70 &&
+        !this.state.swipingBack &&
+        (this.props.history?.length ?? 0) > 1
+      ) {
+        if (this.state.activePanel !== null) {
+          const prevScrolls = this.scrolls[this.state.activePanel] || [];
+          this.scrolls = {
+            ...this.scrolls,
+            [this.state.activePanel]: [
+              ...prevScrolls,
+              this.props.scroll?.getScroll().y,
+            ],
+          };
+        }
 
         this.setState({
           swipingBack: true,
           swipebackStartX: e.startX,
           swipeBackPrevPanel: this.state.activePanel,
-          swipeBackNextPanel: this.props.history.slice(-2)[0],
+          swipeBackNextPanel: this.props.history!.slice(-2)[0],
         });
       }
       if (this.state.swipingBack) {
         let swipeBackShift;
         if (e.shiftX < 0) {
           swipeBackShift = 0;
-        } else if (e.shiftX > this.window.innerWidth - this.state.swipebackStartX) {
+        } else if (
+          e.shiftX >
+          this.window.innerWidth - this.state.swipebackStartX
+        ) {
           swipeBackShift = this.window.innerWidth;
         } else {
           swipeBackShift = e.shiftX;
@@ -388,13 +511,17 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
   };
 
   onEnd = (e: TouchEvent): void => {
-    if (this.state.swipingBack) {
-      const speed = this.state.swipeBackShift / e.duration * 1000;
+    if (this.state.swipingBack && this.window) {
+      const speed = (this.state.swipeBackShift / e.duration) * 1000;
       if (this.state.swipeBackShift === 0) {
         this.onSwipeBackCancel();
       } else if (this.state.swipeBackShift >= this.window.innerWidth) {
         this.onSwipeBackSuccess();
-      } else if (speed > 250 || this.state.swipebackStartX + this.state.swipeBackShift > this.window.innerWidth / 2) {
+      } else if (
+        speed > 250 ||
+        this.state.swipebackStartX + this.state.swipeBackShift >
+          this.window.innerWidth / 2
+      ) {
         this.setState({ swipeBackResult: SwipeBackResults.success });
       } else {
         this.setState({ swipeBackResult: SwipeBackResults.fail });
@@ -402,24 +529,30 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
     }
   };
 
-  calcPanelSwipeStyles(panelId: string): React.CSSProperties {
-    if (!canUseDOM) {
+  calcPanelSwipeStyles(panelId: string | undefined): React.CSSProperties {
+    if (!canUseDOM || !this.window) {
       return {};
     }
 
     const isPrev = panelId === this.state.swipeBackPrevPanel;
     const isNext = panelId === this.state.swipeBackNextPanel;
 
-    if (!isPrev && !isNext || this.state.swipeBackResult) {
+    if ((!isPrev && !isNext) || this.state.swipeBackResult) {
       return {};
     }
 
     let prevPanelTranslate = `${this.state.swipeBackShift}px`;
-    let nextPanelTranslate = `${-50 + this.state.swipeBackShift * 100 / this.window.innerWidth / 2}%`;
-    let prevPanelShadow = 0.3 * (this.window.innerWidth - this.state.swipeBackShift) / this.window.innerWidth;
+    let nextPanelTranslate = `${
+      -50 + (this.state.swipeBackShift * 100) / this.window.innerWidth / 2
+    }%`;
+    let prevPanelShadow =
+      (0.3 * (this.window.innerWidth - this.state.swipeBackShift)) /
+      this.window.innerWidth;
 
     if (this.state.swipeBackResult) {
-      return isPrev ? { boxShadow: `-2px 0 12px rgba(0, 0, 0, ${prevPanelShadow})` } : {};
+      return isPrev
+        ? { boxShadow: `-2px 0 12px rgba(0, 0, 0, ${prevPanelShadow})` }
+        : {};
     }
 
     if (isNext) {
@@ -441,15 +574,35 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
 
   render() {
     const {
-      popout, modal, platform,
-      activePanel: _1, splitCol, configProvider, history, id, nav,
-      onTransition, onSwipeBack, onSwipeBackStart, onSwipeBackCancel,
-      window, document, scroll, isBackCheck,
+      popout,
+      modal,
+      platform,
+      activePanel: _1,
+      splitCol,
+      configProvider,
+      history,
+      id,
+      nav,
+      onTransition,
+      onSwipeBack,
+      onSwipeBackStart,
+      onSwipeBackCancel,
+      window,
+      document,
+      scroll,
+      isBackCheck,
       ...restProps
     } = this.props;
     const {
-      prevPanel, nextPanel, activePanel, isBack, animated,
-      swipeBackPrevPanel, swipeBackNextPanel, swipeBackResult, swipingBack,
+      prevPanel,
+      nextPanel,
+      activePanel,
+      isBack,
+      animated,
+      swipeBackPrevPanel,
+      swipeBackNextPanel,
+      swipeBackResult,
+      swipingBack,
     } = this.state;
 
     const hasPopout = !!popout;
@@ -459,14 +612,19 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
       .filter((panel) => {
         const panelId = getNavId(panel.props, warn);
 
-        return this.state.visiblePanels.includes(panelId) ||
+        return (
+          (panelId !== undefined &&
+            this.state.visiblePanels.includes(panelId)) ||
           panelId === swipeBackPrevPanel ||
-          panelId === swipeBackNextPanel;
+          panelId === swipeBackNextPanel
+        );
       })
       .sort((panel) => {
         const panelId = getNavId(panel.props, warn);
-        const isPrevPanel = panelId === prevPanel || panelId === swipeBackPrevPanel;
-        const isNextPanel = panelId === nextPanel || panelId === swipeBackNextPanel;
+        const isPrevPanel =
+          panelId === prevPanel || panelId === swipeBackPrevPanel;
+        const isNextPanel =
+          panelId === nextPanel || panelId === swipeBackNextPanel;
 
         if (isNextPanel) {
           return swipingBack || this.state.isBack ? -1 : 1;
@@ -482,46 +640,66 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
     const disableAnimation = this.shouldDisableTransitionMotion();
 
     const modifiers = {
-      'View--animated': !disableAnimation && this.state.animated,
-      'View--swiping-back': !disableAnimation && this.state.swipingBack,
-      'View--no-motion': disableAnimation,
+      "View--animated": !disableAnimation && this.state.animated,
+      "View--swiping-back": !disableAnimation && this.state.swipingBack,
+      "View--no-motion": disableAnimation,
     };
 
     return (
       <Touch
         Component="section"
         {...restProps}
-        vkuiClass={classNames(getClassName('View', platform), modifiers)}
+        vkuiClass={classNames(getClassName("View", platform), modifiers)}
         onMoveX={this.onMoveX}
         onEnd={this.onEnd}
       >
         <div vkuiClass="View__panels">
           {panels.map((panel: React.ReactElement) => {
             const panelId = getNavId(panel.props, warn);
-            const isPrev = panelId === prevPanel || panelId === swipeBackPrevPanel;
-            const compensateScroll = isPrev || panelId === swipeBackNextPanel || panelId === nextPanel && isBack;
-            const isTransitionTarget = animated && panelId === (isBack ? prevPanel : nextPanel);
-            const scrollList = this.scrolls[panelId] || [];
+            const isPrev =
+              panelId === prevPanel || panelId === swipeBackPrevPanel;
+            const compensateScroll =
+              isPrev ||
+              panelId === swipeBackNextPanel ||
+              (panelId === nextPanel && isBack);
+            const isTransitionTarget =
+              animated && panelId === (isBack ? prevPanel : nextPanel);
+            const scrollList = (panelId && this.scrolls[panelId]) || [];
             const scroll = scrollList[scrollList.length - 1] || 0;
 
             return (
               <div
-                vkuiClass={classNames('View__panel', {
-                  'View__panel--active': panelId === activePanel,
-                  'View__panel--prev': panelId === prevPanel,
-                  'View__panel--next': panelId === nextPanel,
-                  'View__panel--swipe-back-prev': panelId === swipeBackPrevPanel,
-                  'View__panel--swipe-back-next': panelId === swipeBackNextPanel,
-                  'View__panel--swipe-back-success': swipeBackResult === SwipeBackResults.success,
-                  'View__panel--swipe-back-failed': swipeBackResult === SwipeBackResults.fail,
+                vkuiClass={classNames("View__panel", {
+                  "View__panel--active": panelId === activePanel,
+                  "View__panel--prev": panelId === prevPanel,
+                  "View__panel--next": panelId === nextPanel,
+                  "View__panel--swipe-back-prev":
+                    panelId === swipeBackPrevPanel,
+                  "View__panel--swipe-back-next":
+                    panelId === swipeBackNextPanel,
+                  "View__panel--swipe-back-success":
+                    swipeBackResult === SwipeBackResults.success,
+                  "View__panel--swipe-back-failed":
+                    swipeBackResult === SwipeBackResults.fail,
                 })}
-                onAnimationEnd={isTransitionTarget ? this.transitionEndHandler : null}
-                ref={(el) => this.panelNodes[panelId] = el}
+                onAnimationEnd={
+                  isTransitionTarget ? this.transitionEndHandler : undefined
+                }
+                ref={(el) =>
+                  panelId !== undefined && (this.panelNodes[panelId] = el)
+                }
                 style={this.calcPanelSwipeStyles(panelId)}
                 key={panelId}
               >
-                <div vkuiClass="View__panel-in" style={{ marginTop: compensateScroll ? -scroll : null }}>
-                  <NavTransitionProvider entering={panelId === nextPanel || panelId === swipeBackNextPanel}>
+                <div
+                  vkuiClass="View__panel-in"
+                  style={{ marginTop: compensateScroll ? -scroll : undefined }}
+                >
+                  <NavTransitionProvider
+                    entering={
+                      panelId === nextPanel || panelId === swipeBackNextPanel
+                    }
+                  >
                     {panel}
                   </NavTransitionProvider>
                 </div>
@@ -538,9 +716,17 @@ class ViewInfinite extends React.Component<ViewInfiniteProps & DOMProps, ViewInf
   }
 }
 
-export default withContext(withContext(
+// eslint-disable-next-line import/no-default-export
+export default withContext(
   withContext(
-    withPlatform(withDOM<ViewInfiniteProps>(ViewInfinite)),
-    SplitColContext, 'splitCol'),
-  ConfigProviderContext, 'configProvider'),
-ScrollContext, 'scroll');
+    withContext(
+      withPlatform(withDOM<ViewInfiniteProps>(ViewInfinite)),
+      SplitColContext,
+      "splitCol"
+    ),
+    ConfigProviderContext,
+    "configProvider"
+  ),
+  ScrollContext,
+  "scroll"
+);