@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/ModalCard/ModalCard.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { withPlatform } from "../../hoc/withPlatform";
+import { HasPlatform } from "../../types";
+import {
+  withAdaptivity,
+  ViewHeight,
+  ViewWidth,
+} from "../../hoc/withAdaptivity";
+import ModalRootContext, {
+  useModalRegistry,
+} from "../ModalRoot/ModalRootContext";
+import { ModalType } from "../ModalRoot/types";
+import { getNavId, NavIdProps } from "../../lib/getNavId";
+import { warnOnce } from "../../lib/warnOnce";
+import {
+  ModalCardBase,
+  ModalCardBaseProps,
+} from "../ModalCardBase/ModalCardBase";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
+import "./ModalCard.css";
+
+export interface ModalCardProps
+  extends HasPlatform,
+    AdaptivityProps,
+    NavIdProps,
+    ModalCardBaseProps {}
+
+const warn = warnOnce("ModalCard");
+
+const ModalCard: React.FC<ModalCardProps & AdaptivityContextInterface> = (
+  props
+) => {
+  const {
+    icon,
+    header,
+    subheader,
+    children,
+    actions,
+    actionsLayout,
+    onClose,
+    platform,
+    viewWidth,
+    viewHeight,
+    hasMouse,
+    nav,
+    ...restProps
+  } = props;
+
+  const isDesktop =
+    viewWidth >= ViewWidth.SMALL_TABLET &&
+    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+
+  const modalContext = React.useContext(ModalRootContext);
+  const { refs } = useModalRegistry(getNavId(props, warn), ModalType.CARD);
+
+  return (
+    <div
+      {...restProps}
+      vkuiClass={classNames(getClassName("ModalCard", platform), {
+        "ModalCard--desktop": isDesktop,
+      })}
+    >
+      <ModalCardBase
+        vkuiClass="ModalCard__in"
+        getRootRef={refs.innerElement}
+        icon={icon}
+        header={header}
+        subheader={subheader}
+        actions={actions}
+        actionsLayout={actionsLayout}
+        onClose={onClose || modalContext.onClose}
+      >
+        {children}
+      </ModalCardBase>
+    </div>
+  );
+};
+
+ModalCard.defaultProps = {
+  actionsLayout: "horizontal",
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(withPlatform(ModalCard), {
+  viewWidth: true,
+  viewHeight: true,
+  hasMouse: true,
+});

package/src/components/ModalCard/Readme.md

@@ -0,0 +1,9 @@
+Модальные карточки.
+
+Карточка может быть закрыта смахиванием вниз, нажатием на полупрозрачную черную область, либо нажатием по иконке крестика (только на iOS). При этом вызовется свойство `onClose`.
+
+> **Важно**
+>
+> в качестве значения свойства `icon` использовать либо контурные иконки размером 56, например, `<Icon56NotificationOutline />`, либо `<Avatar size={72} src="" />`.
+
+Пример использования показан в компоненте `ModalRoot`.

package/src/components/ModalCardBase/ModalCardBase.css

@@ -0,0 +1,94 @@
+.ModalCardBase {
+}
+
+.ModalCardBase__container {
+  box-sizing: border-box;
+  position: relative;
+  background: var(--modal_card_background);
+  border-radius: 18px;
+  padding: 16px;
+  margin-bottom: var(--safe-area-inset-bottom);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  pointer-events: initial;
+}
+
+.ModalCardBase__container--softwareKeyboardOpened {
+  margin-bottom: 0;
+}
+
+.ModalCardBase__header,
+.ModalCardBase__subheader {
+  text-align: center;
+  margin: 0;
+  padding: 0 8px;
+  word-break: break-word;
+}
+
+.ModalCardBase__header {
+  color: var(--text_primary);
+}
+
+.ModalCardBase__subheader {
+  color: var(--text_secondary);
+}
+
+.ModalCardBase__header + .ModalCardBase__subheader {
+  margin-top: 8px;
+}
+
+.ModalCardBase__icon {
+  margin: 8px auto 16px;
+  color: var(--accent);
+}
+
+.ModalCardBase__actions {
+  display: flex;
+  margin-left: -6px;
+  margin-right: -6px;
+  margin-top: 16px;
+}
+
+.ModalCardBase .UsersStack + .ModalCardBase__actions {
+  margin-top: 32px;
+}
+
+.ModalCardBase__header + .ModalCardBase__actions,
+.ModalCardBase__subheader + .ModalCardBase__actions {
+  margin-top: 32px;
+}
+
+.ModalCardBase__actions--v {
+  flex-direction: column;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+/**
+ * iOS
+ */
+
+.ModalCardBase--ios .ModalCardBase__header:first-child {
+  padding-left: 36px;
+  padding-right: 36px;
+}
+
+/**
+ * Android + vkcom
+ */
+
+.ModalCardBase--android .ModalCardBase__container,
+.ModalCardBase--vkcom .ModalCardBase__container {
+  border-radius: 12px;
+  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.16), 0 0 4px 0 rgba(0, 0, 0, 0.08);
+}
+
+/**
+ * Desktop
+ */
+
+.ModalCardBase--desktop .ModalCardBase__container {
+  border-radius: 8px;
+  box-shadow: 0 16px 16px rgba(0, 0, 0, 0.16), 0 0 8px rgba(0, 0, 0, 0.12);
+}

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -0,0 +1,141 @@
+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

@@ -0,0 +1,38 @@
+Низкоуровневый компонент для отрисовки карточки со сложным содержимым. Используется внутри [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

@@ -0,0 +1,37 @@
+.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

@@ -0,0 +1,32 @@
+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

@@ -0,0 +1,53 @@
+Кнопка для закрытия модальных окон на широком экране.
+Для правильной отрисовки нужно расположить в контейнере с `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

@@ -0,0 +1,146 @@
+.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;
+}