@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/View/View.tsx

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
 import { transitionEvent, animationEvent } from "../../lib/supportEvents";
-import { getClassName } from "../../helpers/getClassName";
-import { IOS, ANDROID, VKCOM } from "../../lib/platform";
+import { IOS } from "../../lib/platform";
 import { Touch, TouchEvent } from "../Touch/Touch";
 import { HasPlatform } from "../../types";
 import { withPlatform } from "../../hoc/withPlatform";
@@ -96,7 +95,7 @@ export interface ViewState {
   nextPanel: string | null;
 
   swipingBack: boolean;
-  swipebackStartX: number;
+  swipeBackStartX: number;
   swipeBackShift: number;
   swipeBackNextPanel: string | null;
   swipeBackPrevPanel: string | null;
@@ -106,7 +105,8 @@ export interface ViewState {
 }
 
 const warn = warnOnce("View");
-class View extends React.Component<ViewProps & DOMProps, ViewState> {
+
+class ViewComponent extends React.Component<ViewProps & DOMProps, ViewState> {
   constructor(props: ViewProps) {
     super(props);
 
@@ -120,7 +120,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
       nextPanel: null,
 
       swipingBack: false,
-      swipebackStartX: 0,
+      swipeBackStartX: 0,
       swipeBackShift: 0,
       swipeBackNextPanel: null,
       swipeBackPrevPanel: null,
@@ -216,9 +216,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
           }
           this.animationFinishTimeout = setTimeout(
             this.transitionEndHandler,
-            this.props.platform === ANDROID || this.props.platform === VKCOM
-              ? 300
-              : 600
+            this.props.platform === IOS ? 600 : 300
           );
         }
       }
@@ -240,7 +238,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
           swipeBackNextPanel: null,
           swipingBack: false,
           swipeBackResult: null,
-          swipebackStartX: 0,
+          swipeBackStartX: 0,
           swipeBackShift: 0,
           activePanel: nextPanel,
           visiblePanels: [nextPanel],
@@ -326,9 +324,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
       }
       this.transitionFinishTimeout = setTimeout(
         eventHandler,
-        this.props.platform === ANDROID || this.props.platform === VKCOM
-          ? 300
-          : 600
+        this.props.platform === IOS ? 600 : 300
       );
     }
   }
@@ -411,7 +407,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
       swipeBackNextPanel: null,
       swipingBack: false,
       swipeBackResult: null,
-      swipebackStartX: 0,
+      swipeBackStartX: 0,
       swipeBackShift: 0,
     });
   }
@@ -452,7 +448,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
         }
         this.setState({
           swipingBack: true,
-          swipebackStartX: e.startX,
+          swipeBackStartX: e.startX,
           swipeBackPrevPanel: this.state.activePanel,
           swipeBackNextPanel: this.props.history!.slice(-2)[0],
         });
@@ -463,7 +459,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
           swipeBackShift = 0;
         } else if (
           e.shiftX >
-          this.window.innerWidth - this.state.swipebackStartX
+          this.window.innerWidth - this.state.swipeBackStartX
         ) {
           swipeBackShift = this.window?.innerWidth;
         } else {
@@ -483,7 +479,7 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
         this.onSwipeBackSuccess();
       } else if (
         speed > 250 ||
-        this.state.swipebackStartX + this.state.swipeBackShift >
+        this.state.swipeBackStartX + this.state.swipeBackShift >
           this.window.innerWidth / 2
       ) {
         this.setState({ swipeBackResult: SwipeBackResults.success });
@@ -581,17 +577,17 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
     const disableAnimation = this.shouldDisableTransitionMotion();
 
-    const modifiers = {
-      "View--animated": !disableAnimation && animated,
-      "View--swiping-back": !disableAnimation && this.state.swipingBack,
-      "View--no-motion": disableAnimation,
-    };
-
     return (
       <Touch
         Component="section"
         {...restProps}
-        vkuiClass={classNames(getClassName("View", platform), modifiers)}
+        vkuiClass={classNames(
+          "View",
+          platform === IOS && "View--ios",
+          !disableAnimation && animated && "View--animated",
+          !disableAnimation && this.state.swipingBack && "View--swiping-back",
+          disableAnimation && "View--no-motion"
+        )}
         onMoveX={this.onMoveX}
         onEnd={this.onEnd}
       >
@@ -609,20 +605,20 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
 
             return (
               <div
-                // eslint-disable-next-line vkui/no-object-expression-in-arguments
-                vkuiClass={classNames("View__panel", {
-                  "View__panel--active": panelId === activePanel,
-                  "View__panel--prev": panelId === prevPanel,
-                  "View__panel--next": panelId === nextPanel,
-                  "View__panel--swipe-back-prev":
-                    panelId === swipeBackPrevPanel,
-                  "View__panel--swipe-back-next":
-                    panelId === swipeBackNextPanel,
-                  "View__panel--swipe-back-success":
-                    swipeBackResult === SwipeBackResults.success,
-                  "View__panel--swipe-back-failed":
-                    swipeBackResult === SwipeBackResults.fail,
-                })}
+                vkuiClass={classNames(
+                  "View__panel",
+                  panelId === activePanel && "View__panel--active",
+                  panelId === prevPanel && "View__panel--prev",
+                  panelId === nextPanel && "View__panel--next",
+                  panelId === swipeBackPrevPanel &&
+                    "View__panel--swipe-back-prev",
+                  panelId === swipeBackNextPanel &&
+                    "View__panel--swipe-back-next",
+                  swipeBackResult === SwipeBackResults.success &&
+                    "View__panel--swipe-back-success",
+                  swipeBackResult === SwipeBackResults.fail &&
+                    "View__panel--swipe-back-failed"
+                )}
                 onAnimationEnd={
                   isTransitionTarget ? this.transitionEndHandler : undefined
                 }
@@ -661,11 +657,13 @@ class View extends React.Component<ViewProps & DOMProps, ViewState> {
   }
 }
 
-// eslint-disable-next-line import/no-default-export
-export default withContext(
+/**
+ * @see https://vkcom.github.io/VKUI/#/View
+ */
+export const View = withContext(
   withContext(
     withContext(
-      withPlatform(withDOM<ViewProps>(View)),
+      withPlatform(withDOM<ViewProps>(ViewComponent)),
       SplitColContext,
       "splitCol"
     ),
@@ -675,3 +673,5 @@ export default withContext(
   ScrollContext,
   "scroll"
 );
+
+View.displayName = "View";

package/src/components/WriteBar/WriteBar.tsx

@@ -31,6 +31,9 @@ export interface WriteBarProps
   children?: never;
 }
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/WriteBar
+ */
 export const WriteBar: React.FC<WriteBarProps> = (props: WriteBarProps) => {
   const platform = usePlatform();
   const {

package/src/components/WriteBarIcon/WriteBarIcon.tsx

@@ -11,8 +11,8 @@ import { usePlatform } from "../../hooks/usePlatform";
 import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { IOS } from "../../lib/platform";
-import Counter from "../Counter/Counter";
-import Tappable from "../Tappable/Tappable";
+import { Counter } from "../Counter/Counter";
+import { Tappable } from "../Tappable/Tappable";
 import { warnOnce } from "../../lib/warnOnce";
 import { hasReactNode } from "../../lib/utils";
 import "./WriteBarIcon.css";
@@ -37,6 +37,9 @@ export interface WriteBarIconProps
 const warn = warnOnce("WriteBarIcon");
 const IS_DEV = process.env.NODE_ENV === "development";
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/WriteBarIcon
+ */
 export const WriteBarIcon: React.FC<WriteBarIconProps> = ({
   mode,
   children,

package/src/hooks/useAdaptivity.ts

@@ -3,10 +3,25 @@ import {
   AdaptivityContext,
   AdaptivityProps,
   AdaptivityContextInterface,
+  ViewWidth,
+  ViewHeight,
 } from "../components/AdaptivityProvider/AdaptivityContext";
+import { usePlatform } from "./usePlatform";
+import { VKCOM } from "../lib/platform";
 
 export type { AdaptivityProps };
 
 export const useAdaptivity = (): AdaptivityContextInterface => {
   return React.useContext(AdaptivityContext);
 };
+
+export const useAdaptivityIsDesktop = (): boolean => {
+  const platform = usePlatform();
+  const { viewWidth, viewHeight, hasMouse } = useAdaptivity();
+
+  return (
+    (viewWidth >= ViewWidth.SMALL_TABLET &&
+      (hasMouse || viewHeight >= ViewHeight.MEDIUM)) ||
+    platform === VKCOM
+  );
+};

package/src/hooks/useKeyboard.ts

@@ -4,7 +4,6 @@ import { useGlobalEventListener } from "./useGlobalEventListener";
 
 interface SoftwareKeyboardState {
   isOpened: boolean;
-  isPrecise: boolean;
 }
 
 /**
@@ -29,35 +28,19 @@ const eventOptions = {
 };
 
 export function useKeyboard(): SoftwareKeyboardState {
-  const { window, document } = useDOM();
+  const { document } = useDOM();
 
   const [isOpened, setIsOpened] = React.useState(false);
-  const [isPrecise, setIsPrecise] = React.useState(false);
-
-  const transitionalTimeout = React.useRef<ReturnType<
-    typeof setTimeout
-  > | null>(null);
 
   const onFocus = React.useCallback(
     (event: FocusEvent | true) => {
-      if (transitionalTimeout.current) {
-        clearTimeout(transitionalTimeout.current);
-      }
-
       const isOpened =
         (event === true || event.type === "focusin") &&
         (document?.activeElement?.tagName === "INPUT" ||
           document?.activeElement?.tagName === "TEXTAREA");
       setIsOpened(isOpened);
-      setIsPrecise(false);
-
-      // Ожидаем прохождение анимации раскрытия клавиатуры
-      transitionalTimeout.current = setTimeout(() => {
-        setIsOpened(isOpened);
-        setIsPrecise(getPreciseKeyboardState(window));
-      }, 300);
     },
-    [document?.activeElement?.tagName, window]
+    [document?.activeElement?.tagName]
   );
 
   /**
@@ -71,5 +54,5 @@ export function useKeyboard(): SoftwareKeyboardState {
   useGlobalEventListener(document, "focusout", onFocus, eventOptions);
   useGlobalEventListener(document, "focusin", onFocus, eventOptions);
 
-  return { isOpened, isPrecise };
+  return { isOpened };
 }

package/src/hooks/usePrevious.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+
+export function usePrevious<T>(value: T): T | undefined {
+  const ref = React.useRef<T | undefined>();
+
+  React.useEffect(() => {
+    ref.current = value;
+  });
+
+  return ref.current;
+}

package/src/hooks/useWaitTransitionFinish.ts

@@ -6,27 +6,30 @@ export const useWaitTransitionFinish = () => {
   const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
   const { document } = useDOM();
 
-  const waitTransitionFinish = (
-    element: HTMLElement | null,
-    eventHandler: VoidFunction,
-    durationFallback: number
-  ) => {
-    if (element) {
-      if (
-        !document?.hidden &&
-        transitionEvent.supported &&
-        transitionEvent.name
-      ) {
-        element.removeEventListener(transitionEvent.name, eventHandler);
-        element.addEventListener(transitionEvent.name, eventHandler);
-      } else {
-        if (timeoutRef?.current) {
-          clearTimeout(timeoutRef.current);
+  const waitTransitionFinish = React.useCallback(
+    (
+      element: HTMLElement | null,
+      eventHandler: VoidFunction,
+      durationFallback: number
+    ) => {
+      if (element) {
+        if (
+          !document?.hidden &&
+          transitionEvent.supported &&
+          transitionEvent.name
+        ) {
+          element.removeEventListener(transitionEvent.name, eventHandler);
+          element.addEventListener(transitionEvent.name, eventHandler);
+        } else {
+          if (timeoutRef?.current) {
+            clearTimeout(timeoutRef.current);
+          }
+          timeoutRef.current = setTimeout(eventHandler, durationFallback);
         }
-        timeoutRef.current = setTimeout(eventHandler, durationFallback);
       }
-    }
-  };
+    },
+    [document, timeoutRef]
+  );
 
   return {
     waitTransitionFinish,