@ledgerhq/lumen-ui-rnative 0.1.40 → 0.1.42

package/src/lib/Components/SegmentedControl/SegmentedControl.test.tsx

@@ -12,72 +12,164 @@ const TestWrapper = ({ children }: { children: React.ReactNode }) => (
 );
 
 describe('SegmentedControl', () => {
-  it('renders segments with labels', () => {
-    const { getByText } = render(
-      <TestWrapper>
-        <SegmentedControl
-          selectedValue='send'
-          onSelectedChange={() => {
-            /* empty */
-          }}
-          accessibilityLabel='Transaction type'
-        >
-          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
-          <SegmentedControlButton value='receive'>
-            Receive
-          </SegmentedControlButton>
-        </SegmentedControl>
-      </TestWrapper>,
-    );
-    expect(getByText('Send')).toBeTruthy();
-    expect(getByText('Receive')).toBeTruthy();
+  describe('Rendering', () => {
+    it('renders segments with labels', () => {
+      const { getByText } = render(
+        <TestWrapper>
+          <SegmentedControl
+            selectedValue='send'
+            onSelectedChange={() => {
+              /* empty */
+            }}
+            accessibilityLabel='Transaction type'
+          >
+            <SegmentedControlButton value='send'>Send</SegmentedControlButton>
+            <SegmentedControlButton value='receive'>
+              Receive
+            </SegmentedControlButton>
+          </SegmentedControl>
+        </TestWrapper>,
+      );
+      expect(getByText('Send')).toBeTruthy();
+      expect(getByText('Receive')).toBeTruthy();
+    });
+
+    it('renders trailingContent inside segment buttons', () => {
+      const { getByLabelText } = render(
+        <TestWrapper>
+          <SegmentedControl
+            selectedValue='tokens'
+            onSelectedChange={() => {
+              /* empty */
+            }}
+            accessibilityLabel='Asset section'
+          >
+            <SegmentedControlButton
+              value='tokens'
+              trailingContent={
+                <DotCount value={3} accessibilityLabel='3 tokens' />
+              }
+            >
+              Tokens
+            </SegmentedControlButton>
+            <SegmentedControlButton value='nfts'>NFTs</SegmentedControlButton>
+          </SegmentedControl>
+        </TestWrapper>,
+      );
+
+      expect(getByLabelText('3 tokens')).toBeTruthy();
+    });
   });
 
-  it('calls onSelectedChange with segment value when a segment is pressed', () => {
-    const onSelectedChange = jest.fn();
-    const { getByText } = render(
-      <TestWrapper>
-        <SegmentedControl
-          selectedValue='send'
-          onSelectedChange={onSelectedChange}
-          accessibilityLabel='Transaction type'
-        >
-          <SegmentedControlButton value='send'>Send</SegmentedControlButton>
-          <SegmentedControlButton value='receive'>
-            Receive
-          </SegmentedControlButton>
-        </SegmentedControl>
-      </TestWrapper>,
-    );
+  describe('States', () => {
+    it('marks the selected segment with accessibilityState', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <SegmentedControl
+            selectedValue='receive'
+            onSelectedChange={() => {}}
+            accessibilityLabel='Transaction type'
+          >
+            <SegmentedControlButton value='send' testID='seg-send'>
+              Send
+            </SegmentedControlButton>
+            <SegmentedControlButton value='receive' testID='seg-receive'>
+              Receive
+            </SegmentedControlButton>
+          </SegmentedControl>
+        </TestWrapper>,
+      );
 
-    fireEvent.press(getByText('Receive'));
+      expect(getByTestId('seg-send').props.accessibilityState).toMatchObject({
+        selected: false,
+      });
+      expect(getByTestId('seg-receive').props.accessibilityState).toMatchObject(
+        { selected: true },
+      );
+    });
 
-    expect(onSelectedChange).toHaveBeenCalledWith('receive');
-  });
+    it('marks a pre-selected non-first segment as selected on initial render (fixed layout)', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <SegmentedControl
+            selectedValue='blame'
+            onSelectedChange={() => {}}
+            tabLayout='fixed'
+            accessibilityLabel='File view'
+          >
+            <SegmentedControlButton value='preview' testID='seg-preview'>
+              Preview
+            </SegmentedControlButton>
+            <SegmentedControlButton value='raw' testID='seg-raw'>
+              Raw
+            </SegmentedControlButton>
+            <SegmentedControlButton value='blame' testID='seg-blame'>
+              Blame
+            </SegmentedControlButton>
+          </SegmentedControl>
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('seg-preview').props.accessibilityState).toMatchObject(
+        { selected: false },
+      );
+      expect(getByTestId('seg-blame').props.accessibilityState).toMatchObject({
+        selected: true,
+      });
+    });
+
+    it('marks a pre-selected non-first segment as selected on initial render (fit layout)', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <SegmentedControl
+            selectedValue='blame'
+            onSelectedChange={() => {}}
+            tabLayout='fit'
+            accessibilityLabel='File view'
+          >
+            <SegmentedControlButton value='preview' testID='seg-preview'>
+              Preview
+            </SegmentedControlButton>
+            <SegmentedControlButton value='raw' testID='seg-raw'>
+              Raw
+            </SegmentedControlButton>
+            <SegmentedControlButton value='blame' testID='seg-blame'>
+              Blame
+            </SegmentedControlButton>
+          </SegmentedControl>
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('seg-preview').props.accessibilityState).toMatchObject(
+        { selected: false },
+      );
+      expect(getByTestId('seg-blame').props.accessibilityState).toMatchObject({
+        selected: true,
+      });
+    });
 
-  it('renders trailingContent inside segment buttons', () => {
-    const { getByLabelText } = render(
-      <TestWrapper>
-        <SegmentedControl
-          selectedValue='tokens'
-          onSelectedChange={() => {
-            /* empty */
-          }}
-          accessibilityLabel='Asset section'
-        >
-          <SegmentedControlButton
-            value='tokens'
-            trailingContent={
-              <DotCount value={3} accessibilityLabel='3 tokens' />
-            }
+    it('can change selection away from a pre-selected non-first segment (fit layout)', () => {
+      const onSelectedChange = jest.fn();
+      const { getByText } = render(
+        <TestWrapper>
+          <SegmentedControl
+            selectedValue='blame'
+            onSelectedChange={onSelectedChange}
+            tabLayout='fit'
+            accessibilityLabel='File view'
           >
-            Tokens
-          </SegmentedControlButton>
-          <SegmentedControlButton value='nfts'>NFTs</SegmentedControlButton>
-        </SegmentedControl>
-      </TestWrapper>,
-    );
+            <SegmentedControlButton value='preview'>
+              Preview
+            </SegmentedControlButton>
+            <SegmentedControlButton value='raw'>Raw</SegmentedControlButton>
+            <SegmentedControlButton value='blame'>Blame</SegmentedControlButton>
+          </SegmentedControl>
+        </TestWrapper>,
+      );
+
+      fireEvent.press(getByText('Preview'));
 
-    expect(getByLabelText('3 tokens')).toBeTruthy();
+      expect(onSelectedChange).toHaveBeenCalledWith('preview');
+    });
   });
 });

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>
   );