@vkontakte/vkui 4.24.0 → 4.26.0

package/src/components/ModalCardBase/ModalCardBase.tsx

@@ -6,7 +6,6 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { usePlatform } from "../../hooks/usePlatform";
 import {
-  AdaptivityProps,
   ViewHeight,
   ViewWidth,
   withAdaptivity,
@@ -17,6 +16,7 @@ import { 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
@@ -53,7 +53,9 @@ export interface ModalCardBaseProps
   onClose?: VoidFunction;
 }
 
-export const ModalCardBase: React.FC<ModalCardBaseProps> = withAdaptivity(
+export const ModalCardBase = withAdaptivity<
+  ModalCardBaseProps & AdaptivityContextInterface
+>(
   ({
     getRootRef,
     icon,
@@ -67,7 +69,7 @@ export const ModalCardBase: React.FC<ModalCardBaseProps> = withAdaptivity(
     viewHeight,
     onClose,
     ...restProps
-  }: ModalCardBaseProps & AdaptivityProps) => {
+  }) => {
     const platform = usePlatform();
     const isDesktop =
       viewWidth >= ViewWidth.SMALL_TABLET &&

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -28,4 +28,5 @@ ModalDismissButton.defaultProps = {
   "aria-label": "Закрыть",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default ModalDismissButton;

package/src/components/ModalPage/ModalPage.tsx

@@ -8,10 +8,13 @@ import {
 import { usePlatform } from "../../hooks/usePlatform";
 import {
   withAdaptivity,
-  AdaptivityProps,
   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";
@@ -40,7 +43,9 @@ export interface ModalPageProps
 }
 
 const warn = warnOnce("ModalPage");
-const ModalPage: React.FC<ModalPageProps> = (props: ModalPageProps) => {
+const ModalPage: React.FC<ModalPageProps & AdaptivityContextInterface> = (
+  props
+) => {
   const platform = usePlatform();
   const { updateModalHeight } = React.useContext(ModalRootContext);
   const {
@@ -60,7 +65,7 @@ const ModalPage: React.FC<ModalPageProps> = (props: ModalPageProps) => {
 
   React.useEffect(() => {
     updateModalHeight();
-  }, [children]);
+  }, [children, updateModalHeight]);
 
   const isDesktop =
     viewWidth >= ViewWidth.SMALL_TABLET &&
@@ -111,6 +116,7 @@ ModalPage.defaultProps = {
   settlingHeight: 75,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(ModalPage, {
   viewWidth: true,
   viewHeight: true,

package/src/components/ModalPageHeader/ModalPageHeader.css

@@ -1,243 +1,24 @@
-.ModalPageHeader__in,
-.ModalPageHeader__left,
-.ModalPageHeader__right {
-  box-sizing: border-box;
-}
-
-.ModalPageHeader__in {
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-  color: var(--header_text_alternate);
+.ModalPageHeader {
   position: relative;
   z-index: 2;
-}
-
-.ModalPage--android .ModalPageHeader__in {
-  height: var(--modalheader_height_android);
-  padding: 0 4px;
-}
-
-.ModalPage--ios .ModalPageHeader__in {
-  height: var(--modalheader_height_ios);
-  padding: 0 4px;
-}
-
-.ModalPageHeader__separator {
-  margin-top: -1px;
-}
-
-.ModalPageHeader__left,
-.ModalPageHeader__right {
-  flex: 0 0;
-  display: flex;
-  align-items: center;
-  color: var(--header_tint_alternate);
-}
-
-.ModalPageHeader__content {
-  display: flex;
-  align-items: center;
-  overflow: hidden;
-}
-
-.ModalPageHeader__content-in {
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ModalPageHeader__right {
-  justify-content: flex-end;
-  text-align: right;
-}
-
-.ModalPageHeader .PanelHeaderButton .Icon--dismiss_24 {
-  color: var(--placeholder_icon_foreground_primary);
-}
-
-.ModalPageHeader .PanelHeaderButton .Icon--cancel_24 {
-  color: var(--icon_secondary);
-}
-
-/**
- * iOS
- */
-.ModalPageHeader--ios .ModalPageHeader__in {
-  justify-content: space-between;
-}
-
-.ModalPageHeader--ios .ModalPageHeader__left {
-  flex-grow: 1;
-  flex-basis: 0;
-  padding-right: 12px;
-  font-size: 17px;
-}
-
-.ModalPageHeader--ios .ModalPageHeader__left .PanelHeaderButton .Icon--24 {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.ModalPageHeader--ios .ModalPageHeader__content {
-  position: relative;
-  z-index: 1;
-  flex: 2 1;
-  justify-content: center;
-}
-
-.ModalPageHeader--ios .ModalPageHeader__content-in {
-  font-size: 21px;
-  font-family: var(--font-display);
-  font-weight: 500;
-}
-
-@media (min-width: 320px) {
-  .ModalPageHeader--ios .ModalPageHeader__content {
-    flex-grow: 3;
-  }
-}
-
-.ModalPageHeader--ios .ModalPageHeader__right {
-  flex-grow: 1;
-  flex-basis: 0;
-  padding-left: 12px;
-  font-size: 17px;
-}
-
-.ModalPageHeader--ios
-  .ModalPageHeader__right
-  .PanelHeaderButton:not(:first-child) {
-  padding-left: 12px;
-}
-
-.ModalPageHeader--ios .ModalPageHeader__right .PanelHeaderButton .Icon--24 {
-  padding-left: 12px;
-  padding-right: 12px;
-}
-
-.ModalPageHeader--ios.ModalPageHeader--sizeX-regular .ModalPageHeader__in {
-  padding: 0 8px;
-}
 
-.ModalPageHeader--ios.ModalPageHeader--sizeX-regular
-  .ModalPageHeader__left:not(:empty) {
-  padding-left: 0;
+  --safe-area-inset-top: 0;
 }
 
-.ModalPageHeader--ios.ModalPageHeader--sizeX-regular
-  .ModalPageHeader__right:not(:empty) {
-  padding-right: 0;
-}
-
-/**
- * Android
- */
-.ModalPageHeader--android .ModalPageHeader__left,
-.ModalPageHeader--vkcom .ModalPageHeader__left {
+.ModalPageHeader--desktop.ModalPageHeader--android {
+  padding-left: 6px;
   padding-right: 6px;
 }
 
-.ModalPageHeader--android .ModalPageHeader__left:empty {
-  padding-right: 12px;
-}
-
-.ModalPageHeader--android .ModalPageHeader__left:not(:empty) {
+.ModalPageHeader--desktop.ModalPageHeader--ios {
   padding-left: 4px;
-}
-
-.ModalPageHeader--android .ModalPageHeader__dismiss,
-.ModalPageHeader--vkcom .ModalPageHeader__dismiss {
-  color: var(--icon_secondary);
-}
-
-.ModalPageHeader--android .ModalPageHeader__content {
-  max-width: 100%;
-  flex-grow: 2;
-}
-
-.ModalPageHeader--android .ModalPageHeader__content-in {
-  font-size: 23px;
-  font-family: var(--font-display);
-  font-weight: 500;
-}
-
-.ModalPageHeader--android .ModalPageHeader__right,
-.ModalPageHeader--vkcom .ModalPageHeader__right {
-  padding-left: 6px;
-}
-
-.ModalPageHeader--android .ModalPageHeader__right:not(:empty) {
   padding-right: 4px;
 }
 
-.ModalPageHeader--android.ModalPageHeader--sizeX-regular .ModalPageHeader__in {
-  padding: 0 8px;
-}
-
-.ModalPageHeader--android .ModalPageHeader__left:empty {
-  padding-right: 14px;
-}
-
-.ModalPageHeader--android.ModalPageHeader--sizeX-regular
-  .ModalPageHeader__left:not(:empty) {
-  padding-left: 0;
-}
-
-.ModalPageHeader--android .ModalPageHeader__right:empty {
-  padding-left: 14px;
-}
-
-.ModalPageHeader--android.ModalPageHeader--sizeX-regular
-  .ModalPageHeader__right:not(:empty) {
-  padding-right: 0;
-}
-
-/**
- * VKCOM
- */
-
-.ModalPageHeader--vkcom .ModalPageHeader__in {
-  height: var(--panelheader_height_vkcom);
-  justify-content: space-between;
-  padding: 0 2px;
-}
-
-.ModalPageHeader--vkcom .ModalPageHeader__left,
-.ModalPageHeader--vkcom .ModalPageHeader__right {
-  flex-grow: 1;
-  flex-basis: 0;
-}
-
-.ModalPageHeader--vkcom .ModalPageHeader__left {
-  padding-right: 1px;
-}
-
-.ModalPageHeader--vkcom .ModalPageHeader__right {
-  padding-left: 1px;
-}
-
-.ModalPageHeader--vkcom .ModalPageHeader__left:empty {
-  padding-right: 10px;
-}
-
-.ModalPageHeader--vkcom .ModalPageHeader__right:empty {
-  padding-left: 10px;
-}
-
-.ModalPageHeader--vkcom .ModalPageHeader__content {
-  max-width: 100%;
-}
-
-.ModalPageHeader--vkcom .ModalPageHeader__content-in {
-  display: flex;
-  align-items: center;
-  font-size: 15px;
-  line-height: 20px;
-  font-weight: 500;
+.ModalPageHeader .Icon--dismiss_24 {
+  color: var(--placeholder_icon_foreground_primary);
 }
 
-.ModalPageHeader--vkcom .ModalPageHeader__content-in > span {
-  overflow: hidden;
-  width: 100%;
-  text-overflow: ellipsis;
+.ModalPageHeader .Icon--cancel_24 {
+  color: var(--icon_secondary);
 }

package/src/components/ModalPageHeader/ModalPageHeader.tsx

@@ -1,61 +1,50 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
 import { HasRef } from "../../types";
-import { isPrimitiveReactNode } from "../../lib/utils";
 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>,
-    HasRef<HTMLDivElement> {
-  /**
-   * Иконки, отображаемые слева
-   */
-  left?: React.ReactNode;
-  /**
-   * Иконки, отображаемые справа
-   */
-  right?: React.ReactNode;
-  separator?: boolean;
-}
-
-const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = (
-  props: ModalPageHeaderProps
-) => {
+    Omit<PanelHeaderProps, "fixed" | "shadow">,
+    HasRef<HTMLDivElement> {}
+
+const ModalPageHeader: React.FunctionComponent<ModalPageHeaderProps> = ({
+  children,
+  separator,
+  getRef,
+  ...restProps
+}: ModalPageHeaderProps) => {
   const platform = usePlatform();
-  const { sizeX } = useAdaptivity();
-  const { left, right, children, separator, getRef, ...restProps } = props;
-  const isPrimitive = isPrimitiveReactNode(children);
+  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
   const hasSeparator = separator && platform === VKCOM;
+  const isDesktop =
+    viewWidth >= ViewWidth.SMALL_TABLET &&
+    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
 
   return (
     <div
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("ModalPageHeader", platform),
-        `ModalPageHeader--sizeX-${sizeX}`
-      )}
+      vkuiClass={classNames(getClassName("ModalPageHeader", platform), {
+        "ModalPageHeader--desktop": isDesktop,
+      })}
       ref={getRef}
     >
-      <div vkuiClass="ModalPageHeader__in">
-        <div vkuiClass="ModalPageHeader__left">{left}</div>
-
-        <div vkuiClass="ModalPageHeader__content">
-          <div vkuiClass="ModalPageHeader__content-in">
-            {isPrimitive ? <span>{children}</span> : children}
-          </div>
-        </div>
-
-        <div vkuiClass="ModalPageHeader__right">{right}</div>
-      </div>
-
-      {hasSeparator && (
-        <Separator wide vkuiClass="ModalPageHeader__separator" />
-      )}
+      <PanelHeader
+        vkuiClass="ModalPageHeader__in"
+        {...restProps}
+        fixed={false}
+        separator={false}
+        transparent
+      >
+        {children}
+      </PanelHeader>
+      {hasSeparator && <Separator wide />}
     </div>
   );
 };
@@ -64,4 +53,5 @@ ModalPageHeader.defaultProps = {
   separator: true,
 };
 
+// eslint-disable-next-line import/no-default-export
 export default ModalPageHeader;