@vkontakte/vkui 4.28.0 → 4.29.1

package/src/components/HorizontalCell/Readme.md

@@ -0,0 +1,236 @@
+HorizontalCell автоматически ставит отступы по бокам в зависимости от платформы, поэтому его лучше использовать в [HorizontalScroll](#!/HorizontalScroll).
+
+- При `size='s'` **для iOS** рекомендуется `<Avatar size={64}/>`, а для остальных платформ `<Avatar size={56}/>` или же любой компонент шириной до 64 пикс.
+- При `size='m'` рекомендуется `<Avatar size={88} mode='app'/>` или же любой компонент шириной до 96 пикс.
+- При `size='l'` рекомендуется `<Avatar size={128} mode='image/>` или же любой компонент произвольной ширины.
+
+```jsx
+const HorizontalCellExample = withPlatform(
+  class HorizontalCellExample extends React.Component {
+    constructor(props) {
+      super(props);
+      this.state = {
+        userItems: [],
+        miniAppItems: [],
+        gamesItems: [],
+        playlistsItems: [],
+        albumItems: [],
+      };
+    }
+
+    componentDidMount() {
+      const { platform } = this.props;
+
+      const largeImageStyles = {
+        width: 220,
+        height: 124,
+        borderRadius: 8,
+        border: "1px solid var(--placeholder_icon_background)",
+        objectFit: "cover",
+      };
+
+      let users = getRandomUsers(15);
+      let generatedUserItems = [];
+      users.forEach((user) => {
+        generatedUserItems.push(
+          <HorizontalCell size="s" header={user.first_name}>
+            <Avatar size={platform === "ios" ? 64 : 56} src={user.photo_100} />
+          </HorizontalCell>
+        );
+      });
+      this.setState({ userItems: generatedUserItems });
+
+      let exampleMiniApps = [
+        <HorizontalCell size="s" header="Промокот">
+          <Avatar
+            size={platform === "ios" ? 64 : 56}
+            mode="app"
+            src="https://sun9-54.userapi.com/c850536/v850536134/15096d/6806J7q6YwM.jpg"
+          />
+        </HorizontalCell>,
+        <HorizontalCell size="s" header="Разделите счёт">
+          <Avatar
+            size={platform === "ios" ? 64 : 56}
+            mode="app"
+            src="https://sun9-20.userapi.com/c857416/v857416681/fc6d0/06XQvs4SyiE.jpg"
+          />
+        </HorizontalCell>,
+        <HorizontalCell size="s" header="Рассылки">
+          <Avatar
+            size={platform === "ios" ? 64 : 56}
+            mode="app"
+            src="https://sun9-50.userapi.com/c850536/v850536397/129313/qdVJ7A7xd70.jpg"
+          />
+        </HorizontalCell>,
+        <HorizontalCell size="s" header="Тексты песен">
+          <Avatar
+            size={platform === "ios" ? 64 : 56}
+            mode="app"
+            src="https://sun9-41.userapi.com/Zf2HluZJZDYjTbxhnSfeYnHtttBYsYbdjJ3QJQ/aDcJQrVVnbQ.jpg"
+          />
+        </HorizontalCell>,
+      ];
+      let generatedMiniAppsItems = [];
+      for (let i = 0; i < 3; i++) {
+        generatedMiniAppsItems = generatedMiniAppsItems.concat(exampleMiniApps);
+      }
+      this.setState({ miniAppItems: generatedMiniAppsItems });
+
+      let exampleGames = [
+        <HorizontalCell size="m" header="Контра Сити">
+          <Avatar
+            size={88}
+            mode="app"
+            src="https://sun9-24.userapi.com/c639120/v639120173/3fe6f/tgPr7lecAY4.jpg"
+          />
+        </HorizontalCell>,
+        <HorizontalCell size="m" header="Golden Valley">
+          <Avatar
+            size={88}
+            mode="app"
+            src="https://sun9-71.userapi.com/c849220/v849220453/147ade/0MtQXKEVsiQ.jpg"
+          />
+        </HorizontalCell>,
+        <HorizontalCell size="m" header="Warma-geddon">
+          <Avatar
+            size={88}
+            mode="app"
+            src="https://sun9-45.userapi.com/c846418/v846418215/5cf20/Gd9mQ6dVXTw.jpg"
+          />
+        </HorizontalCell>,
+      ];
+      let generatedGamesItems = [];
+      for (let i = 0; i < 3; i++) {
+        generatedGamesItems = generatedGamesItems.concat(exampleGames);
+      }
+      this.setState({ gamesItems: generatedGamesItems });
+
+      let examplePlaylists = [
+        <HorizontalCell
+          size="l"
+          header="Awesome Mix Vol.2"
+          subtitle="New Tribute Kings"
+        >
+          <Avatar
+            size={128}
+            mode="image"
+            src="https://sun9-53.userapi.com/c637816/v637816450/4a6d9/lvCvft600Zc.jpg"
+          />
+        </HorizontalCell>,
+        <HorizontalCell
+          size="l"
+          header="Сегодня в плеере"
+          subtitle="Музыка ВКонтакте"
+        >
+          <Avatar
+            size={128}
+            mode="image"
+            src="https://sun9-4.userapi.com/22uxwvZiO4JhrkSz6j6FEzoJDfZzBjEBVY4ABA/wHAweL65dNI.jpg"
+          />
+        </HorizontalCell>,
+        <HorizontalCell
+          size="l"
+          header="Hakuna Matata"
+          subtitle="Музыка ВКонтакте\n2019"
+        >
+          <Avatar
+            size={128}
+            mode="image"
+            src="https://sun9-51.userapi.com/c857024/v857024436/f927/rG9fac2cuac.jpg"
+          />
+        </HorizontalCell>,
+      ];
+      let generatedPlaylists = [];
+      for (let i = 0; i < 3; i++) {
+        generatedPlaylists = generatedPlaylists.concat(examplePlaylists);
+      }
+      this.setState({ playlistsItems: generatedPlaylists });
+
+      let exampleAlbums = [
+        <HorizontalCell size="l" header="Команда <3" subtitle="4 фотографии">
+          <img
+            style={largeImageStyles}
+            src="https://sun9-33.userapi.com/ODk8khvW97c6aSx_MxHXhok5byDCsHEoU-3BwA/sO-lGf_NjN4.jpg"
+          />
+        </HorizontalCell>,
+        <HorizontalCell size="l" header="Зингер" subtitle="12 фотографий">
+          <img
+            style={largeImageStyles}
+            src="https://sun9-60.userapi.com/bjwt581hETPAp4oY92bDcRvMymyfCaEsnojaUA/_KWQfS-MAd4.jpg"
+          />
+        </HorizontalCell>,
+        <HorizontalCell
+          size="l"
+          header="Медиагалерея ВКонтакте"
+          subtitle="67 фотографий"
+        >
+          <img
+            style={largeImageStyles}
+            src="https://sun9-26.userapi.com/YZ5-1A6cVgL7g1opJGQIWg1Bl5ynfPi8p41SkQ/IYIUDqGkkBE.jpg"
+          />
+        </HorizontalCell>,
+      ];
+      let generatedAlbums = [];
+      for (let i = 0; i < 3; i++) {
+        generatedAlbums = generatedAlbums.concat(exampleAlbums);
+      }
+      this.setState({ albumItems: generatedAlbums });
+    }
+
+    render() {
+      return (
+        <View activePanel="horizontalCell">
+          <Panel id="horizontalCell">
+            <PanelHeader>HorizontalCell</PanelHeader>
+            <Group header={<Header>Возможные друзья</Header>}>
+              <HorizontalScroll>
+                <div style={{ display: "flex" }}>{this.state.userItems}</div>
+              </HorizontalScroll>
+            </Group>
+            <Group
+              header={
+                <Header aside={<Link>Показать все</Link>}>
+                  Мини-приложения
+                </Header>
+              }
+            >
+              <HorizontalScroll>
+                <div style={{ display: "flex" }}>{this.state.miniAppItems}</div>
+              </HorizontalScroll>
+            </Group>
+            <Group
+              header={<Header aside={<Link>Показать все</Link>}>Игры</Header>}
+            >
+              <HorizontalScroll>
+                <div style={{ display: "flex" }}>{this.state.gamesItems}</div>
+              </HorizontalScroll>
+            </Group>
+            <Group
+              header={
+                <Header aside={<Link>Показать все</Link>}>Плейлисты</Header>
+              }
+            >
+              <HorizontalScroll>
+                <div style={{ display: "flex" }}>
+                  {this.state.playlistsItems}
+                </div>
+              </HorizontalScroll>
+            </Group>
+            <Group
+              header={
+                <Header aside={<Link>Показать все</Link>}>Альбомы</Header>
+              }
+            >
+              <HorizontalScroll>
+                <div style={{ display: "flex" }}>{this.state.albumItems}</div>
+              </HorizontalScroll>
+            </Group>
+          </Panel>
+        </View>
+      );
+    }
+  }
+);
+
+<HorizontalCellExample />;
+```

package/src/components/HorizontalScroll/HorizontalScroll.css

@@ -0,0 +1,31 @@
+.HorizontalScroll {
+  position: relative;
+  overflow: hidden;
+}
+
+.HorizontalScroll__in {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 20px;
+  margin-bottom: -20px;
+}
+
+.HorizontalScroll__in::-webkit-scrollbar {
+  display: none;
+}
+
+.HorizontalScroll__in-wrapper {
+  transition: transform 0.2s;
+}
+
+.HorizontalScrollArrow--left:hover
+  ~ .HorizontalScroll__in
+  .HorizontalScroll__in-wrapper {
+  transform: translateX(8px);
+}
+
+.HorizontalScrollArrow--right:hover
+  ~ .HorizontalScroll__in
+  .HorizontalScroll__in-wrapper {
+  transform: translateX(-8px);
+}

package/src/components/HorizontalScroll/HorizontalScroll.tsx

@@ -0,0 +1,225 @@
+import * as React from "react";
+import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import HorizontalScrollArrow from "./HorizontalScrollArrow";
+import { easeInOutSine } from "../../lib/fx";
+import { useEventListener } from "../../hooks/useEventListener";
+import { useExternRef } from "../../hooks/useExternRef";
+import { HasRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import "./HorizontalScroll.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 React.HTMLAttributes<HTMLDivElement>,
+    AdaptivityProps,
+    HasRef<HTMLDivElement> {
+  /**
+   * Функция для расчета величины прокрутки при клике на левую стрелку.
+   */
+  getScrollToLeft?: ScrollPositionHandler;
+  /**
+   * Функция для расчета величины прокрутки при клике на правую стрелку.
+   */
+  getScrollToRight?: ScrollPositionHandler;
+  showArrows?: boolean | "always";
+  scrollAnimationDuration?: number;
+}
+
+/**
+ * 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)) {
+      requestAnimationFrame(scroll);
+      return;
+    }
+
+    onScrollEnd();
+    animationQueue.shift();
+    if (animationQueue.length > 0) {
+      animationQueue[0]();
+    }
+  })();
+}
+
+const HorizontalScrollComponent: React.FC<HorizontalScrollProps> = ({
+  children,
+  getScrollToLeft,
+  getScrollToRight,
+  showArrows = true,
+  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
+  hasMouse,
+  getRef,
+  ...restProps
+}) => {
+  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 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 onscroll = React.useCallback(() => {
+    if (
+      showArrows &&
+      hasMouse &&
+      scrollerRef.current &&
+      !isCustomScrollingRef.current
+    ) {
+      const scrollElement = scrollerRef.current;
+
+      setCanScrollLeft(scrollElement.scrollLeft > 0);
+      setCanScrollRight(
+        roundUpElementScrollLeft(scrollElement) + scrollElement.offsetWidth <
+          scrollElement.scrollWidth
+      );
+    }
+  }, [hasMouse, scrollerRef, showArrows]);
+
+  const scrollEvent = useEventListener("scroll", onscroll);
+  React.useEffect(() => {
+    if (scrollerRef.current) {
+      scrollEvent.add(scrollerRef.current);
+    }
+  }, [scrollEvent, scrollerRef]);
+  React.useEffect(onscroll, [scrollerRef, children, onscroll]);
+
+  return (
+    <div
+      {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
+      vkuiClass={classNames("HorizontalScroll", {
+        ["HorizontalScroll--withConstArrows"]: showArrows === "always",
+      })}
+    >
+      {showArrows && hasMouse && canScrollLeft && (
+        <HorizontalScrollArrow direction="left" onClick={scrollToLeft} />
+      )}
+      {showArrows && hasMouse && canScrollRight && (
+        <HorizontalScrollArrow direction="right" onClick={scrollToRight} />
+      )}
+      <div vkuiClass="HorizontalScroll__in" ref={scrollerRef}>
+        <div vkuiClass="HorizontalScroll__in-wrapper">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export const HorizontalScroll = withAdaptivity(HorizontalScrollComponent, {
+  hasMouse: true,
+});

package/src/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -0,0 +1,69 @@
+.HorizontalScrollArrow {
+  position: absolute;
+  cursor: pointer;
+  user-select: auto;
+  top: 0;
+  height: 100%;
+  padding: 0;
+  opacity: 0;
+  z-index: 3;
+  border: none;
+  background-color: transparent;
+  transition: opacity 0.15s;
+  transition-timing-function: var(--android-easing);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.HorizontalScroll:hover .HorizontalScrollArrow,
+.Gallery:hover .HorizontalScrollArrow {
+  opacity: 0.72;
+}
+
+.HorizontalScroll:hover .HorizontalScrollArrow:hover,
+.Gallery:hover .HorizontalScrollArrow:hover,
+.HorizontalScroll--withConstArrows .HorizontalScrollArrow,
+.HorizontalScroll--withConstArrows:hover .HorizontalScrollArrow {
+  opacity: 1;
+}
+
+.HorizontalScrollArrow__icon {
+  background-color: var(
+    --modal_card_background,
+    var(--vkui--color_background_modal)
+  );
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
+  width: 40px;
+  height: 40px;
+  border-radius: 24px;
+  box-shadow: var(
+    --vkui--elevation3,
+    0 0 2px rgba(0, 0, 0, 0.08),
+    0 0 16px rgba(0, 0, 0, 0.12)
+  );
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.HorizontalScrollArrow--left {
+  padding-left: var(--vkui--size_base_padding_horizontal--regular, 16px);
+  left: 0;
+}
+
+.HorizontalScrollArrow--left .HorizontalScrollArrow__icon {
+  transform: rotate(180deg);
+}
+
+.HorizontalScrollArrow--right {
+  padding-right: var(--vkui--size_base_padding_horizontal--regular, 16px);
+  right: 0;
+}
+
+/*
+ * iOS
+ */
+.HorizontalScrollArrow--ios .HorizontalScrollArrow {
+  transition-timing-function: var(--ios-easing);
+}

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import { Icon24Chevron } from "@vkontakte/icons";
+import { classNames } from "../../lib/classNames";
+import Tappable from "../Tappable/Tappable";
+import "./HorizontalScrollArrow.css";
+
+export interface HorizontalScrollArrowProps {
+  onClick: () => void;
+  direction: "left" | "right";
+}
+
+const HorizontalScrollArrow: React.FC<HorizontalScrollArrowProps> = ({
+  onClick,
+  direction,
+}: HorizontalScrollArrowProps) => {
+  return (
+    <Tappable
+      Component="button"
+      hasHover={false}
+      hasActive={false}
+      vkuiClass={classNames(
+        "HorizontalScrollArrow",
+        `HorizontalScrollArrow--${direction}`
+      )}
+      onClick={onClick}
+    >
+      <span vkuiClass="HorizontalScrollArrow__icon">
+        <Icon24Chevron />
+      </span>
+    </Tappable>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default HorizontalScrollArrow;

package/src/components/HorizontalScroll/Readme.md

@@ -0,0 +1,67 @@
+Компонент для отрисовки "длинного" содержимого, которое можно скроллить по горизонтали.
+
+```jsx
+import { useEffect, useState, Fragment } from "react";
+
+const HorizontalScrollExample = () => {
+  const [recentFriends] = useState(getRandomUsers(20));
+  const [commonFriends, setCommonFriends] = useState([]);
+
+  useEffect(() => {
+    // Эмуляция загрузки
+    setTimeout(() => {
+      setCommonFriends(getRandomUsers(20));
+    }, 500);
+  }, []);
+
+  return (
+    <View activePanel="horizontal">
+      <Panel id="horizontal">
+        <PanelHeader>HorizontalScroll</PanelHeader>
+        <Group header={<Header mode="secondary">Недавние</Header>}>
+          <HorizontalScroll
+            showArrows
+            getScrollToLeft={(i) => i - 120}
+            getScrollToRight={(i) => i + 120}
+          >
+            <div style={{ display: "flex" }}>
+              {recentFriends.map((item) => {
+                return (
+                  <HorizontalCell key={item.id} header={item.first_name}>
+                    <Avatar size={56} src={item.photo_200} />
+                  </HorizontalCell>
+                );
+              })}
+            </div>
+          </HorizontalScroll>
+        </Group>
+
+        <Group header={<Header mode="secondary">Общие друзья</Header>}>
+          <HorizontalScroll
+            showArrows
+            getScrollToLeft={(i) => i - 120}
+            getScrollToRight={(i) => i + 120}
+          >
+            <div style={{ display: "flex" }}>
+              {commonFriends.length === 0 && <PanelSpinner />}
+              {commonFriends.length > 0 && (
+                <Fragment>
+                  {commonFriends.map((item) => {
+                    return (
+                      <HorizontalCell key={item.id} header={item.first_name}>
+                        <Avatar size={56} src={item.photo_200} />
+                      </HorizontalCell>
+                    );
+                  })}
+                </Fragment>
+              )}
+            </div>
+          </HorizontalScroll>
+        </Group>
+      </Panel>
+    </View>
+  );
+};
+
+<HorizontalScrollExample />;
+```