@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/SplitLayout/Readme.md

@@ -0,0 +1,154 @@
+Компонент-контейнер для реализации интерфейса с [многоколоночной структурой](#!/Adaptivity). Тесно связан со [SplitCol](#!/SplitCol).
+
+```jsx
+const panels = ["panel 1", "panel 2", "panel 3"];
+const modals = ["modal 1", "modal 2"];
+
+const Example = withAdaptivity(
+  ({ viewWidth }) => {
+    const platform = usePlatform();
+    const [panel, setPanel] = React.useState(panels[0]);
+    const [modal, setModal] = React.useState(null);
+    const [popout, setPopout] = React.useState(null);
+
+    const modalRoot = (
+      <ModalRoot activeModal={modal}>
+        <ModalPage
+          id={modals[0]}
+          onClose={() => setModal(null)}
+          header={<ModalPageHeader>Modal 1</ModalPageHeader>}
+        >
+          <Group>
+            <CellButton onClick={() => setModal(modals[1])}>Modal 2</CellButton>
+          </Group>
+        </ModalPage>
+        <ModalPage
+          id={modals[1]}
+          onClose={() => setModal(null)}
+          header={<ModalPageHeader>Modal 2</ModalPageHeader>}
+        >
+          <Group>
+            <CellButton onClick={() => setModal(modals[0])}>Modal 1</CellButton>
+          </Group>
+        </ModalPage>
+      </ModalRoot>
+    );
+
+    const isDesktop = viewWidth >= ViewWidth.TABLET;
+    const hasHeader = platform !== VKCOM;
+
+    return (
+      <SplitLayout
+        style={{ justifyContent: "center" }}
+        header={hasHeader && <PanelHeader separator={false} />}
+        popout={popout}
+        modal={modalRoot}
+      >
+        {isDesktop && (
+          <SplitCol fixed width={280} maxWidth={280}>
+            <Panel>
+              {hasHeader && <PanelHeader />}
+              <Group>
+                {panels.map((i) => (
+                  <Cell
+                    key={i}
+                    disabled={i === panel}
+                    style={
+                      i === panel
+                        ? {
+                            backgroundColor:
+                              "var(--button_secondary_background)",
+                            borderRadius: 8,
+                          }
+                        : {}
+                    }
+                    onClick={() => setPanel(i)}
+                  >
+                    {i}
+                  </Cell>
+                ))}
+                <Separator />
+                <Cell onClick={() => setModal(modals[0])}>modal 1</Cell>
+                <Cell onClick={() => setModal(modals[1])}>modal 2</Cell>
+                <Cell
+                  onClick={() =>
+                    setPopout(
+                      <Alert header="Alert!" onClose={() => setPopout(null)} />
+                    )
+                  }
+                >
+                  alert
+                </Cell>
+              </Group>
+            </Panel>
+          </SplitCol>
+        )}
+
+        <SplitCol
+          animate={!isDesktop}
+          spaced={isDesktop}
+          width={isDesktop ? "560px" : "100%"}
+          maxWidth={isDesktop ? "560px" : "100%"}
+        >
+          <View activePanel={panel}>
+            <Panel id={panels[0]}>
+              <PanelHeader right={<Avatar size={36} />}>Panel 1</PanelHeader>
+              <Group>
+                <Placeholder
+                  icon={<Icon56UsersOutline />}
+                  header="Уведомления от сообществ"
+                  action={<Button size="m">Подключить сообщества</Button>}
+                >
+                  Подключите сообщества, от которых Вы хотите получать
+                  уведомления
+                </Placeholder>
+                <Separator />
+                <Placeholder icon={<Icon56MentionOutline />}>
+                  Введите адрес страницы в поле поиска
+                </Placeholder>
+              </Group>
+            </Panel>
+
+            <Panel id={panels[1]}>
+              <PanelHeader right={<Avatar size={36} />}>Panel 2</PanelHeader>
+              <Group>
+                <Placeholder>Доступ запрещён</Placeholder>
+                <Separator />
+                <Placeholder
+                  header="Находите друзей"
+                  action={<Button size="m">Найти друзей</Button>}
+                >
+                  Здесь будут отображаться люди, которых вы добавите в друзья
+                </Placeholder>
+              </Group>
+            </Panel>
+
+            <Panel id={panels[2]}>
+              <PanelHeader right={<Avatar size={36} />}>Panel 3</PanelHeader>
+              <Group>
+                <Placeholder
+                  icon={<Icon56MessageReadOutline />}
+                  action={
+                    <Button size="m" mode="tertiary">
+                      Показать все сообщения
+                    </Button>
+                  }
+                >
+                  Нет непрочитанных
+                  <br />
+                  сообщений
+                </Placeholder>
+              </Group>
+            </Panel>
+          </View>
+        </SplitCol>
+      </SplitLayout>
+    );
+  },
+  {
+    viewWidth: true,
+  }
+);
+
+<Example />;
+```

package/src/components/SplitLayout/SplitLayout.css

@@ -0,0 +1,52 @@
+.SplitLayout {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  font-family: var(--font-common);
+}
+
+.SplitLayout__inner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+}
+
+/* Hack with using PanelHeaderSimple */
+/* Better to implement simple header-like here */
+.SplitLayout__inner--header {
+  position: relative;
+  z-index: 11;
+}
+
+.SplitLayout--ios .SplitLayout__inner--header {
+  margin-top: calc(
+    -1 * calc(var(--panelheader_height_ios) + var(--safe-area-inset-top))
+  );
+}
+
+.SplitLayout--android .SplitLayout__inner--header,
+.SplitLayout--vkcom .SplitLayout__inner--header {
+  margin-top: calc(-1 * var(--panelheader_height_android));
+}
+
+.SplitLayout__popout {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 100;
+  width: 100%;
+  height: 100%;
+}
+
+.SplitLayout__modal {
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 99;
+  width: 100%;
+  height: 100%;
+}
+
+.SplitLayout__modal:empty {
+  display: none;
+}

package/src/components/SplitLayout/SplitLayout.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRef, HasRootRef } from "../../types";
+import { PopoutRoot } from "../PopoutRoot/PopoutRoot";
+import { usePlatform } from "../../hooks/usePlatform";
+import "./SplitLayout.css";
+
+export interface SplitLayoutProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    HasRef<HTMLDivElement> {
+  /**
+   * Свойство для отрисовки `Alert`, `ActionSheet` и `ScreenSpinner`.
+   */
+  popout?: React.ReactNode;
+  /**
+   * Свойство для отрисовки `ModalRoot`.
+   */
+  modal?: React.ReactNode;
+  header?: React.ReactNode;
+}
+
+export const SplitLayout: React.FC<SplitLayoutProps> = ({
+  popout,
+  modal,
+  header,
+  children,
+  getRootRef,
+  getRef,
+  ...restProps
+}: SplitLayoutProps) => {
+  const platform = usePlatform();
+
+  return (
+    <PopoutRoot
+      vkuiClass={getClassName("SplitLayout", platform)}
+      popout={popout}
+      modal={modal}
+      getRootRef={getRootRef}
+    >
+      {header}
+      <div
+        {...restProps}
+        ref={getRef}
+        vkuiClass={classNames("SplitLayout__inner", {
+          "SplitLayout__inner--header": !!header,
+        })}
+      >
+        {children}
+      </div>
+    </PopoutRoot>
+  );
+};

package/src/components/SubnavigationBar/Readme.md

@@ -0,0 +1,264 @@
+В режиме `fixed` может потребоваться уменьшить размер шрифта у `SubnavigationButton`, чтобы текст показывался полностью.
+За это отвечает свойство `textLevel` у `SubnavigationButton`.
+
+```jsx { "props": { "layout": false, "adaptivity": true } }
+import { useState } from "react";
+
+const MODAL_NAME = "filters";
+
+const FILTERS_SIZE = [
+  { value: 36, label: 36 },
+  { value: 37, label: 37 },
+  { value: 38, label: 38 },
+  { value: 39, label: 39 },
+];
+
+const FILTERS_STYLE = [
+  { value: "Вечерний", label: "Вечерний" },
+  { value: "Деловой", label: "Деловой" },
+  { value: "Повседневный", label: "Повседневный" },
+  { value: "Спортивный", label: "Спортивный" },
+];
+
+const SubnavigationBarExample = () => {
+  const platform = usePlatform();
+  const { viewWidth } = useAdaptivity();
+
+  const [activePanel, setActivePanel] = useState("example");
+  const [filtersModalOpened, setFiltersModalOpened] = useState(false);
+  const [filtersCount, setFiltersCount] = useState(2);
+
+  const [filterSizes, setFilterSizes] = useState([36]);
+  const [filterStyles, setFilterStyles] = useState(["Вечерний"]);
+
+  const [sizeSelected, setSizeSelected] = useState(false);
+  const [inStockSelected, setInStockSelected] = useState(false);
+  const [highRatingSelected, setHighRatingSelected] = useState(false);
+  const [faveSelected, setFaveSelected] = useState(false);
+
+  const openModal = () => {
+    setFiltersModalOpened(true);
+  };
+
+  const closeModal = () => {
+    setFiltersModalOpened(false);
+  };
+
+  const onChangeFilterSize = (e) => {
+    const { value, checked } = e.currentTarget;
+    if (checked) {
+      setFilterSizes([...filterSizes, +value]);
+    } else {
+      setFilterSizes(filterSizes.filter((v) => v !== +value));
+    }
+  };
+
+  const onChangeFilterStyle = (e) => {
+    const { value, checked } = e.currentTarget;
+    if (checked) {
+      setFilterStyles([...filterStyles, value]);
+    } else {
+      setFilterStyles(filterStyles.filter((v) => v !== value));
+    }
+  };
+
+  const applyFilters = () => {
+    let count = 0;
+
+    filterSizes.length && count++;
+    filterStyles.length && count++;
+
+    closeModal();
+    setFiltersCount(count);
+  };
+
+  const modal = (
+    <ModalRoot
+      activeModal={filtersModalOpened ? MODAL_NAME : null}
+      onClose={closeModal}
+    >
+      <ModalPage
+        id={MODAL_NAME}
+        header={
+          <ModalPageHeader
+            left={platform !== IOS && <PanelHeaderClose onClick={closeModal} />}
+            right={
+              platform === IOS && (
+                <PanelHeaderButton onClick={closeModal}>
+                  <Icon24Dismiss />
+                </PanelHeaderButton>
+              )
+            }
+          >
+            Фильтры
+          </ModalPageHeader>
+        }
+      >
+        <FormLayout>
+          <FormItem top="Размер">
+            {FILTERS_SIZE.map(({ value, label }) => {
+              return (
+                <Checkbox
+                  value={value}
+                  checked={filterSizes.includes(value)}
+                  onChange={onChangeFilterSize}
+                >
+                  {label}
+                </Checkbox>
+              );
+            })}
+          </FormItem>
+
+          <FormItem top="Стиль">
+            {FILTERS_STYLE.map(({ value, label }) => {
+              return (
+                <Checkbox
+                  value={value}
+                  checked={filterStyles.includes(value)}
+                  onChange={onChangeFilterStyle}
+                >
+                  {label}
+                </Checkbox>
+              );
+            })}
+          </FormItem>
+
+          <FormItem>
+            <Button size="l" stretched onClick={applyFilters}>
+              Показать результаты
+            </Button>
+          </FormItem>
+        </FormLayout>
+      </ModalPage>
+    </ModalRoot>
+  );
+
+  return (
+    <SplitLayout modal={modal}>
+      <SplitCol>
+        <View activePanel={activePanel}>
+          <Panel id="example">
+            <PanelHeader>SubnavigationBar</PanelHeader>
+            <Group>
+              <SubnavigationBar>
+                <SubnavigationButton
+                  before={<Icon24Filter />}
+                  selected={filtersCount > 0}
+                  expandable
+                  after={
+                    filtersCount > 0 && (
+                      <Counter mode="primary" size="s">
+                        {filtersCount}
+                      </Counter>
+                    )
+                  }
+                  onClick={openModal}
+                >
+                  Фильтры
+                </SubnavigationButton>
+
+                <SubnavigationButton
+                  selected={sizeSelected}
+                  onClick={() => setSizeSelected(!sizeSelected)}
+                >
+                  Мой размер
+                </SubnavigationButton>
+
+                <SubnavigationButton
+                  selected={inStockSelected}
+                  onClick={() => setInStockSelected(!inStockSelected)}
+                >
+                  В наличии
+                </SubnavigationButton>
+
+                <SubnavigationButton
+                  selected={highRatingSelected}
+                  onClick={() => setHighRatingSelected(!highRatingSelected)}
+                >
+                  Высокий рейтинг
+                </SubnavigationButton>
+
+                <SubnavigationButton
+                  before={<Icon24FavoriteOutline />}
+                  selected={faveSelected}
+                  onClick={() => setFaveSelected(!faveSelected)}
+                >
+                  Избранное
+                </SubnavigationButton>
+              </SubnavigationBar>
+            </Group>
+
+            <Group>
+              <SubnavigationBar mode="fixed">
+                <SubnavigationButton
+                  before={<Icon24ScanViewfinderOutline />}
+                  size="l"
+                  textLevel={viewWidth <= ViewWidth.MOBILE ? 3 : 1}
+                  onClick={() => setActivePanel("add_friend")}
+                >
+                  Сканировать QR
+                </SubnavigationButton>
+
+                <SubnavigationButton
+                  before={<Icon24UserAddOutline />}
+                  size="l"
+                  textLevel={viewWidth <= ViewWidth.MOBILE ? 3 : 1}
+                  onClick={() => setActivePanel("add_friend")}
+                >
+                  Добавить друга
+                </SubnavigationButton>
+              </SubnavigationBar>
+
+              <Header>Важные</Header>
+              <SimpleCell
+                before={<Avatar src={getAvatarUrl("user_wayshev")} />}
+              >
+                Иван Барышев
+              </SimpleCell>
+              <SimpleCell
+                before={<Avatar src={getAvatarUrl("user_lihachyov")} />}
+              >
+                Михаил Лихачёв
+              </SimpleCell>
+              <SimpleCell
+                before={<Avatar src={getAvatarUrl("user_arthurstam")} />}
+              >
+                Artur Stambultsian
+              </SimpleCell>
+            </Group>
+          </Panel>
+          <Panel id="add_friend">
+            <PanelHeader
+              left={
+                <PanelHeaderBack onClick={() => setActivePanel("example")} />
+              }
+            >
+              Добавить друга
+            </PanelHeader>
+
+            <Group>
+              <SimpleCell
+                before={<Avatar src={getAvatarUrl("user_wayshev")} />}
+              >
+                Иван Барышев
+              </SimpleCell>
+              <SimpleCell
+                before={<Avatar src={getAvatarUrl("user_lihachyov")} />}
+              >
+                Михаил Лихачёв
+              </SimpleCell>
+              <SimpleCell
+                before={<Avatar src={getAvatarUrl("user_arthurstam")} />}
+              >
+                Artur Stambultsian
+              </SimpleCell>
+            </Group>
+          </Panel>
+        </View>
+      </SplitCol>
+    </SplitLayout>
+  );
+};
+
+<SubnavigationBarExample />;
+```

package/src/components/SubnavigationBar/SubnavigationBar.css

@@ -0,0 +1,32 @@
+.SubnavigationBar__in {
+  /* Отрицательный margin нужен, чтобы компенсировать увеличенный из-за тени padding (12px -> 20px) */
+  margin: -8px 0;
+}
+
+.SubnavigationBar__scrollIn {
+  padding: 20px 0;
+  display: flex;
+}
+
+.SubnavigationBar__scrollIn::before,
+.SubnavigationBar__scrollIn::after {
+  content: "";
+  min-width: 16px;
+}
+
+.SubnavigationBar .SubnavigationButton + .SubnavigationButton {
+  margin-left: 8px;
+}
+
+.SubnavigationBar--fixed .SubnavigationButton {
+  flex: 1;
+  min-width: 0;
+}
+
+/**
+ * iOS
+ */
+.SubnavigationBar--ios .SubnavigationBar__scrollIn::before,
+.SubnavigationBar--ios .SubnavigationBar__scrollIn::after {
+  min-width: 12px;
+}

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { usePlatform } from "../../hooks/usePlatform";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import HorizontalScroll, {
+  HorizontalScrollProps,
+  ScrollPositionHandler,
+} from "../HorizontalScroll/HorizontalScroll";
+import "./SubnavigationBar.css";
+
+export interface SubnavigationBarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Pick<
+      HorizontalScrollProps,
+      | "showArrows"
+      | "getScrollToLeft"
+      | "getScrollToRight"
+      | "scrollAnimationDuration"
+    > {
+  mode?: "fixed" | "overflow";
+}
+
+const defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;
+
+const defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;
+
+export const SubnavigationBar: React.FC<SubnavigationBarProps> = ({
+  mode = "overflow",
+  children,
+  showArrows = true,
+  getScrollToLeft = defaultScrollToLeft,
+  getScrollToRight = defaultScrollToRight,
+  scrollAnimationDuration,
+  ...restProps
+}: SubnavigationBarProps) => {
+  const platform = usePlatform();
+
+  let ScrollWrapper: React.ElementType;
+  let scrollWrapperProps = {};
+
+  if (mode === "fixed") {
+    ScrollWrapper = "div";
+  } else {
+    ScrollWrapper = HorizontalScroll;
+    scrollWrapperProps = {
+      showArrows,
+      getScrollToLeft,
+      getScrollToRight,
+      scrollAnimationDuration,
+    };
+  }
+
+  return (
+    <div
+      {...restProps}
+      vkuiClass={classNames(
+        getClassName("SubnavigationBar", platform),
+        `SubnavigationBar--${mode}`
+      )}
+    >
+      <ScrollWrapper vkuiClass="SubnavigationBar__in" {...scrollWrapperProps}>
+        <div vkuiClass="SubnavigationBar__scrollIn">{children}</div>
+      </ScrollWrapper>
+    </div>
+  );
+};