@controleonline/ui-common 1.2.70

package/src/react/components/BottomNavigationBar.js

@@ -0,0 +1,120 @@
+import React, {useLayoutEffect, useMemo} from 'react';
+import {Pressable, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {useTheme} from './DefaultProvider';
+import RuntimeInfoFooter from './RuntimeInfoFooter';
+import {resolveMenuRouteParams} from '@controleonline/ui-layout/src/react/utils/menuNavigation';
+import createStyles from './BottomNavigationBar.styles';
+
+const BottomNavigationBar = ({
+  navigation,
+  items = [],
+  activeRouteName,
+  disabled = false,
+  colors = {},
+  testID = 'bottom-navigation',
+}) => {
+  const theme = useTheme?.() || {};
+  const runtimeFooter = theme?.runtimeFooter || null;
+  const registerBottomNavigation =
+    theme?.bottomChrome?.registerBottomNavigation || null;
+  const primaryColor = colors.primary || '#1B5587';
+  const dockBackground =
+    colors['toolbar-background'] || colors.background || '#F8FBFF';
+  const borderColor = colors['toolbar-border'] || colors.border || '#D1DDE9';
+  const inactiveText =
+    colors['toolbar-text-muted'] || colors.textSecondary || '#64748B';
+  const activeBg = `${primaryColor}1A`;
+  const activeBorder = `${primaryColor}55`;
+
+  const styles = useMemo(
+    () =>
+      createStyles({
+        primaryColor,
+        dockBackground,
+        borderColor,
+        inactiveText,
+        activeBg,
+        activeBorder,
+      }),
+    [
+      activeBg,
+      activeBorder,
+      borderColor,
+      dockBackground,
+      inactiveText,
+      primaryColor,
+    ],
+  );
+
+  useLayoutEffect(() => {
+    if (typeof registerBottomNavigation !== 'function') {
+      return undefined;
+    }
+
+    return registerBottomNavigation();
+  }, [registerBottomNavigation]);
+
+  const routeItems = Array.isArray(items) ? items : [];
+  const knownRoute = routeItems.some(item => item?.route === activeRouteName);
+  const effectiveActiveRoute = knownRoute
+    ? activeRouteName
+    : routeItems[0]?.route || '';
+
+  const navigateTo = item => {
+    try {
+      navigation?.navigate?.(item?.route, resolveMenuRouteParams(item?.routeParams));
+    } catch {
+      // Keep the footer stable if a route is unavailable in the current app flavor.
+    }
+  };
+
+  return (
+    <View pointerEvents="box-none" style={styles.host}>
+      <View style={styles.stack}>
+        <View style={styles.dock} testID={testID}>
+          {routeItems.map(item => {
+            const isActive = effectiveActiveRoute === item.route;
+            const isDisabled = disabled || item.disabled;
+            const iconSize = item.iconSize || 18;
+            const iconColor = isActive ? primaryColor : inactiveText;
+
+            return (
+              <Pressable
+                key={item.route}
+                accessibilityRole="button"
+                disabled={isDisabled}
+                onPress={() => navigateTo(item)}
+                style={({pressed}) => [
+                  styles.item,
+                  isActive && styles.itemActive,
+                  pressed && !isDisabled && styles.itemPressed,
+                  isDisabled && styles.itemDisabled,
+                ]}>
+                <View style={[styles.iconWrap, isActive && styles.iconWrapActive]}>
+                  <Icon color={iconColor} name={item.icon} size={iconSize} />
+                </View>
+                <Text
+                  numberOfLines={1}
+                  style={[styles.itemLabel, isActive && styles.itemLabelActive]}>
+                  {item.label}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+
+        {runtimeFooter && (
+          <RuntimeInfoFooter
+            appVersion={runtimeFooter.appVersion}
+            colors={runtimeFooter.colors || colors}
+            defaultCompany={runtimeFooter.defaultCompany}
+            device={runtimeFooter.device}
+          />
+        )}
+      </View>
+    </View>
+  );
+};
+
+export default BottomNavigationBar;

package/src/react/components/BottomNavigationBar.styles.js

@@ -0,0 +1,110 @@
+import {Platform, StyleSheet} from 'react-native';
+
+const withAlpha = (color, alphaHex) => {
+  const raw = String(color || '').trim().replace('#', '');
+  if (/^[0-9a-fA-F]{6}$/.test(raw)) {
+    return `#${raw}${alphaHex}`;
+  }
+
+  if (/^[0-9a-fA-F]{8}$/.test(raw)) {
+    return `#${raw.slice(0, 6)}${alphaHex}`;
+  }
+
+  return color || '#1B5587';
+};
+
+const createStyles = ({
+  primaryColor,
+  dockBackground,
+  borderColor,
+  inactiveText,
+  activeBg,
+  activeBorder,
+}) =>
+  StyleSheet.create({
+    host: {
+      position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 1000,
+      backgroundColor: 'transparent',
+      alignItems: 'stretch',
+    },
+    stack: {
+      width: '100%',
+      alignItems: 'stretch',
+    },
+    dock: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      minHeight: 64,
+      paddingHorizontal: 8,
+      paddingTop: 8,
+      paddingBottom: 8,
+      borderWidth: 1,
+      borderBottomWidth: 0,
+      borderColor,
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      backgroundColor: dockBackground,
+      overflow: 'hidden',
+      ...(Platform.OS === 'android'
+        ? {elevation: 10}
+        : {
+            shadowColor: '#0F172A',
+            shadowOpacity: 0.12,
+            shadowOffset: {width: 0, height: -6},
+            shadowRadius: 14,
+          }),
+    },
+    item: {
+      flex: 1,
+      minHeight: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 6,
+      paddingHorizontal: 4,
+      borderWidth: 1,
+      borderColor: 'transparent',
+      borderRadius: 18,
+    },
+    itemActive: {
+      backgroundColor: activeBg,
+      borderColor: activeBorder,
+    },
+    itemPressed: {
+      opacity: 0.92,
+      transform: [{scale: 0.99}],
+    },
+    itemDisabled: {
+      opacity: 0.45,
+    },
+    iconWrap: {
+      width: 24,
+      height: 24,
+      borderRadius: 999,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 4,
+      backgroundColor: 'transparent',
+    },
+    iconWrapActive: {
+      backgroundColor: withAlpha(primaryColor, '18'),
+    },
+    itemLabel: {
+      fontSize: 12,
+      fontWeight: '600',
+      color: inactiveText,
+      textAlign: 'center',
+    },
+    itemLabelActive: {
+      color: primaryColor,
+      fontWeight: '800',
+    },
+  });
+
+export default createStyles;