resolve react compiler compliance in BarChartContent, useChartInteractions, useChartInteractionState, useChartLabelFormats

borys3kk · borys3kk · commit c56403691cb4 · 2026-01-28T17:55:04.000+01:00
diff --git a/src/components/Charts/BarChart/BarChartContent.tsx b/src/components/Charts/BarChart/BarChartContent.tsx
@@ -1,12 +1,13 @@
+import {useFont} from '@shopify/react-native-skia';
 import React, {useCallback, useMemo, useState} from 'react';
 import type {LayoutChangeEvent} from 'react-native';
 import {View} from 'react-native';
 import Animated, {useSharedValue} from 'react-native-reanimated';
 import type {ChartBounds, PointsArray} from 'victory-native';
 import {Bar, CartesianChart} from 'victory-native';
 import ActivityIndicator from '@components/ActivityIndicator';
-import ChartHeader from '@components/Charts/components/ChartHeader';
 import ChartTooltip from '@components/Charts/ChartTooltip';
+import ChartHeader from '@components/Charts/components/ChartHeader';
 import {
     BAR_INNER_PADDING,
     BAR_ROUNDED_CORNERS,
@@ -21,7 +22,6 @@ import {
     Y_AXIS_LINE_WIDTH,
     Y_AXIS_TICK_COUNT,
 } from '@components/Charts/constants';
-import {useFont} from '@shopify/react-native-skia';
 import fontSource from '@components/Charts/font';
 import type {HitTestArgs} from '@components/Charts/hooks';
 import {useChartColors, useChartInteractions, useChartLabelFormats, useChartLabelLayout} from '@components/Charts/hooks';
diff --git a/src/components/Charts/hooks/useChartInteractionState.ts b/src/components/Charts/hooks/useChartInteractionState.ts
@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import type { SharedValue } from 'react-native-reanimated';
-import { makeMutable, useAnimatedReaction } from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
+import {useState} from 'react';
+import type {SharedValue} from 'react-native-reanimated';
+import {makeMutable, useAnimatedReaction} from 'react-native-reanimated';
+import {scheduleOnRN} from 'react-native-worklets';
 
 /**
  * Input field type - matches Victory Native's InputFieldType
@@ -72,13 +72,15 @@ function useIsInteractionActive<Init extends ChartInteractionStateInit>(state: C
  * @param initialValues - Initial x and y values matching your chart data structure
  * @returns Object containing the interaction state and a boolean indicating if interaction is active
  */
-function useChartInteractionState<Init extends ChartInteractionStateInit>(initialValues: Init): {
+function useChartInteractionState<Init extends ChartInteractionStateInit>(
+    initialValues: Init,
+): {
     state: ChartInteractionState<Init>;
     isActive: boolean;
 } {
     // The React Compiler will automatically memoize this object creation.
     // We remove the explicit useMemo and dependency on 'keys'.
-    const yState = {} as Record<keyof Init['y'], { value: SharedValue<number>; position: SharedValue<number> }>;
+    const yState = {} as Record<keyof Init['y'], {value: SharedValue<number>; position: SharedValue<number>}>;
 
     for (const [key, initVal] of Object.entries(initialValues.y)) {
         yState[key as keyof Init['y']] = {
@@ -104,8 +106,8 @@ function useChartInteractionState<Init extends ChartInteractionStateInit>(initia
 
     const isActive = useIsInteractionActive(state);
 
-    return { state, isActive };
+    return {state, isActive};
 }
 
-export { useChartInteractionState };
-export type { ChartInteractionState, ChartInteractionStateInit };
+export {useChartInteractionState};
+export type {ChartInteractionState, ChartInteractionStateInit};
diff --git a/src/components/Charts/hooks/useChartInteractions.ts b/src/components/Charts/hooks/useChartInteractions.ts
@@ -1,87 +1,46 @@
-import { useRef, useState } from 'react';
-import { Gesture } from 'react-native-gesture-handler';
-import type { SharedValue } from 'react-native-reanimated';
-import { useAnimatedReaction, useAnimatedStyle, useDerivedValue } from 'react-native-reanimated';
-import { scheduleOnRN } from 'react-native-worklets';
-import { TOOLTIP_BAR_GAP } from '@components/Charts/constants';
-import { useChartInteractionState } from './useChartInteractionState';
-
-/**
- * Arguments passed to the checkIsOver callback for hit-testing
- */
+import {useRef, useState} from 'react';
+import {Gesture} from 'react-native-gesture-handler';
+import type {SharedValue} from 'react-native-reanimated';
+import {useAnimatedReaction, useAnimatedStyle, useDerivedValue} from 'react-native-reanimated';
+import {scheduleOnRN} from 'react-native-worklets';
+import {TOOLTIP_BAR_GAP} from '@components/Charts/constants';
+import {useChartInteractionState} from './useChartInteractionState';
+
+const INITIAL_INTERACTION_STATE = {x: 0, y: {y: 0}};
+
 type HitTestArgs = {
-    /** Current raw X position of the cursor */
     cursorX: number;
-    /** Current raw Y position of the cursor */
     cursorY: number;
-    /** Calculated X position of the matched data point */
     targetX: number;
-    /** Calculated Y position of the matched data point */
     targetY: number;
-    /** The bottom boundary of the chart area */
     chartBottom: number;
 };
 
-/**
- * Configuration for the chart interactions hook
- */
 type UseChartInteractionsProps = {
-    /** Callback triggered when a valid data point is tapped/clicked */
     handlePress: (index: number) => void;
-    /**
-     * Worklet function to determine if the cursor is technically "hovering"
-     * over a specific chart element (e.g., within a bar's width or a point's radius).
-     */
     checkIsOver: (args: HitTestArgs) => boolean;
-    /** Optional shared value containing bar dimensions used for hit-testing in bar charts */
-    barGeometry?: SharedValue<{ barWidth: number; chartBottom: number; yZero: number }>;
+    barGeometry?: SharedValue<{barWidth: number; chartBottom: number; yZero: number}>;
 };
 
-/**
- * Type for Victory's actionsRef handle.
- * Used to manually trigger Victory's internal touch handling logic.
- */
 type CartesianActionsHandle = {
     handleTouch: (state: unknown, x: number, y: number) => void;
 };
 
-/**
- * Hook to manage complex chart interactions including hover gestures (web),
- * tap gestures (mobile/web), hit-testing, and animated tooltip positioning.
- *
- * It synchronizes high-frequency interaction data from the UI thread to React state
- * for metadata display (like tooltips) and navigation.
- *
- * @param props - Configuration including press handlers and hit-test logic.
- * @returns An object containing refs, gestures, and state for the chart component.
- *
- * @example
- * ```tsx
- * const { actionsRef, customGestures, activeDataIndex, isTooltipActive, tooltipStyle } = useChartInteractions({
- * handlePress: (index) => console.log("Pressed index:", index),
- * checkIsOver: ({ cursorX, targetX, barWidth }) => {
- * 'worklet';
- * return Math.abs(cursorX - targetX) < barWidth / 2;
- * },
- * barGeometry: myBarSharedValue,
- * });
- *
- * return (
- * <View>
- * <CartesianChart customGestures={customGestures} actionsRef={actionsRef} ... />
- * {isTooltipActive && <Animated.View style={tooltipStyle}><Tooltip index={activeDataIndex} /></Animated.View>}
- * </View>
- * );
- * ```
- */
-function useChartInteractions({ handlePress, checkIsOver, barGeometry }: UseChartInteractionsProps) {
-    const { state: chartInteractionState, isActive: isTooltipActiveState } = useChartInteractionState({ x: 0, y: { y: 0 } });
-    const actionsRef = useRef<CartesianActionsHandle>(null);
+function useChartInteractions({handlePress, checkIsOver, barGeometry}: UseChartInteractionsProps) {
+    const {state: chartInteractionState, isActive: isTooltipActiveState} = useChartInteractionState(INITIAL_INTERACTION_STATE);
 
     const [activeDataIndex, setActiveDataIndex] = useState(-1);
     const [isOverTarget, setIsOverTarget] = useState(false);
 
+    const actionsRef = useRef<CartesianActionsHandle>(null);
+
+    const handleTouchWorklet = useDerivedValue(() => {
+        return actionsRef.current?.handleTouch;
+    });
+
     const isCursorOverTarget = useDerivedValue(() => {
+        'worklet';
+
         const cursorX = chartInteractionState.cursor.x.get();
         const cursorY = chartInteractionState.cursor.y.get();
         const targetX = chartInteractionState.x.position.get();
@@ -111,22 +70,29 @@ function useChartInteractions({ handlePress, checkIsOver, barGeometry }: UseChar
         },
     );
 
-    // React Compiler automatycznie zmemoizuje te obiekty gestów
     const hoverGesture = Gesture.Hover()
         .onBegin((e) => {
             'worklet';
 
             chartInteractionState.isActive.set(true);
             chartInteractionState.cursor.x.set(e.x);
             chartInteractionState.cursor.y.set(e.y);
-            actionsRef.current?.handleTouch(chartInteractionState, e.x, e.y);
+
+            const touchFn = handleTouchWorklet.get();
+            if (touchFn) {
+                touchFn(chartInteractionState, e.x, e.y);
+            }
         })
         .onUpdate((e) => {
             'worklet';
 
             chartInteractionState.cursor.x.set(e.x);
             chartInteractionState.cursor.y.set(e.y);
-            actionsRef.current?.handleTouch(chartInteractionState, e.x, e.y);
+
+            const touchFn = handleTouchWorklet.get();
+            if (touchFn) {
+                touchFn(chartInteractionState, e.x, e.y);
+            }
         })
         .onEnd(() => {
             'worklet';
@@ -140,11 +106,13 @@ function useChartInteractions({ handlePress, checkIsOver, barGeometry }: UseChar
         chartInteractionState.cursor.x.set(e.x);
         chartInteractionState.cursor.y.set(e.y);
 
-        actionsRef.current?.handleTouch(chartInteractionState, e.x, e.y);
-        const matchedIndex = chartInteractionState.matchedIndex.get();
-        const isOver = isCursorOverTarget.get();
+        const touchFn = handleTouchWorklet.get();
+        if (touchFn) {
+            touchFn(chartInteractionState, e.x, e.y);
+        }
 
-        if (matchedIndex >= 0 && isOver) {
+        const matchedIndex = chartInteractionState.matchedIndex.get();
+        if (matchedIndex >= 0 && isCursorOverTarget.get()) {
             scheduleOnRN(handlePress, matchedIndex);
         }
     });
@@ -156,14 +124,13 @@ function useChartInteractions({ handlePress, checkIsOver, barGeometry }: UseChar
         const targetY = chartInteractionState.y.y.position.get();
         const yZero = barGeometry?.get().yZero ?? targetY;
         const barTopY = Math.min(targetY, yZero);
-
         const isVisible = chartInteractionState.isActive.get() && isCursorOverTarget.get();
 
         return {
             position: 'absolute',
             left: posX,
             top: barTopY - TOOLTIP_BAR_GAP,
-            transform: [{ translateX: '-50%' }, { translateY: '-100%' }],
+            transform: [{translateX: '-50%'}, {translateY: '-100%'}],
             opacity: isVisible ? 1 : 0,
         };
     });
@@ -177,5 +144,5 @@ function useChartInteractions({ handlePress, checkIsOver, barGeometry }: UseChar
     };
 }
 
-export { useChartInteractions };
-export type { HitTestArgs };
+export {useChartInteractions};
+export type {HitTestArgs};
diff --git a/src/components/Charts/hooks/useChartLabelFormats.ts b/src/components/Charts/hooks/useChartLabelFormats.ts
@@ -1,5 +1,3 @@
-import {useCallback} from 'react';
-
 type ChartDataPoint = {
     label: string;
 };
@@ -13,38 +11,31 @@ type UseChartLabelFormatsProps = {
     truncatedLabels: string[];
 };
 
+/**
+ * Hook for styling chart labels.
+ */
 export default function useChartLabelFormats({data, yAxisUnit, yAxisUnitPosition = 'left', labelSkipInterval, labelRotation, truncatedLabels}: UseChartLabelFormatsProps) {
-    const formatYAxisLabel = useCallback(
-        (value: number) => {
-            const formatted = value.toLocaleString();
-            if (!yAxisUnit) {
-                return formatted;
-            }
-            // Add space for multi-character codes (e.g., "PLN 100") but not for symbols (e.g., "$100")
-            const separator = yAxisUnit.length > 1 ? ' ' : '';
-            return yAxisUnitPosition === 'left' ? `${yAxisUnit}${separator}${formatted}` : `${formatted}${separator}${yAxisUnit}`;
-        },
-        [yAxisUnit, yAxisUnitPosition],
-    );
-
-    const formatXAxisLabel = useCallback(
-        (value: number) => {
-            const index = Math.round(value);
-
-            // Skip labels based on calculated interval
-            if (index % labelSkipInterval !== 0) {
-                return '';
-            }
-
-            // Use pre-truncated labels
-            // If rotation is vertical (-90), we usually want full labels
-            // because they have more space vertically.
-            const sourceToUse = labelRotation === -90 ? data.map((p) => p.label) : truncatedLabels;
-
-            return sourceToUse.at(index) ?? '';
-        },
-        [labelSkipInterval, labelRotation, truncatedLabels, data],
-    );
+    const formatYAxisLabel = (value: number) => {
+        const formatted = value.toLocaleString();
+        if (!yAxisUnit) {
+            return formatted;
+        }
+
+        const separator = yAxisUnit.length > 1 ? ' ' : '';
+        return yAxisUnitPosition === 'left' ? `${yAxisUnit}${separator}${formatted}` : `${formatted}${separator}${yAxisUnit}`;
+    };
+
+    const formatXAxisLabel = (value: number) => {
+        const index = Math.round(value);
+
+        if (index % labelSkipInterval !== 0) {
+            return '';
+        }
+
+        const sourceToUse = labelRotation === -90 ? data.map((p) => p.label) : truncatedLabels;
+
+        return sourceToUse.at(index) ?? '';
+    };
 
     return {
         formatXAxisLabel,
