@controleonline/ui-default 1.0.270 → 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/DefaultMap.native.js

@@ -1,73 +1,73 @@
-import React, {useMemo} from 'react';
-import {View} from 'react-native';
-import {WebView} from 'react-native-webview';
-
-import DefaultNativeMap from './DefaultNativeMap.native';
-
-import styles from './DefaultMap.styles';
-import {
-  buildOpenStreetMapHtml,
-  resolveDefaultMapPayload,
-} from './DefaultMap.shared';
-
-export default function DefaultMap({
-  config = null,
-  addresses = null,
-  markerPayloads = [],
-  paths = [],
-  userCoordinates = null,
-  apiKey = '',
-  popupTheme = null,
-}) {
-  const resolvedPayload = useMemo(
-    () =>
-      resolveDefaultMapPayload({
-        config,
-        addresses,
-        markerPayloads,
-        paths,
-        userCoordinates,
-        apiKey,
-      }),
-    [apiKey, addresses, config, markerPayloads, paths, userCoordinates],
-  );
-
-  if (
-    resolvedPayload.markerPayloads.length === 0 &&
-    !resolvedPayload.userCoordinates &&
-    resolvedPayload.paths.length === 0
-  ) {
-    return null;
-  }
-
-  if (resolvedPayload.apiKey) {
-    return (
-      <DefaultNativeMap
-        apiKey={resolvedPayload.apiKey}
-        markerPayloads={resolvedPayload.markerPayloads}
-        userCoordinates={resolvedPayload.userCoordinates}
-        paths={resolvedPayload.paths}
-        popupTheme={popupTheme}
-      />
-    );
-  }
-
-  return (
-    <View style={styles.mapContainer}>
-      <WebView
-        source={{
-          html: buildOpenStreetMapHtml({
-            markerPayloads: resolvedPayload.markerPayloads,
-            paths: resolvedPayload.paths,
-            userCoordinates: resolvedPayload.userCoordinates,
-            routeColor: '#0EA5E9',
-          }),
-        }}
-        style={styles.mapViewport}
-        originWhitelist={['*']}
-        javaScriptEnabled
-        domStorageEnabled
-      />
-    </View>
-  );
-}
+import React, {useMemo} from 'react';
+import {View} from 'react-native';
+import {WebView} from 'react-native-webview';
+
+import DefaultNativeMap from './DefaultNativeMap.native';
+
+import styles from './DefaultMap.styles';
+import {
+  buildOpenStreetMapHtml,
+  resolveDefaultMapPayload,
+} from './DefaultMap.shared';
+
+export default function DefaultMap({
+  config = null,
+  addresses = null,
+  markerPayloads = [],
+  paths = [],
+  userCoordinates = null,
+  apiKey = '',
+  popupTheme = null,
+}) {
+  const resolvedPayload = useMemo(
+    () =>
+      resolveDefaultMapPayload({
+        config,
+        addresses,
+        markerPayloads,
+        paths,
+        userCoordinates,
+        apiKey,
+      }),
+    [apiKey, addresses, config, markerPayloads, paths, userCoordinates],
+  );
+
+  if (
+    resolvedPayload.markerPayloads.length === 0 &&
+    !resolvedPayload.userCoordinates &&
+    resolvedPayload.paths.length === 0
+  ) {
+    return null;
+  }
+
+  if (resolvedPayload.apiKey) {
+    return (
+      <DefaultNativeMap
+        apiKey={resolvedPayload.apiKey}
+        markerPayloads={resolvedPayload.markerPayloads}
+        userCoordinates={resolvedPayload.userCoordinates}
+        paths={resolvedPayload.paths}
+        popupTheme={popupTheme}
+      />
+    );
+  }
+
+  return (
+    <View style={[styles.mapContainer, {height: 220, minHeight: 220}]}>
+      <WebView
+        source={{
+          html: buildOpenStreetMapHtml({
+            markerPayloads: resolvedPayload.markerPayloads,
+            paths: resolvedPayload.paths,
+            userCoordinates: resolvedPayload.userCoordinates,
+            routeColor: '#0EA5E9',
+          }),
+        }}
+        style={styles.mapViewport}
+        originWhitelist={['*']}
+        javaScriptEnabled
+        domStorageEnabled
+      />
+    </View>
+  );
+}