@vkontakte/vkui 4.30.0 → 4.33.0

package/src/components/AppRoot/ScrollContext.tsx

@@ -0,0 +1,261 @@
+import * as React from "react";
+import { noop } from "../../lib/utils";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { clamp } from "../../helpers/math";
+import { useDOM } from "../../lib/dom";
+
+const clearDisableScrollStyle = (node: HTMLElement) => {
+  Object.assign(node.style, {
+    position: "",
+    top: "",
+    left: "",
+    right: "",
+    overflowY: "",
+    overflowX: "",
+  });
+};
+
+export interface ScrollContextInterface {
+  getScroll(): { x: number; y: number };
+  scrollTo(x?: number, y?: number): void;
+  isScrollLock: boolean;
+  enableScrollLock(): void;
+  disableScrollLock(): void;
+  beforeScrollLockFnSetRef?: React.RefObject<Set<() => void>>;
+}
+
+export const ScrollContext = React.createContext<ScrollContextInterface>({
+  getScroll: () => ({ x: 0, y: 0 }),
+  scrollTo: noop,
+  isScrollLock: false,
+  enableScrollLock: noop,
+  disableScrollLock: noop,
+});
+
+export const useScroll = () => React.useContext(ScrollContext);
+
+export interface ScrollControllerProps {
+  elRef: React.RefObject<HTMLElement>;
+}
+
+export const GlobalScrollController: React.FC<ScrollControllerProps> = ({
+  children,
+}) => {
+  const { window, document } = useDOM();
+  const [isScrollLock, setScrollLock] = React.useState(false);
+  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
+
+  const getScroll = React.useCallback<ScrollContextInterface["getScroll"]>(
+    () => ({ x: window!.pageXOffset, y: window!.pageYOffset }),
+    [window]
+  );
+  const scrollTo = React.useCallback<ScrollContextInterface["scrollTo"]>(
+    (x = 0, y = 0) => {
+      // Some iOS versions do not normalize scroll — do it manually.
+      window!.scrollTo(
+        x ? clamp(x, 0, document!.body.scrollWidth - window!.innerWidth) : 0,
+        y ? clamp(y, 0, document!.body.scrollHeight - window!.innerHeight) : 0
+      );
+    },
+    [document, window]
+  );
+
+  const enableScrollLock = React.useCallback<
+    ScrollContextInterface["enableScrollLock"]
+  >(() => {
+    beforeScrollLockFnSetRef.current.forEach((fn) => {
+      fn();
+    });
+
+    const scrollY = window!.pageYOffset;
+    const scrollX = window!.pageXOffset;
+    const overflowY =
+      window!.innerWidth > document!.documentElement.clientWidth
+        ? "scroll"
+        : "";
+    const overflowX =
+      window!.innerHeight > document!.documentElement.clientHeight
+        ? "scroll"
+        : "";
+
+    Object.assign(document!.body.style, {
+      position: "fixed",
+      top: `-${scrollY}px`,
+      left: `-${scrollX}px`,
+      right: "0",
+      overflowY,
+      overflowX,
+    });
+    setScrollLock(true);
+  }, [document, window]);
+
+  const disableScrollLock = React.useCallback<
+    ScrollContextInterface["disableScrollLock"]
+  >(() => {
+    const scrollY = document!.body.style.top;
+    const scrollX = document!.body.style.left;
+
+    clearDisableScrollStyle(document!.body);
+    window!.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+    setScrollLock(false);
+  }, [document, window]);
+
+  const scrollController = React.useMemo<ScrollContextInterface>(
+    () => ({
+      getScroll,
+      scrollTo,
+      isScrollLock,
+      disableScrollLock,
+      enableScrollLock,
+
+      beforeScrollLockFnSetRef: beforeScrollLockFnSetRef,
+    }),
+    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock]
+  );
+
+  return (
+    <ScrollContext.Provider value={scrollController}>
+      {children}
+    </ScrollContext.Provider>
+  );
+};
+
+export const ElementScrollController: React.FC<ScrollControllerProps> = ({
+  elRef,
+  children,
+}) => {
+  const [isScrollLock, setScrollLock] = React.useState(false);
+  const beforeScrollLockFnSetRef = React.useRef<Set<() => void>>(new Set());
+
+  const getScroll = React.useCallback<ScrollContextInterface["getScroll"]>(
+    () => ({
+      x: elRef.current?.scrollLeft ?? 0,
+      y: elRef.current?.scrollTop ?? 0,
+    }),
+    [elRef]
+  );
+  const scrollTo = React.useCallback<ScrollContextInterface["scrollTo"]>(
+    (x = 0, y = 0) => {
+      const el = elRef.current;
+      // Some iOS versions do not normalize scroll — do it manually.
+      el?.scrollTo(
+        x ? clamp(x, 0, el.scrollWidth - el.clientWidth) : 0,
+        y ? clamp(y, 0, el.scrollHeight - el.clientHeight) : 0
+      );
+    },
+    [elRef]
+  );
+
+  const enableScrollLock = React.useCallback<
+    ScrollContextInterface["enableScrollLock"]
+  >(() => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+    beforeScrollLockFnSetRef.current.forEach((fn) => {
+      fn();
+    });
+
+    const scrollY = el.scrollTop;
+    const scrollX = el.scrollLeft;
+    const overflowY = el.scrollWidth > el.clientWidth ? "scroll" : "";
+    const overflowX = el.scrollHeight > el.clientHeight ? "scroll" : "";
+
+    Object.assign(el.style, {
+      position: "absolute",
+      top: `-${scrollY}px`,
+      left: `-${scrollX}px`,
+      right: "0",
+      overflowY,
+      overflowX,
+    });
+    setScrollLock(true);
+  }, [elRef]);
+
+  const disableScrollLock = React.useCallback<
+    ScrollContextInterface["disableScrollLock"]
+  >(() => {
+    const el = elRef.current;
+    if (!el) {
+      return;
+    }
+
+    const scrollY = el.style.top;
+    const scrollX = el.style.left;
+
+    clearDisableScrollStyle(el);
+    el.scrollTo(-parseInt(scrollX || "0"), -parseInt(scrollY || "0"));
+    setScrollLock(false);
+  }, [elRef]);
+
+  const scrollController = React.useMemo<ScrollContextInterface>(
+    () => ({
+      getScroll,
+      scrollTo,
+      isScrollLock,
+      disableScrollLock,
+      enableScrollLock,
+      beforeScrollLockFnSetRef,
+    }),
+    [getScroll, scrollTo, isScrollLock, disableScrollLock, enableScrollLock]
+  );
+
+  return (
+    <ScrollContext.Provider value={scrollController}>
+      {children}
+    </ScrollContext.Provider>
+  );
+};
+
+/**
+ * Вызывает функцию effect, до блокировки прокрутки
+ * @param effect функция, которая может возвращать функцию очистки
+ * @param deps effect обновится только при изменении значений в списке.
+ */
+export const useScrollLockEffect = (
+  effect: React.EffectCallback,
+  deps: React.DependencyList
+) => {
+  const destructorRef = React.useRef<ReturnType<React.EffectCallback>>(noop);
+  const { isScrollLock, beforeScrollLockFnSetRef } = useScroll();
+
+  // Изменяем effectCallback только при изменении deps
+  const effectCallback = React.useCallback(() => {
+    destructorRef.current = effect();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+
+  // Добавляем effectCallback в список функций, которые необходимо вызвать
+  // до блокировки
+  React.useEffect(() => {
+    const beforeSet = beforeScrollLockFnSetRef?.current;
+    if (!beforeSet) {
+      return noop;
+    }
+
+    beforeSet.add(effectCallback);
+
+    return () => {
+      beforeSet.delete(effectCallback);
+    };
+  }, [beforeScrollLockFnSetRef, effectCallback]);
+
+  // Вызываем сбрасывающую функцию, после отключения блокировки
+  React.useEffect(() => {
+    if (!isScrollLock && destructorRef.current) {
+      destructorRef.current();
+    }
+  }, [isScrollLock]);
+};
+
+export const useScrollLock = (enabled = true) => {
+  const { enableScrollLock, disableScrollLock } = useScroll();
+  useIsomorphicLayoutEffect(() => {
+    if (enabled) {
+      enableScrollLock();
+      return disableScrollLock;
+    }
+    return noop;
+  }, [enableScrollLock, disableScrollLock, enabled]);
+};

package/src/components/AppearanceProvider/AppearanceProvider.tsx

@@ -32,6 +32,9 @@ export const generateVKUITokensClassName = (
   return `vkui--${tokensPlatform}--${appearance}`;
 };
 
+/**
+ * @see https://vkcom.github.io/VKUI/#/AppearanceProvider
+ */
 export const AppearanceProvider: React.FC<AppearanceProviderProps> = ({
   children,
   appearance = "light",

package/src/components/Avatar/Avatar.css

@@ -1,7 +1,7 @@
 .Avatar {
   flex-shrink: 0;
   box-sizing: border-box;
-  color: var(--placeholder_icon_background);
+  color: var(--placeholder_icon_background, var(--vkui--color_background));
   background: currentColor;
   background-size: cover;
   position: relative;
@@ -21,7 +21,8 @@
 }
 
 .Avatar__children,
-.Avatar--shadow::after {
+.Avatar--shadow::after,
+.Avatar__badge--shadow::before {
   position: absolute;
   left: 0;
   top: 0;
@@ -32,7 +33,8 @@
 
 .Avatar--shadow::after {
   content: "";
-  box-shadow: inset 0 0 0 var(--thin-border) var(--image_border);
+  box-shadow: inset 0 0 0 var(--thin-border)
+    var(--image_border, var(--vkui--color_image_border_alpha));
 }
 
 .Avatar__overlay {
@@ -52,11 +54,13 @@
 }
 
 .Avatar__overlay--light {
-  background-color: rgba(255, 255, 255, 0.85);
+  color: var(--accent, var(--vkui--color_icon_accent));
+  background-color: var(--vkui--color_avatar_overlay_inverse_alpha);
 }
 
 .Avatar__overlay--dark {
-  background-color: rgba(0, 0, 0, 0.6);
+  color: var(--button_commerce_foreground, var(--vkui--color_icon_contrast));
+  background-color: var(--vkui--color_avatar_overlay);
 }
 
 .Avatar__overlay--visible {
@@ -65,14 +69,14 @@
 
 .Avatar__overlay--focus-visible {
   opacity: 1;
-  box-shadow: 0 0 0 2px var(--accent);
+  box-shadow: 0 0 0 2px var(--accent, var(--vkui--color_stroke_accent));
 }
 
 .Avatar__children {
   display: flex;
   align-items: center;
   justify-content: center;
-  color: var(--icon_secondary);
+  color: var(--icon_secondary, var(--vkui--color_icon_secondary));
 }
 
 .Avatar__badge {
@@ -88,20 +92,27 @@
   right: 14%;
 }
 
-.Avatar__badge--shadow {
-  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.04))
-    drop-shadow(0 4px 4px rgba(0, 0, 0, 0.08));
+.Avatar__badge--shadow::before {
+  content: "";
+  border-radius: 50%;
+  box-shadow: var(--vkui--elevation1);
 }
 
 .Avatar__badge-online {
-  color: #4bb34b;
-  background-color: var(--background_content);
+  color: var(--button_commerce_background, var(--vkui--color_accent_green));
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_content)
+  );
   border-radius: 50%;
 }
 
 .Avatar__badge-online-mobile {
-  color: #4bb34b;
-  background-color: var(--background_content);
+  color: var(--button_commerce_background, var(--vkui--color_accent_green));
+  background-color: var(
+    --background_content,
+    var(--vkui--color_background_content)
+  );
   border-radius: 3px;
   padding: 2px;
 }
@@ -109,26 +120,22 @@
 /**
  * .CellButton
  */
-.CellButton > .Avatar {
-  color: var(--button_muted_background);
-}
-
 .CellButton > .Avatar .Icon {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .CellButton--danger > .Avatar .Icon {
-  color: var(--destructive);
+  color: var(--destructive, var(--vkui--color_icon_negative));
 }
 
 /**
  * .PanelHeader
  */
-.PanelHeader__left .Avatar {
+.PanelHeader__before .Avatar {
   margin-left: 8px;
 }
 
-.PanelHeader__right .Avatar {
+.PanelHeader__after .Avatar {
   margin-right: 8px;
 }
 

package/src/components/Avatar/Avatar.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
 import { Icon12Circle, Icon12OnlineMobile } from "@vkontakte/icons";
-import { getClassName } from "../../helpers/getClassName";
 import { classNames } from "../../lib/classNames";
-import { usePlatform } from "../../hooks/usePlatform";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
-import Tappable from "../Tappable/Tappable";
+import { Tappable } from "../Tappable/Tappable";
 import { HasRef, HasRootRef } from "../../types";
 import "./Avatar.css";
 
@@ -30,7 +28,10 @@ export interface AvatarProps
 export const AVATAR_DEFAULT_SIZE = 48;
 export const AVATAR_DEFAULT_SHADOW = true;
 
-const Avatar: React.FC<AvatarProps> = ({
+/**
+ * @see https://vkcom.github.io/VKUI/#/Avatar
+ */
+export const Avatar: React.FC<AvatarProps> = ({
   alt,
   crossOrigin,
   decoding,
@@ -58,7 +59,6 @@ const Avatar: React.FC<AvatarProps> = ({
   onClick,
   ...restProps
 }: AvatarProps) => {
-  const platform = usePlatform();
   const { hasMouse } = useAdaptivity();
   const [failedImage, setFailedImage] = React.useState(false);
 
@@ -98,7 +98,7 @@ const Avatar: React.FC<AvatarProps> = ({
       {...restProps}
       // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
-        getClassName("Avatar", platform),
+        "Avatar",
         `Avatar--type-${mode}`,
         `Avatar--sz-${size}`,
         {
@@ -181,6 +181,3 @@ const Avatar: React.FC<AvatarProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Avatar;