@vkontakte/vkui 4.32.0 → 4.33.0

package/src/components/Banner/Banner.css

@@ -1,7 +1,7 @@
 .Banner {
   margin: 12px 0;
-  padding: 0 16px;
-  color: var(--text_primary);
+  padding: 0 var(--vkui--size_base_padding_horizontal--regular);
+  color: var(--text_primary, var(--vkui--color_text_primary));
 }
 
 .Banner__in {
@@ -9,10 +9,12 @@
   display: flex;
   flex-flow: row nowrap;
   align-items: stretch;
-  padding: 12px;
-  padding-left: 16px;
-  background-color: var(--content_tint_background);
-  border-radius: 8px;
+  padding: 12px 12px 12px 16px;
+  background-color: var(
+    --content_tint_background,
+    var(--vkui--color_background_secondary)
+  );
+  border-radius: var(--vkui--size_border_radius--regular);
   overflow: hidden;
 }
 
@@ -24,7 +26,8 @@
   display: block;
   width: 100%;
   height: 100%;
-  border: var(--thin-border) solid var(--image_border);
+  border: var(--thin-border) solid
+    var(--image_border, var(--vkui--color_image_border_alpha));
   border-radius: inherit;
   pointer-events: none;
   box-sizing: border-box;
@@ -53,7 +56,11 @@
 
 .Banner__subheader {
   display: block;
-  color: var(--text_subhead);
+  color: var(--text_subhead, var(--vkui--color_text_subhead));
+}
+
+.Banner__text {
+  color: var(--vkui--color_text_subhead);
 }
 
 .Banner__bg {
@@ -76,7 +83,7 @@
   align-items: center;
   justify-content: flex-end;
   width: 28px;
-  color: var(--icon_tertiary);
+  color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
 }
 
 .Banner__dismiss {
@@ -88,7 +95,7 @@
   align-content: center;
   align-items: center;
   justify-content: center;
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
   z-index: 3;
 }
 
@@ -105,16 +112,19 @@
  * Mode "image"
  */
 .Banner--md-image .Banner__in {
-  background-color: var(--content_tint_background);
+  background-color: var(
+    --content_tint_background,
+    var(--vkui--color_background_secondary)
+  );
 }
 
 .Banner--md-image .Banner__dismiss,
 .Banner--inverted {
-  color: var(--white);
+  color: var(--white, var(--vkui--color_text_contrast));
 }
 
 .Banner--inverted .Banner__subheader {
-  color: var(--white);
+  color: var(--white, var(--vkui--color_text_contrast));
   opacity: 0.72;
 }
 
@@ -137,18 +147,7 @@
   margin-top: 4px;
 }
 
-/**
- * iOS
- */
-.Banner--ios {
-  padding: 0 12px;
-}
-
-.Banner--ios .Banner__in {
-  border-radius: 10px;
-}
-
 .Banner--ios .Banner__dismiss,
 .Banner--ios.Banner--md-image .Banner__dismiss {
-  color: var(--icon_tertiary);
+  color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
 }

package/src/components/Banner/Banner.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { HasComponent } from "../../types";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { usePlatform } from "../../hooks/usePlatform";
-import { ANDROID, IOS, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { hasReactNode } from "../../lib/utils";
 import {
   Icon24Chevron,
@@ -11,8 +10,8 @@ import {
   Icon24DismissDark,
   Icon24Cancel,
 } from "@vkontakte/icons";
-import Tappable from "../Tappable/Tappable";
-import IconButton from "../IconButton/IconButton";
+import { Tappable } from "../Tappable/Tappable";
+import { IconButton } from "../IconButton/IconButton";
 import { Headline } from "../Typography/Headline/Headline";
 import { Subhead } from "../Typography/Subhead/Subhead";
 import { Text } from "../Typography/Text/Text";
@@ -97,38 +96,35 @@ const BannerHeader: React.FC<BannerTypographyProps> = ({
 /**
  * @see https://vkcom.github.io/VKUI/#/Banner
  */
-const Banner: React.FC<BannerProps> = (props: BannerProps) => {
+export const Banner = ({
+  mode = "tint",
+  imageTheme = "dark",
+  size = "s",
+  before,
+  asideMode,
+  header,
+  subheader,
+  text,
+  children,
+  background,
+  actions,
+  onDismiss,
+  dismissLabel = "Скрыть",
+  ...restProps
+}: BannerProps) => {
   const platform = usePlatform();
-  const {
-    mode,
-    imageTheme,
-    size,
-    before,
-    asideMode,
-    header,
-    subheader,
-    text,
-    children,
-    background,
-    actions,
-    onDismiss,
-    dismissLabel,
-    ...restProps
-  } = props;
 
   const SubheaderTypography = size === "m" ? Text : Subhead;
 
   return (
     <section
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("Banner", platform),
+        "Banner",
+        platform === IOS && "Banner--ios",
         `Banner--md-${mode}`,
         `Banner--sz-${size}`,
-        {
-          "Banner--inverted": mode === "image" && imageTheme === "dark",
-        }
+        mode === "image" && imageTheme === "dark" && "Banner--inverted"
       )}
     >
       <Tappable
@@ -178,15 +174,15 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
                 hoverMode="opacity"
                 hasActive={false}
               >
-                {(platform === ANDROID || platform === VKCOM) && (
-                  <Icon24Cancel />
-                )}
-                {platform === IOS &&
-                  (mode === "image" ? (
+                {platform === IOS ? (
+                  mode === "image" ? (
                     <Icon24DismissDark />
                   ) : (
                     <Icon24DismissSubstract />
-                  ))}
+                  )
+                ) : (
+                  <Icon24Cancel />
+                )}
               </IconButton>
             )}
           </div>
@@ -195,13 +191,3 @@ const Banner: React.FC<BannerProps> = (props: BannerProps) => {
     </section>
   );
 };
-
-Banner.defaultProps = {
-  dismissLabel: "Скрыть",
-  mode: "tint",
-  size: "s",
-  imageTheme: "dark",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Banner;

package/src/components/{Gallery/Gallery.css → BaseGallery/BaseGallery.css}

@@ -23,6 +23,10 @@
   align-items: stretch;
 }
 
+.Gallery__layer:empty {
+  min-height: 0;
+}
+
 .Gallery__slide {
   width: 100%;
   flex: 0 0 auto;
@@ -51,11 +55,11 @@
 }
 
 .Gallery__bullets--dark .Gallery__bullet {
-  background-color: #000;
+  background-color: var(--vkui--color_icon_primary_invariably);
 }
 
 .Gallery__bullets--light .Gallery__bullet {
-  background-color: #fff;
+  background-color: var(--vkui--color_icon_contrast);
 }
 
 .Gallery__bullet {
@@ -63,7 +67,7 @@
   width: 6px;
   border-radius: 50%;
   margin: 0 3px;
-  opacity: 0.56;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .Gallery__bullet--active {

package/src/components/BaseGallery/BaseGallery.tsx

@@ -0,0 +1,394 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { Touch, TouchEvent } from "../Touch/Touch";
+import HorizontalScrollArrow from "../HorizontalScroll/HorizontalScrollArrow";
+import { useExternRef } from "../../hooks/useExternRef";
+import { useDOM } from "../../lib/dom";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
+import { calcMax, calcMin } from "./helpers";
+import {
+  BaseGalleryProps,
+  GallerySlidesState,
+  LayoutState,
+  ShiftingState,
+} from "./types";
+import "./BaseGallery.css";
+
+const ANIMATION_DURATION = 0.24;
+
+const LAYOUT_DEFAULT_STATE = {
+  containerWidth: 0,
+  viewporOffsettWidth: 0,
+  layerWidth: 0,
+  min: 0,
+  max: 0,
+  slides: [],
+  isFullyVisible: true,
+};
+
+const SHIFT_DEFAULT_STATE = {
+  animation: undefined,
+  shiftX: 0,
+  dragging: false,
+  deltaX: 0,
+  indent: 0,
+};
+
+export const BaseGallery = ({
+  bullets = false,
+  getRootRef,
+  children,
+  slideWidth = "100%",
+  slideIndex = 0,
+  isDraggable = true,
+  onDragStart,
+  onDragEnd,
+  onChange,
+  onPrevClick,
+  onNextClick,
+  onEnd: onEndProp,
+  align = "left",
+  showArrows,
+  getRef,
+  ...restProps
+}: BaseGalleryProps) => {
+  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
+  const layoutState = React.useRef<LayoutState>(LAYOUT_DEFAULT_STATE);
+  const [shiftState, setShiftState] =
+    React.useState<ShiftingState>(SHIFT_DEFAULT_STATE);
+
+  const rootRef = useExternRef(getRootRef);
+  const viewportRef = useExternRef(getRef);
+
+  const { window } = useDOM();
+  const { hasMouse } = useAdaptivity();
+
+  const isCenterWithCustomWidth = slideWidth === "custom" && align === "center";
+
+  const validateIndent = (value: number) => {
+    const localMax = layoutState.current.max ?? 0;
+    const localMin = layoutState.current.min ?? 0;
+
+    if (value < localMin) {
+      return localMin;
+    } else if (value > localMax) {
+      return localMax;
+    }
+
+    return value;
+  };
+
+  /*
+   * Считает отступ слоя галереи
+   */
+  const calculateIndent = (targetIndex: number) => {
+    if (layoutState.current.isFullyVisible) {
+      return 0;
+    }
+
+    const targetSlide = layoutState.current.slides?.length
+      ? layoutState.current.slides[targetIndex]
+      : null;
+
+    if (targetSlide) {
+      const { coordX, width } = targetSlide;
+
+      if (isCenterWithCustomWidth) {
+        const viewportWidth = layoutState.current.viewporOffsettWidth ?? 0;
+        return viewportWidth / 2 - coordX - width / 2;
+      }
+
+      return validateIndent(-1 * coordX);
+    }
+
+    return 0;
+  };
+
+  /*
+   * Считает отступ слоя галереи во время драга
+   */
+  const calculateDragIndent = () => {
+    const localMax = layoutState.current.max ?? 0;
+    const localMin = layoutState.current.min ?? 0;
+    const indent = shiftState.shiftX + shiftState.deltaX;
+
+    if (indent > localMax) {
+      return localMax + Number((indent - localMax) / 3);
+    } else if (indent < localMin) {
+      return localMin + Number((indent - localMin) / 3);
+    }
+
+    return indent;
+  };
+
+  const initializeSlides = (options: { animation?: boolean } = {}) => {
+    const localSlides =
+      React.Children.map(
+        children,
+        (_item: React.ReactNode, i: number): GallerySlidesState => {
+          const elem = slidesStore.current[`slide-${i}`];
+          return {
+            coordX: elem?.offsetLeft ?? 0,
+            width: elem?.offsetWidth ?? 0,
+          };
+        }
+      ) ?? [];
+
+    const localContainerWidth = rootRef.current?.offsetWidth ?? 0;
+    const localViewporOffsettWidth = viewportRef.current?.offsetWidth ?? 0;
+    const localLayerWidth = localSlides.reduce(
+      (val: number, slide: GallerySlidesState) => slide.width + val,
+      0
+    );
+
+    layoutState.current = {
+      containerWidth: localContainerWidth,
+      viewporOffsettWidth: localViewporOffsettWidth,
+      layerWidth: localLayerWidth,
+      max: calcMax({
+        slides: localSlides,
+        viewporOffsettWidth: localViewporOffsettWidth,
+        isCenterWithCustomWidth,
+      }),
+      min: calcMin({
+        containerWidth: localContainerWidth,
+        layerWidth: localLayerWidth,
+        slides: localSlides,
+        viewporOffsettWidth: localViewporOffsettWidth,
+        isCenterWithCustomWidth,
+        align,
+      }),
+      slides: localSlides,
+      isFullyVisible: localLayerWidth <= localContainerWidth,
+    };
+
+    setShiftState((prevState) => ({
+      ...prevState,
+      shiftX: calculateIndent(slideIndex),
+      animation:
+        options.animation ??
+        prevState.shiftX === validateIndent(prevState.shiftX),
+    }));
+  };
+
+  const onResize = () => {
+    if (shiftState.animation !== undefined) {
+      initializeSlides({ animation: false });
+    }
+  };
+
+  useGlobalEventListener(window, "resize", onResize);
+
+  useIsomorphicLayoutEffect(() => {
+    initializeSlides({ animation: false });
+  }, [children, align, slideWidth]);
+
+  useIsomorphicLayoutEffect(() => {
+    if (shiftState.animation !== undefined) {
+      setShiftState((prevState) => ({
+        ...prevState,
+        animation: true,
+        deltaX: 0,
+        shiftX: calculateIndent(slideIndex ?? 0),
+      }));
+    }
+  }, [slideIndex]);
+
+  const slideLeft = () => {
+    onChange?.(slideIndex - 1);
+    onPrevClick?.();
+  };
+
+  const slideRight = () => {
+    onChange?.(slideIndex + 1);
+    onNextClick?.();
+  };
+
+  /*
+   * Получает индекс слайда, к которому будет осуществлен переход
+   */
+  const getTarget = (e: TouchEvent) => {
+    const expectDeltaX = (shiftState.deltaX / e.duration) * 240 * 0.6;
+    const shift =
+      shiftState.shiftX +
+      shiftState.deltaX +
+      expectDeltaX -
+      (layoutState.current.max ?? 0);
+    const direction = shiftState.deltaX < 0 ? 1 : -1;
+
+    // Находим ближайшую границу слайда к текущему отступу
+    let targetIndex = layoutState.current.slides.reduce(
+      (val: number, item: GallerySlidesState, index: number) => {
+        const previousValue = Math.abs(
+          layoutState.current.slides[val].coordX + shift
+        );
+        const currentValue = Math.abs(item.coordX + shift);
+
+        return previousValue < currentValue ? val : index;
+      },
+      slideIndex
+    );
+
+    if (targetIndex === slideIndex) {
+      let targetSlide = slideIndex + direction;
+
+      if (targetSlide >= 0 && targetSlide < layoutState.current.slides.length) {
+        if (
+          Math.abs(shiftState.deltaX) >
+          layoutState.current.slides[targetSlide].width * 0.05
+        ) {
+          targetIndex = targetSlide;
+        }
+      }
+    }
+
+    return targetIndex;
+  };
+
+  const onStart = () => {
+    setShiftState((prevState) => ({ ...prevState, animation: false }));
+  };
+
+  const onMoveX = (e: TouchEvent) => {
+    if (isDraggable && !layoutState.current.isFullyVisible) {
+      e.originalEvent.preventDefault();
+
+      if (e.isSlideX) {
+        // TODO исправить в рамках issue #2698
+        onDragStart?.(e);
+
+        if (shiftState.deltaX !== e.shiftX) {
+          setShiftState((prevState) => ({
+            ...prevState,
+            deltaX: e.shiftX,
+            dragging: e.isSlideX,
+          }));
+        }
+      }
+    }
+  };
+
+  const onEnd = (e: TouchEvent) => {
+    const targetIndex = e.isSlide ? getTarget(e) : slideIndex ?? 0;
+    onDragEnd?.(e);
+
+    const nextShiftState: Partial<ShiftingState> = {
+      animation: true,
+      dragging: false,
+      deltaX: 0,
+    };
+
+    const shiftXStick = calculateDragIndent();
+    if (targetIndex !== slideIndex) {
+      // Сохраняем сдвиг слайда в том положении, в каком его оставили после драга (fix issue #2185)
+      nextShiftState.shiftX = shiftXStick;
+    }
+
+    setShiftState((prevState) => ({ ...prevState, ...nextShiftState }));
+    if (targetIndex !== slideIndex) {
+      onChange?.(targetIndex);
+    }
+
+    // TODO исправить в рамках issue #2698
+    onEndProp?.({ targetIndex });
+  };
+
+  const indent = shiftState.dragging
+    ? calculateDragIndent()
+    : shiftState.shiftX;
+
+  const layerStyle = {
+    WebkitTransform: `translateX(${indent}px)`,
+    transform: `translateX(${indent}px)`,
+    WebkitTransition: shiftState.animation
+      ? `-webkit-transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`
+      : "none",
+    transition: shiftState.animation
+      ? `transform ${ANIMATION_DURATION}s cubic-bezier(.1, 0, .25, 1)`
+      : "none",
+  };
+
+  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {
+    slidesStore.current[`slide-${slideIndex}`] = slideRef;
+  };
+
+  // shiftX is negative number <= 0, we can swipe back only if it is < 0
+  const canSlideLeft =
+    !layoutState.current.isFullyVisible && shiftState.shiftX < 0;
+
+  const canSlideRight =
+    !layoutState.current.isFullyVisible &&
+    // we can't move right when gallery layer fully scrolled right, if gallery aligned by left side
+    ((align === "left" &&
+      layoutState.current.containerWidth - shiftState.shiftX <
+        (layoutState.current.layerWidth ?? 0)) ||
+      // otherwise we need to check current slide index (align = right or align = center)
+      (align !== "left" && slideIndex < layoutState.current.slides.length - 1));
+
+  return (
+    <div
+      {...restProps}
+      vkuiClass={classNames(
+        "Gallery",
+        `Gallery--${align}`,
+        shiftState.dragging && "Gallery--dragging",
+        slideWidth === "custom" && "Gallery--custom-width"
+      )}
+      ref={rootRef}
+    >
+      <Touch
+        vkuiClass="Gallery__viewport"
+        onStartX={onStart}
+        onMoveX={onMoveX}
+        onEnd={onEnd}
+        style={{ width: slideWidth === "custom" ? "100%" : slideWidth }}
+        getRootRef={viewportRef}
+        noSlideClick
+      >
+        <div vkuiClass="Gallery__layer" style={layerStyle}>
+          {React.Children.map(children, (item: React.ReactNode, i: number) => (
+            <div
+              vkuiClass="Gallery__slide"
+              key={`slide-${i}`}
+              ref={(el) => setSlideRef(el, i)}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      </Touch>
+
+      {bullets && (
+        <div
+          aria-hidden="true"
+          vkuiClass={classNames(
+            "Gallery__bullets",
+            `Gallery__bullets--${bullets}`
+          )}
+        >
+          {React.Children.map(
+            children,
+            (_item: React.ReactNode, index: number) => (
+              <div
+                vkuiClass={classNames(
+                  "Gallery__bullet",
+                  index === slideIndex && "Gallery__bullet--active"
+                )}
+                key={index}
+              />
+            )
+          )}
+        </div>
+      )}
+
+      {showArrows && hasMouse && canSlideLeft && (
+        <HorizontalScrollArrow direction="left" onClick={slideLeft} />
+      )}
+      {showArrows && hasMouse && canSlideRight && (
+        <HorizontalScrollArrow direction="right" onClick={slideRight} />
+      )}
+    </div>
+  );
+};

package/src/components/BaseGallery/helpers.ts

@@ -0,0 +1,51 @@
+import { LayoutState } from "./types";
+import { HasAlign } from "../../types";
+
+interface CalcMin extends Partial<LayoutState> {
+  isCenterWithCustomWidth: boolean;
+  align: HasAlign["align"];
+}
+
+export const calcMin = ({
+  containerWidth = 0,
+  layerWidth = 0,
+  slides = [],
+  viewporOffsettWidth = 0,
+  align,
+  isCenterWithCustomWidth,
+}: CalcMin) => {
+  switch (align) {
+    case "left":
+      return containerWidth - layerWidth;
+    case "right":
+      return viewporOffsettWidth - layerWidth;
+    case "center":
+      if (isCenterWithCustomWidth && slides.length) {
+        const { coordX, width } = slides[slides.length - 1];
+        return viewporOffsettWidth / 2 - coordX - width / 2;
+      } else {
+        return (
+          viewporOffsettWidth -
+          (containerWidth - viewporOffsettWidth) / 2 -
+          layerWidth
+        );
+      }
+  }
+  return undefined;
+};
+
+interface CalcMax extends Partial<LayoutState> {
+  isCenterWithCustomWidth: boolean;
+}
+
+export const calcMax = ({
+  slides = [],
+  viewporOffsettWidth = 0,
+  isCenterWithCustomWidth,
+}: CalcMax) => {
+  if (isCenterWithCustomWidth && slides.length) {
+    const { width, coordX } = slides[0];
+    return viewporOffsettWidth / 2 - coordX - width / 2;
+  }
+  return 0;
+};