@controleonline/ui-common 1.2.70 → 1.2.75

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

@@ -1,171 +1,171 @@
-const translateLabel = (translate, descriptor) => {
-  if (!descriptor || typeof descriptor === 'string') {
-    return descriptor || '';
-  }
-
-  const translated = translate?.(
-    descriptor.store,
-    descriptor.type,
-    descriptor.key,
-  );
-
-  return translated || descriptor.fallback || descriptor.key || '';
-};
-
-export const resolveBottomNavigationItems = (items = [], translate) =>
-  (Array.isArray(items) ? items : []).map(item => ({
-    ...item,
-    label: translateLabel(translate, item?.label),
-  }));
-
-export const resolveBottomNavigationRoute = (routeAliases = {}, routeName) =>
-  routeAliases?.[routeName] || routeName || '';
-
-export const BOTTOM_NAVIGATION_PRESETS = {
-  crmToolbar: {
-    items: [
-      {
-        route: 'HomePage',
-        icon: 'home',
-        label: {
-          store: 'users',
-          type: 'label',
-          key: 'home',
-          fallback: 'Home',
-        },
-      },
-      {
-        route: 'CrmIndex',
-        icon: 'target',
-        label: {
-          store: 'users',
-          type: 'label',
-          key: 'crm',
-          fallback: 'CRM',
-        },
-      },
-      {
-        route: 'ClientsIndex',
-        icon: 'users',
-        label: {
-          store: 'users',
-          type: 'label',
-          key: 'clients',
-          fallback: 'Clients',
-        },
-      },
-      {
-        route: 'ProfilePage',
-        icon: 'user',
-        label: {
-          store: 'users',
-          type: 'label',
-          key: 'profile',
-          fallback: 'Profile',
-        },
-      },
-    ],
-    routeAliases: {
-      HomePage: 'HomePage',
-      CrmIndex: 'CrmIndex',
-      ContractsIndex: 'CrmIndex',
-      ProposalsIndex: 'CrmIndex',
-      ComissionsPage: 'CrmIndex',
-      CrmConversation: 'CrmIndex',
-      ContractDetails: 'CrmIndex',
-      ClientsIndex: 'ClientsIndex',
-      ClientDetails: 'ClientsIndex',
-      FranchiseesIndex: 'ClientsIndex',
-      ProfilePage: 'ProfilePage',
-      SettingsPage: 'ProfilePage',
-    },
-  },
-  managerToolbar: {
-    items: [
-      {
-        route: 'HomePage',
-        icon: 'home',
-        label: {
-          store: 'configs',
-          type: 'toolbar',
-          key: 'home',
-          fallback: 'Home',
-        },
-      },
-      {
-        route: 'CrmIndex',
-        icon: 'dollar-sign',
-        label: {
-          store: 'configs',
-          type: 'toolbar',
-          key: 'opportunities',
-          fallback: 'Oportunidades',
-        },
-      },
-      {
-        route: 'ClientsIndex',
-        icon: 'users',
-        label: {
-          store: 'configs',
-          type: 'toolbar',
-          key: 'customers',
-          fallback: 'Clientes',
-        },
-      },
-      {
-        route: 'ProfilePage',
-        icon: 'user',
-        label: {
-          store: 'configs',
-          type: 'toolbar',
-          key: 'profile',
-          fallback: 'Profile',
-        },
-      },
-    ],
-    routeAliases: {
-      HomePage: 'HomePage',
-      CrmIndex: 'CrmIndex',
-      ContractsIndex: 'CrmIndex',
-      ProposalsIndex: 'CrmIndex',
-      ComissionsPage: 'CrmIndex',
-      CrmConversation: 'CrmIndex',
-      ContractDetails: 'CrmIndex',
-      ClientsIndex: 'ClientsIndex',
-      ClientDetails: 'ClientsIndex',
-      FranchiseesIndex: 'ClientsIndex',
-      ProfilePage: 'ProfilePage',
-      SettingsPage: 'ProfilePage',
-      OrderHistoryPage: 'CrmIndex',
-      InventoriesPage: 'CrmIndex',
-      ProductsPage: 'CrmIndex',
-    },
-  },
-  managerDock: {
-    items: [
-      {route: 'HomePage', icon: 'home', label: 'Home'},
-      {route: 'CrmIndex', icon: 'dollar-sign', label: 'Oportunidades'},
-      {route: 'ClientsIndex', icon: 'users', label: 'Clientes'},
-      {route: 'ProfilePage', icon: 'user', label: 'Perfil'},
-    ],
-    routeAliases: {
-      ClientDetails: 'ClientsIndex',
-      EmployeesIndex: 'ClientsIndex',
-      FranchiseesIndex: 'ClientsIndex',
-    },
-  },
-  deliveryDock: {
-    items: [
-      {route: 'HomePage', icon: 'home', label: 'Home'},
-      {route: 'DeliveryOrdersPage', icon: 'shopping-bag', label: 'Pedidos'},
-      {
-        route: 'DeliveryReceivablesPage',
-        icon: 'dollar-sign',
-        label: 'Recebiveis',
-      },
-      {route: 'DeliveryCompaniesPage', icon: 'users', label: 'Empresas'},
-      {route: 'DeliveryRateTablesPage', icon: 'list', label: 'Tabelas'},
-    ],
+const translateLabel = (translate, descriptor) => {
+  if (!descriptor || typeof descriptor === 'string') {
+    return descriptor || '';
+  }
+
+  const translated = translate?.(
+    descriptor.store,
+    descriptor.type,
+    descriptor.key,
+  );
+
+  return translated || descriptor.fallback || descriptor.key || '';
+};
+
+export const resolveBottomNavigationItems = (items = [], translate) =>
+  (Array.isArray(items) ? items : []).map(item => ({
+    ...item,
+    label: translateLabel(translate, item?.label),
+  }));
+
+export const resolveBottomNavigationRoute = (routeAliases = {}, routeName) =>
+  routeAliases?.[routeName] || routeName || '';
+
+export const BOTTOM_NAVIGATION_PRESETS = {
+  crmToolbar: {
+    items: [
+      {
+        route: 'HomePage',
+        icon: 'home',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'home',
+          fallback: 'Início',
+        },
+      },
+      {
+        route: 'CrmIndex',
+        icon: 'target',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'crm',
+          fallback: 'CRM',
+        },
+      },
+      {
+        route: 'ClientsIndex',
+        icon: 'users',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'clients',
+          fallback: 'Clientes',
+        },
+      },
+      {
+        route: 'ProfilePage',
+        icon: 'user',
+        label: {
+          store: 'users',
+          type: 'label',
+          key: 'profile',
+          fallback: 'Perfil',
+        },
+      },
+    ],
+    routeAliases: {
+      HomePage: 'HomePage',
+      CrmIndex: 'CrmIndex',
+      ContractsIndex: 'CrmIndex',
+      ProposalsIndex: 'CrmIndex',
+      ComissionsPage: 'CrmIndex',
+      CrmConversation: 'CrmIndex',
+      ContractDetails: 'CrmIndex',
+      ClientsIndex: 'ClientsIndex',
+      ClientDetails: 'ClientsIndex',
+      FranchiseesIndex: 'ClientsIndex',
+      ProfilePage: 'ProfilePage',
+      SettingsPage: 'ProfilePage',
+    },
+  },
+  managerToolbar: {
+    items: [
+      {
+        route: 'HomePage',
+        icon: 'home',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'home',
+          fallback: 'Início',
+        },
+      },
+      {
+        route: 'CrmIndex',
+        icon: 'dollar-sign',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'opportunities',
+          fallback: 'Oportunidades',
+        },
+      },
+      {
+        route: 'ClientsIndex',
+        icon: 'users',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'customers',
+          fallback: 'Clientes',
+        },
+      },
+      {
+        route: 'ProfilePage',
+        icon: 'user',
+        label: {
+          store: 'configs',
+          type: 'toolbar',
+          key: 'profile',
+          fallback: 'Perfil',
+        },
+      },
+    ],
+    routeAliases: {
+      HomePage: 'HomePage',
+      CrmIndex: 'CrmIndex',
+      ContractsIndex: 'CrmIndex',
+      ProposalsIndex: 'CrmIndex',
+      ComissionsPage: 'CrmIndex',
+      CrmConversation: 'CrmIndex',
+      ContractDetails: 'CrmIndex',
+      ClientsIndex: 'ClientsIndex',
+      ClientDetails: 'ClientsIndex',
+      FranchiseesIndex: 'ClientsIndex',
+      ProfilePage: 'ProfilePage',
+      SettingsPage: 'ProfilePage',
+      OrderHistoryPage: 'CrmIndex',
+      InventoriesPage: 'CrmIndex',
+      ProductsPage: 'CrmIndex',
+    },
+  },
+  managerDock: {
+    items: [
+      {route: 'HomePage', icon: 'home', label: 'Início'},
+      {route: 'CrmIndex', icon: 'dollar-sign', label: 'Oportunidades'},
+      {route: 'ClientsIndex', icon: 'users', label: 'Clientes'},
+      {route: 'ProfilePage', icon: 'user', label: 'Perfil'},
+    ],
+    routeAliases: {
+      ClientDetails: 'ClientsIndex',
+      EmployeesIndex: 'ClientsIndex',
+      FranchiseesIndex: 'ClientsIndex',
+    },
+  },
+  deliveryDock: {
+    items: [
+      {route: 'HomePage', icon: 'home', label: 'Início'},
+      {route: 'DeliveryOrdersPage', icon: 'shopping-bag', label: 'Pedidos'},
+      {
+        route: 'DeliveryReceivablesPage',
+        icon: 'dollar-sign',
+        label: 'Recebiveis',
+      },
+      {route: 'DeliveryCompaniesPage', icon: 'users', label: 'Empresas'},
+      {route: 'DeliveryRateTablesPage', icon: 'list', label: 'Tabelas'},
+    ],
     routeAliases: {
       OrderDetails: 'DeliveryOrdersPage',
       OrderLogisticsPage: 'DeliveryOrdersPage',
@@ -173,66 +173,46 @@ export const BOTTOM_NAVIGATION_PRESETS = {
       DeliveryVehicleSetupPage: 'DeliveryRateTablesPage',
       DeliveryRateTableFormPage: 'DeliveryRateTablesPage',
       DeliveryRateTableCompaniesPage: 'DeliveryRateTablesPage',
-      DeliveryCourierSchedulesPage: 'DeliveryCompaniesPage',
-      DeliveryCourierScheduleFormPage: 'DeliveryCompaniesPage',
-      DeliveryCourierPresencePage: 'DeliveryCompaniesPage',
-      DeliveryCourierPresenceHistoryPage: 'DeliveryCompaniesPage',
-    },
-  },
-  ppcDock: {
-    items: [
-      {route: 'HomePage', icon: 'home', label: 'Home'},
-      {route: 'DisplayList', icon: 'monitor', label: 'Displays'},
-      {route: 'ProfilePage', icon: 'user', label: 'Profile'},
-    ],
-    routeAliases: {},
-  },
-  posToolbar: {
-    items: [
-      {
-        route: 'HomePage',
-        icon: 'home',
-        label: {
-          store: 'orders',
-          type: 'label',
-          key: 'home',
-          fallback: 'Home',
-        },
-      },
-      {
-        route: 'OrderHistoryPage',
-        icon: 'shopping-bag',
-        label: {
-          store: 'orders',
-          type: 'label',
-          key: 'orders',
-          fallback: 'Orders',
-        },
-      },
-      {
-        route: 'CashRegisterIndex',
-        icon: 'credit-card',
-        label: {
-          store: 'orders',
-          type: 'title',
-          key: 'cashRegister',
-          fallback: 'Cash register',
-        },
-      },
-      {
-        route: 'ProfilePage',
-        icon: 'user',
-        label: {
-          store: 'orders',
-          type: 'label',
-          key: 'profile',
-          fallback: 'Profile',
-        },
-      },
-    ],
-    routeAliases: {},
-  },
-};
-
-export const getBottomNavigationPreset = variant =>
-  BOTTOM_NAVIGATION_PRESETS[variant] || BOTTOM_NAVIGATION_PRESETS.managerDock;
+      DeliveryCourierSchedulesPage: 'DeliveryCompaniesPage',
+      DeliveryCourierScheduleFormPage: 'DeliveryCompaniesPage',
+      DeliveryCourierPresencePage: 'DeliveryCompaniesPage',
+      DeliveryCourierPresenceHistoryPage: 'DeliveryCompaniesPage',
+    },
+  },
+  ppcDock: {
+    items: [
+      {route: 'HomePage', icon: 'home', label: 'Início'},
+      {route: 'DisplayList', icon: 'monitor', label: 'Displays'},
+      {route: 'ProfilePage', icon: 'user', label: 'Perfil'},
+    ],
+    routeAliases: {},
+  },
+  posToolbar: {
+    items: [
+      {
+        route: 'OrderHistoryPage',
+        icon: 'shopping-bag',
+        label: {
+          store: 'orders',
+          type: 'label',
+          key: 'orders',
+          fallback: 'Pedidos',
+        },
+      },
+      {
+        route: 'ProfilePage',
+        icon: 'user',
+        label: {
+          store: 'orders',
+          type: 'label',
+          key: 'profile',
+          fallback: 'Perfil',
+        },
+      },
+    ],
+    routeAliases: {},
+  },
+};
+
+export const getBottomNavigationPreset = variant =>
+  BOTTOM_NAVIGATION_PRESETS[variant] || BOTTOM_NAVIGATION_PRESETS.managerDock;

package/src/react/components/BottomNavigationBar.js

@@ -3,7 +3,7 @@ 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 {resolveMenuRouteParams} from '../utils/menuNavigation';
 import createStyles from './BottomNavigationBar.styles';
 
 const BottomNavigationBar = ({
@@ -13,40 +13,80 @@ const BottomNavigationBar = ({
   disabled = false,
   colors = {},
   testID = 'bottom-navigation',
+  useModernWebChromeProps = false,
 }) => {
   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 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({
-        primaryColor,
+        activeBackground,
         dockBackground,
-        borderColor,
-        inactiveText,
-        activeBg,
+        dockBorder,
+        dockShadow,
         activeBorder,
+        useModernWebChromeProps,
       }),
     [
-      activeBg,
+      activeBackground,
       activeBorder,
-      borderColor,
       dockBackground,
-      inactiveText,
-      primaryColor,
+      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;
@@ -69,15 +109,32 @@ const BottomNavigationBar = ({
     }
   };
 
+  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 pointerEvents="box-none" style={styles.host}>
+    <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 = isActive ? primaryColor : inactiveText;
+            const {iconColor, textColor} = resolveItemColors({
+              isActive,
+              isDisabled,
+            });
 
             return (
               <Pressable
@@ -86,17 +143,20 @@ const BottomNavigationBar = ({
                 disabled={isDisabled}
                 onPress={() => navigateTo(item)}
                 style={({pressed}) => [
-                  styles.item,
-                  isActive && styles.itemActive,
-                  pressed && !isDisabled && styles.itemPressed,
-                  isDisabled && styles.itemDisabled,
+                  ...resolveItemStateStyles({isActive, isDisabled}),
+                  ...resolvePressedStyles({pressed, isDisabled}),
                 ]}>
-                <View style={[styles.iconWrap, isActive && styles.iconWrapActive]}>
+                <View style={styles.iconWrap}>
                   <Icon color={iconColor} name={item.icon} size={iconSize} />
                 </View>
                 <Text
                   numberOfLines={1}
-                  style={[styles.itemLabel, isActive && styles.itemLabelActive]}>
+                  style={[
+                    styles.itemLabel,
+                    {
+                      color: textColor,
+                    },
+                  ]}>
                   {item.label}
                 </Text>
               </Pressable>
@@ -105,12 +165,7 @@ const BottomNavigationBar = ({
         </View>
 
         {runtimeFooter && (
-          <RuntimeInfoFooter
-            appVersion={runtimeFooter.appVersion}
-            colors={runtimeFooter.colors || colors}
-            defaultCompany={runtimeFooter.defaultCompany}
-            device={runtimeFooter.device}
-          />
+          <RuntimeInfoFooter {...footerProps} />
         )}
       </View>
     </View>