@controleonline/ui-common 1.2.87 → 1.2.89

package/src/react/components/RuntimeFooterMarqueeText.js

@@ -1,6 +1,12 @@
 const React = require('react');
 const {useEffect, useRef, useState} = React;
-const {Animated, Text, View} = require('react-native');
+const RN = require('react-native');
+const Animated = RN.Animated;
+const Text = RN.Text;
+const View = RN.View;
+const Platform = RN.Platform || {OS: 'native'};
+const USE_NATIVE_DRIVER = Platform.OS !== 'web';
+const IS_WEB = Platform.OS === 'web';
 
 const GAP_PX = 32;
 const MS_PER_PX = 28;
@@ -10,21 +16,28 @@ const HOLD_MS = 1200;
 /**
  * Single-line footer text. When content overflows the available width,
  * scrolls horizontally in a continuous loop. Short text stays static.
+ * On web, avoids Animated opacity/transform issues that hid the label.
+ * RN Web also needs intrinsic sizing because Text can collapse to width 0
+ * inside a flex row.
+ *
+ * IMPORTANT: do not use destructuring defaults on require('react-native')
+ * — Metro web export fails with "Property name expected type of string
+ * but got undefined" (staging Deploy).
  */
-const RuntimeFooterMarqueeText = ({
-  text,
-  color,
-  style,
-  opacity,
-  testID = 'runtime-footer-marquee-text',
-}) => {
+const RuntimeFooterMarqueeText = props => {
+  const text = props && props.text;
+  const color = props && props.color;
+  const style = props && props.style;
+  const testID =
+    (props && props.testID) || 'runtime-footer-marquee-text';
+
   const [containerWidth, setContainerWidth] = useState(0);
   const [contentWidth, setContentWidth] = useState(0);
   const translateX = useRef(new Animated.Value(0)).current;
   const animationRef = useRef(null);
 
   const shouldMarquee =
-    containerWidth > 0 && contentWidth > containerWidth + 2;
+    !IS_WEB && containerWidth > 0 && contentWidth > containerWidth + 2;
 
   useEffect(() => {
     if (animationRef.current) {
@@ -40,26 +53,23 @@ const RuntimeFooterMarqueeText = ({
 
     const distance = contentWidth + GAP_PX;
     const duration = Math.max(Math.round(distance * MS_PER_PX), MIN_DURATION_MS);
-
     const loop = Animated.loop(
       Animated.sequence([
         Animated.delay(HOLD_MS),
         Animated.timing(translateX, {
           toValue: -distance,
-          duration,
-          useNativeDriver: true,
+          duration: duration,
+          useNativeDriver: USE_NATIVE_DRIVER,
         }),
         Animated.timing(translateX, {
           toValue: 0,
           duration: 0,
-          useNativeDriver: true,
+          useNativeDriver: USE_NATIVE_DRIVER,
         }),
       ]),
     );
-
     animationRef.current = loop;
     loop.start();
-
     return () => {
       loop.stop();
       animationRef.current = null;
@@ -68,30 +78,81 @@ const RuntimeFooterMarqueeText = ({
   }, [shouldMarquee, contentWidth, containerWidth, text, translateX]);
 
   const handleContainerLayout = event => {
-    const nextWidth = Math.round(event?.nativeEvent?.layout?.width || 0);
-    setContainerWidth(prev => (prev === nextWidth ? prev : nextWidth));
+    const nextWidth = Math.round(
+      (event &&
+        event.nativeEvent &&
+        event.nativeEvent.layout &&
+        event.nativeEvent.layout.width) ||
+        0,
+    );
+    setContainerWidth(current => (current === nextWidth ? current : nextWidth));
   };
 
   const handleTextLayout = event => {
-    const nextWidth = Math.round(event?.nativeEvent?.layout?.width || 0);
-    setContentWidth(prev => (prev === nextWidth ? prev : nextWidth));
+    const nextWidth = Math.round(
+      (event &&
+        event.nativeEvent &&
+        event.nativeEvent.layout &&
+        event.nativeEvent.layout.width) ||
+        0,
+    );
+    setContentWidth(current => (current === nextWidth ? current : nextWidth));
   };
 
   const textStyle = [
     style,
     {
-      color,
-      flex: undefined,
+      color: color,
       flexShrink: 0,
       flexGrow: 0,
+      minHeight: 14,
     },
-    shouldMarquee ? {textAlign: 'left'} : {textAlign: 'center'},
   ];
 
+  if (IS_WEB) {
+    textStyle.push({
+      display: 'inline-block',
+      width: 'auto',
+      maxWidth: 'none',
+      whiteSpace: 'nowrap',
+      flexBasis: 'auto',
+    });
+  }
+
+  textStyle.push(shouldMarquee ? {textAlign: 'left'} : {textAlign: 'center'});
+
+  const content = React.createElement(
+    Text,
+    {
+      numberOfLines: 1,
+      ellipsizeMode: IS_WEB ? 'tail' : 'clip',
+      onLayout: handleTextLayout,
+      style: textStyle,
+    },
+    text,
+  );
+
+  if (IS_WEB) {
+    return React.createElement(
+      View,
+      {
+        testID: testID,
+        style: {
+          flex: 1,
+          overflow: 'hidden',
+          justifyContent: 'center',
+          opacity: 1,
+        },
+        onLayout: handleContainerLayout,
+      },
+      content,
+    );
+  }
+
   return React.createElement(
     View,
     {
-      testID,
+      testID: testID,
       style: {flex: 1, overflow: 'hidden', justifyContent: 'center'},
       onLayout: handleContainerLayout,
     },
@@ -101,21 +162,12 @@ const RuntimeFooterMarqueeText = ({
         style: {
           flexDirection: 'row',
           alignItems: 'center',
-          opacity,
-          transform: [{translateX}],
+          opacity: 1,
+          transform: [{translateX: translateX}],
           alignSelf: shouldMarquee ? 'flex-start' : 'stretch',
         },
       },
-      React.createElement(
-        Text,
-        {
-          numberOfLines: 1,
-          ellipsizeMode: 'clip',
-          onLayout: handleTextLayout,
-          style: textStyle,
-        },
-        text,
-      ),
+      content,
       shouldMarquee
         ? React.createElement(
             Text,
@@ -124,7 +176,7 @@ const RuntimeFooterMarqueeText = ({
               ellipsizeMode: 'clip',
               accessible: false,
               importantForAccessibility: 'no',
-              style: [...textStyle, {marginLeft: GAP_PX}],
+              style: textStyle.concat([{marginLeft: GAP_PX}]),
             },
             text,
           )

package/src/react/components/RuntimeInfoFooter.js

@@ -1,7 +1,7 @@
-import React, {useEffect, useMemo, useRef, useState} from 'react';
+import React, {useEffect, useMemo, useState} from 'react';
 import {
   ActivityIndicator,
-  Animated,
+  Platform,
   Text,
   View,
   useWindowDimensions,
@@ -24,13 +24,45 @@ import styles from './RuntimeInfoFooter.styles';
 import RuntimeFooterMarqueeText from './RuntimeFooterMarqueeText';
 
 const ROTATION_INTERVAL_MS = 4000;
-const FADE_DURATION_MS = 260;
 const COMPACT_BREAKPOINT = 720;
 const MAX_INLINE_TEXT_LENGTH = 84;
+const FALLBACK_TEXT_COLOR = '#0f172a';
+
+const normalizeColor = value =>
+  String(value || '')
+    .trim()
+    .toLowerCase()
+    .replace(/\s+/g, '');
+
+/** Prefer theme colors, but never render text the same as the footer background. */
+const resolveVisibleFooterTextColor = colors => {
+  const candidates = [
+    colors?.footerText,
+    colors?.textSecondary,
+    colors?.text,
+    FALLBACK_TEXT_COLOR,
+  ];
+  const background = normalizeColor(
+    colors?.footerBackground || colors?.navigationBackground || '',
+  );
+
+  for (const candidate of candidates) {
+    const normalized = normalizeColor(candidate);
+    if (!normalized) {
+      continue;
+    }
+    if (background && normalized === background) {
+      continue;
+    }
+    return candidate;
+  }
+
+  return FALLBACK_TEXT_COLOR;
+};
 
 const RuntimeInfoFooter = ({
   appVersion,
-  defaultCompany,
+  mainCompany,
   device,
   colors,
   useModernWebChromeProps = false,
@@ -38,7 +70,6 @@ const RuntimeInfoFooter = ({
   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');
@@ -64,10 +95,27 @@ const RuntimeInfoFooter = ({
       }),
     [appVersion, device, deviceConfigItem, footerDebugInfo.primaryText],
   );
-  const companyFooterText = useMemo(
-    () => getRuntimeFooterText(defaultCompany),
-    [defaultCompany?.configs],
-  );
+  const peopleStore = useStore('people');
+  const configsStore = useStore('configs');
+  const currentCompany = peopleStore?.getters?.currentCompany || {};
+  const storeMainCompany = peopleStore?.getters?.mainCompany || {};
+  const companyConfigs = configsStore?.getters?.items;
+  const companyFooterText = useMemo(() => {
+    const candidates = [
+      getRuntimeFooterText(currentCompany),
+      getRuntimeFooterText(storeMainCompany),
+      getRuntimeFooterText(mainCompany),
+      getRuntimeFooterText(null, companyConfigs),
+      getRuntimeFooterText(null, deviceConfigItem?.configs),
+    ];
+    return candidates.find(Boolean) || '';
+  }, [
+    companyConfigs,
+    currentCompany?.configs,
+    mainCompany?.configs,
+    deviceConfigItem?.configs,
+    storeMainCompany?.configs,
+  ]);
   const footerTextLines = useMemo(
     () => getRuntimeFooterTextLines(companyFooterText),
     [companyFooterText],
@@ -166,14 +214,15 @@ const RuntimeInfoFooter = ({
       ),
     [allStores],
   );
-  const bottomInset = Math.max(Number(insets.bottom) || 0, 16);
+  const bottomInset =
+    Platform.OS === 'web'
+      ? 0
+      : Math.max(Number(insets.bottom) || 0, 16);
 
   useEffect(() => {
     if (!shouldRotate || rotationEntries.length <= 1) {
       setActiveIndex(0);
-      fadeOpacity.stopAnimation();
-      fadeOpacity.setValue(1);
-      return;
+      return undefined;
     }
 
     let timeoutId;
@@ -181,31 +230,14 @@ const RuntimeInfoFooter = ({
 
     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();
-            }
-          });
-        });
+        if (cancelled) {
+          return;
+        }
+        setActiveIndex(current => (current + 1) % rotationEntries.length);
+        scheduleTransition();
       }, ROTATION_INTERVAL_MS);
     };
 
-    fadeOpacity.setValue(1);
     scheduleTransition();
 
     return () => {
@@ -213,21 +245,22 @@ const RuntimeInfoFooter = ({
       if (timeoutId) {
         clearTimeout(timeoutId);
       }
-      fadeOpacity.stopAnimation();
     };
-  }, [fadeOpacity, rotationEntries.length, shouldRotate]);
+  }, [rotationEntries.length, shouldRotate]);
 
   if (rotationEntries.length === 0 && !showDebugInfo) {
     return null;
   }
 
-  const displayedText = shouldRotate
-    ? rotationEntries[activeIndex]
-    : inlineText;
+  const displayedText = (
+    shouldRotate
+      ? rotationEntries[activeIndex]
+      : inlineText
+  ) || primaryText || device?.id || '';
   const backgroundColor = colors?.footerBackground;
   const borderColor = colors?.footerBorder;
-  const textColor = colors?.footerText;
-  const loadingColor = colors?.footerLink;
+  const textColor = resolveVisibleFooterTextColor(colors);
+  const loadingColor = colors?.footerLink || colors?.primary || textColor;
   const shellProps = useModernWebChromeProps ? {} : {pointerEvents: 'none'};
   const shellStyle = useModernWebChromeProps
     ? [styles.shell, {pointerEvents: 'none'}]
@@ -264,7 +297,7 @@ const RuntimeInfoFooter = ({
                 : displayedText
             }
             color={textColor}
-            opacity={showDebugInfo ? 1 : fadeOpacity}
+            opacity={1}
             style={styles.primaryText}
             testID="runtime-footer-primary-text"
           />

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

@@ -3,36 +3,43 @@ import { StyleSheet } from 'react-native'
 const styles = StyleSheet.create({
   shell: {
     width: '100%',
+    alignSelf: 'stretch',
   },
   container: {
-    minHeight: 22,
-    borderTopWidth: StyleSheet.hairlineWidth,
+    width: '100%',
+    alignSelf: 'stretch',
+    minHeight: 28,
+    borderTopWidth: 0,
     justifyContent: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 4,
+    paddingHorizontal: 12,
+    paddingTop: 4,
+    paddingBottom: 6,
   },
   containerExpanded: {
-    paddingVertical: 6,
+    paddingVertical: 8,
   },
   primaryRow: {
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
-    minHeight: 20,
+    width: '100%',
+    minHeight: 18,
   },
   statusDotWrap: {
-    minWidth: 22,
-    minHeight: 20,
-    marginRight: 8,
+    width: 18,
+    minHeight: 18,
+    marginRight: 6,
     alignItems: 'center',
     justifyContent: 'center',
+    flexShrink: 0,
   },
   loadingWrap: {
-    minWidth: 22,
-    minHeight: 20,
-    marginLeft: 8,
+    width: 18,
+    minHeight: 18,
+    marginLeft: 6,
     alignItems: 'center',
     justifyContent: 'center',
+    flexShrink: 0,
   },
   statusDot: {
     width: 7,
@@ -42,8 +49,9 @@ const styles = StyleSheet.create({
   },
   primaryText: {
     flex: 1,
-    fontSize: 10,
-    lineHeight: 12,
+    minWidth: 0,
+    fontSize: 11,
+    lineHeight: 14,
     textAlign: 'center',
     fontWeight: '500',
   },