@controleonline/ui-default 1.0.264 → 1.0.265

package/src/react/components/form/DefaultForm.styles.js

@@ -1,70 +1,75 @@
 import { StyleSheet } from 'react-native';
 
-const styles = StyleSheet.create({
-  body: {
-    maxHeight: 520,
-  },
-  formGrid: {
-    padding: 14,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 10,
-  },
-  formField: {
-    flexGrow: 1,
-    flexBasis: 220,
-    minWidth: 220,
-  },
-  emptyBox: {
-    padding: 18,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  emptyText: {
-    color: '#64748B',
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  actions: {
-    minHeight: 52,
-    paddingHorizontal: 14,
-    borderTopWidth: 1,
-    borderTopColor: '#E2E8F0',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: 8,
-  },
-  secondaryButton: {
-    height: 34,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#CBD5E1',
-    paddingHorizontal: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#FFFFFF',
-  },
-  secondaryButtonText: {
-    color: '#334155',
-    fontSize: 12,
-    fontWeight: '800',
-  },
-  primaryButton: {
-    height: 34,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  primaryButtonDisabled: {
-    opacity: 0.62,
-  },
-  primaryButtonText: {
-    color: '#FFFFFF',
-    fontSize: 12,
-    fontWeight: '900',
-  },
-});
+export const createStyles = palette =>
+  StyleSheet.create({
+    body: {
+      maxHeight: 520,
+    },
+    formGrid: {
+      padding: 14,
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 10,
+    },
+    formField: {
+      flexGrow: 1,
+      flexBasis: 220,
+      minWidth: 220,
+    },
+    emptyBox: {
+      padding: 18,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    emptyText: {
+      color: palette.textSecondary,
+      fontSize: 12,
+      fontWeight: '700',
+    },
+    actions: {
+      minHeight: 52,
+      paddingHorizontal: 14,
+      borderTopWidth: 1,
+      borderTopColor: palette.dividerBorder,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: 8,
+    },
+    secondaryButton: {
+      height: 34,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: palette.buttonBorderSecondary,
+      paddingHorizontal: 14,
+      alignItems: 'center',
+      justifyContent: 'center',
+      backgroundColor: palette.buttonBackgroundSecondary,
+    },
+    secondaryButtonText: {
+      color: palette.buttonTextSecondary,
+      fontSize: 12,
+      fontWeight: '800',
+    },
+    primaryButton: {
+      height: 34,
+      borderRadius: 8,
+      paddingHorizontal: 16,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    primaryButtonDisabled: {
+      backgroundColor: palette.buttonDisabledBackground,
+    },
+    primaryButtonText: {
+      color: palette.buttonText,
+      fontSize: 12,
+      fontWeight: '900',
+    },
+    primaryButtonTextDisabled: {
+      color: palette.buttonDisabledText,
+    },
+  });
 
+const styles = createStyles({});
 export default styles;

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

@@ -0,0 +1,150 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import Formatter from '@controleonline/ui-common/src/utils/formatter.js';
+import {
+  getColumnKey,
+  isEditableColumn,
+  normalizeText,
+  resolveCellText,
+  resolveEditValue,
+} from './defaultInputUtils';
+import styles from './DefaultInput.styles';
+
+const normalizeDateDraft = value => {
+  const text = normalizeText(value);
+  if (!text) return '';
+
+  return Formatter.formatDateToBR(text);
+};
+
+const DefaultDateInput = ({
+  accentColor = '#2563EB',
+  autoFocus = true,
+  autoSave = true,
+  column,
+  columns = [],
+  containerStyle = null,
+  displayValue,
+  editing = false,
+  inputStyle = null,
+  label = '',
+  numberOfLines = 1,
+  onCancelEditing = null,
+  onChangeValue = null,
+  onSave = null,
+  onStartEditing = null,
+  readTextStyle = null,
+  row = {},
+  saving = false,
+  showLabel = false,
+  storeName = '',
+  value,
+  variant = 'cell',
+}) => {
+  const fieldName = getColumnKey(column);
+  const isForm = variant === 'form';
+  const canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
+  const editValue = useMemo(
+    () => normalizeDateDraft(value ?? resolveEditValue(column, row)),
+    [column, row, value],
+  );
+  const [draftValue, setDraftValue] = useState(editValue);
+  const [validationMessage, setValidationMessage] = useState('');
+  const resolvedLabel =
+    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
+
+  useEffect(() => {
+    setDraftValue(editValue);
+    setValidationMessage('');
+  }, [editValue, editing]);
+
+  const saveDraft = () => {
+    const validationResult = Formatter.validateBRDate(draftValue);
+
+    if (validationResult !== true) {
+      setValidationMessage(validationResult);
+      return;
+    }
+
+    setValidationMessage('');
+
+    if (autoSave) {
+      onSave?.(draftValue);
+      return;
+    }
+
+    onChangeValue?.(draftValue);
+  };
+
+  const updateDraft = nextValue => {
+    setDraftValue(nextValue);
+    if (validationMessage) setValidationMessage('');
+    if (!autoSave) onChangeValue?.(nextValue);
+  };
+
+  if (!editing && !isForm) {
+    return (
+      <View style={[styles.wrap, containerStyle]}>
+        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+        <TouchableOpacity
+          style={styles.readButton}
+          activeOpacity={canEdit ? 0.78 : 1}
+          disabled={!canEdit}
+          onPress={() => onStartEditing?.()}
+        >
+          <Text
+            style={[
+              styles.readText,
+              resolvedLabel === '-' ? styles.mutedText : null,
+              readTextStyle,
+            ]}
+            numberOfLines={numberOfLines}
+          >
+            {resolvedLabel || '-'}
+          </Text>
+          {saving ? (
+            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
+          ) : canEdit ? (
+            <Icon style={styles.editIcon} name="calendar" size={13} color="#64748B" />
+          ) : null}
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
+  return (
+    <View style={[styles.wrap, containerStyle]}>
+      {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+      <View style={styles.editingWrap}>
+        <View style={styles.editingRow}>
+          <TextInput
+            style={[
+              styles.input,
+              isForm ? styles.formInput : null,
+              inputStyle,
+            ]}
+            value={draftValue}
+            keyboardType="numeric"
+            placeholder="DD/MM/YYYY"
+            onBlur={autoSave ? saveDraft : undefined}
+            onChangeText={updateDraft}
+            onSubmitEditing={saveDraft}
+            autoFocus={autoFocus && !isForm}
+            selectTextOnFocus
+          />
+          <Icon name="calendar" size={15} color="#64748B" />
+          {!isForm ? (
+            <TouchableOpacity style={styles.cancelButton} activeOpacity={0.8} onPress={onCancelEditing}>
+              <Icon name="x" size={14} color="#64748B" />
+            </TouchableOpacity>
+          ) : null}
+        </View>
+        {!!validationMessage && <Text style={styles.validationText}>{validationMessage}</Text>}
+        {saving ? <Text style={styles.savingText}>Salvando</Text> : null}
+      </View>
+    </View>
+  );
+};
+
+export default DefaultDateInput;

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

@@ -2,13 +2,15 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { Text, TextInput, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import {
-  getColumnKey,
-  isEditableColumn,
+  getColumnKey,
+  isDateLikeColumn,
+  isEditableColumn,
   normalizeText,
   resolveCellText,
   resolveEditValue,
-} from './defaultInputUtils';
-import DefaultSelect from './DefaultSelect';
+} from './defaultInputUtils';
+import DefaultDateInput from './DefaultDateInput';
+import DefaultSelect from './DefaultSelect';
 import styles from './DefaultInput.styles';
 
 const DefaultInput = ({
@@ -24,11 +26,12 @@ const DefaultInput = ({
   inputStyle = null,
   label = '',
   numberOfLines = 1,
-  onBeforeOpen = null,
-  onCancelEditing = null,
-  onChangeValue = null,
-  onSave = null,
-  onStartEditing = null,
+  onBeforeOpen = null,
+  onCancelEditing = null,
+  onChangeValue = null,
+  onSave = null,
+  onSearchChange = null,
+  onStartEditing = null,
   readTextStyle = null,
   row = {},
   saving = false,
@@ -52,7 +55,7 @@ const DefaultInput = ({
     setDraftValue(editValue);
   }, [editValue, editing]);
 
-  if (column?.list) {
+  if (column?.list) {
     return (
       <DefaultSelect
         accentColor={accentColor}
@@ -79,7 +82,37 @@ const DefaultInput = ({
         variant={variant}
       />
     );
-  }
+  }
+
+  if (isDateLikeColumn(column)) {
+    return (
+      <DefaultDateInput
+        accentColor={accentColor}
+        autoFocus={autoFocus}
+        autoSave={autoSave}
+        column={column}
+        columns={columns}
+        containerStyle={containerStyle}
+        displayValue={displayValue}
+        editing={editing}
+        inputStyle={inputStyle}
+        label={label}
+        numberOfLines={numberOfLines}
+        onCancelEditing={onCancelEditing}
+        onChangeValue={onChangeValue}
+        onSave={onSave}
+        onSearchChange={onSearchChange}
+        onStartEditing={onStartEditing}
+        readTextStyle={readTextStyle}
+        row={row}
+        saving={saving}
+        showLabel={showLabel}
+        storeName={storeName}
+        value={value}
+        variant={variant}
+      />
+    );
+  }
 
   const saveDraft = () => {
     if (autoSave) {

package/src/react/components/inputs/DefaultInput.styles.js

@@ -88,6 +88,12 @@ const styles = StyleSheet.create({
     fontWeight: '800',
     textTransform: 'uppercase',
   },
+  validationText: {
+    marginTop: 3,
+    color: '#DC2626',
+    fontSize: 10,
+    fontWeight: '800',
+  },
 });
 
 export default styles;

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
   Modal,
   ScrollView,
@@ -7,18 +7,87 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import {
-  buildOptionsFromColumn,
-  getColumnKey,
-  isEditableColumn,
-  normalizeOptionKey,
-  normalizeText,
-  resolveCellText,
-  resolveEditValue,
-} from './defaultInputUtils';
-import inputStyles from './DefaultInput.styles';
-import styles from './DefaultSelect.styles';
+import Icon from 'react-native-vector-icons/Feather';
+import { getAllStores, useStore } from '@store';
+import {
+  buildOptionsFromColumn,
+  getColumnKey,
+  isEditableColumn,
+  mapOptions,
+  normalizeOptionKey,
+  normalizeText,
+  resolveCellText,
+  resolveEditValue,
+  resolveStoreNameFromList,
+} from './defaultInputUtils';
+import inputStyles from './DefaultInput.styles';
+import styles from './DefaultSelect.styles';
+
+const COMPANY_SCOPED_LIST_STORES = new Set([
+  'categories',
+  'paymentType',
+  'wallet',
+]);
+
+const normalizeCollectionItems = response => {
+  if (Array.isArray(response)) return response;
+  if (Array.isArray(response?.member)) return response.member;
+  if (Array.isArray(response?.['hydra:member'])) return response['hydra:member'];
+  return [];
+};
+
+const stableSerialize = value => {
+  if (value === null || value === undefined) return 'null';
+  if (Array.isArray(value)) return `[${value.map(item => stableSerialize(item)).join(',')}]`;
+  if (value instanceof Date) return JSON.stringify(value.toISOString());
+  if (value && typeof value === 'object') {
+    return `{${Object.keys(value)
+      .sort()
+      .map(key => `${JSON.stringify(key)}:${stableSerialize(value[key])}`)
+      .join(',')}}`;
+  }
+
+  return JSON.stringify(value);
+};
+
+const resolveListActionName = list =>
+  normalizeText(list).split('/')[1] || 'getItems';
+
+const resolveCompanyScopedParams = ({ currentCompanyId, listStoreName }) => {
+  if (!currentCompanyId || !COMPANY_SCOPED_LIST_STORES.has(listStoreName)) {
+    return {};
+  }
+
+  return listStoreName === 'categories'
+    ? { company: currentCompanyId }
+    : { people: currentCompanyId };
+};
+
+const resolveColumnListLoadParams = ({
+  column,
+  currentCompanyId,
+  requestParams = {},
+  searchValue = '',
+}) => {
+  const listStoreName = resolveStoreNameFromList(column?.list);
+  const resolvedCustomParams = typeof column?.listRequestParams === 'function'
+    ? column.listRequestParams({ currentCompanyId, requestParams })
+    : column?.listRequestParams;
+  const customParams =
+    resolvedCustomParams &&
+    typeof resolvedCustomParams === 'object' &&
+    !Array.isArray(resolvedCustomParams)
+      ? resolvedCustomParams
+      : {};
+
+  return {
+    ...resolveCompanyScopedParams({ currentCompanyId, listStoreName }),
+    ...customParams,
+    ...(normalizeText(searchValue)
+      ? { [column?.listSearchParam || column?.searchParam || 'search']: normalizeText(searchValue) }
+      : {}),
+  };
+};
 
 const DefaultSelect = ({
   accentColor = '#2563EB',
@@ -32,10 +101,11 @@ const DefaultSelect = ({
   label = '',
   numberOfLines = 1,
   onBeforeOpen = null,
-  onCancelEditing = null,
-  onChangeValue = null,
-  onSave = null,
-  onStartEditing = null,
+  onCancelEditing = null,
+  onChangeValue = null,
+  onSave = null,
+  onSearchChange = null,
+  onStartEditing = null,
   readTextStyle = null,
   row = {},
   saving = false,
@@ -43,16 +113,32 @@ const DefaultSelect = ({
   storeName = '',
   value,
   variant = 'cell',
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [searchText, setSearchText] = useState('');
+}) => {
+  const peopleStore = useStore('people');
+  const ownerStore = useStore(storeName);
+  const loadedListKeysRef = useRef(new Set());
+  const [isOpen, setIsOpen] = useState(false);
+  const [loadedItems, setLoadedItems] = useState([]);
+  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 options = useMemo(
-    () => buildOptionsFromColumn(column, getOptionsForColumn, storeName),
-    [column, getOptionsForColumn, storeName],
-  );
+  const options = useMemo(() => {
+    const localOptions = buildOptionsFromColumn(column, getOptionsForColumn, storeName);
+    const remoteOptions = mapOptions(column, loadedItems, storeName);
+
+    if (remoteOptions.length === 0) {
+      return localOptions;
+    }
+
+    const seenKeys = new Set(remoteOptions.map(option => option.key));
+    return [
+      ...remoteOptions,
+      ...localOptions.filter(option => !seenKeys.has(option.key)),
+    ];
+  }, [column, getOptionsForColumn, loadedItems, storeName]);
   const selected = options.find(option => option.key === selectedKey);
   const resolvedLabel =
     displayValue ??
@@ -60,14 +146,82 @@ const DefaultSelect = ({
     resolveCellText({ column, columns, row, storeName, value });
   const canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
   const isForm = variant === 'form';
-  const filteredOptions = useMemo(() => {
-    const query = normalizeText(searchText).toLowerCase();
-    if (!query) return options;
-    return options.filter(option =>
+  const filteredOptions = useMemo(() => {
+    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),
     );
-  }, [options, searchText]);
+  }, [options, searchText]);
+
+  const applyLoadedItems = useCallback(value => {
+    const nextItems = normalizeCollectionItems(value);
+    if (nextItems.length > 0 || Array.isArray(value)) {
+      setLoadedItems(nextItems);
+    }
+  }, []);
+
+  const loadRemoteOptions = useCallback((searchValue = '') => {
+    const listStoreName = resolveStoreNameFromList(column?.list);
+    const actionName = resolveListActionName(column?.list);
+    const stores = getAllStores?.() || {};
+    const listStore = stores?.[listStoreName];
+    const listAction = listStore?.actions?.[actionName];
+
+    if (!listStoreName || typeof listAction !== 'function') {
+      return Promise.resolve([]);
+    }
+
+    const listLoadParams = resolveColumnListLoadParams({
+      column,
+      currentCompanyId,
+      requestParams,
+      searchValue,
+    });
+    const loadKey = `${getColumnKey(column)}:${listStoreName}:${actionName}:${stableSerialize(listLoadParams)}`;
+
+    if (
+      !normalizeText(searchValue) &&
+      loadedListKeysRef.current.has(loadKey) &&
+      loadedItems.length > 0
+    ) {
+      return Promise.resolve(loadedItems);
+    }
+
+    if (!normalizeText(searchValue)) {
+      loadedListKeysRef.current.add(loadKey);
+    }
+
+    return Promise.resolve(
+      listAction({
+        ...listLoadParams,
+        __storeMeta: {
+          dedupeKey: `default-select-list-options:${loadKey}`,
+          skipSystemError: true,
+        },
+      }),
+    )
+      .then(response => {
+        applyLoadedItems(response);
+        return response;
+      })
+      .catch(error => {
+        loadedListKeysRef.current.delete(loadKey);
+        throw error;
+      });
+  }, [applyLoadedItems, column, currentCompanyId, loadedItems, requestParams]);
+
+  const handleSearchChange = useCallback(value => {
+    setSearchText(value);
+    const maybeLoad = onSearchChange ? onSearchChange(value) : loadRemoteOptions(value);
+    if (maybeLoad && typeof maybeLoad.then === 'function') {
+      maybeLoad.then(applyLoadedItems).catch(() => {});
+      return;
+    }
+
+    applyLoadedItems(maybeLoad);
+  }, [applyLoadedItems, loadRemoteOptions, onSearchChange]);
 
   const close = () => {
     setIsOpen(false);
@@ -105,15 +259,18 @@ const DefaultSelect = ({
         }
       }
 
-      const maybeLoad = onBeforeOpen?.();
-      if (maybeLoad && typeof maybeLoad.then === 'function') {
-        await maybeLoad;
-      }
-    } catch (error) {
-      return;
-    }
-    setIsOpen(true);
-  };
+      const maybeLoad = onBeforeOpen?.();
+      if (maybeLoad && typeof maybeLoad.then === 'function') {
+        applyLoadedItems(await maybeLoad);
+      } else {
+        applyLoadedItems(maybeLoad);
+      }
+    } catch (error) {
+      return;
+    }
+    setIsOpen(true);
+    loadRemoteOptions().catch(() => {});
+  };
 
   return (
     <View style={[inputStyles.wrap, containerStyle]}>
@@ -156,11 +313,11 @@ const DefaultSelect = ({
 
             <View style={styles.searchBox}>
               <TextInput
-                style={[inputStyles.input, inputStyles.formInput]}
-                value={searchText}
-                placeholder={global.t?.t(storeName, 'input', column?.searchParam || 'search')}
-                onChangeText={setSearchText}
-              />
+                style={[inputStyles.input, inputStyles.formInput]}
+                value={searchText}
+                placeholder={global.t?.t(storeName, 'input', column?.searchParam || 'search')}
+                onChangeText={handleSearchChange}
+              />
             </View>
 
             <ScrollView keyboardShouldPersistTaps="handled">