@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/SubnavigationBar/Readme.md

@@ -2,9 +2,9 @@
 За это отвечает свойство `textLevel` у `SubnavigationButton`.
 
 ```jsx { "props": { "layout": false, "adaptivity": true } }
-import { useState } from 'react';
+import { useState } from "react";
 
-const MODAL_NAME = 'filters';
+const MODAL_NAME = "filters";
 
 const FILTERS_SIZE = [
   { value: 36, label: 36 },
@@ -14,22 +14,22 @@ const FILTERS_SIZE = [
 ];
 
 const FILTERS_STYLE = [
-  { value: 'Вечерний', label: 'Вечерний' },
-  { value: 'Деловой', label: 'Деловой' },
-  { value: 'Повседневный', label: 'Повседневный' },
-  { value: 'Спортивный', label: 'Спортивный' },
+  { value: "Вечерний", label: "Вечерний" },
+  { value: "Деловой", label: "Деловой" },
+  { value: "Повседневный", label: "Повседневный" },
+  { value: "Спортивный", label: "Спортивный" },
 ];
 
 const SubnavigationBarExample = () => {
   const platform = usePlatform();
   const { viewWidth } = useAdaptivity();
 
-  const [activePanel, setActivePanel] = useState('example');
+  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 [filterStyles, setFilterStyles] = useState(["Вечерний"]);
 
   const [sizeSelected, setSizeSelected] = useState(false);
   const [inStockSelected, setInStockSelected] = useState(false);
@@ -43,7 +43,7 @@ const SubnavigationBarExample = () => {
   const closeModal = () => {
     setFiltersModalOpened(false);
   };
-  
+
   const onChangeFilterSize = (e) => {
     const { value, checked } = e.currentTarget;
     if (checked) {
@@ -61,12 +61,12 @@ const SubnavigationBarExample = () => {
       setFilterStyles(filterStyles.filter((v) => v !== value));
     }
   };
-  
+
   const applyFilters = () => {
     let count = 0;
 
-    filterSizes.length && (count++);
-    filterStyles.length && (count++);
+    filterSizes.length && count++;
+    filterStyles.length && count++;
 
     closeModal();
     setFiltersCount(count);
@@ -82,7 +82,13 @@ const SubnavigationBarExample = () => {
         header={
           <ModalPageHeader
             left={platform !== IOS && <PanelHeaderClose onClick={closeModal} />}
-            right={platform === IOS && <PanelHeaderButton onClick={closeModal}><Icon24Dismiss /></PanelHeaderButton>}
+            right={
+              platform === IOS && (
+                <PanelHeaderButton onClick={closeModal}>
+                  <Icon24Dismiss />
+                </PanelHeaderButton>
+              )
+            }
           >
             Фильтры
           </ModalPageHeader>
@@ -96,7 +102,9 @@ const SubnavigationBarExample = () => {
                   value={value}
                   checked={filterSizes.includes(value)}
                   onChange={onChangeFilterSize}
-                >{label}</Checkbox>
+                >
+                  {label}
+                </Checkbox>
               );
             })}
           </FormItem>
@@ -108,13 +116,17 @@ const SubnavigationBarExample = () => {
                   value={value}
                   checked={filterStyles.includes(value)}
                   onChange={onChangeFilterStyle}
-                >{label}</Checkbox>
+                >
+                  {label}
+                </Checkbox>
               );
             })}
           </FormItem>
 
           <FormItem>
-            <Button size="l" stretched onClick={applyFilters}>Показать результаты</Button>
+            <Button size="l" stretched onClick={applyFilters}>
+              Показать результаты
+            </Button>
           </FormItem>
         </FormLayout>
       </ModalPage>
@@ -124,95 +136,129 @@ const SubnavigationBarExample = () => {
   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>
+        <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={sizeSelected}
+                  onClick={() => setSizeSelected(!sizeSelected)}
+                >
+                  Мой размер
+                </SubnavigationButton>
 
-              <SubnavigationButton
-                selected={inStockSelected}
-                onClick={() => setInStockSelected(!inStockSelected)}
-              >
-                В наличии
-              </SubnavigationButton>
+                <SubnavigationButton
+                  selected={inStockSelected}
+                  onClick={() => setInStockSelected(!inStockSelected)}
+                >
+                  В наличии
+                </SubnavigationButton>
 
-              <SubnavigationButton
-                selected={highRatingSelected}
-                onClick={() => setHighRatingSelected(!highRatingSelected)}
+                <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")} />}
               >
-                Высокий рейтинг
-              </SubnavigationButton>
+                Artur Stambultsian
+              </SimpleCell>
+            </Group>
+          </Panel>
+          <Panel id="add_friend">
+            <PanelHeader
+              left={
+                <PanelHeaderBack onClick={() => setActivePanel("example")} />
+              }
+            >
+              Добавить друга
+            </PanelHeader>
 
-              <SubnavigationButton
-                before={<Icon24FavoriteOutline/>}
-                selected={faveSelected}
-                onClick={() => setFaveSelected(!faveSelected)}
+            <Group>
+              <SimpleCell
+                before={<Avatar src={getAvatarUrl("user_wayshev")} />}
               >
-                Избранное
-              </SubnavigationButton>
-            </SubnavigationBar>
-          </Group>
-
-          <Group>
-            <SubnavigationBar mode="fixed">
-              <SubnavigationButton
-                before={<Icon24ScanViewfinderOutline />}
-                size="l"
-                textLevel={viewWidth <= ViewWidth.MOBILE ? 3 : 1}
-                onClick={() => setActivePanel('add_friend')}
+                Иван Барышев
+              </SimpleCell>
+              <SimpleCell
+                before={<Avatar src={getAvatarUrl("user_lihachyov")} />}
               >
-                Сканировать QR
-              </SubnavigationButton>
-
-              <SubnavigationButton
-                before={<Icon24UserAddOutline />}
-                size="l"
-                textLevel={viewWidth <= ViewWidth.MOBILE ? 3 : 1}
-                onClick={() => setActivePanel('add_friend')}
+                Михаил Лихачёв
+              </SimpleCell>
+              <SimpleCell
+                before={<Avatar src={getAvatarUrl("user_arthurstam")} />}
               >
-                Добавить друга
-              </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>
+                Artur Stambultsian
+              </SimpleCell>
+            </Group>
+          </Panel>
+        </View>
       </SplitCol>
     </SplitLayout>
   );
 };
 
-<SubnavigationBarExample />
+<SubnavigationBarExample />;
 ```

package/src/components/SubnavigationBar/SubnavigationBar.css

@@ -10,7 +10,7 @@
 
 .SubnavigationBar__scrollIn::before,
 .SubnavigationBar__scrollIn::after {
-  content: '';
+  content: "";
   min-width: 16px;
 }
 

package/src/components/SubnavigationBar/SubnavigationBar.tsx

@@ -1,14 +1,23 @@
-import * as React from 'react';
-import { usePlatform } from '../../hooks/usePlatform';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import HorizontalScroll, { HorizontalScrollProps, ScrollPositionHandler } from '../HorizontalScroll/HorizontalScroll';
-import './SubnavigationBar.css';
+import * as React from "react";
+import { usePlatform } from "../../hooks/usePlatform";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import HorizontalScroll, {
+  HorizontalScrollProps,
+  ScrollPositionHandler,
+} from "../HorizontalScroll/HorizontalScroll";
+import "./SubnavigationBar.css";
 
-export interface SubnavigationBarProps extends
-  React.HTMLAttributes<HTMLDivElement>,
-  Pick<HorizontalScrollProps, 'showArrows' | 'getScrollToLeft' | 'getScrollToRight' | 'scrollAnimationDuration'> {
-  mode?: 'fixed' | 'overflow';
+export interface SubnavigationBarProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    Pick<
+      HorizontalScrollProps,
+      | "showArrows"
+      | "getScrollToLeft"
+      | "getScrollToRight"
+      | "scrollAnimationDuration"
+    > {
+  mode?: "fixed" | "overflow";
 }
 
 const defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;
@@ -16,7 +25,7 @@ const defaultScrollToLeft: ScrollPositionHandler = (x) => x - 240;
 const defaultScrollToRight: ScrollPositionHandler = (x) => x + 240;
 
 export const SubnavigationBar: React.FC<SubnavigationBarProps> = ({
-  mode = 'overflow',
+  mode = "overflow",
   children,
   showArrows = true,
   getScrollToLeft = defaultScrollToLeft,
@@ -29,8 +38,8 @@ export const SubnavigationBar: React.FC<SubnavigationBarProps> = ({
   let ScrollWrapper: React.ElementType;
   let scrollWrapperProps = {};
 
-  if (mode === 'fixed') {
-    ScrollWrapper = 'div';
+  if (mode === "fixed") {
+    ScrollWrapper = "div";
   } else {
     ScrollWrapper = HorizontalScroll;
     scrollWrapperProps = {
@@ -44,12 +53,13 @@ export const SubnavigationBar: React.FC<SubnavigationBarProps> = ({
   return (
     <div
       {...restProps}
-      vkuiClass={classNames(getClassName('SubnavigationBar', platform), `SubnavigationBar--${mode}`)}
+      vkuiClass={classNames(
+        getClassName("SubnavigationBar", platform),
+        `SubnavigationBar--${mode}`
+      )}
     >
       <ScrollWrapper vkuiClass="SubnavigationBar__in" {...scrollWrapperProps}>
-        <div vkuiClass="SubnavigationBar__scrollIn">
-          {children}
-        </div>
+        <div vkuiClass="SubnavigationBar__scrollIn">{children}</div>
       </ScrollWrapper>
     </div>
   );

package/src/components/SubnavigationButton/Readme.md

@@ -13,18 +13,19 @@ const SubnavigationButtonExample = () => {
         <PanelHeader>SubnavigationButton</PanelHeader>
         <Group>
           <SubnavigationBar>
-            <SubnavigationButton
-              before={<Icon24Filter/>}
-              expandable
-            >
+            <SubnavigationButton before={<Icon24Filter />} expandable>
               Фильтры
             </SubnavigationButton>
 
             <SubnavigationButton
-              before={<Icon24Filter/>}
+              before={<Icon24Filter />}
               selected
               expandable
-              after={<Counter mode="primary" size="s">3</Counter>}
+              after={
+                <Counter mode="primary" size="s">
+                  3
+                </Counter>
+              }
             >
               Фильтры
             </SubnavigationButton>
@@ -32,35 +33,30 @@ const SubnavigationButtonExample = () => {
 
           <SubnavigationBar>
             <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline/>}
+              before={<Icon24ScanViewfinderOutline />}
               size="l"
             >
               Сканировать QR
             </SubnavigationButton>
 
-            <SubnavigationButton
-              before={<Icon24UserAddOutline/>}
-              size="l"
-            >
+            <SubnavigationButton before={<Icon24UserAddOutline />} size="l">
               Добавить друга
             </SubnavigationButton>
           </SubnavigationBar>
 
           <SubnavigationBar>
-            <SubnavigationButton>
-              Мой размер
-            </SubnavigationButton>
+            <SubnavigationButton>Мой размер</SubnavigationButton>
 
-            <SubnavigationButton
-              selected
-            >
-              Мой размер
-            </SubnavigationButton>
+            <SubnavigationButton selected>Мой размер</SubnavigationButton>
           </SubnavigationBar>
 
           <SubnavigationBar>
             <SubnavigationButton
-              after={<Counter mode="prominent" size="s">3</Counter>}
+              after={
+                <Counter mode="prominent" size="s">
+                  3
+                </Counter>
+              }
             >
               Новинки
             </SubnavigationButton>
@@ -68,38 +64,34 @@ const SubnavigationButtonExample = () => {
 
           <SubnavigationBar>
             <SubnavigationButton
-              before={<Icon24Filter/>}
+              before={<Icon24Filter />}
               selected
               expandable
-              after={<Counter mode="primary" size="s">3</Counter>}
+              after={
+                <Counter mode="primary" size="s">
+                  3
+                </Counter>
+              }
             >
               Фильтры
             </SubnavigationButton>
 
-            <SubnavigationButton
-              selected
-            >
-              Мой размер
-            </SubnavigationButton>
+            <SubnavigationButton selected>Мой размер</SubnavigationButton>
 
-            <SubnavigationButton>
-              В наличии
-            </SubnavigationButton>
+            <SubnavigationButton>В наличии</SubnavigationButton>
 
-            <SubnavigationButton
-              before={<Icon24FavoriteOutline/>}
-            >
+            <SubnavigationButton before={<Icon24FavoriteOutline />}>
               Избранное
             </SubnavigationButton>
           </SubnavigationBar>
         </Group>
-        
+
         <Group>
           <Header>Уменьшение шрифта</Header>
 
           <SubnavigationBar>
             <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline/>}
+              before={<Icon24ScanViewfinderOutline />}
               size="l"
               textLevel={1}
             >
@@ -109,7 +101,7 @@ const SubnavigationButtonExample = () => {
 
           <SubnavigationBar>
             <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline/>}
+              before={<Icon24ScanViewfinderOutline />}
               size="l"
               textLevel={2}
             >
@@ -119,7 +111,7 @@ const SubnavigationButtonExample = () => {
 
           <SubnavigationBar>
             <SubnavigationButton
-              before={<Icon24ScanViewfinderOutline/>}
+              before={<Icon24ScanViewfinderOutline />}
               size="l"
               textLevel={3}
             >
@@ -132,5 +124,5 @@ const SubnavigationButtonExample = () => {
   );
 };
 
-<SubnavigationButtonExample/>
+<SubnavigationButtonExample />;
 ```

package/src/components/SubnavigationButton/SubnavigationButton.css

@@ -2,7 +2,7 @@
   display: inline-block;
   background-color: var(--modal_card_background);
   color: var(--text_primary);
-  box-shadow: 0 0 2px rgba(0, 0, 0, .08), 0 2px 24px rgba(0, 0, 0, .08);
+  box-shadow: 0 0 2px rgba(0, 0, 0, 0.08), 0 2px 24px rgba(0, 0, 0, 0.08);
   user-select: none;
 }
 

package/src/components/SubnavigationButton/SubnavigationButton.tsx

@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { HasComponent } from '../../types';
-import { classNames } from '../../lib/classNames';
-import { getClassName } from '../../helpers/getClassName';
-import { getTitleFromChildren, hasReactNode } from '../../lib/utils';
-import Tappable, { TappableProps } from '../Tappable/Tappable';
-import { Icon16Dropdown } from '@vkontakte/icons';
-import { usePlatform } from '../../hooks/usePlatform';
-import Caption from '../Typography/Caption/Caption';
-import Subhead from '../Typography/Subhead/Subhead';
-import './SubnavigationButton.css';
+import * as React from "react";
+import { HasComponent } from "../../types";
+import { classNames } from "../../lib/classNames";
+import { getClassName } from "../../helpers/getClassName";
+import { getTitleFromChildren, hasReactNode } from "../../lib/utils";
+import Tappable, { TappableProps } from "../Tappable/Tappable";
+import { Icon16Dropdown } from "@vkontakte/icons";
+import { usePlatform } from "../../hooks/usePlatform";
+import Caption from "../Typography/Caption/Caption";
+import Subhead from "../Typography/Subhead/Subhead";
+import "./SubnavigationButton.css";
 
-export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
-  size?: 'm' | 'l';
+export interface SubnavigationButtonProps extends Omit<TappableProps, "size"> {
+  size?: "m" | "l";
   selected?: boolean;
   /**
    * Размер шрифта. Этим свойством рекомендуется пользоваться, чтобы отрегулировать размер шрифта у кнопок в `<SubnavigationBar mode="fixed" />`
@@ -28,23 +28,29 @@ export interface SubnavigationButtonProps extends Omit<TappableProps, 'size'> {
   expandable?: boolean;
 }
 
-type SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, 'textLevel'> & HasComponent;
+type SubnavButtonTypographyProps = Pick<SubnavigationButtonProps, "textLevel"> &
+  HasComponent;
 
-const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({ textLevel, ...restProps }: SubnavButtonTypographyProps) => {
+const SubnavigationButtonTypography: React.FC<SubnavButtonTypographyProps> = ({
+  textLevel,
+  ...restProps
+}: SubnavButtonTypographyProps) => {
   if (textLevel === 1) {
     return <Subhead weight="regular" {...restProps} />;
   }
 
   return (
     <Caption
-      level={textLevel === 2 ? '1' : '2'}
+      level={textLevel === 2 ? "1" : "2"}
       weight="regular"
       {...restProps}
     />
   );
 };
 
-export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (props: SubnavigationButtonProps) => {
+export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (
+  props: SubnavigationButtonProps
+) => {
   const platform = usePlatform();
   const {
     size,
@@ -63,16 +69,18 @@ export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (props: S
       hasActive={false}
       focusVisibleMode="outside"
       vkuiClass={classNames(
-        getClassName('SubnavigationButton', platform),
+        getClassName("SubnavigationButton", platform),
         `SubnavigationButton--${size}`,
         {
-          'SubnavigationButton--selected': selected,
-        },
+          "SubnavigationButton--selected": selected,
+        }
       )}
       aria-label={getTitleFromChildren(children)}
     >
       <span vkuiClass="SubnavigationButton__in">
-        {hasReactNode(before) && <span vkuiClass="SubnavigationButton__before">{before}</span>}
+        {hasReactNode(before) && (
+          <span vkuiClass="SubnavigationButton__before">{before}</span>
+        )}
         <SubnavigationButtonTypography
           textLevel={textLevel}
           vkuiClass="SubnavigationButton__label"
@@ -80,14 +88,18 @@ export const SubnavigationButton: React.FC<SubnavigationButtonProps> = (props: S
         >
           {children}
         </SubnavigationButtonTypography>
-        {hasReactNode(after) && <span vkuiClass="SubnavigationButton__after">{after}</span>}
-        {expandable && <Icon16Dropdown vkuiClass="SubnavigationButton__expandableIcon" />}
+        {hasReactNode(after) && (
+          <span vkuiClass="SubnavigationButton__after">{after}</span>
+        )}
+        {expandable && (
+          <Icon16Dropdown vkuiClass="SubnavigationButton__expandableIcon" />
+        )}
       </span>
     </Tappable>
   );
 };
 
 SubnavigationButton.defaultProps = {
-  size: 'm',
+  size: "m",
   textLevel: 1,
 };