@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Snackbar/Snackbar.tsx

@@ -0,0 +1,254 @@
+import * as React from "react";
+import { Touch, TouchEvent } from "../Touch/Touch";
+import { classNames } from "../../lib/classNames";
+import { HasPlatform } from "../../types";
+import { getClassName } from "../../helpers/getClassName";
+import { ANDROID, VKCOM } from "../../lib/platform";
+import { rubber } from "../../lib/touch";
+import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
+import Text from "../Typography/Text/Text";
+import Button from "../Button/Button";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useTimeout } from "../../hooks/useTimeout";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
+import "./Snackbar.css";
+
+export interface SnackbarProps
+  extends React.HTMLAttributes<HTMLElement>,
+    HasPlatform,
+    AdaptivityProps {
+  /**
+   * Название кнопки действия в уведомлении
+   */
+  action?: string | React.ComponentType;
+
+  /**
+   * Будет вызвано при клике на кнопку действия
+   */
+  onActionClick?: (e: React.MouseEvent) => void;
+
+  /**
+   * Цветная иконка 24x24 пикселя
+   */
+  before?: React.ReactNode;
+  /**
+   * Контент в правой части, может быть `<Avatar size={32} />`
+   */
+  after?: React.ReactNode;
+  /**
+   * Варианты расположения кнопки
+   */
+  layout?: "vertical" | "horizontal";
+  /**
+   * Время в миллисекундах, через которое плашка скроется
+   */
+  duration?: number;
+  /**
+   * Обработчик закрытия уведомления
+   */
+  onClose: () => void;
+}
+
+const SnackbarComponent: React.FC<
+  SnackbarProps & AdaptivityContextInterface
+> = (props) => {
+  const {
+    children,
+    layout,
+    action,
+    before,
+    after,
+    viewWidth,
+    duration = 0,
+    onActionClick,
+    onClose,
+    ...restProps
+  } = props;
+
+  const platform = usePlatform();
+
+  const { waitTransitionFinish } = useWaitTransitionFinish();
+
+  const [closing, setClosing] = React.useState(false);
+  const [touched, setTouched] = React.useState(false);
+
+  const shiftXPercentRef = React.useRef<number>(0);
+  const shiftXCurrentRef = React.useRef<number>(0);
+
+  const bodyElRef = React.useRef<HTMLDivElement | null>(null);
+  const innerElRef = React.useRef<HTMLDivElement | null>(null);
+
+  const animationFrameRef = React.useRef<ReturnType<
+    typeof requestAnimationFrame
+  > | null>(null);
+
+  const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+  const transitionFinishDurationFallback =
+    platform === ANDROID || platform === VKCOM ? 400 : 320;
+
+  const close = () => {
+    setClosing(true);
+    waitTransitionFinish(
+      innerElRef.current,
+      () => {
+        onClose();
+      },
+      transitionFinishDurationFallback
+    );
+  };
+
+  const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {
+    close();
+
+    if (action && typeof onActionClick === "function") {
+      onActionClick(e);
+    }
+  };
+
+  const closeTimeout = useTimeout(close, duration);
+
+  const setBodyTransform = (percent: number) => {
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
+    animationFrameRef.current = requestAnimationFrame(() => {
+      if (bodyElRef.current) {
+        bodyElRef.current.style.transform = `translate3d(${percent}%, 0, 0)`;
+      }
+    });
+  };
+
+  const onTouchStart = closeTimeout.clear;
+
+  const onTouchMoveX = (event: TouchEvent) => {
+    const { shiftX, originalEvent } = event;
+    originalEvent.preventDefault();
+
+    if (!touched) {
+      setTouched(true);
+    }
+
+    shiftXPercentRef.current =
+      (shiftX / (bodyElRef.current?.offsetWidth ?? 0)) * 100;
+    shiftXCurrentRef.current = rubber(
+      shiftXPercentRef.current,
+      72,
+      1.2,
+      platform === ANDROID || platform === VKCOM
+    );
+
+    setBodyTransform(shiftXCurrentRef.current);
+  };
+
+  const onTouchEnd = (e: TouchEvent) => {
+    let callback: VoidFunction | undefined;
+
+    if (touched) {
+      let shiftXCurrent = shiftXCurrentRef.current;
+      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;
+      shiftXCurrent = shiftXCurrent + expectTranslateY;
+
+      if (isDesktop && shiftXCurrent <= -50) {
+        closeTimeout.clear();
+        waitTransitionFinish(
+          bodyElRef.current,
+          () => {
+            onClose();
+          },
+          transitionFinishDurationFallback
+        );
+        setBodyTransform(-120);
+      } else if (!isDesktop && shiftXCurrent >= 50) {
+        closeTimeout.clear();
+        waitTransitionFinish(
+          bodyElRef.current,
+          () => {
+            onClose();
+          },
+          transitionFinishDurationFallback
+        );
+        setBodyTransform(120);
+      } else {
+        callback = () => {
+          closeTimeout.set();
+          setBodyTransform(0);
+        };
+      }
+    } else {
+      closeTimeout.set();
+    }
+
+    setTouched(false);
+    callback && requestAnimationFrame(callback);
+  };
+
+  React.useEffect(() => closeTimeout.set(), [closeTimeout]);
+
+  const resolvedLayout = after || isDesktop ? "vertical" : layout;
+
+  return (
+    <AppRootPortal>
+      <div
+        {...restProps}
+        vkuiClass={classNames(
+          getClassName("Snackbar", platform),
+          `Snackbar--l-${resolvedLayout}`,
+          {
+            "Snackbar--closing": closing,
+            "Snackbar--touched": touched,
+            "Snackbar--desktop": isDesktop,
+          }
+        )}
+      >
+        <Touch
+          vkuiClass="Snackbar__in"
+          getRootRef={innerElRef}
+          onStart={onTouchStart}
+          onMoveX={onTouchMoveX}
+          onEnd={onTouchEnd}
+        >
+          <div vkuiClass="Snackbar__body" ref={bodyElRef}>
+            {before && <div vkuiClass="Snackbar__before">{before}</div>}
+
+            <div vkuiClass="Snackbar__content">
+              <Text weight="regular" vkuiClass="Snackbar__content-text">
+                {children}
+              </Text>
+
+              {action && (
+                <Button
+                  align="left"
+                  hasHover={false}
+                  mode="tertiary"
+                  size="s"
+                  vkuiClass="Snackbar__action"
+                  onClick={handleActionClick}
+                >
+                  {action}
+                </Button>
+              )}
+            </div>
+
+            {after && <div vkuiClass="Snackbar__after">{after}</div>}
+          </div>
+        </Touch>
+      </div>
+    </AppRootPortal>
+  );
+};
+
+SnackbarComponent.displayName = "Snackbar";
+
+SnackbarComponent.defaultProps = {
+  duration: 4000,
+  layout: "horizontal",
+};
+
+export const Snackbar = withAdaptivity(SnackbarComponent, {
+  viewWidth: true,
+});

package/src/components/Spacing/Readme.md

@@ -0,0 +1,98 @@
+Компонент для разделения контента
+
+Для большинства случаев будет достаточно дефолтного поведения компонента
+
+```jsx static
+<Spacing /> // - пустой отступ высотой 8px
+
+<Spacing size={16} />  // - пустой отступ высотой 16px
+
+<Spacing separator size={16} /> // - сепаратор с отступами 8px сверху и снизу
+```
+
+Для более гибкой настройки положения линии и отступов, можно комбинировать два отступа вместе
+
+Например - нужен сепаратор с отступом сверху 12px и снизу 20px:
+
+```jsx static
+<Spacing separator="bottom" size={12} />
+<Spacing size={20} />
+```
+
+```jsx
+<View activePanel="separator">
+  <Panel id="separator">
+    <PanelHeader>Spacing</PanelHeader>
+
+    <Group
+      header={<Header mode="secondary">Default Spacing (empty, 8px)</Header>}
+    >
+      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
+      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+
+      <Spacing />
+
+      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
+      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+    </Group>
+
+    <Group header={<Header mode="secondary">Spacing 16px</Header>}>
+      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
+      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+
+      <Spacing size={16} />
+
+      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
+      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+    </Group>
+
+    <Group
+      header={
+        <Header mode="secondary">Spacing with centered separator 16px</Header>
+      }
+    >
+      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
+      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+
+      <Spacing separator size={16} />
+
+      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
+      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+    </Group>
+
+    <Group
+      header={
+        <Header mode="secondary">
+          Combined Spacings with bottom separator
+        </Header>
+      }
+    >
+      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
+      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+
+      <Spacing separator="bottom" />
+      <Spacing />
+
+      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
+      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+    </Group>
+
+    <Group
+      header={
+        <Header mode="secondary">
+          Combined Spacings with bottom separator and custom size
+        </Header>
+      }
+    >
+      <Cell before={<Icon28Notifications />}>Уведомления</Cell>
+      <Cell before={<Icon28BlockOutline />}>Не беспокоить</Cell>
+
+      <Spacing separator="bottom" size={12} />
+      <Spacing size={20} />
+
+      <Cell before={<Icon28UserOutline />}>Учётная запись</Cell>
+      <Cell before={<Icon28SlidersOutline />}>Основные</Cell>
+    </Group>
+  </Panel>
+</View>
+```

package/src/components/Spacing/Spacing.css

@@ -0,0 +1,46 @@
+.Spacing {
+  color: var(--separator_common);
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+}
+
+.Spacing--separator-center {
+  justify-content: center;
+}
+
+.Spacing--separator-bottom {
+  flex-direction: column-reverse;
+}
+
+.Spacing--separator::after {
+  content: "";
+  display: block;
+  height: 1px;
+  background: currentColor;
+  transform-origin: center top;
+}
+
+@media (min-resolution: 2dppx) {
+  .Spacing--separator::after {
+    transform: scaleY(0.5);
+  }
+}
+
+@media (min-resolution: 3dppx) {
+  .Spacing--separator::after {
+    transform: scaleY(0.32);
+  }
+}
+
+.Spacing--ios {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.Spacing--android,
+.Spacing--vkcom {
+  padding-left: 16px;
+  padding-right: 16px;
+}

package/src/components/Spacing/Spacing.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getClassName } from "../../helpers/getClassName";
+import "./Spacing.css";
+
+export interface SpacingProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Высота спэйсинга
+   */
+  size?: number;
+  /**
+   * Настройка положения сепаратора:
+   *
+   * - separator=false (default) - без сепаратора
+   * - separator=true | separator='center' - сепаратор располагается по середине
+   * - separator='top'
+   * - separator='bottom'
+   */
+  separator?: boolean | "top" | "bottom" | "center";
+}
+
+export const Spacing: React.FC<SpacingProps> = ({
+  size,
+  separator,
+  style,
+  ...restProps
+}: SpacingProps) => {
+  const platform = usePlatform();
+  const styles = {
+    height: size,
+    ...style,
+  };
+
+  return (
+    <div
+      {...restProps}
+      aria-hidden="true"
+      vkuiClass={classNames(getClassName("Spacing", platform), {
+        "Spacing--separator": !!separator,
+        "Spacing--separator-center":
+          separator === true || separator === "center",
+        "Spacing--separator-top": separator === "top",
+        "Spacing--separator-bottom": separator === "bottom",
+      })}
+      style={styles}
+    />
+  );
+};
+
+Spacing.defaultProps = {
+  size: 8,
+};

package/src/components/Spinner/Readme.md

@@ -0,0 +1,11 @@
+Используется для визуализации выполнения асинхронного процесса (например ajax запроса). Если нужно на момент загрузки
+заблокировать интерфейс, то можно использовать надстройку над `Spinner` – [ScreenSpinner](#!/ScreenSpinner).
+
+```jsx { "props": { "layout": false, "iframe": false } }
+<div style={{ display: "flex", alignItems: "center", flexDirection: "column" }}>
+  <Spinner size="large" style={{ margin: "20px 0" }} />
+  <Spinner size="medium" style={{ margin: "20px 0" }} />
+  <Spinner size="regular" style={{ margin: "20px 0" }} />
+  <Spinner size="small" style={{ margin: "20px 0" }} />
+</div>
+```

package/src/components/Spinner/Spinner.css

@@ -0,0 +1,33 @@
+.Spinner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--icon_outline_secondary);
+}
+
+.Spinner__self {
+  animation: vkui-rotator var(--duration) linear infinite;
+  transform-origin: center;
+}
+
+.Spinner__self svg {
+  transform: scale(1);
+}
+
+/**
+ * PanelHeader
+ */
+
+.PanelHeader .Spinner {
+  color: currentColor;
+}
+
+/**
+ * Button
+ */
+
+.Button .Spinner {
+  color: currentColor;
+}

package/src/components/Spinner/Spinner.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import {
+  Icon24Spinner,
+  Icon32Spinner,
+  Icon44Spinner,
+  Icon16Spinner,
+} from "@vkontakte/icons";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./Spinner.css";
+
+export interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement> {
+  size?: "small" | "regular" | "large" | "medium";
+}
+
+const Spinner: React.FC<SpinnerProps> = ({
+  size,
+  ...restProps
+}: SpinnerProps) => {
+  const platform = usePlatform();
+
+  let SpinnerIcon = Icon24Spinner;
+
+  if (size === "large") {
+    SpinnerIcon = Icon44Spinner;
+  }
+
+  if (size === "medium") {
+    SpinnerIcon = Icon32Spinner;
+  }
+
+  if (size === "small") {
+    SpinnerIcon = Icon16Spinner;
+  }
+
+  return (
+    <span
+      role="status"
+      {...restProps}
+      vkuiClass={getClassName("Spinner", platform)}
+    >
+      <SpinnerIcon aria-hidden="true" vkuiClass="Spinner__self" />
+    </span>
+  );
+};
+
+Spinner.defaultProps = {
+  size: "regular",
+  "aria-label": "Загружается...",
+};
+
+// eslint-disable-next-line import/no-default-export
+export default React.memo(Spinner);

package/src/components/SplitCol/Readme.md

@@ -0,0 +1 @@
+Компонент-обертка для отрисовки колонки в [многоколоночном интерфейсе](#!/Adaptivity).

package/src/components/SplitCol/SplitCol.css

@@ -0,0 +1,28 @@
+.SplitCol {
+  height: 100%;
+  width: 1px;
+  flex-grow: 1;
+  flex-shrink: 1;
+  position: relative;
+}
+
+.SplitCol--spaced {
+  margin: 0 16px;
+}
+
+.SplitCol--fixed {
+  height: 100%;
+  width: 1px;
+  flex-grow: 1;
+  flex-shrink: 1;
+}
+
+.SplitCol__fixedInner {
+  height: inherit;
+  width: inherit;
+  min-width: inherit;
+  max-width: inherit;
+  position: fixed;
+  transform: translateZ(0);
+  overflow: hidden;
+}

package/src/components/SplitCol/SplitCol.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import "./SplitCol.css";
+
+export interface SplitColContextProps {
+  colRef: React.RefObject<HTMLDivElement> | null;
+  animate: boolean;
+}
+
+export const SplitColContext = React.createContext<SplitColContextProps>({
+  colRef: null,
+  animate: true,
+});
+
+export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
+  width?: number | string;
+  maxWidth?: number | string;
+  minWidth?: number | string;
+  /**
+   * Если false, то переходы между Panel происходят без анимации
+   */
+  animate?: boolean;
+  /**
+   * Если true, то добавляются боковые отступы фиксированной величины
+   */
+  spaced?: boolean;
+  fixed?: boolean;
+}
+
+export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
+  const {
+    children,
+    width,
+    maxWidth,
+    minWidth,
+    spaced,
+    animate = false,
+    fixed,
+    style,
+    ...restProps
+  } = props;
+  const baseRef = React.useRef<HTMLDivElement>(null);
+
+  const contextValue = React.useMemo(() => {
+    return {
+      colRef: baseRef,
+      animate,
+    };
+  }, [baseRef, animate]);
+
+  return (
+    <div
+      {...restProps}
+      style={{
+        ...style,
+        width: width,
+        maxWidth: maxWidth,
+        minWidth: minWidth,
+      }}
+      ref={baseRef}
+      vkuiClass={classNames("SplitCol", {
+        "SplitCol--spaced": spaced,
+        "SplitCol--fixed": fixed,
+      })}
+    >
+      <SplitColContext.Provider value={contextValue}>
+        {fixed ? (
+          <div vkuiClass="SplitCol__fixedInner">{children}</div>
+        ) : (
+          children
+        )}
+      </SplitColContext.Provider>
+    </div>
+  );
+};