@controleonline/ui-default 1.0.272 → 1.0.274

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

@@ -1,26 +1,21 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Modal, Text, TouchableOpacity, View, useWindowDimensions } from 'react-native';
+import { 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';
-import Icon from 'react-native-vector-icons/Feather';
 import { normalizeText } from '../inputs/defaultInputUtils';
 import { DEFAULT_COMPACT_BREAKPOINT, isObject, stableSerialize } from './DefaultTable.utils';
 import {
   resolveDefaultTablePreferenceScope,
   resolveStoredTableViewModePreference,
 } 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 {
   useDefaultTableSortedData,
   useDefaultTableSortState,
 } from './useDefaultTableSorting';
 import useDefaultTableTheme from './useDefaultTableTheme';
+import DefaultTableView from './DefaultTableView';
 
 import {
   assignGetterValue,
@@ -80,6 +75,8 @@ const DefaultTable = ({
   showSearch = null,
   showRowActions = true,
   showToolbar = true,
+  showToolbarActions = null,
+  showToolbarControls = null,
   showTotalItemsInCompactToolbar = false,
   showTotalItemsInFooter = true,
   sort = null,
@@ -292,6 +289,14 @@ const DefaultTable = ({
       showSearch,
       showRowActions: storeDeclaredConfigs.showRowActions === false ? false : showRowActions,
       showToolbar,
+      showToolbarActions:
+        showToolbarActions === null
+          ? storeDeclaredConfigs.showToolbarActions !== false
+          : showToolbarActions !== false,
+      showToolbarControls:
+        showToolbarControls === null
+          ? storeDeclaredConfigs.showToolbarControls !== false
+          : showToolbarControls !== false,
       showTotalItemsInCompactToolbar,
       showTotalItemsInFooter,
       sortedData,
@@ -352,6 +357,8 @@ const DefaultTable = ({
       showSearch,
       showRowActions,
       showToolbar,
+      showToolbarActions,
+      showToolbarControls,
       showTotalItemsInCompactToolbar,
       showTotalItemsInFooter,
       sortedData,
@@ -391,6 +398,8 @@ const DefaultTable = ({
         showSearch,
         showRowActions,
         showToolbar,
+        showToolbarActions,
+        showToolbarControls,
         showTotalItemsInCompactToolbar,
         showTotalItemsInFooter,
         storedViewMode,
@@ -427,6 +436,8 @@ const DefaultTable = ({
       showSearch,
       showRowActions,
       showToolbar,
+      showToolbarActions,
+      showToolbarControls,
       showTotalItemsInCompactToolbar,
       showTotalItemsInFooter,
       storedViewMode,
@@ -436,10 +447,10 @@ const DefaultTable = ({
     ],
   );
 
-  if (store?.getters) {
-    assignGetterValue(store, 'configs', defaultTableConfigs);
-  }
-
+  // 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,
@@ -457,87 +468,27 @@ const DefaultTable = ({
     onDataLoaded?.(sortedData);
   }, [onDataLoaded, sortedData]);
 
-  return (
-    <View
-      style={[
-        styles.wrap,
-        {
-          borderWidth: tablePanelBorderColor ? 1 : 0,
-          borderColor: tablePanelBorderColor,
-          backgroundColor: themeColors.panelBackground,
-        },
-      ]}
-    >
-      {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={resolvedAddLabel}
-          activeOpacity={0.84}
-          style={[
-            styles.floatingAddButton,
-            { backgroundColor: floatingAddBackgroundColor },
-          ]}
-          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>
-  );
+  return <DefaultTableView {...{
+    tablePanelBorderColor,
+    themeColors,
+    showToolbar,
+    storeName,
+    showToolbarActions,
+    showToolbarControls,
+    shouldRenderBottomAddButton,
+    resolvedAddLabel,
+    floatingAddBackgroundColor,
+    resolvedOnAdd,
+    floatingAddIconColor,
+    shouldRenderFloatingAddButton,
+    closeCreateForm,
+    isCreateFormOpen,
+    resolvedActions,
+    columnsForTable,
+    getOptionsForColumn,
+    handleDefaultCreateSaved,
+    requestParamsSeed
+  }} />;
 };
 
 export default DefaultTable;

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

@@ -470,11 +470,13 @@ const styles = StyleSheet.create({
     textTransform: 'uppercase',
   },
   actionsCell: {
-    minWidth: 96,
+    minWidth: 60,
+    width: 60,
+    flexBasis: 60,
     flexGrow: 0,
     flexShrink: 0,
+    maxWidth: 72,
     alignItems: 'center',
-    paddingHorizontal: 8,
   },
   rowActionsGroup: {
     flexDirection: 'row',
@@ -517,10 +519,11 @@ const styles = StyleSheet.create({
   },
   cardsGrid: {
     paddingVertical: 10,
-    paddingHorizontal: 8,
-    gap: 10,
+    paddingHorizontal: 0,
+    gap: 8,
     flexGrow: 1,
     width: '100%',
+    alignSelf: 'stretch',
   },
   cardsGridWithBottomAdd: {
     paddingBottom: 86,
@@ -539,8 +542,11 @@ const styles = StyleSheet.create({
   cardItem: {
     position: 'relative',
     flex: 1,
+    flexBasis: 0,
+    flexGrow: 1,
     minWidth: 0,
     width: '100%',
+    maxWidth: '100%',
     alignSelf: 'stretch',
   },
   cardItemWithActions: {

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

@@ -438,6 +438,42 @@ export const normalizeSortText = value =>
     .replace(/[\u0300-\u036f]/g, '')
     .toLowerCase();
 
+export const parseSortNumber = value => {
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (value == null) return NaN;
+
+  const raw = String(value).trim();
+  if (!raw || !/[0-9]/.test(raw)) return NaN;
+
+  const compact = raw.replace(/[^0-9,.-]/g, '');
+  if (!compact) return NaN;
+
+  const hasComma = compact.includes(',');
+  const hasDot = compact.includes('.');
+  let normalized = compact;
+
+  if (hasComma && hasDot) {
+    normalized = compact.lastIndexOf(',') > compact.lastIndexOf('.')
+      ? compact.replace(/\./g, '').replace(',', '.')
+      : compact.replace(/,/g, '');
+  } else if (hasComma) {
+    const parts = compact.split(',');
+    normalized = parts.length === 2 && parts[1].length <= 2
+      ? `${parts[0].replace(/\./g, '')}.${parts[1]}`
+      : compact.replace(/,/g, '');
+  } else if (hasDot) {
+    const parts = compact.split('.');
+    if (parts.length > 2) {
+      normalized = compact.replace(/\./g, '');
+    } else if (parts.length === 2 && parts[1].length === 3 && parts[0].length <= 3) {
+      normalized = compact.replace(/\./g, '');
+    }
+  }
+
+  const parsed = Number(normalized);
+  return Number.isFinite(parsed) ? parsed : NaN;
+};
+
 export const resolveSortComparable = ({ column, row, storeName, columns }) => {
   const fieldName = getColumnKey(column);
   const sortField = getSortField(column);
@@ -472,11 +508,9 @@ export const resolveSortComparable = ({ column, row, storeName, columns }) => {
         storeName,
       }));
 
-  const normalizedNumber = Number(
-    String(resolvedValue).replace(/[^0-9,.-]/g, '').replace(',', '.'),
-  );
+  const normalizedNumber = parseSortNumber(resolvedValue);
 
-  if (Number.isFinite(normalizedNumber) && String(resolvedValue).match(/[0-9]/)) {
+  if (Number.isFinite(normalizedNumber)) {
     return normalizedNumber;
   }