@controleonline/ui-common 1.2.70 → 1.2.75

package/src/react/components/RuntimeBottomNavigationBar.js

@@ -1,28 +1,27 @@
-import React, {useEffect, useMemo, useState} from 'react';
-import {useNavigationState} from '@react-navigation/native';
-import {useStore} from '@store';
-import {api} from '@controleonline/ui-common/src/api';
-import {env as APP_ENV} from '@env';
-import {colors as runtimeColors} from '@controleonline/../../src/styles/colors';
-import {resolveThemePalette} from '@controleonline/../../src/styles/branding';
-import BottomNavigationBar from '@controleonline/ui-common/src/react/components/BottomNavigationBar';
+import React, {useEffect, useMemo, useState} from 'react';
+import {useNavigationState} from '@react-navigation/native';
+import {useStore} from '@store';
+import {api} from '@controleonline/ui-common/src/api';
+import {app_type} from '@appType';
+import BottomNavigationBar from '@controleonline/ui-common/src/react/components/BottomNavigationBar';
 import {
   getBottomNavigationPreset,
+  resolveBottomNavigationItems,
   resolveBottomNavigationRoute,
 } from '@controleonline/ui-common/src/react/components/BottomNavigationBar.config';
-import {
-  filterRuntimeMenuModulesByType,
-  normalizeAppType,
-  normalizeRuntimeMenuResponse,
-  resolveRuntimeMenuLabel,
-} from '@controleonline/ui-common/src/react/utils/runtimeMenu';
-
-const sortRuntimeMenuItems = (left, right) => {
-  const orderDiff = Number(left?.sortOrder || 0) - Number(right?.sortOrder || 0);
-  if (orderDiff !== 0) return orderDiff;
-  return String(left?.label || '').localeCompare(String(right?.label || ''));
-};
-
+import {
+  filterRuntimeMenuModulesByType,
+  normalizeAppType,
+  normalizeRuntimeMenuResponse,
+  resolveRuntimeMenuLabel,
+} from '@controleonline/ui-common/src/react/utils/runtimeMenu';
+
+const sortRuntimeMenuItems = (left, right) => {
+  const orderDiff = Number(left?.sortOrder || 0) - Number(right?.sortOrder || 0);
+  if (orderDiff !== 0) return orderDiff;
+  return String(left?.label || '').localeCompare(String(right?.label || ''));
+};
+
 const RuntimeBottomNavigationBar = ({
   activeRouteName: activeRouteNameProp,
   colors: colorsOverride,
@@ -31,14 +30,15 @@ const RuntimeBottomNavigationBar = ({
   itemMapper,
   menuType = 'toolbar',
   navigation,
-  presetKey,
-  routeAliases: routeAliasesProp,
-  testID = 'bottom-navigation',
-}) => {
-  const state = useNavigationState(current => current);
-  const activeRouteName =
-    activeRouteNameProp || state?.routes?.[state.index]?.name || 'HomePage';
-
+  presetKey,
+  routeAliases: routeAliasesProp,
+  testID = 'bottom-navigation',
+  useModernWebChromeProps = false,
+}) => {
+  const state = useNavigationState(current => current);
+  const activeRouteName =
+    activeRouteNameProp || state?.routes?.[state.index]?.name || 'HomePage';
+
   const themeStore = useStore('theme');
   const peopleStore = useStore('people');
   const themeGetters = themeStore?.getters || {};
@@ -48,7 +48,7 @@ const RuntimeBottomNavigationBar = ({
   const [runtimeMenus, setRuntimeMenus] = useState([]);
   const preset = presetKey ? getBottomNavigationPreset(presetKey) : null;
   const routeAliases = routeAliasesProp || preset?.routeAliases || {};
-  const appType = normalizeAppType(APP_ENV.APP_TYPE);
+  const appType = normalizeAppType(app_type);
 
   useEffect(() => {
     if (!currentCompany?.id || !menuType) {
@@ -56,96 +56,123 @@ const RuntimeBottomNavigationBar = ({
       return undefined;
     }
 
-    let cancelled = false;
-    setRuntimeMenus([]);
+    if (preset) {
+      const presetMenus = Array.isArray(preset?.items)
+        ? resolveBottomNavigationItems(
+            preset.items.map((item, index) => ({
+              ...item,
+              menuType,
+              sortOrder: Number(item?.sortOrder || (index + 1) * 10),
+            })),
+            global.t?.t,
+          )
+        : [];
 
-    api
-      .fetch('menus-people', {
-        params: {
-          myCompany: currentCompany.id,
-          appType,
-          menuType,
+      setRuntimeMenus([
+        {
+          id: presetKey || 'runtime-bottom-navigation',
+          label: preset?.label || presetKey || '',
+          icon: preset?.icon || '',
+          menus: presetMenus,
         },
-      })
-      .then(result => {
-        if (!cancelled) {
-          setRuntimeMenus(
-            normalizeRuntimeMenuResponse(result, {
-              appType,
-              allowFallback: false,
-            }),
-          );
-        }
-      })
-      .catch(() => {
-        if (!cancelled) {
-          setRuntimeMenus([]);
-        }
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, [appType, currentCompany?.id, menuType]);
-
-  const colors = useMemo(() => {
-    if (colorsOverride) {
-      return colorsOverride;
+      ]);
+      return undefined;
     }
 
-    return resolveThemePalette(
-      {
-        ...themeColors,
-        ...(currentCompany?.theme?.colors || {}),
-      },
-      runtimeColors,
-    );
-  }, [colorsOverride, currentCompany?.theme?.colors, themeColors]);
-
-  const navItems = useMemo(() => {
-    const mapper = typeof itemMapper === 'function' ? itemMapper : item => item;
-    const filter = typeof itemFilter === 'function' ? itemFilter : () => true;
-
-    return filterRuntimeMenuModulesByType(runtimeMenus, menuType)
-      .flatMap(module => (Array.isArray(module?.menus) ? module.menus : []))
-      .map(item => mapper({...item}))
-      .filter(Boolean)
-      .filter(filter)
-      .sort(sortRuntimeMenuItems)
-      .map(item => ({
-        route: item.route,
-        icon: item.icon || 'circle',
-        label: resolveRuntimeMenuLabel(item, global.t?.t),
-        routeParams: item.routeParams,
-        menuType: item.menuType,
-      }))
-      .filter(item => Boolean(item.route));
-  }, [itemFilter, itemMapper, menuType, runtimeMenus]);
-
-  const resolvedActiveRoute = resolveBottomNavigationRoute(
-    routeAliases,
-    activeRouteName,
-  );
-  const knownRoute = navItems.some(item => item.route === resolvedActiveRoute);
-  const effectiveActiveRoute = knownRoute
-    ? resolvedActiveRoute
-    : navItems[0]?.route || activeRouteName;
-
-  const isDisabled =
-    typeof disabledOverride === 'boolean'
-      ? disabledOverride
-      : !currentCompany || Object.keys(currentCompany).length === 0;
-
-  return (
-    <BottomNavigationBar
-      activeRouteName={effectiveActiveRoute}
-      colors={colors}
-      disabled={isDisabled}
-      items={navItems}
-      navigation={navigation}
-      testID={testID}
-    />
-  );
-};
-
-export default RuntimeBottomNavigationBar;
+    let cancelled = false;
+    setRuntimeMenus([]);
+
+    api
+      .fetch('menus-people', {
+        params: {
+          myCompany: currentCompany.id,
+          appType,
+          menuType,
+        },
+      })
+      .then(result => {
+        if (!cancelled) {
+          setRuntimeMenus(
+            normalizeRuntimeMenuResponse(result, {
+              appType,
+              allowFallback: false,
+            }),
+          );
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setRuntimeMenus([]);
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    appType,
+    currentCompany?.id,
+    menuType,
+    preset,
+    presetKey,
+  ]);
+
+  const colors = useMemo(() => {
+    if (colorsOverride) {
+      return colorsOverride;
+    }
+
+    return {
+      ...themeColors,
+      ...(currentCompany?.theme?.colors || {}),
+    };
+  }, [colorsOverride, currentCompany?.theme?.colors, themeColors]);
+
+  const navItems = useMemo(() => {
+    const mapper = typeof itemMapper === 'function' ? itemMapper : item => item;
+    const filter = typeof itemFilter === 'function' ? itemFilter : () => true;
+
+    return filterRuntimeMenuModulesByType(runtimeMenus, menuType)
+      .flatMap(module => (Array.isArray(module?.menus) ? module.menus : []))
+      .map(item => mapper({...item}))
+      .filter(Boolean)
+      .filter(filter)
+      .sort(sortRuntimeMenuItems)
+      .map(item => ({
+        route: item.route,
+        icon: item.icon || 'circle',
+        label: resolveRuntimeMenuLabel(item, global.t?.t),
+        routeParams: item.routeParams,
+        menuType: item.menuType,
+      }))
+      .filter(item => Boolean(item.route));
+  }, [itemFilter, itemMapper, menuType, runtimeMenus]);
+
+  const resolvedActiveRoute = resolveBottomNavigationRoute(
+    routeAliases,
+    activeRouteName,
+  );
+  const knownRoute = navItems.some(item => item.route === resolvedActiveRoute);
+  const effectiveActiveRoute = knownRoute
+    ? resolvedActiveRoute
+    : navItems[0]?.route || activeRouteName;
+
+  const isDisabled =
+    typeof disabledOverride === 'boolean'
+      ? disabledOverride
+      : !currentCompany || Object.keys(currentCompany).length === 0;
+
+  return (
+    <BottomNavigationBar
+      activeRouteName={effectiveActiveRoute}
+      colors={colors}
+      disabled={isDisabled}
+      items={navItems}
+      navigation={navigation}
+      testID={testID}
+      useModernWebChromeProps={useModernWebChromeProps}
+    />
+  );
+};
+
+export default RuntimeBottomNavigationBar;

package/src/react/components/RuntimeInfoFooter.js

@@ -1,28 +1,43 @@
-import React, {useEffect, useMemo, useState} from 'react';
-import {ActivityIndicator, Text, View, useWindowDimensions} from 'react-native';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
+import {
+  ActivityIndicator,
+  Animated,
+  Text,
+  View,
+  useWindowDimensions,
+} from 'react-native';
 import {useStore, useStores} from '@store';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
-import {colors as runtimeColors} from '@controleonline/../../src/styles/colors';
 import {
   DEVICE_RUNTIME_DEBUG_INFO_ENABLED_KEY,
   isTruthyValue,
   parseConfigsObject,
 } from '@controleonline/ui-common/src/react/config/deviceConfigBootstrap';
 import {
-  getRuntimeFooterDebugInfo,
-  getRuntimeFooterPrimaryText,
-  getRuntimeFooterText,
-} from '@controleonline/ui-common/src/react/utils/runtimeFooter';
-import styles from './RuntimeInfoFooter.styles';
-
-const ROTATION_INTERVAL_MS = 6000;
-const COMPACT_BREAKPOINT = 720;
-const MAX_INLINE_TEXT_LENGTH = 84;
+  getRuntimeFooterDebugInfo,
+  getRuntimeFooterPrimaryText,
+  getRuntimeFooterRotationEntries,
+  getRuntimeFooterText,
+  getRuntimeFooterTextLines,
+} from '@controleonline/ui-common/src/react/utils/runtimeFooter';
+import styles from './RuntimeInfoFooter.styles';
+
+const ROTATION_INTERVAL_MS = 6000;
+const FADE_DURATION_MS = 260;
+const COMPACT_BREAKPOINT = 720;
+const MAX_INLINE_TEXT_LENGTH = 84;
 
-const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
+const RuntimeInfoFooter = ({
+  appVersion,
+  defaultCompany,
+  device,
+  colors,
+  useModernWebChromeProps = false,
+}) => {
   const {width} = useWindowDimensions();
   const insets = useSafeAreaInsets();
   const [activeIndex, setActiveIndex] = useState(0);
+  const fadeOpacity = useRef(new Animated.Value(1)).current;
   const allStores = useStores(state => state);
   const deviceConfigStore = useStore('device_config');
   const runtimeDebugStore = useStore('runtime_debug');
@@ -48,10 +63,14 @@ const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
       }),
     [appVersion, device, deviceConfigItem, footerDebugInfo.primaryText],
   );
-  const companyFooterText = useMemo(
-    () => getRuntimeFooterText(defaultCompany),
-    [defaultCompany?.configs],
-  );
+  const companyFooterText = useMemo(
+    () => getRuntimeFooterText(defaultCompany),
+    [defaultCompany?.configs],
+  );
+  const footerTextLines = useMemo(
+    () => getRuntimeFooterTextLines(companyFooterText),
+    [companyFooterText],
+  );
   const deviceConfigs = useMemo(
     () => parseConfigsObject(deviceConfigItem?.configs),
     [deviceConfigItem?.configs],
@@ -64,15 +83,26 @@ const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
     [deviceConfigs],
   );
 
-  const entries = useMemo(
-    () => [primaryText, companyFooterText].filter(Boolean),
-    [companyFooterText, primaryText],
-  );
-  const inlineText = useMemo(() => entries.join('  •  '), [entries]);
-  const shouldRotate =
-    !showDebugInfo &&
-    entries.length > 1 &&
-    (width < COMPACT_BREAKPOINT || inlineText.length > MAX_INLINE_TEXT_LENGTH);
+  const rotationEntries = useMemo(
+    () =>
+      getRuntimeFooterRotationEntries({
+        companyFooterText,
+        primaryText,
+      }),
+    [companyFooterText, primaryText],
+  );
+  const inlineText = useMemo(
+    () => [primaryText, ...footerTextLines].filter(Boolean).join('  •  '),
+    [footerTextLines, primaryText],
+  );
+  const shouldRotate =
+    !showDebugInfo &&
+    rotationEntries.length > 1 &&
+    (
+      footerTextLines.length > 1 ||
+      width < COMPACT_BREAKPOINT ||
+      inlineText.length > MAX_INLINE_TEXT_LENGTH
+    );
   const footerEntries = useMemo(
     () =>
       Object.values(runtimeDebugSummary?.entries || {})
@@ -110,7 +140,26 @@ const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
     () => footerEntries.flatMap(entry => entry?.lines || []),
     [footerEntries],
   );
-  const socketIndicatorColor = socketEntry?.indicatorColor;
+  const socketIndicatorColor = useMemo(() => {
+    const indicatorTone = String(socketEntry?.indicatorTone || '').trim();
+    if (!indicatorTone) {
+      return undefined;
+    }
+
+    if (indicatorTone === 'success') {
+      return colors?.success;
+    }
+
+    if (indicatorTone === 'warning') {
+      return colors?.warning;
+    }
+
+    if (indicatorTone === 'error') {
+      return colors?.error;
+    }
+
+    return undefined;
+  }, [colors?.error, colors?.success, colors?.warning, socketEntry?.indicatorTone]);
   const hasStoreLoading = useMemo(
     () =>
       Object.values(allStores || {}).some(
@@ -123,32 +172,72 @@ const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
   const bottomInset = Math.max(Number(insets.bottom) || 0, 16);
 
   useEffect(() => {
-    if (!shouldRotate || entries.length <= 1) {
+    if (!shouldRotate || rotationEntries.length <= 1) {
       setActiveIndex(0);
+      fadeOpacity.stopAnimation();
+      fadeOpacity.setValue(1);
       return;
     }
-
-    const intervalId = setInterval(() => {
-      setActiveIndex(current => (current + 1) % entries.length);
-    }, ROTATION_INTERVAL_MS);
-
+
+    let timeoutId;
+    let cancelled = false;
+
+    const scheduleTransition = () => {
+      timeoutId = setTimeout(() => {
+        Animated.timing(fadeOpacity, {
+          toValue: 0,
+          duration: FADE_DURATION_MS,
+          useNativeDriver: true,
+        }).start(({finished}) => {
+          if (!finished || cancelled) {
+            return;
+          }
+
+          setActiveIndex(current => (current + 1) % rotationEntries.length);
+
+          Animated.timing(fadeOpacity, {
+            toValue: 1,
+            duration: FADE_DURATION_MS,
+            useNativeDriver: true,
+          }).start(({finished: fadeInFinished}) => {
+            if (fadeInFinished && !cancelled) {
+              scheduleTransition();
+            }
+          });
+        });
+      }, ROTATION_INTERVAL_MS);
+    };
+
+    fadeOpacity.setValue(1);
+    scheduleTransition();
+
     return () => {
-      clearInterval(intervalId);
+      cancelled = true;
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      fadeOpacity.stopAnimation();
     };
-  }, [entries.length, shouldRotate]);
+  }, [fadeOpacity, rotationEntries.length, shouldRotate]);
 
-  if (entries.length === 0 && !showDebugInfo) {
+  if (rotationEntries.length === 0 && !showDebugInfo) {
     return null;
   }
-
-  const displayedText = shouldRotate ? entries[activeIndex] : inlineText;
-  const backgroundColor = colors?.background || runtimeColors.background;
-  const borderColor = colors?.border || runtimeColors.border;
-  const textColor = colors?.textSecondary || runtimeColors.textSecondary;
-  const loadingColor = colors?.primary || runtimeColors.primary || textColor;
+
+  const displayedText = shouldRotate
+    ? rotationEntries[activeIndex]
+    : inlineText;
+  const backgroundColor = colors?.footerBackground;
+  const borderColor = colors?.footerBorder;
+  const textColor = colors?.footerText;
+  const loadingColor = colors?.footerLink;
+  const shellProps = useModernWebChromeProps ? {} : {pointerEvents: 'none'};
+  const shellStyle = useModernWebChromeProps
+    ? [styles.shell, {pointerEvents: 'none'}]
+    : styles.shell;
 
   return (
-    <View pointerEvents="none" style={styles.shell}>
+    <View {...shellProps} style={shellStyle}>
       <View
         testID="runtime-info-footer"
         style={[
@@ -171,18 +260,21 @@ const RuntimeInfoFooter = ({appVersion, defaultCompany, device, colors}) => {
               ]}
             />
           </View>
-          <Text
+          <Animated.Text
             numberOfLines={1}
             ellipsizeMode="tail"
             minimumFontScale={0.85}
             style={[
               styles.primaryText,
+              {
+                opacity: showDebugInfo ? 1 : fadeOpacity,
+              },
               {
                 color: textColor,
               },
             ]}>
             {showDebugInfo ? inlineText || primaryText || device?.id || '--' : displayedText}
-          </Text>
+          </Animated.Text>
           <View style={styles.loadingWrap}>
             {hasStoreLoading && (
               <ActivityIndicator color={loadingColor} size="small" />

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

@@ -18,15 +18,18 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
+    minHeight: 20,
   },
   statusDotWrap: {
     minWidth: 22,
+    minHeight: 20,
     marginRight: 8,
     alignItems: 'center',
     justifyContent: 'center',
   },
   loadingWrap: {
     minWidth: 22,
+    minHeight: 20,
     marginLeft: 8,
     alignItems: 'center',
     justifyContent: 'center',