💄feat(llm/ui): tab selector width (#7590)

LedgerHQ · Aug 20, 2024 · e9bb8b9 · e9bb8b9
1 parent 935ce9f
commit e9bb8b9
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 17 deletions.
diff --git a/.changeset/early-plums-train.md b/.changeset/early-plums-train.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/native-ui": patch
+---
+
+Make llm tab selector component size following the size of the biggest label
diff --git a/libs/ui/packages/native/src/components/Form/TabSelector/index.tsx b/libs/ui/packages/native/src/components/Form/TabSelector/index.tsx
@@ -5,20 +5,21 @@ import styled, { useTheme } from "styled-components/native";
 import { TouchableOpacity } from "react-native";
 import Animated, { useSharedValue, useAnimatedStyle, withSpring } from "react-native-reanimated";
 
-const StyledTouchableOpacity = styled(TouchableOpacity)`
+const StyledTouchableOpacity = styled(TouchableOpacity)<{ width: number }>`
+  width: ${(p) => p.width}px;
   flex: 1;
-  overflow: hidden;
+  height: 100%;
 `;
 
 const StyledFlex = styled(Flex)<{ isSelected: boolean }>`
-  width: 100%;
   height: 100%;
   justify-content: center;
   align-items: center;
 `;
 
 const StyledText = styled(Text)<{ isSelected: boolean }>`
   line-height: 14.52px;
+  overflow: visible;
   text-align: center;
   font-size: 12px;
   color: ${(p) =>
@@ -30,25 +31,22 @@ interface OptionButtonProps<T> {
   selectedOption: T;
   handleSelectOption: (option: T) => void;
   label: string;
+  width: number;
 }
 
 const OptionButton = <T,>({
   option,
   selectedOption,
   handleSelectOption,
   label,
+  width,
 }: OptionButtonProps<T>) => {
   const isSelected = selectedOption === option;
 
   return (
-    <StyledTouchableOpacity onPress={() => handleSelectOption(option)}>
+    <StyledTouchableOpacity width={width} onPress={() => handleSelectOption(option)}>
       <StyledFlex isSelected={isSelected}>
-        <StyledText
-          fontWeight="semiBold"
-          isSelected={isSelected}
-          ellipsizeMode="tail"
-          numberOfLines={1}
-        >
+        <StyledText fontWeight="semiBold" isSelected={isSelected} numberOfLines={1}>
           {label}
         </StyledText>
       </StyledFlex>
@@ -70,10 +68,18 @@ export default function TabSelector<T extends string | number>({
   labels,
 }: TabSelectorProps<T>): JSX.Element {
   const { colors } = useTheme();
-  const translateX = useSharedValue(-39);
+
+  const longuestLabel =
+    labels[options[0]].length > labels[options[1]].length ? options[0] : options[1];
+
+  const widthFactor = 8;
+  const margin = 20;
+  const width = labels[longuestLabel].length * widthFactor + margin;
+  const semiWidth = width / 2;
+  const translateX = useSharedValue(-semiWidth);
 
   useEffect(() => {
-    translateX.value = withSpring(selectedOption === options[0] ? -40 : 40, {
+    translateX.value = withSpring(selectedOption === options[0] ? -semiWidth : semiWidth, {
       damping: 30,
       stiffness: 80,
     });
@@ -90,18 +96,18 @@ export default function TabSelector<T extends string | number>({
       flexDirection={"row"}
       justifyContent={"center"}
       alignItems={"center"}
-      width={"157px"}
+      width={width * 2 + 4}
       height={"35px"}
       borderRadius={"40px"}
-      padding={"2px"}
       bg={colors.opacityDefault.c05}
+      position={"relative"}
     >
       <Animated.View
         style={[
           {
             position: "absolute",
-            width: "48%",
-            height: "96%",
+            width: width - 2,
+            height: "90%",
             backgroundColor: colors.primary.c80,
             borderRadius: 40,
           },
@@ -110,7 +116,8 @@ export default function TabSelector<T extends string | number>({
       />
       {options.map((option) => (
         <OptionButton
-          key={option as unknown as string}
+          width={width}
+          key={option}
           option={option}
           selectedOption={selectedOption}
           handleSelectOption={handleSelectOption}