correct native Tabs styles

BouyguesTelecom · Apr 29, 2024 · 0ac2781 · 0ac2781
1 parent 3164278
commit 0ac2781
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 28 deletions.
diff --git a/examples/react-template/screens/Tab.tsx b/examples/react-template/screens/Tab.tsx
@@ -42,16 +42,42 @@ export const TabScreen = (): JSX.Element => {
         </TabsItem>
       </Tabs>
 
-      <Tabs activeIndex={activeIndexEventTab} inverted>
+      <Tabs activeIndex={activeIndexEventTab} centered>
         <TabsItem
           disabled
+          iconName={IconName.BELL}
+          active={activeIndexEventTab === 0}
+          onClick={() => setActivateIndexEventTab(0)}
+        >
+          Centered
+        </TabsItem>
+        <TabsItem
+          iconName={IconName.BELL}
+          active={activeIndexEventTab === 1}
+          onClick={() => setActivateIndexEventTab(1)}
+        >
+          Two
+        </TabsItem>
+        <TabsItem
+          iconName={IconName.BELL}
+          active={activeIndexEventTab === 2}
+          onClick={() => setActivateIndexEventTab(2)}
+        >
+          Three
+        </TabsItem>
+      </Tabs>
+
+      <Tabs activeIndex={activeIndexEventTab} inverted>
+        <TabsItem
+
           iconName={IconName.BELL}
           active={activeIndexEventTab === 0}
           onClick={() => setActivateIndexEventTab(0)}
         >
           One
         </TabsItem>
         <TabsItem
+          disabled
           iconName={IconName.EYE_SLASH}
           active={activeIndexEventTab === 1}
           onClick={() => setActivateIndexEventTab(1)}

diff --git a/examples/react-template/screens/index.ts b/examples/react-template/screens/index.ts
@@ -15,7 +15,6 @@ export * from "./CountDown";
 export * from "./Divider";
 export * from "./Dropdown";
 export * from "./Fab";
-export * from "./Form";
 export * from "./Hero";
 export * from "./Image";
 export * from "./Icon";

diff --git a/packages/react/components/tabs/Tabs.native.tsx b/packages/react/components/tabs/Tabs.native.tsx
@@ -13,8 +13,9 @@ import { ComponentName } from '../enumsComponentsName'
  * @param activeIndex {number} default active tab index
  * @param disabled {boolean} Disabled tabs
  * @param inverted {boolean} dark mode
+ * @param centered {boolean} Is centered
  */
-const Tabs = ({ children, onClick, activeIndex, disabled, inverted, ...others }: TabsProps): JSX.Element => {
+const Tabs = ({ children, onClick, activeIndex, disabled, centered, inverted, ...others }: TabsProps): JSX.Element => {
   const [activateIndex, setActivateIndex] = useState(activeIndex)
   const [isIcons, setIsIcons] = React.useState(false)
 
@@ -41,13 +42,13 @@ const Tabs = ({ children, onClick, activeIndex, disabled, inverted, ...others }:
     tabs: {
       height: isIcons ? 64 : 48,
       flexDirection: 'row',
-      backgroundColor: inverted ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.WHITE),
-      overflow: 'visible',
+      backgroundColor: inverted ? getColorStyle(TrilogyColor.MAIN) : getColorStyle(TrilogyColor.WHITE)
     },
   })
 
   return (
-    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.tabs} {...others}>
+    <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.tabs} {...others}
+    contentContainerStyle={centered && { justifyContent: "center", flexGrow: 1 }}>
       {children &&
         Array.isArray(children) &&
         // eslint-disable-next-line @typescript-eslint/no-explicit-any

diff --git a/packages/react/components/tabs/item/TabsItem.native.tsx b/packages/react/components/tabs/item/TabsItem.native.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react"
-import { StyleSheet, TouchableOpacity, View } from "react-native"
+import { StyleSheet, TouchableOpacity, View, Dimensions } from "react-native"
 import { TabsItemProps } from "./TabsItemProps"
 import { getColorStyle, TrilogyColor } from "../../../objects/facets/Color"
 import { TypographyBold } from "../../../objects"
@@ -28,42 +28,43 @@ const TabsItem = ({
   const [activeItem, setActiveItem] = useState<boolean>(active || false)
   const [isPressIn, setInPressIn] = useState<boolean>(false)
 
+
   const getIconColor = React.useMemo(() => {
     if (inverted) {
-      if (disabled) return TrilogyColor.DISABLED
+      if (disabled) return TrilogyColor.NEUTRAL_LIGHT
       return TrilogyColor.WHITE
     }
     if (disabled) return TrilogyColor.DISABLED
     if (active) return TrilogyColor.MAIN
-    return TrilogyColor.MAIN
+  return TrilogyColor.MAIN
+}, [inverted, disabled, active])
+
+  const getBorderColor = React.useMemo(() => {
+    if (disabled)
+      return 'transparent'
+    if (inverted) {
+      if (active) return getColorStyle(TrilogyColor.WHITE)
+      return getColorStyle(TrilogyColor.FONT, 1)
+    }
+    if (active) return getColorStyle(TrilogyColor.MAIN)
+    return getColorStyle(TrilogyColor.FONT, 1)
   }, [inverted, disabled, active])
 
   const styles = StyleSheet.create({
     tabsItem: {
-      marginRight: 8,
       alignItems: "center",
       justifyContent: "center",
-      ...(tabIndex === 0 && { marginLeft: 24 }),
-      padding: 8,
+      paddingVertical: 6,
+      paddingHorizontal: 14,
       position: "relative",
+      borderBottomWidth: 2,
+      height: iconName ? 60 : 44,
+      borderBottomColor: getBorderColor,
     },
     text: {
-      color:
-        isPressIn && !inverted && !disabled
-          ? getColorStyle(TrilogyColor.MAIN)
-          : getColorStyle(getIconColor),
+      color: getColorStyle(getIconColor),
       textAlign: "center",
     },
-    activeBar: {
-      height: 2,
-      backgroundColor: inverted
-        ? getColorStyle(TrilogyColor.WHITE)
-        : getColorStyle(TrilogyColor.MAIN),
-      width: "100%",
-      position: "absolute",
-      bottom: 4,
-      borderRadius: 2,
-    },
   })
 
   useEffect(() => {
@@ -87,7 +88,7 @@ const TabsItem = ({
       {...others}
     >
       {iconName && (
-        <View>
+        <View >
           <Icon color={getIconColor} size='small' name={iconName} />
         </View>
       )}
@@ -108,7 +109,6 @@ const TabsItem = ({
         ) : (
           children
         ))}
-      {active && !disabled && <View style={styles.activeBar}></View>}
     </TouchableOpacity>
   )
 }