@vkontakte/vkui 4.27.0 → 4.28.0

package/src/components/Tabbar/Readme.md

@@ -1,7 +0,0 @@
-Компонент для навигации внутри [Epic](#!/Epic).
-
-> **Важно**
->
-> `Tabbar` располагается фиксированно. Если внутри панели вы используете `FixedLayout`, например
-> располагаете внизу панели `Tabs`, то у `Tabbar` нужно указать `shadow={false}`, чтобы его тень не наeзжала на
-> "прижатый" книзу контент панели.

package/src/components/Tabbar/Tabbar.css

@@ -1,53 +0,0 @@
-.Tabbar {
-  position: fixed;
-  z-index: 2;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: var(--tabbar_height);
-  padding-bottom: var(--safe-area-inset-bottom);
-  box-sizing: content-box;
-  background: var(--header_alternate_background);
-}
-
-.Tabbar__in {
-  display: flex;
-  justify-content: center;
-  overflow: hidden;
-}
-
-/**
- * iOS
- */
-
-.Tabbar--ios.Tabbar--shadow::before {
-  position: absolute;
-  bottom: 100%;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: var(--separator_common);
-  transform-origin: center bottom;
-  content: "";
-}
-
-@media (min-resolution: 2dppx) {
-  .Tabbar--ios::before {
-    transform: scaleY(0.5);
-  }
-}
-
-@media (min-resolution: 3dppx) {
-  .Tabbar--ios::before {
-    transform: scaleY(0.33);
-  }
-}
-
-/**
- * Android & VKCOM
- */
-
-.Tabbar--android.Tabbar--shadow,
-.Tabbar--vkcom.Tabbar--shadow {
-  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.06), 0 0 2px 0 rgba(0, 0, 0, 0.08);
-}

package/src/components/Tabbar/Tabbar.tsx

@@ -1,50 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./Tabbar.css";
-
-export interface TabbarProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Флаг для показа/скрытия верхней тени (Android) или границы (iOS)
-   */
-  shadow?: boolean;
-  itemsLayout?: "vertical" | "horizontal" | "auto";
-}
-
-const Tabbar: React.FunctionComponent<TabbarProps> = (props: TabbarProps) => {
-  const { children, shadow, itemsLayout, ...restProps } = props;
-  const platform = usePlatform();
-
-  const getItemsLayout = () => {
-    switch (itemsLayout) {
-      case "horizontal":
-      case "vertical":
-        return itemsLayout;
-      default:
-        return React.Children.count(children) > 2 ? "vertical" : "horizontal";
-    }
-  };
-
-  return (
-    <div
-      vkuiClass={classNames(
-        getClassName("Tabbar", platform),
-        `Tabbar--l-${getItemsLayout()}`,
-        {
-          "Tabbar--shadow": shadow,
-        }
-      )}
-      {...restProps}
-    >
-      <div vkuiClass="Tabbar__in">{children}</div>
-    </div>
-  );
-};
-
-Tabbar.defaultProps = {
-  shadow: true,
-};
-
-// eslint-disable-next-line import/no-default-export
-export default Tabbar;

package/src/components/TabbarItem/Readme.md

@@ -1,102 +0,0 @@
-Элемент [Tabbar](#!/Tabbar). В качестве `children` рекомендуется использовать [иконку](https://vkcom.github.io/icons) 28 размера.
-
-```jsx { "props": { "layout": false, "iframe": false } }
-const [simple, setSimple] = useState("one");
-const [text, setText] = useState("one");
-const [horizontalText, setHorizontalText] = useState("one");
-const [indicator, setIndicator] = useState("one");
-
-<div style={{ background: "var(--background_page)", padding: "10px 0" }}>
-  <div style={{ maxWidth: 768, margin: "auto" }}>
-    <Tabbar style={{ position: "static", margin: "0 0 10px" }}>
-      <TabbarItem selected={simple === "one"} onClick={() => setSimple("one")}>
-        <Icon28NewsfeedOutline />
-      </TabbarItem>
-      <TabbarItem selected={simple === "two"} onClick={() => setSimple("two")}>
-        <Icon28UserCircleOutline />
-      </TabbarItem>
-    </Tabbar>
-
-    <Tabbar style={{ position: "static", margin: "10px 0" }}>
-      <TabbarItem
-        selected={text === "one"}
-        onClick={() => setText("one")}
-        text="Новости"
-      >
-        <Icon28NewsfeedOutline />
-      </TabbarItem>
-      <TabbarItem
-        selected={text === "two"}
-        onClick={() => setText("two")}
-        text="Профиль"
-      >
-        <Icon28UserCircleOutline />
-      </TabbarItem>
-      <TabbarItem
-        selected={text === "three"}
-        onClick={() => setText("three")}
-        text="Мессенджер"
-      >
-        <Icon28MessageOutline />
-      </TabbarItem>
-    </Tabbar>
-
-    <Tabbar
-      itemsLayout="horizontal"
-      style={{ position: "static", margin: "10px 0" }}
-    >
-      <TabbarItem
-        selected={horizontalText === "one"}
-        onClick={() => setHorizontalText("one")}
-        text="Новости"
-      >
-        <Icon28NewsfeedOutline />
-      </TabbarItem>
-      <TabbarItem
-        selected={horizontalText === "two"}
-        onClick={() => setHorizontalText("two")}
-        text="Профиль"
-      >
-        <Icon28UserCircleOutline />
-      </TabbarItem>
-      <TabbarItem
-        selected={horizontalText === "three"}
-        onClick={() => setHorizontalText("three")}
-        text="Мессенджер"
-      >
-        <Icon28MessageOutline />
-      </TabbarItem>
-    </Tabbar>
-
-    <Tabbar style={{ position: "static", margin: "10px 0 0" }}>
-      <TabbarItem
-        selected={indicator === "one"}
-        onClick={() => setIndicator("one")}
-        indicator={<Badge mode="prominent" />}
-        text="Новости"
-      >
-        <Icon28NewsfeedOutline />
-      </TabbarItem>
-      <TabbarItem
-        selected={indicator === "two"}
-        onClick={() => setIndicator("two")}
-        text="Профиль"
-      >
-        <Icon28UserCircleOutline />
-      </TabbarItem>
-      <TabbarItem
-        selected={indicator === "three"}
-        onClick={() => setIndicator("three")}
-        text="Мессенджер"
-        indicator={
-          <Counter size="s" mode="prominent">
-            3
-          </Counter>
-        }
-      >
-        <Icon28MessageOutline />
-      </TabbarItem>
-    </Tabbar>
-  </div>
-</div>;
-```

package/src/components/TabbarItem/TabbarItem.css

@@ -1,127 +0,0 @@
-.TabbarItem {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--tabbar_inactive_icon);
-  text-decoration: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  background: transparent;
-  height: var(--tabbar_height);
-  position: relative;
-}
-
-.Tabbar .TabbarItem {
-  flex-shrink: 0;
-  max-width: 100%;
-  min-width: 0;
-  flex-grow: 1;
-  flex-basis: 0;
-}
-
-.TabbarItem--selected {
-  color: var(--tabbar_active_icon);
-}
-
-.TabbarItem__tappable {
-  position: absolute;
-}
-
-.TabbarItem__in {
-  display: flex;
-  padding: 0 2px;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  height: 100%;
-  overflow: hidden;
-}
-
-.Tabbar--l-vertical .TabbarItem--text .TabbarItem__in {
-  position: relative;
-  top: 2px;
-}
-
-.Tabbar--l-vertical .TabbarItem__in {
-  flex-direction: column;
-}
-
-.Tabbar--l-horizontal .TabbarItem__in {
-  flex-direction: row;
-}
-
-.TabbarItem__icon {
-  position: relative;
-}
-
-.TabbarItem__label .Counter {
-  position: absolute;
-  top: -2px;
-  right: -9px;
-}
-
-.TabbarItem__label .Badge {
-  position: absolute;
-  top: -2px;
-  right: -4px;
-}
-
-.TabbarItem__text {
-  white-space: nowrap;
-  max-width: 100%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.Tabbar--l-vertical .TabbarItem__text {
-  font-size: 10px;
-  line-height: 12px;
-  font-weight: 500;
-  margin-top: 2px;
-}
-
-.Tabbar--l-horizontal .TabbarItem__text {
-  font-size: 13px;
-  font-weight: 500;
-  margin-left: 8px;
-}
-
-/**
- * Android
- */
-
-.TabbarItem--android .TabbarItem__tappable {
-  width: calc(100% + 16px);
-  padding-bottom: calc(100% + 16px);
-  border-radius: 50%;
-}
-
-.TabbarItem--android:first-child {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-}
-
-.TabbarItem--android:last-child {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-}
-
-/**
- * iOS
- */
-
-.TabbarItem--ios .TabbarItem__tappable {
-  width: 100%;
-  height: 100%;
-  top: 0;
-  left: 0;
-}
-
-.TabbarItem--ios .TabbarItem__in {
-  transition: transform 0.07s var(--ios-easing);
-}
-
-.TabbarItem--ios .TabbarItem__tappable--active + .TabbarItem__in {
-  transform: scale(0.96);
-}

package/src/components/TabbarItem/TabbarItem.tsx

@@ -1,94 +0,0 @@
-import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
-import Counter from "../Counter/Counter";
-import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
-import { hasReactNode } from "../../lib/utils";
-import Tappable from "../Tappable/Tappable";
-import { Platform } from "../../lib/platform";
-import { HasComponent, HasRootRef } from "../../types";
-import { warnOnce } from "../../lib/warnOnce";
-import "./TabbarItem.css";
-
-export interface TabbarItemProps
-  extends Omit<React.AllHTMLAttributes<HTMLElement>, "label">, // TODO убрать Omit после удаления свойства label
-    HasRootRef<HTMLElement>,
-    HasComponent {
-  selected?: boolean;
-  /**
-   * Тест рядом с иконкой
-   */
-  text?: React.ReactNode;
-  /**
-   * Индикатор над иконкой. Принимает `<Badge mode="prominent" />` или `<Counter size="s" mode="prominent" />`
-   */
-  indicator?: React.ReactNode;
-  /**
-   * @deprecated будет удалено в 5.0.0. Используйте `indicator`
-   */
-  label?: React.ReactNode;
-}
-
-const warn = warnOnce("TabbarItem");
-const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
-  children,
-  selected,
-  label,
-  indicator,
-  text,
-  href,
-  Component = href ? "a" : "button",
-  disabled,
-  ...restProps
-}: TabbarItemProps) => {
-  const platform = usePlatform();
-
-  if (label && process.env.NODE_ENV === "development") {
-    warn(
-      "Свойство label устарело и будет удалено в 5.0.0. Используйте indicator."
-    );
-  }
-
-  return (
-    <Component
-      {...restProps}
-      disabled={disabled}
-      href={href}
-      vkuiClass={classNames(getClassName("TabbarItem", platform), {
-        "TabbarItem--selected": selected,
-        "TabbarItem--text": !!text,
-      })}
-    >
-      <Tappable
-        role="presentation"
-        Component="div"
-        disabled={disabled}
-        activeMode={
-          platform === Platform.IOS
-            ? "TabbarItem__tappable--active"
-            : "background"
-        }
-        activeEffectDelay={platform === Platform.IOS ? 0 : 300}
-        hasHover={false}
-        vkuiClass="TabbarItem__tappable"
-      />
-      <div vkuiClass="TabbarItem__in">
-        <div vkuiClass="TabbarItem__icon">
-          {children}
-          <div vkuiClass="TabbarItem__label">
-            {hasReactNode(indicator) && indicator}
-            {!indicator && label && (
-              <Counter size="s" mode="prominent">
-                {label}
-              </Counter>
-            )}
-          </div>
-        </div>
-        {text && <div vkuiClass="TabbarItem__text">{text}</div>}
-      </div>
-    </Component>
-  );
-};
-
-// eslint-disable-next-line import/no-default-export
-export default TabbarItem;

package/src/components/Tabs/Readme.md

@@ -1,274 +0,0 @@
-```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      activePanel: "panel1",
-      contextOpened: false,
-      mode: "all",
-      activeTab1: "recomendations",
-      activeTab2: "music",
-      activeTab3: "news",
-      activeTab4: "all",
-      activeTab5: "all",
-    };
-
-    this.select = this.select.bind(this);
-  }
-
-  select(e) {
-    const mode = e.currentTarget.dataset.mode;
-    this.setState({ mode, contextOpened: false });
-  }
-
-  render() {
-    return (
-      <View activePanel={this.state.activePanel}>
-        <Panel id="panel1">
-          <PanelHeader
-            left={
-              <PanelHeaderButton>
-                <Icon28CameraOutline />
-              </PanelHeaderButton>
-            }
-            right={
-              <PanelHeaderButton>
-                <Icon28AddOutline />
-              </PanelHeaderButton>
-            }
-            separator={this.props.sizeX === SizeType.REGULAR}
-          >
-            <Tabs>
-              <TabsItem
-                onClick={() => {
-                  if (this.state.activeTab1 === "news") {
-                    this.setState({ contextOpened: !this.state.contextOpened });
-                  }
-                  this.setState({ activeTab1: "news" });
-                }}
-                selected={this.state.activeTab1 === "news"}
-                after={
-                  <Icon16Dropdown
-                    style={{
-                      transform: `rotate(${
-                        this.state.contextOpened ? "180deg" : "0"
-                      }) translateY(1px)`,
-                    }}
-                  />
-                }
-              >
-                Новости
-              </TabsItem>
-              <TabsItem
-                onClick={() => {
-                  this.setState({
-                    activeTab1: "recomendations",
-                    contextOpened: false,
-                  });
-                }}
-                selected={this.state.activeTab1 === "recomendations"}
-              >
-                Интересное
-              </TabsItem>
-            </Tabs>
-          </PanelHeader>
-          <PanelHeaderContext
-            opened={this.state.contextOpened}
-            onClose={() => {
-              this.setState({ contextOpened: false });
-            }}
-          >
-            <List>
-              <Cell
-                before={<Icon28UsersOutline />}
-                after={
-                  this.state.mode === "all" ? (
-                    <Icon24Done fill="var(--accent)" />
-                  ) : null
-                }
-                onClick={this.select}
-                data-mode="all"
-              >
-                Communities
-              </Cell>
-              <Cell
-                before={<Icon28SettingsOutline />}
-                after={
-                  this.state.mode === "managed" ? (
-                    <Icon24Done fill="var(--accent)" />
-                  ) : null
-                }
-                onClick={this.select}
-                data-mode="managed"
-              >
-                Managed Communities
-              </Cell>
-            </List>
-          </PanelHeaderContext>
-          <Group>
-            <CellButton
-              onClick={() => this.setState({ activePanel: "panel2" })}
-            >
-              Под шапкой
-            </CellButton>
-          </Group>
-        </Panel>
-        <Panel id="panel2">
-          <PanelHeader
-            left={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel1" })}
-              />
-            }
-            separator={this.props.sizeX === SizeType.REGULAR}
-          >
-            Музыка
-          </PanelHeader>
-          <Group>
-            <Tabs>
-              <TabsItem
-                onClick={() => this.setState({ activeTab2: "music" })}
-                selected={this.state.activeTab2 === "music"}
-              >
-                Моя музыка
-              </TabsItem>
-              <TabsItem
-                onClick={() => this.setState({ activeTab2: "recomendations" })}
-                selected={this.state.activeTab2 === "recomendations"}
-              >
-                Рекомендации
-              </TabsItem>
-            </Tabs>
-            <CellButton
-              onClick={() => this.setState({ activePanel: "panel3" })}
-            >
-              Со скроллом
-            </CellButton>
-          </Group>
-        </Panel>
-        <Panel id="panel3">
-          <PanelHeader
-            left={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel2" })}
-              />
-            }
-            separator={this.props.sizeX === SizeType.REGULAR}
-          >
-            Новости
-          </PanelHeader>
-          <Group>
-            <Tabs>
-              <HorizontalScroll>
-                <TabsItem
-                  onClick={() => this.setState({ activeTab3: "news" })}
-                  selected={this.state.activeTab3 === "news"}
-                >
-                  Лента
-                </TabsItem>
-                <TabsItem
-                  onClick={() =>
-                    this.setState({ activeTab3: "recomendations" })
-                  }
-                  selected={this.state.activeTab3 === "recomendations"}
-                >
-                  Рекомендации
-                </TabsItem>
-                <TabsItem
-                  onClick={() => this.setState({ activeTab3: "friends" })}
-                  selected={this.state.activeTab3 === "friends"}
-                >
-                  Друзья
-                </TabsItem>
-                <TabsItem
-                  onClick={() => this.setState({ activeTab3: "photos" })}
-                  selected={this.state.activeTab3 === "photos"}
-                >
-                  Фотографии
-                </TabsItem>
-                <TabsItem
-                  onClick={() => this.setState({ activeTab3: "groups" })}
-                  selected={this.state.activeTab3 === "groups"}
-                >
-                  Сообщества
-                </TabsItem>
-              </HorizontalScroll>
-            </Tabs>
-            <CellButton
-              onClick={() => this.setState({ activePanel: "panel4" })}
-            >
-              Табы-кнопки
-            </CellButton>
-          </Group>
-        </Panel>
-        <Panel id="panel4">
-          <PanelHeader
-            left={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel2" })}
-              />
-            }
-          >
-            Кнопки
-          </PanelHeader>
-          <Group>
-            <Tabs mode="buttons">
-              <TabsItem
-                onClick={() => this.setState({ activeTab4: "all" })}
-                selected={this.state.activeTab4 === "all"}
-              >
-                Все записи
-              </TabsItem>
-              <TabsItem
-                onClick={() => this.setState({ activeTab4: "user" })}
-                selected={this.state.activeTab4 === "user"}
-              >
-                Записи Павла
-              </TabsItem>
-            </Tabs>
-            <CellButton
-              onClick={() => this.setState({ activePanel: "panel5" })}
-            >
-              Segmented (iOS only)
-            </CellButton>
-          </Group>
-        </Panel>
-        <Panel id="panel5">
-          <PanelHeader
-            left={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel4" })}
-              />
-            }
-            separator={this.props.sizeX === SizeType.REGULAR}
-          >
-            Лента
-          </PanelHeader>
-          <Group>
-            <Tabs mode="segmented">
-              <TabsItem
-                onClick={() => this.setState({ activeTab5: "all" })}
-                selected={this.state.activeTab5 === "all"}
-              >
-                Все записи
-              </TabsItem>
-              <TabsItem
-                onClick={() => this.setState({ activeTab5: "user" })}
-                selected={this.state.activeTab5 === "user"}
-                after={<Counter>3</Counter>}
-              >
-                Записи Павла
-              </TabsItem>
-            </Tabs>
-          </Group>
-        </Panel>
-      </View>
-    );
-  }
-}
-
-const AdaptivityExample = withAdaptivity(Example, { sizeX: true });
-
-<AdaptivityExample />;
-```