@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Alert/Alert.tsx

@@ -0,0 +1,288 @@
+import * as React from "react";
+import Tappable from "../Tappable/Tappable";
+import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { transitionEvent } from "../../lib/supportEvents";
+import { ANDROID, VKCOM, IOS } from "../../lib/platform";
+import { HasPlatform } from "../../types";
+import { withPlatform } from "../../hoc/withPlatform";
+import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
+import Button, { ButtonProps } from "../Button/Button";
+import { hasReactNode } from "../../lib/utils";
+import Headline from "../Typography/Headline/Headline";
+import Title from "../Typography/Title/Title";
+import { Caption } from "../Typography/Caption/Caption";
+import ModalDismissButton from "../ModalDismissButton/ModalDismissButton";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
+import "./Alert.css";
+
+export type AlertActionInterface = AlertAction &
+  React.AnchorHTMLAttributes<HTMLElement>;
+
+export interface AlertAction extends Pick<ButtonProps, "Component" | "href"> {
+  title: string;
+  action?: VoidFunction;
+  autoclose?: boolean;
+  mode: "cancel" | "destructive" | "default";
+}
+
+export interface AlertProps
+  extends React.HTMLAttributes<HTMLElement>,
+    HasPlatform,
+    AdaptivityProps {
+  actionsLayout?: "vertical" | "horizontal";
+  actions?: AlertAction[];
+  header?: React.ReactNode;
+  text?: React.ReactNode;
+  onClose?: VoidFunction;
+}
+
+export type TAlertProps = AlertProps & AdaptivityContextInterface;
+
+export interface AlertState {
+  closing: boolean;
+}
+
+type TransitionEndHandler = (e?: TransitionEvent) => void;
+
+type ItemClickHander = (item: AlertActionInterface) => () => void;
+
+class AlertComponent extends React.Component<TAlertProps, AlertState> {
+  constructor(props: TAlertProps) {
+    super(props);
+    this.element = React.createRef();
+    this.state = {
+      closing: false,
+    };
+  }
+
+  element: React.RefObject<HTMLDivElement>;
+
+  private transitionFinishTimeout: number | undefined = undefined;
+
+  static defaultProps: Partial<TAlertProps> = {
+    actionsLayout: "horizontal",
+    actions: [],
+  };
+
+  private get timeout(): number {
+    return this.props.platform === ANDROID || this.props.platform === VKCOM
+      ? 200
+      : 300;
+  }
+
+  onItemClick: ItemClickHander = (item: AlertActionInterface) => () => {
+    const { action, autoclose } = item;
+
+    if (autoclose) {
+      this.setState({ closing: true });
+      this.waitTransitionFinish((e?: TransitionEvent) => {
+        if (!e || e.propertyName === "opacity") {
+          autoclose && this.props.onClose?.();
+          action && action();
+        }
+      });
+    } else {
+      action && action();
+    }
+  };
+
+  onClose: VoidFunction = () => {
+    this.setState({ closing: true });
+    this.waitTransitionFinish((e?: TransitionEvent) => {
+      if (!e || e.propertyName === "opacity") {
+        this.props.onClose?.();
+      }
+    });
+  };
+
+  stopPropagation: React.MouseEventHandler = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+  };
+
+  waitTransitionFinish(eventHandler: TransitionEndHandler) {
+    if (transitionEvent.supported && this.element.current) {
+      this.element.current.removeEventListener(
+        transitionEvent.name as string,
+        eventHandler as () => void
+      );
+      this.element.current.addEventListener(
+        transitionEvent.name as string,
+        eventHandler as () => void
+      );
+    } else {
+      if (this.transitionFinishTimeout) {
+        clearTimeout(this.transitionFinishTimeout);
+      }
+      this.transitionFinishTimeout = setTimeout(
+        eventHandler.bind(this),
+        this.timeout
+      );
+    }
+  }
+
+  renderHeader(header: React.ReactNode) {
+    switch (this.props.platform) {
+      case VKCOM:
+        return (
+          <Headline vkuiClass="Alert__header" weight="medium">
+            {header}
+          </Headline>
+        );
+      case IOS:
+        return (
+          <Title vkuiClass="Alert__header" weight="1" level="3">
+            {header}
+          </Title>
+        );
+      case ANDROID:
+        return (
+          <Title vkuiClass="Alert__header" weight="2" level="2">
+            {header}
+          </Title>
+        );
+      default:
+        return undefined;
+    }
+  }
+
+  renderText(text: React.ReactNode) {
+    switch (this.props.platform) {
+      case VKCOM:
+        return <Caption vkuiClass="Alert__text">{text}</Caption>;
+      case IOS:
+        return (
+          <Caption vkuiClass="Alert__text" level="2">
+            {text}
+          </Caption>
+        );
+      case ANDROID:
+        return (
+          <Headline vkuiClass="Alert__text" weight="regular">
+            {text}
+          </Headline>
+        );
+      default:
+        return undefined;
+    }
+  }
+
+  renderAction = (action: AlertActionInterface, i: number) => {
+    const { platform } = this.props;
+
+    if (platform === IOS) {
+      const { Component = "button" } = action;
+      return (
+        <Tappable
+          Component={action.href ? "a" : Component}
+          vkuiClass={classNames(
+            "Alert__action",
+            `Alert__action--${action.mode}`
+          )}
+          onClick={this.onItemClick(action)}
+          href={action.href}
+          key={`alert-action-${i}`}
+          target={action.target}
+        >
+          {action.title}
+        </Tappable>
+      );
+    }
+
+    let mode: ButtonProps["mode"] =
+      action.mode === "cancel" ? "secondary" : "primary";
+
+    if (platform === ANDROID) {
+      mode = "tertiary";
+
+      if (
+        this.props.viewWidth === ViewWidth.DESKTOP &&
+        action.mode === "destructive"
+      ) {
+        mode = "destructive";
+      }
+    }
+
+    return (
+      <Button
+        vkuiClass={classNames("Alert__button", `Alert__button--${action.mode}`)}
+        mode={mode}
+        size="m"
+        onClick={this.onItemClick(action)}
+        Component={action.Component}
+        href={action.href}
+        key={`alert-action-${i}`}
+        target={action.target}
+      >
+        {action.title}
+      </Button>
+    );
+  };
+
+  render() {
+    const {
+      actions,
+      actionsLayout,
+      children,
+      className,
+      style,
+      platform,
+      viewWidth,
+      text,
+      header,
+      ...restProps
+    } = this.props;
+    const { closing } = this.state;
+
+    const resolvedActionsLayout: TAlertProps["actionsLayout"] =
+      platform === VKCOM ? "horizontal" : actionsLayout;
+    const canShowCloseButton =
+      platform === VKCOM ||
+      (platform === ANDROID && viewWidth >= ViewWidth.SMALL_TABLET);
+    const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
+
+    return (
+      <PopoutWrapper
+        className={className}
+        closing={closing}
+        style={style}
+        onClick={this.onClose}
+      >
+        <FocusTrap
+          {...restProps}
+          getRootRef={this.element}
+          onClick={this.stopPropagation}
+          onClose={this.onClose}
+          timeout={this.timeout}
+          vkuiClass={classNames(getClassName("Alert", platform), {
+            "Alert--v": resolvedActionsLayout === "vertical",
+            "Alert--h": resolvedActionsLayout === "horizontal",
+            "Alert--closing": closing,
+            "Alert--desktop": isDesktop,
+          })}
+        >
+          {canShowCloseButton && <ModalDismissButton onClick={this.onClose} />}
+          <div vkuiClass="Alert__content">
+            {hasReactNode(header) && this.renderHeader(header)}
+            {hasReactNode(text) && this.renderText(text)}
+            {children}
+          </div>
+          <footer vkuiClass="Alert__actions">
+            {actions?.map(this.renderAction)}
+          </footer>
+        </FocusTrap>
+      </PopoutWrapper>
+    );
+  }
+}
+
+export const Alert = withPlatform(
+  withAdaptivity(AlertComponent, {
+    viewWidth: true,
+  })
+);

package/src/components/Alert/Readme.md

@@ -0,0 +1,133 @@
+Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](#/SplitLayout).
+
+В Алертах особое внимание нужно уделить кнопкам. Всего есть три типа кнопок:
+`cancel`, `destructive` и `default`.
+
+Типом `cancel` нужно подсветить действие, возвращающее пользователя к
+состоянию, когда алерт был закрыт. Пользователь кликнет по нему в случае, когда он открыл алерт для
+совершения какого-то действия и передумал.
+
+Стиль `destructive` используется в случае, когда действие влечёт за собой какие-то деструктивные последствия:
+удаление, разжалование и т.д.
+
+Во всех остальных случаях используйте стиль `default`.
+
+Кнопки могут быть ссылками (передайте `href`) или другим компонентом (передайте `Component`).
+
+> **Важно:**
+>
+> 1. Кнопка со стилем `cancel` должна быть одна на алерт.
+> 2. Кнопку со стилем `cancel` нужно располагать либо слева, либо снизу, в зависимости от выбранного `actionsLayout`.
+> 3. В Android версии игнорируется стили `cancel` и `destructive`, и жирность всех кнопок одинаковая.
+> 4. В VKCOM версии возможно только горизонтальное расположение кнопок.
+> 5. Порядок кнопок должен быть одинаковым на всех платформах (см. пункт 2).
+
+```jsx { "props": { "layout": false, "adaptivity": true } }
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      popout: null,
+      actionsLog: [],
+    };
+
+    this.openAction = this.openAction.bind(this);
+    this.openDeletion = this.openDeletion.bind(this);
+    this.closePopout = this.closePopout.bind(this);
+    this.addActionLogItem = this.addActionLogItem.bind(this);
+  }
+
+  componentDidMount() {
+    this.openDeletion();
+  }
+
+  addActionLogItem(value) {
+    this.setState({
+      actionsLog: [...this.state.actionsLog, value],
+    });
+  }
+
+  openAction() {
+    this.setState({
+      popout: (
+        <Alert
+          actions={[
+            {
+              title: "Лишить права",
+              mode: "destructive",
+              autoclose: true,
+              action: () =>
+                this.addActionLogItem("Право на модерацию контента убрано."),
+            },
+            {
+              title: "Отмена",
+              autoclose: true,
+              mode: "cancel",
+            },
+          ]}
+          actionsLayout="vertical"
+          onClose={this.closePopout}
+          header="Подтвердите действие"
+          text="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
+        />
+      ),
+    });
+  }
+
+  openDeletion() {
+    this.setState({
+      popout: (
+        <Alert
+          actions={[
+            {
+              title: "Отмена",
+              autoclose: true,
+              mode: "cancel",
+            },
+            {
+              title: "Удалить",
+              autoclose: true,
+              mode: "destructive",
+              action: () => this.addActionLogItem("Документ удален."),
+            },
+          ]}
+          actionsLayout="horizontal"
+          onClose={this.closePopout}
+          header="Удаление документа"
+          text="Вы уверены, что хотите удалить этот документ?"
+        />
+      ),
+    });
+  }
+
+  closePopout() {
+    this.setState({ popout: null });
+  }
+
+  render() {
+    return (
+      <SplitLayout popout={this.state.popout}>
+        <SplitCol>
+          <View activePanel="alert">
+            <Panel id="alert">
+              <PanelHeader>Alert</PanelHeader>
+              <Group>
+                <CellButton onClick={this.openAction}>Лишить права</CellButton>
+                <CellButton onClick={this.openDeletion}>
+                  Удалить документ
+                </CellButton>
+                {this.state.actionsLog.map((value, i) => (
+                  <Div key={i}>{value}</Div>
+                ))}
+              </Group>
+            </Panel>
+          </View>
+        </SplitCol>
+      </SplitLayout>
+    );
+  }
+}
+
+<Example />;
+```

package/src/components/AppRoot/AppRoot.css

@@ -0,0 +1,20 @@
+.vkui__root--embedded {
+  transform: translate3d(0, 0, 0);
+  overflow-x: hidden;
+}
+
+.AppRoot {
+  height: 100%;
+}
+
+.vkui__root--embedded .AppRoot {
+  overflow: auto;
+}
+
+.vkui--sizeX-regular {
+  background: var(--background_page);
+}
+
+.AppRoot--no-mouse {
+  user-select: none;
+}

package/src/components/AppRoot/AppRoot.tsx

@@ -0,0 +1,205 @@
+import * as React from "react";
+import { useDOM } from "../../lib/dom";
+import { classNames } from "../../lib/classNames";
+import { AppRootContext } from "./AppRootContext";
+import {
+  withAdaptivity,
+  SizeType,
+  AdaptivityProps,
+} from "../../hoc/withAdaptivity";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { classScopingMode } from "../../lib/classScopingMode";
+import { IconSettingsProvider } from "@vkontakte/icons";
+import {
+  elementScrollController,
+  globalScrollController,
+  ScrollContext,
+  ScrollContextInterface,
+} from "./ScrollContext";
+import { noop } from "../../lib/utils";
+import { warnOnce } from "../../lib/warnOnce";
+import { useKeyboardInputTracker } from "../../hooks/useKeyboardInputTracker";
+import { useInsets } from "../../hooks/useInsets";
+import { Insets } from "@vkontakte/vk-bridge";
+import "./AppRoot.css";
+
+// Используйте classList, но будьте осторожны
+/* eslint-disable no-restricted-properties */
+
+export interface AppRootProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Pick<AdaptivityProps, "sizeX" | "hasMouse"> {
+  /** @deprecated Use mode="embedded" */
+  embedded?: boolean;
+  /** Режим встраивания */
+  mode?: "partial" | "embedded" | "full";
+  window?: Window;
+  /** Убирает классы без префикса (.Button) */
+  noLegacyClasses?: boolean;
+  scroll?: "global" | "contain";
+}
+
+const warn = warnOnce("AppRoot");
+export const AppRoot = withAdaptivity<AppRootProps>(
+  ({
+    children,
+    mode: _mode,
+    embedded: _embedded,
+    sizeX,
+    hasMouse,
+    noLegacyClasses = false,
+    scroll = "global",
+    ...props
+  }) => {
+    // normalize mode
+    const mode = _mode || (_embedded ? "embedded" : "full");
+    const isKeyboardInputActive = useKeyboardInputTracker();
+    const rootRef = React.useRef<HTMLDivElement | null>(null);
+    const [portalRoot, setPortalRoot] = React.useState<HTMLDivElement | null>(
+      null
+    );
+    const { window, document } = useDOM();
+    const insets = useInsets();
+
+    const initialized = React.useRef(false);
+    if (!initialized.current) {
+      if (document && mode === "full") {
+        document.documentElement.classList.add("vkui");
+      }
+      classScopingMode.noConflict = noLegacyClasses;
+      initialized.current = true;
+    }
+
+    if (process.env.NODE_ENV === "development") {
+      if (scroll !== "global" && mode !== "embedded") {
+        warn("Scroll modes only supported in embedded mode");
+      }
+      if (_mode && _embedded) {
+        warn(`mode="${mode}" overrides embedded`);
+      }
+    }
+
+    // setup portal
+    useIsomorphicLayoutEffect(() => {
+      const portal = document!.createElement("div");
+      portal.classList.add("vkui__portal-root");
+      document!.body.appendChild(portal);
+      setPortalRoot(portal);
+      return () => {
+        portal.parentElement?.removeChild(portal);
+      };
+    }, []);
+
+    // setup root classes
+    useIsomorphicLayoutEffect(() => {
+      if (mode === "partial") {
+        return noop;
+      }
+
+      const parent = rootRef.current?.parentElement;
+      const classes = ["vkui__root"].concat(
+        mode === "embedded" ? "vkui__root--embedded" : []
+      );
+      parent?.classList.add(...classes);
+
+      return () => {
+        parent?.classList.remove(...classes);
+        if (mode === "full") {
+          document?.documentElement.classList.remove("vkui");
+        }
+      };
+    }, []);
+
+    // setup insets
+    useIsomorphicLayoutEffect(() => {
+      if (mode === "partial" || !rootRef.current?.parentElement) {
+        return noop;
+      }
+
+      const parent = rootRef.current.parentElement;
+
+      for (const key in insets) {
+        if (
+          insets.hasOwnProperty(key) &&
+          typeof insets[key as keyof Insets] === "number"
+        ) {
+          const inset = insets[key as keyof Insets];
+          parent.style.setProperty(`--safe-area-inset-${key}`, `${inset}px`);
+          portalRoot &&
+            portalRoot.style.setProperty(
+              `--safe-area-inset-${key}`,
+              `${inset}px`
+            );
+        }
+      }
+
+      return () => {
+        for (const key in insets) {
+          if (insets.hasOwnProperty(key)) {
+            parent.style.removeProperty(`--safe-area-inset-${key}`);
+            portalRoot &&
+              portalRoot.style.removeProperty(`--safe-area-inset-${key}`);
+          }
+        }
+      };
+    }, [insets, portalRoot]);
+
+    // adaptivity handler
+    useIsomorphicLayoutEffect(() => {
+      if (mode === "partial" || sizeX !== SizeType.REGULAR) {
+        return noop;
+      }
+      const container =
+        mode === "embedded" ? rootRef.current?.parentElement : document!.body;
+      container?.classList.add("vkui--sizeX-regular");
+      return () => container?.classList.remove("vkui--sizeX-regular");
+    }, [sizeX]);
+
+    const scrollController = React.useMemo<ScrollContextInterface>(
+      () =>
+        scroll === "contain"
+          ? elementScrollController(rootRef)
+          : globalScrollController(window, document),
+      [document, scroll, window]
+    );
+
+    const content = (
+      <AppRootContext.Provider
+        value={{
+          appRoot: rootRef,
+          portalRoot: portalRoot,
+          embedded: mode === "embedded",
+          keyboardInput: isKeyboardInputActive,
+          mode,
+        }}
+      >
+        <ScrollContext.Provider value={scrollController}>
+          <IconSettingsProvider
+            classPrefix="vkui"
+            globalClasses={!noLegacyClasses}
+          >
+            {children}
+          </IconSettingsProvider>
+        </ScrollContext.Provider>
+      </AppRootContext.Provider>
+    );
+
+    return mode === "partial" ? (
+      content
+    ) : (
+      <div
+        ref={rootRef}
+        vkuiClass={classNames("AppRoot", {
+          "AppRoot--no-mouse": !hasMouse,
+        })}
+        {...props}
+      >
+        {content}
+      </div>
+    );
+  },
+  {
+    sizeX: true,
+    hasMouse: true,
+  }
+);

package/src/components/AppRoot/AppRootContext.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+
+export interface AppRootContextInterface {
+  appRoot?: React.RefObject<HTMLDivElement>;
+  portalRoot?: HTMLDivElement | null;
+  embedded?: boolean;
+  mode?: "partial" | "embedded" | "full";
+  keyboardInput?: boolean;
+}
+
+export const AppRootContext = React.createContext<AppRootContextInterface>({
+  portalRoot: null,
+});

package/src/components/AppRoot/AppRootPortal.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { AppRootContext } from "./AppRootContext";
+import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
+import { useAppearance } from "../../hooks/useAppearance";
+
+export const AppRootPortal: React.FC<
+  React.PropsWithChildren<{ className?: string; forcePortal?: boolean }>
+> = ({ children, className, forcePortal }) => {
+  const { portalRoot, mode } = React.useContext(AppRootContext);
+  const appearance = useAppearance();
+
+  forcePortal = forcePortal ?? mode !== "full";
+  return portalRoot && forcePortal ? (
+    createPortal(
+      <AppearanceProvider appearance={appearance}>
+        <div className={className}>{children}</div>
+      </AppearanceProvider>,
+      portalRoot
+    )
+  ) : (
+    <React.Fragment>{children}</React.Fragment>
+  );
+};

package/src/components/AppRoot/Readme.md

@@ -0,0 +1,9 @@
+Обязательный компонент-обёртка над приложением. В нём инкапсулирована логика [режимов подключения](#/Modes).
+
+## Режимы скролла
+
+Навигационные компоненты VKUI — `Root, View, Panel, Epic` — запоминают скролл экрана и восстанавливают его при возвращении. embedded-приложения поддерживают два режима скролла:
+
+- `global` (по умолчанию) — VKUI-приложение скроллится вместе со страницей.
+- `contain` — VKUI-приложение живет в отдельной зоне и скроллится независимо внутри `AppRoot` (например, в модалке).
+  Режимы переключают через `<AppRoot scroll="...">`.