@vkontakte/vkui 4.22.1 → 4.25.0

package/src/components/TabbarItem/TabbarItem.tsx

@@ -1,18 +1,18 @@
-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 './TabbarItem.css';
+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 "./TabbarItem.css";
 
-export interface TabbarItemProps extends
-  Omit<React.AllHTMLAttributes<HTMLElement>, 'label'>, // TODO убрать Omit после удаления свойства label
-  HasRootRef<HTMLElement>,
-  HasComponent {
+export interface TabbarItemProps
+  extends Omit<React.AllHTMLAttributes<HTMLElement>, "label">, // TODO убрать Omit после удаления свойства label
+    HasRootRef<HTMLElement>,
+    HasComponent {
   selected?: boolean;
   /**
    * Тест рядом с иконкой
@@ -35,42 +35,53 @@ const TabbarItem: React.FunctionComponent<TabbarItemProps> = ({
   indicator,
   text,
   href,
-  Component = href ? 'a' : 'button',
+  Component = href ? "a" : "button",
   disabled,
   ...restProps
 }: TabbarItemProps) => {
   const platform = usePlatform();
 
   // @ts-ignore ругается на то, что у AllHTMLAttributes type это строка, а button не любую строку считает валидным значением
-  return (<Component
-    {...restProps}
-    disabled={disabled}
-    href={href}
-    vkuiClass={classNames(getClassName('TabbarItem', platform), {
-      'TabbarItem--selected': selected,
-      'TabbarItem--text': !!text,
-    })}
-  >
-    <Tappable
-      role="presentation"
-      Component="div"
+  return (
+    <Component
+      {...restProps}
       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>}
+      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>
-      {text && <div vkuiClass="TabbarItem__text">{text}</div>}
-    </div>
-  </Component>);
+    </Component>
+  );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default TabbarItem;

package/src/components/Tabs/Readme.md

@@ -1,214 +1,274 @@
 ```jsx
-  class Example extends React.Component {
+class Example extends React.Component {
+  constructor(props) {
+    super(props);
 
-    constructor (props) {
-      super(props);
+    this.state = {
+      activePanel: "panel1",
+      contextOpened: false,
+      mode: "all",
+      activeTab1: "recomendations",
+      activeTab2: "music",
+      activeTab3: "news",
+      activeTab4: "all",
+      activeTab5: "all",
+    };
 
-      this.state = {
-        activePanel: 'panel1',
-        contextOpened: false,
-        mode: 'all',
-        activeTab1: 'recomendations',
-        activeTab2: 'music',
-        activeTab3: 'news',
-        activeTab4: 'all',
-        activeTab5: 'all',
-      };
-
-      this.select = this.select.bind(this);
-    }
+    this.select = this.select.bind(this);
+  }
 
-    select(e) {
-      const mode = e.currentTarget.dataset.mode;
-      this.setState({ mode, contextOpened: false });
-    }
+  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}
+  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" })}
             >
-              <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 }) }}
+              Под шапкой
+            </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" })}
             >
-              <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>
+              Со скроллом
+            </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({ activeTab2: 'music' })}
-                  selected={this.state.activeTab2 === 'music'}
+                  onClick={() => this.setState({ activeTab3: "news" })}
+                  selected={this.state.activeTab3 === "news"}
                 >
-                  Моя музыка
+                  Лента
                 </TabsItem>
                 <TabsItem
-                  onClick={() => this.setState({ activeTab2: 'recomendations' })}
-                  selected={this.state.activeTab2 === 'recomendations'}
+                  onClick={() =>
+                    this.setState({ activeTab3: "recomendations" })
+                  }
+                  selected={this.state.activeTab3 === "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'}
+                  onClick={() => this.setState({ activeTab3: "friends" })}
+                  selected={this.state.activeTab3 === "friends"}
                 >
-                  Записи Павла
+                  Друзья
                 </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'}
+                  onClick={() => this.setState({ activeTab3: "photos" })}
+                  selected={this.state.activeTab3 === "photos"}
                 >
-                  Все записи
+                  Фотографии
                 </TabsItem>
                 <TabsItem
-                  onClick={() => this.setState({ activeTab5: 'user' })}
-                  selected={this.state.activeTab5 === 'user'}
-                  after={<Counter>3</Counter>}
+                  onClick={() => this.setState({ activeTab3: "groups" })}
+                  selected={this.state.activeTab3 === "groups"}
                 >
-                  Записи Павла
+                  Сообщества
                 </TabsItem>
-              </Tabs>
-            </Group>
-          </Panel>
-        </View>
-      )
-    }
+              </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 });
+}
+
+const AdaptivityExample = withAdaptivity(Example, { sizeX: true });
 
-  <AdaptivityExample />
+<AdaptivityExample />;
 ```

package/src/components/Tabs/Tabs.css

@@ -12,7 +12,7 @@
 .PanelHeader .Tabs::after {
   display: block;
   width: 1000px;
-  content: '';
+  content: "";
 }
 
 .Tabs .HorizontalScroll {
@@ -40,7 +40,7 @@
   width: 8px;
   flex-shrink: 0;
   height: 1px;
-  content: '';
+  content: "";
 }
 
 /*
@@ -58,7 +58,7 @@
   top: 0;
   width: 100%;
   height: 100%;
-  content: '';
+  content: "";
   background: var(--background_content);
 }
 

package/src/components/Tabs/Tabs.tsx

@@ -1,17 +1,21 @@
-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 { withAdaptivity, AdaptivityProps } from '../../hoc/withAdaptivity';
-import './Tabs.css';
+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 { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import "./Tabs.css";
 
-export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, HasRootRef<HTMLDivElement>, AdaptivityProps {
-  mode?: 'default' | 'buttons' | 'segmented';
+export interface TabsProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasRootRef<HTMLDivElement>,
+    AdaptivityProps {
+  mode?: "default" | "buttons" | "segmented";
 }
 
-export const TabsModeContext = React.createContext<TabsProps['mode']>('default');
+export const TabsModeContext =
+  React.createContext<TabsProps["mode"]>("default");
 
 const Tabs: React.FunctionComponent<TabsProps> = ({
   children,
@@ -22,15 +26,19 @@ const Tabs: React.FunctionComponent<TabsProps> = ({
 }: TabsProps) => {
   const platform = usePlatform();
 
-  if (platform !== IOS && mode === 'segmented') {
-    mode = 'default';
+  if (platform !== IOS && mode === "segmented") {
+    mode = "default";
   }
 
   return (
     <div
       {...restProps}
       ref={getRootRef}
-      vkuiClass={classNames(getClassName('Tabs', platform), `Tabs--${mode}`, `Tabs--sizeX-${sizeX}`)}
+      vkuiClass={classNames(
+        getClassName("Tabs", platform),
+        `Tabs--${mode}`,
+        `Tabs--sizeX-${sizeX}`
+      )}
     >
       <div vkuiClass="Tabs__in">
         <TabsModeContext.Provider value={mode}>
@@ -42,7 +50,8 @@ const Tabs: React.FunctionComponent<TabsProps> = ({
 };
 
 Tabs.defaultProps = {
-  mode: 'default',
+  mode: "default",
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Tabs, { sizeX: true });