@vkontakte/vkui 4.28.0 → 4.29.1

package/src/components/ActionSheet/ActionSheet.tsx

@@ -0,0 +1,164 @@
+import * as React from "react";
+import { PopoutWrapper } from "../PopoutWrapper/PopoutWrapper";
+import { ViewWidth, ViewHeight } from "../../hoc/withAdaptivity";
+import { IOS } from "../../lib/platform";
+import { ActionSheetDropdownDesktop } from "./ActionSheetDropdownDesktop";
+import { ActionSheetDropdown } from "./ActionSheetDropdown";
+import { hasReactNode, noop } from "../../lib/utils";
+import { ActionSheetContext, ItemClickHandler } from "./ActionSheetContext";
+import { Caption } from "../Typography/Caption/Caption";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useTimeout } from "../../hooks/useTimeout";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { useObjectMemo } from "../../hooks/useObjectMemo";
+import { warnOnce } from "../../lib/warnOnce";
+import { SharedDropdownProps, PopupDirection, ToggleRef } from "./types";
+import { useScrollLock } from "../AppRoot/ScrollContext";
+import "./ActionSheet.css";
+
+export interface ActionSheetProps extends React.HTMLAttributes<HTMLDivElement> {
+  header?: React.ReactNode;
+  text?: React.ReactNode;
+  /**
+   * Закрыть попап по клику снаружи. В v5 будет обязательным.
+   */
+  onClose?: VoidFunction;
+  /**
+   * Элемент, рядом с которым вылезает попап на десктопе.
+   * Лучше передавать RefObject c current.
+   * В v5 будет обязательным.
+   */
+  toggleRef?: ToggleRef;
+  /**
+   * Направление на десктопе
+   */
+  popupDirection?: PopupDirection;
+  /**
+   * Только iOS. В v5 будет обязательным.
+   */
+  iosCloseItem?: React.ReactNode;
+}
+
+const warn = warnOnce("ActionSheet");
+
+export const ActionSheet: React.FC<ActionSheetProps> = ({
+  children,
+  className,
+  header,
+  text,
+  style,
+  iosCloseItem,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+  const [closing, setClosing] = React.useState(false);
+  const onClose = () => setClosing(true);
+  const _action = React.useRef(noop);
+
+  const afterClose = () => {
+    restProps.onClose?.();
+    _action.current();
+    _action.current = noop;
+  };
+
+  if (process.env.NODE_ENV === "development" && !restProps.onClose) {
+    warn(
+      `Без свойства "onClose" нельзя закрыть ActionSheet по клику вне компонента`,
+      "error"
+    );
+  }
+
+  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
+  const isDesktop =
+    viewWidth >= ViewWidth.SMALL_TABLET &&
+    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+
+  useScrollLock(!isDesktop);
+
+  let timeout = platform === IOS ? 300 : 200;
+
+  if (isDesktop) {
+    timeout = 0;
+  }
+
+  const fallbackTransitionFinish = useTimeout(afterClose, timeout);
+  React.useEffect(() => {
+    if (closing) {
+      fallbackTransitionFinish.set();
+    } else {
+      fallbackTransitionFinish.clear();
+    }
+  }, [closing, fallbackTransitionFinish]);
+
+  const onItemClick = React.useCallback<ItemClickHandler>(
+    (action, immediateAction, autoclose) => (event) => {
+      event.persist();
+      immediateAction && immediateAction(event);
+      if (autoclose) {
+        _action.current = () => action && action(event);
+        setClosing(true);
+      } else {
+        action && action(event);
+      }
+    },
+    []
+  );
+  const contextValue = useObjectMemo({ onItemClick, isDesktop });
+
+  const DropdownComponent = isDesktop
+    ? ActionSheetDropdownDesktop
+    : ActionSheetDropdown;
+
+  const actionSheet = (
+    <ActionSheetContext.Provider value={contextValue}>
+      <DropdownComponent
+        closing={closing}
+        timeout={timeout}
+        {...(restProps as Omit<SharedDropdownProps, "closing">)}
+        onClose={onClose}
+        className={isDesktop ? className : undefined}
+        style={isDesktop ? style : undefined}
+      >
+        {(hasReactNode(header) || hasReactNode(text)) && (
+          <header vkuiClass="ActionSheet__header">
+            {hasReactNode(header) && (
+              <Caption
+                weight={platform === IOS ? "1" : "2"}
+                vkuiClass="ActionSheet__title"
+              >
+                {header}
+              </Caption>
+            )}
+            {hasReactNode(text) && (
+              <Caption vkuiClass="ActionSheet__text">{text}</Caption>
+            )}
+          </header>
+        )}
+        {children}
+        {platform === IOS && !isDesktop && iosCloseItem}
+      </DropdownComponent>
+    </ActionSheetContext.Provider>
+  );
+
+  if (isDesktop) {
+    return actionSheet;
+  }
+
+  return (
+    <PopoutWrapper
+      closing={closing}
+      alignY="bottom"
+      className={className}
+      style={style}
+      onClick={onClose}
+      hasMask
+      fixed
+    >
+      {actionSheet}
+    </PopoutWrapper>
+  );
+};
+
+ActionSheet.defaultProps = {
+  popupDirection: "bottom",
+};

package/src/components/ActionSheet/ActionSheetContext.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+export type ActionType<T> = (event: React.MouseEvent<T>) => void;
+
+export type ItemClickHandler<T extends Element = Element> = (
+  action: ActionType<T> | undefined,
+  immediateAction: ActionType<T> | undefined,
+  autoclose: boolean
+) => (event: React.MouseEvent) => void;
+
+export type ActionSheetContextType<T extends Element = Element> = {
+  onItemClick?: ItemClickHandler<T>;
+  isDesktop?: boolean;
+};
+
+export const ActionSheetContext = React.createContext<
+  ActionSheetContextType<any>
+>({});

package/src/components/ActionSheet/ActionSheetDropdown.tsx

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { usePlatform } from "../../hooks/usePlatform";
+import { SharedDropdownProps } from "./types";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
+import "./ActionSheet.css";
+
+const stopPropagation: React.MouseEventHandler = (e) => e.stopPropagation();
+
+export const ActionSheetDropdown: React.FC<SharedDropdownProps> = ({
+  children,
+  closing,
+  // these 2 props are only omitted - ActionSheetDesktop compat
+  toggleRef,
+  popupDirection,
+  ...restProps
+}) => {
+  const platform = usePlatform();
+  const baseClaseName = getClassName("ActionSheet", platform);
+
+  return (
+    <FocusTrap
+      {...restProps}
+      onClick={stopPropagation}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
+      vkuiClass={classNames(baseClaseName, {
+        "ActionSheet--closing": closing,
+      })}
+    >
+      {children}
+    </FocusTrap>
+  );
+};

package/src/components/ActionSheet/ActionSheetDropdownDesktop.tsx

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { useDOM } from "../../lib/dom";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useEffectDev } from "../../hooks/useEffectDev";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { isRefObject } from "../../lib/isRefObject";
+import { warnOnce } from "../../lib/warnOnce";
+import { useEventListener } from "../../hooks/useEventListener";
+import { SharedDropdownProps } from "./types";
+import { FocusTrap } from "../FocusTrap/FocusTrap";
+import { Popper } from "../Popper/Popper";
+import "./ActionSheet.css";
+
+const warn = warnOnce("ActionSheet");
+function getEl(
+  ref: SharedDropdownProps["toggleRef"]
+): Element | null | undefined {
+  return ref && "current" in ref ? ref.current : ref;
+}
+
+export const ActionSheetDropdownDesktop: React.FC<SharedDropdownProps> = ({
+  children,
+  toggleRef,
+  closing,
+  popupDirection,
+  onClose,
+  className,
+  style,
+  ...restProps
+}) => {
+  const { document } = useDOM();
+  const platform = usePlatform();
+  const { sizeY } = useAdaptivity();
+  const elementRef = React.useRef<HTMLDivElement | null>(null);
+
+  useEffectDev(() => {
+    const toggleEl = getEl(toggleRef);
+    if (!toggleEl) {
+      warn(`Свойство "toggleRef" не передано`, "error");
+    }
+  }, [toggleRef]);
+
+  const isPopupDirectionTop = React.useMemo(
+    () =>
+      popupDirection === "top" ||
+      (typeof popupDirection === "function" &&
+        popupDirection(elementRef) === "top"),
+    [popupDirection, elementRef]
+  );
+
+  const bodyClickListener = useEventListener("click", (e: MouseEvent) => {
+    const dropdownElement = elementRef?.current;
+    if (dropdownElement && !dropdownElement.contains(e.target as Node)) {
+      onClose?.();
+    }
+  });
+
+  React.useEffect(() => {
+    setTimeout(() => {
+      bodyClickListener.add(document!.body);
+    });
+  }, [bodyClickListener, document]);
+
+  const onClick = React.useCallback((e) => e.stopPropagation(), []);
+
+  const targetRef = React.useMemo(() => {
+    if (isRefObject<SharedDropdownProps["toggleRef"], HTMLElement>(toggleRef)) {
+      return toggleRef;
+    }
+    const refObject = { current: toggleRef as HTMLElement };
+
+    return refObject;
+  }, [toggleRef]);
+
+  return (
+    <Popper
+      targetRef={targetRef}
+      offsetDistance={0}
+      placement={isPopupDirectionTop ? "top-end" : "bottom-end"}
+      vkuiClass={classNames(
+        getClassName("ActionSheet", platform),
+        "ActionSheet--desktop",
+        `ActionSheet--sizeY-${sizeY}`
+      )}
+      className={className}
+      style={style}
+      getRef={elementRef}
+      forcePortal={false}
+    >
+      <FocusTrap onClose={onClose} {...restProps} onClick={onClick}>
+        {children}
+      </FocusTrap>
+    </Popper>
+  );
+};

package/src/components/ActionSheet/Readme.md

@@ -0,0 +1,257 @@
+ActionSheet – имитация [нативного компонента](https://developer.apple.com/ios/human-interface-guidelines/views/action-sheets/).
+Удобно использовать, когда нужно дать пользователю выбрать одно из множества действий. В качестве `children` принимает
+коллекцию `ActionSheetItem`.
+На больших экранах прокрутка не отключается.
+
+Передаётся в качестве значения свойства `popout` компонента [`SplitLayout`](#/SplitLayout).
+
+> **Важно**
+>
+> - Нужно обязательно передать `onClose` для обработки закрытия `ActionSheet` изнутри.
+> - Согласно гайдлайнам Apple, в `ActionSheet` должен быть элемент для закрытия, для этого предусмотрен атрибут `iosCloseItem`.
+>   В коде примера ниже можно посмотреть, как добавить такой элемент.
+>   Для Android версии он не нужен.
+
+```jsx { "props": { "layout": false, "adaptivity": true } }
+const [popout, setPopout] = useState(null);
+const onClose = () => setPopout(null);
+const [filter, setFilter] = useState("best");
+const onChange = (e) => setFilter(e.target.value);
+const baseTargetRef = React.useRef();
+const iconsTargetRef = React.useRef();
+const subtitleTargetRef = React.useRef();
+const selectableTargetRef = React.useRef();
+const titleTargetRef = React.useRef();
+const baseTopTargetRef = React.useRef();
+
+const openBase = () =>
+  setPopout(
+    <ActionSheet
+      onClose={onClose}
+      iosCloseItem={
+        <ActionSheetItem autoclose mode="cancel">
+          Отменить
+        </ActionSheetItem>
+      }
+      toggleRef={baseTargetRef}
+    >
+      <ActionSheetItem autoclose>Сохранить в закладках</ActionSheetItem>
+      <ActionSheetItem autoclose>Закрепить запись</ActionSheetItem>
+      <ActionSheetItem autoclose>Выключить комментирование</ActionSheetItem>
+      <ActionSheetItem autoclose>Закрепить запись</ActionSheetItem>
+      <ActionSheetItem autoclose mode="destructive">
+        Удалить запись
+      </ActionSheetItem>
+    </ActionSheet>
+  );
+
+const openIcons = () =>
+  setPopout(
+    <ActionSheet
+      onClose={onClose}
+      iosCloseItem={
+        <ActionSheetItem autoclose mode="cancel">
+          Отменить
+        </ActionSheetItem>
+      }
+      toggleRef={iconsTargetRef}
+    >
+      <ActionSheetItem autoclose before={<Icon28EditOutline />}>
+        Редактировать профиль
+      </ActionSheetItem>
+      <ActionSheetItem autoclose before={<Icon28ListPlayOutline />}>
+        Слушать далее
+      </ActionSheetItem>
+      <ActionSheetItem autoclose before={<Icon28ShareOutline />}>
+        Поделиться
+      </ActionSheetItem>
+      <ActionSheetItem autoclose before={<Icon28CopyOutline />}>
+        Скопировать ссылку
+      </ActionSheetItem>
+      <ActionSheetItem
+        autoclose
+        before={
+          platform === IOS ? (
+            <Icon28DeleteOutline />
+          ) : (
+            <Icon28DeleteOutlineAndroid />
+          )
+        }
+        mode="destructive"
+      >
+        Удалить плейлист
+      </ActionSheetItem>
+    </ActionSheet>
+  );
+
+const openSubtitle = () =>
+  setPopout(
+    <ActionSheet
+      onClose={onClose}
+      iosCloseItem={
+        <ActionSheetItem autoclose mode="cancel">
+          Отменить
+        </ActionSheetItem>
+      }
+      toggleRef={subtitleTargetRef}
+    >
+      <ActionSheetItem
+        before={<Icon28SettingsOutline />}
+        autoclose
+        subtitle="Авто"
+      >
+        Качество
+      </ActionSheetItem>
+      <ActionSheetItem
+        before={<Icon28SubtitlesOutline />}
+        autoclose
+        subtitle="Отсутствуют"
+        disabled
+      >
+        Субтитры
+      </ActionSheetItem>
+      <ActionSheetItem
+        before={<Icon28PlaySpeedOutline />}
+        autoclose
+        subtitle="Обычная"
+      >
+        Скорость воспроизведения
+      </ActionSheetItem>
+    </ActionSheet>
+  );
+
+const openSelectable = () =>
+  setPopout(
+    <ActionSheet
+      onClose={onClose}
+      iosCloseItem={
+        <ActionSheetItem autoclose mode="cancel">
+          Отменить
+        </ActionSheetItem>
+      }
+      toggleRef={selectableTargetRef}
+    >
+      <ActionSheetItem
+        onChange={onChange}
+        checked={filter === "best"}
+        name="filter"
+        value="best"
+        autoclose
+        selectable
+      >
+        Лучшие друзья
+      </ActionSheetItem>
+      <ActionSheetItem
+        onChange={onChange}
+        checked={filter === "relatives"}
+        name="filter"
+        value="relatives"
+        autoclose
+        selectable
+      >
+        Родственники
+      </ActionSheetItem>
+      <ActionSheetItem
+        onChange={onChange}
+        checked={filter === "collegues"}
+        name="filter"
+        value="collegues"
+        autoclose
+        selectable
+      >
+        Коллеги
+      </ActionSheetItem>
+      <ActionSheetItem
+        onChange={onChange}
+        checked={filter === "school"}
+        name="filter"
+        value="school"
+        autoclose
+        selectable
+      >
+        Друзья по школе
+      </ActionSheetItem>
+      <ActionSheetItem
+        onChange={onChange}
+        checked={filter === "university"}
+        name="filter"
+        value="university"
+        autoclose
+        selectable
+      >
+        Друзья по вузу
+      </ActionSheetItem>
+    </ActionSheet>
+  );
+
+const openTitle = () =>
+  setPopout(
+    <ActionSheet
+      onClose={onClose}
+      iosCloseItem={
+        <ActionSheetItem autoclose mode="cancel">
+          Отменить
+        </ActionSheetItem>
+      }
+      header="Вы действительно хотите удалить это видео из Ваших видео?"
+      toggleRef={titleTargetRef}
+    >
+      <ActionSheetItem autoclose mode="destructive">
+        Удалить видео
+      </ActionSheetItem>
+    </ActionSheet>
+  );
+
+const openBaseTop = () =>
+  setPopout(
+    <ActionSheet
+      onClose={onClose}
+      iosCloseItem={
+        <ActionSheetItem autoclose mode="cancel">
+          Отменить
+        </ActionSheetItem>
+      }
+      toggleRef={baseTopTargetRef}
+    >
+      <ActionSheetItem autoclose>Сохранить в закладках</ActionSheetItem>
+      <ActionSheetItem autoclose>Закрепить запись</ActionSheetItem>
+      <ActionSheetItem autoclose>Выключить комментирование</ActionSheetItem>
+      <ActionSheetItem autoclose>Закрепить запись</ActionSheetItem>
+      <ActionSheetItem autoclose mode="destructive">
+        Удалить запись
+      </ActionSheetItem>
+    </ActionSheet>
+  );
+
+React.useEffect(openBase, []);
+
+<SplitLayout popout={popout}>
+  <SplitCol>
+    <View activePanel="panel">
+      <Panel id="panel">
+        <PanelHeader>ActionSheet</PanelHeader>
+        <Group>
+          <CellButton getRootRef={baseTargetRef} onClick={openBase}>
+            Базовый список
+          </CellButton>
+          <CellButton getRootRef={iconsTargetRef} onClick={openIcons}>
+            Список с иконками
+          </CellButton>
+          <CellButton getRootRef={subtitleTargetRef} onClick={openSubtitle}>
+            С подзаголовком
+          </CellButton>
+          <CellButton getRootRef={selectableTargetRef} onClick={openSelectable}>
+            Выделяемые
+          </CellButton>
+          <CellButton getRootRef={titleTargetRef} onClick={openTitle}>
+            C заголовком
+          </CellButton>
+          <CellButton getRootRef={baseTopTargetRef} onClick={openBaseTop}>
+            Базовый список, открывается наверх на десктопах
+          </CellButton>
+        </Group>
+      </Panel>
+    </View>
+  </SplitCol>
+</SplitLayout>;
+```

package/src/components/ActionSheet/types.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { FocusTrapProps } from "../FocusTrap/FocusTrap";
+
+export type PopupDirection =
+  | "top"
+  | "bottom"
+  | ((elRef: React.RefObject<HTMLDivElement>) => "top" | "bottom");
+export type ToggleRef = Element | null | undefined | React.RefObject<Element>;
+
+export interface SharedDropdownProps
+  extends React.AllHTMLAttributes<HTMLElement>,
+    FocusTrapProps {
+  closing: boolean;
+  toggleRef: ToggleRef;
+  popupDirection: PopupDirection;
+}