@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/HorizontalCell/Readme.md

@@ -1,236 +0,0 @@
-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

@@ -1,31 +0,0 @@
-.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

@@ -1,221 +0,0 @@
-import * as React from "react";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
-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();
-}
-
-/**
- * Код анимации скрола, на основе полифила: 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 = scrollElement.scrollLeft;
-  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 (scrollElement.scrollLeft !== Math.max(0, endLeft)) {
-      requestAnimationFrame(scroll);
-      return;
-    }
-
-    onScrollEnd();
-    animationQueue.shift();
-    if (animationQueue.length > 0) {
-      animationQueue[0]();
-    }
-  })();
-}
-
-const HorizontalScroll: React.FC<HorizontalScrollProps> = ({
-  children,
-  getScrollToLeft,
-  getScrollToRight,
-  showArrows = true,
-  scrollAnimationDuration = SCROLL_ONE_FRAME_TIME,
-  hasMouse,
-  getRef,
-  ...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 platform = usePlatform();
-
-  function scrollTo(getScrollPosition: (offset: number) => number) {
-    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]();
-    }
-  }
-
-  const onscroll = React.useCallback(() => {
-    if (
-      showArrows &&
-      hasMouse &&
-      scrollerRef.current &&
-      !isCustomScrollingRef.current
-    ) {
-      const scrollElement = scrollerRef.current;
-
-      setCanScrollLeft(scrollElement.scrollLeft > 0);
-      setCanScrollRight(
-        scrollElement.scrollLeft + 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}
-      vkuiClass={classNames(getClassName("HorizontalScroll", platform), {
-        ["HorizontalScroll--withConstArrows"]: showArrows === "always",
-      })}
-    >
-      {showArrows && hasMouse && canScrollLeft && (
-        <HorizontalScrollArrow
-          direction="left"
-          onClick={() => {
-            if (getScrollToLeft) {
-              scrollTo(getScrollToLeft);
-            }
-          }}
-        />
-      )}
-      {showArrows && hasMouse && canScrollRight && (
-        <HorizontalScrollArrow
-          direction="right"
-          onClick={() => {
-            if (getScrollToRight) {
-              scrollTo(getScrollToRight);
-            }
-          }}
-        />
-      )}
-      <div vkuiClass="HorizontalScroll__in" ref={scrollerRef}>
-        <div vkuiClass="HorizontalScroll__in-wrapper">{children}</div>
-      </div>
-    </div>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default withAdaptivity(HorizontalScroll, {
-  hasMouse: true,
-});

package/src/components/HorizontalScroll/HorizontalScrollArrow.css

@@ -1,62 +0,0 @@
-.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);
-  color: var(--icon_secondary);
-  width: 40px;
-  height: 40px;
-  border-radius: 24px;
-  box-shadow: 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: 16px;
-  left: 0;
-}
-
-.HorizontalScrollArrow--left .HorizontalScrollArrow__icon {
-  transform: rotate(180deg);
-}
-
-.HorizontalScrollArrow--right {
-  padding-right: 16px;
-  right: 0;
-}
-
-/*
- * iOS
- */
-.HorizontalScrollArrow--ios .HorizontalScrollArrow {
-  transition-timing-function: var(--ios-easing);
-}

package/src/components/HorizontalScroll/HorizontalScrollArrow.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { Icon24Chevron } from "@vkontakte/icons";
-import { usePlatform } from "../../hooks/usePlatform";
-import { getClassName } from "../../helpers/getClassName";
-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) => {
-  const platform = usePlatform();
-
-  return (
-    <Tappable
-      Component="button"
-      hasHover={false}
-      hasActive={false}
-      vkuiClass={classNames(
-        getClassName("HorizontalScrollArrow", platform),
-        `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

@@ -1,67 +0,0 @@
-Компонент для отрисовки "длинного" содержимого, которое можно скроллить по горизонтали.
-
-```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 />;
-```