@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Epic/Epic.css

@@ -0,0 +1,4 @@
+.Epic {
+  width: 100%;
+  height: 100%;
+}

package/src/components/Epic/Epic.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { usePlatform } from "../../hooks/usePlatform";
+import { withAdaptivity, ViewWidth } from "../../hoc/withAdaptivity";
+import { ScrollSaver } from "./ScrollSaver";
+import { getNavId } from "../../lib/getNavId";
+import { warnOnce } from "../../lib/warnOnce";
+import {
+  AdaptivityContextInterface,
+  AdaptivityProps,
+} from "../AdaptivityProvider/AdaptivityContext";
+import "./Epic.css";
+
+export interface EpicProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    AdaptivityProps {
+  tabbar?: React.ReactNode;
+  activeStory: string;
+}
+
+const warn = warnOnce("Epic");
+
+export const Epic: React.FC<EpicProps & AdaptivityContextInterface> = (
+  props
+) => {
+  const platform = usePlatform();
+  const scroll = React.useRef<{ [key: string]: number }>({}).current;
+  const { activeStory, tabbar, children, viewWidth, ...restProps } = props;
+
+  if (
+    process.env.NODE_ENV === "development" &&
+    !tabbar &&
+    viewWidth < ViewWidth.SMALL_TABLET
+  ) {
+    warn("Using Epic without tabbar is not recommended on mobile");
+  }
+  const story =
+    (React.Children.toArray(children).find(
+      (story) =>
+        React.isValidElement(story) &&
+        getNavId(story.props, warn) === activeStory
+    ) as React.ReactElement | undefined) ?? null;
+
+  return (
+    <div {...restProps} vkuiClass={getClassName("Epic", platform)}>
+      <ScrollSaver
+        key={activeStory}
+        initialScroll={scroll[activeStory] || 0}
+        saveScroll={(value) => (scroll[activeStory] = value)}
+      >
+        {story}
+      </ScrollSaver>
+      {tabbar}
+    </div>
+  );
+};
+
+// eslint-disable-next-line import/no-default-export
+export default withAdaptivity(Epic, {
+  viewWidth: true,
+});

package/src/components/Epic/Readme.md

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

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

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

package/src/components/File/File.tsx

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

@@ -0,0 +1,20 @@
+Надстройка над `<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

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

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

@@ -0,0 +1,117 @@
+`{ 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 />;
+```