@ledgerhq/lumen-ui-rnative 0.1.41 → 0.1.43

package/src/lib/Components/SegmentedControl/usePillLayout.ts

@@ -6,6 +6,7 @@ import React, {
   useEffect,
   useMemo,
   useRef,
+  useState,
 } from 'react';
 import type { LayoutChangeEvent } from 'react-native';
 import {
@@ -49,7 +50,9 @@ export function usePillLayout({
   const pillWidth = useSharedValue(0);
   const pillHeight = useSharedValue(0);
   const hasLayoutRef = useRef(false);
+  const animatePillRef = useRef(false);
   const buttonLayoutsRef = useRef(new Map<string, ButtonLayout>());
+  const [layoutReady, setLayoutReady] = useState(false);
 
   const timingConfig = useTimingConfig({
     duration: 300,
@@ -67,9 +70,7 @@ export function usePillLayout({
 
       if (!hasLayoutRef.current) {
         hasLayoutRef.current = true;
-        if (selectedIndex >= 0) {
-          pillTranslateX.value = selectedIndex * slotWidth;
-        }
+        setLayoutReady(true);
       }
     }
   };
@@ -78,31 +79,38 @@ export function usePillLayout({
     (value: string, layout: ButtonLayout): void => {
       buttonLayoutsRef.current.set(value, layout);
 
-      if (tabLayout === 'fit' && !hasLayoutRef.current) {
+      if (
+        tabLayout === 'fit' &&
+        !hasLayoutRef.current &&
+        value === selectedValue
+      ) {
         hasLayoutRef.current = true;
-        if (value === selectedValue) {
-          pillTranslateX.value = layout.x;
-          pillWidth.value = layout.width;
-        }
+        setLayoutReady(true);
       }
     },
-    [tabLayout, selectedValue, pillTranslateX, pillWidth],
+    [tabLayout, selectedValue],
   );
 
   useEffect(() => {
     if (!hasLayoutRef.current) return;
 
+    const skipAnimation = !animatePillRef.current;
+    if (skipAnimation) {
+      animatePillRef.current = true;
+    }
+    const config = skipAnimation ? { duration: 0 } : timingConfig;
+
     if (tabLayout === 'fit') {
       const layout = buttonLayoutsRef.current.get(selectedValue);
       if (layout) {
-        pillTranslateX.value = withTiming(layout.x, timingConfig);
-        pillWidth.value = withTiming(layout.width, timingConfig);
+        pillTranslateX.value = withTiming(layout.x, config);
+        pillWidth.value = withTiming(layout.width, config);
       }
     } else {
       if (selectedIndex >= 0 && pillWidth.value > 0) {
         pillTranslateX.value = withTiming(
           selectedIndex * pillWidth.value,
-          timingConfig,
+          config,
         );
       }
     }
@@ -113,6 +121,7 @@ export function usePillLayout({
     pillWidth,
     pillTranslateX,
     timingConfig,
+    layoutReady,
   ]);
 
   const animatedPillStyle = useAnimatedStyle(

package/src/lib/Components/Trend/Trend.tsx

@@ -3,7 +3,7 @@ import { StyleSheet } from 'react-native';
 import { useCommonTranslation } from '../../../i18n';
 import type { LumenTextStyle } from '../../../styles';
 import { useStyleSheet } from '../../../styles';
-import { Minus, TriangleDown, TriangleUp } from '../../Symbols';
+import { TriangleDown, TriangleUp } from '../../Symbols';
 import type { IconSize } from '../Icon';
 import { Box, Text } from '../Utility';
 import type { TrendProps } from './types';
@@ -17,6 +17,23 @@ function getVariant(value: number): TrendVariant {
   return value > 0 ? 'positive' : 'negative';
 }
 
+const iconMap = {
+  positive: TriangleUp,
+  negative: TriangleDown,
+  neutral: null,
+};
+
+const iconSizeMap: Record<NonNullable<TrendProps['size']>, IconSize> = {
+  md: 16,
+  sm: 12,
+};
+
+const iconColorMap: Record<TrendVariant, LumenTextStyle['color']> = {
+  positive: 'success',
+  negative: 'error',
+  neutral: 'muted',
+};
+
 export function Trend({
   value,
   size = 'md',
@@ -35,26 +52,9 @@ export function Trend({
 
   const styles = useStyles({ size, variant, disabled });
 
-  const Icon = {
-    positive: TriangleUp,
-    negative: TriangleDown,
-    neutral: Minus,
-  }[variant];
-
-  const iconSize = (
-    {
-      md: 16,
-      sm: 12,
-    } as const
-  )[size] as IconSize;
-
-  const iconColor = (
-    {
-      positive: 'success',
-      negative: 'error',
-      neutral: 'muted',
-    } as const
-  )[variant] as LumenTextStyle['color'];
+  const Icon = iconMap[variant];
+  const iconSize = iconSizeMap[size];
+  const iconColor = iconColorMap[variant];
 
   const absoluteFormattedValue = `${Math.abs(value).toFixed(2)}%`;
   const formattedValue =
@@ -71,7 +71,9 @@ export function Trend({
       style={[styles.container, style]}
       {...props}
     >
-      <Icon size={iconSize} color={disabled ? 'disabled' : iconColor} />
+      {Icon && (
+        <Icon size={iconSize} color={disabled ? 'disabled' : iconColor} />
+      )}
       <Text style={styles.text}>{formattedValue}</Text>
     </Box>
   );