feat(Root/View): Add a hook to know animation transition direction

packages/vkui/src/components/NavTransitionDirectionContext/NavTransitionDirectionContext.test.tsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { ConfigProvider } from '../ConfigProvider/ConfigProvider';
+import { Panel } from '../Panel/Panel';
+import { Root } from '../Root/Root';
+import { View } from '../View/View';
+import { useNavDirection } from './NavTransitionDirectionContext';
+
+function setup({ withAnimationsMode }: { withAnimationsMode: boolean }) {
+  const TestContent = () => {
+    const direction = useNavDirection();
+    return <span>Direction: {direction || 'undefined'}</span>;
+  };
+
+  const TestComponent = ({
+    activeView,
+    activePanel = 'v2.1',
+  }: {
+    activeView: string;
+    activePanel?: string;
+  }) => {
+    return (
+      <ConfigProvider transitionMotionEnabled={withAnimationsMode}>
+        <Root activeView={activeView}>
+          <View id="v1" key="1" activePanel="v1.1">
+            <Panel id="v1.1">
+              <TestContent />
+            </Panel>
+          </View>
+          <View id="v2" key="2" activePanel={activePanel}>
+            <Panel id="v2.1" key="1">
+              <TestContent />
+            </Panel>
+            <Panel id="v2.2" key="2">
+              <TestContent />
+            </Panel>
+            <Panel id="v2.3" key="3">
+              <TestContent />
+            </Panel>
+          </View>
+          <View id="v3" key="3" activePanel="v3.1">
+            <Panel id="v3.1">
+              <TestContent />
+            </Panel>
+          </View>
+        </Root>
+      </ConfigProvider>
+    );
+  };
+
+  return { TestComponent };
+}
+
+describe('useNavTransition', () => {
+  beforeAll(() => jest.useFakeTimers());
+  afterAll(() => jest.useRealTimers());
+
+  it.each([
+    ['properly detects transition direction without animations', false],
+    ['properly detects transition direction with animations', true],
+  ])('%s', (_name, withAnimationsMode) => {
+    const { TestComponent } = setup({ withAnimationsMode });
+    // transition between views
+    const component = render(<TestComponent activeView="v1" />);
+    expect(screen.queryByText('Direction: undefined')).toBeTruthy();
+
+    component.rerender(<TestComponent activeView="v3" />);
+    expect(screen.queryByText('Direction: forwards')).toBeTruthy();
+
+    component.rerender(<TestComponent activeView="v2" />);
+    expect(screen.queryByText('Direction: backwards')).toBeTruthy();
+
+    component.rerender(<TestComponent activeView="v1" />);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(screen.queryByText('Direction: backwards')).toBeTruthy();
+
+    component.rerender(<TestComponent activeView="v2" />);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(screen.queryByText('Direction: forwards')).toBeTruthy();
+
+    component.rerender(<TestComponent activeView="v3" />);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(screen.queryByText('Direction: forwards')).toBeTruthy();
+
+    // transition between panels
+    component.rerender(<TestComponent activeView="v2" activePanel="v2.1" />);
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect(screen.queryByText('Direction: backwards')).toBeTruthy();
+
+    component.rerender(<TestComponent activeView="v2" activePanel="v2.2" />);
+    expect(screen.queryByText('Direction: forwards')).toBeTruthy();
+
+    component.rerender(<TestComponent activeView="v2" activePanel="v2.1" />);
+    expect(screen.queryByText('Direction: backwards')).toBeTruthy();
+
+    component.rerender(<TestComponent activeView="v2" activePanel="v2.3" />);
+    expect(screen.queryByText('Direction: forwards')).toBeTruthy();
+
+    component.rerender(<TestComponent activeView="v2" activePanel="v2.2" />);
+    expect(screen.queryByText('Direction: backwards')).toBeTruthy();
+
+    // transition to another view
+    component.rerender(<TestComponent activeView="v3" />);
+    expect(screen.queryByText('Direction: forwards')).toBeTruthy();
+  });
+});

packages/vkui/src/components/NavTransitionDirectionContext/NavTransitionDirectionContext.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+type DirectionContextType = boolean | undefined;
+
+const TransitionDirectionContext = React.createContext<DirectionContextType>(undefined);
+
+export const NavTransitionDirectionProvider = ({
+  children,
+  isBack: isBackProp,
+}: React.PropsWithChildren<{ isBack: DirectionContextType }>) => {
+  const parentIsBack = React.useContext(TransitionDirectionContext);
+  // if local isBack is undefined then transition happend on the parent side (probably Root)
+  const isBack = isBackProp !== undefined ? isBackProp : parentIsBack;
+
+  // 'direction' should always represent the direction state of the panel on mount
+  // save the on mount value of the panel to the state
+  // to make sure we don't trigger new re-render for the panel
+  // due to change in the prop passed to provider
+  const [isBackOnMount] = React.useState<DirectionContextType>(isBack);
+
+  return (
+    <TransitionDirectionContext.Provider value={isBackOnMount}>
+      {children}
+    </TransitionDirectionContext.Provider>
+  );
+};
+
+export type TransitionDirection = undefined | 'forwards' | 'backwards';
+
+export const useNavDirection = (): TransitionDirection => {
+  const isBack = React.useContext(TransitionDirectionContext);
+  const transitionDirection = isBack === undefined ? undefined : isBack ? 'backwards' : 'forwards';
+
+  return transitionDirection;
+};

packages/vkui/src/components/Root/Readme.md

@@ -4,6 +4,9 @@
 При смене значения свойства `activeView` происходит плавный переход от одной `View` к другой.
 Как только он заканчивается, вызывается свойство-функция `onTransition`.
 
+Чтобы понять был это переход вперёд или назад можно воспользоваться хуком [`useNavDirection()`](#/View?id=usenavdirection_example).
+Этот хук работает даже если анимации выключены (`<ConfigProvider transitionMotionEnabled={false}>`).
+
 ```jsx
 const [activeView, setActiveView] = useState('view1');
 

packages/vkui/src/components/Root/Root.tsx

@@ -10,6 +10,7 @@ import { warnOnce } from '../../lib/warnOnce';
 import { ScrollContext } from '../AppRoot/ScrollContext';
 import { useConfigProvider } from '../ConfigProvider/ConfigProviderContext';
 import { NavTransitionProvider } from '../NavTransitionContext/NavTransitionContext';
+import { NavTransitionDirectionProvider } from '../NavTransitionDirectionContext/NavTransitionDirectionContext';
 import { SplitColContext } from '../SplitCol/SplitColContext';
 import styles from './Root.module.css';
 
@@ -145,16 +146,18 @@ export const Root = ({
               transition && viewId === activeView && !isBack && styles['Root__view--show-forward'],
             )}
           >
-            <NavTransitionProvider entering={transition && viewId === activeView}>
-              <div
-                className={styles['Root__scrollCompensation']}
-                style={{
-                  marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,
-                }}
-              >
-                {view}
-              </div>
-            </NavTransitionProvider>
+            <NavTransitionDirectionProvider isBack={isBack}>
+              <NavTransitionProvider entering={transition && viewId === activeView}>
+                <div
+                  className={styles['Root__scrollCompensation']}
+                  style={{
+                    marginTop: compensateScroll ? viewId && -(scrolls[viewId] ?? 0) : undefined,
+                  }}
+                >
+                  {view}
+                </div>
+              </NavTransitionProvider>
+            </NavTransitionDirectionProvider>
           </div>
         );
       })}