@vkontakte/vkui 4.28.0 → 4.28.1

package/src/components/Tabbar/Tabbar.tsx

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

@@ -0,0 +1,102 @@
+Элемент [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

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

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

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