react-native-divkit 1.6.5 → 1.8.0

package/src/components/indicator/DivIndicator.tsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { View, ScrollView, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import type { ComponentContext } from '../../types/componentContext';
+import type { DivIndicatorData } from '../../types/indicator';
+import type { PagerData } from '../../types/componentContext';
+import { Outer } from '../utilities/Outer';
+import { useDerivedFromVarsSimple } from '../../hooks/useDerivedFromVars';
+import { usePagerContextOptional } from '../../context/PagerContext';
+import { buildDotStyles, resolvePlacement } from './utils';
+
+export interface DivIndicatorProps {
+    componentContext: ComponentContext<DivIndicatorData>;
+}
+
+/**
+ * DivIndicator — page-position dots for a DivPager.
+ *
+ * Based on Web Indicator.svelte. Adapted for React Native:
+ * - Subscribes to a pager via PagerContext (registered by DivPager).
+ * - Computes active/inactive dot styles from active_shape/inactive_shape, or
+ *   falls back to legacy `shape` + `active_item_size` + colors.
+ * - Tap on a dot scrolls the bound pager to that page.
+ * - Items_placement supports 'default' (space_between_centers) and 'stretch'
+ *   (item_spacing). For unknown placements falls back to default.
+ */
+export function DivIndicator({ componentContext }: DivIndicatorProps) {
+    const pagerCtx = usePagerContextOptional();
+    const { json, variables } = componentContext;
+
+    const shapeJson = useDerivedFromVarsSimple<any>(json.shape, variables || new Map());
+    const activeShapeJson = useDerivedFromVarsSimple<any>(
+        json.active_shape,
+        variables || new Map()
+    );
+    const inactiveShapeJson = useDerivedFromVarsSimple<any>(
+        json.inactive_shape,
+        variables || new Map()
+    );
+    const activeColor = useDerivedFromVarsSimple<string | undefined>(
+        json.active_item_color,
+        variables || new Map()
+    );
+    const inactiveColor = useDerivedFromVarsSimple<string | undefined>(
+        json.inactive_item_color,
+        variables || new Map()
+    );
+    const activeItemSize = useDerivedFromVarsSimple<number | undefined>(
+        json.active_item_size,
+        variables || new Map()
+    );
+    const spaceBetweenCenters = useDerivedFromVarsSimple<any>(
+        json.space_between_centers,
+        variables || new Map()
+    );
+    const itemsPlacement = useDerivedFromVarsSimple<any>(
+        json.items_placement,
+        variables || new Map()
+    );
+
+    const { active: activeStyle, inactive: inactiveStyle } = useMemo(
+        () =>
+            buildDotStyles({
+                activeShape: activeShapeJson,
+                inactiveShape: inactiveShapeJson,
+                legacyShape: shapeJson,
+                activeColor,
+                inactiveColor,
+                activeItemSize
+            }),
+        [activeShapeJson, inactiveShapeJson, shapeJson, activeColor, inactiveColor, activeItemSize]
+    );
+
+    const { placement, gap, stretchSpacing, maxVisible } = useMemo(
+        () =>
+            resolvePlacement({
+                itemsPlacement,
+                spaceBetweenCenters,
+                inactiveWidth: inactiveStyle.width
+            }),
+        [itemsPlacement, spaceBetweenCenters, inactiveStyle.width]
+    );
+
+    const [pagerData, setPagerData] = useState<PagerData | null>(null);
+    const scrollerRef = useRef<ScrollView>(null);
+
+    useEffect(() => {
+        if (!pagerCtx) return;
+        const unsubscribe = pagerCtx.listenPager(json.pager_id, (data: PagerData) => {
+            setPagerData(data);
+        });
+        return unsubscribe;
+    }, [pagerCtx, json.pager_id]);
+
+    const onItemPress = useCallback(
+        (index: number) => {
+            if (!pagerData) return;
+            if (index !== pagerData.currentItem) {
+                pagerData.scrollToPagerItem(index);
+            }
+        },
+        [pagerData]
+    );
+
+    if (!pagerData || pagerData.size <= 1) {
+        // Match Web: indicator only shown when size > 1, but Outer still applies
+        // sizing/margins. Render an empty Outer so layout (height/margins) holds.
+        return <Outer componentContext={componentContext}>{null}</Outer>;
+    }
+
+    const renderDot = (index: number) => {
+        const isActive = index === pagerData.currentItem;
+        const dot = isActive ? activeStyle : inactiveStyle;
+        const dotStyle: ViewStyle = {
+            width: dot.width,
+            height: dot.height,
+            borderRadius: dot.borderRadius,
+            backgroundColor: dot.background
+        };
+        const wrapperStyle: ViewStyle = {
+            justifyContent: 'center',
+            alignItems: 'center',
+            // reserve room for the larger active dot so the row height stays stable
+            width: placement === 'stretch' ? undefined : Math.max(activeStyle.width, inactiveStyle.width),
+            height: Math.max(activeStyle.height, inactiveStyle.height),
+            marginLeft: index === 0 ? 0 : placement === 'stretch' ? stretchSpacing : gap / 2,
+            marginRight:
+                index === pagerData.size - 1 ? 0 : placement === 'stretch' ? stretchSpacing : gap / 2,
+            flex: placement === 'stretch' ? 1 : undefined,
+            maxWidth: placement === 'stretch' && pagerData.size > maxVisible ? undefined : undefined
+        };
+        return (
+            <Pressable
+                key={`indicator-dot-${index}`}
+                onPress={() => onItemPress(index)}
+                style={wrapperStyle}
+            >
+                <View style={dotStyle} />
+            </Pressable>
+        );
+    };
+
+    const dots = [];
+    for (let i = 0; i < pagerData.size; i++) dots.push(renderDot(i));
+
+    const rowStyle: ViewStyle = {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: placement === 'stretch' ? 'space-between' : 'center'
+    };
+
+    return (
+        <Outer componentContext={componentContext}>
+            <ScrollView
+                ref={scrollerRef}
+                horizontal
+                showsHorizontalScrollIndicator={false}
+                contentContainerStyle={styles.scrollContent}
+                style={styles.scroller}
+            >
+                <View style={rowStyle}>{dots}</View>
+            </ScrollView>
+        </Outer>
+    );
+}
+
+const styles = StyleSheet.create({
+    scroller: {
+        alignSelf: 'stretch'
+    },
+    scrollContent: {
+        flexGrow: 1,
+        justifyContent: 'center',
+        alignItems: 'center'
+    }
+});

package/src/components/indicator/index.ts

@@ -0,0 +1,2 @@
+export { DivIndicator } from './DivIndicator';
+export type { DivIndicatorProps } from './DivIndicator';

package/src/components/indicator/utils.ts

@@ -0,0 +1,149 @@
+/**
+ * Pure helpers for DivIndicator. Extracted for unit testing.
+ */
+import { correctColor } from '../../utils/correctColor';
+
+export interface DotStyle {
+    width: number;
+    height: number;
+    borderRadius: number;
+    background: string;
+}
+
+export const DEFAULT_ACTIVE: DotStyle = {
+    width: 13,
+    height: 13,
+    borderRadius: 6.5,
+    background: '#ffdc60'
+};
+
+export const DEFAULT_INACTIVE: DotStyle = {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    background: '#33919cb5'
+};
+
+interface ShapeLike {
+    type?: string;
+    item_width?: { value?: number };
+    item_height?: { value?: number };
+    corner_radius?: { value?: number };
+    radius?: { value?: number };
+    background_color?: string;
+}
+
+/**
+ * Convert a Shape (rounded_rectangle | circle) into a DotStyle.
+ * Falls back to `base` when the shape is missing or unsupported.
+ */
+export function shapeToDot(shape: unknown, fallbackColor: string, base: DotStyle): DotStyle {
+    if (!shape) return base;
+    const s = shape as ShapeLike;
+    if (s.type === 'rounded_rectangle') {
+        const w = s.item_width?.value ?? base.width;
+        const h = s.item_height?.value ?? base.height;
+        const r = s.corner_radius?.value ?? Math.min(w, h) / 2;
+        return {
+            width: w,
+            height: h,
+            borderRadius: r,
+            background: correctColor(s.background_color, 1, fallbackColor)
+        };
+    }
+    if (s.type === 'circle') {
+        const r = s.radius?.value ?? base.width / 2;
+        return {
+            width: r * 2,
+            height: r * 2,
+            borderRadius: r,
+            background: correctColor(s.background_color, 1, fallbackColor)
+        };
+    }
+    return base;
+}
+
+export interface BuildDotStylesArgs {
+    activeShape?: unknown;
+    inactiveShape?: unknown;
+    legacyShape?: unknown;
+    activeColor?: string;
+    inactiveColor?: string;
+    activeItemSize?: number;
+}
+
+/**
+ * Compute final active/inactive dot styles. Mirrors Indicator.svelte:
+ *   - explicit active_shape/inactive_shape take precedence
+ *   - else legacy `shape` + `active_item_size` + colors generates both
+ *   - else defaults
+ */
+export function buildDotStyles(args: BuildDotStylesArgs): { active: DotStyle; inactive: DotStyle } {
+    const { activeShape, inactiveShape, legacyShape, activeColor, inactiveColor, activeItemSize } = args;
+    let inactive: DotStyle = { ...DEFAULT_INACTIVE };
+    let active: DotStyle = { ...DEFAULT_ACTIVE };
+
+    if (activeShape) {
+        active = shapeToDot(activeShape, active.background, active);
+    }
+    if (inactiveShape) {
+        inactive = shapeToDot(inactiveShape, inactive.background, inactive);
+    }
+    if (!activeShape && !inactiveShape && legacyShape) {
+        const sizeMul = typeof activeItemSize === 'number' && activeItemSize > 0 ? activeItemSize : 1.3;
+        inactive = shapeToDot(legacyShape, inactive.background, inactive);
+        inactive.background = correctColor(inactiveColor, 1, inactive.background);
+        const activeBg = correctColor(activeColor, 1, active.background);
+        active = {
+            width: inactive.width * sizeMul,
+            height: inactive.height * sizeMul,
+            borderRadius: inactive.borderRadius * sizeMul,
+            background: activeBg
+        };
+    }
+    return { active, inactive };
+}
+
+export type IndicatorPlacement = 'default' | 'stretch';
+
+export interface ResolvePlacementArgs {
+    itemsPlacement?: { type?: string; space_between_centers?: { value?: number }; item_spacing?: { value?: number }; max_visible_items?: number };
+    spaceBetweenCenters?: { value?: number };
+    inactiveWidth: number;
+}
+
+export interface ResolvedPlacement {
+    placement: IndicatorPlacement;
+    gap: number;
+    stretchSpacing: number;
+    maxVisible: number;
+}
+
+/**
+ * Resolve which placement mode to use and the spacing parameters.
+ * - stretch: equal spacing across the full width, item_spacing px between dots.
+ * - default: gap = space_between_centers - inactiveWidth.
+ */
+export function resolvePlacement(args: ResolvePlacementArgs): ResolvedPlacement {
+    const { itemsPlacement, spaceBetweenCenters, inactiveWidth } = args;
+
+    if (itemsPlacement && itemsPlacement.type === 'stretch') {
+        return {
+            placement: 'stretch',
+            gap: 0,
+            stretchSpacing: itemsPlacement.item_spacing?.value ?? 5,
+            maxVisible: itemsPlacement.max_visible_items ?? 10
+        };
+    }
+    let center = spaceBetweenCenters?.value;
+    if (itemsPlacement && itemsPlacement.type === 'default') {
+        center = itemsPlacement.space_between_centers?.value ?? center;
+    }
+    const c = typeof center === 'number' && center >= 0 ? center : 15;
+    return {
+        placement: 'default',
+        gap: Math.max(0, c - inactiveWidth),
+        stretchSpacing: 0,
+        maxVisible: 10
+    };
+}