@vkontakte/vkui 4.19.0 → 4.22.0

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -38,7 +38,6 @@ export function useModalRegistry(id: string, type: ModalType) {
     innerElement: (e) => elements.innerElement = e,
     headerElement: (e) => elements.headerElement = e,
     contentElement: (e) => elements.contentElement = e,
-    footerElement: (e) => elements.footerElement = e,
   }).current;
   return { refs };
 }

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { classNames } from '../../lib/classNames';
-import { isFunction } from '../../lib/utils';
 import { transitionEvent } from '../../lib/supportEvents';
 import { HasPlatform } from '../../types';
 import { withPlatform } from '../../hoc/withPlatform';
@@ -11,16 +10,17 @@ import {
   ConfigProviderContextInterface,
   WebviewType,
 } from '../ConfigProvider/ConfigProviderContext';
-import { ModalsStateEntry, ModalType } from './types';
+import { ModalsStateEntry } from './types';
 import { ANDROID, VKCOM } from '../../lib/platform';
 import { getClassName } from '../../helpers/getClassName';
 import { DOMProps, withDOM } from '../../lib/dom';
 import { getNavId } from '../../lib/getNavId';
 import { warnOnce } from '../../lib/warnOnce';
+import { FocusTrap } from '../FocusTrap/FocusTrap';
+import { ModalTransitionProps, withModalManager } from './useModalManager';
 import './ModalRoot.css';
 
 const warn = warnOnce('ModalRoot');
-const IS_DEV = process.env.NODE_ENV === 'development';
 
 export interface ModalRootProps extends HasPlatform {
   activeModal?: string | null;
@@ -35,178 +35,76 @@ export interface ModalRootProps extends HasPlatform {
   onClose?(modalId: string): void;
 }
 
-interface ModalRootState {
-  activeModal?: string;
-  prevModal?: string;
-  nextModal?: string;
-  visibleModals?: string[];
-  animated?: boolean;
-  switching?: boolean;
-  history?: string[];
-  isBack?: boolean;
-  inited?: boolean;
-}
-
-class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProps, ModalRootState> {
-  constructor(props: ModalRootProps) {
+class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProps & ModalTransitionProps> {
+  constructor(props: ModalRootProps & ModalTransitionProps) {
     super(props);
 
-    const activeModal = props.activeModal;
-
-    this.state = {
-      activeModal: null,
-      prevModal: null,
-      nextModal: activeModal,
-      visibleModals: activeModal ? [activeModal] : [],
-      animated: !!activeModal,
-      switching: false,
-      history: activeModal ? [activeModal] : [],
-      isBack: false,
-      inited: false,
-    };
-
     this.maskElementRef = React.createRef();
-    this.activeTransitions = 0;
-
-    this.initModalsState();
 
     this.modalRootContext = {
       updateModalHeight: () => undefined,
-      registerModal: ({ id, ...data }) => Object.assign(this.modalsState[id], data),
-      onClose: this.triggerActiveModalClose,
+      registerModal: ({ id, ...data }) => Object.assign(this.getModalState(id), data),
+      onClose: () => this.props.closeActiveModal(),
       isInsideModal: true,
     };
   }
 
-  private modalsState: { [id: string]: ModalsStateEntry };
   private readonly maskElementRef: React.RefObject<HTMLDivElement>;
   private maskAnimationFrame: number;
   private readonly modalRootContext: ModalRootContextInterface;
+  private restoreFocusTo: HTMLElement;
 
-  activeTransitions: number;
+  private get timeout() {
+    return this.props.platform === ANDROID || this.props.platform === VKCOM ? 320 : 400;
+  }
 
-  get modals() {
+  private get modals() {
     return React.Children.toArray(this.props.children) as React.ReactElement[];
   }
 
-  initModalsState() {
-    this.modalsState = this.modals.reduce<{ [id: string]: ModalsStateEntry }>((acc, Modal) => {
-      const modalProps = Modal.props;
-      const state: ModalsStateEntry = {
-        id: getNavId(Modal.props, warn),
-        onClose: Modal.props.onClose,
-        dynamicContentHeight: !!modalProps.dynamicContentHeight,
-      };
-
-      // ModalPage props
-      if (typeof modalProps.settlingHeight === 'number') {
-        state.settlingHeight = modalProps.settlingHeight;
-      }
-
-      acc[state.id] = state;
-      return acc;
-    }, {});
+  getModalState(id: string) {
+    return this.props.getModalState(id);
   }
 
-  handleKeyDownEsc = (e: KeyboardEvent): void => {
-    if (e.key === 'Escape') {
-      this.triggerActiveModalClose();
+  componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {
+    // transition phase 2: animate exiting modal
+    if (this.props.exitingModal && this.props.exitingModal !== prevProps.exitingModal) {
+      this.closeModal(this.props.exitingModal);
     }
-  };
-
-  componentDidMount() {
-    this.initActiveModal();
-    this.props.document.addEventListener('keydown', this.handleKeyDownEsc);
-  }
-
-  componentWillUnmount = () => {
-    this.props.document.removeEventListener('keydown', this.handleKeyDownEsc);
-  };
-
-  componentDidUpdate(prevProps: ModalRootProps, prevState: ModalRootState) {
-    if (this.props.activeModal !== prevProps.activeModal) {
-      const nextModal = this.props.activeModal;
-      const prevModal = prevProps.activeModal;
-
-      if (IS_DEV && nextModal !== null && !this.modalsState[nextModal]) {
-        return warn(`[ModalRoot.componentDidUpdate] nextModal ${nextModal} not found`);
-      }
-
-      let history = [...this.state.history];
-      let isBack = false;
 
-      if (nextModal === null) {
-        history = [];
-      } else if (history.includes(nextModal)) {
-        history = history.splice(0, history.indexOf(nextModal) + 1);
-        isBack = true;
-      } else {
-        history.push(nextModal);
-      }
-
-      return this.setState({
-        activeModal: null,
-        nextModal,
-        prevModal,
-        visibleModals: [nextModal, prevModal],
-        history,
-        isBack,
-        animated: true,
-        inited: false,
-        switching: false,
-      }, () => {
-        if (nextModal === null) {
-          this.closeActiveModal();
-        } else {
-          this.initActiveModal();
+    // transition phase 3: animate entering modal
+    if (this.props.enteringModal && this.props.enteringModal !== prevProps.enteringModal) {
+      const { enteringModal } = this.props;
+      const enteringState = this.getModalState(enteringModal);
+      requestAnimationFrame(() => {
+        if (this.props.enteringModal === enteringModal) {
+          this.waitTransitionFinish(enteringState, () => this.props.onEnter(enteringModal));
+          this.animateModalOpacity(enteringState, true);
         }
       });
     }
 
-    if (this.state.switching && !prevState.switching) {
-      requestAnimationFrame(() => this.switchPrevNext());
-    }
-  }
-
-  /**
-   * Инициализирует модалку перед анимацией открытия
-   */
-  initActiveModal() {
-    const activeModal = this.state.activeModal || this.state.nextModal;
-    if (!activeModal) {
-      return;
+    // focus restoration
+    if (this.props.activeModal && !prevProps.activeModal) {
+      this.restoreFocusTo = this.props.document.activeElement as HTMLElement;
     }
-
-    const modalState = this.modalsState[activeModal];
-
-    switch (modalState.type) {
-      case ModalType.PAGE:
-        modalState.settlingHeight = modalState.settlingHeight || 75;
-        break;
-
-      case ModalType.CARD:
-        break;
-
-      default:
-        if (IS_DEV) {
-          warn('[initActiveModal] modalState.type is unknown');
-        }
+    if (!this.props.activeModal && !this.props.exitingModal && this.restoreFocusTo) {
+      this.restoreFocusTo.focus();
+      this.restoreFocusTo = null;
     }
-
-    this.setState({ inited: true, switching: true });
   }
 
-  closeActiveModal() {
-    const { prevModal } = this.state;
-    if (IS_DEV && !prevModal) {
-      return warn(`[closeActiveModal] prevModal is ${prevModal}`);
+  closeModal(id: string) {
+    const prevModalState = this.getModalState(id);
+    if (!prevModalState) {
+      return;
     }
 
-    const prevModalState = this.modalsState[prevModal];
-
-    this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);
+    this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));
     this.animateModalOpacity(prevModalState, false);
-    this.setMaskOpacity(prevModalState, 0);
+    if (!this.props.activeModal) {
+      this.setMaskOpacity(prevModalState, 0);
+    }
   }
 
   waitTransitionFinish(modalState: ModalsStateEntry, eventHandler: () => void) {
@@ -218,87 +116,19 @@ class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProp
 
       modalState.innerElement.addEventListener(transitionEvent.name, onceHandler);
     } else {
-      setTimeout(eventHandler, this.props.platform === ANDROID || this.props.platform === VKCOM ? 320 : 400);
+      setTimeout(eventHandler, this.timeout);
     }
   }
 
-  switchPrevNext() {
-    const { prevModal, nextModal } = this.state;
-
-    const prevModalState = this.modalsState[prevModal];
-    const nextModalState = this.modalsState[nextModal];
-
-    if (IS_DEV && !prevModalState && !nextModalState) {
-      return warn(`[switchPrevNext] prevModal is ${prevModal}, nextModal is ${nextModal}`);
-    }
-
-    const prevIsCard = !!prevModalState && prevModalState.type === ModalType.CARD;
-
-    const nextIsPage = !!nextModalState && nextModalState.type === ModalType.PAGE;
-    const nextIsCard = !!nextModalState && nextModalState.type === ModalType.CARD;
-
-    // Ждём полного скрытия предыдущей модалки
-    if (prevModalState && (nextIsCard || prevIsCard && nextIsPage)) {
-      this.activeTransitions += 1;
-      this.waitTransitionFinish(prevModalState, () => {
-        this.waitTransitionFinish(nextModalState, this.prevNextSwitchEndHandler);
-        this.animateModalOpacity(nextModalState, true);
-      });
-
-      requestAnimationFrame(() => {
-        this.animateModalOpacity(prevModalState, false);
-      });
-
-      return;
-    }
-
-    if (prevModalState && nextIsPage) {
-      this.activeTransitions += 1;
-      this.waitTransitionFinish(prevModalState, this.prevNextSwitchEndHandler);
-      requestAnimationFrame(() => {
-        this.animateModalOpacity(prevModalState, false);
-      });
-    }
-
-    this.activeTransitions += 1;
-    this.waitTransitionFinish(nextModalState, this.prevNextSwitchEndHandler);
-    requestAnimationFrame(() => {
-      this.animateModalOpacity(nextModalState, true);
-    });
-  }
-
-  prevNextSwitchEndHandler = () => {
-    this.activeTransitions = Math.max(0, this.activeTransitions - 1);
-    if (this.activeTransitions > 0) {
-      return;
-    }
-
-    const activeModal = this.state.nextModal;
-
-    const newState: ModalRootState = {
-      prevModal: null,
-      nextModal: null,
-      visibleModals: [activeModal],
-      activeModal: activeModal,
-      animated: false,
-      switching: false,
-    };
-
-    if (!activeModal) {
-      newState.history = [];
-    }
-
-    this.setState(newState);
-  };
-
   /* Анимирует сдивг модалки */
   animateModalOpacity(modalState: ModalsStateEntry, display: boolean) {
+    modalState.innerElement.style.transitionDelay = display && this.props.delayEnter ? `${this.timeout}ms` : null;
     modalState.innerElement.style.opacity = display ? '1' : '0';
   }
 
   /* Устанавливает прозрачность для полупрозрачной подложки */
   setMaskOpacity(modalState: ModalsStateEntry, forceOpacity: number = null) {
-    if (forceOpacity === null && this.state.history[0] !== modalState.id) {
+    if (forceOpacity === null && this.props.history[0] !== modalState.id) {
       return;
     }
 
@@ -313,30 +143,10 @@ class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProp
     });
   }
 
-  /**
-   * Закрывает текущую модалку
-   */
-  triggerActiveModalClose = () => {
-    const activeModalState = this.modalsState[this.state.activeModal];
-    if (activeModalState) {
-      this.doCloseModal(activeModalState);
-    }
-  };
-
-  private readonly doCloseModal = (modalState: ModalsStateEntry) => {
-    if (isFunction(modalState.onClose)) {
-      modalState.onClose();
-    } else if (isFunction(this.props.onClose)) {
-      this.props.onClose(modalState.id);
-    } else if (IS_DEV) {
-      warn('onClose is undefined');
-    }
-  };
-
   render() {
-    const { prevModal, activeModal, nextModal, visibleModals, animated } = this.state;
+    const { exitingModal, activeModal, enteringModal } = this.props;
 
-    if (!activeModal && !prevModal && !nextModal && !animated) {
+    if (!activeModal && !exitingModal) {
       return null;
     }
 
@@ -349,27 +159,30 @@ class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProp
         >
           <div
             vkuiClass="ModalRoot__mask"
-            onClick={this.triggerActiveModalClose}
             ref={this.maskElementRef}
+            onClick={this.props.closeActiveModal}
           />
           <div vkuiClass="ModalRoot__viewport">
             {this.modals.map((Modal: React.ReactElement) => {
               const modalId = getNavId(Modal.props, warn);
-              if (!visibleModals.includes(modalId)) {
+              if (modalId !== activeModal && modalId !== exitingModal) {
                 return null;
               }
 
               const key = `modal-${modalId}`;
 
               return (
-                <div
+                <FocusTrap
+                  restoreFocus={false}
+                  onClose={this.props.closeActiveModal}
+                  timeout={this.timeout}
                   key={key}
                   vkuiClass={classNames('ModalRoot__modal', {
-                    'ModalRoot__modal--active': modalId === activeModal,
-                    'ModalRoot__modal--prev': modalId === prevModal,
-                    'ModalRoot__modal--next': modalId === nextModal,
+                    'ModalRoot__modal--active': !exitingModal && !enteringModal && modalId === activeModal,
+                    'ModalRoot__modal--prev': modalId === exitingModal,
+                    'ModalRoot__modal--next': exitingModal && modalId === activeModal,
                   })}
-                >{Modal}</div>
+                >{Modal}</FocusTrap>
               );
             })}
           </div>
@@ -379,4 +192,10 @@ class ModalRootDesktopComponent extends React.Component<ModalRootProps & DOMProp
   }
 }
 
-export const ModalRootDesktop = withContext(withPlatform(withDOM<ModalRootProps>(ModalRootDesktopComponent)), ConfigProviderContext, 'configProvider');
+export const ModalRootDesktop = withContext(
+  withPlatform(
+    withDOM<ModalRootProps>(
+      withModalManager()(ModalRootDesktopComponent),
+    ),
+  ),
+  ConfigProviderContext, 'configProvider');

package/src/components/ModalRoot/Readme.md

@@ -23,9 +23,9 @@ class App extends Component {
     );
 
     return (
-      <View modal={modal}>
+      <SplitLayout modal={modal}>
         ...
-      </View>
+      </SplitLayout>
     );
   }
 }
@@ -47,7 +47,7 @@ class App extends Component {
 либо идентификатор предыдущей модалки, либо `null` для скрытия.
 Каждой конкретной `ModalPage` или `ModalCard` можно передать свой обработчик `onClose`, если нужно переопределить поведение.
 
-```jsx
+```jsx { "props": { "layout": false, "adaptivity": true } }
 const MODAL_PAGE_FILTERS = 'filters';
 const MODAL_PAGE_COUNTRIES = 'countries';
 const MODAL_PAGE_STORY_FEEDBACK = 'story-feedback';
@@ -410,25 +410,29 @@ const App = withPlatform(withAdaptivity(class App extends React.Component {
     );
 
     return (
-      <View activePanel="modals" modal={modal}>
-        <Panel id="modals">
-          <PanelHeader>Модальные окна</PanelHeader>
-            <Group>
-              <CellButton onClick={() => this.setActiveModal(MODAL_PAGE_FILTERS)}>
-                Открыть модальную страницу
-              </CellButton>
-              <CellButton multiline onClick={() => this.setActiveModal(MODAL_PAGE_FULLSCREEN)}>
-                Открыть полноэкранную модальную страницу
-              </CellButton>
-              <CellButton multiline onClick={() => this.setActiveModal(MODAL_PAGE_DYNAMIC)}>
-                Открыть модальную страницу с динамической высотой
-              </CellButton>
-              <CellButton onClick={() => this.setActiveModal(MODAL_CARD_MONEY_SEND)}>
-                Открыть модальные карточки
-              </CellButton>
-            </Group>
-        </Panel>
-      </View>
+      <SplitLayout modal={modal}>
+        <SplitCol>
+        <View activePanel="modals">
+          <Panel id="modals">
+            <PanelHeader>Модальные окна</PanelHeader>
+              <Group>
+                <CellButton onClick={() => this.setActiveModal(MODAL_PAGE_FILTERS)}>
+                  Открыть модальную страницу
+                </CellButton>
+                <CellButton multiline onClick={() => this.setActiveModal(MODAL_PAGE_FULLSCREEN)}>
+                  Открыть полноэкранную модальную страницу
+                </CellButton>
+                <CellButton multiline onClick={() => this.setActiveModal(MODAL_PAGE_DYNAMIC)}>
+                  Открыть модальную страницу с динамической высотой
+                </CellButton>
+                <CellButton onClick={() => this.setActiveModal(MODAL_CARD_MONEY_SEND)}>
+                  Открыть модальные карточки
+                </CellButton>
+              </Group>
+          </Panel>
+        </View>
+        </SplitCol>
+      </SplitLayout>
     );
   }
 }, {
@@ -464,11 +468,15 @@ class App extends Component {
     );
 
     return (
-      <View activePanel="main" modal={modal}>
-        <Panel id="main">
-          ...
-        </Panel>
-      </View>
+      <SplitLayout modal={modal}>
+        <SplitCol>
+        <View activePanel="main">
+          <Panel id="main">
+            ...
+          </Panel>
+        </View>
+        </SplitCol>
+      </SplitLayout>
     );
   }
 }

package/src/components/ModalRoot/types.ts

@@ -12,7 +12,6 @@ export interface ModalElements {
   innerElement?: HTMLElement | null;
   headerElement?: HTMLElement | null;
   contentElement?: HTMLElement | null;
-  footerElement?: HTMLElement | null;
 }
 
 export interface ModalsStateEntry extends ModalElements {