react-native-divkit 1.6.5 → 1.7.0

package/src/components/pager/utils.ts

@@ -0,0 +1,214 @@
+/**
+ * Pure helpers for DivPager. Extracted so they can be unit-tested without
+ * having to render the React tree.
+ */
+
+export type ScrollAxisAlignment = 'start' | 'center' | 'end';
+
+export interface LayoutModeFixed {
+    type: 'fixed';
+    neighbour_page_width?: { value?: number };
+}
+export interface LayoutModePercentage {
+    type: 'percentage';
+    page_width?: { value?: number };
+}
+export interface LayoutModeWrap {
+    type: 'wrap_content';
+}
+export type AnyLayoutMode =
+    | LayoutModeFixed
+    | LayoutModePercentage
+    | LayoutModeWrap
+    | { type?: string; [k: string]: unknown }
+    | null
+    | undefined;
+
+export interface ComputePageSizeArgs {
+    containerSize: number;
+    layoutMode: AnyLayoutMode;
+    scrollAxisAlignment: ScrollAxisAlignment;
+    itemSpacing: number;
+    innerPadStart: number;
+    innerPadEnd: number;
+}
+
+/**
+ * Compute the size of a single page along the main axis. Mirrors the Web
+ * Pager.svelte autoSizeVal calculation:
+ * - fixed + center: containerSize − 2·neighbour − 2·spacing
+ * - fixed + start/end: containerSize − neighbour − spacing
+ * - percentage: containerSize · page_width / 100
+ * - wrap_content / unknown: usable area (containerSize − paddings)
+ */
+export function computePageSize(args: ComputePageSizeArgs): number {
+    const { containerSize, layoutMode, scrollAxisAlignment, itemSpacing, innerPadStart, innerPadEnd } =
+        args;
+    if (containerSize <= 0) return 0;
+    const usable = containerSize - innerPadStart - innerPadEnd;
+
+    const lm = layoutMode as { type?: string; neighbour_page_width?: { value?: number }; page_width?: { value?: number } } | null | undefined;
+
+    if (lm && lm.type === 'fixed') {
+        const neighbourW = lm.neighbour_page_width?.value ?? 0;
+        if (scrollAxisAlignment === 'center') {
+            return Math.max(0, containerSize - 2 * neighbourW - 2 * itemSpacing);
+        }
+        return Math.max(0, containerSize - neighbourW - itemSpacing);
+    }
+    if (lm && lm.type === 'percentage') {
+        const pageW = lm.page_width?.value ?? 100;
+        return Math.max(0, (containerSize * pageW) / 100);
+    }
+    return Math.max(0, usable);
+}
+
+export interface ComputeContentPadArgs extends ComputePageSizeArgs {
+    pageSize: number;
+    isInfinite: boolean;
+}
+
+/**
+ * Compute the contentContainer paddings the inner ScrollView needs so that the
+ * first/last items snap to the right visual position (centre/start/end). In
+ * infinite mode the duplicates take that role and we use zero padding.
+ */
+export function computeContentPad(args: ComputeContentPadArgs): { start: number; end: number } {
+    const {
+        containerSize,
+        pageSize,
+        innerPadStart,
+        innerPadEnd,
+        layoutMode,
+        scrollAxisAlignment,
+        itemSpacing,
+        isInfinite
+    } = args;
+
+    if (containerSize <= 0 || pageSize <= 0) {
+        return { start: innerPadStart, end: innerPadEnd };
+    }
+    if (isInfinite) {
+        return { start: 0, end: 0 };
+    }
+    const lm = layoutMode as { type?: string; neighbour_page_width?: { value?: number } } | null | undefined;
+    if (lm && lm.type === 'fixed') {
+        const neighbourW = lm.neighbour_page_width?.value ?? 0;
+        if (scrollAxisAlignment === 'center') {
+            const pad = neighbourW + itemSpacing;
+            return { start: pad, end: pad };
+        }
+        if (scrollAxisAlignment === 'start') {
+            return { start: innerPadStart, end: neighbourW + itemSpacing + innerPadEnd };
+        }
+        if (scrollAxisAlignment === 'end') {
+            return { start: neighbourW + itemSpacing + innerPadStart, end: innerPadEnd };
+        }
+    }
+    return { start: innerPadStart, end: innerPadEnd };
+}
+
+export const DUPLICATES_IN_INFINITE = 2;
+
+/**
+ * Map a "real" item index (0..size-1) to its rendered position.
+ * In infinite mode the real items live in [DUPLICATES, DUPLICATES + size).
+ */
+export function realToPosition(realIdx: number, isInfinite: boolean, duplicates = DUPLICATES_IN_INFINITE): number {
+    return isInfinite ? duplicates + realIdx : realIdx;
+}
+
+/**
+ * Map a rendered position back to the real index. Wraps modulo `size` when
+ * the position lands inside the duplicate region.
+ */
+export function positionToReal(
+    pos: number,
+    isInfinite: boolean,
+    size: number,
+    duplicates = DUPLICATES_IN_INFINITE
+): number {
+    if (size <= 0) return 0;
+    if (!isInfinite) {
+        return Math.max(0, Math.min(size - 1, pos));
+    }
+    const inner = pos - duplicates;
+    return ((inner % size) + size) % size;
+}
+
+/**
+ * True when `pos` corresponds to one of the duplicate entries (only meaningful
+ * in infinite mode).
+ */
+export function isInDuplicateRegion(
+    pos: number,
+    isInfinite: boolean,
+    size: number,
+    duplicates = DUPLICATES_IN_INFINITE
+): boolean {
+    if (!isInfinite) return false;
+    return pos < duplicates || pos >= duplicates + size;
+}
+
+export interface RenderedItemEntry<T> {
+    item: T;
+    realIndex: number;
+    key: string;
+}
+
+/**
+ * Build the list of items to render. In infinite mode this prefixes the array
+ * with `duplicates` copies of the last items and suffixes it with `duplicates`
+ * copies of the first items, so the user can swipe past either edge and land
+ * on something visually identical to the wrap-around target.
+ */
+export function buildRenderedItems<T extends { id?: string }>(
+    items: T[],
+    isInfinite: boolean,
+    duplicates = DUPLICATES_IN_INFINITE
+): RenderedItemEntry<T>[] {
+    if (!items.length) return [];
+    if (!isInfinite) {
+        return items.map((item, index) => ({ item, realIndex: index, key: `r-${index}` }));
+    }
+    const size = items.length;
+    const head: RenderedItemEntry<T>[] = [];
+    const tail: RenderedItemEntry<T>[] = [];
+    for (let i = 0; i < duplicates; i++) {
+        const realIdx = (size - duplicates + i + size) % size;
+        head.push({ item: items[realIdx], realIndex: realIdx, key: `dup-h-${i}` });
+    }
+    for (let i = 0; i < duplicates; i++) {
+        const realIdx = i % size;
+        tail.push({ item: items[realIdx], realIndex: realIdx, key: `dup-t-${i}` });
+    }
+    const real: RenderedItemEntry<T>[] = items.map((item, index) => ({
+        item,
+        realIndex: index,
+        key: `r-${index}`
+    }));
+    return [...head, ...real, ...tail];
+}
+
+/**
+ * Decide whether infinite_scroll should actually be active.
+ * Mirrors Web's correctBooleanInt + the `items.length >= DUPLICATES_IN_INFINITE`
+ * gate.
+ */
+export function isInfiniteEnabled(infiniteValue: unknown, itemsLength: number): boolean {
+    const truthy =
+        infiniteValue === true ||
+        infiniteValue === 1 ||
+        infiniteValue === '1' ||
+        infiniteValue === 'true';
+    return truthy && itemsLength >= DUPLICATES_IN_INFINITE;
+}
+
+/**
+ * Convert a scroll offset (in px) into a snap position (rounded). Returns 0
+ * when snapInterval <= 0.
+ */
+export function offsetToPosition(offset: number, snapInterval: number): number {
+    if (snapInterval <= 0) return 0;
+    return Math.round(offset / snapInterval);
+}

package/src/components/utilities/Outer.tsx

@@ -122,6 +122,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
     const { direction } = useDivKitContext();
     const layoutParams = useLayoutParams();
     const { json, variables } = componentContext;
+    const testID = (json as any).id as string | undefined;
 
     // Only use reactive hooks for truly dynamic properties (visibility, alpha)
     const visibility = useDerivedFromVarsSimple<Visibility>(json.visibility || 'visible', variables || new Map());
@@ -518,6 +519,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
                     onPressIn={onPressIn}
                     onPressOut={onPressOut}
                     style={outerStyle}
+                    testID={testID}
                 >
                     <Animated.View style={animatedStyle}>
                         <Background layers={background as any} style={borderStyle} />
@@ -528,7 +530,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
         }
 
         return (
-            <Pressable onPress={handlePress} style={finalStyle}>
+            <Pressable onPress={handlePress} style={finalStyle} testID={testID}>
                 <Background layers={background as any} style={borderStyle} />
                 {children}
             </Pressable>
@@ -536,7 +538,7 @@ export function Outer<T extends DivBaseData = DivBaseData>({
     }
 
     return (
-        <View style={finalStyle}>
+        <View style={finalStyle} testID={testID}>
             <Background layers={background as any} style={borderStyle} />
             {children}
         </View>

package/src/context/PagerContext.tsx

@@ -0,0 +1,108 @@
+import { createContext, useContext, useCallback, useMemo, useRef, ReactNode, createElement } from 'react';
+import type { PagerData, PagerListener, PagerRegisterData } from '../types/componentContext';
+
+/**
+ * PagerContext — shared registry for pagers and their indicators.
+ *
+ * Based on Web Root.svelte: registerPager / listenPager.
+ *
+ * - Pager registers itself with `registerPager(pagerId)` and gets back an object with
+ *   `update(data)` (called whenever current item / size changes) and `destroy()`.
+ * - Indicator subscribes to a pager via `listenPager(pagerId, cb)`.
+ * - Subscribers receive the current pager state immediately if it's already known
+ *   (so indicator works regardless of mount order).
+ */
+export interface PagerContextValue {
+    registerPager(pagerId: string | undefined): PagerRegisterData;
+    listenPager(pagerId: string | undefined, listener: PagerListener): () => void;
+}
+
+export const PagerContext = createContext<PagerContextValue | null>(null);
+
+export function usePagerContextOptional(): PagerContextValue | null {
+    return useContext(PagerContext);
+}
+
+export function usePagerContext(): PagerContextValue {
+    const context = useContext(PagerContext);
+    if (!context) {
+        throw new Error('usePagerContext must be used within PagerContext.Provider');
+    }
+    return context;
+}
+
+export interface PagerProviderProps {
+    children: ReactNode;
+}
+
+/**
+ * Provider that holds pager state in stable refs. Mirrors the Web behaviour
+ * where registration / listening is keyed by pagerId (with `undefined` allowed
+ * so indicators without an explicit pager_id still work).
+ */
+export function PagerProvider({ children }: PagerProviderProps) {
+    const pagersRef = useRef<Map<string | undefined, PagerData | null>>(new Map());
+    const listenersRef = useRef<Map<string | undefined, PagerListener[]>>(new Map());
+
+    const notify = useCallback((pagerId: string | undefined, data: PagerData) => {
+        const list = listenersRef.current.get(pagerId);
+        if (!list) return;
+        for (const fn of list) {
+            try {
+                fn(data);
+            } catch (err) {
+                // eslint-disable-next-line no-console
+                console.error('[DivKit Pager] listener error', err);
+            }
+        }
+    }, []);
+
+    const registerPager = useCallback((pagerId: string | undefined): PagerRegisterData => {
+        return {
+            update: (data: PagerData) => {
+                pagersRef.current.set(pagerId, data);
+                notify(pagerId, data);
+            },
+            destroy: () => {
+                pagersRef.current.set(pagerId, null);
+            }
+        };
+    }, [notify]);
+
+    const listenPager = useCallback(
+        (pagerId: string | undefined, listener: PagerListener): (() => void) => {
+            let list = listenersRef.current.get(pagerId);
+            if (!list) {
+                list = [];
+                listenersRef.current.set(pagerId, list);
+            }
+            list.push(listener);
+
+            // Replay last known state so indicator gets current pager position immediately
+            const current = pagersRef.current.get(pagerId);
+            if (current) {
+                try {
+                    listener(current);
+                } catch (err) {
+                    // eslint-disable-next-line no-console
+                    console.error('[DivKit Pager] listener error', err);
+                }
+            }
+
+            return () => {
+                const arr = listenersRef.current.get(pagerId);
+                if (!arr) return;
+                const idx = arr.indexOf(listener);
+                if (idx >= 0) arr.splice(idx, 1);
+            };
+        },
+        []
+    );
+
+    const value = useMemo<PagerContextValue>(
+        () => ({ registerPager, listenPager }),
+        [registerPager, listenPager]
+    );
+
+    return createElement(PagerContext.Provider, { value }, children);
+}

package/src/context/index.ts

@@ -22,3 +22,11 @@ export {
     useIsEnabled,
     type EnabledContextValue
 } from './EnabledContext';
+
+export {
+    PagerContext,
+    PagerProvider,
+    usePagerContext,
+    usePagerContextOptional,
+    type PagerContextValue
+} from './PagerContext';

package/src/types/indicator.d.ts

@@ -0,0 +1,32 @@
+import type { DivBaseData } from './base';
+import type { FixedSize } from './sizes';
+import type { Shape } from './shape';
+
+export interface DivIndicatorDefaultItemPlacement {
+    type: 'default';
+    space_between_centers?: FixedSize;
+}
+
+export interface DivIndicatorStretchItemPlacement {
+    type: 'stretch';
+    item_spacing?: FixedSize;
+    max_visible_items?: number;
+}
+
+export type DivIndicatorItemsPlacement = DivIndicatorDefaultItemPlacement | DivIndicatorStretchItemPlacement;
+
+export interface DivIndicatorData extends DivBaseData {
+    type: 'indicator';
+    pager_id?: string;
+    /** @deprecated */
+    space_between_centers?: FixedSize;
+    inactive_item_color?: string;
+    active_item_color?: string;
+    /** @deprecated */
+    shape?: Shape;
+    active_shape?: Shape;
+    inactive_shape?: Shape;
+    /** @deprecated */
+    active_item_size?: number;
+    items_placement?: DivIndicatorItemsPlacement;
+}

package/src/types/pager.d.ts

@@ -0,0 +1,36 @@
+import type { DivBaseData } from './base';
+import type { FixedSize, PercentageSize } from './sizes';
+import type { BooleanInt } from '../../typings/common';
+
+export interface PageSize {
+    type: 'percentage';
+    page_width: PercentageSize;
+}
+
+export interface NeighbourPageSize {
+    type: 'fixed';
+    neighbour_page_width: FixedSize;
+}
+
+export interface PageContentSize {
+    type: 'wrap_content';
+}
+
+export type PagerLayoutMode = PageSize | NeighbourPageSize | PageContentSize;
+
+export type PagerItemAlignment = 'start' | 'center' | 'end';
+
+export type PagerOrientation = 'vertical' | 'horizontal';
+
+export interface DivPagerData extends DivBaseData {
+    type: 'pager';
+    scroll_axis_alignment?: PagerItemAlignment;
+    cross_axis_alignment?: PagerItemAlignment;
+    layout_mode: PagerLayoutMode;
+    item_spacing?: FixedSize;
+    items?: DivBaseData[];
+    orientation?: PagerOrientation;
+    restrict_parent_scroll?: BooleanInt;
+    default_item?: number;
+    infinite_scroll?: BooleanInt;
+}

package/src/types/shape.d.ts

@@ -0,0 +1,26 @@
+import type { FixedSize } from './sizes';
+
+export interface Stroke {
+    color?: string;
+    width?: number;
+    unit?: 'sp' | 'dp' | 'px';
+}
+
+export interface ShapeBase {
+    background_color?: string;
+    stroke?: Stroke;
+}
+
+export interface RoundedRectangle extends ShapeBase {
+    type: 'rounded_rectangle';
+    item_width?: FixedSize;
+    item_height?: FixedSize;
+    corner_radius?: FixedSize;
+}
+
+export interface Circle extends ShapeBase {
+    type: 'circle';
+    radius?: FixedSize;
+}
+
+export type Shape = RoundedRectangle | Circle;