@controleonline/ui-default 1.0.269 → 1.0.272

package/src/react/components/inputs/DefaultSelect.js

@@ -1,13 +1,13 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
-import {
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import {
   Modal,
   Image,
   ScrollView,
-  Text,
-  TextInput,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import { getAllStores, useStore } from '@store';
 import {
@@ -71,11 +71,13 @@ const resolveColumnListLoadParams = ({
   column,
   currentCompanyId,
   requestParams = {},
+  row = {},
   searchValue = '',
+  variant = 'cell',
 }) => {
   const listStoreName = resolveStoreNameFromList(column?.list);
   const resolvedCustomParams = typeof column?.listRequestParams === 'function'
-    ? column.listRequestParams({ currentCompanyId, requestParams })
+    ? column.listRequestParams({ currentCompanyId, requestParams, row, variant })
     : column?.listRequestParams;
   const customParams =
     resolvedCustomParams &&
@@ -92,31 +94,31 @@ const resolveColumnListLoadParams = ({
       : {}),
   };
 };
-
-const DefaultSelect = ({
-  accentColor = '#2563EB',
-  autoSave = true,
-  column,
-  columns = [],
-  containerStyle = null,
-  displayValue,
-  editing = false,
-  getOptionsForColumn = null,
-  label = '',
-  numberOfLines = 1,
-  onBeforeOpen = null,
+
+const DefaultSelect = ({
+  accentColor = '#2563EB',
+  autoSave = true,
+  column,
+  columns = [],
+  containerStyle = null,
+  displayValue,
+  editing = false,
+  getOptionsForColumn = null,
+  label = '',
+  numberOfLines = 1,
+  onBeforeOpen = null,
   onCancelEditing = null,
   onChangeValue = null,
   onSave = null,
   onSearchChange = null,
   onStartEditing = null,
-  readTextStyle = null,
-  row = {},
-  saving = false,
-  showLabel = false,
-  storeName = '',
-  value,
-  variant = 'cell',
+  readTextStyle = null,
+  row = {},
+  saving = false,
+  showLabel = false,
+  storeName = '',
+  value,
+  variant = 'cell',
 }) => {
   const peopleStore = useStore('people');
   const ownerStore = useStore(storeName);
@@ -126,9 +128,9 @@ const DefaultSelect = ({
   const [searchText, setSearchText] = useState('');
   const currentCompanyId = peopleStore?.getters?.currentCompany?.id;
   const requestParams = ownerStore?.getters?.configs?.requestParams || {};
-
-  const fieldName = getColumnKey(column);
-  const selectedKey = normalizeOptionKey(value ?? resolveEditValue(column, row));
+
+  const fieldName = getColumnKey(column);
+  const selectedKey = normalizeOptionKey(value ?? resolveEditValue(column, row));
   const options = useMemo(() => {
     const localOptions = buildOptionsFromColumn(column, getOptionsForColumn, storeName);
     const remoteOptions = mapOptions(column, loadedItems, storeName);
@@ -143,7 +145,8 @@ const DefaultSelect = ({
       ...localOptions.filter(option => !seenKeys.has(option.key)),
     ];
   }, [column, getOptionsForColumn, loadedItems, storeName]);
-  const selected = options.find(option => option.key === selectedKey);
+  const selected = options.find(option => option.key === selectedKey);
+  const resolvedFieldLabel = label || column?.formLabel || column?.label || fieldName;
   const resolvedLabel =
     displayValue ??
     selected?.label ??
@@ -175,9 +178,9 @@ const DefaultSelect = ({
     const query = normalizeText(searchText).toLowerCase();
     if (!query || onSearchChange) return options;
     return options.filter(option =>
-      normalizeText(option.label).toLowerCase().includes(query) ||
-      normalizeText(option.key).toLowerCase().includes(query),
-    );
+      normalizeText(option.label).toLowerCase().includes(query) ||
+      normalizeText(option.key).toLowerCase().includes(query),
+    );
   }, [options, searchText]);
 
   const applyLoadedItems = useCallback(value => {
@@ -187,6 +190,12 @@ const DefaultSelect = ({
     }
   }, []);
 
+  useEffect(() => {
+    loadedListKeysRef.current.clear();
+    setLoadedItems([]);
+    setSearchText('');
+  }, [currentCompanyId, fieldName, row]);
+
   const loadRemoteOptions = useCallback((searchValue = '') => {
     const listStoreName = resolveStoreNameFromList(column?.list);
     const actionName = resolveListActionName(column?.list);
@@ -202,7 +211,9 @@ const DefaultSelect = ({
       column,
       currentCompanyId,
       requestParams,
+      row,
       searchValue,
+      variant,
     });
     const loadKey = `${getColumnKey(column)}:${listStoreName}:${actionName}:${stableSerialize(listLoadParams)}`;
 
@@ -235,7 +246,7 @@ const DefaultSelect = ({
         loadedListKeysRef.current.delete(loadKey);
         throw error;
       });
-  }, [applyLoadedItems, column, currentCompanyId, loadedItems, requestParams]);
+  }, [applyLoadedItems, column, currentCompanyId, loadedItems, requestParams, row, variant]);
 
   const handleSearchChange = useCallback(value => {
     setSearchText(value);
@@ -247,43 +258,43 @@ const DefaultSelect = ({
 
     applyLoadedItems(maybeLoad);
   }, [applyLoadedItems, loadRemoteOptions, onSearchChange]);
-
-  const close = () => {
-    setIsOpen(false);
-    setSearchText('');
-    if (autoSave) onCancelEditing?.();
-  };
-
-  const selectOption = option => {
-    setIsOpen(false);
-    setSearchText('');
-
-    if (autoSave) {
-      onSave?.({
-        value: option.key,
-        label: option.label,
-        object: option.raw,
-      });
-      return;
-    }
-
-    onChangeValue?.(option.key, {
-      value: option.key,
-      label: option.label,
-      object: option.raw,
-    });
-  };
-
-  const open = async () => {
-    if (!canEdit && !isForm) return;
-    try {
-      if (!editing && !isForm) {
-        const maybePromise = onStartEditing?.();
-        if (maybePromise && typeof maybePromise.then === 'function') {
-          await maybePromise;
-        }
-      }
-
+
+  const close = () => {
+    setIsOpen(false);
+    setSearchText('');
+    if (autoSave) onCancelEditing?.();
+  };
+
+  const selectOption = option => {
+    setIsOpen(false);
+    setSearchText('');
+
+    if (autoSave) {
+      onSave?.({
+        value: option.key,
+        label: option.label,
+        object: option.raw,
+      });
+      return;
+    }
+
+    onChangeValue?.(option.key, {
+      value: option.key,
+      label: option.label,
+      object: option.raw,
+    });
+  };
+
+  const open = async () => {
+    if (!canEdit && !isForm) return;
+    try {
+      if (!editing && !isForm) {
+        const maybePromise = onStartEditing?.();
+        if (maybePromise && typeof maybePromise.then === 'function') {
+          await maybePromise;
+        }
+      }
+
       const maybeLoad = onBeforeOpen?.();
       if (maybeLoad && typeof maybeLoad.then === 'function') {
         applyLoadedItems(await maybeLoad);
@@ -296,11 +307,11 @@ const DefaultSelect = ({
     setIsOpen(true);
     loadRemoteOptions().catch(() => {});
   };
-
-  return (
-    <View style={[inputStyles.wrap, containerStyle]}>
-      {showLabel ? <Text style={inputStyles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
-
+
+  return (
+    <View style={[inputStyles.wrap, containerStyle]}>
+      {showLabel ? <Text style={inputStyles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+
       <TouchableOpacity
         style={[inputStyles.readButton, isForm ? inputStyles.readButtonForm : null]}
         activeOpacity={canEdit || isForm ? 0.78 : 1}
@@ -359,33 +370,33 @@ const DefaultSelect = ({
         {saving ? (
           <Text style={[inputStyles.savingText, { color: accentColor }]}>Salvando</Text>
         ) : canEdit || isForm ? (
-          <Icon style={inputStyles.editIcon} name="chevron-down" size={14} color="#64748B" />
-        ) : null}
-      </TouchableOpacity>
-
-      <Modal visible={isOpen} transparent animationType="fade" onRequestClose={close}>
-        <View style={styles.overlay}>
-          <View style={styles.modalCard}>
-            <View style={styles.modalHeader}>
-              <Text style={styles.modalTitle} numberOfLines={1}>
-                {label || column?.label || fieldName}
-              </Text>
-              <TouchableOpacity style={inputStyles.cancelButton} onPress={close}>
-                <Icon name="x" size={16} color="#64748B" />
-              </TouchableOpacity>
-            </View>
-
-            <View style={styles.searchBox}>
-              <TextInput
+          <Icon style={inputStyles.editIcon} name="chevron-down" size={14} color="#64748B" />
+        ) : null}
+      </TouchableOpacity>
+
+      <Modal visible={isOpen} transparent animationType="fade" onRequestClose={close}>
+        <View style={styles.overlay}>
+          <View style={styles.modalCard}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle} numberOfLines={1}>
+                {resolvedFieldLabel}
+              </Text>
+              <TouchableOpacity style={inputStyles.cancelButton} onPress={close}>
+                <Icon name="x" size={16} color="#64748B" />
+              </TouchableOpacity>
+            </View>
+
+            <View style={styles.searchBox}>
+              <TextInput
                 style={[inputStyles.input, inputStyles.formInput]}
                 value={searchText}
-                placeholder={global.t?.t(storeName, 'input', column?.searchParam || 'search')}
+                placeholder={resolvedFieldLabel || global.t?.t(storeName, 'input', column?.searchParam || 'search')}
                 onChangeText={handleSearchChange}
               />
-            </View>
-
-            <ScrollView keyboardShouldPersistTaps="handled">
-              {filteredOptions.length > 0 ? (
+            </View>
+
+            <ScrollView keyboardShouldPersistTaps="handled">
+              {filteredOptions.length > 0 ? (
                 filteredOptions.map(option => {
                   const isSelected = option.key === selectedKey;
                   const optionColor = normalizeText(option.color);
@@ -401,10 +412,10 @@ const DefaultSelect = ({
                   return (
                     <TouchableOpacity
                       key={`${option.key}_${option.label}`}
-                      style={styles.optionRow}
-                      activeOpacity={0.78}
-                      onPress={() => selectOption(option)}
-                    >
+                      style={styles.optionRow}
+                      activeOpacity={0.78}
+                      onPress={() => selectOption(option)}
+                    >
                       {option.image ? (
                         <Image
                           source={option.image}
@@ -429,21 +440,21 @@ const DefaultSelect = ({
                         {option.label}
                       </Text>
                     </TouchableOpacity>
-                  );
-                })
-              ) : (
-                <View style={styles.emptyBox}>
-                  <Text style={styles.emptyText}>
-                    Nenhum resultado encontrado
-                  </Text>
-                </View>
-              )}
-            </ScrollView>
-          </View>
-        </View>
-      </Modal>
-    </View>
-  );
-};
-
-export default DefaultSelect;
+                  );
+                })
+              ) : (
+                <View style={styles.emptyBox}>
+                  <Text style={styles.emptyText}>
+                    Nenhum resultado encontrado
+                  </Text>
+                </View>
+              )}
+            </ScrollView>
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+};
+
+export default DefaultSelect;

package/src/react/components/inputs/defaultInputUtils.js

@@ -39,9 +39,40 @@ export const isDateRangeColumn = column =>
 
 export const isDateLikeColumn = column =>
   isDateColumn(column) || isDateRangeColumn(column);
-
-const normalizeColumnKey = value =>
-  normalizeText(value)
+
+export const isColorColumn = column => {
+  const fieldName = normalizeColumnKey(getColumnKey(column));
+  const inputType = normalizeColumnKey(column?.inputType || column?.type);
+
+  return (
+    inputType === 'color' ||
+    inputType === 'hexcolor' ||
+    fieldName === 'color' ||
+    fieldName === 'bgcolor' ||
+    fieldName === 'backgroundcolor' ||
+    fieldName === 'bordercolor'
+  );
+};
+
+export const isFileColumn = column => {
+  const inputType = normalizeColumnKey(column?.inputType || column?.type);
+
+  return [
+    'document',
+    'documents',
+    'file',
+    'files',
+    'image',
+    'images',
+    'pdf',
+  ].includes(inputType);
+};
+
+export const isExtraDataColumn = column =>
+  normalizeColumnKey(column?.inputType || column?.type) === 'extradata';
+
+const normalizeColumnKey = value =>
+  normalizeText(value)
     .replace(/[^a-zA-Z0-9]/g, '')
     .toLowerCase();
 
@@ -70,14 +101,14 @@ export const normalizeId = value => {
   return normalizeId(value?.id || value?.['@id'] || '');
 };
 
-export const isEditableColumn = column =>
-  column?.editable !== false &&
-  !column?.isIdentity &&
-  column?.inputType !== 'increase' &&
-  column?.inputType !== 'image' &&
-  !String(getColumnKey(column)).includes('.');
+export const isEditableColumn = column =>
+  column?.editable !== false &&
+  !column?.isIdentity &&
+  column?.inputType !== 'increase' &&
+  !isFileColumn(column) &&
+  !String(getColumnKey(column)).includes('.');
 
-export const normalizeOptionKey = option => {
+export const normalizeOptionKey = option => {
   if (!option) return '';
   if (typeof option !== 'object') return normalizeId(option) || normalizeText(option);
   return normalizeText(
@@ -153,6 +184,29 @@ const filterItemsByListRequestParams = (items = [], column = null) => {
   );
 };
 
+export const resolveColorToken = (value, themeColors = {}) => {
+  const normalized = normalizeText(value);
+  if (!normalized) return '';
+
+  if (normalized.startsWith('$')) {
+    return normalizeText(themeColors?.[normalized.slice(1)]);
+  }
+
+  const cssVarMatch = normalized.match(/^var\([^,]+,\s*(#[0-9a-fA-F]{3,8})\s*\)$/);
+  if (cssVarMatch?.[1]) return cssVarMatch[1];
+
+  return normalized;
+};
+
+export const resolveDefaultColorValue = (column, themeColors = {}, fallbackColor = '') =>
+  resolveColorToken(
+    column?.defaultColor ??
+      column?.defaultColour ??
+      column?.defaultValue ??
+      fallbackColor,
+    themeColors,
+  );
+
 const normalizeObject = value =>
   value && typeof value === 'object' && !Array.isArray(value) ? value : {};
 
@@ -174,18 +228,8 @@ export const mapOptions = (column, items = [], storeName = '') => {
     const formattedMeta = normalizeObject(formatted);
     const itemMeta = normalizeObject(item);
     const color = formattedMeta.color ?? itemMeta.color;
-    const icon =
-      formattedMeta.icon ??
-      formattedMeta.iconName ??
-      itemMeta.icon ??
-      itemMeta.iconName;
-    const image =
-      formattedMeta.image ??
-      formattedMeta.logo ??
-      formattedMeta.source ??
-      itemMeta.image ??
-      itemMeta.logo ??
-      itemMeta.source;
+    const icon = formattedMeta.icon ?? itemMeta.icon;
+    const image = formattedMeta.image ?? itemMeta.image;
 
     options.push({
       ...(color ? { color } : {}),
@@ -286,12 +330,8 @@ export const resolveCellPresentation = ({
     backgroundColor:
       formattedValueMeta.backgroundColor ??
       formattedMeta.backgroundColor ??
-      formattedValueMeta.bgColor ??
-      formattedMeta.bgColor ??
       rawMeta.backgroundColor ??
-      rawMeta.bgColor ??
-      styleMeta.backgroundColor ??
-      styleMeta.bgColor,
+      styleMeta.backgroundColor,
     borderColor:
       formattedValueMeta.borderColor ??
       formattedMeta.borderColor ??
@@ -301,31 +341,17 @@ export const resolveCellPresentation = ({
       formattedValueMeta.color ??
       formattedMeta.color ??
       rawMeta.color ??
-      rawMeta.statusColor ??
-      rawMeta.categoryColor ??
       styleMeta.color,
     icon:
       formattedValueMeta.icon ??
-      formattedValueMeta.iconName ??
       formattedMeta.icon ??
-      formattedMeta.iconName ??
       rawMeta.icon ??
-      rawMeta.iconName ??
-      styleMeta.icon ??
-      styleMeta.iconName,
+      styleMeta.icon,
     image:
       formattedValueMeta.image ??
-      formattedValueMeta.logo ??
-      formattedValueMeta.source ??
       formattedMeta.image ??
-      formattedMeta.logo ??
-      formattedMeta.source ??
       rawMeta.image ??
-      rawMeta.logo ??
-      rawMeta.source ??
-      styleMeta.image ??
-      styleMeta.logo ??
-      styleMeta.source,
+      styleMeta.image,
     label,
   };
 };

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)}