@controleonline/ui-common 1.2.87 → 1.2.88

package/src/react/components/BottomNavigationBar.js

@@ -1,175 +1,179 @@
-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 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 '../utils/menuNavigation';
-import createStyles from './BottomNavigationBar.styles';
-
-const BottomNavigationBar = ({
-  navigation,
-  items = [],
-  activeRouteName,
-  disabled = false,
-  colors = {},
-  testID = 'bottom-navigation',
-  useModernWebChromeProps = false,
-}) => {
-  const theme = useTheme?.() || {};
-  const runtimeFooter = theme?.runtimeFooter || null;
-  const registerBottomNavigation =
-    theme?.bottomChrome?.registerBottomNavigation || null;
-  const activeBackground = colors.navigationActiveBackground;
-  const activeBorder = colors.navigationActiveBorder;
-  const activeIcon = colors.navigationActiveIcon;
-  const activeText = colors.navigationActiveText;
-  const dockBackground = colors.navigationBackground;
-  const dockBorder = colors.navigationBorder;
-  const dockShadow = colors.navigationShadow;
-  const inactiveIcon = colors.navigationIcon;
-  const inactiveText = colors.navigationText;
-
-  const styles = useMemo(
-    () =>
-      createStyles({
-        activeBackground,
-        dockBackground,
-        dockBorder,
-        dockShadow,
-        activeBorder,
-        useModernWebChromeProps,
-      }),
-    [
-      activeBackground,
-      activeBorder,
-      dockBackground,
-      dockBorder,
-      dockShadow,
-      useModernWebChromeProps,
-    ],
-  );
-
-  const resolveItemColors = ({isActive, isDisabled}) => {
-    if (isActive) {
-      return {
-        iconColor: activeIcon,
-        textColor: activeText,
-      };
-    }
-
-    if (isDisabled) {
-      return {
-        iconColor: colors.navigationDisabledIcon,
-        textColor: colors.navigationDisabledText,
-      };
-    }
-
-    return {
-      iconColor: inactiveIcon,
-      textColor: inactiveText,
-    };
-  };
-
-  const resolveItemStateStyles = ({isActive, isDisabled}) => [
-    styles.item,
-    isActive && styles.itemActive,
-    isDisabled && styles.itemDisabled,
-    isDisabled && {
-      backgroundColor: colors.navigationDisabledBackground,
-      borderColor: colors.navigationDisabledBorder,
-    },
-  ];
-
-  const resolvePressedStyles = ({pressed, isDisabled}) =>
-    pressed && !isDisabled
-      ? [
-          styles.itemPressed,
-        ]
-      : [];
-
-  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.
-    }
-  };
-
-  const hostProps = useModernWebChromeProps
-    ? {}
-    : {pointerEvents: 'box-none'};
-  const hostStyle = useModernWebChromeProps
-    ? [styles.host, styles.hostPointerEventsBoxNone]
-    : styles.host;
-  const footerProps = {
-    appVersion: runtimeFooter?.appVersion,
-    colors: runtimeFooter?.colors || {},
-    defaultCompany: runtimeFooter?.defaultCompany,
-    device: runtimeFooter?.device,
-    useModernWebChromeProps,
-  };
-
-  return (
-    <View {...hostProps} style={hostStyle}>
-      <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, textColor} = resolveItemColors({
-              isActive,
-              isDisabled,
-            });
-
-            return (
-              <Pressable
-                key={item.route}
-                accessibilityRole="button"
-                disabled={isDisabled}
-                onPress={() => navigateTo(item)}
-                style={({pressed}) => [
-                  ...resolveItemStateStyles({isActive, isDisabled}),
-                  ...resolvePressedStyles({pressed, isDisabled}),
-                ]}>
-                <View style={styles.iconWrap}>
-                  <Icon color={iconColor} name={item.icon} size={iconSize} />
-                </View>
-                <Text
-                  numberOfLines={1}
-                  style={[
-                    styles.itemLabel,
-                    {
-                      color: textColor,
-                    },
-                  ]}>
-                  {item.label}
-                </Text>
-              </Pressable>
-            );
-          })}
-        </View>
-
-        {runtimeFooter && (
-          <RuntimeInfoFooter {...footerProps} />
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default BottomNavigationBar;
+import createStyles from './BottomNavigationBar.styles';
+
+const BottomNavigationBar = ({
+  navigation,
+  items = [],
+  activeRouteName,
+  disabled = false,
+  colors = {},
+  testID = 'bottom-navigation',
+  useModernWebChromeProps = false,
+}) => {
+  const theme = useTheme?.() || {};
+  const runtimeFooter = theme?.runtimeFooter || null;
+  const registerBottomNavigation =
+    theme?.bottomChrome?.registerBottomNavigation || null;
+  const activeBackground = colors.navigationActiveBackground;
+  const activeBorder = colors.navigationActiveBorder;
+  const activeIcon = colors.navigationActiveIcon;
+  const activeText = colors.navigationActiveText;
+  const dockBackground = colors.navigationBackground;
+  const dockBorder = colors.navigationBorder;
+  const dockShadow = colors.navigationShadow;
+  const inactiveIcon = colors.navigationIcon;
+  const inactiveText = colors.navigationText;
+
+  const styles = useMemo(
+    () =>
+      createStyles({
+        activeBackground,
+        dockBackground,
+        dockBorder,
+        dockShadow,
+        activeBorder,
+        useModernWebChromeProps,
+      }),
+    [
+      activeBackground,
+      activeBorder,
+      dockBackground,
+      dockBorder,
+      dockShadow,
+      useModernWebChromeProps,
+    ],
+  );
+
+  const resolveItemColors = ({isActive, isDisabled}) => {
+    if (isActive) {
+      return {
+        iconColor: activeIcon,
+        textColor: activeText,
+      };
+    }
+
+    if (isDisabled) {
+      return {
+        iconColor: colors.navigationDisabledIcon,
+        textColor: colors.navigationDisabledText,
+      };
+    }
+
+    return {
+      iconColor: inactiveIcon,
+      textColor: inactiveText,
+    };
+  };
+
+  const resolveItemStateStyles = ({isActive, isDisabled}) => [
+    styles.item,
+    isActive && styles.itemActive,
+    isDisabled && styles.itemDisabled,
+    isDisabled && {
+      backgroundColor: colors.navigationDisabledBackground,
+      borderColor: colors.navigationDisabledBorder,
+    },
+  ];
+
+  const resolvePressedStyles = ({pressed, isDisabled}) =>
+    pressed && !isDisabled
+      ? [
+          styles.itemPressed,
+        ]
+      : [];
+
+  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.
+    }
+  };
+
+  const hostProps = useModernWebChromeProps
+    ? {}
+    : {pointerEvents: 'box-none'};
+  const hostStyle = useModernWebChromeProps
+    ? [styles.host, styles.hostPointerEventsBoxNone]
+    : styles.host;
+  const footerProps = {
+    appVersion: runtimeFooter?.appVersion,
+    colors: runtimeFooter?.colors || {},
+    mainCompany: runtimeFooter?.mainCompany,
+    device: runtimeFooter?.device,
+    useModernWebChromeProps,
+  };
+
+  return (
+    <View {...hostProps} style={hostStyle}>
+      <View style={styles.stack}>
+        <View style={styles.dock} testID={testID}>
+          <View style={styles.itemsRow}>
+            {routeItems.map(item => {
+              const isActive = effectiveActiveRoute === item.route;
+              const isDisabled = disabled || item.disabled;
+              const iconSize = item.iconSize || 18;
+              const {iconColor, textColor} = resolveItemColors({
+                isActive,
+                isDisabled,
+              });
+
+              return (
+                <Pressable
+                  key={item.route}
+                  accessibilityRole="button"
+                  disabled={isDisabled}
+                  onPress={() => navigateTo(item)}
+                  style={({pressed}) => [
+                    ...resolveItemStateStyles({isActive, isDisabled}),
+                    ...resolvePressedStyles({pressed, isDisabled}),
+                  ]}>
+                  <View style={styles.iconWrap}>
+                    <Icon color={iconColor} name={item.icon} size={iconSize} />
+                  </View>
+                  <Text
+                    numberOfLines={1}
+                    style={[
+                      styles.itemLabel,
+                      {
+                        color: textColor,
+                      },
+                    ]}>
+                    {item.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+          {/* app-community#384: texto do rodapé DEPOIS dos botões (não antes) */}
+          {runtimeFooter ? (
+            <View style={styles.footerSlot} testID="bottom-navigation-footer-slot">
+              <RuntimeInfoFooter {...footerProps} />
+            </View>
+          ) : null}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default BottomNavigationBar;

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

@@ -1,118 +1,139 @@
-import {Platform, StyleSheet} from 'react-native';
-
-const resolveWebShadowColor = shadowColor => {
-  if (typeof shadowColor !== 'string') {
-    return 'rgba(0, 0, 0, 0.12)';
-  }
-
-  const normalized = shadowColor.trim();
-  if (!normalized) {
-    return 'rgba(0, 0, 0, 0.12)';
-  }
-
-  if (/^#[0-9a-f]{3}$/i.test(normalized)) {
-    return `${normalized[0]}${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}1f`;
-  }
-
-  if (/^#[0-9a-f]{6}$/i.test(normalized)) {
-    return `${normalized}1f`;
-  }
-
-  if (/^#[0-9a-f]{4}$/i.test(normalized) || /^#[0-9a-f]{8}$/i.test(normalized)) {
-    return normalized;
-  }
-
-  return normalized;
-};
-
-const createStyles = ({
-  activeBackground,
-  dockBackground,
-  dockBorder,
-  dockShadow,
-  activeBorder,
-  useModernWebChromeProps = false,
-}) =>
-  StyleSheet.create({
-    host: {
-      position: Platform.OS === 'web' ? 'fixed' : 'absolute',
-      left: 0,
-      right: 0,
-      bottom: 0,
-      zIndex: 1000,
-      backgroundColor: 'transparent',
-      alignItems: 'stretch',
-    },
-    hostPointerEventsBoxNone: {
-      pointerEvents: 'box-none',
-    },
-    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: dockBorder,
-      borderTopLeftRadius: 24,
-      borderTopRightRadius: 24,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      backgroundColor: dockBackground,
-      overflow: 'hidden',
-      ...(Platform.OS === 'android'
-        ? {elevation: 10}
-        : Platform.OS === 'web' && useModernWebChromeProps
-          ? {
-              boxShadow: `0px -6px 14px ${resolveWebShadowColor(dockShadow)}`,
-            }
-        : {
-            shadowColor: dockShadow,
-            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: activeBackground,
-      borderColor: activeBorder,
-    },
-    itemPressed: {
-      transform: [{scale: 0.99}],
-    },
-    itemDisabled: {},
-    iconWrap: {
-      width: 24,
-      height: 24,
-      borderRadius: 999,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginBottom: 4,
-      backgroundColor: 'transparent',
-    },
-    itemLabel: {
-      fontSize: 12,
-      fontWeight: '600',
-      textAlign: 'center',
-    },
-  });
-
-export default createStyles;
+import {Platform, StyleSheet} from 'react-native';
+
+const resolveWebShadowColor = shadowColor => {
+  if (typeof shadowColor !== 'string') {
+    return 'rgba(0, 0, 0, 0.12)';
+  }
+
+  const normalized = shadowColor.trim();
+  if (!normalized) {
+    return 'rgba(0, 0, 0, 0.12)';
+  }
+
+  if (/^#[0-9a-f]{3}$/i.test(normalized)) {
+    return `${normalized[0]}${normalized[1]}${normalized[1]}${normalized[2]}${normalized[2]}${normalized[3]}${normalized[3]}1f`;
+  }
+
+  if (/^#[0-9a-f]{6}$/i.test(normalized)) {
+    return `${normalized}1f`;
+  }
+
+  if (/^#[0-9a-f]{4}$/i.test(normalized) || /^#[0-9a-f]{8}$/i.test(normalized)) {
+    return normalized;
+  }
+
+  return normalized;
+};
+
+const createStyles = ({
+  activeBackground,
+  dockBackground,
+  dockBorder,
+  dockShadow,
+  activeBorder,
+  useModernWebChromeProps = false,
+}) =>
+  StyleSheet.create({
+    host: {
+      position: Platform.OS === 'web' ? 'fixed' : 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 1000,
+      backgroundColor: 'transparent',
+      alignItems: 'stretch',
+    },
+    hostPointerEventsBoxNone: {
+      pointerEvents: 'box-none',
+    },
+    stack: {
+      width: '100%',
+      alignItems: 'stretch',
+    },
+    dock: {
+      // app-community#828: column — buttons on top, runtime footer below.
+      // row was crushing nav buttons against the footer strip on the sides.
+      flexDirection: 'column',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      minHeight: 64,
+      paddingHorizontal: 8,
+      paddingTop: 6,
+      paddingBottom: 8,
+      borderWidth: 1,
+      borderBottomWidth: 0,
+      borderColor: dockBorder,
+      borderTopLeftRadius: 24,
+      borderTopRightRadius: 24,
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0,
+      backgroundColor: dockBackground,
+      overflow: 'visible',
+      ...(Platform.OS === 'android'
+        ? {elevation: 10}
+        : Platform.OS === 'web' && useModernWebChromeProps
+          ? {
+              boxShadow: `0px -6px 14px ${resolveWebShadowColor(dockShadow)}`,
+            }
+        : {
+            shadowColor: dockShadow,
+            shadowOpacity: 0.12,
+            shadowOffset: {width: 0, height: -6},
+            shadowRadius: 14,
+          }),
+    },
+    footerSlot: {
+      // Strip below the nav buttons (#384): text after buttons, same dock chrome
+      width: '100%',
+      minHeight: 24,
+      paddingHorizontal: 4,
+      paddingTop: 2,
+      paddingBottom: 2,
+      flexShrink: 0,
+      zIndex: 1,
+    },
+    itemsRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      width: '100%',
+      minHeight: 52,
+      flexShrink: 0,
+    },
+    item: {
+      flex: 1,
+      minWidth: 56,
+      minHeight: 44,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 6,
+      paddingHorizontal: 4,
+      borderWidth: 1,
+      borderColor: 'transparent',
+      borderRadius: 18,
+    },
+    itemActive: {
+      backgroundColor: activeBackground,
+      borderColor: activeBorder,
+    },
+    itemPressed: {
+      transform: [{scale: 0.99}],
+    },
+    itemDisabled: {},
+    iconWrap: {
+      width: 24,
+      height: 24,
+      borderRadius: 999,
+      alignItems: 'center',
+      justifyContent: 'center',
+      marginBottom: 4,
+      backgroundColor: 'transparent',
+    },
+    itemLabel: {
+      fontSize: 12,
+      fontWeight: '600',
+      textAlign: 'center',
+    },
+  });
+
+export default createStyles;