@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/PanelHeaderEdit/PanelHeaderEdit.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import {
+  PanelHeaderButton,
+  PanelHeaderButtonProps,
+} from "../PanelHeaderButton/PanelHeaderButton";
+import { ANDROID, VKCOM } from "../../lib/platform";
+import { Icon28EditOutline, Icon28DoneOutline } from "@vkontakte/icons";
+import { usePlatform } from "../../hooks/usePlatform";
+
+export interface PanelHeaderEditProps extends PanelHeaderButtonProps {
+  /**
+   * Включен ли режим редактирования
+   */
+  isActive?: boolean;
+  /**
+   * iOS only. Текст кнопки, когда режим редактирования не активен
+   */
+  editLabel?: string;
+  /**
+   * iOS only. Текст кнопки при активном режиме редактирования для выхода из него
+   */
+  doneLabel?: string;
+}
+
+const PanelHeaderEdit: React.FunctionComponent<PanelHeaderEditProps> = ({
+  isActive,
+  editLabel,
+  doneLabel,
+  ...restProps
+}: PanelHeaderEditProps) => {
+  const iOSText = isActive ? doneLabel : editLabel;
+  const AndroidIcon = isActive ? Icon28DoneOutline : Icon28EditOutline;
+  const platform = usePlatform();
+
+  return (
+    <PanelHeaderButton aria-label={iOSText} {...restProps}>
+      {platform === ANDROID || platform === VKCOM ? <AndroidIcon /> : iOSText}
+    </PanelHeaderButton>
+  );
+};
+
+PanelHeaderEdit.defaultProps = {
+  isActive: false,
+  editLabel: "Редактировать",
+  doneLabel: "Готово",
+};
+
+// eslint-disable-next-line import/no-default-export
+export default PanelHeaderEdit;

package/src/components/PanelHeaderEdit/Readme.md

@@ -0,0 +1 @@
+Компонент для отрисовки кнопки **Редактировать** в шапке. Принимает свойство `isActive`, которое определяет состояние кнопки (включен ли режим редактирования).

package/src/components/PanelHeaderSubmit/PanelHeaderSubmit.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+import {
+  PanelHeaderButton,
+  PanelHeaderButtonProps,
+} from "../PanelHeaderButton/PanelHeaderButton";
+import { Icon28DoneOutline } from "@vkontakte/icons";
+import { ANDROID, VKCOM } from "../../lib/platform";
+import { usePlatform } from "../../hooks/usePlatform";
+import { getTitleFromChildren } from "../../lib/utils";
+
+const PanelHeaderSubmit: React.FunctionComponent<PanelHeaderButtonProps> = ({
+  children,
+  ...restProps
+}: PanelHeaderButtonProps) => {
+  const platform = usePlatform();
+
+  return (
+    <PanelHeaderButton
+      aria-label={getTitleFromChildren(children)}
+      primary
+      {...restProps}
+    >
+      {platform === ANDROID || platform === VKCOM ? (
+        <Icon28DoneOutline />
+      ) : (
+        children
+      )}
+    </PanelHeaderButton>
+  );
+};
+
+PanelHeaderSubmit.defaultProps = {
+  children: "Готово",
+};
+
+// eslint-disable-next-line import/no-default-export
+export default PanelHeaderSubmit;

package/src/components/PanelHeaderSubmit/Readme.md

@@ -0,0 +1,13 @@
+Этот компонент используется для показа кнопки "Готово" в модальных окнах для закрытия текущего `View` в рамках `Root` и сохранения какого-либо результата. На iOS будет показан текст, передаваемый как `children`, на Android - `<Icon28DoneOutline />`:
+
+```jsx static
+import { PanelHeaderSubmit } from "@vkontakte/vkui";
+
+<PanelHeader
+  right={
+    <PanelHeaderSubmit onClick={this.props.onSubmit}>Готово</PanelHeaderSubmit>
+  }
+>
+  Заголовок модального окна
+</PanelHeader>;
+```

package/src/components/PanelSpinner/PanelSpinner.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import Spinner, { SpinnerProps } from "../Spinner/Spinner";
+
+export interface PanelSpinnerProps extends SpinnerProps {
+  height?: number;
+}
+
+const PanelSpinner: React.FunctionComponent<PanelSpinnerProps> = ({
+  height,
+  style,
+  ...restProps
+}: PanelSpinnerProps) => {
+  return <Spinner size="regular" {...restProps} style={{ height, ...style }} />;
+};
+
+PanelSpinner.defaultProps = {
+  height: 96,
+};
+
+// eslint-disable-next-line import/no-default-export
+export default React.memo(PanelSpinner);

package/src/components/PanelSpinner/Readme.md

@@ -0,0 +1,15 @@
+Этот компонент - обёртка над `<Spinner />` с заданными отступами и размером. Удобно использовать его во время загрузки данных.
+
+```jsx static
+import { PanelSpinner } from "@vkontakte/vkui";
+
+<Panel>
+  <PanelHeader left={<PanelHeaderBack />}>Заголовок панели</PanelHeader>
+
+  {loading ? (
+    <PanelSpinner />
+  ) : (
+    <Group header={<Header mode="secondary">Информация</Header>}>...</Group>
+  )}
+</Panel>;
+```

package/src/components/Placeholder/Placeholder.css

@@ -0,0 +1,50 @@
+.Placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Placeholder--stretched {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  padding-top: inherit;
+  padding-bottom: inherit;
+}
+
+.Placeholder__in {
+  max-width: 100%;
+  text-align: center;
+  box-sizing: border-box;
+  padding: 48px 32px;
+}
+
+.Placeholder__icon {
+  margin-bottom: 12px;
+  display: inline-block;
+  vertical-align: top;
+  color: var(--placeholder_icon_foreground_secondary);
+}
+
+.Placeholder__header {
+  color: var(--text_primary);
+}
+
+.Placeholder__text {
+  color: var(--text_placeholder);
+}
+
+.Placeholder__header + .Placeholder__text {
+  margin-top: 8px;
+}
+
+.Placeholder__action:not(:first-child) {
+  margin-top: 24px;
+}
+
+.Placeholder__action .Button--lvl-tertiary {
+  top: -8px;
+}

package/src/components/Placeholder/Placeholder.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import { hasReactNode } from "../../lib/utils";
+import Title from "../Typography/Title/Title";
+import Headline from "../Typography/Headline/Headline";
+import { HasRootRef } from "../../types";
+import "./Placeholder.css";
+
+export interface PlaceholderProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement> {
+  /**
+   * Иконка
+   */
+  icon?: React.ReactNode;
+  /**
+   * Заголовок плейсхолдера
+   */
+  header?: React.ReactNode;
+  /**
+   * Кнопка действия
+   */
+  action?: React.ReactNode;
+  /**
+   * Растягивает плейсхолдер на весь экран, но в таком случае на экране должен быть только плейсхолдер
+   */
+  stretched?: boolean;
+}
+
+const Placeholder: React.FC<PlaceholderProps> = (props: PlaceholderProps) => {
+  const {
+    icon,
+    header,
+    action,
+    children,
+    stretched,
+    getRootRef,
+    ...restProps
+  } = props;
+
+  return (
+    <div
+      {...restProps}
+      ref={getRootRef}
+      vkuiClass={classNames("Placeholder", {
+        "Placeholder--stretched": stretched,
+      })}
+    >
+      <div vkuiClass="Placeholder__in">
+        {hasReactNode(icon) && <div vkuiClass="Placeholder__icon">{icon}</div>}
+        {hasReactNode(header) && (
+          <Title level="2" weight="2" vkuiClass="Placeholder__header">
+            {header}
+          </Title>
+        )}
+        {hasReactNode(children) && (
+          <Headline weight="regular" vkuiClass="Placeholder__text">
+            {children}
+          </Headline>
+        )}
+        {hasReactNode(action) && (
+          <div vkuiClass="Placeholder__action">{action}</div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default Placeholder;

package/src/components/Placeholder/Readme.md

@@ -0,0 +1,104 @@
+`Placeholder` используется для каких-либо заглушек: например, в случае отсутствия элементов в списке или ошибки.
+
+- В качестве иконки желательно использовать аутлайновые иконки размера 56;
+- В качестве действия — большую кнопку с уровнем `primary` или `tertiary`.
+
+Если плейсхолдер используется со свойством `stretched` (показывается во всю высоту панели), то на экране не должно быть ничего другого.
+
+```jsx
+class PlaceholderExample extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activePanel: "example-1",
+    };
+
+    this.onNavClick = this.onNavClick.bind(this);
+  }
+
+  onNavClick(e) {
+    const activePanel = e.currentTarget.dataset.to;
+    this.setState({ activePanel });
+  }
+
+  render() {
+    return (
+      <View activePanel={this.state.activePanel}>
+        <Panel id="example-1">
+          <PanelHeader>Плейсхолдеры</PanelHeader>
+          <Group>
+            <Placeholder
+              icon={<Icon56UsersOutline />}
+              header="Уведомления от сообществ"
+              action={<Button size="m">Подключить сообщества</Button>}
+            >
+              Подключите сообщества, от которых Вы хотите получать уведомления
+            </Placeholder>
+            <Separator />
+            <Placeholder icon={<Icon56MentionOutline />}>
+              Введите адрес страницы в поле поиска
+            </Placeholder>
+          </Group>
+          <Group>
+            <CellButton onClick={this.onNavClick} data-to="example-2">
+              Ещё примеры
+            </CellButton>
+          </Group>
+        </Panel>
+
+        <Panel id="example-2">
+          <PanelHeader
+            left={
+              <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
+            }
+          >
+            Плейсхолдеры
+          </PanelHeader>
+          <Group>
+            <Placeholder>Доступ запрещён</Placeholder>
+            <Separator />
+            <Placeholder
+              header="Находите друзей"
+              action={<Button size="m">Найти друзей</Button>}
+            >
+              Здесь будут отображаться люди, которых вы добавите в друзья
+            </Placeholder>
+          </Group>
+          <Group>
+            <CellButton onClick={this.onNavClick} data-to="example-3">
+              Полноэкранный плейсхолдер
+            </CellButton>
+          </Group>
+        </Panel>
+
+        <Panel id="example-3">
+          <PanelHeader
+            left={
+              <PanelHeaderBack onClick={this.onNavClick} data-to="example-1" />
+            }
+          >
+            Плейсхолдеры
+          </PanelHeader>
+
+          <Placeholder
+            icon={<Icon56MessageReadOutline />}
+            action={
+              <Button size="m" mode="tertiary">
+                Показать все сообщения
+              </Button>
+            }
+            stretched
+          >
+            Нет непрочитанных
+            <br />
+            сообщений
+          </Placeholder>
+        </Panel>
+      </View>
+    );
+  }
+}
+
+<PlaceholderExample />;
+```

package/src/components/PopoutRoot/PopoutRoot.css

@@ -0,0 +1,36 @@
+.PopoutRoot {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.PopoutRoot__popout {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+}
+
+.PopoutRoot--absolute {
+  position: absolute;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+}
+
+.PopoutRoot__modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+}
+
+.PopoutRoot__modal:empty {
+  display: none;
+}

package/src/components/PopoutRoot/PopoutRoot.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import { HasRootRef } from "../../types";
+import {
+  withAdaptivity,
+  ViewWidth,
+  ViewHeight,
+} from "../../hoc/withAdaptivity";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { blurActiveElement, useDOM } from "../../lib/dom";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
+import "./PopoutRoot.css";
+
+export interface PopoutRootProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    AdaptivityProps,
+    HasRootRef<HTMLDivElement> {
+  popout?: React.ReactNode;
+  modal?: React.ReactNode;
+}
+
+export const PopoutRootComponent: React.FC<
+  PopoutRootProps & AdaptivityContextInterface
+> = (props) => {
+  const {
+    popout,
+    modal,
+    viewWidth,
+    viewHeight,
+    hasMouse,
+    children,
+    getRootRef,
+    ...restProps
+  } = props;
+  const { document } = useDOM();
+
+  const isDesktop =
+    viewWidth >= ViewWidth.SMALL_TABLET &&
+    (hasMouse || viewHeight >= ViewHeight.MEDIUM);
+
+  React.useEffect(() => {
+    popout && blurActiveElement(document);
+  }, [document, popout]);
+
+  return (
+    <div {...restProps} vkuiClass="PopoutRoot" ref={getRootRef}>
+      {children}
+      <AppRootPortal>
+        {!!popout && (
+          <div
+            vkuiClass={
+              isDesktop ? "PopoutRoot--absolute" : "PopoutRoot__popout"
+            }
+          >
+            {popout}
+          </div>
+        )}
+        {!!modal && <div vkuiClass="PopoutRoot__modal">{modal}</div>}
+      </AppRootPortal>
+    </div>
+  );
+};
+
+PopoutRootComponent.displayName = "PopoutRoot";
+
+export const PopoutRoot = withAdaptivity(PopoutRootComponent, {
+  viewWidth: true,
+  viewHeight: true,
+  hasMouse: true,
+});

package/src/components/PopoutRoot/Readme.md

@@ -0,0 +1,50 @@
+Используется для создания модальных окон. Содержимое `Root` – это коллекция `View`. У каждой `View` должен быть `id`.
+Свойство `activeView` определяет, какая `View` сейчас активна.
+
+При смене значения свойства `activeView` плавный происходит переход от одной `View` к другой.
+Как только он заканчивается, вызывается свойство-функция `onTransition`.
+
+```jsx
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      activeView: "view1",
+    };
+  }
+
+  render() {
+    return (
+      <Root activeView={this.state.activeView}>
+        <View activePanel="panel1.1" id="view1">
+          <Panel id="panel1.1">
+            <PanelHeader>View 1</PanelHeader>
+            <Group>
+              <CellButton
+                onClick={() => this.setState({ activeView: "view2" })}
+              >
+                Open View 2
+              </CellButton>
+            </Group>
+          </Panel>
+        </View>
+        <View header activePanel="panel2.1" id="view2">
+          <Panel id="panel2.1">
+            <PanelHeader>View 2</PanelHeader>
+            <Group>
+              <CellButton
+                onClick={() => this.setState({ activeView: "view1" })}
+              >
+                Back to View 1
+              </CellButton>
+            </Group>
+          </Panel>
+        </View>
+      </Root>
+    );
+  }
+}
+
+<Example />;
+```

package/src/components/PopoutWrapper/PopoutWrapper.css

@@ -0,0 +1,109 @@
+.PopoutWrapper {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  pointer-events: none;
+}
+
+.PopoutWrapper--opened {
+  pointer-events: initial;
+}
+
+.PopoutWrapper--closing {
+  pointer-events: none;
+}
+
+.PopoutWrapper--fixed {
+  position: fixed;
+}
+
+.PopoutWrapper__overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 1;
+  animation: vkui-animation-full-fade-in 0.2s ease;
+}
+
+.PopoutWrapper--closing .PopoutWrapper__overlay {
+  opacity: 0;
+  transition: opacity 0.2s var(--android-easing);
+}
+
+.PopoutWrapper--masked .PopoutWrapper__overlay {
+  background: rgba(0, 0, 0, 0.4);
+}
+
+.PopoutWrapper--fixed .PopoutWrapper__overlay {
+  position: absolute;
+}
+
+.PopoutWrapper__container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  display: flex;
+  box-sizing: border-box;
+}
+
+.PopoutWrapper__content {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  z-index: 2;
+  pointer-events: none;
+}
+
+.PopoutWrapper__content > * {
+  pointer-events: auto;
+}
+
+.PopoutWrapper--v-center .PopoutWrapper__container {
+  align-items: center;
+}
+
+.PopoutWrapper--v-bottom .PopoutWrapper__container {
+  align-items: flex-end;
+}
+
+.PopoutWrapper--v-top .PopoutWrapper__container {
+  align-items: flex-start;
+}
+
+.PopoutWrapper--h-center .PopoutWrapper__container {
+  justify-content: center;
+}
+
+.PopoutWrapper--h-left .PopoutWrapper__container {
+  justify-content: flex-start;
+}
+
+.PopoutWrapper--h-right .PopoutWrapper__container {
+  justify-content: flex-end;
+}
+
+/**
+ * iOS version
+ */
+
+.PopoutWrapper--ios .PopoutWrapper__overlay {
+  animation-duration: 0.3s;
+}
+
+.PopoutWrapper--ios.PopoutWrapper--closing .PopoutWrapper__overlay {
+  transition: opacity 0.3s var(--ios-easing);
+}
+
+@keyframes vkui-animation-full-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}