Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | 2x 2x | import { ActionMenuWrapper } from '@/components/action-menu';
import { StatusBadge } from './status-badge';
import { TransactionTypeIcon } from './transaction-type-icon';
import { hasArrayChanged, isEqual } from '../utils/memo-utils';
import { memo } from 'react';
import type { Transaction } from './transaction-table';
interface TransactionRowProps {
transaction: Transaction;
actionItems: Array<any>;
}
// Create a separate memoized row component
const TransactionRowComponent = ({
transaction,
actionItems,
}: TransactionRowProps) => {
console.log(`🔄 Rendering row for transaction ${transaction.id}`);
return (
<div className="grid grid-cols-8 gap-4 py-1 pl-4 h-[60px] hover:bg-gray-50 rounded-full border border-gray-100 items-center">
<div className="text-default">{transaction.date}</div>
<div className="text-default">{transaction.transactionId}</div>
<div>
<TransactionTypeIcon type={transaction.type} />
</div>
<div className="text-default font-medium">{transaction.name}</div>
<div className="text-default">{transaction.value}</div>
<div className="text-default">{transaction.return}</div>
<div>
<StatusBadge status={transaction.status} />
</div>
<ActionMenuWrapper items={actionItems} />
</div>
);
};
// Use memo with custom comparison function using react-fast-compare
export const TransactionRow = memo(
TransactionRowComponent,
(prevProps, nextProps) => {
const transactionsEqual = isEqual(
prevProps.transaction,
nextProps.transaction
);
const actionItemsEqual = hasArrayChanged(
prevProps.actionItems,
nextProps.actionItems
);
return transactionsEqual && actionItemsEqual;
}
);
|