fixed version and build the import

This commit is contained in:
Sambo Chea 2020-10-16 11:30:59 +07:00
parent 1b66b6eb2a
commit 65489ccf4e
3 changed files with 282 additions and 295 deletions

View File

@ -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,

View File

@ -11,3 +11,4 @@ export const ExampleComponent = ({ text }: Props) => {
export * from 'pdfmake/interfaces'
export * from 'pdfmake/build/pdfmake'
export * from './invoice'

View File

@ -1,19 +1,22 @@
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>,
title?: string
logoUrl?: string
headline?: string
columnsHeader: Array<Content>
}
data: {
header: any,
items: any[],
summary: any,
header: any
items: any[]
summary: any
footer?: Array<Content>
}
}
@ -22,18 +25,22 @@ const isInvoiceMasterRow = (i: number) => {
return i % 2 === 0 && i === 0
}
pdfMake.fonts = {
"Khmer": {
Khmer: {
normal: 'kh-battambang.ttf',
bold: 'kh-battambang.ttf',
italics: 'kh-battambang.ttf',
bolditalics: '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'
},
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: {
@ -58,7 +65,6 @@ pdfMake.tableLayouts = {
defaultBorder: false
},
invoiceNestedDetailReport: {
paddingLeft: function () {
return 1
@ -89,7 +95,7 @@ pdfMake.tableLayouts = {
},
vLineWidth: function () {
return 0
},
}
},
summaryInvoice: {
paddingLeft: function () {
@ -105,7 +111,7 @@ pdfMake.tableLayouts = {
return 5
},
hLineColor: function (i) {
return i === 1 ? 'black' : '#e4e4e4';
return i === 1 ? 'black' : '#e4e4e4'
},
vLineWidth: function () {
return 1
@ -120,7 +126,7 @@ const drawLine: (length?: number) => CanvasElement = (length = 292.26) => {
y1: 0,
x2: length,
y2: 0,
lineWidth: 0.2,
lineWidth: 0.2
}
}
@ -153,28 +159,26 @@ export const useDoc = (mockData: DataToPrint) => {
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 + " :",
text: key + ' :',
fontSize: 9,
alignment: "left"
alignment: 'left'
}
const value = {
// @ts-ignore
text: mockData.data?.header[key],
fontSize: 9,
alignment: "right"
alignment: 'right'
}
temp.push([keyLabel, value])
})
setTitle([...temp])
}, [])
useEffect(() => {
const data = mockData.data.items.map((it: any) => {
return {
@ -183,8 +187,8 @@ export const useDoc = (mockData: DataToPrint) => {
return {
text: value,
fontSize: 9,
width: "*",
alignment: columns[index]?.alignment,
width: '*',
alignment: columns[index]?.alignment
}
})
]
@ -193,32 +197,29 @@ export const useDoc = (mockData: DataToPrint) => {
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 + " :",
text: key + ' :',
fontSize: 9,
alignment: "right"
alignment: 'right'
}
const value = {
// @ts-ignore
text: mockData.data?.summary[key],
fontSize: 9,
alignment: "center"
alignment: 'center'
}
temp.push([keyLabel, value])
})
setSummary([...temp])
}, [])
const data: TDocumentDefinitions | any = {
'content': [
mockData.configs.logoUrl &&
{
content: [
mockData.configs.logoUrl && {
alignment: 'center',
image: mockData.configs.logoUrl,
width: 100,
@ -226,55 +227,43 @@ export const useDoc = (mockData: DataToPrint) => {
style: 'header',
fontSize: 23,
bold: true,
margin: [0, 10],
margin: [0, 10]
},
mockData.configs.title &&
{
mockData.configs.title && {
alignment: 'center',
text: mockData.configs.title,
style: 'header',
fontSize: 8,
bold: true,
margin: [0, 10],
margin: [0, 10]
},
mockData.configs.headline &&
{
mockData.configs.headline && {
alignment: 'center',
text: mockData.configs.headline,
fontSize: 18,
bold: true,
bold: true
},
{
layout: "noBorders",
layout: 'noBorders',
fontSize: 9,
table: {
widths: "*",
body: [
...title
]
widths: '*',
body: [...title]
}
},
{
layout: "invoiceMasterReport",
layout: 'invoiceMasterReport',
table: {
widths: '*',
body: [
mockData.configs.columnsHeader
]
body: [mockData.configs.columnsHeader]
}
},
{
layout: "invoiceNestedDetailReport",
layout: 'invoiceNestedDetailReport',
table: {
widths: '*',
body: [
...body,
]
body: [...body]
}
},
{
columns: [
@ -284,14 +273,11 @@ export const useDoc = (mockData: DataToPrint) => {
]
},
{
layout: "summaryInvoice",
layout: 'summaryInvoice',
table: {
widths: ['*', '*'],
body: [
...summary,
]
body: [...summary]
}
},
{
columns: [
@ -300,20 +286,19 @@ export const useDoc = (mockData: DataToPrint) => {
}
]
},
mockData.data.footer?.map(it => {
mockData.data.footer?.map((it) => {
return it
})
],
pageSize: {width: 302.26, height: "auto"},
pageOrientation: "portrait",
pageSize: { width: 302.26, height: 'auto' },
pageOrientation: 'portrait',
pageMargins: [5, 5, 5, 5],
styles: {
header: {
color: "#2ac4e6"
color: '#2ac4e6'
}
}
}
return pdfMake.createPdf(data)
}