@vkontakte/vkui 4.34.0 → 4.35.0

package/src/components/View/View.tsx

@@ -1,26 +1,23 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import { transitionEvent, animationEvent } from "../../lib/supportEvents";
+import { animationEvent } from "../../lib/supportEvents";
 import { IOS } 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 { useConfigProvider } from "../ConfigProvider/ConfigProviderContext";
+import { useSplitCol } from "../SplitCol/SplitCol";
 import { AppRootPortal } from "../AppRoot/AppRootPortal";
-import { canUseDOM, withDOM, DOMProps } from "../../lib/dom";
-import {
-  ScrollContext,
-  ScrollContextInterface,
-} from "../AppRoot/ScrollContext";
+import { canUseDOM, useDOM, blurActiveElement } from "../../lib/dom";
+import { useScroll } from "../AppRoot/ScrollContext";
 import { NavTransitionProvider } from "../NavTransitionContext/NavTransitionContext";
 import { getNavId, NavIdProps } from "../../lib/getNavId";
 import { warnOnce } from "../../lib/warnOnce";
+import { usePlatform } from "../../hooks/usePlatform";
 import { swipeBackExcluded } from "./utils";
+import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
+import { useTimeout } from "../../hooks/useTimeout";
+import { usePrevious } from "../../hooks/usePrevious";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { noop } from "../../lib/utils";
 import "./View.css";
 
 enum SwipeBackResults {
@@ -36,13 +33,10 @@ interface ViewsScrolls {
   [index: string]: Scrolls;
 }
 
-type TransitionEventHandler = (e?: TransitionEvent) => void;
-
 export let scrollsCache: ViewsScrolls = {};
 
 export interface ViewProps
   extends React.HTMLAttributes<HTMLElement>,
-    HasPlatform,
     NavIdProps {
   activePanel: string;
   /**
@@ -71,18 +65,6 @@ export interface ViewProps
    */
   onSwipeBackCancel?(): void;
   history?: string[];
-  /**
-   * @ignore
-   */
-  splitCol?: SplitColContextProps;
-  /**
-   * @ignore
-   */
-  configProvider?: ConfigProviderContextInterface;
-  /**
-   * @ignore
-   */
-  scroll?: ScrollContextInterface;
 }
 
 export interface ViewState {
@@ -106,410 +88,294 @@ export interface ViewState {
 
 const warn = warnOnce("View");
 
-class ViewComponent extends React.Component<ViewProps & DOMProps, ViewState> {
-  constructor(props: ViewProps) {
-    super(props);
-
-    this.state = {
-      animated: false,
-
-      visiblePanels: [props.activePanel],
-      activePanel: props.activePanel,
-      isBack: undefined,
-      prevPanel: null,
-      nextPanel: null,
-
-      swipingBack: false,
-      swipeBackStartX: 0,
-      swipeBackShift: 0,
-      swipeBackNextPanel: null,
-      swipeBackPrevPanel: null,
-      swipeBackResult: null,
-
-      browserSwipe: false,
-    };
-  }
-
-  static defaultProps: Partial<ViewProps> = {
-    history: [],
-  };
-
-  private readonly scrolls = scrollsCache[getNavId(this.props) as string] || {};
-  private transitionFinishTimeout: number | undefined = undefined;
-  private animationFinishTimeout: number | undefined = undefined;
-
-  get document() {
-    return this.props.document;
-  }
-
-  get window() {
-    return this.props.window;
-  }
-
-  get panels() {
-    return React.Children.toArray(this.props.children) as React.ReactElement[];
-  }
-
-  panelNodes: { [id: string]: HTMLDivElement | null } = {};
-
-  componentDidMount() {
-    if (process.env.NODE_ENV === "development") {
-      const { popout, modal } = this.props;
-      popout &&
-        warn(
-          "Свойство popout устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
-        );
-      modal &&
-        warn(
-          "Свойство modal устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
-        );
-    }
-  }
-
-  componentWillUnmount() {
-    const id = getNavId(this.props);
-    if (id) {
-      scrollsCache[id] = this.scrolls;
-    }
-    if (this.animationFinishTimeout) {
-      clearTimeout(this.animationFinishTimeout);
-    }
-  }
-
-  componentDidUpdate(prevProps: ViewProps, prevState: ViewState) {
-    this.props.popout && !prevProps.popout && this.blurActiveElement();
-    this.props.modal && !prevProps.modal && this.blurActiveElement();
-
-    // Нужен переход
-    if (
-      prevProps.activePanel !== this.props.activePanel &&
-      !prevState.swipingBack &&
-      !prevState.browserSwipe
-    ) {
-      const firstLayerId = this.panels
-        .map((panel) => getNavId(panel.props, warn))
-        .find(
-          (id) => id === prevProps.activePanel || id === this.props.activePanel
-        );
-
-      const isBack = firstLayerId === this.props.activePanel;
-      this.scrolls[prevProps.activePanel] = this.props.scroll?.getScroll().y;
-
-      if (this.shouldDisableTransitionMotion()) {
-        this.flushTransition(prevProps.activePanel, isBack);
-      } else {
-        this.blurActiveElement();
-
-        this.setState({
-          visiblePanels: [prevProps.activePanel, this.props.activePanel],
-          prevPanel: prevProps.activePanel,
-          nextPanel: this.props.activePanel,
-          activePanel: null,
-          animated: true,
-          isBack,
-        });
-
-        // Фолбек анимации перехода
-        if (!animationEvent.supported) {
-          if (this.animationFinishTimeout) {
-            clearTimeout(this.animationFinishTimeout);
-          }
-          this.animationFinishTimeout = setTimeout(
-            this.transitionEndHandler,
-            this.props.platform === IOS ? 600 : 300
-          );
-        }
-      }
-    }
-
-    // Закончилась анимация свайпа назад
-    if (
-      prevProps.activePanel !== this.props.activePanel &&
-      prevState.swipingBack
-    ) {
-      const nextPanel = this.props.activePanel;
-      const prevPanel = prevProps.activePanel;
-      if (prevState.swipeBackPrevPanel !== null) {
-        this.scrolls[prevState.swipeBackPrevPanel] = 0;
-      }
-      this.setState(
-        {
-          swipeBackPrevPanel: null,
-          swipeBackNextPanel: null,
-          swipingBack: false,
-          swipeBackResult: null,
-          swipeBackStartX: 0,
-          swipeBackShift: 0,
-          activePanel: nextPanel,
-          visiblePanels: [nextPanel],
-        },
-        () => {
-          if (this.state.activePanel !== null) {
-            this.props.scroll?.scrollTo(
-              0,
-              this.scrolls[this.state.activePanel]
-            );
-          }
-          prevProps.onTransition &&
-            prevProps.onTransition({
-              isBack: true,
-              from: prevPanel,
-              to: nextPanel,
-            });
-        }
+/**
+ * @see https://vkcom.github.io/VKUI/#/View
+ */
+export const View = ({
+  popout,
+  modal,
+  activePanel: activePanelProp,
+  history,
+  nav,
+  onTransition,
+  onSwipeBack,
+  onSwipeBackStart,
+  onSwipeBackCancel: onSwipeBackCancelProp,
+  children,
+
+  ...restProps
+}: ViewProps) => {
+  if (process.env.NODE_ENV === "development") {
+    popout &&
+      warn(
+        "Свойство popout устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
       );
-    }
-
-    // Начался свайп назад
-    if (!prevState.swipingBack && this.state.swipingBack) {
-      this.props.onSwipeBackStart && this.props.onSwipeBackStart();
-    }
-
-    // Началась анимация завершения свайпа назад.
-    if (!prevState.swipeBackResult && this.state.swipeBackResult) {
-      this.waitTransitionFinish(
-        this.pickPanel(this.state.swipeBackNextPanel),
-        this.swipingBackTransitionEndHandler
+    modal &&
+      warn(
+        "Свойство modal устарело и будет удалено в 5.0.0. Используйте одноименное свойство у SplitLayout."
       );
-    }
+  }
 
-    // Если свайп назад отменился (когда пользователь недостаточно сильно свайпнул)
-    if (
-      prevState.swipeBackResult === SwipeBackResults.fail &&
-      !this.state.swipeBackResult &&
-      this.state.activePanel !== null
-    ) {
-      this.props.scroll?.scrollTo(0, this.scrolls[this.state.activePanel]);
-    }
+  const scrolls = React.useRef(
+    scrollsCache[getNavId({ nav, id: restProps.id }) as string] || {}
+  );
+  const afterTransition = React.useRef(noop);
 
-    // Закончился Safari свайп
-    if (
-      prevProps.activePanel !== this.props.activePanel &&
-      this.state.browserSwipe
-    ) {
-      this.setState({
-        browserSwipe: false,
-        nextPanel: null,
-        prevPanel: null,
-        animated: false,
-        visiblePanels: [this.props.activePanel],
-        activePanel: this.props.activePanel,
-      });
+  React.useEffect(() => () => {
+    const id = getNavId({ nav, id: restProps.id });
+    if (id) {
+      scrollsCache[id] = scrolls.current;
     }
-  }
+  });
+
+  const panelNodes = React.useRef<{ [id: string]: HTMLDivElement | null }>({});
+
+  const { window, document } = useDOM();
+  const scroll = useScroll();
+  const configProvider = useConfigProvider();
+  const splitCol = useSplitCol();
+  const platform = usePlatform();
+
+  const [animated, setAnimated] = React.useState(false);
+
+  const [visiblePanels, setVisiblePanels] = React.useState([activePanelProp]);
+  const [activePanel, setActivePanel] = React.useState<string | null>(
+    activePanelProp
+  );
+  const [isBack, setIsBack] = React.useState<boolean | undefined>(undefined);
+  const [prevPanel, setPrevPanel] = React.useState<string | null>(null);
+  const [nextPanel, setNextPanel] = React.useState<string | null>(null);
+
+  const [swipingBack, setSwipingBack] = React.useState<boolean>(false);
+  const [swipeBackStartX, setSwipeBackStartX] = React.useState<number>(0);
+  const [swipeBackShift, setSwipeBackShift] = React.useState<number>(0);
+  const [swipeBackNextPanel, setSwipeBackNextPanel] = React.useState<
+    string | null
+  >(null);
+  const [swipeBackPrevPanel, setSwipeBackPrevPanel] = React.useState<
+    string | null
+  >(null);
+  const [swipeBackResult, setSwipeBackResult] =
+    React.useState<SwipeBackResults | null>(null);
+
+  const [browserSwipe, setBrowserSwipe] = React.useState(false);
+
+  const prevActivePanel = usePrevious(activePanelProp);
+  const prevSwipingBack = usePrevious(swipingBack);
+  const prevBrowserSwipe = usePrevious(browserSwipe);
+  const prevSwipeBackResult = usePrevious(swipeBackResult);
+  const prevSwipeBackPrevPanel = usePrevious(swipeBackPrevPanel);
+  const prevOnTransition = usePrevious(onTransition);
+
+  const hasPopout = !!popout;
+  const hasModal = !!modal;
+
+  const panels = (
+    React.Children.toArray(children) as React.ReactElement[]
+  ).filter((panel: React.ReactElement) => {
+    const panelId = getNavId(panel.props, warn);
 
-  shouldDisableTransitionMotion(): boolean {
     return (
-      this.props.configProvider?.transitionMotionEnabled === false ||
-      !this.props.splitCol?.animate
+      (panelId !== undefined && visiblePanels.includes(panelId)) ||
+      panelId === swipeBackPrevPanel ||
+      panelId === swipeBackNextPanel
     );
-  }
-
-  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 {
-      if (this.transitionFinishTimeout) {
-        clearTimeout(this.transitionFinishTimeout);
-      }
-      this.transitionFinishTimeout = setTimeout(
-        eventHandler,
-        this.props.platform === IOS ? 600 : 300
-      );
-    }
-  }
+  });
 
-  blurActiveElement(): void {
-    if (typeof this.window !== "undefined" && this.document?.activeElement) {
-      (this.document.activeElement as HTMLElement).blur();
-    }
-  }
+  const disableAnimation =
+    configProvider?.transitionMotionEnabled === false || !splitCol?.animate;
 
-  pickPanel(id: string | null) {
+  const pickPanel = (id: string | null) => {
     if (id === null) {
-      return undefined;
-    }
-    return this.panelNodes[id];
-  }
-
-  flushTransition(prevPanel: string, isBack: boolean) {
-    const activePanel = this.props.activePanel;
-    if (isBack) {
-      this.scrolls[prevPanel] = 0;
-    }
-    this.setState(
-      {
-        prevPanel: null,
-        nextPanel: null,
-        visiblePanels: [activePanel],
-        activePanel,
-        animated: false,
-        isBack: undefined,
-      },
-      () => {
-        this.props.scroll?.scrollTo(0, isBack ? this.scrolls[activePanel] : 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.state.prevPanel !== null
-    ) {
-      this.flushTransition(this.state.prevPanel, Boolean(this.state.isBack));
+      return null;
     }
+    return panelNodes.current[id];
   };
 
-  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))
-    ) {
-      switch (this.state.swipeBackResult) {
-        case SwipeBackResults.fail:
-          this.onSwipeBackCancel();
-          break;
-        case SwipeBackResults.success:
-          this.onSwipeBackSuccess();
+  const flushTransition = React.useCallback(
+    (prevPanel: string, isBackTransition: boolean) => {
+      if (isBackTransition) {
+        scrolls.current[prevPanel] = 0;
       }
-    }
-  };
+      setPrevPanel(null);
+      setNextPanel(null);
+      setVisiblePanels([activePanelProp]);
+      setActivePanel(activePanelProp);
+      setAnimated(false);
+      setIsBack(undefined);
+
+      afterTransition.current = () => {
+        scroll?.scrollTo(
+          0,
+          isBackTransition ? scrolls.current[activePanelProp] : 0
+        );
+        onTransition &&
+          onTransition({
+            isBack: isBackTransition,
+            from: prevPanel,
+            to: activePanelProp,
+          });
+      };
+    },
+    [activePanelProp, onTransition, scroll]
+  );
 
-  onSwipeBackSuccess(): void {
-    this.props.onSwipeBack && this.props.onSwipeBack();
-  }
+  useIsomorphicLayoutEffect(() => {
+    afterTransition.current();
+    afterTransition.current = noop;
+  }, [afterTransition.current]);
 
-  onSwipeBackCancel(): void {
-    this.props.onSwipeBackCancel && this.props.onSwipeBackCancel();
-    this.setState({
-      swipeBackPrevPanel: null,
-      swipeBackNextPanel: null,
-      swipingBack: false,
-      swipeBackResult: null,
-      swipeBackStartX: 0,
-      swipeBackShift: 0,
-    });
-  }
+  const transitionEndHandler = React.useCallback(
+    (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)) &&
+        prevPanel !== null
+      ) {
+        flushTransition(prevPanel, Boolean(isBack));
+      }
+    },
+    [flushTransition, isBack, prevPanel]
+  );
+
+  const { waitTransitionFinish } = useWaitTransitionFinish();
+  const animationFinishTimeout = useTimeout(
+    transitionEndHandler,
+    platform === IOS ? 600 : 300
+  );
+
+  const onSwipeBackSuccess = React.useCallback(() => {
+    onSwipeBack && onSwipeBack();
+  }, [onSwipeBack]);
+
+  const onSwipeBackCancel = React.useCallback(() => {
+    onSwipeBackCancelProp && onSwipeBackCancelProp();
+    setSwipeBackPrevPanel(null);
+    setSwipeBackNextPanel(null);
+    setSwipingBack(false);
+    setSwipeBackResult(null);
+    setSwipeBackStartX(0);
+    setSwipeBackShift(0);
+  }, [onSwipeBackCancelProp]);
+
+  const swipingBackTransitionEndHandler = React.useCallback(
+    (e?: TransitionEvent): void => {
+      // indexOf because of vendor prefixes in old browsers
+      if (
+        !e ||
+        (e?.propertyName.includes("transform") &&
+          e?.target === pickPanel(swipeBackNextPanel))
+      ) {
+        switch (swipeBackResult) {
+          case SwipeBackResults.fail:
+            onSwipeBackCancel();
+            break;
+          case SwipeBackResults.success:
+            onSwipeBackSuccess();
+        }
+      }
+    },
+    [onSwipeBackCancel, onSwipeBackSuccess, swipeBackNextPanel, swipeBackResult]
+  );
 
-  onMoveX = (e: TouchEvent): void => {
+  const onMoveX = (e: TouchEvent): void => {
     if (swipeBackExcluded(e)) {
       return;
     }
 
-    const { platform, configProvider } = this.props;
-
     if (
       platform === IOS &&
       !configProvider?.isWebView &&
-      (e.startX <= 70 || e.startX >= this.window!.innerWidth - 70) &&
-      !this.state.browserSwipe
+      (e.startX <= 70 || e.startX >= window!.innerWidth - 70) &&
+      !browserSwipe
     ) {
-      this.setState({ browserSwipe: true });
+      setBrowserSwipe(true);
     }
 
-    if (
-      platform === IOS &&
-      configProvider?.isWebView &&
-      this.props.onSwipeBack
-    ) {
-      if ((this.state.animated && e.startX <= 70) || !this.window) {
+    if (platform === IOS && configProvider?.isWebView && onSwipeBack) {
+      if ((animated && e.startX <= 70) || !window) {
         return;
       }
 
-      if (
-        e.startX <= 70 &&
-        !this.state.swipingBack &&
-        (this.props.history?.length ?? 0) > 1
-      ) {
-        if (this.state.activePanel !== null) {
-          this.scrolls[this.state.activePanel] =
-            this.props.scroll?.getScroll().y;
+      if (e.startX <= 70 && !swipingBack && history && history.length > 1) {
+        if (activePanel !== null) {
+          scrolls.current[activePanel] = scroll?.getScroll().y;
         }
-        this.setState({
-          swipingBack: true,
-          swipeBackStartX: e.startX,
-          swipeBackPrevPanel: this.state.activePanel,
-          swipeBackNextPanel: this.props.history!.slice(-2)[0],
-        });
+
+        setSwipingBack(true);
+        setSwipeBackStartX(e.startX);
+        setSwipeBackPrevPanel(activePanel);
+        setSwipeBackNextPanel(history.slice(-2)[0]);
       }
-      if (this.state.swipingBack) {
+      if (swipingBack) {
         let swipeBackShift = 0;
         if (e.shiftX < 0) {
           swipeBackShift = 0;
-        } else if (
-          e.shiftX >
-          this.window.innerWidth - this.state.swipeBackStartX
-        ) {
-          swipeBackShift = this.window?.innerWidth;
+        } else if (e.shiftX > window.innerWidth - swipeBackStartX) {
+          swipeBackShift = window?.innerWidth;
         } else {
           swipeBackShift = e.shiftX;
         }
-        this.setState({ swipeBackShift });
+        setSwipeBackShift(swipeBackShift);
       }
     }
   };
 
-  onEnd = (e: TouchEvent): void => {
-    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 ?? 0)) {
-        this.onSwipeBackSuccess();
-      } 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 });
+  const onEnd = React.useCallback(
+    (e: TouchEvent): void => {
+      if (swipingBack && window) {
+        const speed = (swipeBackShift / e.duration) * 1000;
+        if (swipeBackShift === 0) {
+          onSwipeBackCancel();
+        } else if (swipeBackShift >= (window?.innerWidth ?? 0)) {
+          onSwipeBackSuccess();
+        } else if (
+          speed > 250 ||
+          swipeBackStartX + swipeBackShift > window.innerWidth / 2
+        ) {
+          setSwipeBackResult(SwipeBackResults.success);
+        } else {
+          setSwipeBackResult(SwipeBackResults.fail);
+        }
       }
-    }
-  };
+    },
+    [
+      onSwipeBackCancel,
+      onSwipeBackSuccess,
+      swipeBackShift,
+      swipeBackStartX,
+      swipingBack,
+      window,
+    ]
+  );
 
-  calcPanelSwipeStyles(panelId: string | undefined): React.CSSProperties {
-    if (!canUseDOM || !this.window) {
+  const calcPanelSwipeStyles = (
+    panelId: string | undefined
+  ): React.CSSProperties => {
+    if (!canUseDOM || !window) {
       return {};
     }
 
-    const isPrev = panelId === this.state.swipeBackPrevPanel;
-    const isNext = panelId === this.state.swipeBackNextPanel;
+    const isPrev = panelId === swipeBackPrevPanel;
+    const isNext = panelId === swipeBackNextPanel;
 
-    if ((!isPrev && !isNext) || this.state.swipeBackResult) {
+    if ((!isPrev && !isNext) || swipeBackResult) {
       return {};
     }
 
-    let prevPanelTranslate = `${this.state.swipeBackShift}px`;
+    let prevPanelTranslate = `${swipeBackShift}px`;
     let nextPanelTranslate = `${
-      -50 + (this.state.swipeBackShift * 100) / this.window.innerWidth / 2
+      -50 + (swipeBackShift * 100) / window.innerWidth / 2
     }%`;
     let prevPanelShadow =
-      (0.3 * (this.window.innerWidth - this.state.swipeBackShift)) /
-      this.window.innerWidth;
+      (0.3 * (window.innerWidth - swipeBackShift)) / window.innerWidth;
 
-    if (this.state.swipeBackResult) {
+    if (swipeBackResult) {
       return isPrev
         ? { boxShadow: `-2px 0 12px rgba(0, 0, 0, ${prevPanelShadow})` }
         : {};
@@ -530,148 +396,219 @@ class ViewComponent extends React.Component<ViewProps & DOMProps, ViewState> {
     }
 
     return {};
-  }
+  };
 
-  render() {
-    const {
-      popout,
-      modal,
-      platform,
-      activePanel: _1,
-      splitCol,
-      configProvider,
-      history,
-      nav,
-      onTransition,
-      onSwipeBack,
-      onSwipeBackStart,
-      onSwipeBackCancel,
-      window,
-      document,
-      scroll,
-      ...restProps
-    } = this.props;
-    const {
-      prevPanel,
-      nextPanel,
-      activePanel,
-      swipeBackPrevPanel,
-      swipeBackNextPanel,
-      swipeBackResult,
-      isBack,
-      animated,
-    } = this.state;
-
-    const hasPopout = !!popout;
-    const hasModal = !!modal;
-
-    const panels = this.panels.filter((panel: React.ReactElement) => {
-      const panelId = getNavId(panel.props, warn);
-
-      return (
-        (panelId !== undefined && this.state.visiblePanels.includes(panelId)) ||
-        panelId === swipeBackPrevPanel ||
-        panelId === swipeBackNextPanel
+  React.useEffect(() => {
+    popout && blurActiveElement(document);
+  }, [document, popout]);
+
+  React.useEffect(() => {
+    modal && blurActiveElement(document);
+  }, [document, modal]);
+
+  React.useEffect(() => {
+    // Нужен переход
+    if (
+      prevActivePanel &&
+      prevActivePanel !== activePanelProp &&
+      !prevSwipingBack &&
+      !prevBrowserSwipe
+    ) {
+      const firstLayerId = (
+        React.Children.toArray(children) as React.ReactElement[]
+      )
+        .map((panel) => getNavId(panel.props, warn))
+        .find((id) => id === prevActivePanel || id === activePanelProp);
+
+      const isBackTransition = firstLayerId === activePanelProp;
+      scrolls.current[prevActivePanel] = scroll?.getScroll().y;
+
+      if (disableAnimation) {
+        flushTransition(prevActivePanel, isBackTransition);
+      } else {
+        blurActiveElement(document);
+
+        setVisiblePanels([prevActivePanel, activePanelProp]);
+        setPrevPanel(prevActivePanel);
+        setNextPanel(activePanelProp);
+        setActivePanel(null);
+        setAnimated(true);
+        setIsBack(isBackTransition);
+
+        // Фолбек анимации перехода
+        if (!animationEvent.supported) {
+          animationFinishTimeout.set();
+        }
+      }
+    }
+
+    // Закончилась анимация свайпа назад
+    if (
+      prevActivePanel &&
+      prevActivePanel !== activePanelProp &&
+      prevSwipingBack
+    ) {
+      const nextPanel = activePanelProp;
+      const prevPanel = prevActivePanel;
+      if (prevSwipeBackPrevPanel) {
+        scrolls.current[prevSwipeBackPrevPanel] = 0;
+      }
+
+      setSwipeBackPrevPanel(null);
+      setSwipeBackNextPanel(null);
+      setSwipingBack(false);
+      setSwipeBackResult(null);
+      setSwipeBackStartX(0);
+      setSwipeBackShift(0);
+      setActivePanel(nextPanel);
+      setVisiblePanels([nextPanel]);
+
+      afterTransition.current = () => {
+        if (nextPanel !== null) {
+          scroll?.scrollTo(0, scrolls.current[nextPanel]);
+        }
+        prevOnTransition &&
+          prevOnTransition({
+            isBack: true,
+            from: prevPanel,
+            to: nextPanel,
+          });
+      };
+    }
+
+    // Начался свайп назад
+    if (!prevSwipingBack && swipingBack) {
+      onSwipeBackStart && onSwipeBackStart();
+    }
+
+    // Началась анимация завершения свайпа назад.
+    if (!prevSwipeBackResult && swipeBackResult) {
+      waitTransitionFinish(
+        pickPanel(swipeBackNextPanel),
+        swipingBackTransitionEndHandler,
+        platform === IOS ? 600 : 300
       );
-    });
+    }
 
-    const disableAnimation = this.shouldDisableTransitionMotion();
+    // Если свайп назад отменился (когда пользователь недостаточно сильно свайпнул)
+    if (
+      prevSwipeBackResult === SwipeBackResults.fail &&
+      !swipeBackResult &&
+      activePanel !== null
+    ) {
+      scroll?.scrollTo(0, scrolls.current[activePanel]);
+    }
 
-    return (
-      <Touch
-        Component="section"
-        {...restProps}
-        vkuiClass={classNames(
-          "View",
-          platform === IOS && "View--ios",
-          !disableAnimation && animated && "View--animated",
-          !disableAnimation && this.state.swipingBack && "View--swiping-back",
-          disableAnimation && "View--no-motion"
-        )}
-        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 isTransitionTarget =
-              animated && panelId === (isBack ? prevPanel : nextPanel);
-            const compensateScroll =
-              isPrev ||
-              panelId === swipeBackNextPanel ||
-              (panelId === nextPanel && isBack);
-
-            return (
+    // Закончился Safari свайп
+    if (prevActivePanel !== activePanelProp && browserSwipe) {
+      setBrowserSwipe(false);
+      setNextPanel(null);
+      setPrevPanel(null);
+      setAnimated(false);
+      setVisiblePanels([activePanelProp]);
+      setActivePanel(activePanelProp);
+    }
+  }, [
+    activePanelProp,
+    activePanel,
+    animationFinishTimeout,
+    browserSwipe,
+    children,
+    disableAnimation,
+    document,
+    flushTransition,
+    onSwipeBackStart,
+    panels,
+    platform,
+    prevActivePanel,
+    prevBrowserSwipe,
+    prevOnTransition,
+    prevSwipeBackPrevPanel,
+    prevSwipeBackResult,
+    prevSwipingBack,
+    scroll,
+    swipeBackNextPanel,
+    swipeBackResult,
+    swipingBack,
+    swipingBackTransitionEndHandler,
+    waitTransitionFinish,
+  ]);
+
+  return (
+    <Touch
+      Component="section"
+      {...restProps}
+      vkuiClass={classNames(
+        "View",
+        platform === IOS && "View--ios",
+        !disableAnimation && animated && "View--animated",
+        !disableAnimation && swipingBack && "View--swiping-back",
+        disableAnimation && "View--no-motion"
+      )}
+      onMoveX={onMoveX}
+      onEnd={onEnd}
+    >
+      <div vkuiClass="View__panels">
+        {panels.map((panel: React.ReactElement) => {
+          const panelId = getNavId(panel.props, warn);
+          const isPrev =
+            panelId === prevPanel || panelId === swipeBackPrevPanel;
+          const isTransitionTarget =
+            animated && panelId === (isBack ? prevPanel : nextPanel);
+          const compensateScroll =
+            isPrev ||
+            panelId === swipeBackNextPanel ||
+            (panelId === nextPanel && isBack);
+
+          return (
+            <div
+              vkuiClass={classNames(
+                "View__panel",
+                panelId === activePanel && "View__panel--active",
+                panelId === prevPanel && "View__panel--prev",
+                panelId === nextPanel && "View__panel--next",
+                panelId === swipeBackPrevPanel &&
+                  "View__panel--swipe-back-prev",
+                panelId === swipeBackNextPanel &&
+                  "View__panel--swipe-back-next",
+                swipeBackResult === SwipeBackResults.success &&
+                  "View__panel--swipe-back-success",
+                swipeBackResult === SwipeBackResults.fail &&
+                  "View__panel--swipe-back-failed"
+              )}
+              onAnimationEnd={
+                isTransitionTarget ? transitionEndHandler : undefined
+              }
+              ref={(el) =>
+                panelId !== undefined && (panelNodes.current[panelId] = el)
+              }
+              style={calcPanelSwipeStyles(panelId)}
+              key={panelId}
+            >
               <div
-                vkuiClass={classNames(
-                  "View__panel",
-                  panelId === activePanel && "View__panel--active",
-                  panelId === prevPanel && "View__panel--prev",
-                  panelId === nextPanel && "View__panel--next",
-                  panelId === swipeBackPrevPanel &&
-                    "View__panel--swipe-back-prev",
-                  panelId === swipeBackNextPanel &&
-                    "View__panel--swipe-back-next",
-                  swipeBackResult === SwipeBackResults.success &&
-                    "View__panel--swipe-back-success",
-                  swipeBackResult === SwipeBackResults.fail &&
-                    "View__panel--swipe-back-failed"
-                )}
-                onAnimationEnd={
-                  isTransitionTarget ? this.transitionEndHandler : undefined
-                }
-                ref={(el) =>
-                  panelId !== undefined && (this.panelNodes[panelId] = el)
-                }
-                style={this.calcPanelSwipeStyles(panelId)}
-                key={panelId}
+                vkuiClass="View__panel-in"
+                style={{
+                  marginTop: compensateScroll
+                    ? -(scrolls.current[panelId as string] ?? 0)
+                    : undefined,
+                }}
               >
-                <div
-                  vkuiClass="View__panel-in"
-                  style={{
-                    marginTop: compensateScroll
-                      ? -(this.scrolls[panelId as string] ?? 0)
-                      : undefined,
-                  }}
+                <NavTransitionProvider
+                  entering={
+                    panelId === nextPanel || panelId === swipeBackNextPanel
+                  }
                 >
-                  <NavTransitionProvider
-                    entering={
-                      panelId === nextPanel || panelId === swipeBackNextPanel
-                    }
-                  >
-                    {panel}
-                  </NavTransitionProvider>
-                </div>
+                  {panel}
+                </NavTransitionProvider>
               </div>
-            );
-          })}
-        </div>
-        <AppRootPortal>
-          {hasPopout && <div vkuiClass="View__popout">{popout}</div>}
-          {hasModal && <div vkuiClass="View__modal">{modal}</div>}
-        </AppRootPortal>
-      </Touch>
-    );
-  }
-}
-
-/**
- * @see https://vkcom.github.io/VKUI/#/View
- */
-export const View = withContext(
-  withContext(
-    withContext(
-      withPlatform(withDOM<ViewProps>(ViewComponent)),
-      SplitColContext,
-      "splitCol"
-    ),
-    ConfigProviderContext,
-    "configProvider"
-  ),
-  ScrollContext,
-  "scroll"
-);
-
-View.displayName = "View";
+            </div>
+          );
+        })}
+      </div>
+      <AppRootPortal>
+        {hasPopout && <div vkuiClass="View__popout">{popout}</div>}
+        {hasModal && <div vkuiClass="View__modal">{modal}</div>}
+      </AppRootPortal>
+    </Touch>
+  );
+};