@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/Placeholder/Readme.md

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

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

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

@@ -1,50 +0,0 @@
-Используется для создания модальных окон. Содержимое `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

@@ -1,109 +0,0 @@
-.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;
-  }
-}

package/src/components/PopoutWrapper/PopoutWrapper.tsx

@@ -1,77 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { IOS } from "../../lib/platform";
-import { useTimeout } from "../../hooks/useTimeout";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { useDOM } from "../../lib/dom";
-import "./PopoutWrapper.css";
-
-export interface PopoutWrapperProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  hasMask?: boolean;
-  fixed?: boolean;
-  alignY?: "top" | "center" | "bottom";
-  alignX?: "left" | "center" | "right";
-  closing?: boolean;
-}
-
-export const PopoutWrapper: React.FC<PopoutWrapperProps> = ({
-  alignY = "center",
-  alignX = "center",
-  closing = false,
-  hasMask = true,
-  fixed = true,
-  children,
-  onClick,
-  ...restProps
-}: PopoutWrapperProps) => {
-  const platform = usePlatform();
-  const [opened, setOpened] = React.useState(!hasMask);
-  const elRef = React.useRef<HTMLDivElement>(null);
-
-  const onFadeInEnd = (e?: React.AnimationEvent) => {
-    if (!e || e.animationName === "vkui-animation-full-fade-in") {
-      setOpened(true);
-    }
-  };
-  const animationFinishFallback = useTimeout(
-    onFadeInEnd,
-    platform === IOS ? 300 : 200
-  );
-  React.useEffect(() => {
-    !opened && animationFinishFallback.set();
-  }, [animationFinishFallback, opened]);
-
-  const { window } = useDOM();
-  useGlobalEventListener(window, "touchmove", (e) => e.preventDefault(), {
-    passive: false,
-  });
-
-  const baseClassNames = getClassName("PopoutWrapper", platform);
-
-  return (
-    <div
-      {...restProps}
-      vkuiClass={classNames(
-        baseClassNames,
-        `PopoutWrapper--v-${alignY}`,
-        `PopoutWrapper--h-${alignX}`,
-        {
-          "PopoutWrapper--closing": closing,
-          "PopoutWrapper--opened": opened,
-          "PopoutWrapper--fixed": fixed,
-          "PopoutWrapper--masked": hasMask,
-        }
-      )}
-      onAnimationEnd={opened ? undefined : onFadeInEnd}
-      ref={elRef}
-    >
-      <div vkuiClass="PopoutWrapper__container">
-        <div vkuiClass="PopoutWrapper__overlay" onClick={onClick} />
-        <div vkuiClass="PopoutWrapper__content">{children}</div>
-      </div>
-    </div>
-  );
-};

package/src/components/PopoutWrapper/Readme.md

@@ -1,12 +0,0 @@
-Компонент-обертка для отрисовки всплывающих окон с затемнением фона. Используется внутри `Alert`, `ActionSheet`
-и `ScreenSpinner`. Свойства `alignY` и `alignX` служат для удобного позиционирования контента. Пример:
-
-```jsx static
-import { PopoutWrapper } from "@vkontakte/vkui";
-
-<PopoutWrapper alignY="center" alignX="center">
-  Some content
-</PopoutWrapper>;
-```
-
-Все всплывающие окна передаются в свойство `popout` компонентов `View` или `Root`.

package/src/components/Popper/Popper.css

@@ -1,39 +0,0 @@
-.PopperPortal {
-  position: relative;
-  z-index: 100;
-}
-
-.Popper__arrow-in {
-  content: "";
-  display: block;
-  width: 20px;
-  height: 8px;
-}
-
-[data-popper-placement^="bottom"] .Popper__arrow {
-  bottom: 100%;
-}
-
-[data-popper-placement^="top"] .Popper__arrow {
-  top: 100%;
-}
-
-[data-popper-placement^="top"] .Popper__arrow-in {
-  transform: rotate(180deg);
-}
-
-[data-popper-placement^="left"] .Popper__arrow {
-  left: calc(100% - 6px);
-}
-
-[data-popper-placement^="left"] .Popper__arrow-in {
-  transform: rotate(90deg);
-}
-
-[data-popper-placement^="right"] .Popper__arrow {
-  right: calc(100% - 6px);
-}
-
-[data-popper-placement^="right"] .Popper__arrow-in {
-  transform: rotate(270deg);
-}