@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/SplitCol/Readme.md

@@ -1 +0,0 @@
-Компонент-обертка для отрисовки колонки в [многоколоночном интерфейсе](#!/Adaptivity).

package/src/components/SplitCol/SplitCol.css

@@ -1,28 +0,0 @@
-.SplitCol {
-  height: 100%;
-  width: 1px;
-  flex-grow: 1;
-  flex-shrink: 1;
-  position: relative;
-}
-
-.SplitCol--spaced {
-  margin: 0 16px;
-}
-
-.SplitCol--fixed {
-  height: 100%;
-  width: 1px;
-  flex-grow: 1;
-  flex-shrink: 1;
-}
-
-.SplitCol__fixedInner {
-  height: inherit;
-  width: inherit;
-  min-width: inherit;
-  max-width: inherit;
-  position: fixed;
-  transform: translateZ(0);
-  overflow: hidden;
-}

package/src/components/SplitCol/SplitCol.tsx

@@ -1,75 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import "./SplitCol.css";
-
-export interface SplitColContextProps {
-  colRef: React.RefObject<HTMLDivElement> | null;
-  animate: boolean;
-}
-
-export const SplitColContext = React.createContext<SplitColContextProps>({
-  colRef: null,
-  animate: true,
-});
-
-export interface SplitColProps extends React.HTMLAttributes<HTMLDivElement> {
-  width?: number | string;
-  maxWidth?: number | string;
-  minWidth?: number | string;
-  /**
-   * Если false, то переходы между Panel происходят без анимации
-   */
-  animate?: boolean;
-  /**
-   * Если true, то добавляются боковые отступы фиксированной величины
-   */
-  spaced?: boolean;
-  fixed?: boolean;
-}
-
-export const SplitCol: React.FC<SplitColProps> = (props: SplitColProps) => {
-  const {
-    children,
-    width,
-    maxWidth,
-    minWidth,
-    spaced,
-    animate = false,
-    fixed,
-    style,
-    ...restProps
-  } = props;
-  const baseRef = React.useRef<HTMLDivElement>(null);
-
-  const contextValue = React.useMemo(() => {
-    return {
-      colRef: baseRef,
-      animate,
-    };
-  }, [baseRef, animate]);
-
-  return (
-    <div
-      {...restProps}
-      style={{
-        ...style,
-        width: width,
-        maxWidth: maxWidth,
-        minWidth: minWidth,
-      }}
-      ref={baseRef}
-      vkuiClass={classNames("SplitCol", {
-        "SplitCol--spaced": spaced,
-        "SplitCol--fixed": fixed,
-      })}
-    >
-      <SplitColContext.Provider value={contextValue}>
-        {fixed ? (
-          <div vkuiClass="SplitCol__fixedInner">{children}</div>
-        ) : (
-          children
-        )}
-      </SplitColContext.Provider>
-    </div>
-  );
-};

package/src/components/SplitLayout/Readme.md

@@ -1,154 +0,0 @@
-Компонент-контейнер для реализации интерфейса с [многоколоночной структурой](#!/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

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

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

@@ -1,264 +0,0 @@
-В режиме `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

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