@vkontakte/vkui 5.8.2 → 5.9.0

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -0,0 +1,284 @@
+import * as React from 'react';
+import { classNames, noop } from '@vkontakte/vkjs';
+import { useAdaptivityHasPointer } from '../../hooks/useAdaptivityHasPointer';
+import { useEventListener } from '../../hooks/useEventListener';
+import { useExternRef } from '../../hooks/useExternRef';
+import { easeInOutSine } from '../../lib/fx';
+import { HasRef, HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import { ScrollArrow } from '../ScrollArrow/ScrollArrow';
+import styles from './HorizontalScroll.module.css';
+
+interface ScrollContext {
+  scrollElement: HTMLElement | null;
+  scrollAnimationDuration: number;
+  animationQueue: VoidFunction[];
+  getScrollPosition: (currentPosition: number) => number;
+  onScrollToRightBorder: VoidFunction;
+  onScrollEnd: VoidFunction;
+  onScrollStart: VoidFunction;
+  /**
+   * Начальная ширина прокрутки.
+   * В некоторых случаях может отличаться от текущей ширины прокрутки из-за transforms: translate
+   */
+  initialScrollWidth: number;
+}
+
+export type ScrollPositionHandler = (currentPosition: number) => number;
+
+export interface HorizontalScrollProps
+  extends HTMLAttributesWithRootRef<HTMLDivElement>,
+    HasRef<HTMLDivElement> {
+  /**
+   * Функция для расчета величины прокрутки при клике на левую стрелку.
+   */
+  getScrollToLeft?: ScrollPositionHandler;
+  /**
+   * Функция для расчета величины прокрутки при клике на правую стрелку.
+   */
+  getScrollToRight?: ScrollPositionHandler;
+  arrowSize?: 'm' | 'l';
+  /**
+   * Смещает иконки кнопок навигации по вертикали.
+   */
+  arrowOffsetY?: number | string;
+  showArrows?: boolean | 'always';
+  scrollAnimationDuration?: number;
+  /**
+   * Добавляет возможность прокручивать контент на любое колесо мыши.
+   * По умолчанию прокручивается как любой горизонтальный контент через shift.
+   */
+  scrollOnAnyWheel?: boolean;
+}
+
+/**
+ * timing method
+ */
+function now() {
+  return performance && performance.now ? performance.now() : Date.now();
+}
+
+/**
+ * Округляем el.scrollLeft
+ * https://github.com/VKCOM/VKUI/pull/2445
+ */
+const roundUpElementScrollLeft = (el: HTMLElement) => Math.ceil(el.scrollLeft);
+
+/**
+ * Код анимации скрола, на основе полифила: https://github.com/iamdustan/smoothscroll
+ * Константа взята из полифила (468), на дизайн-ревью уточнили до 250
+ * @var {number} SCROLL_ONE_FRAME_TIME время анимации скролла
+ */
+const SCROLL_ONE_FRAME_TIME = 250;
+
+function doScroll({
+  scrollElement,
+  getScrollPosition,
+  animationQueue,
+  onScrollToRightBorder,
+  onScrollEnd,
+  onScrollStart,
+  initialScrollWidth,
+  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
+}: ScrollContext) {
+  if (!scrollElement || !getScrollPosition) {
+    return;
+  }
+
+  /**
+   * максимальное значение сдвига влево
+   */
+  const maxLeft = initialScrollWidth - scrollElement.offsetWidth;
+
+  let startLeft = roundUpElementScrollLeft(scrollElement);
+  let endLeft = getScrollPosition(startLeft);
+
+  onScrollStart();
+
+  if (endLeft >= maxLeft) {
+    onScrollToRightBorder();
+    endLeft = maxLeft;
+  }
+
+  const startTime = now();
+
+  (function scroll() {
+    if (!scrollElement) {
+      onScrollEnd();
+      return;
+    }
+
+    const time = now();
+    const elapsed = Math.min((time - startTime) / scrollAnimationDuration, 1);
+
+    const value = easeInOutSine(elapsed);
+
+    const currentLeft = startLeft + (endLeft - startLeft) * value;
+    scrollElement.scrollLeft = Math.ceil(currentLeft);
+
+    if (roundUpElementScrollLeft(scrollElement) !== Math.max(0, endLeft) && elapsed !== 1) {
+      requestAnimationFrame(scroll);
+      return;
+    }
+
+    onScrollEnd();
+    animationQueue.shift();
+    if (animationQueue.length > 0) {
+      animationQueue[0]();
+    }
+  })();
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/HorizontalScroll
+ */
+export const HorizontalScroll = ({
+  children,
+  getScrollToLeft,
+  getScrollToRight,
+  showArrows = true,
+  arrowSize = 'l',
+  arrowOffsetY,
+  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
+  getRef,
+  scrollOnAnyWheel = false,
+  ...restProps
+}: HorizontalScrollProps) => {
+  const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+  const [canScrollRight, setCanScrollRight] = React.useState(false);
+
+  const isCustomScrollingRef = React.useRef(false);
+
+  const scrollerRef = useExternRef(getRef);
+
+  const animationQueue = React.useRef<VoidFunction[]>([]);
+
+  const hasPointer = useAdaptivityHasPointer();
+
+  const scrollTo = React.useCallback(
+    (getScrollPosition: ScrollPositionHandler) => {
+      const scrollElement = scrollerRef.current;
+
+      animationQueue.current.push(() =>
+        doScroll({
+          scrollElement,
+          getScrollPosition,
+          animationQueue: animationQueue.current,
+          onScrollToRightBorder: () => setCanScrollRight(false),
+          onScrollEnd: () => (isCustomScrollingRef.current = false),
+          onScrollStart: () => (isCustomScrollingRef.current = true),
+          initialScrollWidth: scrollElement?.firstElementChild?.scrollWidth || 0,
+          scrollAnimationDuration,
+        }),
+      );
+      if (animationQueue.current.length === 1) {
+        animationQueue.current[0]();
+      }
+    },
+    [scrollAnimationDuration, scrollerRef],
+  );
+
+  const scrollToLeft = React.useCallback(() => {
+    const getScrollPosition =
+      getScrollToLeft ?? ((i: number) => i - scrollerRef.current!.offsetWidth);
+    scrollTo(getScrollPosition);
+  }, [getScrollToLeft, scrollTo, scrollerRef]);
+
+  const scrollToRight = React.useCallback(() => {
+    const getScrollPosition =
+      getScrollToRight ?? ((i: number) => i + scrollerRef.current!.offsetWidth);
+    scrollTo(getScrollPosition);
+  }, [getScrollToRight, scrollTo, scrollerRef]);
+
+  const calculateArrowsVisibility = React.useCallback(() => {
+    if (showArrows && hasPointer && scrollerRef.current && !isCustomScrollingRef.current) {
+      const scrollElement = scrollerRef.current;
+
+      setCanScrollLeft(scrollElement.scrollLeft > 0);
+      setCanScrollRight(
+        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <
+          scrollElement.scrollWidth,
+      );
+    }
+  }, [hasPointer, scrollerRef, showArrows]);
+
+  const scrollEvent = useEventListener('scroll', calculateArrowsVisibility);
+  React.useEffect(
+    function addScrollerRefToScrollEvent() {
+      if (!scrollerRef.current) {
+        return noop;
+      }
+
+      scrollEvent.add(scrollerRef.current);
+      return scrollEvent.remove;
+    },
+    [scrollEvent, scrollerRef],
+  );
+
+  React.useEffect(calculateArrowsVisibility, [calculateArrowsVisibility, children]);
+
+  /**
+   * Прокрутка с помощью любого колеса мыши
+   */
+  const onwheel = React.useCallback(
+    (e: WheelEvent) => {
+      scrollerRef.current!.scrollBy({ left: e.deltaX + e.deltaY, behavior: 'auto' });
+      e.preventDefault();
+    },
+    [scrollerRef],
+  );
+
+  const wheelEvent = useEventListener('wheel', onwheel);
+  React.useEffect(
+    function addScrollerRefToWheelEvent() {
+      if (!scrollerRef.current || !scrollOnAnyWheel) {
+        return noop;
+      }
+
+      wheelEvent.add(scrollerRef.current);
+
+      return wheelEvent.remove;
+    },
+    [wheelEvent, scrollerRef, scrollOnAnyWheel],
+  );
+
+  return (
+    <RootComponent
+      {...restProps}
+      baseClassName={classNames(
+        styles['HorizontalScroll'],
+        'vkuiInternalHorizontalScroll',
+        showArrows === 'always' && styles['HorizontalScroll--withConstArrows'],
+      )}
+      onMouseEnter={calculateArrowsVisibility}
+    >
+      {showArrows && (hasPointer || hasPointer === undefined) && canScrollLeft && (
+        <ScrollArrow
+          size={arrowSize}
+          offsetY={arrowOffsetY}
+          direction="left"
+          className={classNames(
+            styles['HorizontalScroll__arrow'],
+            styles['HorizontalScroll__arrowLeft'],
+          )}
+          onClick={scrollToLeft}
+        />
+      )}
+      {showArrows && (hasPointer || hasPointer === undefined) && canScrollRight && (
+        <ScrollArrow
+          size={arrowSize}
+          offsetY={arrowOffsetY}
+          direction="right"
+          className={classNames(
+            styles['HorizontalScroll__arrow'],
+            styles['HorizontalScroll__arrowRight'],
+          )}
+          onClick={scrollToRight}
+        />
+      )}
+      <div className={styles['HorizontalScroll__in']} ref={scrollerRef}>
+        <div className={styles['HorizontalScroll__in-wrapper']}>{children}</div>
+      </div>
+    </RootComponent>
+  );
+};

package/src/components/HoverPopper/HoverPopper.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { useEventListener } from '../../hooks/useEventListener';
+import { usePatchChildrenRef } from '../../hooks/usePatchChildrenRef';
+import { useTimeout } from '../../hooks/useTimeout';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { Popper, PopperCommonProps } from '../Popper/Popper';
+
+export interface HoverPopperProps extends Omit<PopperCommonProps, 'content'> {
+  /**
+   * Содержимое тултипа
+   */
+  content?: React.ReactNode;
+  /**
+   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства
+   */
+  shown?: boolean;
+  /**
+   * Вызывается при каждом изменении видимости тултипа
+   */
+  onShownChange?: (shown: boolean) => void;
+  /**
+   * Количество миллисекунд, после которых произойдет показ дропдауна
+   */
+  showDelay?: number;
+  /**
+   * Количество миллисекунд, после которых произойдет скрытие дропдауна
+   */
+  hideDelay?: number;
+  /**
+   * Либо jsx-элемент (div, button, etc.), либо компонент со свойством `getRootRef`, которое применяется к корневому элементу компонента
+   */
+  children?: React.ReactElement;
+}
+
+export const HoverPopper = ({
+  getRef,
+  content,
+  children,
+  onShownChange,
+  shown: _shown,
+  showDelay = 150,
+  hideDelay = 150,
+  ...restProps
+}: HoverPopperProps) => {
+  const [computedShown, setComputedShown] = React.useState(_shown || false);
+
+  const shown = typeof _shown === 'boolean' ? _shown : computedShown;
+
+  const setShown = (value: boolean) => {
+    if (typeof _shown !== 'boolean') {
+      setComputedShown(value);
+    }
+    typeof onShownChange === 'function' && onShownChange(value);
+  };
+
+  const showTimeout = useTimeout(() => {
+    setShown(true);
+  }, showDelay);
+
+  const hideTimeout = useTimeout(() => {
+    setShown(false);
+  }, hideDelay);
+
+  const [childRef, child] = usePatchChildrenRef(children);
+
+  const onTargetEnter = () => {
+    hideTimeout.clear();
+    showTimeout.set();
+  };
+
+  const onTargetLeave = () => {
+    showTimeout.clear();
+    hideTimeout.set();
+  };
+
+  const targetEnterListener = useEventListener('pointerenter', onTargetEnter);
+  const targetLeaveListener = useEventListener('pointerleave', onTargetLeave);
+
+  useIsomorphicLayoutEffect(() => {
+    if (childRef.current) {
+      targetEnterListener.add(childRef.current);
+      targetLeaveListener.add(childRef.current);
+    }
+  }, []);
+
+  return (
+    <React.Fragment>
+      {child}
+      {shown && (
+        <Popper
+          {...restProps}
+          onMouseOver={hideTimeout.clear}
+          onMouseOut={onTargetLeave}
+          getRef={getRef}
+          targetRef={childRef}
+        >
+          {content}
+        </Popper>
+      )}
+    </React.Fragment>
+  );
+};

package/src/components/IconButton/IconButton.module.css

@@ -0,0 +1,155 @@
+.IconButton {
+  appearance: none;
+  background: none;
+  border: 0;
+  box-shadow: none;
+  display: block;
+  color: currentColor;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  height: 48px;
+
+  /**
+   * Чтобы закргуление было равно половине высоты.
+   * см. https://stackoverflow.com/questions/27233295/possible-to-make-border-radius-equal-to-half-the-total-height-without-javascript
+   */
+  border-radius: 9999px;
+}
+
+.IconButton--sizeY-compact {
+  height: 44px;
+}
+
+.IconButton[disabled] {
+  opacity: var(--vkui--opacity_disable_accessibility);
+}
+
+.IconButton--ios {
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+.IconButton :global(.vkuiIcon--16) {
+  padding: 16px;
+}
+
+.IconButton :global(.vkuiIcon--16.vkuiIcon--w-8) {
+  padding: 16px 14px;
+}
+
+.IconButton--sizeY-compact :global(.vkuiIcon--16),
+.IconButton--sizeY-compact :global(.vkuiIcon--16.vkuiIcon--w-8) {
+  padding: 14px;
+}
+
+.IconButton :global(.vkuiIcon--24) {
+  padding: 12px;
+}
+
+.IconButton--sizeY-compact :global(.vkuiIcon--24) {
+  padding: 10px;
+}
+
+.IconButton :global(.vkuiIcon--28) {
+  padding: 10px;
+}
+
+.IconButton--sizeY-compact :global(.vkuiIcon--28) {
+  padding: 8px;
+}
+
+@media (--sizeY-compact) {
+  .IconButton--sizeY-none {
+    height: 44px;
+  }
+
+  .IconButton--sizeY-none :global(.vkuiIcon--16),
+  .IconButton--sizeY-none :global(.vkuiIcon--16.vkuiIcon--w-8) {
+    padding: 14px;
+  }
+
+  .IconButton--sizeY-none :global(.vkuiIcon--24) {
+    padding: 10px;
+  }
+
+  .IconButton--sizeY-none :global(.vkuiIcon--28) {
+    padding: 8px;
+  }
+}
+
+/**
+ * CMP:
+ * - FormItem
+ * - FormLayoutGroup
+ * - FormField
+ */
+:global(.vkuiInternalFormItem--removable) :global(.vkuiInternalRemovable__content) > .IconButton,
+:global(.vkuiInternalFormLayoutGroup--removable)
+  :global(.vkuiInternalRemovable__content)
+  > .IconButton,
+:global(.vkuiInternalFormField__after) .IconButton {
+  display: flex;
+  align-items: center;
+  align-content: center;
+  justify-content: center;
+  width: var(--vkui--size_field_height--regular);
+  height: var(--vkui--size_field_height--regular);
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+:global(.vkuiInternalFormField__after)
+  .IconButton
+  :global(.vkuiIcon):global(.vkuiIcon):global(.vkuiIcon) {
+  padding: 0;
+}
+
+:global(.vkuiInternalFormField__after) .IconButton--sizeY-compact {
+  width: var(--vkui--size_field_height--compact);
+  height: var(--vkui--size_field_height--compact);
+}
+
+:global(.vkuiInternalFormItem--removable)
+  :global(.vkuiInternalRemovable__content)
+  > .IconButton--sizeY-compact,
+:global(.vkuiInternalFormLayoutGroup--removable)
+  :global(.vkuiInternalRemovable__content)
+  > .IconButton--sizeY-compact {
+  height: var(--vkui--size_field_height--compact);
+}
+
+@media (--sizeY-compact) {
+  :global(.vkuiInternalFormField__after) .IconButton--sizeY-none {
+    width: var(--vkui--size_field_height--compact);
+    height: var(--vkui--size_field_height--compact);
+  }
+
+  :global(.vkuiInternalFormItem--removable)
+    :global(.vkuiInternalRemovable__content)
+    > .IconButton--sizeY-none,
+  :global(.vkuiInternalFormLayoutGroup--removable)
+    :global(.vkuiInternalRemovable__content)
+    > .IconButton--sizeY-none {
+    height: var(--vkui--size_field_height--compact);
+  }
+}
+
+/**
+ * CMP:
+ * SimpleCell
+ */
+:global(.vkuiInternalSimpleCell__after) .IconButton:last-child {
+  margin-right: -12px;
+}
+
+:global(.vkuiInternalSimpleCell__after) .IconButton--ios:last-child {
+  margin-right: -9px;
+}
+
+/**
+ * CMP:
+ * Alert
+ */
+:global(.vkuiInternalAlert__dismiss).IconButton {
+  height: 36px;
+  padding: 8px;
+}

package/src/components/IconButton/IconButton.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
+import { COMMON_WARNINGS, warnOnce } from '../../lib/warnOnce';
+import { HasChildren } from '../../types';
+import { Tappable, TappableProps } from '../Tappable/Tappable';
+import styles from './IconButton.module.css';
+
+const sizeYClassNames = {
+  none: styles['IconButton--sizeY-none'],
+  [SizeType.COMPACT]: styles['IconButton--sizeY-compact'],
+};
+
+export interface IconButtonProps extends TappableProps, HasChildren {}
+
+const warn = warnOnce('IconButton');
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/IconButton
+ */
+export const IconButton = ({ children, className, ...restProps }: IconButtonProps) => {
+  const platform = usePlatform();
+  const { sizeY = 'none' } = useAdaptivity();
+
+  if (process.env.NODE_ENV === 'development') {
+    const isAccessible = restProps['aria-label'] || restProps['aria-labelledby'];
+
+    if (!isAccessible) {
+      warn(COMMON_WARNINGS.a11y[restProps.href ? 'link-name' : 'button-name'], 'error');
+    }
+  }
+
+  return (
+    <Tappable
+      activeEffectDelay={200}
+      activeMode="background"
+      Component={restProps.href ? 'a' : 'button'}
+      {...restProps}
+      className={classNames(
+        styles['IconButton'],
+        sizeY !== SizeType.REGULAR && sizeYClassNames[sizeY],
+        platform === Platform.IOS && styles['IconButton--ios'],
+        className,
+      )}
+    >
+      {children}
+    </Tappable>
+  );
+};

package/src/components/Image/Image.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { ImageBase, type ImageBaseOverlayProps, type ImageBaseProps } from '../ImageBase/ImageBase';
+import { ImageBadge, type ImageBadgeProps } from './ImageBadge/ImageBadge';
+
+export type { ImageBadgeProps, ImageBaseOverlayProps as ImageOverlayProps };
+
+export const IMAGE_DEFAULT_SIZE = 48;
+
+export interface ImageProps extends Omit<ImageBaseProps, 'badge'> {
+  /**
+   * Размер закругления.
+   */
+  borderRadius?: 's' | 'l' | 'm';
+}
+
+const getBorderRadiusBySize = (
+  size: Exclude<ImageBaseProps['size'], undefined>,
+  borderRadius: Exclude<ImageProps['borderRadius'], undefined>,
+) => {
+  switch (borderRadius) {
+    case 's': {
+      if (size <= 32) {
+        return 2;
+      }
+      if (size <= 56) {
+        return 3;
+      }
+      return 4;
+    }
+    case 'm': {
+      if (size <= 32) {
+        return 3;
+      }
+      if (size <= 48) {
+        return 4;
+      }
+      if (size <= 72) {
+        return 6;
+      }
+      if (size <= 80) {
+        return 8;
+      }
+      return 10;
+    }
+    case 'l': {
+      if (size <= 16) {
+        return 4;
+      }
+      if (size <= 20) {
+        return 5;
+      }
+      if (size <= 32) {
+        return 6;
+      }
+      if (size <= 40) {
+        return 8;
+      }
+      if (size <= 48) {
+        return 10;
+      }
+      if (size <= 56) {
+        return 12;
+      }
+      if (size <= 64) {
+        return 14;
+      }
+      return 16;
+    }
+  }
+};
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Image
+ */
+export const Image = ({
+  size = IMAGE_DEFAULT_SIZE,
+  borderRadius: borderRadiusProp = 'm',
+  style,
+  className,
+  ...restProps
+}: ImageProps) => {
+  const borderRadius = React.useMemo(
+    () => getBorderRadiusBySize(size, borderRadiusProp),
+    [size, borderRadiusProp],
+  );
+
+  return (
+    <ImageBase
+      {...restProps}
+      size={size}
+      style={{ ...style, borderRadius }}
+      className={className}
+    />
+  );
+};
+
+Image.Badge = ImageBadge;
+
+Image.Overlay = ImageBase.Overlay;

package/src/components/Image/ImageBadge/ImageBadge.module.css

@@ -0,0 +1,10 @@
+.ImageBadge {
+  position: absolute;
+  bottom: -4px;
+  right: -4px;
+}
+
+.ImageBadge--shifted {
+  bottom: -3px;
+  right: -3px;
+}