@vkontakte/vkui 4.34.2 → 4.35.0

package/src/components/Tabs/Readme.md

@@ -1,274 +1,214 @@
 ```jsx
-class Example extends React.Component {
-  constructor(props) {
-    super(props);
+const Example = ({ sizeX }) => {
+  const [mode, setMode] = React.useState("all");
+  const [menuOpened, setMenuOpened] = React.useState(false);
+  const [selected, setSelected] = React.useState("news");
 
-    this.state = {
-      activePanel: "panel1",
-      contextOpened: false,
-      mode: "all",
-      activeTab1: "recommendations",
-      activeTab2: "music",
-      activeTab3: "news",
-      activeTab4: "all",
-      activeTab5: "all",
-    };
+  return (
+    <View activePanel="panel">
+      <Panel id="panel">
+        <PanelHeader
+          before={
+            <PanelHeaderButton>
+              <Icon28CameraOutline />
+            </PanelHeaderButton>
+          }
+          after={
+            <PanelHeaderButton>
+              <Icon28AddOutline />
+            </PanelHeaderButton>
+          }
+          // TODO 5.0.0 Новая адаптивность
+          separator={sizeX === SizeType.REGULAR}
+        >
+          <DefaultInPanel
+            menuOpened={menuOpened}
+            onMenuClick={(opened) => {
+              setMenuOpened((prevState) => (opened ? !prevState : false));
+            }}
+          />
+        </PanelHeader>
 
-    this.select = this.select.bind(this);
-  }
+        <Scrollable />
 
-  select(e) {
-    const mode = e.currentTarget.dataset.mode;
-    this.setState({ mode, contextOpened: false });
-  }
+        <PanelHeaderContext
+          opened={menuOpened}
+          onClose={() => setMenuOpened(false)}
+        >
+          <List>
+            <Cell
+              before={<Icon28UsersOutline />}
+              after={mode === "all" && <Icon24Done fill="var(--accent)" />}
+              onClick={() => setMode("all")}
+            >
+              Communities
+            </Cell>
+            <Cell
+              before={<Icon28SettingsOutline />}
+              after={mode === "managed" && <Icon24Done fill="var(--accent)" />}
+              onClick={() => setMode("managed")}
+            >
+              Managed Communities
+            </Cell>
+          </List>
+        </PanelHeaderContext>
+      </Panel>
+    </View>
+  );
+};
 
-  render() {
-    return (
-      <View activePanel={this.state.activePanel}>
-        <Panel id="panel1">
-          <PanelHeader
-            before={
-              <PanelHeaderButton>
-                <Icon28CameraOutline />
-              </PanelHeaderButton>
-            }
-            after={
-              <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: "recommendations",
-                    contextOpened: false,
-                  });
-                }}
-                selected={this.state.activeTab1 === "recommendations"}
-              >
-                Интересное
-              </TabsItem>
-            </Tabs>
-          </PanelHeader>
-          <PanelHeaderContext
-            opened={this.state.contextOpened}
-            onClose={() => {
-              this.setState({ contextOpened: false });
+const DefaultInPanel = ({ menuOpened, onMenuClick }) => {
+  const [selected, setSelected] = React.useState("news");
+
+  return (
+    <Tabs>
+      <TabsItem
+        after={
+          <Icon16Dropdown
+            style={{
+              transform: `rotate(${menuOpened ? "180deg" : "0"})`,
             }}
+          />
+        }
+        selected={selected === "news"}
+        onClick={() => {
+          if (selected === "news") {
+            onMenuClick(true);
+          }
+          setSelected("news");
+        }}
+      >
+        Новости
+      </TabsItem>
+      <TabsItem
+        selected={selected === "recommendations"}
+        onClick={() => {
+          onMenuClick(false);
+          setSelected("recommendations");
+        }}
+      >
+        Интересное
+      </TabsItem>
+    </Tabs>
+  );
+};
+
+const Scrollable = () => {
+  const [mode, setMode] = React.useState("default");
+  const [selected, setSelected] = React.useState("news");
+  const [disabled, setDisabled] = React.useState(false);
+
+  return (
+    <Group>
+      <Tabs mode={mode}>
+        <HorizontalScroll arrowSize="m">
+          <TabsItem
+            selected={selected === "groups"}
+            disabled={disabled}
+            onClick={() => setSelected("groups")}
           >
-            <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
+            Сообщества
+          </TabsItem>
+          <TabsItem
             before={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel1" })}
-              />
+              mode === "default" ? (
+                <Icon24NewsfeedOutline />
+              ) : (
+                <Icon20NewsfeedOutline />
+              )
             }
-            separator={this.props.sizeX === SizeType.REGULAR}
+            after={<Icon16Dropdown />}
+            selected={selected === "news"}
+            disabled={disabled}
+            onClick={() => setSelected("news")}
           >
-            Музыка
-          </PanelHeader>
-          <Group>
-            <Tabs>
-              <TabsItem
-                onClick={() => this.setState({ activeTab2: "music" })}
-                selected={this.state.activeTab2 === "music"}
-              >
-                Моя музыка
-              </TabsItem>
-              <TabsItem
-                onClick={() => this.setState({ activeTab2: "recommendations" })}
-                selected={this.state.activeTab2 === "recommendations"}
-              >
-                Рекомендации
-              </TabsItem>
-            </Tabs>
-            <CellButton
-              onClick={() => this.setState({ activePanel: "panel3" })}
-            >
-              Со скроллом
-            </CellButton>
-          </Group>
-        </Panel>
-        <Panel id="panel3">
-          <PanelHeader
+            Лента
+          </TabsItem>
+          <TabsItem
             before={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel2" })}
-              />
+              mode === "default" ? (
+                <Icon24ThumbsUpOutline />
+              ) : (
+                <Icon20ThumbsUpOutline />
+              )
             }
-            separator={this.props.sizeX === SizeType.REGULAR}
+            status={<Badge mode="prominent" />}
+            after={<Icon16Dropdown />}
+            selected={selected === "recommendations"}
+            disabled={disabled}
+            onClick={() => setSelected("recommendations")}
           >
-            Новости
-          </PanelHeader>
-          <Group>
-            <Tabs>
-              <HorizontalScroll>
-                <TabsItem
-                  onClick={() => this.setState({ activeTab3: "news" })}
-                  selected={this.state.activeTab3 === "news"}
-                >
-                  Лента
-                </TabsItem>
-                <TabsItem
-                  onClick={() =>
-                    this.setState({ activeTab3: "recommendations" })
-                  }
-                  selected={this.state.activeTab3 === "recommendations"}
-                >
-                  Рекомендации
-                </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
+            Рекомендации
+          </TabsItem>
+          <TabsItem
             before={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel2" })}
-              />
+              mode === "default" ? (
+                <Icon24UsersOutline />
+              ) : (
+                <Icon20UsersOutline />
+              )
+            }
+            status={
+              <Counter mode="prominent" size="s">
+                3
+              </Counter>
             }
+            after={<Icon16Dropdown />}
+            selected={selected === "friends"}
+            disabled={disabled}
+            onClick={() => setSelected("friends")}
           >
-            Кнопки
-          </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
+            Друзья
+          </TabsItem>
+          <TabsItem
             before={
-              <PanelHeaderBack
-                onClick={() => this.setState({ activePanel: "panel4" })}
-              />
+              mode === "default" ? (
+                <Icon24PictureOutline />
+              ) : (
+                <Icon20PictureOutline />
+              )
             }
-            separator={this.props.sizeX === SizeType.REGULAR}
+            status={23}
+            after={<Icon16Dropdown />}
+            selected={selected === "photos"}
+            disabled={disabled}
+            onClick={() => setSelected("photos")}
           >
-            Лента
-          </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>
-    );
-  }
-}
+            Фотографии
+          </TabsItem>
+        </HorizontalScroll>
+      </Tabs>
+      <FormItem top="mode">
+        <CustomSelect
+          value={mode}
+          options={[
+            {
+              label: "default",
+              value: "default",
+            },
+            {
+              label: "accent",
+              value: "accent",
+            },
+            {
+              label: "secondary",
+              value: "secondary",
+            },
+          ]}
+          onChange={(event) => setMode(event.target.value)}
+        />
+      </FormItem>
+      <Checkbox onChange={() => setDisabled((prev) => !prev)}>
+        disabled
+      </Checkbox>
+    </Group>
+  );
+};
 
+// TODO 5.0.0 Новая адаптивность
 const AdaptivityExample = withAdaptivity(Example, { sizeX: true });
 
-<AdaptivityExample />;
+<ConfigProvider webviewType="internal">
+  <AdaptivityExample />
+</ConfigProvider>;
 ```

package/src/components/Tabs/Tabs.css

@@ -1,9 +1,21 @@
-.Tabs__in,
-.Tabs .HorizontalScroll__in-wrapper {
+.Tabs__in {
   display: flex;
-  align-items: center;
+  align-items: stretch;
 }
 
+.Tabs--withGaps {
+  justify-content: flex-start;
+}
+
+/* TODO v5.0.0 Удалить mode="segmented" */
+.Tabs--ios.Tabs--segmented {
+  padding: 4px 12px 8px;
+}
+
+/**
+ * CMP:
+ * PanelHeader
+ */
 .PanelHeader .Tabs {
   overflow: hidden;
   font-family: var(--font-common);
@@ -15,42 +27,22 @@
   content: "";
 }
 
-.Tabs .HorizontalScroll {
-  min-width: 100%;
-}
-
-.Tabs--buttons {
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.Tabs--default,
-.Tabs--default .HorizontalScroll__in-wrapper {
-  justify-content: center;
-}
-
-.Tabs--buttons,
-.Tabs--default .HorizontalScroll__in-wrapper {
-  justify-content: flex-start;
+/**
+ * CMP:
+ * Group
+ */
+.Group--plain .Group__inner > .Tabs--default:first-child {
+  margin-top: -8px;
 }
 
-.Tabs--sizeX-compact.Tabs--buttons .HorizontalScroll__in-wrapper::after,
-.Tabs--sizeX-compact.Tabs--buttons .HorizontalScroll__in-wrapper::before {
-  display: block;
-  width: 8px;
-  flex-shrink: 0;
-  height: 1px;
-  content: "";
+.Group--card > .Group__inner > .Tabs--default:first-child {
+  margin-top: -4px;
 }
 
-/*
- iOS
+/**
+ * CMP:
+ * FixedLayout
  */
-
-.Tabs--ios.Tabs--segmented {
-  padding: 4px 12px 8px;
-}
-
 /* Нужно для закрашивания прозрачной области нижнего инсета на iphone x */
 .FixedLayout--ios.FixedLayout--bottom .Tabs::after {
   position: absolute;
@@ -59,7 +51,7 @@
   width: 100%;
   height: 100%;
   content: "";
-  background: var(--background_content);
+  background: var(--background_content, var(--vkui--color_background_content));
 }
 
 .FixedLayout--ios.FixedLayout--bottom .Tabs__in,
@@ -67,48 +59,3 @@
   position: relative;
   z-index: 2;
 }
-
-/**
- * Counter inside TabsItem
- */
-
-.TabsItem .Counter {
-  margin-left: 8px;
-}
-
-.Tabs .TabsItem .Counter--secondary {
-  background: var(--panel_tab_inactive_text);
-  color: var(--white);
-}
-
-.Tabs .TabsItem--selected .Counter--secondary {
-  background: var(--panel_tab_active_text);
-  color: var(--panel_tab_active_background);
-}
-
-.Tabs--ios.Tabs--segmented .TabsItem .Counter--secondary {
-  background: var(--segmented_control_tint);
-  color: var(--background_content);
-}
-
-.Tabs--ios.Tabs--segmented .TabsItem--selected .Counter--secondary {
-  background: var(--background_content);
-  color: var(--segmented_control_tint);
-}
-
-.Tabs--ios.Tabs--segmented .TabsItem .Counter--s-m {
-  position: relative;
-  top: 1px;
-}
-
-/*
- * CMP:
- * Group
- */
-.Group--plain .Group__inner > .Tabs--default:first-child {
-  margin-top: -8px;
-}
-
-.Group--card > .Group__inner > .Tabs--default:first-child {
-  margin-top: -4px;
-}

package/src/components/Tabs/Tabs.tsx

@@ -1,21 +1,37 @@
 import * as React from "react";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
 import { HasRootRef } from "../../types";
 import { usePlatform } from "../../hooks/usePlatform";
-import { IOS } from "../../lib/platform";
+import { IOS, VKCOM } from "../../lib/platform";
 import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { warnOnce } from "../../lib/warnOnce";
 import "./Tabs.css";
 
 export interface TabsProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement>,
     AdaptivityProps {
-  mode?: "default" | "buttons" | "segmented";
+  /**
+   * Задаёт вид кнопок.
+   *
+   * > ⚠️ Значения `"buttons"`, `"segmented"` устарели и будут удалены в 5.0.0. Вместо `"buttons"` используйте `"secondary"`.
+   * > Режим `"segmented"` переехал в отдельный компонент [`SegmentedControl`](https://vkcom.github.io/VKUI#/SegmentedControl),
+   * > поэтому используйте его вместо `Tabs`.
+   */
+  mode?: "buttons" | "segmented" | "default" | "accent" | "secondary";
 }
 
-export const TabsModeContext =
-  React.createContext<TabsProps["mode"]>("default");
+const warn = warnOnce("Tabs");
+
+export interface TabsContextProps {
+  mode: TabsProps["mode"];
+  withGaps: boolean;
+}
+
+export const TabsModeContext = React.createContext<TabsContextProps>({
+  mode: "default",
+  withGaps: false,
+});
 
 const TabsComponent = ({
   children,
@@ -26,22 +42,44 @@ const TabsComponent = ({
 }: TabsProps) => {
   const platform = usePlatform();
 
+  if (
+    (mode === "buttons" || mode === "segmented") &&
+    process.env.NODE_ENV === "development"
+  ) {
+    const expectedValueText =
+      mode === "buttons"
+        ? `значения "secondary"`
+        : "компонент SegmentedControl";
+    warn(
+      `mode="${mode}" устарело и будет удалено в 5.0.0. Используйте ${expectedValueText}`
+    );
+  }
+
   if (platform !== IOS && mode === "segmented") {
     mode = "default";
   }
 
+  if (mode === "buttons") {
+    mode = "secondary";
+  }
+
+  const withGaps = mode === "accent" || mode === "secondary";
+
   return (
     <div
       {...restProps}
       ref={getRootRef}
       vkuiClass={classNames(
-        getClassName("Tabs", platform),
+        "Tabs",
+        (platform === IOS || platform === VKCOM) && `Tabs--${platform}`,
         `Tabs--${mode}`,
+        withGaps && "Tabs--withGaps",
+        // TODO v5.0.0 новая адаптивность
         `Tabs--sizeX-${sizeX}`
       )}
     >
       <div vkuiClass="Tabs__in">
-        <TabsModeContext.Provider value={mode}>
+        <TabsModeContext.Provider value={{ mode, withGaps }}>
           {children}
         </TabsModeContext.Provider>
       </div>

package/src/components/TabsItem/Readme.md

@@ -0,0 +1 @@
+Элемент компонента [`Tabs`](https://vkcom.github.io/VKUI/#/Tabs). Наследует `mode` из контекста `Tabs`.