danak/dmail-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

profile + summerize

Browse Source
This commit is contained in:
hamid zarghami
2025-07-24 17:17:55 +03:30
parent d8726db44e
commit cc744ebac9
24 changed files with 1063 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Table.tsx
+94 -7
View File
@@ -25,6 +25,7 @@ const Table = <T extends RowDataType>({
selectedRows: externalSelectedRows,
clearSelection = false,
rowActions,
inlineActions,
pagination,
}: TableProps<T>): React.ReactElement => {
@@ -145,9 +146,30 @@ const Table = <T extends RowDataType>({
checked={isRowSelected(item)}
onCheckedChange={(checked) => handleSingleRowSelect(item, !!checked)}
/>
{/* {inlineActions && (
<div
className="flex-shrink-0 flex items-center gap-2 relative z-[5]"
onClick={(e) => e.stopPropagation()}
>
{inlineActions(item).map((action, actionIndex) => (
<div
key={actionIndex}
className={`cursor-pointer ${action.className || ''}`}
onClick={action.onClick}
title={action.tooltip}
>
{action.icon}
</div>
))}
</div>
)} */}
</div>
)}
{/* Inline Actions - بعد از checkbox */}
<div className="flex-1 min-w-0">
{/* محتوای اصلی - ستون اول */}
<div className={`flex items-center mb-0.5 text-sm ${fontWeight}`}>
@@ -185,7 +207,7 @@ const Table = <T extends RowDataType>({
if (isLoading) {
return (
<Fragment>
<DefaultTableSkeleton tdCount={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} trCount={emptyRowsCount} />
<DefaultTableSkeleton tdCount={columns.length + (selectable ? 1 : 0) + (inlineActions ? 1 : 0) + (rowActions ? 1 : 0)} trCount={emptyRowsCount} />
</Fragment>
);
}
@@ -193,7 +215,7 @@ const Table = <T extends RowDataType>({
if (data.length === 0) {
return (
<tr>
<td colSpan={columns.length + (selectable ? 1 : 0) + (rowActions ? 1 : 0)} className="px-3 md:px-6 pb-6 md:pb-8 text-center text-gray-500">
<td colSpan={columns.length + (selectable ? 1 : 0) + (inlineActions ? 1 : 0) + (rowActions ? 1 : 0)} className="px-3 md:px-6 pb-6 md:pb-8 text-center text-gray-500">
{noDataMessage}
</td>
</tr>
@@ -217,12 +239,32 @@ const Table = <T extends RowDataType>({
className="px-3 md:px-6 py-3 md:py-4 w-8 md:w-10 relative z-[5]"
onClick={(e) => e.stopPropagation()}
>
<Checkbox
checked={isRowSelected(item)}
onCheckedChange={(checked) => handleSingleRowSelect(item, !!checked)}
/>
<div className='flex items-center gap-3'>
<Checkbox
checked={isRowSelected(item)}
onCheckedChange={(checked) => handleSingleRowSelect(item, !!checked)}
/>
{
inlineActions && (
<div className="flex items-center gap-2">
{inlineActions(item).map((action, actionIndex) => (
<div
key={actionIndex}
className={`cursor-pointer ${action.className || ''}`}
onClick={action.onClick}
title={action.tooltip}
>
{action.icon}
</div>
))}
</div>
)
}
</div>
</td>
)}
{columns.map((col) => (
<td
key={`${item.id}-${col.key}`}
@@ -262,6 +304,9 @@ const Table = <T extends RowDataType>({
/>
</th>
)}
{inlineActions && (
<th className="px-3 md:px-6 py-3 md:py-4 text-center text-sm font-medium">عملیات</th>
)}
{columns.map((col) => (
<Td key={col.key} text={col.title} />
))}
@@ -343,7 +388,7 @@ const Table = <T extends RowDataType>({
{actionsPosition === 'header-replace' && (
<thead>
<tr>
<th colSpan={columns.length} className="p-0">
<th colSpan={columns.length + (selectable ? 1 : 0) + (inlineActions ? 1 : 0) + (rowActions ? 1 : 0)} className="p-0">
{renderActions()}
</th>
</tr>
@@ -405,4 +450,46 @@ const MyComponent = () => {
/>
);
};
مثال استفاده با inline actions:
import Table from '@/components/Table';
import { Star1, Archive } from 'iconsax-react';
const MyEmailComponent = () => {
const columns = [
{ title: 'موضوع', key: 'subject' },
{ title: 'فرستنده', key: 'from' },
];
const data = [
{ id: 1, subject: 'سلام', from: 'ali@example.com', flagged: false },
{ id: 2, subject: 'خبرنامه', from: 'newsletter@example.com', flagged: true },
];
const getInlineActions = (item) => [
{
icon: <Star1
variant={item.flagged ? 'Bold' : 'Outline'}
size={18}
color={item.flagged ? '#FFC107' : '#8C90A3'}
/>,
onClick: () => handleFavoriteToggle(item.id),
tooltip: item.flagged ? 'حذف از علاقه‌مندی‌ها' : 'اضافه به علاقه‌مندی‌ها'
},
{
icon: <Archive size={18} color="#8C90A3" />,
onClick: () => handleArchive(item.id),
tooltip: 'بایگانی'
}
];
return (
<Table
columns={columns}
data={data}
inlineActions={getInlineActions}
/>
);
};
*/