@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/ModalRoot/ModalRootAdaptive.tsx

@@ -1,42 +0,0 @@
-import * as React from "react";
-import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
-import { ModalRootTouch } from "./ModalRoot";
-import { ModalRootDesktop } from "./ModalRootDesktop";
-import {
-  AdaptivityContextInterface,
-  AdaptivityProps,
-} from "../AdaptivityProvider/AdaptivityContext";
-
-export interface ModalRootProps extends AdaptivityProps {
-  activeModal?: string | null;
-
-  /**
-   * Будет вызвано при закрытии активной модалки с её id
-   */
-  onClose?: (modalId: string) => void;
-}
-
-const ModalRootComponent: React.FC<
-  ModalRootProps & AdaptivityContextInterface
-> = (props) => {
-  const { viewWidth, viewHeight, hasMouse } = props;
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
-
-  const RootComponent = isDesktop ? ModalRootDesktop : ModalRootTouch;
-
-  return <RootComponent {...props} />;
-};
-
-ModalRootComponent.displayName = "ModalRoot";
-
-export const ModalRoot = withAdaptivity(ModalRootComponent, {
-  viewWidth: true,
-  viewHeight: true,
-  hasMouse: true,
-});

package/src/components/ModalRoot/ModalRootContext.tsx

@@ -1,51 +0,0 @@
-import * as React from "react";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-import { ModalElements, ModalsStateEntry, ModalType } from "./types";
-
-export type ModalRegistryEntry = ModalElements &
-  Required<Pick<ModalsStateEntry, "type" | "id">>;
-type ModalRefs = { [k in keyof ModalElements]: (e: ModalElements[k]) => void };
-
-export interface ModalRootContextInterface {
-  updateModalHeight: VoidFunction;
-  registerModal(data: ModalRegistryEntry): void;
-  onClose?: VoidFunction;
-  isInsideModal: boolean;
-}
-
-export const ModalRootContext = React.createContext<ModalRootContextInterface>({
-  updateModalHeight: () => undefined,
-  registerModal: () => undefined,
-  isInsideModal: false,
-});
-
-/**
- * All referenced elements must be static
- */
-export function useModalRegistry(id: string | undefined, type: ModalType) {
-  const modalContext = React.useContext(ModalRootContext);
-  const elements = React.useRef<ModalElements>({}).current;
-  useIsomorphicLayoutEffect(() => {
-    if (id !== undefined) {
-      modalContext.registerModal({ ...elements, type, id });
-      // unset refs on  unmount to prevent leak
-      const reset = Object.keys(elements).reduce<ModalRegistryEntry>(
-        (acc, k) => ({ ...acc, [k]: null }),
-        { type, id }
-      );
-      return () => modalContext.registerModal(reset);
-    }
-    return undefined;
-  }, []);
-
-  const refs = React.useRef<Required<ModalRefs>>({
-    modalElement: (e) => (elements.modalElement = e),
-    innerElement: (e) => (elements.innerElement = e),
-    headerElement: (e) => (elements.headerElement = e),
-    contentElement: (e) => (elements.contentElement = e),
-  }).current;
-  return { refs };
-}
-
-// eslint-disable-next-line import/no-default-export
-export default ModalRootContext;

package/src/components/ModalRoot/ModalRootDesktop.tsx

@@ -1,261 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { transitionEvent } from "../../lib/supportEvents";
-import { HasPlatform } from "../../types";
-import { withPlatform } from "../../hoc/withPlatform";
-import { withContext } from "../../hoc/withContext";
-import ModalRootContext, {
-  ModalRootContextInterface,
-} from "./ModalRootContext";
-import {
-  ConfigProviderContext,
-  ConfigProviderContextInterface,
-  WebviewType,
-} from "../ConfigProvider/ConfigProviderContext";
-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");
-
-export interface ModalRootProps extends HasPlatform {
-  activeModal?: string | null;
-  /**
-   * @ignore
-   */
-  configProvider?: ConfigProviderContextInterface;
-
-  /**
-   * Будет вызвано при закрытии активной модалки с её id
-   */
-  onClose?(modalId: string): void;
-}
-
-class ModalRootDesktopComponent extends React.Component<
-  ModalRootProps & DOMProps & ModalTransitionProps
-> {
-  constructor(props: ModalRootProps & ModalTransitionProps) {
-    super(props);
-
-    this.maskElementRef = React.createRef();
-
-    this.modalRootContext = {
-      updateModalHeight: () => undefined,
-      registerModal: ({ id, ...data }) =>
-        Object.assign(this.getModalState(id), data),
-      onClose: () => this.props.closeActiveModal(),
-      isInsideModal: true,
-    };
-  }
-
-  private readonly maskElementRef: React.RefObject<HTMLDivElement>;
-  private maskAnimationFrame: number | undefined = undefined;
-  private readonly modalRootContext: ModalRootContextInterface;
-  private restoreFocusTo: HTMLElement | undefined = undefined;
-
-  private get timeout() {
-    return this.props.platform === ANDROID || this.props.platform === VKCOM
-      ? 320
-      : 400;
-  }
-
-  private get modals() {
-    return React.Children.toArray(this.props.children) as React.ReactElement[];
-  }
-
-  getModalState(id: string | null) {
-    if (id === null) {
-      return undefined;
-    }
-    return this.props.getModalState(id);
-  }
-
-  componentDidUpdate(prevProps: ModalRootProps & ModalTransitionProps) {
-    // transition phase 2: animate exiting modal
-    if (
-      this.props.exitingModal &&
-      this.props.exitingModal !== prevProps.exitingModal
-    ) {
-      this.closeModal(this.props.exitingModal);
-    }
-
-    // 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);
-        }
-      });
-    }
-
-    // focus restoration
-    if (this.props.activeModal && !prevProps.activeModal) {
-      this.restoreFocusTo = (this.props.document?.activeElement ??
-        undefined) as HTMLElement | undefined;
-    }
-    if (
-      !this.props.activeModal &&
-      !this.props.exitingModal &&
-      this.restoreFocusTo
-    ) {
-      this.restoreFocusTo.focus();
-      this.restoreFocusTo = undefined;
-    }
-  }
-
-  closeModal(id: string) {
-    const prevModalState = this.getModalState(id);
-    if (!prevModalState) {
-      return;
-    }
-
-    this.waitTransitionFinish(prevModalState, () => this.props.onExit(id));
-    this.animateModalOpacity(prevModalState, false);
-    if (!this.props.activeModal) {
-      this.setMaskOpacity(prevModalState, 0);
-    }
-  }
-
-  waitTransitionFinish(
-    modalState: ModalsStateEntry | undefined,
-    eventHandler: () => void
-  ) {
-    if (transitionEvent.supported) {
-      const onceHandler = () => {
-        modalState?.innerElement?.removeEventListener(
-          transitionEvent.name as string,
-          onceHandler
-        );
-        eventHandler();
-      };
-
-      modalState?.innerElement?.addEventListener(
-        transitionEvent.name as string,
-        onceHandler
-      );
-    } else {
-      setTimeout(eventHandler, this.timeout);
-    }
-  }
-
-  /* Анимирует сдивг модалки */
-  animateModalOpacity(
-    modalState: ModalsStateEntry | undefined,
-    display: boolean
-  ) {
-    if (modalState?.innerElement) {
-      modalState.innerElement.style.transitionDelay =
-        display && this.props.delayEnter ? `${this.timeout}ms` : "";
-      modalState.innerElement.style.opacity = display ? "1" : "0";
-    }
-  }
-
-  /* Устанавливает прозрачность для полупрозрачной подложки */
-  setMaskOpacity(
-    modalState: ModalsStateEntry,
-    forceOpacity: number | null = null
-  ) {
-    if (forceOpacity === null && this.props.history?.[0] !== modalState.id) {
-      return;
-    }
-
-    if (this.maskAnimationFrame) {
-      cancelAnimationFrame(this.maskAnimationFrame);
-    }
-    this.maskAnimationFrame = requestAnimationFrame(() => {
-      if (this.maskElementRef.current) {
-        const { translateY = 0, translateYCurrent = 0 } = modalState;
-
-        const opacity =
-          forceOpacity === null
-            ? 1 - (translateYCurrent - translateY) / (100 - translateY) || 0
-            : forceOpacity;
-        this.maskElementRef.current.style.opacity = Math.max(
-          0,
-          Math.min(100, opacity)
-        ).toString();
-      }
-    });
-  }
-
-  render() {
-    const { exitingModal, activeModal, enteringModal } = this.props;
-
-    if (!activeModal && !exitingModal) {
-      return null;
-    }
-
-    return (
-      <ModalRootContext.Provider value={this.modalRootContext}>
-        <div
-          vkuiClass={classNames(
-            getClassName("ModalRoot", this.props.platform),
-            {
-              "ModalRoot--vkapps":
-                this.props.configProvider?.webviewType === WebviewType.VKAPPS,
-            },
-            "ModalRoot--desktop"
-          )}
-        >
-          <div
-            vkuiClass="ModalRoot__mask"
-            ref={this.maskElementRef}
-            onClick={this.props.closeActiveModal}
-          />
-          <div vkuiClass="ModalRoot__viewport">
-            {this.modals.map((Modal: React.ReactElement) => {
-              const modalId = getNavId(Modal.props, warn);
-              if (modalId !== activeModal && modalId !== exitingModal) {
-                return null;
-              }
-
-              const key = `modal-${modalId}`;
-
-              return (
-                <FocusTrap
-                  restoreFocus={false}
-                  onClose={this.props.closeActiveModal}
-                  timeout={this.timeout}
-                  key={key}
-                  vkuiClass={classNames("ModalRoot__modal", {
-                    "ModalRoot__modal--active":
-                      !exitingModal &&
-                      !enteringModal &&
-                      modalId === activeModal,
-                    "ModalRoot__modal--prev": modalId === exitingModal,
-                    "ModalRoot__modal--next":
-                      Boolean(exitingModal) && modalId === activeModal,
-                  })}
-                >
-                  {Modal}
-                </FocusTrap>
-              );
-            })}
-          </div>
-        </div>
-      </ModalRootContext.Provider>
-    );
-  }
-}
-
-export const ModalRootDesktop = withContext(
-  withPlatform(
-    withDOM<ModalRootProps>(withModalManager()(ModalRootDesktopComponent))
-  ),
-  ConfigProviderContext,
-  "configProvider"
-);