@controleonline/ui-default 1.0.273 → 1.0.274

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-default",
-  "version": "1.0.273",
+  "version": "1.0.274",
   "author": "ControleOnline",
   "description": "ControleOnline Default Quasar UI Component",
   "license": "MIT",

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,
@@ -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/DefaultTableToolbar.js

@@ -34,7 +34,11 @@ const resolveConfiguredLabel = config => {
   return global.t?.t?.('defaultTable', 'button', 'import');
 };
 
-const DefaultTableToolbar = ({ storeName }) => {
+const DefaultTableToolbar = ({
+  storeName,
+  showToolbarActions: showToolbarActionsProp,
+  showToolbarControls: showToolbarControlsProp,
+}) => {
   const store = useStore(storeName);
   const [isImportModalVisible, setIsImportModalVisible] = useState(false);
   const { width } = useWindowDimensions();
@@ -44,6 +48,14 @@ const DefaultTableToolbar = ({ storeName }) => {
   const showTotalItemsInCompactToolbar = configs.showTotalItemsInCompactToolbar === true;
   const showTotalItemsInFooter = configs.showTotalItemsInFooter !== false;
   const toolbarActions = Array.isArray(configs.toolbarActions) ? configs.toolbarActions : [];
+  const showToolbarActions =
+    showToolbarActionsProp === null || showToolbarActionsProp === undefined
+      ? configs.showToolbarActions !== false
+      : showToolbarActionsProp !== false;
+  const showToolbarControls =
+    showToolbarControlsProp === null || showToolbarControlsProp === undefined
+      ? configs.showToolbarControls !== false
+      : showToolbarControlsProp !== false;
   const buildTransferAction = (action, fallback) => {
     if (!action) return null;
 
@@ -99,11 +111,9 @@ const DefaultTableToolbar = ({ storeName }) => {
       label: global.t?.t?.('defaultTable', 'button', 'export'),
     },
   );
-  const resolvedToolbarActions = [
-    importTableAction,
-    exportTableAction,
-    ...toolbarActions,
-  ].filter(Boolean);
+  const resolvedToolbarActions = showToolbarActions
+    ? [importTableAction, exportTableAction, ...toolbarActions].filter(Boolean)
+    : [];
   const { tableBorderColors, toolbarColors } = useDefaultTableTheme();
   const {
     backgroundColor: toolbarBackgroundColor,
@@ -178,7 +188,7 @@ const DefaultTableToolbar = ({ storeName }) => {
         <DefaultTableCollapsedSearch storeName={storeName} />
         <View style={styles.toolbarActionGroup}>
           {!shouldRenderCompactToolbarTotalItems ? renderToolbarActions() : null}
-          <DefaultTableControls storeName={storeName} />
+          {showToolbarControls ? <DefaultTableControls storeName={storeName} /> : null}
         </View>
       </View>
       <DefaultTableImportModal

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

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Modal, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import DefaultTableBody from './DefaultTableBody';
+import DefaultTableFooter from './DefaultTableFooter';
+import DefaultTableToolbar from './DefaultTableToolbar';
+import DefaultForm from '../form/DefaultForm';
+import styles from './DefaultTable.styles';
+
+export default function DefaultTableView({
+  tablePanelBorderColor,
+  themeColors,
+  showToolbar,
+  storeName,
+  showToolbarActions,
+  showToolbarControls,
+  shouldRenderBottomAddButton,
+  resolvedAddLabel,
+  floatingAddBackgroundColor,
+  resolvedOnAdd,
+  floatingAddIconColor,
+  shouldRenderFloatingAddButton,
+  closeCreateForm,
+  isCreateFormOpen,
+  resolvedActions,
+  columnsForTable,
+  getOptionsForColumn,
+  handleDefaultCreateSaved,
+  requestParamsSeed
+}) {
+  return (
+    <View
+      style={[
+        styles.wrap,
+        {
+          borderWidth: tablePanelBorderColor ? 1 : 0,
+          borderColor: tablePanelBorderColor,
+          backgroundColor: themeColors.panelBackground,
+        },
+      ]}
+    >
+      {showToolbar !== false ? (
+        <DefaultTableToolbar
+          storeName={storeName}
+          showToolbarActions={showToolbarActions}
+          showToolbarControls={showToolbarControls}
+        />
+      ) : 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>
+  );
+}

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

@@ -287,6 +287,43 @@ describe('DefaultTable', () => {
     }
   });
 
+  it('can show only search in the toolbar while hiding configured actions and controls', () => {
+    mockWindowDimensions = {width: 375, height: 667};
+    mockStores.categories = {
+      actions: {},
+      getters: {
+        columns: [{key: 'name', label: 'Nome', searchable: true}],
+        configs: {
+          import: {enabled: true, importType: 'product', label: 'Importar CSV'},
+          showSearch: true,
+        },
+        items: [],
+        totalItems: 17,
+      },
+    };
+    let tree;
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, {
+          columns: [{key: 'name', label: 'Nome', searchable: true}],
+          data: [],
+          showToolbarActions: false,
+          showToolbarControls: false,
+          showTotalItemsInFooter: false,
+          storeName: 'categories',
+        }),
+      );
+    });
+
+    const iconNames = tree.root.findAllByType('icon').map(node => node.props.name);
+    expect(iconNames).toContain('search');
+    expect(iconNames).not.toEqual(
+      expect.arrayContaining(['upload', 'code', 'filter', 'list', 'columns']),
+    );
+    expect(tree.root.findAllByType('Text').map(node => node.props.children)).not.toContain('Importar CSV');
+  });
+
   it('keeps the list/card toggle visible on compact layouts even when cards are forced', () => {
     let tree;
 

package/src/tests/react/components/table/DefaultTableToolbar.waiter.test.js

@@ -0,0 +1,42 @@
+const React = require('react');
+const renderer = require('react-test-renderer');
+global.IS_REACT_ACT_ENVIRONMENT = true;
+let mockConfigs;
+jest.mock('@store', () => ({useStore: () => ({getters: {configs: mockConfigs}})}));
+jest.mock('react-native', () => ({
+ View: props => require('react').createElement('view', props, props.children),
+ Text: props => require('react').createElement('text', props, props.children),
+ StyleSheet: {create: value => value},
+ Platform: {select: value => value.web || value.default || null},
+ useWindowDimensions: () => ({width: 400}),
+}));
+jest.mock('../../../../react/components/table/DefaultTableControls', () => () => require('react').createElement('controls'));
+jest.mock('../../../../react/components/table/DefaultToolbarAction', () => props => require('react').createElement('action', props));
+jest.mock('../../../../react/components/table/DefaultTableImportModal', () => () => null);
+jest.mock('../../../../react/components/table/DefaultTableSearch', () => ({
+ DefaultTableCollapsedSearch: () => null, DefaultTableCompactSearch: () => null, DefaultTableInlineSearch: () => require('react').createElement('search'),
+}));
+jest.mock('../../../../react/components/table/useDefaultTableTheme', () => () => ({tableBorderColors: {}, toolbarColors: {}}));
+const Toolbar = require('../../../../react/components/table/DefaultTableToolbar').default;
+let tree;
+beforeEach(() => {mockConfigs = {toolbarActions: [{key: 'custom', onPress: jest.fn()}], importAction: jest.fn(), exportAction: jest.fn()};});
+afterEach(() => {if(tree) renderer.act(() => tree.unmount());});
+it('keeps generic actions and controls enabled by default', () => {
+ renderer.act(() => {tree = renderer.create(React.createElement(Toolbar, {storeName: 'categories'}));});
+ expect(tree.root.findAllByType('action')).toHaveLength(3);
+ expect(tree.root.findAllByType('controls')).toHaveLength(1);
+});
+it('hides actions and administrative controls while keeping waiter search', () => {
+ renderer.act(() => {tree = renderer.create(React.createElement(Toolbar, {storeName: 'categories', showToolbarActions: false, showToolbarControls: false}));});
+ expect(tree.root.findAllByType('action')).toHaveLength(0);
+ expect(tree.root.findAllByType('controls')).toHaveLength(0);
+ expect(tree.root.findAllByType('search')).toHaveLength(1);
+});
+it('honors stored flags and allows an explicit screen override', () => {
+ mockConfigs.showToolbarActions = false; mockConfigs.showToolbarControls = false;
+ renderer.act(() => {tree = renderer.create(React.createElement(Toolbar, {storeName: 'categories'}));});
+ expect(tree.root.findAllByType('controls')).toHaveLength(0);
+ renderer.act(() => tree.update(React.createElement(Toolbar, {storeName: 'categories', showToolbarActions: true, showToolbarControls: true})));
+ expect(tree.root.findAllByType('controls')).toHaveLength(1);
+ expect(tree.root.findAllByType('action')).toHaveLength(3);
+});