@controleonline/ui-default 1.0.269 → 1.0.270

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-default",
-  "version": "1.0.269",
+  "version": "1.0.270",
   "author": "ControleOnline",
   "description": "ControleOnline Default Quasar UI Component",
   "license": "MIT",

package/src/react/components/map/DefaultGoogleMap.styles.js

@@ -38,8 +38,8 @@ export default StyleSheet.create({
   },
   popupLogoWrap: {
     width: 58,
-    height: 58,
-    borderRadius: 16,
+    height: 54,
+    borderRadius: 10,
     overflow: 'hidden',
     borderWidth: 1,
     alignItems: 'center',
@@ -52,6 +52,13 @@ export default StyleSheet.create({
     width: '100%',
     height: '100%',
   },
+  popupLogoFallback: {
+    fontSize: 24,
+    lineHeight: 26,
+    fontWeight: '900',
+    letterSpacing: 0.04,
+    textTransform: 'uppercase',
+  },
   popupTitleWrap: {
     flex: 1,
     minWidth: 0,

package/src/react/components/map/DefaultGoogleMap.web.js

@@ -110,8 +110,20 @@ const extractCoordinates = address => {
   return {latitude, longitude};
 };
 
-const buildPopupTitle = item =>
-  item?.unitAlias || item?.alias || item?.companyName || item?.title || 'Unidade';
+const buildPopupTitle = item =>
+  item?.unitAlias || item?.alias || item?.companyName || item?.title || 'Unidade';
+
+const buildLogoFallback = item => {
+  const title = buildPopupTitle(item);
+
+  return String(title || 'CO')
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map(chunk => chunk[0] || '')
+    .join('')
+    .toUpperCase();
+};
 
 const loadGoogleMapsApi = apiKey => {
   if (Platform.OS !== 'web' || typeof window === 'undefined') {
@@ -654,11 +666,12 @@ export default function DefaultGoogleMap({
     return null;
   }
 
-  const selectedTitle = buildPopupTitle(selectedMarker);
-  const selectedTravelSummary = buildPopupTravelSummaryText(
-    selectedMarker,
-    selectedRouteSummary,
-  );
+  const selectedTitle = buildPopupTitle(selectedMarker);
+  const selectedLogoFallback = buildLogoFallback(selectedMarker);
+  const selectedTravelSummary = buildPopupTravelSummaryText(
+    selectedMarker,
+    selectedRouteSummary,
+  );
   const selectedNavigationPosition = selectedMarker
     ? {
         latitude: Number(selectedMarker.latitude),
@@ -688,19 +701,27 @@ export default function DefaultGoogleMap({
               },
             ]}>
             <View style={styles.popupHeaderRow}>
-              <View
-                style={[
-                  styles.popupLogoWrap,
-                  {borderColor: resolvedPopupTheme.dividerBorder},
-                ]}>
-                {selectedMarker.companyLogoUrl ? (
-                  <Image
-                    source={{uri: selectedMarker.companyLogoUrl}}
-                    style={styles.popupLogoImage}
-                    resizeMode="cover"
-                  />
-                ) : null}
-              </View>
+              <View
+                style={[
+                  styles.popupLogoWrap,
+                  {borderColor: resolvedPopupTheme.dividerBorder},
+                ]}>
+                {selectedMarker.companyLogoUrl ? (
+                  <Image
+                    source={{uri: selectedMarker.companyLogoUrl}}
+                    style={styles.popupLogoImage}
+                    resizeMode="cover"
+                  />
+                ) : (
+                  <Text
+                    style={[
+                      styles.popupLogoFallback,
+                      {color: resolvedPopupTheme.buttonBackground},
+                    ]}>
+                    {selectedLogoFallback}
+                  </Text>
+                )}
+              </View>
               <View style={styles.popupTitleWrap}>
                 <Text
                   numberOfLines={1}
@@ -780,14 +801,14 @@ export default function DefaultGoogleMap({
                   styles.popupActionButton,
                   {backgroundColor: resolvedPopupTheme.buttonBackground},
                 ]}>
-                <Text
-                  style={[
-                    styles.popupActionText,
-                    {color: resolvedPopupTheme.buttonText},
-                  ]}>
-                  Abrir no Maps
-                </Text>
-              </TouchableOpacity>
+                <Text
+                  style={[
+                    styles.popupActionText,
+                    {color: resolvedPopupTheme.buttonText},
+                  ]}>
+                  Abrir no Maps
+                </Text>
+              </TouchableOpacity>
               <TouchableOpacity
                 activeOpacity={0.85}
                 onPress={() => openExternalUrl(selectedWazeUrl)}

package/src/react/components/table/DefaultDebug.js

@@ -70,7 +70,7 @@ const DefaultDebug = ({
   const [isOpen, setIsOpen] = useState(false);
   const store = useStore(storeName);
   const configs = store?.getters?.configs || {};
-  const { showError, showSuccess } = useMessage();
+  const { showError, showSuccess } = useMessage() || {};
   const { modalColors, resolvedAccentColor, tableButtonColors } = useDefaultTableTheme();
 
   const resolvedDebug = isObject(store?.getters?.debug) ? store.getters.debug : {};

package/src/react/components/table/DefaultTable.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef } from 'react';
 import { TouchableOpacity, View, useWindowDimensions } from 'react-native';
-import { useIsFocused, useRoute } from '@react-navigation/native';
+import { NavigationRouteContext, useIsFocused } from '@react-navigation/native';
 import { useStore } from '@store';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
 import Icon from 'react-native-vector-icons/Feather';
@@ -92,7 +92,7 @@ const DefaultTable = ({
   visibleColumnsPreferenceKey = '',
 }) => {
   const { width } = useWindowDimensions();
-  const route = useRoute?.();
+  const route = React.useContext(NavigationRouteContext);
   const store = useStore(storeName);
   const isFocused = useIsFocused();
   const configsSignatureRef = useRef('');

package/src/tests/react/components/table/DefaultTable.test.js

@@ -34,6 +34,7 @@ jest.mock('@store', () => ({
 }));
 
 jest.mock('@react-navigation/native', () => ({
+  NavigationRouteContext: require('react').createContext(undefined),
   useIsFocused: jest.fn(() => false),
   useRoute: jest.fn(() => ({
     key: 'OrderHistoryPage-key',