feat: add possibility to manage active title globally

changelogs/unreleased/86177.json

@@ -0,0 +1,5 @@
+{
+  "title": "BottomBar: add possibility to manage only the active item title",
+  "type": "feat",
+  "packages": "ui"
+}

packages/ui/src/components/templates/BottomBar/BarItem.tsx

@@ -24,9 +24,8 @@ import Animated, {
   withSpring,
 } from 'react-native-reanimated';
 import {Color, useThemeColor} from '../../../theme';
-import {checkNullString} from '../../../utils';
 import {Button, NumberBubble} from '../../molecules';
-import {Text} from '../../atoms';
+import ItemTitle from './ItemTitle';
 
 const BarItem = ({
   iconName,
@@ -88,7 +87,7 @@ const BarItem = ({
           />
         </Animated.View>
       )}
-      {!checkNullString(title) && <Text>{title}</Text>}
+      <ItemTitle title={title} style={{width: size}} />
     </View>
   );
 };

packages/ui/src/components/templates/BottomBar/BottomBar.tsx

@@ -28,6 +28,7 @@ import {useConfig} from '../../../config/ConfigContext';
 import {useThemeColor} from '../../../theme';
 import {Card} from '../../atoms';
 import BarItem from './BarItem';
+import ItemTitle from './ItemTitle';
 import {BottomBarItem} from './types.helper';
 import {getVisibleItems} from './display.helper';
 
@@ -38,11 +39,13 @@ const BottomBar = ({
   items,
   updateActiveItem = false,
   itemSize = 50,
+  manageActiveTitle = false,
 }: {
   style?: any;
   items: BottomBarItem[];
   updateActiveItem?: boolean;
   itemSize?: number;
+  manageActiveTitle?: boolean;
 }) => {
   const {headerHeight} = useConfig();
   const Colors = useThemeColor();
@@ -105,14 +108,15 @@ const BottomBar = ({
         <View key={item.key} onLayout={event => onItemLayout(event, item.key)}>
           <BarItem
             {...item}
+            title={manageActiveTitle ? undefined : item.title}
             size={itemSize}
             onPress={() => handleItemPress(item)}
             isSelected={selectedKey === item.key && !('onPress' in item)}
           />
         </View>
       );
     },
-    [itemSize, onItemLayout, selectedKey, handleItemPress],
+    [manageActiveTitle, itemSize, selectedKey, onItemLayout, handleItemPress],
   );
 
   useEffect(() => {
@@ -134,11 +138,14 @@ const BottomBar = ({
     }
   }, [updateActiveItem, visibleItems]);
 
+  const activeView = useMemo(
+    () => visibleItems.find(_item => _item.key === selectedKey),
+    [selectedKey, visibleItems],
+  );
+
   return (
     <View style={styles.container}>
-      <View style={{height: viewHeight}}>
-        {visibleItems.find(_item => _item.key === selectedKey)?.viewComponent}
-      </View>
+      <View style={{height: viewHeight}}>{activeView?.viewComponent}</View>
       <View
         onLayout={event => {
           const {height: barHeight} = event.nativeEvent.layout;
@@ -150,18 +157,24 @@ const BottomBar = ({
           );
         }}>
         <Card style={[styles.bottomContainer, style]}>
-          {visibleItems.map(renderItem)}
-          <Animated.View
-            style={[
-              styles.animatedBar,
-              animatedStyle,
-              {
-                backgroundColor:
-                  selectedItemColor?.background != null
-                    ? selectedItemColor?.background
-                    : Colors.primaryColor?.background,
-              },
-            ]}
+          <View style={styles.itemsContainer}>
+            {visibleItems.map(renderItem)}
+            <Animated.View
+              style={[
+                styles.animatedBar,
+                animatedStyle,
+                {
+                  backgroundColor:
+                    selectedItemColor?.background != null
+                      ? selectedItemColor?.background
+                      : Colors.primaryColor?.background,
+                },
+              ]}
+            />
+          </View>
+          <ItemTitle
+            title={manageActiveTitle ? activeView?.title : undefined}
+            style={styles.title}
           />
         </Card>
       </View>
@@ -177,21 +190,27 @@ const styles = StyleSheet.create({
     paddingHorizontal: 20,
     paddingRight: 20,
     paddingVertical: 10,
-    flexDirection: 'row',
+    flexDirection: 'column',
     width: '90%',
-    justifyContent: 'space-between',
-    alignItems: 'flex-end',
     alignSelf: 'center',
     marginBottom: 10,
   },
+  itemsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+  },
   animatedBar: {
     position: 'absolute',
     height: 2,
     width: 41,
-    bottom: 10,
+    bottom: 2,
     left: 7,
     borderRadius: 1,
   },
+  title: {
+    fontWeight: 'bold',
+  },
 });
 
 export default BottomBar;

packages/ui/src/components/templates/BottomBar/ItemTitle.tsx

@@ -0,0 +1,50 @@
+/*
+ * Axelor Business Solutions
+ *
+ * Copyright (C) 2024 Axelor (<http://axelor.com>).
+ *
+ * This program is free software: you can redistribute it and/or  modify
+ * it under the terms of the GNU Affero General Public License, version 3,
+ * as published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import {StyleSheet} from 'react-native';
+import {checkNullString} from '../../../utils';
+import {Text} from '../../atoms';
+
+const ItemTitle = ({
+  style,
+  title,
+  fontSize = 12,
+}: {
+  style?: any;
+  title: string;
+  fontSize?: number;
+}) => {
+  if (checkNullString(title)) {
+    return null;
+  }
+
+  return (
+    <Text fontSize={fontSize} numberOfLines={1} style={[styles.title, style]}>
+      {title}
+    </Text>
+  );
+};
+
+const styles = StyleSheet.create({
+  title: {
+    textAlign: 'center',
+  },
+});
+
+export default ItemTitle;