mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-25 15:55:48 +00:00
refactor(FE): Refactor PdfTable to use PdfThead/PdfTbody/PdfTfoot
This commit is contained in:
@@ -1,7 +1,9 @@
|
|||||||
'use client';
|
'use client';
|
||||||
|
|
||||||
import { View, StyleSheet } from '@react-pdf/renderer';
|
import { View, StyleSheet } from '@react-pdf/renderer';
|
||||||
import { PdfColumn } from './PdfThead';
|
import { PdfThead, PdfColumn } from './PdfThead';
|
||||||
|
import { PdfTbody, PdfTbodyCell } from './PdfTbody';
|
||||||
|
import { PdfTfoot, PdfTfootCell } from './PdfTfoot';
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
table: {
|
table: {
|
||||||
@@ -13,9 +15,35 @@ const styles = StyleSheet.create({
|
|||||||
|
|
||||||
interface PdfTableProps {
|
interface PdfTableProps {
|
||||||
columns: PdfColumn[];
|
columns: PdfColumn[];
|
||||||
children: React.ReactNode;
|
data: PdfTbodyCell[][];
|
||||||
|
footer?: PdfTfootCell[];
|
||||||
|
footerLabel?: string;
|
||||||
|
initialBalanceRow?: {
|
||||||
|
valueKey: string;
|
||||||
|
value: number;
|
||||||
|
align?: 'right';
|
||||||
|
color?: string;
|
||||||
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
export const PdfTable = ({ columns, children }: PdfTableProps) => {
|
export const PdfTable = ({
|
||||||
return <View style={styles.table}>{children}</View>;
|
columns,
|
||||||
|
data,
|
||||||
|
footer,
|
||||||
|
footerLabel = 'Total',
|
||||||
|
initialBalanceRow,
|
||||||
|
}: PdfTableProps) => {
|
||||||
|
return (
|
||||||
|
<View style={styles.table}>
|
||||||
|
<PdfThead columns={columns} />
|
||||||
|
<PdfTbody
|
||||||
|
columns={columns}
|
||||||
|
rows={data}
|
||||||
|
initialBalanceRow={initialBalanceRow}
|
||||||
|
/>
|
||||||
|
{footer && footer.length > 0 && (
|
||||||
|
<PdfTfoot columns={columns} cells={footer} label={footerLabel} />
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -69,16 +69,6 @@ const styles = StyleSheet.create({
|
|||||||
fontSize: 7,
|
fontSize: 7,
|
||||||
textAlign: 'center',
|
textAlign: 'center',
|
||||||
},
|
},
|
||||||
badge: {
|
|
||||||
paddingVertical: 2,
|
|
||||||
paddingHorizontal: 4,
|
|
||||||
borderRadius: 12,
|
|
||||||
fontSize: 5,
|
|
||||||
fontWeight: 'bold',
|
|
||||||
borderWidth: 1,
|
|
||||||
textAlign: 'center',
|
|
||||||
whiteSpace: 'nowrap',
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
|
||||||
interface PdfTbodyProps {
|
interface PdfTbodyProps {
|
||||||
@@ -218,7 +208,7 @@ export const PdfTbody = ({
|
|||||||
cell?.value !== null &&
|
cell?.value !== null &&
|
||||||
cell?.value !== '' ? (
|
cell?.value !== '' ? (
|
||||||
typeof cell.value === 'object' ? (
|
typeof cell.value === 'object' ? (
|
||||||
cell.value // For custom React element (badge, etc)
|
cell.value
|
||||||
) : (
|
) : (
|
||||||
<Text>{String(cell.value)}</Text>
|
<Text>{String(cell.value)}</Text>
|
||||||
)
|
)
|
||||||
|
|||||||
Reference in New Issue
Block a user