react-native-divkit 1.7.0 → 1.8.0

package/src/components/state/DivState.tsx

@@ -1,77 +1,189 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { View } from 'react-native';
+import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
+import { Animated, Easing, View, ViewStyle, LayoutChangeEvent } from 'react-native';
 import type { ComponentContext } from '../../types/componentContext';
 import type { DivStateData, State } from '../../types/state';
+import type { TransitionChange } from '../../types/base';
+import type { MaybeMissing } from '../../expressions/json';
 import { Outer } from '../utilities/Outer';
 import { useStateContext } from '../../context/StateContext';
 import { useDivKitContext } from '../../context/DivKitContext';
+import { DivStateScopeContext, type DivStateScopeValue } from '../../context/DivStateScopeContext';
+import { LayoutParamsContext } from '../../context/LayoutParamsContext';
 import { wrapError } from '../../utils/wrapError';
+import { flattenChangeTransition } from '../../utils/flattenTransition';
 
 export interface DivStateProps {
     componentContext: ComponentContext<DivStateData>;
 }
 
+interface StagedStateChange {
+    targetStateId: string | undefined;
+    div: any;
+}
+
+interface BoundsFrame {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+
 /**
  * DivState component - renders different content based on state
- * MVP implementation with basic features:
+ *
+ * Supports:
  * - State selection by state_id
  * - Default state
- * - State switching via actions (set_state)
- * - State registration in StateContext
- * - State variable binding (state_id_variable)
+ * - State switching via actions (set_state) and via state_id_variable two-way binding
+ * - transition_change on the state container (smooth layout transitions for neighbours via
+ *   configureChangeBoundsLayout)
+ * - Per-element transition_out for children declaring it in the OUTGOING state JSON
+ *   (children register a playOut via DivStateScopeContext; DivState awaits them in parallel
+ *   before mounting the new state). Transition_in for the INCOMING children plays automatically
+ *   on mount via Outer's mode='auto-in'.
  *
- * Deferred for post-MVP:
- * - Transition animations (in/out/change)
- * - Animation timing and interpolation
- * - Clip to bounds
- * - Advanced state management
- * - Multiple concurrent state transitions
- *
- * Based on Web State.svelte
+ * Based on Web State.svelte (simplified — no per-element bbox tracking for transition_change
+ * within state subtree).
  */
 export function DivState({ componentContext }: DivStateProps) {
     const { json } = componentContext;
     const { getVariable } = useDivKitContext();
     const { registerState } = useStateContext();
 
-    // Get state ID for registration
     const stateId = json.div_id || json.id;
 
-    // Find default state
     const defaultStateId = useMemo(() => {
         if (json.default_state_id) {
             return json.default_state_id;
         }
-        // If no default, use first state
         if (json.states && json.states.length > 0) {
             return json.states[0].state_id;
         }
         return undefined;
     }, [json.default_state_id, json.states]);
 
-    // State management
     const [currentStateId, setCurrentStateId] = useState<string | undefined>(defaultStateId);
+    const [stagedStateChange, setStagedStateChange] = useState<StagedStateChange | null>(null);
+    const [contentSize, setContentSize] = useState<{ width: number; height: number } | null>(null);
+    // True while we're awaiting transition_out of the previous state — we keep rendering the
+    // outgoing children during this window so their out-animations remain visible.
+    const [pendingStateId, setPendingStateId] = useState<string | undefined>(undefined);
+
+    // Registry of transition_out players from children inside this state's scope.
+    // The set is REPLACED each time the state swaps (because children unmount), so we don't need
+    // explicit clearing — old entries are pruned naturally by Outer's cleanup effect.
+    const outPlayersRef = useRef<Set<() => Promise<void>>>(new Set());
+    const scopeValue: DivStateScopeValue = useMemo(() => ({
+        registerTransitionOutPlayer(play: () => Promise<void>) {
+            outPlayersRef.current.add(play);
+            return () => {
+                outPlayersRef.current.delete(play);
+            };
+        }
+    }), []);
+
+    const transitionChange = (json as DivStateData).transition_change as MaybeMissing<TransitionChange> | undefined;
+    const stageTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const animatedFrame = useRef({
+        left: new Animated.Value(0),
+        top: new Animated.Value(0),
+        width: new Animated.Value(0),
+        height: new Animated.Value(0),
+    }).current;
+
+    const applyStateChange = useCallback(async (newStateId: string | undefined) => {
+        if (newStateId === currentStateId || newStateId === pendingStateId) return;
+
+        const outPlayers = Array.from(outPlayersRef.current);
+        if (outPlayers.length > 0) {
+            setPendingStateId(newStateId);
+            try {
+                await Promise.all(outPlayers.map(p => p()));
+            } catch (err) {
+                componentContext.logError(wrapError(err as Error, {
+                    additional: { phase: 'state_transition_out' }
+                }));
+            }
+        }
+
+        const nextState = json.states?.find(state => state.state_id === newStateId);
+        const previousState = json.states?.find(state => state.state_id === currentStateId);
+        const nextTransitionChange = (nextState?.div as any)?.transition_change as MaybeMissing<TransitionChange> | undefined;
+        const currentTransitionChange = (previousState?.div as any)?.transition_change as MaybeMissing<TransitionChange> | undefined;
+        const effectiveTransitionChange = nextTransitionChange || currentTransitionChange || transitionChange;
+        const duration = getChangeBoundsDuration(effectiveTransitionChange);
+
+        if (previousState?.div && nextState?.div && contentSize && duration > 0) {
+            const fromFrame = getChildFrame(previousState.div as any, contentSize);
+            const toFrame = getChildFrame(nextState.div as any, contentSize);
+
+            animatedFrame.left.setValue(fromFrame.left);
+            animatedFrame.top.setValue(fromFrame.top);
+            animatedFrame.width.setValue(fromFrame.width);
+            animatedFrame.height.setValue(fromFrame.height);
+            setPendingStateId(newStateId);
+            setStagedStateChange({
+                targetStateId: newStateId,
+                div: createOverlayDiv(previousState.div)
+            });
+
+            await new Promise<void>(resolve => {
+                if (stageTimerRef.current) {
+                    clearTimeout(stageTimerRef.current);
+                }
+
+                Animated.parallel([
+                    Animated.timing(animatedFrame.left, {
+                        toValue: toFrame.left,
+                        duration,
+                        easing: Easing.inOut(Easing.ease),
+                        useNativeDriver: false,
+                    }),
+                    Animated.timing(animatedFrame.top, {
+                        toValue: toFrame.top,
+                        duration,
+                        easing: Easing.inOut(Easing.ease),
+                        useNativeDriver: false,
+                    }),
+                    Animated.timing(animatedFrame.width, {
+                        toValue: toFrame.width,
+                        duration,
+                        easing: Easing.inOut(Easing.ease),
+                        useNativeDriver: false,
+                    }),
+                    Animated.timing(animatedFrame.height, {
+                        toValue: toFrame.height,
+                        duration,
+                        easing: Easing.inOut(Easing.ease),
+                        useNativeDriver: false,
+                    }),
+                ]).start(() => {
+                    resolve();
+                });
+            });
+        }
+
+        setCurrentStateId(newStateId);
+        setStagedStateChange(null);
+        setPendingStateId(undefined);
+    }, [currentStateId, pendingStateId, json.states, transitionChange, contentSize, animatedFrame, componentContext]);
 
     // Handle state_id_variable (two-way binding)
     const stateVariableName = json.state_id_variable;
     const stateVariable = stateVariableName ? getVariable(stateVariableName) : undefined;
 
-    // Sync with state variable
     useEffect(() => {
         if (stateVariable) {
-            // Subscribe to variable changes
             const unsubscribe = stateVariable.subscribe((value: unknown) => {
                 if (typeof value === 'string' && value !== currentStateId) {
-                    setCurrentStateId(value);
+                    void applyStateChange(value);
                 }
             });
-
             return unsubscribe;
         }
         return undefined;
-    }, [stateVariable, currentStateId]);
+    }, [stateVariable, currentStateId, applyStateChange]);
 
-    // Update variable when state changes
     useEffect(() => {
         if (stateVariable && currentStateId) {
             const currentValue = stateVariable.getValue();
@@ -81,19 +193,17 @@ export function DivState({ componentContext }: DivStateProps) {
         }
     }, [stateVariable, currentStateId]);
 
-    // Register state in context for set_state action
     useEffect(() => {
         if (stateId) {
             const unregister = registerState(stateId, async (newStateId: string) => {
-                setCurrentStateId(newStateId);
+                await applyStateChange(newStateId);
                 return undefined;
             });
             return unregister;
         }
         return undefined;
-    }, [stateId, registerState]);
+    }, [stateId, registerState, applyStateChange]);
 
-    // Validate states
     useEffect(() => {
         if (!json.states || json.states.length === 0) {
             componentContext.logError(wrapError(new Error('Empty "states" prop for div "state"')));
@@ -103,7 +213,15 @@ export function DivState({ componentContext }: DivStateProps) {
         }
     }, [json.states, stateId, componentContext]);
 
-    // Find current state
+    useEffect(() => {
+        return () => {
+            if (stageTimerRef.current) {
+                clearTimeout(stageTimerRef.current);
+                stageTimerRef.current = null;
+            }
+        };
+    }, []);
+
     const currentState = useMemo((): State | undefined => {
         if (!json.states) return undefined;
         const found = json.states.find(s => s.state_id === currentStateId);
@@ -111,31 +229,182 @@ export function DivState({ componentContext }: DivStateProps) {
         return found as State;
     }, [json.states, currentStateId]);
 
-    // Create child context for current state
-    const childContext = useMemo(() => {
-        if (!currentState?.div) return undefined;
+    const renderedDiv = currentState?.div;
 
-        return componentContext.produceChildContext(currentState.div, {
+    const childContext = useMemo(() => {
+        if (!renderedDiv) return undefined;
+        return componentContext.produceChildContext(renderedDiv, {
             path: currentStateId
         });
-    }, [currentState, currentStateId, componentContext]);
+    }, [renderedDiv, currentStateId, componentContext]);
+
+    const contentStyle = useMemo((): ViewStyle => {
+        const child = renderedDiv as any;
+        const style: ViewStyle = {
+            width: '100%',
+            alignItems: mapAlignmentToFlex(child?.alignment_horizontal),
+            justifyContent: mapAlignmentToFlex(child?.alignment_vertical),
+        };
+
+        const heightType = (json.height as any)?.type;
+        if (heightType === 'fixed' || heightType === 'match_parent') {
+            style.flex = 1;
+        }
+
+        return style;
+    }, [renderedDiv, json.height]);
 
-    // Render current state
     const renderContent = () => {
-        if (!currentState?.div || !childContext) {
+        if (!renderedDiv || !childContext) {
             return null;
         }
-
         // Import DivComponent dynamically to avoid circular dependency
         // eslint-disable-next-line @typescript-eslint/no-var-requires
         const DivComponent = require('../DivComponent').DivComponent;
-
         return <DivComponent componentContext={childContext} />;
     };
 
+    const overlayContext = useMemo(() => {
+        if (!stagedStateChange?.div) return undefined;
+        return componentContext.produceChildContext(stagedStateChange.div, {
+            path: currentStateId
+        });
+    }, [stagedStateChange, currentStateId, componentContext]);
+
+    const renderOverlay = () => {
+        if (!stagedStateChange?.div || !overlayContext) {
+            return null;
+        }
+        // eslint-disable-next-line @typescript-eslint/no-var-requires
+        const DivComponent = require('../DivComponent').DivComponent;
+        return (
+            <Animated.View
+                pointerEvents="none"
+                style={{
+                    position: 'absolute',
+                    left: animatedFrame.left,
+                    top: animatedFrame.top,
+                    width: animatedFrame.width,
+                    height: animatedFrame.height,
+                    overflow: 'hidden',
+                }}
+            >
+                <LayoutParamsContext.Provider value={{ parentContainerOrientation: 'vertical' }}>
+                    <DivComponent componentContext={overlayContext} />
+                </LayoutParamsContext.Provider>
+            </Animated.View>
+        );
+    };
+
+    const handleContentLayout = useCallback((event: LayoutChangeEvent) => {
+        const { width, height } = event.nativeEvent.layout;
+        setContentSize(prev => {
+            if (prev && prev.width === width && prev.height === height) return prev;
+            return { width, height };
+        });
+    }, []);
+
     return (
         <Outer componentContext={componentContext}>
-            <View>{renderContent()}</View>
+            <DivStateScopeContext.Provider value={scopeValue}>
+                <View style={[contentStyle, { position: 'relative' }]} onLayout={handleContentLayout}>
+                    {stagedStateChange ? (
+                        <View style={{ opacity: 0 }}>
+                            <LayoutParamsContext.Provider value={{ parentContainerOrientation: 'vertical' }}>
+                                {renderContent()}
+                            </LayoutParamsContext.Provider>
+                        </View>
+                    ) : (
+                        <LayoutParamsContext.Provider value={{ parentContainerOrientation: 'vertical' }}>
+                            {renderContent()}
+                        </LayoutParamsContext.Provider>
+                    )}
+                    {renderOverlay()}
+                </View>
+            </DivStateScopeContext.Provider>
         </Outer>
     );
 }
+
+type FlexAlignment = 'flex-start' | 'center' | 'flex-end';
+
+function mapAlignmentToFlex(alignment: string | undefined): FlexAlignment {
+    switch (alignment) {
+        case 'center':
+            return 'center';
+        case 'right':
+        case 'bottom':
+        case 'end':
+            return 'flex-end';
+        case 'left':
+        case 'top':
+        case 'start':
+        default:
+            return 'flex-start';
+    }
+}
+
+function getChangeBoundsDuration(transition: MaybeMissing<TransitionChange> | undefined): number {
+    if (!transition) return 0;
+    return flattenChangeTransition(transition).reduce((max, item) => {
+        const duration = Math.max(0, (item as any).duration ?? 300);
+        const delay = Math.max(0, (item as any).start_delay ?? 0);
+        return Math.max(max, duration + delay);
+    }, 0);
+}
+
+function createOverlayDiv(previousDiv: any): any {
+    return {
+        ...previousDiv,
+        alignment_horizontal: 'left',
+        alignment_vertical: 'top',
+        width: { type: 'match_parent' },
+        height: { type: 'match_parent' },
+        margins: undefined,
+        transition_change: undefined,
+    };
+}
+
+function getChildFrame(div: any, container: { width: number; height: number }): BoundsFrame {
+    const margins = div?.margins || {};
+    const leftMargin = numberOrZero(margins.left ?? margins.start);
+    const rightMargin = numberOrZero(margins.right ?? margins.end);
+    const topMargin = numberOrZero(margins.top);
+    const bottomMargin = numberOrZero(margins.bottom);
+    const availableWidth = Math.max(0, container.width - leftMargin - rightMargin);
+    const availableHeight = Math.max(0, container.height - topMargin - bottomMargin);
+    const width = resolveSize(div?.width, availableWidth);
+    const height = resolveSize(div?.height, availableHeight);
+
+    return {
+        left: resolvePosition(div?.alignment_horizontal, leftMargin, availableWidth, width),
+        top: resolvePosition(div?.alignment_vertical, topMargin, availableHeight, height),
+        width,
+        height,
+    };
+}
+
+function resolveSize(size: any, available: number): number {
+    if (size?.type === 'fixed') return Math.max(0, numberOrZero(size.value));
+    return available;
+}
+
+function resolvePosition(alignment: string | undefined, start: number, available: number, size: number): number {
+    switch (alignment) {
+        case 'center':
+            return start + (available - size) / 2;
+        case 'right':
+        case 'bottom':
+        case 'end':
+            return start + available - size;
+        case 'left':
+        case 'top':
+        case 'start':
+        default:
+            return start;
+    }
+}
+
+function numberOrZero(value: unknown): number {
+    return typeof value === 'number' && Number.isFinite(value) ? value : 0;
+}

package/src/components/utilities/Background.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { StyleSheet, View, ViewStyle } from 'react-native';
 import Svg, { Defs, RadialGradient, Stop, Rect } from 'react-native-svg';
 import type { Background as BackgroundType, RadialBackground } from '../../types/background';
+import { correctColor } from '../../utils/correctColor';
 
 export interface BackgroundProps {
     layers?: BackgroundType[];
@@ -41,7 +42,7 @@ const RadialGradientLayer = ({ layer }: { layer: RadialBackground }) => {
             <Stop
                 key={index}
                 offset={index / (layer.colors!.length - 1)}
-                stopColor={color}
+                stopColor={correctColor(color)}
                 stopOpacity={1}
             />
         ));
@@ -50,7 +51,7 @@ const RadialGradientLayer = ({ layer }: { layer: RadialBackground }) => {
             <Stop
                 key={index}
                 offset={point.position}
-                stopColor={point.color}
+                stopColor={correctColor(point.color)}
                 stopOpacity={1}
             />
         ));
@@ -102,7 +103,7 @@ export const Background = ({ layers, style }: BackgroundProps) => {
                     return (
                         <View
                             key={index}
-                            style={[StyleSheet.absoluteFill, { backgroundColor: layer.color }]}
+                            style={[StyleSheet.absoluteFill, { backgroundColor: correctColor(layer.color) }]}
                         />
                     );
                 }