@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/Epic/Readme.md

@@ -1,240 +0,0 @@
-`<Epic />` – это новый слой навигации. Чтобы понять, что он себя представляет, достаточно открыть VK на iOS или на
-Android. Внизу располагается панель с иконками, с помощью которой пользователь может переключаться между ключевыми
-разделами.
-
-`Epic` неразрывно связан с новыми компонентами для отрисовки
-нижнего меню – [Tabbar](#!/Tabbar) и
-[TabbarItem](#!/TabbarItem).
-
-Логика работы `Epic` похожа на логику `View` и `Root`: Внутри `Epic` может находиться либо коллекция `Root`,
-либо коллекция `View`. У каждого элемента коллекции должен быть уникальный `id`. Свойство `activeStory` указывает
-на `id` активного окна.
-
-> **Важно**
->
-> При `viewWidth < SMALL_TABLET` в `Epic` всегда должен быть передан `Tabbar`, так как он является единственным способом переключения
-> между окнами.
-
-```jsx
-const Example = withAdaptivity(
-  ({ viewWidth }) => {
-    const platform = usePlatform();
-    const [activeStory, setActiveStory] = React.useState("profile");
-    const onStoryChange = (e) => setActiveStory(e.currentTarget.dataset.story);
-    const isDesktop = viewWidth >= ViewWidth.TABLET;
-    const hasHeader = platform !== VKCOM;
-
-    return (
-      <SplitLayout
-        header={hasHeader && <PanelHeader separator={false} />}
-        style={{ justifyContent: "center" }}
-      >
-        {isDesktop && (
-          <SplitCol fixed width={280} maxWidth={280}>
-            <Panel>
-              {hasHeader && <PanelHeader />}
-              <Group>
-                <Cell
-                  disabled={activeStory === "feed"}
-                  style={
-                    activeStory === "feed"
-                      ? {
-                          backgroundColor: "var(--button_secondary_background)",
-                          borderRadius: 8,
-                        }
-                      : {}
-                  }
-                  data-story="feed"
-                  onClick={onStoryChange}
-                  before={<Icon28NewsfeedOutline />}
-                >
-                  feed
-                </Cell>
-                <Cell
-                  disabled={activeStory === "services"}
-                  style={
-                    activeStory === "services"
-                      ? {
-                          backgroundColor: "var(--button_secondary_background)",
-                          borderRadius: 8,
-                        }
-                      : {}
-                  }
-                  data-story="services"
-                  onClick={onStoryChange}
-                  before={<Icon28ServicesOutline />}
-                >
-                  services
-                </Cell>
-                <Cell
-                  disabled={activeStory === "messages"}
-                  style={
-                    activeStory === "messages"
-                      ? {
-                          backgroundColor: "var(--button_secondary_background)",
-                          borderRadius: 8,
-                        }
-                      : {}
-                  }
-                  data-story="messages"
-                  onClick={onStoryChange}
-                  before={<Icon28MessageOutline />}
-                >
-                  messages
-                </Cell>
-                <Cell
-                  disabled={activeStory === "clips"}
-                  style={
-                    activeStory === "clips"
-                      ? {
-                          backgroundColor: "var(--button_secondary_background)",
-                          borderRadius: 8,
-                        }
-                      : {}
-                  }
-                  data-story="clips"
-                  onClick={onStoryChange}
-                  before={<Icon28ClipOutline />}
-                >
-                  clips
-                </Cell>
-                <Cell
-                  disabled={activeStory === "profile"}
-                  style={
-                    activeStory === "profile"
-                      ? {
-                          backgroundColor: "var(--button_secondary_background)",
-                          borderRadius: 8,
-                        }
-                      : {}
-                  }
-                  data-story="profile"
-                  onClick={onStoryChange}
-                  before={<Icon28UserCircleOutline />}
-                >
-                  profile
-                </Cell>
-              </Group>
-            </Panel>
-          </SplitCol>
-        )}
-
-        <SplitCol
-          animate={!isDesktop}
-          spaced={isDesktop}
-          width={isDesktop ? "560px" : "100%"}
-          maxWidth={isDesktop ? "560px" : "100%"}
-        >
-          <Epic
-            activeStory={activeStory}
-            tabbar={
-              !isDesktop && (
-                <Tabbar>
-                  <TabbarItem
-                    onClick={onStoryChange}
-                    selected={activeStory === "feed"}
-                    data-story="feed"
-                    text="Новости"
-                  >
-                    <Icon28NewsfeedOutline />
-                  </TabbarItem>
-                  <TabbarItem
-                    onClick={onStoryChange}
-                    selected={activeStory === "services"}
-                    data-story="services"
-                    text="Сервисы"
-                  >
-                    <Icon28ServicesOutline />
-                  </TabbarItem>
-                  <TabbarItem
-                    onClick={onStoryChange}
-                    selected={activeStory === "messages"}
-                    data-story="messages"
-                    label="12"
-                    text="Сообщения"
-                  >
-                    <Icon28MessageOutline />
-                  </TabbarItem>
-                  <TabbarItem
-                    onClick={onStoryChange}
-                    selected={activeStory === "clips"}
-                    data-story="clips"
-                    text="Клипы"
-                  >
-                    <Icon28ClipOutline />
-                  </TabbarItem>
-                  <TabbarItem
-                    onClick={onStoryChange}
-                    selected={activeStory === "profile"}
-                    data-story="profile"
-                    indicator={<Badge mode="prominent" />}
-                    text="Профиль"
-                  >
-                    <Icon28UserCircleOutline />
-                  </TabbarItem>
-                </Tabbar>
-              )
-            }
-          >
-            <View id="feed" activePanel="feed">
-              <Panel id="feed">
-                <PanelHeader left={<PanelHeaderBack />}>Новости</PanelHeader>
-                <Group style={{ height: "1000px" }}>
-                  <Placeholder
-                    icon={<Icon56NewsfeedOutline width={56} height={56} />}
-                  />
-                </Group>
-              </Panel>
-            </View>
-            <View id="services" activePanel="services">
-              <Panel id="services">
-                <PanelHeader left={<PanelHeaderBack />}>Сервисы</PanelHeader>
-                <Group style={{ height: "1000px" }}>
-                  <Placeholder
-                    icon={<Icon28ServicesOutline width={56} height={56} />}
-                  ></Placeholder>
-                </Group>
-              </Panel>
-            </View>
-            <View id="messages" activePanel="messages">
-              <Panel id="messages">
-                <PanelHeader left={<PanelHeaderBack />}>Сообщения</PanelHeader>
-                <Group style={{ height: "1000px" }}>
-                  <Placeholder
-                    icon={<Icon28MessageOutline width={56} height={56} />}
-                  ></Placeholder>
-                </Group>
-              </Panel>
-            </View>
-            <View id="clips" activePanel="clips">
-              <Panel id="clips">
-                <PanelHeader left={<PanelHeaderBack />}>Клипы</PanelHeader>
-                <Group style={{ height: "1000px" }}>
-                  <Placeholder
-                    icon={<Icon28ClipOutline width={56} height={56} />}
-                  ></Placeholder>
-                </Group>
-              </Panel>
-            </View>
-            <View id="profile" activePanel="profile">
-              <Panel id="profile">
-                <PanelHeader left={<PanelHeaderBack />}>Профиль</PanelHeader>
-                <Group style={{ height: "1000px" }}>
-                  <Placeholder
-                    icon={<Icon28UserCircleOutline width={56} height={56} />}
-                  ></Placeholder>
-                </Group>
-              </Panel>
-            </View>
-          </Epic>
-        </SplitCol>
-      </SplitLayout>
-    );
-  },
-  {
-    viewWidth: true,
-  }
-);
-
-<Example />;
-```

package/src/components/Epic/ScrollSaver.tsx

@@ -1,23 +0,0 @@
-import * as React from "react";
-import { ScrollContext } from "../AppRoot/ScrollContext";
-import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
-
-export interface ScrollSaverProps {
-  initialScroll?: number;
-  saveScroll: (scroll: number) => any;
-}
-
-export const ScrollSaver: React.FC<ScrollSaverProps> = ({
-  children,
-  initialScroll,
-  saveScroll,
-}) => {
-  const { getScroll, scrollTo } = React.useContext(ScrollContext);
-  useIsomorphicLayoutEffect(() => {
-    if (typeof initialScroll === "number") {
-      scrollTo(0, initialScroll);
-    }
-    return () => saveScroll(getScroll().y);
-  }, []);
-  return <React.Fragment>{children}</React.Fragment>;
-};

package/src/components/File/File.css

@@ -1,6 +0,0 @@
-.File {
-}
-
-.File__input {
-  display: none;
-}

package/src/components/File/File.tsx

@@ -1,74 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import Button, { VKUIButtonProps } from "../Button/Button";
-import { HasRef, HasRootRef } from "../../types";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useExternRef } from "../../hooks/useExternRef";
-import "./File.css";
-
-export interface FileProps
-  extends Omit<VKUIButtonProps, "size" | "type">,
-    Omit<React.InputHTMLAttributes<HTMLInputElement>, "onClick" | "type">,
-    Pick<React.HTMLAttributes<HTMLElement>, "onClick">,
-    HasRef<HTMLInputElement>,
-    HasRootRef<HTMLElement> {
-  controlSize?: VKUIButtonProps["size"];
-}
-
-const File: React.FunctionComponent<FileProps> = (props: FileProps) => {
-  const {
-    children,
-    align,
-    controlSize,
-    mode,
-    stretched,
-    before,
-    className,
-    style,
-    getRef,
-    getRootRef,
-    onClick,
-    appearance,
-    ...restProps
-  } = props;
-
-  const platform = usePlatform();
-  const inputRef = useExternRef(getRef);
-
-  return (
-    <Button
-      align={align}
-      vkuiClass={getClassName("File", platform)}
-      className={className}
-      stretched={stretched}
-      mode={mode}
-      appearance={appearance}
-      size={controlSize}
-      before={before}
-      style={style}
-      getRootRef={getRootRef}
-      disabled={restProps.disabled}
-      type="button"
-      onClick={(e) => {
-        inputRef.current?.click();
-        onClick && onClick(e);
-      }}
-    >
-      <input
-        {...restProps}
-        vkuiClass="File__input"
-        type="file"
-        ref={inputRef}
-      />
-      {children}
-    </Button>
-  );
-};
-
-File.defaultProps = {
-  children: "Выберите файл",
-  align: "left",
-};
-
-// eslint-disable-next-line import/no-default-export
-export default File;

package/src/components/File/Readme.md

@@ -1,20 +0,0 @@
-Надстройка над `<input type="file" />`. Компонент принимает все валидные для этого элемента свойства.
-`File` под капотом использует `Button`. То есть все свойства, применимые к `Button`, применимы и к `File`.
-
-```jsx
-<View activePanel="panel">
-  <Panel id="panel">
-    <PanelHeader>File</PanelHeader>
-    <Group>
-      <FormItem top="Загрузите ваше фото">
-        <File before={<Icon24Camera />} controlSize="m">
-          Открыть галерею
-        </File>
-      </FormItem>
-      <FormItem top="Загрузите документы">
-        <File before={<Icon24Document />} controlSize="l" mode="secondary" />
-      </FormItem>
-    </Group>
-  </Panel>
-</View>
-```

package/src/components/FixedLayout/FixedLayout.css

@@ -1,27 +0,0 @@
-.FixedLayout {
-  position: fixed;
-  box-sizing: border-box;
-  left: auto;
-  z-index: 3;
-  padding-left: var(--safe-area-inset-left);
-  padding-right: var(--safe-area-inset-right);
-}
-
-.FixedLayout--filled {
-  background: var(--background_content);
-}
-
-.FixedLayout--top {
-  width: 100%;
-  top: 0;
-}
-
-.FixedLayout--bottom {
-  width: 100%;
-  bottom: 0;
-  padding-bottom: var(--safe-area-inset-bottom);
-}
-
-.Epic .FixedLayout--bottom {
-  padding-bottom: calc(var(--tabbar_height) + var(--safe-area-inset-bottom));
-}

package/src/components/FixedLayout/FixedLayout.tsx

@@ -1,71 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { HasRef, HasRootRef } from "../../types";
-import { SplitColContext } from "../SplitCol/SplitCol";
-import { TooltipContainer } from "../Tooltip/TooltipContainer";
-import { useDOM } from "../../lib/dom";
-import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./FixedLayout.css";
-
-export interface FixedLayoutProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    HasRootRef<HTMLDivElement>,
-    HasRef<HTMLDivElement> {
-  vertical?: "top" | "bottom";
-  /**
-   * Это свойство определяет, будет ли фон компонента окрашен в цвет фона контента.
-   * Это часто необходимо для фиксированных кнопок в нижней части экрана.
-   */
-  filled?: boolean;
-}
-
-export interface FixedLayoutState {
-  position: "absolute" | null;
-  top: number;
-  bottom: number;
-  width: string;
-}
-
-const FixedLayout: React.FC<FixedLayoutProps> = ({
-  children,
-  style,
-  vertical,
-  getRootRef,
-  getRef,
-  filled,
-  ...restProps
-}: FixedLayoutProps) => {
-  const platform = usePlatform();
-  const [width, setWidth] = React.useState<string | undefined>(undefined);
-  const { window } = useDOM();
-  const { colRef } = React.useContext(SplitColContext);
-  const doResize = () =>
-    setWidth(colRef?.current ? `${colRef.current.offsetWidth}px` : undefined);
-  React.useEffect(doResize, [colRef]);
-  useGlobalEventListener(window, "resize", doResize);
-
-  return (
-    <TooltipContainer
-      {...restProps}
-      fixed
-      ref={getRootRef}
-      vkuiClass={classNames(
-        getClassName("FixedLayout", platform),
-        {
-          "FixedLayout--filled": filled,
-        },
-        `FixedLayout--${vertical}`
-      )}
-      style={{ ...style, width }}
-    >
-      <div vkuiClass="FixedLayout__in" ref={getRef}>
-        {children}
-      </div>
-    </TooltipContainer>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default FixedLayout;

package/src/components/FixedLayout/Readme.md

@@ -1,117 +0,0 @@
-`{ position: fixed }` не дружит с `{ transform: translate }` на родителе, поэтому для позиционирования фиксированных
-блоков внутри панели, необходимо использовать `FixedLayout` в качестве обертки.
-
-Для удобства есть свойство `vertical`, с помощью которого можно "прижать" контент к верху или низу.
-При этому будут учитываться высота шапки и прочие системные отступы.
-
-**Важно:** блок с `{ position: fixed }` находится не в потоке. В примере можно увидеть, что у блока с основным
-контентом есть паддинги. Они там не случайны.
-
-```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activeTab: "groups",
-    };
-  }
-
-  render() {
-    return (
-      <View activePanel="fixedLayout">
-        <Panel id="fixedLayout">
-          <PanelHeader>Fixed layout</PanelHeader>
-          <Group>
-            <FixedLayout vertical="top">
-              <Search />
-            </FixedLayout>
-            <Div style={{ paddingTop: 60, paddingBottom: 60, color: "gray" }}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a
-              sollicitudin lectus, a commodo sapien. Vivamus a urna leo. Integer
-              iaculis dignissim urna, sit amet vestibulum diam bibendum a. Donec
-              eu arcu ut augue porttitor faucibus. Vestibulum nec pretium
-              tortor, sit amet congue nunc. Aenean ullamcorper ex sem, sed
-              interdum quam consequat et. Vestibulum a ex non diam fringilla
-              feugiat. Nunc eu tellus sed leo elementum cursus. Mauris blandit
-              porta egestas. Curabitur eget justo elementum, malesuada lacus ut,
-              congue mauris. Integer orci nisi, convallis vitae dapibus sit
-              amet, molestie a risus. Aenean ultricies lacus eros, sit amet
-              condimentum urna malesuada et. Sed quis dolor tempus orci
-              fringilla volutpat in sed velit. Aenean aliquet bibendum pretium.
-              <br />
-              <br />
-              Cras pulvinar lobortis purus. Donec placerat suscipit leo vitae sodales.
-              Phasellus convallis lorem vitae arcu finibus pellentesque. In imperdiet
-              vel leo a euismod. Nam sed odio a neque venenatis suscipit a placerat
-              magna. Mauris magna nisl, consequat nec augue vitae, ultricies scelerisque
-              ante. Phasellus pharetra risus eget imperdiet sodales. Integer dignissim
-              auctor semper. Nulla odio odio, euismod ut interdum in, bibendum sed
-              massa. Proin rutrum molestie massa in ultrices. Donec eu euismod turpis,
-              eget lobortis lorem. Nulla facilisi. Nam lacinia posuere turpis, sed
-              laoreet turpis auctor nec.
-              <br />
-              <br />
-              Curabitur eu fermentum mauris. Phasellus malesuada consectetur
-              mollis. Pellentesque pulvinar mauris turpis. Integer neque dolor,
-              semper quis neque et, gravida commodo eros. Duis efficitur ex a
-              turpis blandit tincidunt. Mauris sem mi, imperdiet quis ligula sit
-              amet, fermentum vulputate felis. Phasellus eu ullamcorper dolor,
-              porttitor pulvinar diam. Aliquam euismod, mauris nec varius
-              lacinia, ligula libero vulputate leo, ut tristique massa nisi
-              vitae tortor. Phasellus purus elit, gravida sit amet neque id,
-              aliquam rutrum dui. Maecenas luctus sem vitae molestie porttitor.
-              Cras viverra mauris risus, at sollicitudin ipsum interdum eu. Sed
-              sit amet tempor enim.
-              <br />
-              <br />
-              In hac habitasse platea dictumst. Etiam luctus erat metus, quis efficitur
-              quam vulputate quis. Duis ultricies non mauris condimentum molestie.
-              Maecenas sollicitudin ex sem, quis ultrices libero blandit eu. Vivamus
-              in turpis pulvinar, malesuada enim at, hendrerit magna. Proin eu nulla
-              eget arcu pretium pharetra. Sed ullamcorper pulvinar est eu dapibus.
-              Cras at varius justo. In ex odio, condimentum id pellentesque a, sodales
-              ut diam.
-              <br />
-              <br />
-              Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
-              posuere cubilia Curae; Nam aliquet tempor laoreet. Maecenas eu
-              pulvinar diam. Pellentesque habitant morbi tristique senectus et
-              netus et malesuada fames ac turpis egestas. Maecenas et elit eros.
-              Quisque ullamcorper sodales nisi, eleifend aliquet metus venenatis
-              in. Aliquam ornare a lacus in tincidunt. Cras vel tristique metus.
-              Sed vitae nisl at nisl imperdiet sollicitudin. Sed sit amet enim
-              in lectus imperdiet interdum condimentum et diam. Proin venenatis
-              sit amet diam ac vulputate. Donec mauris orci, semper volutpat
-              nunc ut, efficitur condimentum dolor. Vivamus in quam eget quam
-              lacinia pharetra. Phasellus ipsum magna, aliquet id elit eget,
-              cursus tincidunt ex. In rhoncus turpis turpis, et viverra ex
-              malesuada vel. Donec nisi tellus, mollis et posuere vel, dictum
-              eget neque.
-            </Div>
-            <FixedLayout filled vertical="bottom">
-              <Separator wide />
-              <Tabs>
-                <TabsItem
-                  selected={this.state.activeTab === "groups"}
-                  onClick={() => this.setState({ activeTab: "groups" })}
-                >
-                  176 сообществ
-                </TabsItem>
-                <TabsItem
-                  selected={this.state.activeTab === "events"}
-                  onClick={() => this.setState({ activeTab: "events" })}
-                >
-                  9 событий
-                </TabsItem>
-              </Tabs>
-            </FixedLayout>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-<Example />;
-```