@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/BaseGallery/CarouselBase/CarouselBase.tsx

@@ -0,0 +1,381 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivityHasPointer } from '../../../hooks/useAdaptivityHasPointer';
+import { useExternRef } from '../../../hooks/useExternRef';
+import { useGlobalEventListener } from '../../../hooks/useGlobalEventListener';
+import { useDOM } from '../../../lib/dom';
+import { useIsomorphicLayoutEffect } from '../../../lib/useIsomorphicLayoutEffect';
+import { warnOnce } from '../../../lib/warnOnce';
+import { RootComponent } from '../../RootComponent/RootComponent';
+import { ScrollArrow } from '../../ScrollArrow/ScrollArrow';
+import { Touch, TouchEvent } from '../../Touch/Touch';
+import { BaseGalleryProps, GallerySlidesState } from '../types';
+import { ANIMATION_DURATION, CONTROL_ELEMENTS_STATE, SLIDES_MANAGER_STATE } from './constants';
+import { calculateIndent, getLoopPoints, getTargetIndex } from './helpers';
+import { useSlideAnimation } from './hooks';
+import { ControlElementsState, SlidesManagerState } from './types';
+import styles from '../BaseGallery.module.css';
+
+const stylesBullets = {
+  dark: styles['BaseGallery__bullets--dark'],
+  light: styles['BaseGallery__bullets--light'],
+};
+
+const warn = warnOnce('Gallery');
+
+export const CarouselBase = ({
+  bullets = false,
+  getRootRef,
+  children,
+  slideWidth = '100%',
+  slideIndex = 0,
+  isDraggable: isDraggableProp = true,
+  onDragStart,
+  onDragEnd,
+  onChange,
+  onPrevClick,
+  onNextClick,
+  align = 'left',
+  showArrows,
+  getRef,
+  arrowSize = 'l',
+  ...restProps
+}: BaseGalleryProps) => {
+  const slidesStore = React.useRef<Record<string, HTMLDivElement | null>>({});
+  const slidesManager = React.useRef<SlidesManagerState>(SLIDES_MANAGER_STATE);
+
+  const rootRef = useExternRef(getRootRef);
+  const viewportRef = useExternRef(getRef);
+  const layerRef = React.useRef<HTMLDivElement>(null);
+  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);
+  const shiftXCurrentRef = React.useRef<number>(0);
+  const shiftXDeltaRef = React.useRef<number>(0);
+  const initialized = React.useRef<boolean>(false);
+  const { addToAnimationQueue, getAnimateFunction, startAnimation } = useSlideAnimation();
+
+  const [controlElementsState, setControlElementsState] =
+    React.useState<ControlElementsState>(CONTROL_ELEMENTS_STATE);
+
+  const { window } = useDOM();
+  const hasPointer = useAdaptivityHasPointer();
+
+  const isCenterWithCustomWidth = slideWidth === 'custom' && align === 'center';
+
+  const transformCssStyles = (shiftX: number, animation = false) => {
+    slidesManager.current.loopPoints.forEach((loopPoint) => {
+      const { target, index } = loopPoint;
+      const slide = slidesStore.current[index];
+      if (slide) {
+        slide.style.transform = `translate3d(${target(shiftX)}px, 0, 0)`;
+      }
+    });
+
+    if (layerRef.current) {
+      layerRef.current.style.transform = `translate3d(${shiftX}px, 0, 0)`;
+      layerRef.current.style.transition = animation
+        ? `transform ${ANIMATION_DURATION}ms cubic-bezier(.1, 0, .25, 1)`
+        : '';
+    }
+  };
+
+  const requestTransform = (shiftX: number, animation = false) => {
+    const { snaps, contentSize, slides } = slidesManager.current;
+
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
+    animationFrameRef.current = requestAnimationFrame(() => {
+      if (shiftX > snaps[0]) {
+        shiftXCurrentRef.current = -contentSize + snaps[0];
+        shiftX = shiftXCurrentRef.current + shiftXDeltaRef.current;
+      }
+      const lastPoint = slides[slides.length - 1].width + slides[slides.length - 1].coordX;
+
+      if (shiftX <= -lastPoint) {
+        shiftXCurrentRef.current = Math.abs(shiftXDeltaRef.current) + snaps[0];
+      }
+      transformCssStyles(shiftX, animation);
+    });
+  };
+
+  const initializeSlides = () => {
+    if (!rootRef.current || !viewportRef.current) {
+      return;
+    }
+    let localSlides =
+      React.Children.map(children, (_item, i): GallerySlidesState => {
+        const elem = slidesStore.current[i] || { offsetLeft: 0, offsetWidth: 0 };
+        return { coordX: elem.offsetLeft, width: elem.offsetWidth };
+      }) || [];
+
+    const containerWidth = rootRef.current.offsetWidth;
+    const viewportOffsetWidth = viewportRef.current.offsetWidth;
+    const layerWidth = localSlides.reduce((val, slide) => slide.width + val, 0);
+
+    if (process.env.NODE_ENV === 'development') {
+      let remainingWidth = containerWidth;
+      let slideIndex = 0;
+
+      while (remainingWidth > 0 && slideIndex < localSlides.length) {
+        remainingWidth -= localSlides[slideIndex].width;
+        slideIndex++;
+      }
+      if (remainingWidth <= 0 && slideIndex === localSlides.length) {
+        warn(
+          'Ширины слайдов недостаточно для корректной работы свойства "looped". Пожалуйста, сделайте её больше."',
+        );
+      }
+    }
+    if (align === 'center') {
+      const firstSlideShift = (containerWidth - localSlides[0].width) / 2;
+      localSlides = localSlides.map((item) => {
+        return {
+          width: item.width,
+          coordX: item.coordX - firstSlideShift,
+        };
+      });
+    }
+
+    slidesManager.current = {
+      ...slidesManager.current,
+      viewportOffsetWidth,
+      slides: localSlides,
+      isFullyVisible: layerWidth <= containerWidth,
+    };
+
+    const snaps = localSlides.map((_, index) =>
+      calculateIndent(index, slidesManager.current, isCenterWithCustomWidth),
+    );
+
+    let contentSize = -snaps[snaps.length - 1] + localSlides[localSlides.length - 1].width;
+    if (align === 'center') {
+      contentSize += snaps[0];
+    }
+
+    slidesManager.current.snaps = snaps;
+    slidesManager.current.contentSize = contentSize;
+    slidesManager.current.loopPoints = getLoopPoints(slidesManager.current, containerWidth);
+
+    setControlElementsState({
+      canSlideLeft: !slidesManager.current.isFullyVisible,
+      canSlideRight: !slidesManager.current.isFullyVisible,
+      isDraggable: isDraggableProp && !slidesManager.current.isFullyVisible,
+    });
+
+    shiftXCurrentRef.current = snaps[slideIndex];
+    initialized.current = true;
+
+    requestTransform(shiftXCurrentRef.current);
+  };
+
+  const onResize = () => {
+    if (initialized.current) {
+      initializeSlides();
+    }
+  };
+
+  useGlobalEventListener(window, 'resize', onResize);
+
+  useIsomorphicLayoutEffect(
+    function performSlideChange() {
+      if (!initialized.current) {
+        return;
+      }
+      const { snaps, slides } = slidesManager.current;
+      const indent = snaps[slideIndex];
+      let startPoint = shiftXCurrentRef.current;
+
+      /**
+       * Переключаемся с последнего элемента на первый
+       * Для корректной анимации мы прокручиваем последний слайд на всю длину (shiftX) "вперед"
+       * В конце анимации при отрисовке следующего кадра задаем всем слайдам начальные значения
+       */
+      if (indent === snaps[0] && shiftXCurrentRef.current <= snaps[snaps.length - 1]) {
+        const distance =
+          Math.abs(snaps[snaps.length - 1]) + slides[slides.length - 1].width + startPoint;
+
+        addToAnimationQueue(
+          getAnimateFunction((progress) => {
+            const shiftX = startPoint + progress * distance * -1;
+
+            transformCssStyles(shiftX);
+
+            if (shiftX <= snaps[snaps.length - 1] - slides[slides.length - 1].width) {
+              requestAnimationFrame(() => {
+                shiftXCurrentRef.current = indent;
+                transformCssStyles(snaps[0]);
+              });
+            }
+          }),
+        );
+        /**
+         * Переключаемся с первого слайда на последний
+         * Для корректной анимации сначала задаем первым видимым слайдам смещение
+         * В следующем кадре начинаем анимация прокрутки "назад"
+         */
+      } else if (indent === snaps[snaps.length - 1] && shiftXCurrentRef.current === snaps[0]) {
+        startPoint = indent - slides[slides.length - 1].width;
+
+        addToAnimationQueue(() => {
+          requestAnimationFrame(() => {
+            const shiftX = indent - slides[slides.length - 1].width;
+            transformCssStyles(shiftX);
+
+            getAnimateFunction((progress) => {
+              transformCssStyles(startPoint + progress * slides[slides.length - 1].width);
+            })();
+          });
+        });
+        /**
+         * Если не обработаны `corner`-кейсы выше, то просто проигрываем анимацию смещения
+         */
+      } else {
+        addToAnimationQueue(() => {
+          const distance = Math.abs(indent - startPoint);
+          let direction = startPoint <= indent ? 1 : -1;
+
+          getAnimateFunction((progress) => {
+            const shiftX = startPoint + progress * distance * direction;
+            transformCssStyles(shiftX);
+          })();
+        });
+      }
+
+      startAnimation();
+
+      shiftXCurrentRef.current = indent;
+    },
+    [slideIndex],
+  );
+
+  useIsomorphicLayoutEffect(() => {
+    initializeSlides();
+  }, [children, align, slideWidth]);
+
+  const slideLeft = (event: React.MouseEvent) => {
+    onChange?.(
+      (slideIndex - 1 + slidesManager.current.slides.length) % slidesManager.current.slides.length,
+    );
+    onPrevClick?.(event);
+  };
+
+  const slideRight = (event: React.MouseEvent) => {
+    onChange?.((slideIndex + 1) % slidesManager.current.slides.length);
+    onNextClick?.(event);
+  };
+
+  const onStart = (e: TouchEvent) => {
+    e.originalEvent.stopPropagation();
+    onDragStart?.(e);
+    shiftXCurrentRef.current = slidesManager.current.snaps[slideIndex];
+    shiftXDeltaRef.current = 0;
+  };
+
+  const onMoveX = (e: TouchEvent) => {
+    if (isDraggableProp && !slidesManager.current.isFullyVisible) {
+      e.originalEvent.preventDefault();
+
+      if (e.isSlideX) {
+        if (shiftXDeltaRef.current !== e.shiftX) {
+          shiftXDeltaRef.current = e.shiftX;
+          requestTransform(shiftXCurrentRef.current + shiftXDeltaRef.current);
+        }
+      }
+    }
+  };
+
+  const onEnd = (e: TouchEvent) => {
+    let targetIndex = slideIndex;
+    if (e.isSlide) {
+      targetIndex = getTargetIndex(
+        slidesManager.current.slides,
+        slideIndex,
+        shiftXCurrentRef.current,
+        shiftXDeltaRef.current,
+      );
+    }
+    onDragEnd?.(e, targetIndex);
+
+    if (targetIndex !== slideIndex) {
+      shiftXCurrentRef.current = shiftXCurrentRef.current + shiftXDeltaRef.current;
+      onChange?.(targetIndex);
+    } else {
+      const initialShiftX = slidesManager.current.snaps[targetIndex];
+      requestTransform(initialShiftX, true);
+    }
+  };
+
+  const setSlideRef = (slideRef: HTMLDivElement | null, slideIndex: number) => {
+    slidesStore.current[slideIndex] = slideRef;
+  };
+
+  const { canSlideLeft, canSlideRight, isDraggable } = controlElementsState;
+
+  return (
+    <RootComponent
+      {...restProps}
+      baseClassName={classNames(
+        styles['BaseGallery'],
+        slideWidth === 'custom' && styles['BaseGallery--custom-width'],
+        isDraggable && styles['BaseGallery--draggable'],
+      )}
+      getRootRef={rootRef}
+    >
+      <Touch
+        className={styles['BaseGallery__viewport']}
+        onStartX={onStart}
+        onMoveX={onMoveX}
+        onEnd={onEnd}
+        style={{ width: slideWidth === 'custom' ? '100%' : slideWidth }}
+        getRootRef={viewportRef}
+        noSlideClick
+      >
+        <div className={styles['BaseGallery__layer']} ref={layerRef}>
+          {React.Children.map(children, (item: React.ReactNode, i: number) => (
+            <div
+              className={styles['BaseGallery__slide']}
+              key={`slide-${i}`}
+              ref={(el) => setSlideRef(el, i)}
+            >
+              {item}
+            </div>
+          ))}
+        </div>
+      </Touch>
+
+      {bullets && (
+        <div
+          aria-hidden
+          className={classNames(styles['BaseGallery__bullets'], stylesBullets[bullets])}
+        >
+          {React.Children.map(children, (_item: React.ReactNode, index: number) => (
+            <div
+              className={classNames(
+                styles['BaseGallery__bullet'],
+                index === slideIndex && styles['BaseGallery__bullet--active'],
+              )}
+              key={index}
+            />
+          ))}
+        </div>
+      )}
+
+      {showArrows && hasPointer && canSlideLeft && (
+        <ScrollArrow
+          className={styles['BaseGallery__arrow']}
+          direction="left"
+          onClick={slideLeft}
+          size={arrowSize}
+        />
+      )}
+      {showArrows && hasPointer && canSlideRight && (
+        <ScrollArrow
+          className={styles['BaseGallery__arrow']}
+          direction="right"
+          onClick={slideRight}
+          size={arrowSize}
+        />
+      )}
+    </RootComponent>
+  );
+};

package/src/components/BaseGallery/CarouselBase/constants.ts

@@ -0,0 +1,20 @@
+import { ControlElementsState, SlidesManagerState } from './types';
+
+export const ANIMATION_DURATION = 240;
+
+export const SLIDE_THRESHOLD = 0.05;
+
+export const CONTROL_ELEMENTS_STATE: ControlElementsState = {
+  canSlideLeft: true,
+  canSlideRight: true,
+  isDraggable: true,
+};
+
+export const SLIDES_MANAGER_STATE: SlidesManagerState = {
+  viewportOffsetWidth: 0,
+  slides: [],
+  isFullyVisible: true,
+  loopPoints: [],
+  contentSize: 0,
+  snaps: [],
+};

package/src/components/BaseGallery/CarouselBase/helpers.ts

@@ -0,0 +1,136 @@
+import { GallerySlidesState } from '../types';
+import { SLIDE_THRESHOLD } from './constants';
+import { LoopPoint, SlidesManagerState } from './types';
+
+/*
+ * Считает отступ слоя галереи
+ */
+export function calculateIndent(
+  targetIndex: number,
+  slidesManager: SlidesManagerState,
+  isCenterWithCustomWidth: boolean,
+) {
+  if (slidesManager.isFullyVisible || !slidesManager.slides.length) {
+    return 0;
+  }
+
+  const targetSlide = slidesManager.slides[targetIndex];
+
+  if (targetSlide) {
+    const { coordX, width } = targetSlide;
+
+    if (isCenterWithCustomWidth) {
+      return slidesManager.viewportOffsetWidth / 2 - coordX - width / 2;
+    }
+
+    return -1 * coordX;
+  }
+
+  return 0;
+}
+
+/**
+ * Вычисляем индексы слайдов, которые необходимо смещать
+ */
+export function getShiftedIndexes(
+  direction: 1 | -1,
+  slides: GallerySlidesState[],
+  availableWidth: number,
+) {
+  let gap = availableWidth;
+  const shiftedSlideIndexes = [];
+  const startIndex = direction === 1 ? 0 : slides.length - 1;
+  const endIndex = direction === 1 ? slides.length - 1 : 0;
+
+  for (
+    let i = startIndex;
+    (direction === 1 ? i <= endIndex : i >= endIndex) && gap > 0;
+    i += direction
+  ) {
+    const slideWidth = slides[i].width;
+
+    if (gap > 0) {
+      shiftedSlideIndexes.push(i);
+    }
+    gap -= slideWidth;
+  }
+
+  return shiftedSlideIndexes;
+}
+
+export function calculateLoopPoints(
+  indexes: number[],
+  edge: 'start' | 'end',
+  slidesManager: SlidesManagerState,
+  containerWidth: number,
+): LoopPoint[] {
+  const { contentSize, slides, snaps } = slidesManager;
+  const isStartEdge = edge === 'start';
+  const offset = isStartEdge ? -contentSize : contentSize;
+
+  return indexes.map((index) => {
+    const initial = isStartEdge ? 0 : -contentSize;
+    const altered = isStartEdge ? contentSize : 0;
+    const loopPoint = isStartEdge
+      ? snaps[index] + containerWidth + offset
+      : snaps[index] - slides[index].width + offset - snaps[0];
+
+    return {
+      index,
+      target: (currentLocation) => {
+        return currentLocation >= loopPoint ? initial : altered;
+      },
+    };
+  });
+}
+
+/**
+ * Вычисляем "ключевые" точки, на которых должно происходить смещение слайдов
+ */
+export function getLoopPoints(slidesManager: SlidesManagerState, containerWidth: number) {
+  const { slides, snaps } = slidesManager;
+  const startShiftedIndexes = getShiftedIndexes(-1, slides, snaps[0]);
+  const endShiftedIndexes = getShiftedIndexes(1, slides, containerWidth - snaps[0]);
+
+  return [
+    ...calculateLoopPoints(endShiftedIndexes, 'start', slidesManager, containerWidth),
+    ...calculateLoopPoints(startShiftedIndexes, 'end', slidesManager, containerWidth),
+  ];
+}
+
+/*
+ * Получает индекс слайда, к которому будет осуществлен переход
+ */
+export function getTargetIndex(
+  slides: GallerySlidesState[],
+  slideIndex: number,
+  currentShiftX: number,
+  currentShiftXDelta: number,
+) {
+  const shift = currentShiftX + currentShiftXDelta;
+  const direction = currentShiftXDelta < 0 ? 1 : -1;
+
+  // Находим ближайшую границу слайда к текущему отступу
+  let targetIndex = slides.reduce((val: number, item: GallerySlidesState, index: number) => {
+    const previousValue = Math.abs(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 < slides.length) {
+      if (Math.abs(currentShiftXDelta) > slides[targetSlide].width * SLIDE_THRESHOLD) {
+        return targetSlide;
+      }
+      return targetIndex;
+    }
+    return direction < 0
+      ? (targetSlide + slides.length) % slides.length
+      : targetSlide % slides.length;
+  }
+
+  return targetIndex;
+}

package/src/components/BaseGallery/CarouselBase/hooks.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { animate, DrawInterface } from '../../../lib/animate';
+import { cubicBezier } from '../../../lib/fx';
+import { ANIMATION_DURATION } from './constants';
+
+const TIMING_FUNCTION = cubicBezier(0.8, 1);
+
+export function useSlideAnimation() {
+  const animationQueue = React.useRef<VoidFunction[]>([]);
+
+  function getAnimateFunction(drawFunction: DrawInterface) {
+    return () => {
+      animate({
+        duration: ANIMATION_DURATION,
+        timing: TIMING_FUNCTION,
+        animationQueue: animationQueue.current,
+        draw: drawFunction,
+      });
+    };
+  }
+
+  function addToAnimationQueue(func: VoidFunction) {
+    animationQueue.current.push(func);
+  }
+
+  function startAnimation() {
+    if (animationQueue.current.length === 1) {
+      animationQueue.current[0]();
+    }
+  }
+
+  return {
+    getAnimateFunction,
+    addToAnimationQueue,
+    startAnimation,
+  };
+}

package/src/components/BaseGallery/CarouselBase/types.ts

@@ -0,0 +1,56 @@
+import { GallerySlidesState } from '../types';
+
+export interface LoopPoint {
+  /**
+   * Индекс слайда
+   */
+  index: number;
+  /**
+   * Функция, которая по текущему сдвигу галереи определяет нужный сдвиг слайда
+   */
+  target(this: void, location: number): void;
+}
+
+export interface ControlElementsState {
+  /**
+   * Отвечает за отображение стрелки влево
+   */
+  canSlideLeft: boolean;
+  /**
+   * Отвечает за отображение стрелки вправо
+   */
+  canSlideRight: boolean;
+  /**
+   * Возможность листаться слайды drag'ом
+   */
+  isDraggable: boolean;
+}
+
+export interface SlidesManagerState {
+  /**
+   * Общая ширина всех слайдов
+   */
+  contentSize: number;
+  /**
+   * Массив с пограничными точками слайдов, которые необходимо смещать, чтобы они всегда были в области видимости
+   * (пример: для последнего слайда это n-первых слайдов, необходимых для заполнения оставшейся ширины,
+   * или для первого слайда это n-последних слайдов при выравнивании по центру)
+   */
+  loopPoints: LoopPoint[];
+  /**
+   * Массив с правыми границами слайдов
+   */
+  snaps: number[];
+  /**
+   * Ширина видимой области слайдов
+   */
+  viewportOffsetWidth: number;
+  /**
+   * Массив слайдов с координатой начала слайда и шириной
+   */
+  slides: GallerySlidesState[];
+  /**
+   * Все слайды видимы без скрола
+   */
+  isFullyVisible: boolean;
+}

package/src/components/BaseGallery/helpers.ts

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