@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Alert/Alert.tsx

@@ -1,292 +0,0 @@
-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" level="1" weight="regular">
-            {text}
-          </Caption>
-        );
-      case IOS:
-        return (
-          <Caption vkuiClass="Alert__text" level="2" weight="regular">
-            {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

@@ -1,133 +0,0 @@
-Передаётся в качестве значения свойства `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.openDeleteion = this.openDeleteion.bind(this);
-    this.closePopout = this.closePopout.bind(this);
-    this.addActionLogItem = this.addActionLogItem.bind(this);
-  }
-
-  componentDidMount() {
-    this.openDeleteion();
-  }
-
-  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="Вы уверены, что хотите лишить пользователя права на модерацию контента?"
-        />
-      ),
-    });
-  }
-
-  openDeleteion() {
-    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.openDeleteion}>
-                  Удалить документ
-                </CellButton>
-                {this.state.actionsLog.map((value, i) => (
-                  <Div key={i}>{value}</Div>
-                ))}
-              </Group>
-            </Panel>
-          </View>
-        </SplitCol>
-      </SplitLayout>
-    );
-  }
-}
-
-<Example />;
-```

package/src/components/AppRoot/AppRoot.css

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

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

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

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

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