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

25
components/ui/DocumentMPR.tsx
View File

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