@controleonline/ui-default 1.0.270 → 1.0.273

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

@@ -1,5 +1,5 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { TouchableOpacity, View, useWindowDimensions } from 'react-native';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Modal, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native';
 import { NavigationRouteContext, useIsFocused } from '@react-navigation/native';
 import { useStore } from '@store';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
@@ -8,15 +8,12 @@ import { normalizeText } from '../inputs/defaultInputUtils';
 import { DEFAULT_COMPACT_BREAKPOINT, isObject, stableSerialize } from './DefaultTable.utils';
 import {
   resolveDefaultTablePreferenceScope,
-  resolveStoredTableFiltersPreference,
   resolveStoredTableViewModePreference,
-  resolveStoredVisibleColumnsPreference,
-  sanitizeTableFiltersPreference,
-  sanitizeVisibleColumnsPreference,
 } from '../../utils/tableVisibleColumnsPreferences';
 import DefaultTableBody from './DefaultTableBody';
 import DefaultTableFooter from './DefaultTableFooter';
 import DefaultTableToolbar from './DefaultTableToolbar';
+import DefaultForm from '../form/DefaultForm';
 import styles from './DefaultTable.styles';
 import { useDefaultTablePagination } from './useDefaultTablePagination';
 import {
@@ -25,52 +22,50 @@ import {
 } from './useDefaultTableSorting';
 import useDefaultTableTheme from './useDefaultTableTheme';
 
+import {
+  assignGetterValue,
+  useDefaultTableStoreSync,
+} from './useDefaultTableStoreSync';
+
 export {
   mergeSortedDataWithLiveItems,
   resolveColumnListLoadParams,
   shouldTriggerEndReachedFromScroll,
 } from './DefaultTable.utils';
 
-const publishStoreValue = (store, actionName, value, getterName) => {
-  if (typeof store?.actions?.[actionName] === 'function') {
-    store.actions[actionName](value);
-    return;
-  }
-
-  if (store?.getters) {
-    store.getters[getterName] = value;
-  }
-};
-
-const assignGetterValue = (store, getterName, value) => {
-  if (store?.getters) {
-    store.getters[getterName] = value;
-  }
-};
-
 const DefaultTable = ({
   accentColor = null,
   actions = {},
   add = null,
+  addButtonPlacement = 'toolbar',
+  addLabel = '',
   compactBreakpoint = DEFAULT_COMPACT_BREAKPOINT,
+  cardListProps = {},
   columns = [],
   data = undefined,
+  defaultColor = '',
   filters = {},
   footerComponent = null,
   forceCardsOnCompact = true,
   getOptionsForColumn = null,
   hasMore = null,
+  importAction = null,
   initialViewMode = 'table',
   isLoading = false,
+  exportAction = null,
   onAdd = null,
   onDataLoaded = null,
   onEditRow = null,
   onEndReached = null,
+  onExport = null,
   onFilterChange = null,
+  onImport = null,
   onMomentumScrollBegin = null,
+  onRefresh = null,
   onRowPress = null,
   onSaved = null,
   onScrollBeginDrag = null,
+  onSelectionChange = null,
   onSortChange = null,
   pageSize = null,
   pinRowActions = true,
@@ -79,7 +74,10 @@ const DefaultTable = ({
   rowActionsComponent = null,
   rowActionsWidth = null,
   rowStyle = null,
+  searchKey = 'search',
+  searchPlaceholder = '',
   showColumnFiltersButton = true,
+  showSearch = null,
   showRowActions = true,
   showToolbar = true,
   showTotalItemsInCompactToolbar = false,
@@ -91,25 +89,29 @@ const DefaultTable = ({
   toolbarActions = [],
   visibleColumnsPreferenceKey = '',
 }) => {
+  const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
   const { width } = useWindowDimensions();
   const route = React.useContext(NavigationRouteContext);
   const store = useStore(storeName);
+  const peopleStore = useStore('people');
   const isFocused = useIsFocused();
-  const configsSignatureRef = useRef('');
+  const storeDeclaredConfigsRef = useRef(null);
   const { showError } = useMessage() || {};
   const { tableBorderColors, themeColors } = useDefaultTableTheme(accentColor);
   const tablePanelBorderColor = tableBorderColors.containerBorderColor;
   const floatingAddBackgroundColor =
     themeColors.buttonBackground || themeColors.primary || accentColor;
   const floatingAddIconColor = themeColors.buttonText;
+  const currentCompanyId = peopleStore?.getters?.currentCompany?.id;
   const tablePreferenceScope = useMemo(
     () =>
       resolveDefaultTablePreferenceScope({
+        companyId: currentCompanyId,
         preferenceKey: visibleColumnsPreferenceKey,
         route,
         storeName,
       }),
-    [route?.key, route?.name, storeName, visibleColumnsPreferenceKey],
+    [currentCompanyId, route?.key, route?.name, storeName, visibleColumnsPreferenceKey],
   );
   const storedViewMode = useMemo(
     () => resolveStoredTableViewModePreference(tablePreferenceScope, null),
@@ -128,13 +130,25 @@ const DefaultTable = ({
   const storeFilters = isObject(store?.getters?.filters) ? store.getters.filters : {};
   const requestParamsSeed = isObject(requestParams) ? requestParams : {};
   const resolvedTotalItems = store?.getters?.totalItems;
-  const currentConfigs = store?.getters?.configs || {};
+  if (storeDeclaredConfigsRef.current === null) {
+    storeDeclaredConfigsRef.current = isObject(store?.getters?.configs)
+      ? store.getters.configs
+      : {};
+  }
+
+  const storeDeclaredConfigs = storeDeclaredConfigsRef.current || {};
+  const currentConfigs = {
+    ...storeDeclaredConfigs,
+    ...(store?.getters?.configs || {}),
+  };
+  const storeSelectable = storeDeclaredConfigs.selectable === true;
   const isCompactView = width > 0 && width <= compactBreakpoint;
   const addConfig = store?.getters?.add;
-  const shouldRenderFloatingAddButton =
-    showToolbar === false &&
-    (addConfig === true || add === true) &&
-    (typeof onAdd === 'function' || typeof store?.actions?.save === 'function');
+  const normalizedAddButtonPlacement = normalizeText(addButtonPlacement) || 'toolbar';
+  const resolvedAddLabel =
+    normalizeText(addLabel) ||
+    normalizeText(global.t?.t(storeName, 'button', 'add')) ||
+    'Adicionar';
 
   if (storeColumns.length === 0 && Array.isArray(columns) && columns.length > 0) {
     assignGetterValue(store, 'columns', columns);
@@ -155,7 +169,9 @@ const DefaultTable = ({
     buildRequestQuery,
     currentPage,
     handleEndReached,
+    handleRefresh,
     resolvedData,
+    resolvedIsRefreshing,
   } = useDefaultTablePagination({
     autoMode,
     columnsForTable,
@@ -165,6 +181,7 @@ const DefaultTable = ({
     isFocused,
     isLoading,
     onEndReached,
+    onRefresh,
     pageSize,
     requestParams: requestParamsSeed,
     resolvedActions,
@@ -180,11 +197,43 @@ const DefaultTable = ({
     storeName,
     tableColumns: columnsForTable,
   });
+  const closeCreateForm = useCallback(() => setIsCreateFormOpen(false), []);
+  const canUseDefaultCreateForm = typeof resolvedActions?.save === 'function';
+  const handleAdd = useCallback(() => {
+    if (typeof onAdd === 'function') {
+      return onAdd();
+    }
+    if (!canUseDefaultCreateForm) {
+      return null;
+    }
+    setIsCreateFormOpen(true);
+    return null;
+  }, [canUseDefaultCreateForm, onAdd]);
+  const resolvedOnAdd = typeof onAdd === 'function' || canUseDefaultCreateForm
+    ? handleAdd
+    : null;
+  const hasAddAction =
+    (addConfig === true || add === true) &&
+    typeof resolvedOnAdd === 'function';
+  const shouldRenderFloatingAddButton =
+    hasAddAction &&
+    (normalizedAddButtonPlacement === 'floating' || showToolbar === false);
+  const shouldRenderBottomAddButton =
+    hasAddAction &&
+    showToolbar !== false &&
+    normalizedAddButtonPlacement === 'bottom';
+  const handleDefaultCreateSaved = useCallback(
+    savedItem => {
+      closeCreateForm();
+      onSaved?.(savedItem, null);
+      handleRefresh?.();
+    },
+    [closeCreateForm, handleRefresh, onSaved],
+  );
   const debugFallbackParameters = useMemo(() => {
     if (autoMode) {
       return buildRequestQuery(currentPage || 1, false);
     }
-
     return {
       filters: storeFilters,
       requestParams: requestParamsSeed,
@@ -198,24 +247,36 @@ const DefaultTable = ({
   const tableFiltersVisible = Boolean(currentConfigs.tableFiltersVisible);
   const defaultTableConfigs = useMemo(
     () => ({
+      ...storeDeclaredConfigs,
       add,
+      addButtonPlacement: normalizedAddButtonPlacement,
+      addLabel: resolvedAddLabel,
+      cardListProps,
       compactBreakpoint,
       debugFallbackParameters,
+      defaultColor,
       effectiveViewMode,
       filters,
       footerComponent,
       forceCardsOnCompact,
       getOptionsForColumn,
+      import: storeDeclaredConfigs.import,
+      importAction,
       initialViewMode,
-      onAdd,
+      exportAction,
+      onAdd: resolvedOnAdd,
       onDataLoaded,
       onEditRow,
       onEndReached: handleEndReached,
+      onExport,
       onFilterChange,
+      onImport,
       onMomentumScrollBegin,
+      onRefresh: handleRefresh,
       onRowPress,
       onSaved,
       onScrollBeginDrag,
+      onSelectionChange,
       pinRowActions,
       renderCard,
       requestParams: requestParamsSeed,
@@ -224,52 +285,77 @@ const DefaultTable = ({
       rowActionsComponent,
       rowActionsWidth,
       rowStyle,
+      searchKey,
+      searchPlaceholder,
+      selectable: storeSelectable,
       showColumnFiltersButton,
-      showRowActions,
+      showSearch,
+      showRowActions: storeDeclaredConfigs.showRowActions === false ? false : showRowActions,
       showToolbar,
       showTotalItemsInCompactToolbar,
       showTotalItemsInFooter,
       sortedData,
-      summary,
-      summaryLabels,
+      summary: summary !== undefined ? summary : store?.getters?.summary,
+      summaryLabels: Object.keys(summaryLabels || {}).length
+        ? summaryLabels
+        : storeDeclaredConfigs.summaryLabels || {},
       tableFiltersVisible,
+      refreshing: resolvedIsRefreshing,
       tablePreferenceScope,
       toolbarActions,
       viewMode: effectiveViewMode,
     }),
     [
       add,
+      normalizedAddButtonPlacement,
+      resolvedAddLabel,
+      cardListProps,
       compactBreakpoint,
       debugFallbackParameters,
+      defaultColor,
       effectiveViewMode,
       filters,
       footerComponent,
       forceCardsOnCompact,
       getOptionsForColumn,
       handleEndReached,
+      handleRefresh,
+      resolvedOnAdd,
+      storeDeclaredConfigs,
+      storeSelectable,
+      importAction,
       initialViewMode,
-      onAdd,
+      exportAction,
       onDataLoaded,
       onEditRow,
+      onExport,
       onFilterChange,
+      onImport,
       onMomentumScrollBegin,
+      onRefresh,
       onRowPress,
       onSaved,
       onScrollBeginDrag,
+      onSelectionChange,
       pinRowActions,
       renderCard,
       requestParamsSeed,
       requestSort,
+      resolvedIsRefreshing,
       resolvedSort,
       rowActionsComponent,
       rowActionsWidth,
       rowStyle,
+      searchKey,
+      searchPlaceholder,
       showColumnFiltersButton,
+      showSearch,
       showRowActions,
       showToolbar,
       showTotalItemsInCompactToolbar,
       showTotalItemsInFooter,
       sortedData,
+      store,
       summary,
       summaryLabels,
       tableFiltersVisible,
@@ -280,17 +366,29 @@ const DefaultTable = ({
   const defaultTableConfigsSignature = useMemo(
     () =>
       stableSerialize({
+        configuredImport: storeDeclaredConfigs.import || null,
         add,
+        addButtonPlacement: normalizedAddButtonPlacement,
+        addLabel: resolvedAddLabel,
+        cardListProps,
         compactBreakpoint,
+        defaultColor,
         effectiveViewMode,
         filters,
         forceCardsOnCompact,
+        hasExportAction: Boolean(exportAction || onExport),
+        hasImportAction: Boolean(storeDeclaredConfigs.import || importAction || onImport),
         initialViewMode,
         pinRowActions,
         rowActionsComponentType: rowActionsComponent ? typeof rowActionsComponent : '',
         rowActionsWidth,
+        resolvedIsRefreshing,
         resolvedSort,
+        searchKey,
+        searchPlaceholder,
+        selectable: storeSelectable,
         showColumnFiltersButton,
+        showSearch,
         showRowActions,
         showToolbar,
         showTotalItemsInCompactToolbar,
@@ -302,17 +400,31 @@ const DefaultTable = ({
       }),
     [
       add,
+      normalizedAddButtonPlacement,
+      resolvedAddLabel,
+      cardListProps,
       compactBreakpoint,
+      defaultColor,
       debugFallbackParameters,
       effectiveViewMode,
       filters,
       forceCardsOnCompact,
+      storeDeclaredConfigs,
+      storeSelectable,
+      exportAction,
+      importAction,
       initialViewMode,
+      onExport,
+      onImport,
       pinRowActions,
       rowActionsComponent,
       rowActionsWidth,
+      resolvedIsRefreshing,
       resolvedSort,
+      searchKey,
+      searchPlaceholder,
       showColumnFiltersButton,
+      showSearch,
       showRowActions,
       showToolbar,
       showTotalItemsInCompactToolbar,
@@ -324,79 +436,22 @@ const DefaultTable = ({
     ],
   );
 
-  if (store?.getters) {
-    assignGetterValue(store, 'configs', defaultTableConfigs);
-  }
-
-  useEffect(() => {
-    if (storeColumns.length > 0 || !Array.isArray(columns) || columns.length === 0) {
-      return;
-    }
-
-    publishStoreValue(store, 'setColumns', columns, 'columns');
-  }, [columns, store, storeColumns.length]);
-
-  useEffect(() => {
-    if (data === undefined || !Array.isArray(data)) {
-      return;
-    }
-
-    publishStoreValue(store, 'setItems', data, 'items');
-  }, [data, store]);
-
-  useEffect(() => {
-    if (!columnsForTable.length) {
-      return;
-    }
-
-    const storedVisibleColumns = resolveStoredVisibleColumnsPreference(tablePreferenceScope);
-    if (!storedVisibleColumns) {
-      return;
-    }
-
-    const nextVisibleColumns = sanitizeVisibleColumnsPreference({
-      columns: columnsForTable,
-      visibleColumns: storedVisibleColumns,
-    });
-    const currentVisibleColumns = store?.getters?.visibleColumns || {};
-
-    if (stableSerialize(currentVisibleColumns) === stableSerialize(nextVisibleColumns)) {
-      return;
-    }
-
-    publishStoreValue(store, 'setVisibleColumns', nextVisibleColumns, 'visibleColumns');
-  }, [columnsForTable, store, tablePreferenceScope]);
-
-  useEffect(() => {
-    if (!columnsForTable.length || Object.keys(storeFilters).length > 0) {
-      return;
-    }
-
-    const storedFilters = resolveStoredTableFiltersPreference(tablePreferenceScope);
-    if (!storedFilters) {
-      return;
-    }
-
-    const nextFilters = sanitizeTableFiltersPreference({
-      columns: columnsForTable,
-      filters: storedFilters,
-    });
-
-    if (Object.keys(nextFilters).length === 0) {
-      return;
-    }
-
-    publishStoreValue(store, 'setFilters', nextFilters, 'filters');
-  }, [columnsForTable, store, storeFilters, tablePreferenceScope]);
-
-  useEffect(() => {
-    if (configsSignatureRef.current === defaultTableConfigsSignature) {
-      return;
-    }
-
-    configsSignatureRef.current = defaultTableConfigsSignature;
-    publishStoreValue(store, 'setConfigs', defaultTableConfigs, 'configs');
-  }, [defaultTableConfigs, defaultTableConfigsSignature, store]);
+  // Do not mutate store.configs during render. A new configs object is built
+  // every pass; writing it here retriggers subscribers and React #185 when
+  // opening Adicionar on DefaultTable (categories). Sync only in the hook
+  // when defaultTableConfigsSignature changes.
+  useDefaultTableStoreSync({
+    columns,
+    columnsForTable,
+    data,
+    defaultTableConfigs,
+    defaultTableConfigsSignature,
+    store,
+    storeColumnsLength: storeColumns.length,
+    storeFilters,
+    storeName,
+    tablePreferenceScope,
+  });
 
   useEffect(() => {
     onDataLoaded?.(sortedData);
@@ -416,20 +471,71 @@ const DefaultTable = ({
       {showToolbar !== false ? <DefaultTableToolbar storeName={storeName} /> : null}
       <DefaultTableBody storeName={storeName} />
       <DefaultTableFooter storeName={storeName} />
+      {shouldRenderBottomAddButton ? (
+        <View style={styles.bottomAddBar}>
+          <TouchableOpacity
+            accessibilityRole="button"
+            accessibilityLabel={resolvedAddLabel}
+            activeOpacity={0.84}
+            style={[
+              styles.bottomAddButton,
+              { backgroundColor: floatingAddBackgroundColor },
+            ]}
+            onPress={resolvedOnAdd}
+          >
+            <Icon name="plus" size={18} color={floatingAddIconColor} />
+            <Text style={[styles.bottomAddText, { color: floatingAddIconColor }]}>
+              {resolvedAddLabel}
+            </Text>
+          </TouchableOpacity>
+        </View>
+      ) : null}
       {shouldRenderFloatingAddButton ? (
         <TouchableOpacity
           accessibilityRole="button"
-          accessibilityLabel={global.t?.t(storeName, 'button', 'add') || 'Adicionar'}
+          accessibilityLabel={resolvedAddLabel}
           activeOpacity={0.84}
           style={[
             styles.floatingAddButton,
             { backgroundColor: floatingAddBackgroundColor },
           ]}
-          onPress={() => onAdd?.()}
+          onPress={resolvedOnAdd}
         >
           <Icon name="plus" size={24} color={floatingAddIconColor} />
         </TouchableOpacity>
       ) : null}
+      <Modal
+        animationType="fade"
+        onRequestClose={closeCreateForm}
+        transparent
+        visible={isCreateFormOpen}
+      >
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalCard}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>{resolvedAddLabel}</Text>
+              <TouchableOpacity
+                accessibilityRole="button"
+                accessibilityLabel={global.t?.t(storeName, 'button', 'cancel') || 'Cancelar'}
+                onPress={closeCreateForm}
+                style={styles.modalCloseButton}
+              >
+                <Icon name="x" size={16} color={themeColors.textPrimary || '#0F172A'} />
+              </TouchableOpacity>
+            </View>
+            <DefaultForm
+              actions={resolvedActions}
+              columns={columnsForTable}
+              getOptionsForColumn={getOptionsForColumn}
+              mode="create"
+              onCancel={closeCreateForm}
+              onSaved={handleDefaultCreateSaved}
+              row={requestParamsSeed}
+              storeName={storeName}
+            />
+          </View>
+        </View>
+      </Modal>
     </View>
   );
 };