@omniumretail/component-library 1.2.53 → 1.2.55

package/dist/types/components/ResponsiveTable/index.d.ts

@@ -48,5 +48,6 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
     cleanRowSelection?: boolean;
     getRowActions?: (record: any) => any;
     customSelectAllButton?: string;
+    buttonActionIcon?: (record: any) => any | null;
 }
 export declare const ResponsiveTable: (props: ResponsiveTableCustomProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omniumretail/component-library",
-  "version": "1.2.53",
+  "version": "1.2.55",
   "private": false,
   "main": "dist/bundle.js",
   "typings": "./dist/types/index",

package/src/components/ResponsiveTable/ResponsiveTable.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, Story } from "@storybook/react";
 import { ResponsiveTable, ResponsiveTableCustomProps } from '.';
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { DownloadOutlined } from "@ant-design/icons";
 
 export default {
   title: 'ResponsiveTable',
@@ -23,10 +24,10 @@ const Template: Story<ResponsiveTableCustomProps> = (args) => {
 
   const getButtonLabel = (record: any) => {
     return (record as any)?.type === "Efetivo" ? "Pog" : null;
-};
+  };
 
-const getActionsForRecord = (record: any) => {
-  return (record as any)?.role === "Gerente"
+  const getActionsForRecord = (record: any) => {
+    return (record as any)?.role === "Gerente"
       ? [
         {
           key: '1', label: `${t('actions.one')}`, onClick: () => {
@@ -52,14 +53,23 @@ const getActionsForRecord = (record: any) => {
           key: '4', label: 'label 4'
         }
       ];
-};
+  };
+
+      const getIcon = (record: any) => {
+        return record.id === "1"
+            ? <DownloadOutlined />
+            : record.id === "3"
+                ? <DownloadOutlined />
+                : null;
+    };
 
+  const actionsArray = [{ key: '1', label: `` }];
 
   return <ResponsiveTable
     cleanRowSelection={clearRowSelection}
     columnsSortChange={handleSortByColumnChange} paginationInfo={setPageInfo} headingTranslationsKey={'tableHeadings'} rowSelectionInfo={setRowSelectionInfo}
-    getRowActions={getActionsForRecord}
-    fixedColumns={[{ dataIndex: 'action', side: 'right' }]} buttonActionMethod={() => handleSortByColumnChange} buttonActionLabel={getButtonLabel} {...args}>
+    actionsArray={actionsArray}
+    fixedColumns={[{ dataIndex: 'action', side: 'right' }]} buttonActionIcon={getIcon}  {...args}>
   </ResponsiveTable>;
 };
 

package/src/components/ResponsiveTable/index.tsx

@@ -54,6 +54,7 @@ export interface ResponsiveTableCustomProps extends TableProps<any> {
     cleanRowSelection?: boolean;
     getRowActions?: (record: any) => any;
     customSelectAllButton?: string;
+    buttonActionIcon?: (record: any) => any | null;
 }
 
 export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
@@ -85,7 +86,8 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
         buttonActionLabel,
         cleanRowSelection,
         getRowActions,
-        customSelectAllButton
+        customSelectAllButton,
+        buttonActionIcon
     } = props;
 
     const [customFilters, setCustomFilters] = useState<any>([]);
@@ -217,21 +219,48 @@ export const ResponsiveTable = (props: ResponsiveTableCustomProps) => {
                 render: (_: any, record: any) => {
                     const rowActions = getRowActions ? getRowActions(record) : null;
 
-                    if ((!items?.[0] && !rowActions)) return null;  
+                    if ((!items?.[0] && !rowActions)) return null;
 
                     const actions = rowActions ? rowActions : items;
 
                     const buttonLabel = buttonActionLabel ? buttonActionLabel(record) : null;
-                    
-                    const buttonClass = typeof buttonActionStyle === 'function' 
-                    ? buttonActionStyle(record) // Se for uma função, chama com o `record`
-                    : buttonActionStyle || ''; // Se for string, usa diretamente
+
+                    const icon = buttonActionIcon ? buttonActionIcon(record) : null;
+
+                    const buttonClass = typeof buttonActionStyle === 'function'
+                        ? buttonActionStyle(record) // Se for uma função, chama com o `record`
+                        : buttonActionStyle || ''; // Se for string, usa diretamente
+
+                    const renderActionElement = () => {
+                        if (icon) {
+                            return (
+                                <span
+                                    className={buttonClass}
+                                    onClick={() => buttonActionMethod?.()}
+                                >
+                                    {icon}
+                                </span>
+                            );
+                        }
+
+                        // Senão, renderiza botão como antes
+                        if (buttonActionName || buttonLabel) {
+                            return (
+                                <Button
+                                    customClass={buttonClass}
+                                    onClick={() => buttonActionMethod?.()}
+                                >
+                                    {buttonActionName || buttonLabel}
+                                </Button>
+                            );
+                        }
+
+                        return null;
+                    };
 
                     return (
                         <Space size="middle">
-                            {(buttonActionName || buttonLabel) &&
-                                <Button customClass={buttonClass} onClick={() => buttonActionMethod?.()}>{buttonActionName || buttonLabel}</Button>
-                            }
+                            {renderActionElement()}
 
                             <Dropdown menu={{ items: actions }}>
                                 <a>