@controleonline/ui-default 1.0.270 → 1.0.272

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import { useWindowDimensions } from 'react-native';
+import { useWindowDimensions, View } from 'react-native';
 import { useStore } from '@store';
-import DefaultTableCards from './DefaultTableCards';
-import DefaultTableRows from './DefaultTableRows';
-import { DEFAULT_COMPACT_BREAKPOINT } from './DefaultTable.utils';
+import DefaultTableCards from './DefaultTableCards';
+import DefaultTableRows from './DefaultTableRows';
+import { DEFAULT_COMPACT_BREAKPOINT } from './DefaultTable.utils';
+import styles from './DefaultTable.styles';
 
 const DefaultTableBody = ({ storeName }) => {
   const store = useStore(storeName);
@@ -18,9 +19,13 @@ const DefaultTableBody = ({ storeName }) => {
     configs.initialViewMode ||
     'table';
 
-  return effectiveViewMode === 'cards'
-    ? <DefaultTableCards storeName={storeName} />
-    : <DefaultTableRows storeName={storeName} />;
-};
+  return (
+    <View style={styles.body}>
+      {effectiveViewMode === 'cards'
+        ? <DefaultTableCards storeName={storeName} />
+        : <DefaultTableRows storeName={storeName} />}
+    </View>
+  );
+};
 
 export default DefaultTableBody;

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

@@ -31,6 +31,16 @@ const DefaultTableCards = ({ storeName }) => {
     liveItems: store?.getters?.items,
     sortedData: configs.sortedData,
   });
+  const cardListProps =
+    configs.cardListProps && typeof configs.cardListProps === 'object'
+      ? configs.cardListProps
+      : {};
+  const {
+    contentContainerStyle,
+    key: cardListKey,
+    listKey,
+    ...flatListProps
+  } = cardListProps;
   const isLoading = Boolean(store?.getters?.isLoadingList || store?.getters?.isLoading);
   const emptyStateLabel = isLoading
     ? global.t?.t(storeName, 'label', 'loading')
@@ -39,6 +49,7 @@ const DefaultTableCards = ({ storeName }) => {
   const tableMutedColor = palette.textSecondary;
   const tableSurfaceColor = palette.background;
   const tableTextColor = palette.text;
+  const hasBottomAddButton = configs.addButtonPlacement === 'bottom';
   const handleListScroll = event => {
     if (shouldTriggerEndReachedFromScroll(event)) {
       configs.onEndReached?.();
@@ -159,11 +170,17 @@ const DefaultTableCards = ({ storeName }) => {
 
   return (
     <FlatList
+      key={listKey || cardListKey || `cards-${flatListProps.numColumns || 1}`}
+      {...flatListProps}
       data={sortedData}
       keyExtractor={getRowKey}
       renderItem={({ item, index }) => renderCardItem(item, index)}
       style={styles.cardsScroll}
-      contentContainerStyle={styles.cardsGrid}
+      contentContainerStyle={[
+        styles.cardsGrid,
+        contentContainerStyle,
+        hasBottomAddButton ? styles.cardsGridWithBottomAdd : null,
+      ]}
       ListEmptyComponent={(
         <DefaultTableEmptyState
           emptyStateLabel={emptyStateLabel}
@@ -180,6 +197,8 @@ const DefaultTableCards = ({ storeName }) => {
       onScrollBeginDrag={configs.onScrollBeginDrag || undefined}
       onEndReached={configs.onEndReached}
       onEndReachedThreshold={END_REACHED_THRESHOLD}
+      onRefresh={configs.onRefresh}
+      refreshing={Boolean(configs.refreshing)}
       scrollEventThrottle={120}
       showsVerticalScrollIndicator={false}
     />

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

@@ -1,205 +1,180 @@
-import React from 'react';
-import { Text, TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import { useStore } from '@store';
-import DefaultColumnMenu from './DefaultColumnMenu';
-import DefaultDebug from './DefaultDebug';
-import DefaultFiltersModal from './DefaultFiltersModal';
-import DefaultModalButton from './DefaultModalButton';
-import styles from './DefaultTable.styles';
-import { normalizeText } from '../inputs/defaultInputUtils';
-import {
-  persistTableViewModePreference,
-  resolveDefaultTablePreferenceScope,
-} from '../../utils/tableVisibleColumnsPreferences';
-import { shouldIncludeColumn } from './DefaultTable.utils';
-import useDefaultTableTheme from './useDefaultTableTheme';
-
-const DefaultTableControls = ({ storeName }) => {
-  const store = useStore(storeName);
-  const configs = store?.getters?.configs || {};
-  const effectiveViewMode =
-    configs.effectiveViewMode ||
-    configs.viewMode ||
-    configs.initialViewMode ||
-    'table';
-  const tablePreferenceScope =
-    configs.tablePreferenceScope ||
-    resolveDefaultTablePreferenceScope({ storeName });
-  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
-  const filters = store?.getters?.filters || {};
-  const hasFilterableColumns = columns.some(
-    column =>
-      configs.showColumnFiltersButton !== false &&
-      shouldIncludeColumn(column) &&
-      column?.filter !== false &&
-      column?.filters !== false,
-  );
-  const tableFiltersVisible = Boolean(configs.tableFiltersVisible);
-  const activeFilterCount = Object.values(filters).filter(value => normalizeText(value) !== '').length;
-  const addConfig = store?.getters?.add;
-  const shouldRenderAddButton =
-    (addConfig === true || configs.add === true) &&
-    (typeof configs.onAdd === 'function' || typeof store?.actions?.save === 'function');
-  const { tableButtonColors } = useDefaultTableTheme();
-  const {
-    backgroundColor,
-    borderColor,
-    iconColor,
-    pressedBackgroundColor,
-    pressedBorderColor,
-    pressedIconColor,
-    textColor,
-  } = tableButtonColors;
-
-  const buttonStyle = [
-    styles.toolbarButton,
-    { borderColor, backgroundColor },
-  ];
-  const pressedStyle = {
-    backgroundColor: pressedBackgroundColor,
-    borderColor: pressedBorderColor,
-  };
-  const updateConfigs = nextConfigs => {
-    if (typeof store?.actions?.setConfigs === 'function') {
-      store.actions.setConfigs(nextConfigs);
-      return;
-    }
-
-    if (store?.getters) {
-      store.getters.configs = nextConfigs;
-    }
-  };
-  const nextViewMode = effectiveViewMode === 'table' ? 'cards' : 'table';
-
-  return (
-    <>
-      <DefaultDebug storeName={storeName} />
-      {hasFilterableColumns && effectiveViewMode === 'table' ? (
-        <TouchableOpacity
-          style={[
-            ...buttonStyle,
-            tableFiltersVisible ? pressedStyle : null,
-          ]}
-          activeOpacity={0.82}
-          onPress={() =>
-            updateConfigs({
-              ...configs,
-              tableFiltersVisible: !tableFiltersVisible,
-            })
-          }
-        >
-          <Icon
-            name="filter"
-            size={14}
-            color={tableFiltersVisible ? pressedIconColor : textColor}
-          />
-          {activeFilterCount > 0 ? (
-            <Text
-              style={[
-                styles.toolbarBadgeText,
-                { color: tableFiltersVisible ? pressedIconColor : textColor },
-              ]}
-            >
-              {activeFilterCount}
-            </Text>
-          ) : null}
-        </TouchableOpacity>
-      ) : null}
-      {hasFilterableColumns && effectiveViewMode === 'cards' ? (
-        <DefaultModalButton
-          renderButton={({ isOpen, open }) => (
-            <TouchableOpacity
-              style={[
-                ...buttonStyle,
-                isOpen ? pressedStyle : null,
-              ]}
-              activeOpacity={0.82}
-              onPress={open}
-            >
-              <Icon
-                name="filter"
-                size={14}
-                color={isOpen ? pressedIconColor : textColor}
-              />
-              {activeFilterCount > 0 ? (
-                <Text
-                  style={[
-                    styles.toolbarBadgeText,
-                    { color: isOpen ? pressedIconColor : textColor },
-                  ]}>
-                  {activeFilterCount}
-                </Text>
-              ) : null}
-            </TouchableOpacity>
-          )}
-        >
-          {({ close, isOpen }) => (
-            <DefaultFiltersModal
-              storeName={storeName}
-              visible={isOpen}
-              onClose={close}
-            />
-          )}
-        </DefaultModalButton>
-      ) : null}
-      <TouchableOpacity
-        style={buttonStyle}
-        activeOpacity={0.82}
-        onPress={() => {
-          const nextConfigs = {
-            ...configs,
-            effectiveViewMode: nextViewMode,
-            viewMode: nextViewMode,
-          };
-
-          persistTableViewModePreference(tablePreferenceScope, nextConfigs.viewMode);
-          updateConfigs(nextConfigs);
-        }}
-      >
-        <Icon
-          name={nextViewMode === 'cards' ? 'grid' : 'list'}
-          size={14}
-          color={textColor}
-        />
-      </TouchableOpacity>
-      <DefaultModalButton
-        renderButton={({ isOpen, toggle }) => (
-          <TouchableOpacity
-            style={[
-              ...buttonStyle,
-              isOpen ? pressedStyle : null,
-            ]}
-            activeOpacity={0.82}
-            onPress={toggle}
-          >
-            <Icon name="columns" size={14} color={isOpen ? pressedIconColor : textColor} />
-          </TouchableOpacity>
-        )}
-      >
-        {({ close, isOpen }) => (
-          <DefaultColumnMenu
-            storeName={storeName}
-            visible={isOpen}
-            onClose={close}
-          />
-        )}
-      </DefaultModalButton>
-      {shouldRenderAddButton ? (
-        <TouchableOpacity
-          style={[
-            styles.toolbarButton,
-            styles.toolbarAddButton,
-            { backgroundColor: backgroundColor, borderColor: backgroundColor },
-          ]}
-          activeOpacity={0.85}
-          onPress={() => configs.onAdd?.()}
-        >
-          <Icon name="plus" size={16} color={textColor} />
-        </TouchableOpacity>
-      ) : null}
-    </>
-  );
-};
-
-export default DefaultTableControls;
+// fluxo: outros | etapa: order-history-page-filtro | https://github.com/ControleOnline/app-community/wiki/Smoke-Test-Flows
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import DefaultColumnMenu from './DefaultColumnMenu';
+import DefaultDebug from './DefaultDebug';
+import DefaultFiltersModal from './DefaultFiltersModal';
+import DefaultModalButton from './DefaultModalButton';
+import styles from './DefaultTable.styles';
+import { normalizeText } from '../inputs/defaultInputUtils';
+import {
+  persistTableViewModePreference,
+  resolveDefaultTablePreferenceScope,
+} from '../../utils/tableVisibleColumnsPreferences';
+import { shouldIncludeColumn } from './DefaultTable.utils';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultTableControls = ({ storeName }) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const effectiveViewMode =
+    configs.effectiveViewMode ||
+    configs.viewMode ||
+    configs.initialViewMode ||
+    'table';
+  const tablePreferenceScope =
+    configs.tablePreferenceScope ||
+    resolveDefaultTablePreferenceScope({ storeName });
+  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+  const filters = store?.getters?.filters || {};
+  const hasFilterableColumns = columns.some(
+    column =>
+      configs.showColumnFiltersButton !== false &&
+      shouldIncludeColumn(column) &&
+      column?.filter !== false &&
+      column?.filters !== false,
+  );
+  const activeFilterCount = Object.values(filters).filter(value => normalizeText(value) !== '').length;
+  const addConfig = store?.getters?.add;
+  const addButtonPlacement = normalizeText(configs.addButtonPlacement) || 'toolbar';
+  const shouldRenderAddButton =
+    addButtonPlacement === 'toolbar' &&
+    (addConfig === true || configs.add === true) &&
+    (typeof configs.onAdd === 'function' || typeof store?.actions?.save === 'function');
+  const { tableButtonColors } = useDefaultTableTheme();
+  const {
+    backgroundColor,
+    borderColor,
+    iconColor,
+    pressedBackgroundColor,
+    pressedBorderColor,
+    pressedIconColor,
+    textColor,
+  } = tableButtonColors;
+
+  const buttonStyle = [
+    styles.toolbarButton,
+    { borderColor, backgroundColor },
+  ];
+  const pressedStyle = {
+    backgroundColor: pressedBackgroundColor,
+    borderColor: pressedBorderColor,
+  };
+  const updateConfigs = nextConfigs => {
+    if (typeof store?.actions?.setConfigs === 'function') {
+      store.actions.setConfigs(nextConfigs);
+      return;
+    }
+
+    if (store?.getters) {
+      store.getters.configs = nextConfigs;
+    }
+  };
+  const nextViewMode = effectiveViewMode === 'table' ? 'cards' : 'table';
+
+  return (
+    <>
+      <DefaultDebug storeName={storeName} />
+      {/* app-community#811: LISTA (table) e CARD abrem o mesmo DefaultFiltersModal */}
+      {hasFilterableColumns ? (
+        <DefaultModalButton
+          renderButton={({ isOpen, open }) => (
+            <TouchableOpacity
+              accessibilityLabel="Filtros"
+              testID="default-table-filter-button"
+              style={[
+                ...buttonStyle,
+                isOpen ? pressedStyle : null,
+              ]}
+              activeOpacity={0.82}
+              onPress={open}
+            >
+              <Icon
+                name="filter"
+                size={14}
+                color={isOpen ? pressedIconColor : textColor}
+              />
+              {activeFilterCount > 0 ? (
+                <Text
+                  style={[
+                    styles.toolbarBadgeText,
+                    { color: isOpen ? pressedIconColor : textColor },
+                  ]}
+                >
+                  {activeFilterCount}
+                </Text>
+              ) : null}
+            </TouchableOpacity>
+          )}
+        >
+          {({ close, isOpen }) => (
+            <DefaultFiltersModal
+              storeName={storeName}
+              visible={isOpen}
+              onClose={close}
+            />
+          )}
+        </DefaultModalButton>
+      ) : null}
+      <TouchableOpacity
+        style={buttonStyle}
+        activeOpacity={0.82}
+        onPress={() => {
+          const nextConfigs = {
+            ...configs,
+            effectiveViewMode: nextViewMode,
+            viewMode: nextViewMode,
+          };
+
+          persistTableViewModePreference(tablePreferenceScope, nextConfigs.viewMode);
+          updateConfigs(nextConfigs);
+        }}
+      >
+        <Icon
+          name={nextViewMode === 'cards' ? 'grid' : 'list'}
+          size={14}
+          color={textColor}
+        />
+      </TouchableOpacity>
+      <DefaultModalButton
+        renderButton={({ isOpen, toggle }) => (
+          <TouchableOpacity
+            style={[
+              ...buttonStyle,
+              isOpen ? pressedStyle : null,
+            ]}
+            activeOpacity={0.82}
+            onPress={toggle}
+          >
+            <Icon name="columns" size={14} color={isOpen ? pressedIconColor : textColor} />
+          </TouchableOpacity>
+        )}
+      >
+        {({ close, isOpen }) => (
+          <DefaultColumnMenu
+            storeName={storeName}
+            visible={isOpen}
+            onClose={close}
+          />
+        )}
+      </DefaultModalButton>
+      {shouldRenderAddButton ? (
+        <TouchableOpacity
+          style={[
+            styles.toolbarButton,
+            styles.toolbarAddButton,
+            { backgroundColor: backgroundColor, borderColor: backgroundColor },
+          ]}
+          activeOpacity={0.85}
+          onPress={() => configs.onAdd?.()}
+        >
+          <Icon name="plus" size={16} color={textColor} />
+        </TouchableOpacity>
+      ) : null}
+    </>
+  );
+};
+
+export default DefaultTableControls;

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

@@ -0,0 +1,108 @@
+import React, { useMemo } from 'react';
+import { Modal } from 'react-native';
+import ImportsPage from '@controleonline/ui-common/src/react/pages/Imports';
+import { useStore } from '@store';
+
+const normalizeText = value => String(value ?? '').trim();
+
+const FORBIDDEN_EXTENSION_TOKENS = new Set(['*', '*.*', '.', '', '.*']);
+
+export const sanitizeAllowedExtensions = (extensions, fallback = ['csv']) => {
+  const source = Array.isArray(extensions) ? extensions : [];
+  const cleaned = source
+    .map(item => normalizeText(item).replace(/^\./, '').toLowerCase())
+    .filter(item => item && !FORBIDDEN_EXTENSION_TOKENS.has(item) && !item.includes('*'));
+
+  if (cleaned.length === 0) {
+    return (fallback || ['csv'])
+      .map(item => normalizeText(item).replace(/^\./, '').toLowerCase())
+      .filter(item => item && !FORBIDDEN_EXTENSION_TOKENS.has(item) && !item.includes('*'));
+  }
+
+  return [...new Set(cleaned)];
+};
+
+const translateConfigKey = key => {
+  if (!Array.isArray(key) || key.length < 3) {
+    return '';
+  }
+
+  return normalizeText(global.t?.t?.(key[0], key[1], key[2]));
+};
+
+const resolveConfiguredText = ({ config, fallbackKey, literalKey, translationKey }) => {
+  const literalValue = normalizeText(config?.[literalKey]);
+  if (literalValue) {
+    return literalValue;
+  }
+
+  const configuredTranslation = translateConfigKey(config?.[translationKey]);
+  if (configuredTranslation) {
+    return configuredTranslation;
+  }
+
+  return normalizeText(global.t?.t?.('defaultTable', 'label', fallbackKey));
+};
+
+const DefaultTableImportModal = ({
+  onClose,
+  storeName,
+  visible,
+  importType: importTypeProp,
+  allowedExtensions: allowedExtensionsProp,
+  title: titleProp,
+}) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const resolvedConfig = configs.import || {};
+  const importType =
+    normalizeText(importTypeProp) || normalizeText(resolvedConfig.importType) || 'csv';
+  const allowedExtensions = sanitizeAllowedExtensions(
+    allowedExtensionsProp || resolvedConfig.allowedExtensions,
+    importType === 'invoice_tax' || importType === 'xml' ? ['xml', 'zip'] : ['csv'],
+  );
+
+  const context = useMemo(
+    () => ({
+      context: importType,
+      storeName,
+      allowedExtensions,
+      title:
+        normalizeText(titleProp) ||
+        resolveConfiguredText({
+          config: resolvedConfig,
+          fallbackKey: 'import',
+          literalKey: 'title',
+          translationKey: 'titleKey',
+        }),
+      searchPlaceholder: resolveConfiguredText({
+        config: resolvedConfig,
+        fallbackKey: 'importSearch',
+        literalKey: 'searchPlaceholder',
+        translationKey: 'searchPlaceholderKey',
+      }),
+    }),
+    [
+      allowedExtensions,
+      importType,
+      resolvedConfig.searchPlaceholder,
+      resolvedConfig.searchPlaceholderKey,
+      resolvedConfig.title,
+      resolvedConfig.titleKey,
+      storeName,
+      titleProp,
+    ],
+  );
+
+  if (!importType) {
+    return null;
+  }
+
+  return (
+    <Modal visible={visible} animationType="slide" transparent={false}>
+      <ImportsPage context={context} onClose={onClose} />
+    </Modal>
+  );
+};
+
+export default DefaultTableImportModal;

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

@@ -72,6 +72,7 @@ const DefaultTableInput = ({
       column={column}
       columns={columns}
       containerStyle={options.containerStyle}
+      defaultColor={options.defaultColor || configs.defaultColor}
       displayValue={options.displayValue}
       editing={isEditing}
       getOptionsForColumn={configs.getOptionsForColumn}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const DEFAULT_ROW_ACTIONS_WIDTH = 96;
+const DEFAULT_ROW_ACTIONS_WIDTH = 140;
 
 const isReactComponentType = value =>
   value &&