@controleonline/ui-default 1.0.270 → 1.0.272

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

@@ -12,6 +12,11 @@ import styles from './DefaultTable.styles';
 import useDefaultTableTheme from './useDefaultTableTheme';
 
 const shouldRenderSearch = store => {
+  const configs = store?.getters?.configs || {};
+
+  if (configs.showSearch === true) return true;
+  if (configs.showSearch === false) return false;
+
   const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
 
   return columns.some(column =>
@@ -45,22 +50,38 @@ const useSearchState = storeName => {
 };
 
 export const DefaultTableCompactSearch = ({ storeName }) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
   const { renders, rendersCompactTotal } = useSearchState(storeName);
 
   return renders && rendersCompactTotal ? (
-    <DefaultSearch compact storeName={storeName} />
+    <DefaultSearch
+      compact
+      placeholder={configs.searchPlaceholder}
+      searchKey={configs.searchKey || 'search'}
+      storeName={storeName}
+    />
   ) : null;
 };
 
 export const DefaultTableInlineSearch = ({ storeName }) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
   const { collapses, renders, rendersCompactTotal } = useSearchState(storeName);
 
   return renders && !rendersCompactTotal && !collapses ? (
-    <DefaultSearch compact storeName={storeName} />
+    <DefaultSearch
+      compact
+      placeholder={configs.searchPlaceholder}
+      searchKey={configs.searchKey || 'search'}
+      storeName={storeName}
+    />
   ) : null;
 };
 
 export const DefaultTableCollapsedSearch = ({ storeName }) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
   const { collapses, renders, rendersCompactTotal } = useSearchState(storeName);
   const { tableButtonColors } = useDefaultTableTheme();
 
@@ -89,9 +110,11 @@ export const DefaultTableCollapsedSearch = ({ storeName }) => {
       )}
     >
       {({ close, isOpen }) => (
-        <DefaultSearchModal
-          storeName={storeName}
-          visible={isOpen}
+          <DefaultSearchModal
+            searchKey={configs.searchKey || 'search'}
+            searchPlaceholder={configs.searchPlaceholder}
+            storeName={storeName}
+            visible={isOpen}
           onClose={close}
         />
       )}

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

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, {useMemo, useState} from 'react';
 import { Text, View, useWindowDimensions } from 'react-native';
 import { useStore } from '@store';
 import DefaultTableControls from './DefaultTableControls';
+import DefaultTableImportModal from './DefaultTableImportModal';
 import {
   DefaultTableCollapsedSearch,
   DefaultTableCompactSearch,
@@ -11,8 +12,31 @@ import DefaultToolbarAction from './DefaultToolbarAction';
 import styles from './DefaultTable.styles';
 import useDefaultTableTheme from './useDefaultTableTheme';
 
+const translateConfigKey = key => {
+  if (!Array.isArray(key) || key.length < 3) {
+    return '';
+  }
+
+  return String(global.t?.t?.(key[0], key[1], key[2]) ?? '').trim();
+};
+
+const resolveConfiguredLabel = config => {
+  const literalLabel = String(config?.label ?? '').trim();
+  if (literalLabel) {
+    return literalLabel;
+  }
+
+  const configuredLabel = translateConfigKey(config?.labelKey);
+  if (configuredLabel) {
+    return configuredLabel;
+  }
+
+  return global.t?.t?.('defaultTable', 'button', 'import');
+};
+
 const DefaultTableToolbar = ({ storeName }) => {
   const store = useStore(storeName);
+  const [isImportModalVisible, setIsImportModalVisible] = useState(false);
   const { width } = useWindowDimensions();
   const configs = store?.getters?.configs || {};
   const compactBreakpoint = Number(configs.compactBreakpoint || 768);
@@ -20,6 +44,66 @@ const DefaultTableToolbar = ({ storeName }) => {
   const showTotalItemsInCompactToolbar = configs.showTotalItemsInCompactToolbar === true;
   const showTotalItemsInFooter = configs.showTotalItemsInFooter !== false;
   const toolbarActions = Array.isArray(configs.toolbarActions) ? configs.toolbarActions : [];
+  const buildTransferAction = (action, fallback) => {
+    if (!action) return null;
+
+    if (typeof action === 'function') {
+      return {
+        ...fallback,
+        onPress: action,
+      };
+    }
+
+    if (typeof action === 'object') {
+      return {
+        ...fallback,
+        ...action,
+      };
+    }
+
+    return null;
+  };
+  const importConfig = configs.import || null;
+  const importActionOverrides =
+    configs.importAction && typeof configs.importAction === 'object'
+      ? configs.importAction
+      : null;
+  const genericImportAction = useMemo(() => {
+    if (!importConfig || importConfig.enabled === false || !importConfig.importType) {
+      return null;
+    }
+
+    return {
+      ...(importActionOverrides || {}),
+      key: 'default-table-import',
+      icon: importConfig.icon || 'upload',
+      label: resolveConfiguredLabel(importConfig),
+      onPress: () => setIsImportModalVisible(true),
+    };
+  }, [importActionOverrides, importConfig]);
+  const importTableAction =
+    genericImportAction ||
+    buildTransferAction(
+      configs.importAction || configs.onImport,
+      {
+        key: 'default-table-import',
+        icon: 'upload',
+        label: global.t?.t?.('defaultTable', 'button', 'import'),
+      },
+    );
+  const exportTableAction = buildTransferAction(
+    configs.exportAction || configs.onExport,
+    {
+      key: 'default-table-export',
+      icon: 'download',
+      label: global.t?.t?.('defaultTable', 'button', 'export'),
+    },
+  );
+  const resolvedToolbarActions = [
+    importTableAction,
+    exportTableAction,
+    ...toolbarActions,
+  ].filter(Boolean);
   const { tableBorderColors, toolbarColors } = useDefaultTableTheme();
   const {
     backgroundColor: toolbarBackgroundColor,
@@ -49,9 +133,9 @@ const DefaultTableToolbar = ({ storeName }) => {
       ? `${totalItemsNumber} ${global.t?.t(storeName, 'label', 'items')}`
       : '';
   const renderToolbarActions = () =>
-    Array.isArray(toolbarActions) && toolbarActions.length > 0 ? (
+    resolvedToolbarActions.length > 0 ? (
       <View style={styles.toolbarActionGroup}>
-        {toolbarActions.map(action => (
+        {resolvedToolbarActions.map(action => (
           <DefaultToolbarAction
             key={action?.key || action?.icon || action?.label}
             action={action}
@@ -97,6 +181,11 @@ const DefaultTableToolbar = ({ storeName }) => {
           <DefaultTableControls storeName={storeName} />
         </View>
       </View>
+      <DefaultTableImportModal
+        onClose={() => setIsImportModalVisible(false)}
+        storeName={storeName}
+        visible={isImportModalVisible}
+      />
     </View>
   );
 };

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

@@ -79,22 +79,31 @@ const useAutoPageLoader = ({
   const [autoHasLoaded, setAutoHasLoaded] = useState(false);
   const [autoLoading, setAutoLoading] = useState(false);
   const [autoLoadingMore, setAutoLoadingMore] = useState(false);
+  const [autoRefreshing, setAutoRefreshing] = useState(false);
   const [autoLastPageCount, setAutoLastPageCount] = useState(0);
   const autoRequestIdRef = useRef(0);
   const autoLoadedQueryKeyRef = useRef('');
   const autoErroredQueryKeyRef = useRef('');
   const autoPageRef = useRef(0);
+  const isFetchingRef = useRef(false);
 
   const loadAutoPage = useCallback(
-    (page, { append = false } = {}) => {
+    (page, { append = false, refresh = false } = {}) => {
       if (!autoMode || typeof resolvedActions.getItems !== 'function') {
         return Promise.resolve([]);
       }
+      if (isFetchingRef.current) {
+        return Promise.resolve([]);
+      }
+      isFetchingRef.current = true;
 
       const requestId = autoRequestIdRef.current + 1;
       autoRequestIdRef.current = requestId;
 
-      if (append) {
+      if (refresh) {
+        setAutoRefreshing(true);
+        autoPageRef.current = 0;
+      } else if (append) {
         setAutoLoadingMore(true);
       } else {
         setAutoLoading(true);
@@ -130,9 +139,11 @@ const useAutoPageLoader = ({
           return [];
         })
         .finally(() => {
+          isFetchingRef.current = false;
           if (autoRequestIdRef.current === requestId) {
             setAutoLoading(false);
             setAutoLoadingMore(false);
+            setAutoRefreshing(false);
             endReachedLockRef.current = false;
           }
         });
@@ -155,6 +166,7 @@ const useAutoPageLoader = ({
     autoLoadedQueryKeyRef,
     autoLoading,
     autoLoadingMore,
+    autoRefreshing,
     autoPageRef,
     loadAutoPage,
     pageSizeNumber,
@@ -209,6 +221,7 @@ export const useDefaultTablePagination = ({
   hasMore,
   isFocused,
   isLoading,
+  onRefresh,
   onEndReached,
   pageSize,
   requestParams,
@@ -227,6 +240,8 @@ export const useDefaultTablePagination = ({
     sortField: resolvedSort?.field,
   });
   const pageSizeNumber = Number(requestParams.itemsPerPage || pageSize || 50) || 50;
+  const resourceEndpoint = store?.getters?.resourceEndpoint || '';
+  const storeReload = store?.getters?.reload;
   const buildRequestQuery = useCallback(
     (page, append = false) =>
       buildQueryFromState({
@@ -243,12 +258,20 @@ export const useDefaultTablePagination = ({
   const autoQuerySignature = useMemo(
     () =>
       stableSerialize({
-        filters,
-        pageSize: pageSizeNumber,
-        requestParams,
-        sort: resolvedSort,
+        endpoint: resourceEndpoint,
+        query: buildQueryFromState({
+          append: false,
+          columnsForTable,
+          filters,
+          page: 1,
+          pageSizeNumber,
+          requestParams,
+          sort: resolvedSort,
+        }),
+        reload: Boolean(storeReload),
+        storeName,
       }),
-    [filters, pageSizeNumber, requestParams, resolvedSort],
+    [columnsForTable, filters, pageSizeNumber, requestParams, resolvedSort, resourceEndpoint, storeName, storeReload],
   );
   const {
     autoErroredQueryKeyRef,
@@ -257,6 +280,7 @@ export const useDefaultTablePagination = ({
     autoLoadedQueryKeyRef,
     autoLoading,
     autoLoadingMore,
+    autoRefreshing,
     autoPageRef,
     loadAutoPage,
   } = useAutoPageLoader({
@@ -283,9 +307,18 @@ export const useDefaultTablePagination = ({
     resolvedActions,
   });
 
+  useEffect(() => {
+    if (storeReload && typeof store?.actions?.setReload === 'function') {
+      store.actions.setReload(false);
+    }
+  }, [storeReload, store]);
+
   const resolvedIsLoading = autoMode
     ? (autoLoading || autoLoadingMore)
     : Boolean(isLoading);
+  const resolvedIsRefreshing = autoMode
+    ? autoRefreshing
+    : false;
   const resolvedData = autoMode
     ? (autoHasLoaded && Array.isArray(store?.getters?.items) ? store.getters.items : [])
     : (Array.isArray(data) ? data : []);
@@ -358,13 +391,29 @@ export const useDefaultTablePagination = ({
     resolvedIsLoading,
   ]);
 
+  const handleRefresh = useCallback(() => {
+    endReachedLockRef.current = false;
+
+    if (autoMode) {
+      return loadAutoPage(1, { append: false, refresh: true });
+    }
+
+    if (typeof onRefresh === 'function') {
+      return Promise.resolve(onRefresh());
+    }
+
+    return Promise.resolve([]);
+  }, [autoMode, loadAutoPage, onRefresh]);
+
   return {
     buildRequestQuery,
     currentPage: autoPageRef.current,
     handleEndReached,
+    handleRefresh,
     pageSizeNumber,
     resolvedData,
     resolvedHasMore,
+    resolvedIsRefreshing,
     resolvedIsLoading,
   };
 };

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

@@ -0,0 +1,164 @@
+import { useEffect, useRef } from 'react';
+import {
+  resolveStoredTableFiltersPreference,
+  resolveStoredVisibleColumnsPreference,
+  sanitizeTableFiltersPreference,
+  sanitizeVisibleColumnsPreference,
+} from '../../utils/tableVisibleColumnsPreferences';
+
+export const publishStoreValue = (store, actionName, value, getterName) => {
+  if (typeof store?.actions?.[actionName] === 'function') {
+    store.actions[actionName](value);
+    return;
+  }
+
+  if (store?.getters) {
+    store.getters[getterName] = value;
+  }
+};
+
+export const assignGetterValue = (store, getterName, value) => {
+  if (store?.getters) {
+    store.getters[getterName] = value;
+  }
+};
+
+/** Stable JSON compare for filter objects (anti React #185 on period toggle). */
+export const areTableFiltersEqual = (a, b) => {
+  try {
+    return JSON.stringify(a ?? {}) === JSON.stringify(b ?? {});
+  } catch {
+    return a === b;
+  }
+};
+
+/**
+ * Keeps controlled DefaultTable props (data/columns/configs/preferences) in sync
+ * with the zustand store without depending on store object identity.
+ * Zustand replaces the store slice on every commit; using that identity in effect
+ * deps caused React error #185 (Maximum update depth exceeded) on Devices.
+ *
+ * Stored filters are hydrated once per preference scope / columns signature.
+ * Re-applying on every storeFilters change caused Maximum update depth when
+ * toggling date period (today → all → today) on OrderHistoryPage (app-community#448).
+ */
+export function useDefaultTableStoreSync({
+  columns,
+  columnsForTable,
+  data,
+  defaultTableConfigs,
+  defaultTableConfigsSignature,
+  store,
+  storeColumnsLength,
+  storeFilters,
+  storeName,
+  tablePreferenceScope,
+}) {
+  const storeRef = useRef(store);
+  storeRef.current = store;
+  const lastPublishedItemsRef = useRef(undefined);
+  const configsSignatureRef = useRef('');
+  const lastHydratedFiltersKeyRef = useRef('');
+  const storeFiltersRef = useRef(storeFilters);
+  storeFiltersRef.current = storeFilters;
+
+  useEffect(() => {
+    if (storeColumnsLength > 0 || !Array.isArray(columns) || columns.length === 0) {
+      return;
+    }
+
+    publishStoreValue(storeRef.current, 'setColumns', columns, 'columns');
+  }, [columns, storeColumnsLength, storeName]);
+
+  useEffect(() => {
+    if (data === undefined || !Array.isArray(data)) {
+      lastPublishedItemsRef.current = undefined;
+      return;
+    }
+
+    if (lastPublishedItemsRef.current === data) {
+      return;
+    }
+
+    lastPublishedItemsRef.current = data;
+    publishStoreValue(storeRef.current, 'setItems', data, 'items');
+  }, [data, storeName]);
+
+  useEffect(() => {
+    if (!columnsForTable.length) {
+      return;
+    }
+
+    const storedVisibleColumns = resolveStoredVisibleColumnsPreference(tablePreferenceScope);
+    if (!storedVisibleColumns) {
+      return;
+    }
+
+    const nextVisibleColumns = sanitizeVisibleColumnsPreference({
+      columns: columnsForTable,
+      visibleColumns: storedVisibleColumns,
+    });
+
+    if (!nextVisibleColumns.length) {
+      return;
+    }
+
+    publishStoreValue(
+      storeRef.current,
+      'setVisibleColumns',
+      nextVisibleColumns,
+      'visibleColumns',
+    );
+  }, [columnsForTable, storeName, tablePreferenceScope]);
+
+  useEffect(() => {
+    if (!columnsForTable.length) {
+      return;
+    }
+
+    const scopeKey = [
+      tablePreferenceScope?.companyKey || '',
+      tablePreferenceScope?.storeKey || '',
+      tablePreferenceScope?.routeKey || '',
+      columnsForTable.map(c => c?.key || c?.name || '').join('|'),
+    ].join('::');
+
+    const storedFilters = resolveStoredTableFiltersPreference(tablePreferenceScope);
+    if (!storedFilters) {
+      lastHydratedFiltersKeyRef.current = scopeKey;
+      return;
+    }
+
+    const nextFilters = sanitizeTableFiltersPreference({
+      columns: columnsForTable,
+      filters: storedFilters,
+    });
+
+    if (Object.keys(nextFilters).length === 0) {
+      lastHydratedFiltersKeyRef.current = scopeKey;
+      return;
+    }
+
+    // Hydrate once per scope/columns; never chase storeFilters (loop on period toggle).
+    if (lastHydratedFiltersKeyRef.current === scopeKey) {
+      return;
+    }
+
+    if (areTableFiltersEqual(storeFiltersRef.current, nextFilters)) {
+      lastHydratedFiltersKeyRef.current = scopeKey;
+      return;
+    }
+
+    lastHydratedFiltersKeyRef.current = scopeKey;
+    publishStoreValue(storeRef.current, 'setFilters', nextFilters, 'filters');
+  }, [columnsForTable, storeName, tablePreferenceScope]);
+
+  useEffect(() => {
+    if (configsSignatureRef.current === defaultTableConfigsSignature) {
+      return;
+    }
+
+    configsSignatureRef.current = defaultTableConfigsSignature;
+    publishStoreValue(storeRef.current, 'setConfigs', defaultTableConfigs, 'configs');
+  }, [defaultTableConfigs, defaultTableConfigsSignature, storeName]);
+}