@pdfme/ui 1.1.2 → 1.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.js +2 -2
- package/dist/cjs/src/Designer.js +3 -4
- package/dist/cjs/src/Designer.js.map +1 -1
- package/dist/cjs/src/Form.js +3 -4
- package/dist/cjs/src/Form.js.map +1 -1
- package/dist/cjs/src/Viewer.js +3 -4
- package/dist/cjs/src/Viewer.js.map +1 -1
- package/dist/cjs/src/class.js +5 -6
- package/dist/cjs/src/class.js.map +1 -1
- package/dist/esm/src/Designer.js +3 -4
- package/dist/esm/src/Designer.js.map +1 -1
- package/dist/esm/src/Form.js +3 -4
- package/dist/esm/src/Form.js.map +1 -1
- package/dist/esm/src/Viewer.js +3 -4
- package/dist/esm/src/Viewer.js.map +1 -1
- package/dist/esm/src/class.js +5 -3
- package/dist/esm/src/class.js.map +1 -1
- package/dist/types/src/class.d.ts +2 -0
- package/package.json +3 -3
- package/src/Designer.tsx +3 -5
- package/src/Form.tsx +3 -5
- package/src/Viewer.tsx +3 -5
- package/src/class.ts +11 -6
package/.eslintrc.js
CHANGED
|
@@ -9,7 +9,7 @@ module.exports = {
|
|
|
9
9
|
{
|
|
10
10
|
files: ['*.ts', '*.tsx'], // Your TypeScript files extension
|
|
11
11
|
parserOptions: {
|
|
12
|
-
project: ['./tsconfig.json'], // Specify it only for TypeScript files
|
|
12
|
+
project: ['./tsconfig.esm.json'], // Specify it only for TypeScript files
|
|
13
13
|
},
|
|
14
14
|
},
|
|
15
15
|
],
|
|
@@ -35,7 +35,7 @@ module.exports = {
|
|
|
35
35
|
parser: 'typescript-eslint-parser',
|
|
36
36
|
ecmaVersion: 2018,
|
|
37
37
|
sourceType: 'module',
|
|
38
|
-
project: 'tsconfig.json',
|
|
38
|
+
project: 'tsconfig.esm.json',
|
|
39
39
|
},
|
|
40
40
|
settings: {
|
|
41
41
|
react: {
|
package/dist/cjs/src/Designer.js
CHANGED
|
@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const react_dom_1 = __importDefault(require("react-dom"));
|
|
8
7
|
const common_1 = require("@pdfme/common");
|
|
9
8
|
const class_js_1 = require("./class.js");
|
|
10
9
|
const constants_js_1 = require("./constants.js");
|
|
@@ -41,9 +40,9 @@ class Designer extends class_js_1.BaseUIClass {
|
|
|
41
40
|
this.onChangeTemplateCallback = cb;
|
|
42
41
|
}
|
|
43
42
|
render() {
|
|
44
|
-
if (!this.domContainer)
|
|
43
|
+
if (!this.domContainer || !this.root)
|
|
45
44
|
throw Error(constants_js_1.DESTROYED_ERR_MSG);
|
|
46
|
-
|
|
45
|
+
this.root.render(react_1.default.createElement(contexts_js_1.I18nContext.Provider, { value: this.getI18n() },
|
|
47
46
|
react_1.default.createElement(contexts_js_1.FontContext.Provider, { value: this.getFont() },
|
|
48
47
|
react_1.default.createElement(index_js_1.default, { template: this.template, onSaveTemplate: (template) => {
|
|
49
48
|
this.template = template;
|
|
@@ -55,7 +54,7 @@ class Designer extends class_js_1.BaseUIClass {
|
|
|
55
54
|
if (this.onChangeTemplateCallback) {
|
|
56
55
|
this.onChangeTemplateCallback(template);
|
|
57
56
|
}
|
|
58
|
-
}, size: this.size })))
|
|
57
|
+
}, size: this.size }))));
|
|
59
58
|
}
|
|
60
59
|
}
|
|
61
60
|
exports.default = Designer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Designer.js","sourceRoot":"","sources":["../../../src/Designer.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,
|
|
1
|
+
{"version":3,"file":"Designer.js","sourceRoot":"","sources":["../../../src/Designer.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0CAA2F;AAC3F,yCAAyC;AACzC,iDAAmD;AACnD,+CAAyD;AACzD,8EAA+D;AAC/D,2CAAwC;AAExC,MAAM,QAAS,SAAQ,sBAAW;IAIhC,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAA,2BAAkB,EAAC,KAAK,CAAC,CAAC;QAE1B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,KAAK,CAAC,gCAAiB,CAAC,CAAC;QACvD,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC5C;IACH,CAAC;IAEM,cAAc,CAAC,QAAkB;QACtC,IAAA,sBAAa,EAAC,QAAQ,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,KAAK,CAAC,gCAAiB,CAAC,CAAC;QACvD,IAAI,CAAC,QAAQ,GAAG,IAAA,qBAAS,EAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,wBAAwB,EAAE;YACjC,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;SACzC;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,cAAc,CAAC,EAAgC;QACpD,IAAI,CAAC,sBAAsB,GAAG,EAAE,CAAC;IACnC,CAAC;IAEM,gBAAgB,CAAC,EAAgC;QACtD,IAAI,CAAC,wBAAwB,GAAG,EAAE,CAAC;IACrC,CAAC;IAES,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,MAAM,KAAK,CAAC,gCAAiB,CAAC,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC,MAAM,CACd,8BAAC,yBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;YACzC,8BAAC,yBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;gBACzC,8BAAC,kBAAiB,IAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,CAAC,QAAQ,EAAE,EAAE;wBAC3B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;wBACzB,IAAI,IAAI,CAAC,sBAAsB,EAAE;4BAC/B,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;yBACvC;oBACH,CAAC,EACD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,EAAE;wBAC7B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;wBACzB,IAAI,IAAI,CAAC,wBAAwB,EAAE;4BACjC,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;yBACzC;oBACH,CAAC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACmB,CACF,CACxB,CAAC;IACJ,CAAC;CACF;AAED,kBAAe,QAAQ,CAAC"}
|
package/dist/cjs/src/Form.js
CHANGED
|
@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const react_dom_1 = __importDefault(require("react-dom"));
|
|
8
7
|
const class_js_1 = require("./class.js");
|
|
9
8
|
const constants_js_1 = require("./constants.js");
|
|
10
9
|
const contexts_js_1 = require("./contexts.js");
|
|
@@ -18,9 +17,9 @@ class Form extends class_js_1.PreviewUI {
|
|
|
18
17
|
this.onChangeInputCallback = cb;
|
|
19
18
|
}
|
|
20
19
|
render() {
|
|
21
|
-
if (!this.domContainer)
|
|
20
|
+
if (!this.domContainer || !this.root)
|
|
22
21
|
throw Error(constants_js_1.DESTROYED_ERR_MSG);
|
|
23
|
-
|
|
22
|
+
this.root.render(react_1.default.createElement(contexts_js_1.I18nContext.Provider, { value: this.getI18n() },
|
|
24
23
|
react_1.default.createElement(contexts_js_1.FontContext.Provider, { value: this.getFont() },
|
|
25
24
|
react_1.default.createElement(Preview_js_1.default, { template: this.template, size: this.size, inputs: this.inputs, onChangeInput: (arg) => {
|
|
26
25
|
const { index, value, key } = arg;
|
|
@@ -29,7 +28,7 @@ class Form extends class_js_1.PreviewUI {
|
|
|
29
28
|
}
|
|
30
29
|
this.inputs[index][key] = value;
|
|
31
30
|
this.render();
|
|
32
|
-
} })))
|
|
31
|
+
} }))));
|
|
33
32
|
}
|
|
34
33
|
}
|
|
35
34
|
exports.default = Form;
|
package/dist/cjs/src/Form.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/Form.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/Form.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,yCAAuC;AACvC,iDAAmD;AACnD,+CAAyD;AACzD,yEAA8C;AAE9C,MAAM,IAAK,SAAQ,oBAAS;IAG1B,YAAY,KAAmB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,aAAa,CAAC,EAAgE;QACnF,IAAI,CAAC,qBAAqB,GAAG,EAAE,CAAC;IAClC,CAAC;IAES,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,MAAM,KAAK,CAAC,gCAAiB,CAAC,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC,MAAM,CACd,8BAAC,yBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;YACzC,8BAAC,yBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;gBACzC,8BAAC,oBAAO,IACN,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,aAAa,EAAE,CAAC,GAAkD,EAAE,EAAE;wBACpE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;wBAClC,IAAI,IAAI,CAAC,qBAAqB,EAAE;4BAC9B,IAAI,CAAC,qBAAqB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;yBACnD;wBACD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;wBAChC,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,CAAC,GACD,CACmB,CACF,CACxB,CAAC;IACJ,CAAC;CACF;AAED,kBAAe,IAAI,CAAC"}
|
package/dist/cjs/src/Viewer.js
CHANGED
|
@@ -4,7 +4,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
const react_1 = __importDefault(require("react"));
|
|
7
|
-
const react_dom_1 = __importDefault(require("react-dom"));
|
|
8
7
|
const class_js_1 = require("./class.js");
|
|
9
8
|
const constants_js_1 = require("./constants.js");
|
|
10
9
|
const contexts_js_1 = require("./contexts.js");
|
|
@@ -15,11 +14,11 @@ class Viewer extends class_js_1.PreviewUI {
|
|
|
15
14
|
this.render();
|
|
16
15
|
}
|
|
17
16
|
render() {
|
|
18
|
-
if (!this.domContainer)
|
|
17
|
+
if (!this.domContainer || !this.root)
|
|
19
18
|
throw Error(constants_js_1.DESTROYED_ERR_MSG);
|
|
20
|
-
|
|
19
|
+
this.root.render(react_1.default.createElement(contexts_js_1.I18nContext.Provider, { value: this.getI18n() },
|
|
21
20
|
react_1.default.createElement(contexts_js_1.FontContext.Provider, { value: this.getFont() },
|
|
22
|
-
react_1.default.createElement(Preview_js_1.default, { template: this.template, size: this.size, inputs: this.inputs })))
|
|
21
|
+
react_1.default.createElement(Preview_js_1.default, { template: this.template, size: this.size, inputs: this.inputs }))));
|
|
23
22
|
}
|
|
24
23
|
}
|
|
25
24
|
exports.default = Viewer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Viewer.js","sourceRoot":"","sources":["../../../src/Viewer.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;
|
|
1
|
+
{"version":3,"file":"Viewer.js","sourceRoot":"","sources":["../../../src/Viewer.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAE1B,yCAAuC;AACvC,iDAAmD;AACnD,+CAAyD;AACzD,yEAA8C;AAE9C,MAAM,MAAO,SAAQ,oBAAS;IAC5B,YAAY,KAAmB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAES,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,MAAM,KAAK,CAAC,gCAAiB,CAAC,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC,MAAM,CACd,8BAAC,yBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;YACzC,8BAAC,yBAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;gBACzC,8BAAC,oBAAO,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAI,CACrD,CACF,CACxB,CAAC;IACJ,CAAC;CACF;AAED,kBAAe,MAAM,CAAC"}
|
package/dist/cjs/src/class.js
CHANGED
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
3
|
exports.PreviewUI = exports.BaseUIClass = void 0;
|
|
7
|
-
const
|
|
4
|
+
const client_1 = require("react-dom/client");
|
|
8
5
|
const i18n_js_1 = require("./i18n.js");
|
|
9
6
|
const constants_js_1 = require("./constants.js");
|
|
10
7
|
const helper_js_1 = require("./helper.js");
|
|
@@ -47,6 +44,7 @@ class BaseUIClass {
|
|
|
47
44
|
const { lang, font } = options || {};
|
|
48
45
|
this.domContainer = domContainer;
|
|
49
46
|
this.template = generateColumnsAndSampledataIfNeeded((0, helper_js_1.cloneDeep)(template));
|
|
47
|
+
this.root = (0, client_1.createRoot)(this.domContainer);
|
|
50
48
|
this.size = {
|
|
51
49
|
height: this.domContainer.clientHeight || window.innerHeight,
|
|
52
50
|
width: this.domContainer.clientWidth || window.innerWidth,
|
|
@@ -89,11 +87,12 @@ class BaseUIClass {
|
|
|
89
87
|
this.render();
|
|
90
88
|
}
|
|
91
89
|
destroy() {
|
|
92
|
-
if (!this.domContainer)
|
|
90
|
+
if (!this.domContainer || !this.root)
|
|
93
91
|
throw Error(constants_js_1.DESTROYED_ERR_MSG);
|
|
94
|
-
|
|
92
|
+
this.root.unmount();
|
|
95
93
|
this.resizeObserver.unobserve(this.domContainer);
|
|
96
94
|
this.domContainer = null;
|
|
95
|
+
this.root = null;
|
|
97
96
|
}
|
|
98
97
|
}
|
|
99
98
|
exports.BaseUIClass = BaseUIClass;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../src/class.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../src/class.ts"],"names":[],"mappings":"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"}
|
package/dist/esm/src/Designer.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom';
|
|
3
2
|
import { checkDesignerProps, checkTemplate } from '@pdfme/common';
|
|
4
3
|
import { BaseUIClass } from './class.js';
|
|
5
4
|
import { DESTROYED_ERR_MSG } from './constants.js';
|
|
@@ -36,9 +35,9 @@ class Designer extends BaseUIClass {
|
|
|
36
35
|
this.onChangeTemplateCallback = cb;
|
|
37
36
|
}
|
|
38
37
|
render() {
|
|
39
|
-
if (!this.domContainer)
|
|
38
|
+
if (!this.domContainer || !this.root)
|
|
40
39
|
throw Error(DESTROYED_ERR_MSG);
|
|
41
|
-
|
|
40
|
+
this.root.render(React.createElement(I18nContext.Provider, { value: this.getI18n() },
|
|
42
41
|
React.createElement(FontContext.Provider, { value: this.getFont() },
|
|
43
42
|
React.createElement(DesignerComponent, { template: this.template, onSaveTemplate: (template) => {
|
|
44
43
|
this.template = template;
|
|
@@ -50,7 +49,7 @@ class Designer extends BaseUIClass {
|
|
|
50
49
|
if (this.onChangeTemplateCallback) {
|
|
51
50
|
this.onChangeTemplateCallback(template);
|
|
52
51
|
}
|
|
53
|
-
}, size: this.size })))
|
|
52
|
+
}, size: this.size }))));
|
|
54
53
|
}
|
|
55
54
|
}
|
|
56
55
|
export default Designer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Designer.js","sourceRoot":"","sources":["../../../src/Designer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,
|
|
1
|
+
{"version":3,"file":"Designer.js","sourceRoot":"","sources":["../../../src/Designer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA2B,kBAAkB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAC3F,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,iBAAiB,MAAM,gCAAgC,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,MAAM,QAAS,SAAQ,WAAW;IAIhC,YAAY,KAAoB;QAC9B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,kBAAkB,CAAC,KAAK,CAAC,CAAC;QAE1B,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,YAAY;QACjB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvD,IAAI,IAAI,CAAC,sBAAsB,EAAE;YAC/B,IAAI,CAAC,sBAAsB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;SAC5C;IACH,CAAC;IAEM,cAAc,CAAC,QAAkB;QACtC,aAAa,CAAC,QAAQ,CAAC,CAAC;QACxB,IAAI,CAAC,IAAI,CAAC,YAAY;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACvD,IAAI,CAAC,QAAQ,GAAG,SAAS,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,IAAI,CAAC,wBAAwB,EAAE;YACjC,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;SACzC;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,cAAc,CAAC,EAAgC;QACpD,IAAI,CAAC,sBAAsB,GAAG,EAAE,CAAC;IACnC,CAAC;IAEM,gBAAgB,CAAC,EAAgC;QACtD,IAAI,CAAC,wBAAwB,GAAG,EAAE,CAAC;IACrC,CAAC;IAES,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC,MAAM,CACd,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;YACzC,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;gBACzC,oBAAC,iBAAiB,IAChB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,cAAc,EAAE,CAAC,QAAQ,EAAE,EAAE;wBAC3B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;wBACzB,IAAI,IAAI,CAAC,sBAAsB,EAAE;4BAC/B,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;yBACvC;oBACH,CAAC,EACD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,EAAE;wBAC7B,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;wBACzB,IAAI,IAAI,CAAC,wBAAwB,EAAE;4BACjC,IAAI,CAAC,wBAAwB,CAAC,QAAQ,CAAC,CAAC;yBACzC;oBACH,CAAC,EACD,IAAI,EAAE,IAAI,CAAC,IAAI,GACf,CACmB,CACF,CACxB,CAAC;IACJ,CAAC;CACF;AAED,eAAe,QAAQ,CAAC"}
|
package/dist/esm/src/Form.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom';
|
|
3
2
|
import { PreviewUI } from './class.js';
|
|
4
3
|
import { DESTROYED_ERR_MSG } from './constants.js';
|
|
5
4
|
import { I18nContext, FontContext } from './contexts.js';
|
|
@@ -13,9 +12,9 @@ class Form extends PreviewUI {
|
|
|
13
12
|
this.onChangeInputCallback = cb;
|
|
14
13
|
}
|
|
15
14
|
render() {
|
|
16
|
-
if (!this.domContainer)
|
|
15
|
+
if (!this.domContainer || !this.root)
|
|
17
16
|
throw Error(DESTROYED_ERR_MSG);
|
|
18
|
-
|
|
17
|
+
this.root.render(React.createElement(I18nContext.Provider, { value: this.getI18n() },
|
|
19
18
|
React.createElement(FontContext.Provider, { value: this.getFont() },
|
|
20
19
|
React.createElement(Preview, { template: this.template, size: this.size, inputs: this.inputs, onChangeInput: (arg) => {
|
|
21
20
|
const { index, value, key } = arg;
|
|
@@ -24,7 +23,7 @@ class Form extends PreviewUI {
|
|
|
24
23
|
}
|
|
25
24
|
this.inputs[index][key] = value;
|
|
26
25
|
this.render();
|
|
27
|
-
} })))
|
|
26
|
+
} }))));
|
|
28
27
|
}
|
|
29
28
|
}
|
|
30
29
|
export default Form;
|
package/dist/esm/src/Form.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Form.js","sourceRoot":"","sources":["../../../src/Form.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAE9C,MAAM,IAAK,SAAQ,SAAS;IAG1B,YAAY,KAAmB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAEM,aAAa,CAAC,EAAgE;QACnF,IAAI,CAAC,qBAAqB,GAAG,EAAE,CAAC;IAClC,CAAC;IAES,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC,MAAM,CACd,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;YACzC,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;gBACzC,oBAAC,OAAO,IACN,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,aAAa,EAAE,CAAC,GAAkD,EAAE,EAAE;wBACpE,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,GAAG,CAAC;wBAClC,IAAI,IAAI,CAAC,qBAAqB,EAAE;4BAC9B,IAAI,CAAC,qBAAqB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,EAAE,CAAC,CAAC;yBACnD;wBACD,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC;wBAChC,IAAI,CAAC,MAAM,EAAE,CAAC;oBAChB,CAAC,GACD,CACmB,CACF,CACxB,CAAC;IACJ,CAAC;CACF;AAED,eAAe,IAAI,CAAC"}
|
package/dist/esm/src/Viewer.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom';
|
|
3
2
|
import { PreviewUI } from './class.js';
|
|
4
3
|
import { DESTROYED_ERR_MSG } from './constants.js';
|
|
5
4
|
import { I18nContext, FontContext } from './contexts.js';
|
|
@@ -10,11 +9,11 @@ class Viewer extends PreviewUI {
|
|
|
10
9
|
this.render();
|
|
11
10
|
}
|
|
12
11
|
render() {
|
|
13
|
-
if (!this.domContainer)
|
|
12
|
+
if (!this.domContainer || !this.root)
|
|
14
13
|
throw Error(DESTROYED_ERR_MSG);
|
|
15
|
-
|
|
14
|
+
this.root.render(React.createElement(I18nContext.Provider, { value: this.getI18n() },
|
|
16
15
|
React.createElement(FontContext.Provider, { value: this.getFont() },
|
|
17
|
-
React.createElement(Preview, { template: this.template, size: this.size, inputs: this.inputs })))
|
|
16
|
+
React.createElement(Preview, { template: this.template, size: this.size, inputs: this.inputs }))));
|
|
18
17
|
}
|
|
19
18
|
}
|
|
20
19
|
export default Viewer;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Viewer.js","sourceRoot":"","sources":["../../../src/Viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Viewer.js","sourceRoot":"","sources":["../../../src/Viewer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AACvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,OAAO,MAAM,yBAAyB,CAAC;AAE9C,MAAM,MAAO,SAAQ,SAAS;IAC5B,YAAY,KAAmB;QAC7B,KAAK,CAAC,KAAK,CAAC,CAAC;QACb,IAAI,CAAC,MAAM,EAAE,CAAC;IAChB,CAAC;IAES,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,YAAY,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,MAAM,KAAK,CAAC,iBAAiB,CAAC,CAAC;QACrE,IAAI,CAAC,IAAI,CAAC,MAAM,CACd,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;YACzC,oBAAC,WAAW,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE;gBACzC,oBAAC,OAAO,IAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,GAAI,CACrD,CACF,CACxB,CAAC;IACJ,CAAC;CACF;AAED,eAAe,MAAM,CAAC"}
|
package/dist/esm/src/class.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { createRoot } from 'react-dom/client';
|
|
2
2
|
import { curriedI18n } from './i18n.js';
|
|
3
3
|
import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
|
|
4
4
|
import { debounce, flatten, cloneDeep } from './helper.js';
|
|
@@ -41,6 +41,7 @@ export class BaseUIClass {
|
|
|
41
41
|
const { lang, font } = options || {};
|
|
42
42
|
this.domContainer = domContainer;
|
|
43
43
|
this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
|
|
44
|
+
this.root = createRoot(this.domContainer);
|
|
44
45
|
this.size = {
|
|
45
46
|
height: this.domContainer.clientHeight || window.innerHeight,
|
|
46
47
|
width: this.domContainer.clientWidth || window.innerWidth,
|
|
@@ -83,11 +84,12 @@ export class BaseUIClass {
|
|
|
83
84
|
this.render();
|
|
84
85
|
}
|
|
85
86
|
destroy() {
|
|
86
|
-
if (!this.domContainer)
|
|
87
|
+
if (!this.domContainer || !this.root)
|
|
87
88
|
throw Error(DESTROYED_ERR_MSG);
|
|
88
|
-
|
|
89
|
+
this.root.unmount();
|
|
89
90
|
this.resizeObserver.unobserve(this.domContainer);
|
|
90
91
|
this.domContainer = null;
|
|
92
|
+
this.root = null;
|
|
91
93
|
}
|
|
92
94
|
}
|
|
93
95
|
export class PreviewUI extends BaseUIClass {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../src/class.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"class.js","sourceRoot":"","sources":["../../../src/class.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
+
import { Root } from 'react-dom/client';
|
|
1
2
|
import { Template, Size, UIProps, UIOptions, PreviewProps } from '@pdfme/common';
|
|
2
3
|
export declare abstract class BaseUIClass {
|
|
3
4
|
protected domContainer: HTMLElement | null;
|
|
4
5
|
protected template: Template;
|
|
5
6
|
protected size: Size;
|
|
7
|
+
protected root: Root | null;
|
|
6
8
|
private lang;
|
|
7
9
|
private font;
|
|
8
10
|
private readonly setSize;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pdfme/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
4
4
|
"sideEffects": false,
|
|
5
5
|
"author": "hand-dot",
|
|
6
6
|
"license": "MIT",
|
|
@@ -64,8 +64,8 @@
|
|
|
64
64
|
"@testing-library/react": "^12.1.2",
|
|
65
65
|
"@types/css-font-loading-module": "^0.0.7",
|
|
66
66
|
"@types/pdfjs-dist": "^2.7.4",
|
|
67
|
-
"@types/react": "^
|
|
68
|
-
"@types/react-dom": "^
|
|
67
|
+
"@types/react": "^18.0.26",
|
|
68
|
+
"@types/react-dom": "^18.0.10",
|
|
69
69
|
"eslint-plugin-react": "^7.28.0",
|
|
70
70
|
"eslint-plugin-react-hooks": "^4.3.0",
|
|
71
71
|
"jest-canvas-mock": "^2.3.1",
|
package/src/Designer.tsx
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom';
|
|
3
2
|
import { Template, DesignerProps, checkDesignerProps, checkTemplate } from '@pdfme/common';
|
|
4
3
|
import { BaseUIClass } from './class.js';
|
|
5
4
|
import { DESTROYED_ERR_MSG } from './constants.js';
|
|
@@ -44,8 +43,8 @@ class Designer extends BaseUIClass {
|
|
|
44
43
|
}
|
|
45
44
|
|
|
46
45
|
protected render() {
|
|
47
|
-
if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
|
|
48
|
-
|
|
46
|
+
if (!this.domContainer || !this.root) throw Error(DESTROYED_ERR_MSG);
|
|
47
|
+
this.root.render(
|
|
49
48
|
<I18nContext.Provider value={this.getI18n()}>
|
|
50
49
|
<FontContext.Provider value={this.getFont()}>
|
|
51
50
|
<DesignerComponent
|
|
@@ -65,8 +64,7 @@ class Designer extends BaseUIClass {
|
|
|
65
64
|
size={this.size}
|
|
66
65
|
/>
|
|
67
66
|
</FontContext.Provider>
|
|
68
|
-
</I18nContext.Provider
|
|
69
|
-
this.domContainer
|
|
67
|
+
</I18nContext.Provider>
|
|
70
68
|
);
|
|
71
69
|
}
|
|
72
70
|
}
|
package/src/Form.tsx
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom';
|
|
3
2
|
import { PreviewProps } from '@pdfme/common';
|
|
4
3
|
import { PreviewUI } from './class.js';
|
|
5
4
|
import { DESTROYED_ERR_MSG } from './constants.js';
|
|
@@ -19,8 +18,8 @@ class Form extends PreviewUI {
|
|
|
19
18
|
}
|
|
20
19
|
|
|
21
20
|
protected render() {
|
|
22
|
-
if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
|
|
23
|
-
|
|
21
|
+
if (!this.domContainer || !this.root) throw Error(DESTROYED_ERR_MSG);
|
|
22
|
+
this.root.render(
|
|
24
23
|
<I18nContext.Provider value={this.getI18n()}>
|
|
25
24
|
<FontContext.Provider value={this.getFont()}>
|
|
26
25
|
<Preview
|
|
@@ -37,8 +36,7 @@ class Form extends PreviewUI {
|
|
|
37
36
|
}}
|
|
38
37
|
/>
|
|
39
38
|
</FontContext.Provider>
|
|
40
|
-
</I18nContext.Provider
|
|
41
|
-
this.domContainer
|
|
39
|
+
</I18nContext.Provider>
|
|
42
40
|
);
|
|
43
41
|
}
|
|
44
42
|
}
|
package/src/Viewer.tsx
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import ReactDOM from 'react-dom';
|
|
3
2
|
import { PreviewProps } from '@pdfme/common';
|
|
4
3
|
import { PreviewUI } from './class.js';
|
|
5
4
|
import { DESTROYED_ERR_MSG } from './constants.js';
|
|
@@ -13,14 +12,13 @@ class Viewer extends PreviewUI {
|
|
|
13
12
|
}
|
|
14
13
|
|
|
15
14
|
protected render() {
|
|
16
|
-
if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
|
|
17
|
-
|
|
15
|
+
if (!this.domContainer || !this.root) throw Error(DESTROYED_ERR_MSG);
|
|
16
|
+
this.root.render(
|
|
18
17
|
<I18nContext.Provider value={this.getI18n()}>
|
|
19
18
|
<FontContext.Provider value={this.getFont()}>
|
|
20
19
|
<Preview template={this.template} size={this.size} inputs={this.inputs} />
|
|
21
20
|
</FontContext.Provider>
|
|
22
|
-
</I18nContext.Provider
|
|
23
|
-
this.domContainer
|
|
21
|
+
</I18nContext.Provider>
|
|
24
22
|
);
|
|
25
23
|
}
|
|
26
24
|
}
|
package/src/class.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { createRoot, Root } from 'react-dom/client';
|
|
2
2
|
import { curriedI18n } from './i18n.js';
|
|
3
3
|
import { DESTROYED_ERR_MSG, DEFAULT_LANG } from './constants.js';
|
|
4
4
|
import { debounce, flatten, cloneDeep } from './helper.js';
|
|
@@ -61,6 +61,8 @@ export abstract class BaseUIClass {
|
|
|
61
61
|
|
|
62
62
|
protected size!: Size;
|
|
63
63
|
|
|
64
|
+
protected root: Root | null;
|
|
65
|
+
|
|
64
66
|
private lang: Lang = DEFAULT_LANG;
|
|
65
67
|
|
|
66
68
|
private font: Font = getDefaultFont();
|
|
@@ -83,11 +85,12 @@ export abstract class BaseUIClass {
|
|
|
83
85
|
const { lang, font } = options || {};
|
|
84
86
|
this.domContainer = domContainer;
|
|
85
87
|
this.template = generateColumnsAndSampledataIfNeeded(cloneDeep(template));
|
|
88
|
+
this.root = createRoot(this.domContainer!);
|
|
86
89
|
this.size = {
|
|
87
|
-
height: this.domContainer
|
|
88
|
-
width: this.domContainer
|
|
90
|
+
height: this.domContainer!.clientHeight || window.innerHeight,
|
|
91
|
+
width: this.domContainer!.clientWidth || window.innerWidth,
|
|
89
92
|
};
|
|
90
|
-
this.resizeObserver.observe(this.domContainer);
|
|
93
|
+
this.resizeObserver.observe(this.domContainer!);
|
|
91
94
|
|
|
92
95
|
if (lang) {
|
|
93
96
|
this.lang = lang;
|
|
@@ -133,10 +136,12 @@ export abstract class BaseUIClass {
|
|
|
133
136
|
}
|
|
134
137
|
|
|
135
138
|
public destroy() {
|
|
136
|
-
if (!this.domContainer) throw Error(DESTROYED_ERR_MSG);
|
|
137
|
-
|
|
139
|
+
if (!this.domContainer || !this.root) throw Error(DESTROYED_ERR_MSG);
|
|
140
|
+
this.root.unmount();
|
|
141
|
+
|
|
138
142
|
this.resizeObserver.unobserve(this.domContainer);
|
|
139
143
|
this.domContainer = null;
|
|
144
|
+
this.root = null;
|
|
140
145
|
}
|
|
141
146
|
|
|
142
147
|
protected abstract render(): void;
|