fixed version and build the import
This commit is contained in:
parent
1b66b6eb2a
commit
65489ccf4e
@ -1,11 +1,12 @@
|
||||
{
|
||||
"name": "@cubetiq/invoice-print",
|
||||
"version": "1.0.1",
|
||||
"version": "1.0.2",
|
||||
"description": "Invoice Print80m",
|
||||
"author": "Chantha Suon",
|
||||
"license": "MIT",
|
||||
"repository": "https://git.cubetiqs.com/chanthasuon/lib-invoice-print.git",
|
||||
"main": "dist/index.js",
|
||||
"types": "dist/index.d.ts",
|
||||
"module": "dist/index.modern.js",
|
||||
"source": "src/index.tsx",
|
||||
"private": false,
|
||||
|
||||
@ -11,3 +11,4 @@ export const ExampleComponent = ({ text }: Props) => {
|
||||
|
||||
export * from 'pdfmake/interfaces'
|
||||
export * from 'pdfmake/build/pdfmake'
|
||||
export * from './invoice'
|
||||
|
||||
573
src/invoice.ts
573
src/invoice.ts
@ -1,319 +1,304 @@
|
||||
import {CanvasElement, Content, TDocumentDefinitions} from "pdfmake/interfaces";
|
||||
import {useEffect, useState} from "react";
|
||||
import pdfMake from "pdfmake/build/pdfmake";
|
||||
|
||||
import {
|
||||
CanvasElement,
|
||||
Content,
|
||||
TDocumentDefinitions
|
||||
} from 'pdfmake/interfaces'
|
||||
import { useEffect, useState } from 'react'
|
||||
import pdfMake from 'pdfmake/build/pdfmake'
|
||||
|
||||
export interface DataToPrint {
|
||||
configs: {
|
||||
title?: string,
|
||||
logoUrl?: string,
|
||||
headline?: string,
|
||||
columnsHeader: Array<Content>,
|
||||
}
|
||||
data: {
|
||||
header: any,
|
||||
items: any[],
|
||||
summary: any,
|
||||
footer?: Array<Content>
|
||||
}
|
||||
configs: {
|
||||
title?: string
|
||||
logoUrl?: string
|
||||
headline?: string
|
||||
columnsHeader: Array<Content>
|
||||
}
|
||||
data: {
|
||||
header: any
|
||||
items: any[]
|
||||
summary: any
|
||||
footer?: Array<Content>
|
||||
}
|
||||
}
|
||||
|
||||
const isInvoiceMasterRow = (i: number) => {
|
||||
return i % 2 === 0 && i === 0
|
||||
return i % 2 === 0 && i === 0
|
||||
}
|
||||
pdfMake.fonts = {
|
||||
"Khmer": {
|
||||
normal: 'kh-battambang.ttf',
|
||||
bold: 'kh-battambang.ttf',
|
||||
italics: 'kh-battambang.ttf',
|
||||
bolditalics: 'kh-battambang.ttf',
|
||||
},
|
||||
Roboto: {
|
||||
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
|
||||
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
|
||||
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
|
||||
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
|
||||
},
|
||||
Khmer: {
|
||||
normal: 'kh-battambang.ttf',
|
||||
bold: 'kh-battambang.ttf',
|
||||
italics: 'kh-battambang.ttf',
|
||||
bolditalics: 'kh-battambang.ttf'
|
||||
},
|
||||
Roboto: {
|
||||
normal:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
|
||||
bold:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
|
||||
italics:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
|
||||
bolditalics:
|
||||
'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
|
||||
}
|
||||
}
|
||||
pdfMake.tableLayouts = {
|
||||
invoiceMasterReport: {
|
||||
paddingTop: function (i: number) {
|
||||
return isInvoiceMasterRow(i) ? 1 : 0
|
||||
},
|
||||
paddingBottom: function (i: number) {
|
||||
return isInvoiceMasterRow(i) ? 5 : 0
|
||||
},
|
||||
paddingLeft: function () {
|
||||
return 2
|
||||
},
|
||||
paddingRight: function () {
|
||||
return 2
|
||||
},
|
||||
fillColor: function (i: number) {
|
||||
return i === 1 ? 'black' : '#e4e4e4'
|
||||
},
|
||||
vLineWidth: function () {
|
||||
return 1
|
||||
},
|
||||
defaultBorder: false
|
||||
invoiceMasterReport: {
|
||||
paddingTop: function (i: number) {
|
||||
return isInvoiceMasterRow(i) ? 1 : 0
|
||||
},
|
||||
paddingBottom: function (i: number) {
|
||||
return isInvoiceMasterRow(i) ? 5 : 0
|
||||
},
|
||||
paddingLeft: function () {
|
||||
return 2
|
||||
},
|
||||
paddingRight: function () {
|
||||
return 2
|
||||
},
|
||||
fillColor: function (i: number) {
|
||||
return i === 1 ? 'black' : '#e4e4e4'
|
||||
},
|
||||
vLineWidth: function () {
|
||||
return 1
|
||||
},
|
||||
defaultBorder: false
|
||||
},
|
||||
|
||||
|
||||
invoiceNestedDetailReport: {
|
||||
paddingLeft: function () {
|
||||
return 1
|
||||
},
|
||||
paddingRight: function () {
|
||||
return 0
|
||||
},
|
||||
paddingBottom: function () {
|
||||
return 5
|
||||
},
|
||||
defaultBorder: false
|
||||
invoiceNestedDetailReport: {
|
||||
paddingLeft: function () {
|
||||
return 1
|
||||
},
|
||||
invoiceLayout: {
|
||||
paddingLeft: function () {
|
||||
return 0
|
||||
},
|
||||
paddingRight: function () {
|
||||
return 0
|
||||
},
|
||||
paddingTop: function () {
|
||||
return 0.5
|
||||
},
|
||||
paddingBottom: function () {
|
||||
return 0.5
|
||||
},
|
||||
hLineWidth: function (i: number, node: any) {
|
||||
return i === 1 || i === node.table.body.length ? 0.2 : 0
|
||||
},
|
||||
vLineWidth: function () {
|
||||
return 0
|
||||
},
|
||||
paddingRight: function () {
|
||||
return 0
|
||||
},
|
||||
summaryInvoice: {
|
||||
paddingLeft: function () {
|
||||
return 0
|
||||
},
|
||||
paddingRight: function () {
|
||||
return 0
|
||||
},
|
||||
paddingTop: function () {
|
||||
return 5
|
||||
},
|
||||
paddingBottom: function () {
|
||||
return 5
|
||||
},
|
||||
hLineColor: function (i) {
|
||||
return i === 1 ? 'black' : '#e4e4e4';
|
||||
},
|
||||
vLineWidth: function () {
|
||||
return 1
|
||||
},
|
||||
defaultBorder: false
|
||||
paddingBottom: function () {
|
||||
return 5
|
||||
},
|
||||
defaultBorder: false
|
||||
},
|
||||
invoiceLayout: {
|
||||
paddingLeft: function () {
|
||||
return 0
|
||||
},
|
||||
paddingRight: function () {
|
||||
return 0
|
||||
},
|
||||
paddingTop: function () {
|
||||
return 0.5
|
||||
},
|
||||
paddingBottom: function () {
|
||||
return 0.5
|
||||
},
|
||||
hLineWidth: function (i: number, node: any) {
|
||||
return i === 1 || i === node.table.body.length ? 0.2 : 0
|
||||
},
|
||||
vLineWidth: function () {
|
||||
return 0
|
||||
}
|
||||
},
|
||||
summaryInvoice: {
|
||||
paddingLeft: function () {
|
||||
return 0
|
||||
},
|
||||
paddingRight: function () {
|
||||
return 0
|
||||
},
|
||||
paddingTop: function () {
|
||||
return 5
|
||||
},
|
||||
paddingBottom: function () {
|
||||
return 5
|
||||
},
|
||||
hLineColor: function (i) {
|
||||
return i === 1 ? 'black' : '#e4e4e4'
|
||||
},
|
||||
vLineWidth: function () {
|
||||
return 1
|
||||
},
|
||||
defaultBorder: false
|
||||
}
|
||||
}
|
||||
const drawLine: (length?: number) => CanvasElement = (length = 292.26) => {
|
||||
return {
|
||||
type: 'line',
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: length,
|
||||
y2: 0,
|
||||
lineWidth: 0.2,
|
||||
}
|
||||
return {
|
||||
type: 'line',
|
||||
x1: 0,
|
||||
y1: 0,
|
||||
x2: length,
|
||||
y2: 0,
|
||||
lineWidth: 0.2
|
||||
}
|
||||
}
|
||||
|
||||
export const useDoc = (mockData: DataToPrint) => {
|
||||
const [columns, setColumns] = useState<Array<any>>([])
|
||||
const [body, setBody] = useState<Array<any>>([])
|
||||
const [title, setTitle] = useState<Array<any>>([])
|
||||
const [summary, setSummary] = useState<Array<any>>([])
|
||||
const [columns, setColumns] = useState<Array<any>>([])
|
||||
const [body, setBody] = useState<Array<any>>([])
|
||||
const [title, setTitle] = useState<Array<any>>([])
|
||||
const [summary, setSummary] = useState<Array<any>>([])
|
||||
|
||||
useEffect(() => {
|
||||
setColumns(mockData.configs.columnsHeader)
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
setColumns(mockData.configs.columnsHeader)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let temp: Array<any> = []
|
||||
// eslint-disable-next-line array-callback-return
|
||||
mockData.data.items.map((it: any) => {
|
||||
let current: Array<any> = []
|
||||
// eslint-disable-next-line array-callback-return
|
||||
Object.values(it).map(function (key, index) {
|
||||
const data = {
|
||||
text: key,
|
||||
fontSize: 9,
|
||||
alignment: columns[index]?.alignment
|
||||
}
|
||||
current.push(data)
|
||||
})
|
||||
temp.push(current)
|
||||
})
|
||||
setBody([...temp])
|
||||
}, [columns])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
let temp: Array<any> = []
|
||||
// eslint-disable-next-line array-callback-return
|
||||
Object.keys(mockData.data.header).map(function (key) {
|
||||
const keyLabel = {
|
||||
text: key + " :",
|
||||
fontSize: 9,
|
||||
alignment: "left"
|
||||
}
|
||||
const value = {
|
||||
// @ts-ignore
|
||||
text: mockData.data?.header[key],
|
||||
fontSize: 9,
|
||||
alignment: "right"
|
||||
}
|
||||
temp.push([keyLabel, value])
|
||||
})
|
||||
setTitle([...temp])
|
||||
}, [])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
const data = mockData.data.items.map((it: any) => {
|
||||
return {
|
||||
columns: [
|
||||
Object.values(it).map(function (value, index) {
|
||||
return {
|
||||
text: value,
|
||||
fontSize: 9,
|
||||
width: "*",
|
||||
alignment: columns[index]?.alignment,
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
})
|
||||
setBody([...data])
|
||||
}, [])
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
let temp: Array<any> = []
|
||||
// eslint-disable-next-line array-callback-return
|
||||
Object.keys(mockData.data.summary).map(function (key) {
|
||||
const keyLabel = {
|
||||
text: key + " :",
|
||||
fontSize: 9,
|
||||
alignment: "right"
|
||||
}
|
||||
const value = {
|
||||
// @ts-ignore
|
||||
text: mockData.data?.summary[key],
|
||||
fontSize: 9,
|
||||
alignment: "center"
|
||||
}
|
||||
temp.push([keyLabel, value])
|
||||
})
|
||||
setSummary([...temp])
|
||||
}, [])
|
||||
|
||||
|
||||
const data: TDocumentDefinitions | any = {
|
||||
'content': [
|
||||
mockData.configs.logoUrl &&
|
||||
{
|
||||
alignment: 'center',
|
||||
image: mockData.configs.logoUrl,
|
||||
width: 100,
|
||||
height: 75,
|
||||
style: 'header',
|
||||
fontSize: 23,
|
||||
bold: true,
|
||||
margin: [0, 10],
|
||||
},
|
||||
mockData.configs.title &&
|
||||
{
|
||||
alignment: 'center',
|
||||
text: mockData.configs.title,
|
||||
style: 'header',
|
||||
fontSize: 8,
|
||||
bold: true,
|
||||
margin: [0, 10],
|
||||
},
|
||||
mockData.configs.headline &&
|
||||
{
|
||||
alignment: 'center',
|
||||
text: mockData.configs.headline,
|
||||
fontSize: 18,
|
||||
bold: true,
|
||||
|
||||
},
|
||||
{
|
||||
layout: "noBorders",
|
||||
fontSize: 9,
|
||||
table: {
|
||||
widths: "*",
|
||||
body: [
|
||||
...title
|
||||
]
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
layout: "invoiceMasterReport",
|
||||
table: {
|
||||
widths: '*',
|
||||
body: [
|
||||
mockData.configs.columnsHeader
|
||||
]
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
layout: "invoiceNestedDetailReport",
|
||||
table: {
|
||||
widths: '*',
|
||||
body: [
|
||||
...body,
|
||||
]
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
columns: [
|
||||
{
|
||||
canvas: [drawLine()]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
layout: "summaryInvoice",
|
||||
table: {
|
||||
widths: ['*', '*'],
|
||||
body: [
|
||||
...summary,
|
||||
]
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
columns: [
|
||||
{
|
||||
canvas: [drawLine()]
|
||||
}
|
||||
]
|
||||
},
|
||||
mockData.data.footer?.map(it => {
|
||||
return it
|
||||
})
|
||||
],
|
||||
pageSize: {width: 302.26, height: "auto"},
|
||||
pageOrientation: "portrait",
|
||||
pageMargins: [5, 5, 5, 5],
|
||||
styles: {
|
||||
header: {
|
||||
color: "#2ac4e6"
|
||||
}
|
||||
useEffect(() => {
|
||||
let temp: Array<any> = []
|
||||
// eslint-disable-next-line array-callback-return
|
||||
mockData.data.items.map((it: any) => {
|
||||
let current: Array<any> = []
|
||||
// eslint-disable-next-line array-callback-return
|
||||
Object.values(it).map(function (key, index) {
|
||||
const data = {
|
||||
text: key,
|
||||
fontSize: 9,
|
||||
alignment: columns[index]?.alignment
|
||||
}
|
||||
current.push(data)
|
||||
})
|
||||
temp.push(current)
|
||||
})
|
||||
setBody([...temp])
|
||||
}, [columns])
|
||||
|
||||
useEffect(() => {
|
||||
let temp: Array<any> = []
|
||||
// eslint-disable-next-line array-callback-return
|
||||
Object.keys(mockData.data.header).map(function (key) {
|
||||
const keyLabel = {
|
||||
text: key + ' :',
|
||||
fontSize: 9,
|
||||
alignment: 'left'
|
||||
}
|
||||
const value = {
|
||||
// @ts-ignore
|
||||
text: mockData.data?.header[key],
|
||||
fontSize: 9,
|
||||
alignment: 'right'
|
||||
}
|
||||
temp.push([keyLabel, value])
|
||||
})
|
||||
setTitle([...temp])
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const data = mockData.data.items.map((it: any) => {
|
||||
return {
|
||||
columns: [
|
||||
Object.values(it).map(function (value, index) {
|
||||
return {
|
||||
text: value,
|
||||
fontSize: 9,
|
||||
width: '*',
|
||||
alignment: columns[index]?.alignment
|
||||
}
|
||||
})
|
||||
]
|
||||
}
|
||||
})
|
||||
setBody([...data])
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
let temp: Array<any> = []
|
||||
// eslint-disable-next-line array-callback-return
|
||||
Object.keys(mockData.data.summary).map(function (key) {
|
||||
const keyLabel = {
|
||||
text: key + ' :',
|
||||
fontSize: 9,
|
||||
alignment: 'right'
|
||||
}
|
||||
const value = {
|
||||
// @ts-ignore
|
||||
text: mockData.data?.summary[key],
|
||||
fontSize: 9,
|
||||
alignment: 'center'
|
||||
}
|
||||
temp.push([keyLabel, value])
|
||||
})
|
||||
setSummary([...temp])
|
||||
}, [])
|
||||
|
||||
const data: TDocumentDefinitions | any = {
|
||||
content: [
|
||||
mockData.configs.logoUrl && {
|
||||
alignment: 'center',
|
||||
image: mockData.configs.logoUrl,
|
||||
width: 100,
|
||||
height: 75,
|
||||
style: 'header',
|
||||
fontSize: 23,
|
||||
bold: true,
|
||||
margin: [0, 10]
|
||||
},
|
||||
mockData.configs.title && {
|
||||
alignment: 'center',
|
||||
text: mockData.configs.title,
|
||||
style: 'header',
|
||||
fontSize: 8,
|
||||
bold: true,
|
||||
margin: [0, 10]
|
||||
},
|
||||
mockData.configs.headline && {
|
||||
alignment: 'center',
|
||||
text: mockData.configs.headline,
|
||||
fontSize: 18,
|
||||
bold: true
|
||||
},
|
||||
{
|
||||
layout: 'noBorders',
|
||||
fontSize: 9,
|
||||
table: {
|
||||
widths: '*',
|
||||
body: [...title]
|
||||
}
|
||||
},
|
||||
{
|
||||
layout: 'invoiceMasterReport',
|
||||
table: {
|
||||
widths: '*',
|
||||
body: [mockData.configs.columnsHeader]
|
||||
}
|
||||
},
|
||||
{
|
||||
layout: 'invoiceNestedDetailReport',
|
||||
table: {
|
||||
widths: '*',
|
||||
body: [...body]
|
||||
}
|
||||
},
|
||||
{
|
||||
columns: [
|
||||
{
|
||||
canvas: [drawLine()]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
layout: 'summaryInvoice',
|
||||
table: {
|
||||
widths: ['*', '*'],
|
||||
body: [...summary]
|
||||
}
|
||||
},
|
||||
{
|
||||
columns: [
|
||||
{
|
||||
canvas: [drawLine()]
|
||||
}
|
||||
]
|
||||
},
|
||||
mockData.data.footer?.map((it) => {
|
||||
return it
|
||||
})
|
||||
],
|
||||
pageSize: { width: 302.26, height: 'auto' },
|
||||
pageOrientation: 'portrait',
|
||||
pageMargins: [5, 5, 5, 5],
|
||||
styles: {
|
||||
header: {
|
||||
color: '#2ac4e6'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return pdfMake.createPdf(data)
|
||||
return pdfMake.createPdf(data)
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user