midsuit
/
julong-lib
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: add onRender prop to Document components for improved rendering control

This commit is contained in:
faisolavolut 2025-02-20 13:59:20 +07:00
parent d7682b47ba
commit b6e91d742a
2 changed files with 36 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/ui/Document.tsx
View File

@ -1,5 +1,5 @@
"use client"; "use client";
import React, { FC } from "react"; import { FC } from "react";
import { import {
Page, Page,
Text, Text,
@ -10,7 +10,6 @@ import {
Image, Image,
} from "@react-pdf/renderer"; } from "@react-pdf/renderer";
import { Style } from "@react-pdf/types"; import { Style } from "@react-pdf/types";
import { getNumber } from "@/lib/utils/getNumber";
Font.register({ Font.register({
family: "Noto Sans SC", family: "Noto Sans SC",
src: `${process.env.NEXT_PUBLIC_BASE_URL}/NotoSerifSC-Regular.ttf`, src: `${process.env.NEXT_PUBLIC_BASE_URL}/NotoSerifSC-Regular.ttf`,
@ -255,7 +254,6 @@ const convertRawData = (data: any): any[] => {
rows: formatGradeData(overall.grade), rows: formatGradeData(overall.grade),
budgetRange: overall.budget_range, budgetRange: overall.budget_range,
existingDate: overall.existing_date, existingDate: overall.existing_date,
}; };
}; };
@ -285,10 +283,16 @@ const convertRawData = (data: any): any[] => {
return result; return result;
}; };
const MyDocument: FC<any> = ({ data }) => { const MyDocument: FC<any> = ({ data, onRender }) => {
const page = convertRawData(data); const page = convertRawData(data);
return ( return (
<Document> <Document
onRender={(e: any) => {
if (typeof onRender === "function") {
onRender();
}
}}
>
{page.map((page, pageIndex) => { {page.map((page, pageIndex) => {
return ( return (
<Page size="A4" style={styles.page} key={"page_" + pageIndex}> <Page size="A4" style={styles.page} key={"page_" + pageIndex}>
@ -497,9 +501,7 @@ const MyDocument: FC<any> = ({ data }) => {
padding: 5, padding: 5,
}} }}
> >
<Text style={styles.thead}> <Text style={styles.thead}>{page?.budgetRange}</Text>
{page?.budgetRange}
</Text>
</View> </View>
<View <View
@ -603,10 +605,12 @@ const MyDocument: FC<any> = ({ data }) => {
col3={row.col3} col3={row.col3}
col4={row.col4} col4={row.col4}
col5={row.col5} col5={row.col5}
footer={row?.col1 === "Sub - Total =" || row?.col1 === "Total =" ? true : false} footer={
hideBorder={ row?.col1 === "Sub - Total =" || row?.col1 === "Total ="
row?.col1 === "Total =" ? true : false ? true
: false
} }
hideBorder={row?.col1 === "Total =" ? true : false}
/> />
))} ))}
</View> </View>

25
components/ui/DocumentMPR.tsx
View File

@ -1,5 +1,5 @@
"use client"; "use client";
import React, { FC } from "react"; import { FC } from "react";
import { import {
Page, Page,
Text, Text,
@ -9,7 +9,6 @@ import {
Font, Font,
Image, Image,
} from "@react-pdf/renderer"; } from "@react-pdf/renderer";
import { Style } from "@react-pdf/types";
import get from "lodash.get"; import get from "lodash.get";
import { dayDate } from "@/lib/utils/date"; import { dayDate } from "@/lib/utils/date";
import { getNumber } from "@/lib/utils/getNumber"; import { getNumber } from "@/lib/utils/getNumber";
@ -85,8 +84,8 @@ const styles = StyleSheet.create({
}, },
}); });
const extractMajors = (data: Array<{ Major: { Major: string } }>): string => { const extractMajors = (data: Array<{ Major: { Major: string } }>): string => {
if(!data?.length) return "" if (!data?.length) return "";
return data.map(entry => get(entry, "Major.Major")).join(", "); return data.map((entry) => get(entry, "Major.Major")).join(", ");
}; };
const splitText = ( const splitText = (
input: string input: string
@ -110,9 +109,15 @@ const handleInput = (input: string, mode: "cn" | "id" = "id"): string => {
return ""; // Return empty string if the condition doesn't match the mode return ""; // Return empty string if the condition doesn't match the mode
}; };
// Create Document Component // Create Document Component
const DocumentMPR: FC<any> = ({ data }) => { const DocumentMPR: FC<any> = ({ data, onRender }) => {
return ( return (
<Document> <Document
onRender={(e: any) => {
if (typeof onRender === "function") {
onRender();
}
}}
>
<Page size="A4" style={styles.page}> <Page size="A4" style={styles.page}>
<View <View
style={{ style={{
@ -825,9 +830,7 @@ const DocumentMPR: FC<any> = ({ data }) => {
</Text> </Text>
</Text> </Text>
</View> </View>
<Text> <Text>: {get(data, "minimum_education")}</Text>
: {get(data, "minimum_education")}
</Text>
</View> </View>
{/* Jurusan */} {/* Jurusan */}
<View <View
@ -1156,7 +1159,9 @@ const DocumentMPR: FC<any> = ({ data }) => {
</Text> </Text>
</Text> </Text>
</View> </View>
<Text>: {get(data, "salary_min")} - {get(data, "salary_max")} </Text> <Text>
: {get(data, "salary_min")} - {get(data, "salary_max")}{" "}
</Text>
</View> </View>
{/* FOOTER */} {/* FOOTER */}