{visibleRowActions.map((action, index) => (
- // eslint-disable-next-line react/no-array-index-key
-
+
handleAction(row, action)}
radius={4}
type="button"
>
- {action.icon}
+ {getActionIcon(action, row)}
))}
@@ -224,10 +221,10 @@ export function Table>(
// eslint-disable-next-line react/no-array-index-key
key={index}
color={action.color}
- icon={action.icon}
+ icon={getActionIcon(action, row)}
onClick={() => handleAction(row, action)}
>
- {action.label}
+ {getActionLabel(action, row)}
))}
@@ -251,11 +248,11 @@ export function Table>(
// eslint-disable-next-line react/no-array-index-key
key={index}
color={action.color}
- leftIcon={action.icon}
+ leftIcon={getActionIcon(action, rows)}
onClick={() => handleAction(rows, action)}
variant="default"
>
- {action.label}
+ {getActionLabel(action, rows)}
))}
@@ -340,7 +337,10 @@ export function Table>(
onClose={handleClose}
onConfirm={handleConfirm}
opened={Boolean(confirmAction)}
- title={confirmAction?.confirmModalProps?.title ?? confirmAction?.label}
+ title={
+ confirmAction?.confirmModalProps?.title ??
+ getActionLabel(confirmAction)
+ }
/>
);
diff --git a/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap b/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap
index 6c0b6a32..3cfd1586 100644
--- a/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap
+++ b/packages/react-front-kit-table/src/Components/Table/__snapshots__/Table.test.tsx.snap
@@ -284,6 +284,7 @@ exports[`Table matches snapshot 1`] = `
>
>(
+ action: ITableAction,
+): action is ITableConfirmAction {
+ return 'item' in action;
+}
+
+export function getActionLabel>(
+ action?: ITableAction | null,
+ rows?: MRT_Row | MRT_Row[],
+): string {
+ if (!action) {
+ return '';
+ }
+ if (isConfirmAction(action)) {
+ return typeof action.label === 'function'
+ ? action.label(action.item)
+ : action.label;
+ }
+ if (typeof action.label === 'function') {
+ return rows ? action.label(rows) : '';
+ }
+ return action.label;
+}
+
+export function getActionIcon>(
+ action?: ITableAction | null,
+ rows?: MRT_Row | MRT_Row[],
+): ReactNode {
+ if (!action) {
+ return '';
+ }
+ if (isConfirmAction(action)) {
+ return typeof action.icon === 'function'
+ ? action.icon(action.item)
+ : action.icon;
+ }
+ if (typeof action.icon === 'function') {
+ return rows ? action.icon(rows) : '';
+ }
+ return action.icon;
+}
diff --git a/packages/react-front-kit-table/src/index.tsx b/packages/react-front-kit-table/src/index.tsx
index 2c8bdb6b..2f898cd4 100644
--- a/packages/react-front-kit-table/src/index.tsx
+++ b/packages/react-front-kit-table/src/index.tsx
@@ -1,3 +1,5 @@
/* eslint-disable react-refresh/only-export-components */
export * from './Components/Table/Table';
export * from './Components/TableGridView/TableGridView';
+export * from './helpers';
+export * from './types';
diff --git a/packages/react-front-kit-table/src/types/index.ts b/packages/react-front-kit-table/src/types/index.ts
new file mode 100644
index 00000000..01643f0f
--- /dev/null
+++ b/packages/react-front-kit-table/src/types/index.ts
@@ -0,0 +1 @@
+export * from './table';
diff --git a/packages/react-front-kit-table/src/types/table.ts b/packages/react-front-kit-table/src/types/table.ts
new file mode 100644
index 00000000..ebf7bd11
--- /dev/null
+++ b/packages/react-front-kit-table/src/types/table.ts
@@ -0,0 +1,9 @@
+import type { IAction, IConfirmAction } from '@smile/react-front-kit-shared';
+import type { MRT_Row } from 'mantine-react-table';
+
+export type ITableAction> = IAction<
+ MRT_Row | MRT_Row[]
+>;
+
+export type ITableConfirmAction> =
+ IConfirmAction | MRT_Row[]>;
diff --git a/packages/react-front-kit/package.json b/packages/react-front-kit/package.json
index bf26e9e8..1acf356a 100644
--- a/packages/react-front-kit/package.json
+++ b/packages/react-front-kit/package.json
@@ -80,7 +80,7 @@
"jest-environment-jsdom": "^29.7.0",
"test": "*",
"tsconfig": "*",
- "typescript": "^5.2.2"
+ "typescript": "~5.2.0"
},
"peerDependencies": {
"@emotion/react": ">=11",
diff --git a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx
index 5b3e18b1..9f6d5e3d 100644
--- a/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx
+++ b/packages/react-front-kit/src/Components/Thumbnail/Thumbnail.tsx
@@ -141,10 +141,16 @@ export function Thumbnail(props: IThumbnailProps): ReactElement {
// eslint-disable-next-line react/no-array-index-key
key={index}
color={action.color}
- icon={action.icon}
+ icon={
+ typeof action.icon === 'function'
+ ? action.icon(props)
+ : action.icon
+ }
onClick={() => handleMenuItem(action)}
>
- {action.label}
+ {typeof action.label === 'function'
+ ? action.label(props)
+ : action.label}
))}
diff --git a/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.tsx b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.tsx
index e2c86b46..455115a7 100644
--- a/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.tsx
+++ b/packages/react-front-kit/src/Components/ThumbnailGrid/ThumbnailGrid.tsx
@@ -114,11 +114,17 @@ export function ThumbnailGrid(props: IThumbnailGridProps): ReactElement {
))}
diff --git a/packages/test/package.json b/packages/test/package.json
index e9f3f17d..de97bc35 100644
--- a/packages/test/package.json
+++ b/packages/test/package.json
@@ -19,6 +19,6 @@
"@testing-library/jest-dom": "^6.1.3",
"jest": "^29.7.0",
"resize-observer-polyfill": "^1.5.1",
- "typescript": "^5.2.2"
+ "typescript": "~5.2.0"
}
}