@vkontakte/vkui 4.28.0 → 4.29.1

package/src/fonts/fonts.css

@@ -0,0 +1,7 @@
+@font-face {
+  font-family: "VK Sans Display";
+  src: url("./VK_Sans_Display_Medium.woff2") format("woff2"),
+    url("./VK_Sans_Display_Medium.woff") format("woff");
+  font-weight: 500;
+  font-display: fallback;
+}

package/src/helpers/avatar.ts

@@ -0,0 +1,10 @@
+import { InitialsAvatarNumberGradients } from "../components/InitialsAvatar/InitialsAvatar";
+
+/**
+ * Вычисляет цвет InitialsAvatar на основании переданного идентификатора объекта
+ */
+export function calcInitialsAvatarColor(
+  objectId: number
+): InitialsAvatarNumberGradients {
+  return ((objectId % 6) + 1) as InitialsAvatarNumberGradients;
+}

package/src/helpers/getClassName.ts

@@ -0,0 +1,8 @@
+import { PlatformType, platform } from "../lib/platform";
+
+export function getClassName(
+  base: string,
+  osname: PlatformType = platform()
+): string {
+  return `${base} ${base}--${osname}`;
+}

package/src/helpers/getScheme.ts

@@ -0,0 +1,27 @@
+import { AppearanceType } from "@vkontakte/vk-bridge";
+import { PlatformType, VKCOM } from "../lib/platform";
+import { Scheme } from "./scheme";
+
+export interface GetSchemeProps {
+  platform?: PlatformType;
+  appearance: AppearanceType;
+}
+
+export function getScheme({ platform, appearance }: GetSchemeProps): Scheme {
+  switch (appearance) {
+    case "dark":
+      switch (platform) {
+        case VKCOM:
+          return Scheme.VKCOM_DARK;
+        default:
+          return Scheme.SPACE_GRAY;
+      }
+    case "light":
+      switch (platform) {
+        case VKCOM:
+          return Scheme.VKCOM_LIGHT;
+        default:
+          return Scheme.BRIGHT_LIGHT;
+      }
+  }
+}

package/src/helpers/math.ts

@@ -0,0 +1,40 @@
+export const clamp = (value: number, min: number, max: number) =>
+  Math.max(min, Math.min(value, max));
+
+export function precisionRound(number: number, precision = 1) {
+  let factor = Math.pow(10, precision);
+  return Math.round(number * factor) / factor;
+}
+
+function precision(number: number) {
+  return (`${number}`.split(".")[1] || "").length;
+}
+
+function decimatedClamp(val: number, min: number, max: number, step?: number) {
+  if (step == null || step <= 0) {
+    return clamp(val, min, max);
+  }
+  const prec = precision(step);
+  // Round value to nearest min + k1 * step
+  const decimatedOffset = precisionRound(
+    Math.round((val - min) / step) * step,
+    prec
+  );
+  // Round range length _down_ to nearest min + k2 * step
+  const decimatedRange = precisionRound(
+    Math.floor((max - min) / step) * step,
+    prec
+  );
+  return min + clamp(decimatedOffset, 0, decimatedRange);
+}
+
+export function rescale(
+  value: number,
+  from: [number, number],
+  to: [number, number],
+  options: { step?: number } = {}
+) {
+  const scaled =
+    ((value - from[0]) / (from[1] - from[0])) * (to[1] - to[0]) + to[0];
+  return decimatedClamp(scaled, to[0], to[1], options.step);
+}

package/src/helpers/scheme.ts

@@ -0,0 +1,87 @@
+import { AppearanceSchemeType, AppearanceType } from "@vkontakte/vk-bridge";
+import { PlatformType, VKCOM } from "../lib/platform";
+import { warnOnce } from "../lib/warnOnce";
+import { getScheme } from "./getScheme";
+
+export enum Scheme {
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости со старыми версиями клиентов
+   */
+  DEPRECATED_CLIENT_LIGHT = "client_light",
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости со старыми версиями клиентов
+   */
+  DEPRECATED_CLIENT_DARK = "client_dark",
+  /**
+   * @deprecated будет удалено в 5.0.0
+   * версия оставлена для совместимости с vkcom, когда там была только одна схема
+   */
+  VKCOM = "vkcom",
+
+  BRIGHT_LIGHT = "bright_light",
+  SPACE_GRAY = "space_gray",
+  VKCOM_LIGHT = "vkcom_light",
+  VKCOM_DARK = "vkcom_dark",
+}
+
+export type AppearanceScheme =
+  | AppearanceSchemeType
+  | Scheme.VKCOM
+  | Scheme.VKCOM_DARK
+  | Scheme.VKCOM_LIGHT
+  | "inherit";
+
+export enum Appearance {
+  DARK = "dark",
+  LIGHT = "light",
+}
+
+const warn = warnOnce("scheme");
+
+export interface NormalizeSchemeProps {
+  platform: PlatformType;
+  scheme?: AppearanceScheme;
+  appearance?: AppearanceType;
+}
+
+export function normalizeScheme({
+  platform,
+  scheme,
+  appearance,
+}: NormalizeSchemeProps): Scheme | "inherit" {
+  if (appearance) {
+    return getScheme({ platform, appearance });
+  }
+
+  if (scheme === "inherit") {
+    return scheme;
+  }
+  if (scheme === Scheme.VKCOM) {
+    process.env.NODE_ENV === "development" &&
+      warn(
+        `Схема "${Scheme.VKCOM}" устарела и будет удалена в v5.0.0. Вместо неё используйте "${Scheme.VKCOM_LIGHT}"`
+      );
+    return Scheme.VKCOM_LIGHT;
+  }
+  if (
+    platform === VKCOM &&
+    (scheme === Scheme.BRIGHT_LIGHT || scheme === Scheme.SPACE_GRAY)
+  ) {
+    process.env.NODE_ENV === "development" &&
+      warn(
+        `Платформа "vkcom" и схема "${scheme}" несовместимы. С этой платформой можно использовать схемы "${Scheme.VKCOM_LIGHT}" или "${Scheme.VKCOM_DARK}"`,
+        "error"
+      );
+    return Scheme.VKCOM_LIGHT;
+  }
+  switch (scheme) {
+    case Scheme.DEPRECATED_CLIENT_LIGHT:
+      return Scheme.BRIGHT_LIGHT;
+    case Scheme.DEPRECATED_CLIENT_DARK:
+      return Scheme.SPACE_GRAY;
+    default:
+      return scheme as Scheme;
+  }
+}

package/src/hoc/withAdaptivity.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import {
+  AdaptivityContext,
+  SizeType,
+  ViewHeight,
+  ViewWidth,
+  AdaptivityContextInterface,
+  AdaptivityProps,
+  SizeProps,
+} from "../components/AdaptivityProvider/AdaptivityContext";
+
+export { SizeType, ViewWidth, ViewHeight };
+export type { AdaptivityProps };
+
+interface Config {
+  sizeX?: boolean;
+  sizeY?: boolean;
+  viewWidth?: boolean;
+  viewHeight?: boolean;
+  hasMouse?: boolean;
+  deviceHasHover?: boolean;
+}
+
+export function withAdaptivity<T extends AdaptivityProps>(
+  TargetComponent: React.ComponentType<T>,
+  config: Config
+): React.FC<Omit<T, keyof AdaptivityContextInterface> & SizeProps> {
+  const AdaptivityConsumer: React.ComponentType<
+    Omit<T, keyof AdaptivityContextInterface> & SizeProps
+  > = (props: Omit<T, keyof AdaptivityContextInterface> & SizeProps) => {
+    const context = React.useContext(AdaptivityContext);
+    let update = false;
+
+    if (props.sizeX || props.sizeY) {
+      update = true;
+    }
+
+    const sizeX = props.sizeX || context.sizeX;
+    const sizeY = props.sizeY || context.sizeY;
+    const viewWidth = context.viewWidth;
+    const viewHeight = context.viewHeight;
+    const hasMouse = context.hasMouse;
+    const deviceHasHover = context.deviceHasHover;
+
+    const adaptivityProps: {
+      sizeX?: SizeType;
+      sizeY?: SizeType;
+      viewWidth?: ViewWidth;
+      viewHeight?: ViewHeight;
+      hasMouse?: boolean;
+      deviceHasHover?: boolean;
+    } = {};
+
+    config.sizeX ? (adaptivityProps.sizeX = sizeX) : undefined;
+    config.sizeY ? (adaptivityProps.sizeY = sizeY) : undefined;
+    config.viewWidth ? (adaptivityProps.viewWidth = viewWidth) : undefined;
+    config.viewHeight ? (adaptivityProps.viewHeight = viewHeight) : undefined;
+    config.hasMouse ? (adaptivityProps.hasMouse = hasMouse) : undefined;
+    config.deviceHasHover
+      ? (adaptivityProps.deviceHasHover = deviceHasHover)
+      : undefined;
+
+    const target = <TargetComponent {...(props as T)} {...adaptivityProps} />;
+
+    if (update) {
+      return (
+        <AdaptivityContext.Provider
+          value={{
+            sizeX,
+            sizeY,
+            viewWidth,
+            viewHeight,
+            hasMouse,
+            deviceHasHover,
+          }}
+        >
+          {target}
+        </AdaptivityContext.Provider>
+      );
+    }
+
+    return target;
+  };
+
+  return AdaptivityConsumer;
+}

package/src/hoc/withContext.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export function withContext<T, X>(
+  Component: React.ComponentType<T>,
+  Ctx: React.Context<X>,
+  prop: string
+): React.FC<T> {
+  function WithContext(props: T) {
+    const context = React.useContext<X>(Ctx);
+
+    return <Component {...props} {...{ [prop]: context }} />;
+  }
+  return WithContext;
+}

package/src/hoc/withInsets.tsx

@@ -0,0 +1,12 @@
+import { useInsets } from "../hooks/useInsets";
+import { HasInsets } from "../types";
+
+export function withInsets<T extends HasInsets>(
+  Component: React.ComponentType<T>
+): React.FC<Omit<T, keyof HasInsets>> {
+  function WithInsets(props: Omit<T, keyof HasInsets>) {
+    const insets = useInsets();
+    return <Component {...(props as T)} insets={insets} />;
+  }
+  return WithInsets;
+}

package/src/hoc/withPlatform.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { SSRContext } from "../lib/SSR";
+import { HasPlatform } from "../types";
+import { ConfigProviderContext } from "../components/ConfigProvider/ConfigProviderContext";
+
+export function withPlatform<T extends HasPlatform>(
+  Component: React.ComponentType<T>
+): React.FC<Omit<T, keyof HasPlatform>> {
+  function WithPlatform(props: Omit<T, keyof HasPlatform>) {
+    const ssrContext = React.useContext(SSRContext);
+    const { platform } = React.useContext(ConfigProviderContext);
+    return (
+      <Component {...(props as T)} platform={ssrContext.platform || platform} />
+    );
+  }
+  return WithPlatform;
+}

package/src/hooks/useAdaptivity.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+import {
+  AdaptivityContext,
+  AdaptivityProps,
+  AdaptivityContextInterface,
+} from "../components/AdaptivityProvider/AdaptivityContext";
+
+export type { AdaptivityProps };
+
+export const useAdaptivity = (): AdaptivityContextInterface => {
+  return React.useContext(AdaptivityContext);
+};

package/src/hooks/useAppearance.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { AppearanceProviderContext } from "../components/AppearanceProvider/AppearanceProviderContext";
+
+export const useAppearance = () => React.useContext(AppearanceProviderContext);

package/src/hooks/useBooleanState.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export const useBooleanState = (defaultValue = false) => {
+  const [value, setValue] = React.useState(defaultValue);
+
+  const setTrue = React.useCallback(() => {
+    setValue(true);
+  }, []);
+
+  const setFalse = React.useCallback(() => {
+    setValue(false);
+  }, []);
+
+  const toggle = React.useCallback(() => {
+    setValue(!value);
+  }, [value]);
+
+  return { value, setTrue, setFalse, toggle };
+};

package/src/hooks/useBridgeAdaptivity.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import vkBridge from "@vkontakte/vk-bridge";
+import { useIsomorphicLayoutEffect } from "../lib/useIsomorphicLayoutEffect";
+
+export interface BridgeAdaptivity {
+  type: "" | "force_mobile" | "force_mobile_compact" | "adaptive";
+  viewportWidth: number;
+  viewportHeight: number;
+}
+
+interface BridgeEvent {
+  detail: {
+    type: string;
+    data: {
+      [index: string]: any;
+    };
+  };
+}
+
+let initialState: BridgeAdaptivity = {
+  type: "",
+  viewportWidth: 0,
+  viewportHeight: 0,
+};
+
+function resolveAdaptivity(e: BridgeEvent): BridgeAdaptivity | null {
+  const { type, data } = e.detail;
+
+  if (type !== "VKWebAppUpdateConfig" || !data) {
+    return null;
+  }
+
+  const {
+    adaptivity,
+    viewport_width: viewportWidth,
+    viewport_height: viewportHeight,
+  } = data;
+
+  const bridgeAdaptivity: BridgeAdaptivity = {
+    type: "",
+    viewportWidth: isFinite(viewportWidth) ? +viewportWidth : 0,
+    viewportHeight: isFinite(viewportHeight) ? +viewportHeight : 0,
+  };
+
+  switch (adaptivity) {
+    case "force_mobile":
+    case "force_mobile_compact":
+    case "adaptive":
+      bridgeAdaptivity.type = adaptivity;
+  }
+
+  return bridgeAdaptivity;
+}
+
+vkBridge.subscribe((e: BridgeEvent) => {
+  const bridgeAdaptivity = resolveAdaptivity(e);
+
+  if (bridgeAdaptivity) {
+    initialState = bridgeAdaptivity;
+  }
+});
+
+export function useBridgeAdaptivity(): BridgeAdaptivity {
+  const [bridgeAdaptivity, setBridgeAdaptivity] =
+    React.useState<BridgeAdaptivity>(initialState);
+
+  useIsomorphicLayoutEffect(() => {
+    function bridgeListener(e: BridgeEvent) {
+      const newBridgeAdaptivity = resolveAdaptivity(e);
+
+      if (newBridgeAdaptivity) {
+        setBridgeAdaptivity(newBridgeAdaptivity);
+      }
+    }
+
+    vkBridge.subscribe(bridgeListener);
+    return () => {
+      vkBridge.unsubscribe(bridgeListener);
+    };
+  }, []);
+
+  return bridgeAdaptivity;
+}

package/src/hooks/useBrowserInfo.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+import { SSRContext } from "../lib/SSR";
+import { BrowserInfo, computeBrowserInfo } from "../lib/browser";
+
+export function useBrowserInfo(): BrowserInfo {
+  const ssrContext = React.useContext(SSRContext);
+  const browserInfo =
+    ssrContext.browserInfo || computeBrowserInfo(ssrContext.userAgent);
+
+  return browserInfo;
+}

package/src/hooks/useCalendar.ts

@@ -0,0 +1,78 @@
+import * as React from "react";
+import {
+  subMonths,
+  addMonths,
+  isSameDay,
+  isBefore,
+  endOfDay,
+  isAfter,
+  startOfDay,
+} from "../lib/date";
+
+export interface UseCalendarDependencies {
+  value?: Array<Date | null> | Date;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  shouldDisableDate?(value: Date): boolean;
+}
+
+export function useCalendar({
+  value,
+  disablePast,
+  disableFuture,
+  shouldDisableDate,
+}: UseCalendarDependencies) {
+  const [viewDate, setViewDate] = React.useState(
+    (Array.isArray(value) ? value[0] : value) ?? new Date()
+  );
+  const [focusedDay, setFocusedDay] = React.useState<Date>();
+
+  const setPrevMonth = React.useCallback(
+    () => setViewDate(subMonths(viewDate, 1)),
+    [viewDate]
+  );
+  const setNextMonth = React.useCallback(
+    () => setViewDate(addMonths(viewDate, 1)),
+    [viewDate]
+  );
+
+  const isDayFocused = React.useCallback(
+    (day: Date) => Boolean(focusedDay && isSameDay(day, focusedDay)),
+    [focusedDay]
+  );
+
+  const isDayDisabled = React.useCallback(
+    (day: Date) => {
+      const now = new Date();
+      let disabled = false;
+      if (disablePast) {
+        disabled = isBefore(endOfDay(day), now);
+      }
+      if (disableFuture) {
+        disabled = isAfter(startOfDay(day), now);
+      }
+      if (shouldDisableDate) {
+        disabled = shouldDisableDate(day);
+      }
+
+      return disabled;
+    },
+    [disableFuture, disablePast, shouldDisableDate]
+  );
+
+  const resetSelectedDay = React.useCallback(() => {
+    setFocusedDay(undefined);
+  }, [setFocusedDay]);
+
+  return {
+    viewDate,
+    setViewDate,
+    setPrevMonth,
+    setNextMonth,
+    focusedDay,
+    setFocusedDay,
+    isDayFocused,
+    isDayDisabled,
+    resetSelectedDay,
+  };
+}