@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -0,0 +1,77 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { IOS } from "../../lib/platform";
+import { useTimeout } from "../../hooks/useTimeout";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { useDOM } from "../../lib/dom";
+import "./PopoutWrapper.css";
+
+export interface PopoutWrapperProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  hasMask?: boolean;
+  fixed?: boolean;
+  alignY?: "top" | "center" | "bottom";
+  alignX?: "left" | "center" | "right";
+  closing?: boolean;
+}
+
+export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
+  alignY = "center",
+  alignX = "center",
+  closing = false,
+  hasMask = true,
+  fixed = true,
+  children,
+  onClick,
+  ...restProps
+}: PopoutWrapperProps) => {
+  const platform = usePlatform();
+  const [opened, setOpened] = React.useState(!hasMask);
+  const elRef = React.useRef<HTMLDivElement>(null);
+
+  const onFadeInEnd = (e?: React.AnimationEvent) => {
+    if (!e || e.animationName === "vkui-animation-full-fade-in") {
+      setOpened(true);
+    }
+  };
+  const animationFinishFallback = useTimeout(
+    onFadeInEnd,
+    platform === IOS ? 300 : 200
+  );
+  React.useEffect(() => {
+    !opened && animationFinishFallback.set();
+  }, [animationFinishFallback, opened]);
+
+  const { window } = useDOM();
+  useGlobalEventListener(window, "touchmove", (e) => e.preventDefault(), {
+    passive: false,
+  });
+
+  const baseClassNames = getClassName("PopoutWrapper", platform);
+
+  return (
+    <div
+      {...restProps}
+      vkuiClass={classNames(
+        baseClassNames,
+        `PopoutWrapper--v-${alignY}`,
+        `PopoutWrapper--h-${alignX}`,
+        {
+          "PopoutWrapper--closing": closing,
+          "PopoutWrapper--opened": opened,
+          "PopoutWrapper--fixed": fixed,
+          "PopoutWrapper--masked": hasMask,
+        }
+      )}
+      onAnimationEnd={opened ? undefined : onFadeInEnd}
+      ref={elRef}
+    >
+      <div vkuiClass="PopoutWrapper__container">
+        <div vkuiClass="PopoutWrapper__overlay" onClick={onClick} />
+        <div vkuiClass="PopoutWrapper__content">{children}</div>
+      </div>
+    </div>
+  );
+};

package/src/components/PopoutWrapper/Readme.md

@@ -0,0 +1,12 @@
+Компонент-обертка для отрисовки всплывающих окон с затемнением фона. Используется внутри `Alert`, `ActionSheet`
+и `ScreenSpinner`. Свойства `alignY` и `alignX` служат для удобного позиционирования контента. Пример:
+
+```jsx static
+import { PopoutWrapper } from "@vkontakte/vkui";
+
+<PopoutWrapper alignY="center" alignX="center">
+  Some content
+</PopoutWrapper>;
+```
+
+Все всплывающие окна передаются в свойство `popout` компонента [`SplitLayout`](#/SplitLayout).

package/src/components/Popper/Popper.css

@@ -0,0 +1,39 @@
+.PopperPortal {
+  position: relative;
+  z-index: 100;
+}
+
+.Popper__arrow-in {
+  content: "";
+  display: block;
+  width: 20px;
+  height: 8px;
+}
+
+[data-popper-placement^="bottom"] .Popper__arrow {
+  bottom: 100%;
+}
+
+[data-popper-placement^="top"] .Popper__arrow {
+  top: 100%;
+}
+
+[data-popper-placement^="top"] .Popper__arrow-in {
+  transform: rotate(180deg);
+}
+
+[data-popper-placement^="left"] .Popper__arrow {
+  left: calc(100% - 6px);
+}
+
+[data-popper-placement^="left"] .Popper__arrow-in {
+  transform: rotate(90deg);
+}
+
+[data-popper-placement^="right"] .Popper__arrow {
+  right: calc(100% - 6px);
+}
+
+[data-popper-placement^="right"] .Popper__arrow-in {
+  transform: rotate(270deg);
+}

package/src/components/Popper/Popper.tsx

@@ -0,0 +1,231 @@
+import * as React from "react";
+import { usePopper, Modifier } from "react-popper";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { HasRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import "./Popper.css";
+
+export type Placement =
+  | "auto"
+  | "auto-start"
+  | "auto-end"
+  | "top-start"
+  | "top-end"
+  | "bottom-start"
+  | "bottom-end"
+  | "right-start"
+  | "right-end"
+  | "left-start"
+  | "left-end"
+  | "top"
+  | "bottom"
+  | "left"
+  | "right";
+
+export interface PopperCommonProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRef<HTMLDivElement> {
+  /**
+   * По умолчанию компонент выберет наилучшее расположение сам. Но его можно задать извне с помощью этого свойства
+   */
+  placement?: Placement;
+  /**
+   * Отступ по вспомогательной оси
+   */
+  offsetSkidding?: number;
+  /**
+   * Отступ по главной оси
+   */
+  offsetDistance?: number;
+  arrow?: boolean;
+  arrowClassName?: string;
+  /**
+   * Выставлять ширину равной target элементу
+   */
+  sameWidth?: boolean;
+  forcePortal?: boolean;
+  onPlacementChange?: (data: { placement?: Placement }) => void;
+}
+
+export interface PopperProps extends PopperCommonProps {
+  targetRef: React.RefObject<HTMLElement>;
+}
+
+const ARROW_PADDING = 8;
+const ARROW_WIDTH = 20;
+const ARROW_HEIGHT = 8;
+
+export const Popper: React.FC<PopperProps> = ({
+  targetRef,
+  children,
+  getRef,
+  placement = "bottom-start",
+  onPlacementChange,
+  arrow,
+  arrowClassName,
+  sameWidth,
+  offsetDistance = 8,
+  offsetSkidding = 0,
+  forcePortal = true,
+  style: compStyles,
+  ...restProps
+}: PopperProps) => {
+  const [popperNode, setPopperNode] = React.useState<HTMLDivElement | null>(
+    null
+  );
+  const [smallTargetOffsetSkidding, setSmallTargetOffsetSkidding] =
+    React.useState(0);
+  const platform = usePlatform();
+
+  const setExternalRef = useExternRef<HTMLDivElement>(getRef, setPopperNode);
+
+  const modifiers = React.useMemo(() => {
+    const modifiers: Array<Modifier<string>> = [
+      {
+        name: "preventOverflow",
+      },
+      {
+        name: "offset",
+        options: {
+          offset: [
+            arrow ? offsetSkidding - smallTargetOffsetSkidding : offsetSkidding,
+            arrow ? offsetDistance + ARROW_HEIGHT : offsetDistance,
+          ],
+        },
+      },
+      {
+        name: "flip",
+      },
+    ];
+
+    if (arrow) {
+      modifiers.push({
+        name: "arrow",
+        options: {
+          padding: ARROW_PADDING,
+        },
+      });
+    }
+
+    if (sameWidth) {
+      const sameWidth: Modifier<string> = {
+        name: "sameWidth",
+        enabled: true,
+        phase: "beforeWrite",
+        requires: ["computeStyles"],
+        fn: ({ state }) => {
+          state.styles.popper.width = `${state.rects.reference.width}px`;
+        },
+        effect: ({ state }) => {
+          state.elements.popper.style.width = `${
+            (state.elements.reference as HTMLElement).offsetWidth
+          }px`;
+        },
+      };
+
+      modifiers.push(sameWidth);
+    }
+
+    return modifiers;
+  }, [
+    arrow,
+    sameWidth,
+    smallTargetOffsetSkidding,
+    offsetSkidding,
+    offsetDistance,
+  ]);
+
+  const { styles, state, attributes } = usePopper(
+    targetRef.current,
+    popperNode,
+    {
+      placement,
+      modifiers,
+    }
+  );
+
+  const resolvedPlacement = state?.placement;
+  const isEdgePlacement =
+    !!resolvedPlacement && resolvedPlacement.includes("-"); // true, если поппер отрисован скраю
+
+  // Если поппер рисуется скраю, то нужно опционально сместить его в тех случаях, когда стрелка не дотягивается до
+  // таргета из-за маленьких размеров последнего
+  useIsomorphicLayoutEffect(() => {
+    if (arrow && isEdgePlacement) {
+      const placementDirection =
+        resolvedPlacement?.startsWith("bottom") ||
+        resolvedPlacement?.startsWith("top")
+          ? "vertical"
+          : "horizontal";
+
+      const arrowSize =
+        placementDirection === "vertical" ? ARROW_WIDTH : ARROW_HEIGHT;
+      const targetSize =
+        (placementDirection === "vertical"
+          ? targetRef.current?.offsetWidth
+          : targetRef.current?.offsetHeight) ?? 0;
+
+      if (targetSize < arrowSize + 2 * ARROW_PADDING) {
+        setSmallTargetOffsetSkidding(ARROW_PADDING + arrowSize / 2);
+      }
+    } else {
+      setSmallTargetOffsetSkidding(0);
+    }
+  }, [arrow, isEdgePlacement]);
+
+  React.useEffect(() => {
+    if (resolvedPlacement) {
+      onPlacementChange && onPlacementChange({ placement: resolvedPlacement });
+    }
+  }, [onPlacementChange, resolvedPlacement]);
+
+  const dropdown = (
+    <div
+      {...restProps}
+      {...attributes.popper}
+      vkuiClass={getClassName("Popper", platform)}
+      ref={setExternalRef}
+      style={{
+        ...compStyles,
+        ...styles.popper,
+        minWidth: sameWidth ? targetRef.current?.scrollWidth : undefined,
+      }}
+    >
+      {arrow && (
+        <div
+          {...attributes.arrow}
+          vkuiClass="Popper__arrow"
+          data-popper-arrow={true}
+          style={styles.arrow}
+        >
+          <svg
+            vkuiClass="Popper__arrow-in"
+            className={arrowClassName}
+            width="20"
+            height="8"
+            viewBox="0 0 20 8"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fillRule="evenodd"
+              clipRule="evenodd"
+              d="M10 0C13 0 15.9999 8 20 8H0C3.9749 8 7 0 10 0Z"
+              fill="currentColor"
+            />
+          </svg>
+        </div>
+      )}
+      <div vkuiClass="Popper__content">{children}</div>
+    </div>
+  );
+
+  return (
+    <AppRootPortal forcePortal={forcePortal} vkuiClass="PopperPortal">
+      {dropdown}
+    </AppRootPortal>
+  );
+};

package/src/components/Popper/Readme.md

@@ -0,0 +1,33 @@
+> **Важно**
+>
+> Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
+
+Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позиционироваться
+рядом с целевым элементом. На основе этого компонента сделаны [ClickPopper](#/ClickPopper) и [HoverPopper](#/HoverPopper),
+реализующие логику скрытия и показа по клику и по ховеру соответственно.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+const [shown, setShown] = React.useState(false);
+const buttonRef = React.useRef();
+
+return (
+  <React.Fragment>
+    <Button
+      getRootRef={buttonRef}
+      onClick={() => setShown(!shown)}
+      style={{ margin: 50 }}
+    >
+      {shown ? "Закрыть" : "Открыть"}
+    </Button>
+    {shown && (
+      <Popper
+        offsetDistance={8}
+        style={{ padding: "9px 12px" }}
+        targetRef={buttonRef}
+      >
+        Привет
+      </Popper>
+    )}
+  </React.Fragment>
+);
+```

package/src/components/Progress/Progress.css

@@ -0,0 +1,12 @@
+.Progress {
+  border-radius: 1px;
+  background: var(--loader_track_fill);
+  height: 2px;
+}
+
+.Progress__in {
+  height: 100%;
+  border-radius: inherit;
+  transition: width 0.2s ease;
+  background: var(--accent);
+}

package/src/components/Progress/Progress.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Progress.css";
+
+export interface ProgressProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
+  value?: number;
+}
+
+const PROGRESS_MIN_VALUE = 0;
+const PROGRESS_MAX_VALUE = 100;
+
+const Progress: React.FC<ProgressProps> = ({
+  value = 0,
+  getRootRef,
+  ...restProps
+}: ProgressProps) => {
+  const platform = usePlatform();
+
+  const progress = Math.max(
+    PROGRESS_MIN_VALUE,
+    Math.min(value, PROGRESS_MAX_VALUE)
+  );
+
+  return (
+    <div
+      aria-valuenow={value}
+      {...restProps}
+      role="progressbar"
+      aria-valuemin={PROGRESS_MIN_VALUE}
+      aria-valuemax={PROGRESS_MAX_VALUE}
+      ref={getRootRef}
+      vkuiClass={getClassName("Progress", platform)}
+    >
+      <div vkuiClass="Progress__bg" aria-hidden="true" />
+      <div
+        vkuiClass="Progress__in"
+        style={{ width: `${progress}%` }}
+        aria-hidden="true"
+      />
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Progress;

package/src/components/Progress/Readme.md

@@ -0,0 +1,14 @@
+```
+  <View activePanel="progress">
+    <Panel id="progress">
+      <PanelHeader>
+        Progress
+      </PanelHeader>
+      <Group>
+        <Div>
+          <Progress value={40} />
+        </Div>
+      </Group>
+    </Panel>
+  </View>
+```

package/src/components/PromoBanner/PromoBanner.css

@@ -0,0 +1,55 @@
+.PromoBanner {
+  width: 100%;
+  box-sizing: border-box;
+  outline: 1px solid var(--separator_alpha);
+  color: var(--text_primary);
+  background: var(--background_content);
+  padding-bottom: 10px;
+  position: relative;
+}
+
+.PromoBanner__head {
+  display: flex;
+  padding-top: 14px;
+  padding-bottom: 10px;
+  color: var(--text_secondary);
+}
+
+.PromoBanner__age {
+  margin-left: 6px;
+}
+
+.PromoBanner__close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 48px;
+  height: 48px;
+  color: var(--placeholder_icon_foreground_primary);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.PromoBanner__close:active {
+  opacity: 0.7;
+}
+
+.PromoBanner__pixels {
+  display: none;
+}
+
+/* iOS */
+
+.PromoBanner--ios .PromoBanner__head {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+/* Android */
+
+.PromoBanner--android .PromoBanner__head,
+.PromoBanner--vkcom .PromoBanner__head {
+  padding-left: 16px;
+  padding-right: 16px;
+}

package/src/components/PromoBanner/PromoBanner.tsx

@@ -0,0 +1,135 @@
+import * as React from "react";
+import { Icon24Dismiss } from "@vkontakte/icons";
+import Button from "../Button/Button";
+import SimpleCell from "../SimpleCell/SimpleCell";
+import Avatar from "../Avatar/Avatar";
+import { Caption } from "../Typography/Caption/Caption";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import { warnOnce } from "../../lib/warnOnce";
+import "./PromoBanner.css";
+
+type StatsType =
+  | "playbackStarted" // Начало показа
+  | "click"; // Клик по баннеру
+
+type BannerData = {
+  title?: string;
+  url_types?: string; // eslint-disable-line camelcase
+  bannerID?: string;
+  imageWidth?: number;
+  imageHeight?: number;
+  imageLink?: string;
+  trackingLink?: string;
+  type?: string;
+  iconWidth?: number;
+  domain?: string;
+  ctaText?: string;
+  advertisingLabel?: string;
+  iconLink?: string;
+  statistics?: Array<{ type: StatsType; url: string }>;
+  openInBrowser?: boolean;
+  iconHeight?: number;
+  directLink?: boolean;
+  navigationType?: string;
+  description?: string;
+  ageRestrictions?: string;
+  /** @deprecated */
+  ageRestriction?: number;
+};
+
+export interface PromoBannerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Данные рекламного баннера, полученные из VKWebAppGetAds */
+  bannerData: BannerData;
+  /** Флаг скрытия кнопки закрытия рекламы */
+  isCloseButtonHidden?: boolean;
+  /** Хандлер закрытия рекламы */
+  onClose: () => void;
+}
+
+const warn = warnOnce("PromoBanner");
+const PromoBanner = (props: PromoBannerProps) => {
+  const platform = usePlatform();
+  const { bannerData = {}, onClose, ...restProps } = props;
+
+  const ageRestrictions =
+    bannerData.ageRestrictions != null
+      ? parseInt(bannerData.ageRestrictions)
+      : bannerData.ageRestriction;
+
+  if (bannerData.ageRestriction && process.env.NODE_ENV === "development") {
+    warn(
+      "Свойство bannerData.ageRestriction устарело и будет удалено в 5.0.0. Используйте bannerData.ageRestrictions"
+    );
+  }
+
+  const [currentPixel, setCurrentPixel] = React.useState("");
+
+  const statsPixels = React.useMemo(
+    () =>
+      (bannerData.statistics
+        ? bannerData.statistics.reduce(
+            (acc, item) => ({ ...acc, [item.type]: item.url }),
+            {}
+          )
+        : {}) as Record<StatsType, string | void>,
+    [bannerData.statistics]
+  );
+
+  const onClick = React.useCallback(
+    () => setCurrentPixel(statsPixels.click || ""),
+    [statsPixels.click]
+  );
+
+  React.useEffect(() => {
+    if (statsPixels.playbackStarted) {
+      setCurrentPixel(statsPixels.playbackStarted);
+    }
+  }, [statsPixels.playbackStarted]);
+
+  return (
+    <div vkuiClass={getClassName("PromoBanner", platform)} {...restProps}>
+      <div vkuiClass="PromoBanner__head">
+        <Caption vkuiClass="PromoBanner__label">
+          {bannerData.advertisingLabel || "Advertisement"}
+        </Caption>
+        {ageRestrictions != null && (
+          <Caption vkuiClass="PromoBanner__age">{ageRestrictions}+</Caption>
+        )}
+
+        {!props.isCloseButtonHidden && (
+          <div vkuiClass="PromoBanner__close" onClick={props.onClose}>
+            <Icon24Dismiss />
+          </div>
+        )}
+      </div>
+      <SimpleCell
+        href={bannerData.trackingLink}
+        onClick={onClick}
+        rel="nofollow noopener noreferrer"
+        target="_blank"
+        before={
+          <Avatar
+            mode="image"
+            size={48}
+            src={bannerData.iconLink}
+            alt={bannerData.title}
+          />
+        }
+        after={<Button mode="outline">{bannerData.ctaText}</Button>}
+        description={bannerData.domain}
+      >
+        {bannerData.title}
+      </SimpleCell>
+
+      {currentPixel.length > 0 && (
+        <div vkuiClass="PromoBanner__pixels">
+          <img src={currentPixel} alt="" />
+        </div>
+      )}
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default PromoBanner;

package/src/components/PromoBanner/Readme.md

@@ -0,0 +1,25 @@
+```jsx
+const promoBannerProps = {
+  title: "Заголовок",
+  domain: "vk.com",
+  trackingLink: "https://vk.com",
+  ctaText: "Перейти",
+  advertisingLabel: "Реклама",
+  iconLink:
+    "https://sun9-7.userapi.com/c846420/v846420985/1526c3/ISX7VF8NjZk.jpg",
+  description: "Описание рекламы",
+  ageRestrictions: "14+",
+  statistics: [
+    { url: "", type: "playbackStarted" },
+    { url: "", type: "click" },
+  ],
+};
+
+<View activePanel="promo">
+  <Panel id="promo">
+    <FixedLayout vertical="bottom">
+      <PromoBanner bannerData={promoBannerProps} />
+    </FixedLayout>
+  </Panel>
+</View>;
+```