npm - @vkontakte/vkui - Versions diffs - 4.33.4 → 4.34.0 - Mend

@vkontakte/vkui 4.33.4 → 4.34.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1594) hide show

package/src/components/ConfigProvider/ConfigProvider.tsx CHANGED Viewed

@@ -1,10 +1,9 @@
 import * as React from "react";
-import vkBridge, { AppearanceType } from "@vkontakte/vk-bridge";
+import { AppearanceType } from "@vkontakte/vk-bridge";
 import { canUseDOM, useDOM } from "../../lib/dom";
 import {
   ConfigProviderContext,
   ConfigProviderContextInterface,
-  WebviewType,
 } from "./ConfigProviderContext";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
@@ -20,7 +19,6 @@ import {
   generateVKUITokensClassName,
 } from "../AppearanceProvider/AppearanceProvider";
 import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
-import { platform as resolvePlatform } from "../../lib/platform";
 export interface ConfigProviderProps
   extends Partial<ConfigProviderContextInterface> {
@@ -33,6 +31,7 @@ export interface ConfigProviderProps
     Локаль ([список](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry))
    */
   locale?: string;
+  children?: React.ReactNode;
 }
 const warn = warnOnce("ConfigProvider");
@@ -71,17 +70,22 @@ const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
 /**
  * @see https://vkcom.github.io/VKUI/#/ConfigProvider
  */
-export const ConfigProvider: React.FC<ConfigProviderProps> = ({
-  children,
-  webviewType = WebviewType.VKAPPS,
-  isWebView = vkBridge.isWebView(),
-  transitionMotionEnabled = true,
-  platform = resolvePlatform(),
-  hasNewTokens = false,
-  appearance,
-  scheme,
-  locale = "ru",
-}) => {
+export const ConfigProvider = (props: ConfigProviderProps) => {
+  const parentLocale = React.useContext(LocaleProviderContext);
+  const parentConfig = React.useContext(ConfigProviderContext);
+  const {
+    children,
+    webviewType = parentConfig.webviewType,
+    isWebView = parentConfig.isWebView,
+    transitionMotionEnabled = parentConfig.transitionMotionEnabled,
+    platform = parentConfig.platform,
+    hasNewTokens = parentConfig.hasNewTokens,
+    appearance = parentConfig.appearance,
+    scheme,
+    locale = parentLocale ?? "ru",
+  } = props;
   const normalizedScheme = normalizeScheme({
     scheme,
     platform,
@@ -96,7 +100,8 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({
     }
     if (
       process.env.NODE_ENV === "development" &&
-      target?.hasAttribute("scheme")
+      target?.hasAttribute("scheme") &&
+      parentConfig.appearance === undefined // appearance не была вычислена в родительском конфиге, @deprecated будет удалено в 5.0.0
     ) {
       warn(
         '<body scheme> был установлен перед монтированием VKUI - вы не забыли scheme="inherit"?'
@@ -115,9 +120,11 @@ export const ConfigProvider: React.FC<ConfigProviderProps> = ({
       derivedAppearance
     );
+    // eslint-disable-next-line no-restricted-properties
     target?.classList.add(VKUITokensClassName);
     return () => {
+      // eslint-disable-next-line no-restricted-properties
       target?.classList.remove(VKUITokensClassName);
     };
   }, [platform, derivedAppearance]);

package/src/components/ConfigProvider/Readme.md CHANGED Viewed

	@@ -1 +1 @@
1	- Компонент для прокидывания конфига приложению. Помимо прочего, отвечает за установку [темы и платформы](#/PlatformsAndThemes).
1	+ Компонент для прокидывания конфига приложению. Помимо прочего, отвечает за установку [темы и платформы](https://vkcom.github.io/VKUI/#/PlatformsAndThemes).

package/src/components/CustomScrollView/CustomScrollView.css CHANGED Viewed

@@ -44,6 +44,11 @@
   user-select: none;
 }
+.CustomScrollView__trackerY--hidden {
+  opacity: 0;
+  transition: opacity 200ms;
+}
 .CustomScrollView__trackerY::before {
   content: "";
   opacity: 0.28;

package/src/components/CustomScrollView/CustomScrollView.tsx CHANGED Viewed

@@ -1,11 +1,16 @@
-import { DOMProps, useDOM } from "../../lib/dom";
 import * as React from "react";
-import { useExternRef } from "../../hooks/useExternRef";
+import { DOMProps, useDOM } from "../../lib/dom";
+import { classNames } from "../../lib/classNames";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { useExternRef } from "../../hooks/useExternRef";
 import { useEventListener } from "../../hooks/useEventListener";
+import {
+  TrackerOptionsProps,
+  useTrackerVisibility,
+} from "./useTrackerVisibility";
 import "./CustomScrollView.css";
-export interface CustomScrollViewProps extends DOMProps {
+export interface CustomScrollViewProps extends DOMProps, TrackerOptionsProps {
   windowResize?: boolean;
   boxRef?: React.Ref<HTMLDivElement>;
   className?: HTMLDivElement["className"];
@@ -17,6 +22,8 @@ export const CustomScrollView = ({
   children,
   boxRef: externalBoxRef,
   windowResize,
+  autoHideScrollbar = false,
+  autoHideScrollbarDelay,
 }: CustomScrollViewProps) => {
   const { document, window } = useDOM();
@@ -116,8 +123,22 @@ export const CustomScrollView = ({
     setScrollPositionFromTracker(position);
   };
+  const {
+    trackerVisible,
+    onTargetScroll,
+    onTrackerDragStart,
+    onTrackerDragStop,
+    onTrackerMouseEnter,
+    onTrackerMouseLeave,
+  } = useTrackerVisibility(autoHideScrollbar, autoHideScrollbarDelay);
   const onUp = (e: MouseEvent) => {
     e.preventDefault();
+    if (autoHideScrollbar) {
+      onTrackerDragStop();
+    }
     unsubscribe();
   };
@@ -126,6 +147,10 @@ export const CustomScrollView = ({
       return;
     }
+    if (autoHideScrollbar) {
+      onTargetScroll();
+    }
     setTrackerPositionFromScroll(boxRef.current.scrollTop);
   };
@@ -149,6 +174,10 @@ export const CustomScrollView = ({
     startY.current = e.clientY;
     trackerTop.current = lastTrackerTop.current;
+    if (autoHideScrollbar) {
+      onTrackerDragStart();
+    }
     subscribe(document);
   };
@@ -156,7 +185,12 @@ export const CustomScrollView = ({
     <div vkuiClass="CustomScrollView" className={className}>
       <div vkuiClass="CustomScrollView__barY" ref={barY}>
         <div
-          vkuiClass="CustomScrollView__trackerY"
+          vkuiClass={classNames(
+            "CustomScrollView__trackerY",
+            !trackerVisible && `CustomScrollView__trackerY--hidden`
+          )}
+          onMouseEnter={autoHideScrollbar ? onTrackerMouseEnter : undefined}
+          onMouseLeave={autoHideScrollbar ? onTrackerMouseLeave : undefined}
           ref={trackerY}
           onMouseDown={onDragStart}
         />

package/src/components/CustomScrollView/useTrackerVisibility.ts ADDED Viewed

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { useTimeout } from "../../hooks/useTimeout";
+/**
+ * Хук, который позволяет управлять видимостью ползунка скроллбара.
+ * @param autoHideScrollbar - скрывать ли ползунок скроллбара
+ * @param autoHideScrollbarDelay - через какое кол-во миллисекунд ползунок скроллбара скрывается
+ * @returns Объект, содержащий параметры, которые позволяют управлять видимостью ползунка
+ */
+export const useTrackerVisibility = (
+  autoHideScrollbar = false,
+  autoHideScrollbarDelay = 500
+): TrackerVisibilityProps => {
+  const [trackerVisible, setTrackerVisible] = React.useState(
+    !autoHideScrollbar
+  );
+  const isMouseOver = React.useRef(false);
+  const isTrackerDragging = React.useRef(false);
+  const { set: setVisibilityTimeout, clear: clearVisibilityTimeout } =
+    useTimeout(() => setTrackerVisible(false), autoHideScrollbarDelay);
+  const onTrackerDragStart = React.useCallback(() => {
+    clearVisibilityTimeout();
+    setTrackerVisible(true);
+    isTrackerDragging.current = true;
+  }, [clearVisibilityTimeout]);
+  const onTrackerDragStop = React.useCallback(() => {
+    isTrackerDragging.current = false;
+    if (!isMouseOver.current) {
+      setVisibilityTimeout();
+    }
+  }, [setVisibilityTimeout, isMouseOver]);
+  /**
+   * Позволяет "запланировать" скрытие ползунка через delay миллисекунд. Если тайм-аут не успевает сработать, то каждый
+   * последующий вызов функции откладывает скрытие ползунка на delay миллисекунд
+   */
+  const queueTrackerVisibility = React.useCallback(() => {
+    if (isTrackerDragging.current) {
+      return;
+    }
+    setTrackerVisible(true);
+    setVisibilityTimeout();
+  }, [setVisibilityTimeout]);
+  const onTrackerMouseEnter = React.useCallback(() => {
+    clearVisibilityTimeout();
+    isMouseOver.current = true;
+    setTrackerVisible(true);
+  }, [clearVisibilityTimeout]);
+  const onTrackerMouseLeave = React.useCallback(() => {
+    queueTrackerVisibility();
+    isMouseOver.current = false;
+  }, [queueTrackerVisibility]);
+  const onTargetScroll = React.useCallback(() => {
+    queueTrackerVisibility();
+  }, [queueTrackerVisibility]);
+  return {
+    trackerVisible,
+    onTrackerDragStart,
+    onTrackerDragStop,
+    onTrackerMouseEnter,
+    onTrackerMouseLeave,
+    onTargetScroll,
+  };
+};
+export interface TrackerOptionsProps {
+  /**
+   * Скрывать ли ползунок скроллбара
+   */
+  autoHideScrollbar?: boolean;
+  /**
+   * Через какое кол-во миллисекунд ползунок скроллбара скрывается
+   */
+  autoHideScrollbarDelay?: number;
+}
+export interface TrackerVisibilityProps {
+  /**
+   * Отвечает за видимость ползунка
+   */
+  trackerVisible: boolean;
+  /**
+   * Функция для обработки события у блока со скроллом
+   */
+  onTargetScroll(this: void): void;
+  /**
+   * Функция для обработки начала drag event ползунка
+   */
+  onTrackerDragStart(this: void): void;
+  /**
+   * Функция для обработки окончания drag event ползунка
+   */
+  onTrackerDragStop(this: void): void;
+  /**
+   * Функция для обработки mouseLeave event ползунка
+   */
+  onTrackerMouseEnter(this: void): void;
+  /**
+   * Функция для обработки mouseEnter event ползунка
+   */
+  onTrackerMouseLeave(this: void): void;
+}

package/src/components/CustomSelect/CustomSelect.tsx CHANGED Viewed

@@ -28,6 +28,7 @@ import {
 import { is } from "../../lib/is";
 import { Placement } from "../Popper/Popper";
 import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown";
+import { TrackerOptionsProps } from "../CustomScrollView/useTrackerVisibility";
 import { SelectType } from "../Select/Select";
 import "./CustomSelect.css";
@@ -46,7 +47,7 @@ const findIndexBefore = (
   endIndex: number = options.length
 ) => {
   let result = -1;
-  if (options === undefined || endIndex <= 0) {
+  if (endIndex <= 0) {
     return result;
   }
   for (let i = endIndex - 1; i >= 0; i--) {
@@ -93,7 +94,8 @@ interface CustomSelectState {
 export interface CustomSelectProps
   extends NativeSelectProps,
     HasPlatform,
-    FormFieldProps {
+    FormFieldProps,
+    TrackerOptionsProps {
   /**
    * Если `true`, то при клике на селект в нём появится текстовое поле для поиска по `options`. По умолчанию поиск
    * производится по `option.label`.
@@ -123,7 +125,7 @@ export interface CustomSelectProps
   popupDirection?: "top" | "bottom";
   /**
    * Рендер-проп для кастомного рендера опции.
-   * В объекте аргумента приходят [свойства опции](#/CustomSelectOption?id=props)
+   * В объекте аргумента приходят [свойства опции](https://vkcom.github.io/VKUI/#/CustomSelectOption?id=props)
    */
   renderOption?: (props: CustomSelectOptionProps) => React.ReactNode;
   /**
@@ -667,6 +669,8 @@ class CustomSelectComponent extends React.Component<
       fixDropdownWidth,
       forceDropdownPortal,
       selectType = SelectType.default,
+      autoHideScrollbar,
+      autoHideScrollbarDelay,
       ...restProps
     } = this.props;
     const selected = this.getSelectedItem();
@@ -766,6 +770,8 @@ class CustomSelectComponent extends React.Component<
             offsetDistance={dropdownOffsetDistance}
             sameWidth={fixDropdownWidth}
             forcePortal={forceDropdownPortal}
+            autoHideScrollbar={autoHideScrollbar}
+            autoHideScrollbarDelay={autoHideScrollbarDelay}
           >
             {resolvedContent}
           </CustomSelectDropdown>