@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -1,141 +0,0 @@
-import * as React from "react";
-import { hasReactNode } from "../../lib/utils";
-import Title from "../Typography/Title/Title";
-import Headline from "../Typography/Headline/Headline";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import {
-  ViewHeight,
-  ViewWidth,
-  withAdaptivity,
-} from "../../hoc/withAdaptivity";
-import { HasRootRef } from "../../types";
-import { PanelHeaderButton } from "../PanelHeaderButton/PanelHeaderButton";
-import { ANDROID, IOS } from "../../lib/platform";
-import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
-import { Icon24Dismiss } from "@vkontakte/icons";
-import { useKeyboard } from "../../hooks/useKeyboard";
-import { AdaptivityContextInterface } from "../AdaptivityProvider/AdaptivityContext";
-import "./ModalCardBase.css";
-
-export interface ModalCardBaseProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    HasRootRef<HTMLDivElement> {
-  /**
-   * Иконка.
-   *
-   * Может быть компонентом иконки, например, `<Icon56MoneyTransferOutline />`, или `<Avatar size={72} src="" />`
-   */
-  icon?: React.ReactNode;
-
-  /**
-   * Заголовок карточки
-   */
-  header?: React.ReactNode;
-
-  /**
-   * Подзаголовок
-   */
-  subheader?: React.ReactNode;
-
-  /**
-   * Кнопки-действия.
-   *
-   * Рекомендуется использовать `<Button size="l" mode="primary" />` или `<Button size="l" mode="secondary" />`
-   */
-  actions?: React.ReactNode;
-
-  /**
-   * Тип отображения кнопок: вертикальный или горизонтальный
-   */
-  actionsLayout?: "vertical" | "horizontal";
-  onClose?: VoidFunction;
-}
-
-export const ModalCardBase = withAdaptivity<
-  ModalCardBaseProps & AdaptivityContextInterface
->(
-  ({
-    getRootRef,
-    icon,
-    header,
-    subheader,
-    children,
-    actions,
-    actionsLayout,
-    viewWidth,
-    hasMouse,
-    viewHeight,
-    onClose,
-    ...restProps
-  }) => {
-    const platform = usePlatform();
-    const isDesktop =
-      viewWidth >= ViewWidth.SMALL_TABLET &&
-      (hasMouse || viewHeight >= ViewHeight.MEDIUM);
-    const isSoftwareKeyboardOpened = useKeyboard().isOpened;
-
-    const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;
-    const canShowCloseBtnIos = platform === IOS && !canShowCloseBtn;
-
-    return (
-      <div
-        {...restProps}
-        vkuiClass={classNames(getClassName("ModalCardBase", platform), {
-          "ModalCardBase--desktop": isDesktop,
-        })}
-        ref={getRootRef}
-      >
-        <div
-          vkuiClass={classNames("ModalCardBase__container", {
-            "ModalCardBase__container--softwareKeyboardOpened":
-              isSoftwareKeyboardOpened,
-          })}
-        >
-          {hasReactNode(icon) && (
-            <div vkuiClass="ModalCardBase__icon">{icon}</div>
-          )}
-          {hasReactNode(header) && (
-            <Title
-              level="2"
-              weight={platform === ANDROID ? "2" : "1"}
-              vkuiClass="ModalCardBase__header"
-            >
-              {header}
-            </Title>
-          )}
-          {hasReactNode(subheader) && (
-            <Headline weight="regular" vkuiClass="ModalCardBase__subheader">
-              {subheader}
-            </Headline>
-          )}
-
-          {children}
-
-          {hasReactNode(actions) && (
-            <div
-              vkuiClass={classNames("ModalCardBase__actions", {
-                "ModalCardBase__actions--v": actionsLayout === "vertical",
-              })}
-            >
-              {actions}
-            </div>
-          )}
-
-          {canShowCloseBtn && <ModalDismissButton onClick={onClose} />}
-          {canShowCloseBtnIos && (
-            <PanelHeaderButton vkuiClass="ModalCard__dismiss" onClick={onClose}>
-              <Icon24Dismiss />
-            </PanelHeaderButton>
-          )}
-        </div>
-      </div>
-    );
-  },
-  {
-    viewWidth: true,
-    viewHeight: true,
-    hasMouse: true,
-  }
-);

package/src/components/ModalCardBase/Readme.md

@@ -1,38 +0,0 @@
-Низкоуровневый компонент для отрисовки карточки со сложным содержимым. Используется внутри [ModalCard](#/ModalCard).
-
-### Кнопка для закрытия
-
-Согласно нашим дизайн-гайдам, в Android-версии специальной кнопки для закрытия не предусмотрено.
-
-```jsx { "props": { "layout": false, "iframe": false } }
-<div style={{ margin: 20 }}>
-  <Text style={{ marginBottom: 10 }}>Десктопная и планшетная версии</Text>
-  <ModalCardBase
-    style={{ width: 450, marginBottom: 20 }}
-    header="Отправляйте деньги друзьям, используя банковскую карту"
-    subheader="Номер карты получателя не нужен — он сам решит, куда зачислить средства."
-    actions={
-      <Button size="l" mode="primary" key="button">
-        Попробовать
-      </Button>
-    }
-    icon={<Icon56MoneyTransferOutline key="icon" />}
-  />
-  <Text style={{ marginBottom: 10 }}>Мобильная версия</Text>
-  <AdaptivityProvider viewWidth={ViewWidth.MOBILE}>
-    <ModalCardBase
-      style={{ width: 320 }}
-      icon={
-        <Avatar mode="app" src={getAvatarUrl("app_zagadki", 200)} size={72} />
-      }
-      header="Добавить игру «Загадки детства» в меню?"
-      subheader="Игра появится под списком разделов на экране меню и будет всегда под рукой."
-      actions={
-        <Button size="l" mode="primary">
-          Добавить в меню
-        </Button>
-      }
-    />
-  </AdaptivityProvider>
-</div>
-```

package/src/components/ModalDismissButton/ModalDismissButton.css

@@ -1,37 +0,0 @@
-.ModalDismissButton {
-  position: absolute;
-  justify-content: center;
-  top: 0;
-  right: -56px;
-  width: 56px;
-  height: 56px;
-  padding: 18px;
-  box-sizing: border-box;
-  color: var(--white);
-  transition: opacity 0.15s ease-out;
-}
-
-.ModalDismissButton::before {
-  display: block;
-  content: "";
-  top: 14px;
-  right: 14px;
-  bottom: 14px;
-  left: 14px;
-  background-color: rgba(0, 0, 0, 0.35);
-  border-radius: 50%;
-  position: absolute;
-}
-
-/* fixes icon misplacement on Safari in some cases */
-.ModalDismissButton .Icon {
-  transform: translateX(0);
-}
-
-.ModalDismissButton--hover {
-  opacity: 0.6;
-}
-
-.ModalDismissButton--active {
-  opacity: 1;
-}

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -1,32 +0,0 @@
-import * as React from "react";
-import { Icon20Cancel } from "@vkontakte/icons";
-import Tappable from "../Tappable/Tappable";
-import { getClassName } from "../../helpers/getClassName";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./ModalDismissButton.css";
-
-export type ModalDismissButtonProps = React.HTMLAttributes<HTMLButtonElement>;
-
-const ModalDismissButton: React.FC<ModalDismissButtonProps> = (
-  props: ModalDismissButtonProps
-) => {
-  const platform = usePlatform();
-
-  return (
-    <Tappable
-      vkuiClass={getClassName("ModalDismissButton", platform)}
-      {...props}
-      activeMode="ModalDismissButton--active"
-      hoverMode="ModalDismissButton--hover"
-    >
-      <Icon20Cancel />
-    </Tappable>
-  );
-};
-
-ModalDismissButton.defaultProps = {
-  "aria-label": "Закрыть",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ModalDismissButton;

package/src/components/ModalDismissButton/Readme.md

@@ -1,53 +0,0 @@
-Кнопка для закрытия модальных окон на широком экране.
-Для правильной отрисовки нужно расположить в контейнере с `position: "relative"` и отображать при достаточной ширине экрана (от `ViewWidth.SMALL_TABLET`)
-
-```jsx { "props": { "layout": false, "adaptivity": true } }
-const CustomPopout = withAdaptivity(
-  ({ onClose, viewWidth }) => {
-    return (
-      <PopoutWrapper onClick={onClose}>
-        <div
-          style={{
-            backgroundColor: "var(--background_content)",
-            borderRadius: 8,
-            position: "relative",
-            padding: "12px",
-          }}
-        >
-          <h4>Кастомное модальное окно</h4>
-          {viewWidth >= ViewWidth.SMALL_TABLET && (
-            <ModalDismissButton onClick={onClose} />
-          )}
-        </div>
-      </PopoutWrapper>
-    );
-  },
-  {
-    viewWidth: true,
-  }
-);
-
-const Example = () => {
-  const [popout, setPopout] = React.useState(null);
-
-  const onClick = () =>
-    setPopout(<CustomPopout onClose={() => setPopout(null)} />);
-
-  return (
-    <SplitLayout popout={popout}>
-      <SplitCol>
-        <View activePanel="popout">
-          <Panel id="popout">
-            <PanelHeader>ModalDismissButton</PanelHeader>
-            <Group>
-              <CellButton onClick={onClick}>Открыть модальное окно</CellButton>
-            </Group>
-          </Panel>
-        </View>
-      </SplitCol>
-    </SplitLayout>
-  );
-};
-
-<Example />;
-```

package/src/components/ModalPage/ModalPage.css

@@ -1,146 +0,0 @@
-.ModalPage {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  box-sizing: border-box;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.ModalPage--desktop {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.ModalPage__in-wrap {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  bottom: 0;
-  display: flex;
-  align-items: flex-end;
-  pointer-events: initial;
-  transform: translateY(100%);
-  transition: transform 320ms var(--android-easing);
-}
-
-.ModalRoot--switching .ModalPage__in-wrap {
-  pointer-events: none;
-}
-
-.ModalPage__in {
-  width: 416px;
-  max-width: 100%;
-  margin: 0 auto;
-  background: var(--background_content);
-  overflow: visible;
-  position: relative;
-  box-sizing: border-box;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  border-radius: 12px 12px 0 0;
-}
-
-.ModalPage__header {
-  width: 100%;
-}
-
-.ModalPage__content-wrap {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-  border-bottom-left-radius: inherit;
-  border-bottom-right-radius: inherit;
-}
-
-.ModalPage__content {
-  height: 100%;
-  overflow-y: hidden;
-  overflow-x: hidden;
-  box-sizing: border-box;
-}
-
-.ModalPage--desktop .ModalPage__content,
-.ModalRoot__modal--expandable .ModalPage__content {
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-.ModalPage__content-in {
-  position: relative;
-  padding-bottom: var(--safe-area-inset-bottom);
-}
-
-.ModalRoot__modal--collapsed .ModalPage__content,
-.ModalRoot__modal--dragging .ModalPage__content {
-  overflow: hidden;
-  touch-action: pan-y;
-}
-
-.ModalPage__footer {
-  background: var(--background_content);
-  position: relative;
-  z-index: 10;
-}
-
-.ModalRoot--touched .ModalPage__footer {
-  transition: none;
-}
-
-/**
- * iOS
- */
-.ModalPage--ios .ModalPage__in-wrap {
-  transition: transform 400ms var(--ios-easing);
-}
-
-.ModalPage--ios .ModalPage__in {
-  border-radius: 14px 14px 0 0;
-}
-
-/**
- * VKCOM
- */
-.ModalPage--vkcom .ModalPage__in {
-  border-radius: 8px 8px 0 0;
-  width: 448px;
-}
-
-/**
- * desktop
- */
-
-.ModalPage--desktop .ModalPage__in-wrap {
-  align-items: center;
-  opacity: 0;
-  transition: opacity 340ms var(--android-easing);
-  width: auto;
-  height: auto;
-  position: relative;
-  transform: none;
-}
-
-.ModalPage--desktop .ModalPage__in {
-  height: auto;
-  max-height: 640px;
-  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.16), 0 0 8px rgba(0, 0, 0, 0.12);
-  border-radius: 8px;
-}
-
-@media (max-height: 672px) {
-  .ModalPage--desktop .ModalPage__in {
-    max-height: calc(100vh - 32px);
-  }
-}
-
-/**
- * common
- */
-
-.ModalRoot--touched .ModalPage__in-wrap {
-  transition: none;
-}

package/src/components/ModalPage/ModalPage.tsx

@@ -1,125 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import {
-  ModalRootContext,
-  useModalRegistry,
-} from "../ModalRoot/ModalRootContext";
-import { usePlatform } from "../../hooks/usePlatform";
-import {
-  withAdaptivity,
-  ViewHeight,
-  ViewWidth,
-} from "../../hoc/withAdaptivity";
-import {
-  AdaptivityContextInterface,
-  AdaptivityProps,
-} from "../AdaptivityProvider/AdaptivityContext";
-import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
-import { multiRef } from "../../lib/utils";
-import { ModalType } from "../ModalRoot/types";
-import { getNavId, NavIdProps } from "../../lib/getNavId";
-import { warnOnce } from "../../lib/warnOnce";
-import "./ModalPage.css";
-
-export interface ModalPageProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    AdaptivityProps,
-    NavIdProps {
-  /**
-   * Шапка модальной страницы, `<ModalPageHeader />`
-   */
-  header?: React.ReactNode;
-  onClose?: VoidFunction;
-  /**
-   * Процент, на который изначально будет открыта модальная страница. При `settlingHeight={100}` модальная страница раскрывается на всю высоту.
-   */
-  settlingHeight?: number;
-  /**
-   * Если высота контента в модальной странице может поменяться, нужно установить это свойство
-   */
-  dynamicContentHeight?: boolean;
-  getModalContentRef?: React.Ref<HTMLDivElement>;
-}
-
-const warn = warnOnce("ModalPage");
-const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
-  props
-) => {
-  const platform = usePlatform();
-  const { updateModalHeight } = React.useContext(ModalRootContext);
-  const {
-    children,
-    header,
-    viewWidth,
-    viewHeight,
-    sizeX,
-    hasMouse,
-    onClose,
-    settlingHeight,
-    dynamicContentHeight,
-    getModalContentRef,
-    nav,
-    ...restProps
-  } = props;
-
-  React.useEffect(() => {
-    updateModalHeight();
-  }, [children, updateModalHeight]);
-
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
-  const canShowCloseBtn = viewWidth >= ViewWidth.SMALL_TABLET;
-
-  const modalContext = React.useContext(ModalRootContext);
-  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.PAGE);
-
-  return (
-    <div
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("ModalPage", platform),
-        `ModalPage--sizeX-${sizeX}`,
-        {
-          "ModalPage--desktop": isDesktop,
-        }
-      )}
-    >
-      <div vkuiClass="ModalPage__in-wrap" ref={refs.innerElement}>
-        <div vkuiClass="ModalPage__in">
-          <div vkuiClass="ModalPage__header" ref={refs.headerElement}>
-            {header}
-          </div>
-
-          <div vkuiClass="ModalPage__content-wrap">
-            <div
-              vkuiClass="ModalPage__content"
-              ref={multiRef<HTMLDivElement>(
-                refs.contentElement,
-                getModalContentRef
-              )}
-            >
-              <div vkuiClass="ModalPage__content-in">{children}</div>
-            </div>
-          </div>
-          {canShowCloseBtn && (
-            <ModalDismissButton onClick={onClose || modalContext.onClose} />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-ModalPage.defaultProps = {
-  settlingHeight: 75,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(ModalPage, {
-  viewWidth: true,
-  viewHeight: true,
-  sizeX: true,
-  hasMouse: true,
-});

package/src/components/ModalPage/Readme.md

@@ -1,9 +0,0 @@
-Модальные страницы.
-
-Это окна, которые появляются снизу экрана и не скрывают полностью открытый в данный момент интерфейс. Как правило, они нужны для разных дополнительных действий (например, выбора фильтра). После ввода информации пользователь остаётся на том же экране, на котором он был. Модальные окна поддерживают все привычные действия: смахивания, закрытия, переходы.
-
-Если контента на странице достаточно для появления скролла, её можно свайпом раскрыть на весь экран. В VK Mini Apps модальные страницы в раскрытом состоянии имеют небольшую полосу сверху, чтобы не перекрывались кнопками управления VK Mini Apps.
-
-Если у ModalRoot `settlingHeight={100}`, то модалка будет сразу открываться на всю высоту.
-
-Пример использования показан в компоненте `ModalRoot`.

package/src/components/ModalPageHeader/ModalPageHeader.css

@@ -1,24 +0,0 @@
-.ModalPageHeader {
-  position: relative;
-  z-index: 2;
-
-  --safe-area-inset-top: 0;
-}
-
-.ModalPageHeader--desktop.ModalPageHeader--android {
-  padding-left: 6px;
-  padding-right: 6px;
-}
-
-.ModalPageHeader--desktop.ModalPageHeader--ios {
-  padding-left: 4px;
-  padding-right: 4px;
-}
-
-.ModalPageHeader .Icon--dismiss_24 {
-  color: var(--placeholder_icon_foreground_primary);
-}
-
-.ModalPageHeader .Icon--cancel_24 {
-  color: var(--icon_secondary);
-}

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -1,57 +0,0 @@
-import * as React from "react";
-import { usePlatform } from "../../hooks/usePlatform";
-import { HasRef } from "../../types";
-import { VKCOM } from "../../lib/platform";
-import PanelHeader, { PanelHeaderProps } from "../PanelHeader/PanelHeader";
-import Separator from "../Separator/Separator";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { ViewHeight, ViewWidth } from "../AdaptivityProvider/AdaptivityContext";
-import "./ModalPageHeader.css";
-
-export interface ModalPageHeaderProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    Omit<PanelHeaderProps, "fixed" | "shadow">,
-    HasRef<HTMLDivElement> {}
-
-const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
-  children,
-  separator,
-  getRef,
-  ...restProps
-}: ModalPageHeaderProps) => {
-  const platform = usePlatform();
-  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
-  const hasSeparator = separator && platform === VKCOM;
-  const isDesktop =
-    viewWidth >= ViewWidth.SMALL_TABLET &&
-    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
-
-  return (
-    <div
-      vkuiClass={classNames(getClassName("ModalPageHeader", platform), {
-        "ModalPageHeader--desktop": isDesktop,
-      })}
-      ref={getRef}
-    >
-      <PanelHeader
-        vkuiClass="ModalPageHeader__in"
-        {...restProps}
-        fixed={false}
-        separator={false}
-        transparent
-      >
-        {children}
-      </PanelHeader>
-      {hasSeparator && <Separator wide />}
-    </div>
-  );
-};
-
-ModalPageHeader.defaultProps = {
-  separator: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default ModalPageHeader;