@controleonline/ui-default 1.0.270 → 1.0.273

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;