@vkontakte/vkui 4.23.0 → 4.24.0

package/src/components/SliderSwitch/SliderSwitch.tsx

@@ -1,35 +1,40 @@
-import * as React from 'react';
-import SliderSwitchButton from './SliderSwitchButton';
-import { classNames } from '../../lib/classNames';
-import { HasPlatform } from '../../types';
-import './SliderSwitch.css';
+import * as React from "react";
+import SliderSwitchButton from "./SliderSwitchButton";
+import { classNames } from "../../lib/classNames";
+import { HasPlatform } from "../../types";
+import "./SliderSwitch.css";
 
 export interface SliderSwitchOptionInterface {
   name: string;
   value: string | number;
 }
 
-export interface SliderSwitchProps extends React.HTMLAttributes<HTMLDivElement>, HasPlatform {
+export interface SliderSwitchProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    HasPlatform {
   options: Array<{
     name: string;
     value: string | number;
   }>;
-  activeValue?: SliderSwitchOptionInterface['value'];
+  activeValue?: SliderSwitchOptionInterface["value"];
   name?: string;
-  onSwitch?: (value: SliderSwitchOptionInterface['value']) => void;
+  onSwitch?: (value: SliderSwitchOptionInterface["value"]) => void;
 }
 
 interface SliderSwitchState {
-  activeValue: SliderSwitchOptionInterface['value'];
+  activeValue: SliderSwitchOptionInterface["value"];
   hoveredOptionId: number;
 }
 
-export default class SliderSwitch extends React.Component<SliderSwitchProps, SliderSwitchState> {
+export default class SliderSwitch extends React.Component<
+  SliderSwitchProps,
+  SliderSwitchState
+> {
   public constructor(props: SliderSwitchProps) {
     super(props);
 
     this.state = {
-      activeValue: props.activeValue ?? '',
+      activeValue: props.activeValue ?? "",
       hoveredOptionId: -1,
     };
 
@@ -38,20 +43,26 @@ export default class SliderSwitch extends React.Component<SliderSwitchProps, Sli
   }
 
   static defaultProps = {
-    options: [{ name: '', value: '' }, { name: '', value: '' }],
+    options: [
+      { name: "", value: "" },
+      { name: "", value: "" },
+    ],
   };
 
   firstButton: React.RefObject<HTMLDivElement>;
   secondButton: React.RefObject<HTMLDivElement>;
 
-  onSwitch = (value: SliderSwitchOptionInterface['value']) => {
+  onSwitch = (value: SliderSwitchOptionInterface["value"]) => {
     const { onSwitch } = this.props;
 
-    this.setState(() => ({
-      activeValue: value,
-    }), () => {
-      onSwitch && onSwitch(value);
-    });
+    this.setState(
+      () => ({
+        activeValue: value,
+      }),
+      () => {
+        onSwitch && onSwitch(value);
+      }
+    );
   };
 
   handleFirstClick = () => {
@@ -69,13 +80,13 @@ export default class SliderSwitch extends React.Component<SliderSwitchProps, Sli
   };
 
   handleFirstHover = () => {
-    this.setState(() =>({
+    this.setState(() => ({
       hoveredOptionId: 0,
     }));
   };
 
   handleSecondHover = () => {
-    this.setState(() =>({
+    this.setState(() => ({
       hoveredOptionId: 1,
     }));
   };
@@ -87,7 +98,11 @@ export default class SliderSwitch extends React.Component<SliderSwitchProps, Sli
   };
 
   switchByKey = (event: React.KeyboardEvent) => {
-    if (event.key !== 'Enter' && event.key !== 'Spacebar' && event.key !== ' ') {
+    if (
+      event.key !== "Enter" &&
+      event.key !== "Spacebar" &&
+      event.key !== " "
+    ) {
       return;
     }
     event.preventDefault();
@@ -105,8 +120,14 @@ export default class SliderSwitch extends React.Component<SliderSwitchProps, Sli
     }
   };
 
-  static getDerivedStateFromProps(nextProps: SliderSwitchProps, prevState: SliderSwitchState) {
-    if (nextProps.activeValue && nextProps.activeValue !== prevState.activeValue) {
+  static getDerivedStateFromProps(
+    nextProps: SliderSwitchProps,
+    prevState: SliderSwitchState
+  ) {
+    if (
+      nextProps.activeValue &&
+      nextProps.activeValue !== prevState.activeValue
+    ) {
       return {
         activeValue: nextProps.activeValue,
       };
@@ -116,7 +137,13 @@ export default class SliderSwitch extends React.Component<SliderSwitchProps, Sli
   }
 
   public render() {
-    const { name, options, activeValue: _activeValue, onSwitch, ...restProps } = this.props;
+    const {
+      name,
+      options,
+      activeValue: _activeValue,
+      onSwitch,
+      ...restProps
+    } = this.props;
     const { activeValue, hoveredOptionId } = this.state;
 
     const [firstOption, secondOption] = options;
@@ -130,16 +157,15 @@ export default class SliderSwitch extends React.Component<SliderSwitchProps, Sli
         onKeyDown={this.switchByKey}
         onMouseLeave={this.resetFocusedOption}
       >
-        {!firstActive && !secondActive &&
+        {!firstActive && !secondActive && (
           <div vkuiClass="SliderSwitch__border" />
-        }
-        <div vkuiClass={classNames(
-          'SliderSwitch__slider',
-          {
-            ['SliderSwitch--firstActive']: firstActive,
-            ['SliderSwitch--secondActive']: secondActive,
-          },
-        )} />
+        )}
+        <div
+          vkuiClass={classNames("SliderSwitch__slider", {
+            ["SliderSwitch--firstActive"]: firstActive,
+            ["SliderSwitch--secondActive"]: secondActive,
+          })}
+        />
         <input type="hidden" name={name} value={activeValue} />
         <SliderSwitchButton
           active={firstActive}

package/src/components/SliderSwitch/SliderSwitchButton.tsx

@@ -1,18 +1,22 @@
-import * as React from 'react';
-import Tappable from '../Tappable/Tappable';
-import { getClassName } from '../../helpers/getClassName';
-import { classNames } from '../../lib/classNames';
-import { HasRootRef } from '../../types';
-import { usePlatform } from '../../hooks/usePlatform';
-import Text from '../Typography/Text/Text';
-import './SliderSwitch.css';
+import * as React from "react";
+import Tappable from "../Tappable/Tappable";
+import { getClassName } from "../../helpers/getClassName";
+import { classNames } from "../../lib/classNames";
+import { HasRootRef } from "../../types";
+import { usePlatform } from "../../hooks/usePlatform";
+import Text from "../Typography/Text/Text";
+import "./SliderSwitch.css";
 
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLElement>, HasRootRef<HTMLElement> {
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLElement>,
+    HasRootRef<HTMLElement> {
   active?: boolean;
   hovered?: boolean;
 }
 
-const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (props: ButtonProps) => {
+const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (
+  props: ButtonProps
+) => {
   const { active, hovered, children, getRootRef, ...restProps } = props;
   const platform = usePlatform();
   const [focus, setFocus] = React.useState(false);
@@ -21,30 +25,28 @@ const SliderSwitchButton: React.FunctionComponent<ButtonProps> = (props: ButtonP
     setFocus(!focus);
   };
 
-  return <Tappable {...restProps}
-    vkuiClass={
-      classNames(
-        getClassName('SliderSwitch__button', platform),
-        {
-          ['SliderSwitch__button--active']: active,
-          ['SliderSwitch__button--hover']: !active && hovered,
-          ['SliderSwitch__button--activeHover']: active && hovered,
-          ['SliderSwitch__button--focus']: focus && !hovered,
-        },
-      )
-    }
-    Component="button"
-    type="button"
-    getRootRef={getRootRef}
-    aria-pressed={active}
-    onFocus={toggleFocus}
-    onBlur={toggleFocus}
-    tabIndex={0}
-    hasActive={false}
-    hoverMode="opacity"
-  >
-    <Text weight="medium">{children}</Text>
-  </Tappable>;
+  return (
+    <Tappable
+      {...restProps}
+      vkuiClass={classNames(getClassName("SliderSwitch__button", platform), {
+        ["SliderSwitch__button--active"]: active,
+        ["SliderSwitch__button--hover"]: !active && hovered,
+        ["SliderSwitch__button--activeHover"]: active && hovered,
+        ["SliderSwitch__button--focus"]: focus && !hovered,
+      })}
+      Component="button"
+      type="button"
+      getRootRef={getRootRef}
+      aria-pressed={active}
+      onFocus={toggleFocus}
+      onBlur={toggleFocus}
+      tabIndex={0}
+      hasActive={false}
+      hoverMode="opacity"
+    >
+      <Text weight="medium">{children}</Text>
+    </Tappable>
+  );
 };
 
 export default SliderSwitchButton;

package/src/components/Snackbar/Readme.md

@@ -12,8 +12,8 @@ class SnackBarExample extends React.Component {
     super(props);
 
     this.state = {
-      text: '',
-      snackbar: null
+      text: "",
+      snackbar: null,
     };
 
     this.openBaseWithAction = this.openBaseWithAction.bind(this);
@@ -22,48 +22,66 @@ class SnackBarExample extends React.Component {
   }
 
   componentDidMount() {
-    this.openBaseWithAction()
+    this.openBaseWithAction();
   }
 
-  openBaseWithAction () {
+  openBaseWithAction() {
     if (this.state.snackbar) return;
-    this.setState({ snackbar:
-      <Snackbar
-        onClose={() => this.setState({ snackbar: null })}
-        action="Поделиться"
-        onActionClick={() => this.setState({ text: 'Добавляем метку.' })}
-        before={<Avatar size={24} style={{ background: 'var(--accent)' }}><Icon16Done fill="#fff" width={14} height={14} /></Avatar>}
-      >
-        Ссылка скопирована
-      </Snackbar>
+    this.setState({
+      snackbar: (
+        <Snackbar
+          onClose={() => this.setState({ snackbar: null })}
+          action="Поделиться"
+          onActionClick={() => this.setState({ text: "Добавляем метку." })}
+          before={
+            <Avatar size={24} style={{ background: "var(--accent)" }}>
+              <Icon16Done fill="#fff" width={14} height={14} />
+            </Avatar>
+          }
+        >
+          Ссылка скопирована
+        </Snackbar>
+      ),
     });
   }
 
-  openVertical () {
+  openVertical() {
     if (this.state.snackbar) return;
-    this.setState({ snackbar:
-      <Snackbar
-        layout="vertical"
-        onClose={() => this.setState({ snackbar: null })}
-        action="Перейти в раздел «Понравилось»"
-        onActionClick={() => this.setState({ text: 'Открыта подробная информация.' })}
-        before={<Avatar size={24} style={{ background: 'var(--accent)' }}><Icon16Done fill="#fff" width={14} height={14} /></Avatar>}
-      >
-        Ссылка сохранена в закладки
-      </Snackbar>
+    this.setState({
+      snackbar: (
+        <Snackbar
+          layout="vertical"
+          onClose={() => this.setState({ snackbar: null })}
+          action="Перейти в раздел «Понравилось»"
+          onActionClick={() =>
+            this.setState({ text: "Открыта подробная информация." })
+          }
+          before={
+            <Avatar size={24} style={{ background: "var(--accent)" }}>
+              <Icon16Done fill="#fff" width={14} height={14} />
+            </Avatar>
+          }
+        >
+          Ссылка сохранена в закладки
+        </Snackbar>
+      ),
     });
   }
 
-  openWithAvatar () {
+  openWithAvatar() {
     if (this.state.snackbar) return;
-    this.setState({ snackbar:
-      <Snackbar
-        onClose={() => this.setState({ snackbar: null })}
-        onActionClick={() => this.setState({ text: 'Сообщение Ивану было отменено.' })}
-        after={<Avatar src={getAvatarUrl('user_wayshev')} size={32} />}
-      >
-        Отправлено Ивану Барышеву
-      </Snackbar>
+    this.setState({
+      snackbar: (
+        <Snackbar
+          onClose={() => this.setState({ snackbar: null })}
+          onActionClick={() =>
+            this.setState({ text: "Сообщение Ивану было отменено." })
+          }
+          after={<Avatar src={getAvatarUrl("user_wayshev")} size={32} />}
+        >
+          Отправлено Ивану Барышеву
+        </Snackbar>
+      ),
     });
   }
 
@@ -73,19 +91,29 @@ class SnackBarExample extends React.Component {
         <Panel id="example">
           <PanelHeader>Snackbar</PanelHeader>
           <Group>
-            <CellButton onClick={this.openBaseWithAction}>Уведомление с иконкой и кнопкой</CellButton>
-            <CellButton onClick={this.openVertical}>Вертикальное расположение</CellButton>
-            <CellButton onClick={this.openWithAvatar}>Уведомление с аватаркой</CellButton>
+            <CellButton onClick={this.openBaseWithAction}>
+              Уведомление с иконкой и кнопкой
+            </CellButton>
+            <CellButton onClick={this.openVertical}>
+              Вертикальное расположение
+            </CellButton>
+            <CellButton onClick={this.openWithAvatar}>
+              Уведомление с аватаркой
+            </CellButton>
           </Group>
 
-          {this.state.text && <Group><Div>{this.state.text}</Div></Group>}
+          {this.state.text && (
+            <Group>
+              <Div>{this.state.text}</Div>
+            </Group>
+          )}
 
           {this.state.snackbar}
         </Panel>
       </View>
-    )
+    );
   }
 }
 
-<SnackBarExample />
+<SnackBarExample />;
 ```

package/src/components/Snackbar/Snackbar.css

@@ -29,7 +29,7 @@
   display: flex;
   align-items: center;
   background: var(--modal_card_background);
-  box-shadow: 0 0 24px 0 rgba(0, 0, 0, .24), 0 0 2px 0 rgba(0, 0, 0, .08);
+  box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.24), 0 0 2px 0 rgba(0, 0, 0, 0.08);
 }
 
 .Snackbar__before {

package/src/components/Snackbar/Snackbar.tsx

@@ -1,20 +1,27 @@
-import * as React from 'react';
-import { Touch, TouchEvent } from '../Touch/Touch';
-import { classNames } from '../../lib/classNames';
-import { HasPlatform } from '../../types';
-import { getClassName } from '../../helpers/getClassName';
-import { ANDROID, VKCOM } from '../../lib/platform';
-import { rubber } from '../../lib/touch';
-import { withAdaptivity, AdaptivityProps, ViewWidth } from '../../hoc/withAdaptivity';
-import Text from '../Typography/Text/Text';
-import Button from '../Button/Button';
-import { AppRootPortal } from '../AppRoot/AppRootPortal';
-import { useWaitTransitionFinish } from '../../hooks/useWaitTransitionFinish';
-import { usePlatform } from '../../hooks/usePlatform';
-import { useTimeout } from '../../hooks/useTimeout';
-import './Snackbar.css';
-
-export interface SnackbarProps extends React.HTMLAttributes<HTMLElement>, HasPlatform, AdaptivityProps {
+import * as React from "react";
+import { Touch, TouchEvent } from "../Touch/Touch";
+import { classNames } from "../../lib/classNames";
+import { HasPlatform } from "../../types";
+import { getClassName } from "../../helpers/getClassName";
+import { ANDROID, VKCOM } from "../../lib/platform";
+import { rubber } from "../../lib/touch";
+import {
+  withAdaptivity,
+  AdaptivityProps,
+  ViewWidth,
+} from "../../hoc/withAdaptivity";
+import Text from "../Typography/Text/Text";
+import Button from "../Button/Button";
+import { AppRootPortal } from "../AppRoot/AppRootPortal";
+import { useWaitTransitionFinish } from "../../hooks/useWaitTransitionFinish";
+import { usePlatform } from "../../hooks/usePlatform";
+import { useTimeout } from "../../hooks/useTimeout";
+import "./Snackbar.css";
+
+export interface SnackbarProps
+  extends React.HTMLAttributes<HTMLElement>,
+    HasPlatform,
+    AdaptivityProps {
   /**
    * Название кнопки действия в уведомлении
    */
@@ -36,7 +43,7 @@ export interface SnackbarProps extends React.HTMLAttributes<HTMLElement>, HasPla
   /**
    * Варианты расположения кнопки
    */
-  layout?: 'vertical' | 'horizontal';
+  layout?: "vertical" | "horizontal";
   /**
    * Время в миллисекундах, через которое плашка скроется
    */
@@ -74,22 +81,29 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
   const bodyElRef = React.useRef<HTMLDivElement | null>(null);
   const innerElRef = React.useRef<HTMLDivElement | null>(null);
 
-  const animationFrameRef = React.useRef<ReturnType<typeof requestAnimationFrame> | null>(null);
+  const animationFrameRef = React.useRef<ReturnType<
+    typeof requestAnimationFrame
+  > | null>(null);
 
   const isDesktop = viewWidth >= ViewWidth.SMALL_TABLET;
-  const transitionFinishDurationFallback = platform === ANDROID || platform === VKCOM ? 400 : 320;
+  const transitionFinishDurationFallback =
+    platform === ANDROID || platform === VKCOM ? 400 : 320;
 
   const close = () => {
     setClosing(true);
-    waitTransitionFinish(innerElRef.current, () => {
-      onClose();
-    }, transitionFinishDurationFallback);
+    waitTransitionFinish(
+      innerElRef.current,
+      () => {
+        onClose();
+      },
+      transitionFinishDurationFallback
+    );
   };
 
   const handleActionClick: React.MouseEventHandler<HTMLElement> = (e) => {
     close();
 
-    if (action && typeof onActionClick === 'function') {
+    if (action && typeof onActionClick === "function") {
       onActionClick(e);
     }
   };
@@ -115,8 +129,13 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
       setTouched(true);
     }
 
-    shiftXPercentRef.current = shiftX / bodyElRef.current.offsetWidth * 100;
-    shiftXCurrentRef.current = rubber(shiftXPercentRef.current, 72, 1.2, platform === ANDROID || platform === VKCOM);
+    shiftXPercentRef.current = (shiftX / bodyElRef.current.offsetWidth) * 100;
+    shiftXCurrentRef.current = rubber(
+      shiftXPercentRef.current,
+      72,
+      1.2,
+      platform === ANDROID || platform === VKCOM
+    );
 
     setBodyTransform(shiftXCurrentRef.current);
   };
@@ -126,20 +145,28 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
 
     if (touched) {
       let shiftXCurrent = shiftXCurrentRef.current;
-      const expectTranslateY = shiftXCurrent / e.duration * 240 * 0.6;
+      const expectTranslateY = (shiftXCurrent / e.duration) * 240 * 0.6;
       shiftXCurrent = shiftXCurrent + expectTranslateY;
 
       if (isDesktop && shiftXCurrent <= -50) {
         closeTimeout.clear();
-        waitTransitionFinish(bodyElRef.current, () => {
-          onClose();
-        }, transitionFinishDurationFallback);
+        waitTransitionFinish(
+          bodyElRef.current,
+          () => {
+            onClose();
+          },
+          transitionFinishDurationFallback
+        );
         setBodyTransform(-120);
       } else if (!isDesktop && shiftXCurrent >= 50) {
         closeTimeout.clear();
-        waitTransitionFinish(bodyElRef.current, () => {
-          onClose();
-        }, transitionFinishDurationFallback);
+        waitTransitionFinish(
+          bodyElRef.current,
+          () => {
+            onClose();
+          },
+          transitionFinishDurationFallback
+        );
         setBodyTransform(120);
       } else {
         callback = () => {
@@ -157,17 +184,21 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
 
   React.useEffect(closeTimeout.set, []);
 
-  const resolvedLayout = after || isDesktop ? 'vertical' : layout;
+  const resolvedLayout = after || isDesktop ? "vertical" : layout;
 
   return (
     <AppRootPortal>
       <div
         {...restProps}
-        vkuiClass={classNames(getClassName('Snackbar', platform), `Snackbar--l-${resolvedLayout}`, {
-          'Snackbar--closing': closing,
-          'Snackbar--touched': touched,
-          'Snackbar--desktop': isDesktop,
-        })}
+        vkuiClass={classNames(
+          getClassName("Snackbar", platform),
+          `Snackbar--l-${resolvedLayout}`,
+          {
+            "Snackbar--closing": closing,
+            "Snackbar--touched": touched,
+            "Snackbar--desktop": isDesktop,
+          }
+        )}
       >
         <Touch
           vkuiClass="Snackbar__in"
@@ -177,24 +208,28 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
           onEnd={onTouchEnd}
         >
           <div vkuiClass="Snackbar__body" ref={bodyElRef}>
-            {before &&
-            <div vkuiClass="Snackbar__before">
-              {before}
-            </div>}
+            {before && <div vkuiClass="Snackbar__before">{before}</div>}
 
             <div vkuiClass="Snackbar__content">
-              <Text weight="regular" vkuiClass="Snackbar__content-text">{children}</Text>
-
-              {action &&
-              <Button align="left" hasHover={false} mode="tertiary" size="s" vkuiClass="Snackbar__action" onClick={handleActionClick}>
-                {action}
-              </Button>}
+              <Text weight="regular" vkuiClass="Snackbar__content-text">
+                {children}
+              </Text>
+
+              {action && (
+                <Button
+                  align="left"
+                  hasHover={false}
+                  mode="tertiary"
+                  size="s"
+                  vkuiClass="Snackbar__action"
+                  onClick={handleActionClick}
+                >
+                  {action}
+                </Button>
+              )}
             </div>
 
-            {after &&
-            <div vkuiClass="Snackbar__after">
-              {after}
-            </div>}
+            {after && <div vkuiClass="Snackbar__after">{after}</div>}
           </div>
         </Touch>
       </div>
@@ -202,11 +237,11 @@ const SnackbarComponent: React.FC<SnackbarProps> = (props: SnackbarProps) => {
   );
 };
 
-SnackbarComponent.displayName = 'Snackbar';
+SnackbarComponent.displayName = "Snackbar";
 
 SnackbarComponent.defaultProps = {
   duration: 4000,
-  layout: 'horizontal',
+  layout: "horizontal",
 };
 
 export const Snackbar = withAdaptivity(SnackbarComponent, {