@pdfme/ui 1.0.18 → 1.1.0

package/dist/cjs/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.js

@@ -0,0 +1,108 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_dom_1 = require("react-dom");
+const core_1 = require("@dnd-kit/core");
+const sortable_1 = require("@dnd-kit/sortable");
+const Item_js_1 = __importDefault(require("./Item.js"));
+const SelectableSortableItem_js_1 = __importDefault(require("./SelectableSortableItem.js"));
+const SelectableSortableContainer = (props) => {
+    const { schemas, onEdit, onSortEnd, height, hoveringSchemaId, onChangeHoveringSchemaId } = props;
+    const [selectedSchemas, setSelectedSchemas] = (0, react_1.useState)([]);
+    const [dragOverlaydItems, setClonedItems] = (0, react_1.useState)(null);
+    const [activeId, setActiveId] = (0, react_1.useState)(null);
+    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.PointerSensor, { activationConstraint: { distance: 15 } }), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
+    const isItemSelected = (itemId) => selectedSchemas.map((i) => i.id).includes(itemId);
+    const onSelectionChanged = (id, isShiftSelect) => {
+        if (isShiftSelect) {
+            if (isItemSelected(id)) {
+                const newSelectedSchemas = selectedSchemas.filter((item) => item.id !== id);
+                setSelectedSchemas(newSelectedSchemas);
+            }
+            else {
+                const newSelectedItem = schemas.find((schema) => schema.id === id);
+                const newSelectedSchemas = selectedSchemas.concat(newSelectedItem);
+                setSelectedSchemas(newSelectedSchemas);
+            }
+        }
+        else {
+            setSelectedSchemas([]);
+        }
+    };
+    return (react_1.default.createElement(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCorners, onDragStart: ({ active }) => {
+            setActiveId(active.id);
+            setClonedItems(schemas);
+            if (!isItemSelected(active.id)) {
+                const newSelectedSchemas = [];
+                setSelectedSchemas(newSelectedSchemas);
+            }
+            else if (selectedSchemas.length > 0) {
+                onSortEnd(selectedSchemas.reduce((ret, selectedItem) => {
+                    if (selectedItem.id === active.id) {
+                        return ret;
+                    }
+                    return ret.filter((schema) => schema !== selectedItem);
+                }, schemas));
+            }
+        }, onDragEnd: ({ active, over }) => {
+            const overId = (over === null || over === void 0 ? void 0 : over.id) || '';
+            const activeIndex = schemas.map((i) => i.id).indexOf(active.id);
+            const overIndex = schemas.map((i) => i.id).indexOf(overId);
+            if (selectedSchemas.length) {
+                let newSchemas = [...schemas];
+                newSchemas = (0, sortable_1.arrayMove)(newSchemas, activeIndex, overIndex);
+                newSchemas.splice(overIndex + 1, 0, ...selectedSchemas.filter((item) => item.id !== activeId));
+                onSortEnd(newSchemas);
+                setSelectedSchemas([]);
+            }
+            else if (activeIndex !== overIndex) {
+                onSortEnd((0, sortable_1.arrayMove)(schemas, activeIndex, overIndex));
+            }
+            setActiveId(null);
+        }, onDragCancel: () => {
+            if (dragOverlaydItems) {
+                onSortEnd(dragOverlaydItems);
+            }
+            setActiveId(null);
+            setClonedItems(null);
+        } },
+        react_1.default.createElement("div", { style: { height, overflowY: 'auto' } },
+            react_1.default.createElement(sortable_1.SortableContext, { items: schemas, strategy: sortable_1.verticalListSortingStrategy },
+                react_1.default.createElement("ul", { style: { margin: 0, padding: 0, listStyle: 'none', borderRadius: 5 } }, schemas.map((schema) => (react_1.default.createElement(SelectableSortableItem_js_1.default, { key: schema.id, style: {
+                        border: `1px solid ${schema.id === hoveringSchemaId ? '#18a0fb' : 'transparent'}`,
+                    }, schema: schema, schemas: schemas, isSelected: isItemSelected(schema.id) || activeId === schema.id, onEdit: onEdit, onSelect: onSelectionChanged, onMouseEnter: () => onChangeHoveringSchemaId(schema.id), onMouseLeave: () => onChangeHoveringSchemaId(null) })))))),
+        (0, react_dom_1.createPortal)(react_1.default.createElement(core_1.DragOverlay, { adjustScale: true }, activeId ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("ul", { style: { margin: 0, padding: 0, listStyle: 'none' } },
+                react_1.default.createElement(Item_js_1.default, { value: schemas.find((schema) => schema.id === activeId).key, style: { color: '#fff', background: '#18a0fb' }, dragOverlay: true })),
+            react_1.default.createElement("ul", { style: { margin: 0, padding: 0, listStyle: 'none' } }, selectedSchemas
+                .filter((item) => item.id !== activeId)
+                .map((item) => (react_1.default.createElement(Item_js_1.default, { key: item.id, value: item.key, style: { color: '#fff', background: '#18a0fb' }, dragOverlay: true })))))) : null), document.body)));
+};
+exports.default = SelectableSortableContainer;
+//# sourceMappingURL=SelectableSortableContainer.js.map

package/dist/cjs/src/components/Designer/Sidebar/ListView/SelectableSortableContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableSortableContainer.js","sourceRoot":"","sources":["../../../../../../../src/components/Designer/Sidebar/ListView/SelectableSortableContainer.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/src/components/Designer/Sidebar/ListView/SelectableSortableItem.js

@@ -0,0 +1,62 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const sortable_1 = require("@dnd-kit/sortable");
+const contexts_js_1 = require("../../../../contexts.js");
+const Item_js_1 = __importDefault(require("./Item.js"));
+const hooks_js_1 = require("../../../../hooks.js");
+const SelectableSortableItem = ({ isSelected, style, onSelect, onEdit, schema, schemas, onMouseEnter, onMouseLeave, }) => {
+    const i18n = (0, react_1.useContext)(contexts_js_1.I18nContext);
+    const { setNodeRef, listeners, isDragging, isSorting, transform, transition } = (0, sortable_1.useSortable)({
+        id: schema.id,
+    });
+    const mounted = (0, hooks_js_1.useMountStatus)();
+    const mountedWhileDragging = isDragging && !mounted;
+    const newListeners = Object.assign(Object.assign({}, listeners), { onClick: (event) => onSelect(schema.id, event.shiftKey) });
+    let status;
+    if (!schema.key) {
+        status = 'is-warning';
+    }
+    else if (schemas.find((s) => schema.key && s.key === schema.key && s.id !== schema.id)) {
+        status = 'is-danger';
+    }
+    let title = i18n('edit');
+    if (status === 'is-warning') {
+        title = i18n('plsInputName');
+    }
+    else if (status === 'is-danger') {
+        title = i18n('fieldMustUniq');
+    }
+    const selectedStyle = isSelected
+        ? { color: '#fff', background: '#18a0fb', opacity: isSorting || isDragging ? 0.5 : 1 }
+        : {};
+    return (react_1.default.createElement(Item_js_1.default, { ref: setNodeRef, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: () => onEdit(schema.id), value: schema.key, status: status, title: title, style: Object.assign(Object.assign({}, selectedStyle), style), dragging: isDragging, sorting: isSorting, transition: transition, transform: transform, fadeIn: mountedWhileDragging, listeners: newListeners }));
+};
+exports.default = SelectableSortableItem;
+//# sourceMappingURL=SelectableSortableItem.js.map

package/dist/cjs/src/components/Designer/Sidebar/ListView/SelectableSortableItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SelectableSortableItem.js","sourceRoot":"","sources":["../../../../../../../src/components/Designer/Sidebar/ListView/SelectableSortableItem.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA0C;AAC1C,gDAAgD;AAEhD,yDAAsD;AACtD,wDAA6B;AAC7B,mDAAsD;AAYtD,MAAM,sBAAsB,GAAG,CAAC,EAC9B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,EACP,YAAY,EACZ,YAAY,GACN,EAAE,EAAE;IACV,MAAM,IAAI,GAAG,IAAA,kBAAU,EAAC,yBAAW,CAAC,CAAC;IACrC,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,IAAA,sBAAW,EAAC;QAC1F,EAAE,EAAE,MAAM,CAAC,EAAE;KACd,CAAC,CAAC;IACH,MAAM,OAAO,GAAG,IAAA,yBAAc,GAAE,CAAC;IACjC,MAAM,oBAAoB,GAAG,UAAU,IAAI,CAAC,OAAO,CAAC;IAEpD,MAAM,YAAY,mCACb,SAAS,KACZ,OAAO,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,CAAC,GAC7D,CAAC;IAEF,IAAI,MAA8C,CAAC;IACnD,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;QACf,MAAM,GAAG,YAAY,CAAC;KACvB;SAAM,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE,KAAK,MAAM,CAAC,EAAE,CAAC,EAAE;QACxF,MAAM,GAAG,WAAW,CAAC;KACtB;IAED,IAAI,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,CAAC;IACzB,IAAI,MAAM,KAAK,YAAY,EAAE;QAC3B,KAAK,GAAG,IAAI,CAAC,cAAc,CAAC,CAAC;KAC9B;SAAM,IAAI,MAAM,KAAK,WAAW,EAAE;QACjC,KAAK,GAAG,IAAI,CAAC,eAAe,CAAC,CAAC;KAC/B;IAED,MAAM,aAAa,GAAG,UAAU;QAC9B,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,IAAI,UAAU,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE;QACtF,CAAC,CAAE,EAA0B,CAAC;IAEhC,OAAO,CACL,8BAAC,iBAAI,IACH,GAAG,EAAE,UAAU,EACf,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,EAChC,KAAK,EAAE,MAAM,CAAC,GAAG,EACjB,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,KAAK,kCAAO,aAAa,GAAK,KAAK,GACnC,QAAQ,EAAE,UAAU,EACpB,OAAO,EAAE,SAAS,EAClB,UAAU,EAAE,UAAU,EACtB,SAAS,EAAE,SAAS,EACpB,MAAM,EAAE,oBAAoB,EAC5B,SAAS,EAAE,YAAY,GACvB,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,sBAAsB,CAAC"}

package/dist/cjs/src/components/Designer/Sidebar/ListView/index.js

@@ -0,0 +1,84 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const constants_js_1 = require("../../../../constants.js");
+const contexts_js_1 = require("../../../../contexts.js");
+const Divider_js_1 = __importDefault(require("../../../Divider.js"));
+const SelectableSortableContainer_js_1 = __importDefault(require("./SelectableSortableContainer.js"));
+const ListView = (props) => {
+    const { schemas, onSortEnd, onEdit, size, hoveringSchemaId, onChangeHoveringSchemaId, changeSchemas, } = props;
+    const i18n = (0, react_1.useContext)(contexts_js_1.I18nContext);
+    const [isBulkUpdateFieldNamesMode, setIsBulkUpdateFieldNamesMode] = (0, react_1.useState)(false);
+    const [fieldNamesValue, setFieldNamesValue] = (0, react_1.useState)('');
+    const height = size.height - constants_js_1.RULER_HEIGHT - constants_js_1.RULER_HEIGHT / 2 - 145;
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement("div", { style: { height: 40, display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement("span", { style: { textAlign: 'center', width: '100%', fontWeight: 'bold' } }, i18n('fieldsList'))),
+        react_1.default.createElement(Divider_js_1.default, null),
+        isBulkUpdateFieldNamesMode ? (react_1.default.createElement("div", null,
+            react_1.default.createElement("textarea", { wrap: "off", value: fieldNamesValue, onChange: (e) => setFieldNamesValue(e.target.value), style: {
+                    height: height - 5,
+                    width: constants_js_1.SIDEBAR_WIDTH,
+                    fontSize: '1rem',
+                    lineHeight: '2.5rem',
+                    background: 'transparent',
+                    margin: 0,
+                    padding: '1rem',
+                    boxSizing: 'border-box',
+                    fontFamily: 'inherit',
+                } }))) : (react_1.default.createElement(SelectableSortableContainer_js_1.default, { height: height, schemas: schemas, hoveringSchemaId: hoveringSchemaId, onChangeHoveringSchemaId: onChangeHoveringSchemaId, onSortEnd: onSortEnd, onEdit: onEdit })),
+        react_1.default.createElement("div", { style: {
+                display: 'flex',
+                justifyContent: 'flex-end',
+                cursor: 'pointer',
+                fontSize: '0.75rem',
+            } }, isBulkUpdateFieldNamesMode ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("u", { onClick: () => {
+                    const names = fieldNamesValue.split('\n');
+                    if (names.length !== schemas.length) {
+                        alert(i18n('errorBulkUpdateFieldName'));
+                    }
+                    else {
+                        changeSchemas(names.map((value, index) => ({
+                            key: 'key',
+                            value,
+                            schemaId: schemas[index].id,
+                        })));
+                        setIsBulkUpdateFieldNamesMode(false);
+                    }
+                } }, i18n('commitBulkUpdateFieldName')),
+            react_1.default.createElement("span", { style: { margin: '0 1rem' } }, "/"),
+            react_1.default.createElement("u", { onClick: () => setIsBulkUpdateFieldNamesMode(false) }, i18n('cancel')))) : (react_1.default.createElement("u", { onClick: () => {
+                setFieldNamesValue(schemas.map((s) => s.key).join('\n'));
+                setIsBulkUpdateFieldNamesMode(true);
+            } }, i18n('bulkUpdateFieldName')))),
+        react_1.default.createElement(Divider_js_1.default, null)));
+};
+exports.default = ListView;
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/components/Designer/Sidebar/ListView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/Designer/Sidebar/ListView/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/src/components/Designer/Sidebar/index.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const constants_js_1 = require("../../../constants.js");
+const contexts_js_1 = require("../../../contexts.js");
+const outline_1 = require("@heroicons/react/24/outline");
+const index_js_1 = __importDefault(require("./ListView/index.js"));
+const index_js_2 = __importDefault(require("./DetailView/index.js"));
+const Sidebar = (props) => {
+    const { height, size, activeElements, schemas, addSchema } = props;
+    const i18n = (0, react_1.useContext)(contexts_js_1.I18nContext);
+    const [open, setOpen] = (0, react_1.useState)(true);
+    const getActiveSchemas = () => {
+        const ids = activeElements.map((ae) => ae.id);
+        return schemas.filter((s) => ids.includes(s.id));
+    };
+    const getLastActiveSchema = () => {
+        const activeSchemas = getActiveSchemas();
+        return activeSchemas[activeSchemas.length - 1];
+    };
+    return (react_1.default.createElement("div", { style: {
+            position: 'absolute',
+            right: 0,
+            zIndex: 1,
+            height: height ? height : '100%',
+            width: open ? constants_js_1.SIDEBAR_WIDTH : 0,
+        } },
+        react_1.default.createElement("div", { style: { position: 'sticky', top: 0, zIndex: 1, fontSize: '1rem' } },
+            react_1.default.createElement("button", { style: {
+                    position: 'absolute',
+                    top: '1.75rem',
+                    right: '0.5rem',
+                    zIndex: 100,
+                    border: 'none',
+                    borderRadius: 2,
+                    padding: '0.5rem',
+                    cursor: 'pointer',
+                    background: '#eee',
+                    width: 30,
+                    height: 30,
+                }, onClick: () => setOpen(!open) }, open ? (react_1.default.createElement(outline_1.ArrowRightIcon, { width: 15, height: 15 })) : (react_1.default.createElement(outline_1.ArrowLeftIcon, { width: 15, height: 15 }))),
+            react_1.default.createElement("div", { style: {
+                    width: constants_js_1.SIDEBAR_WIDTH,
+                    height: size.height - constants_js_1.RULER_HEIGHT - constants_js_1.RULER_HEIGHT / 2,
+                    display: open ? 'block' : 'none',
+                    top: constants_js_1.RULER_HEIGHT / 2,
+                    right: 0,
+                    position: 'absolute',
+                    background: '#ffffffed',
+                    color: '#333',
+                    border: '1px solid #eee',
+                    padding: '0.5rem',
+                    overflowY: 'auto',
+                    fontFamily: "'Open Sans', sans-serif",
+                    fontWeight: 400,
+                    textAlign: 'left',
+                    boxSizing: 'content-box',
+                } },
+                getActiveSchemas().length === 0 ? (react_1.default.createElement(index_js_1.default, Object.assign({}, props))) : (react_1.default.createElement(index_js_2.default, Object.assign({}, props, { activeSchema: getLastActiveSchema() }))),
+                react_1.default.createElement("div", { style: {
+                        display: 'flex',
+                        justifyContent: 'space-around',
+                        position: 'absolute',
+                        width: '100%',
+                        left: 0,
+                        bottom: '1rem',
+                        paddingTop: '1rem',
+                    } },
+                    react_1.default.createElement("button", { style: {
+                            padding: '0.5rem',
+                            background: '#18a0fb',
+                            border: 'none',
+                            borderRadius: 2,
+                            cursor: 'pointer',
+                        }, onClick: addSchema },
+                        react_1.default.createElement("strong", { style: { color: '#fff' } }, i18n('addNewField'))))))));
+};
+exports.default = Sidebar;
+//# sourceMappingURL=index.js.map

package/dist/cjs/src/components/Designer/Sidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/Designer/Sidebar/index.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/src/components/Designer/index.js

@@ -0,0 +1,235 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const index_js_1 = __importDefault(require("./Sidebar/index.js"));
+const index_js_2 = __importDefault(require("./Main/index.js"));
+const constants_js_1 = require("../../constants.js");
+const contexts_js_1 = require("../../contexts.js");
+const helper_js_1 = require("../../helper.js");
+const hooks_js_1 = require("../../hooks.js");
+const Root_js_1 = __importDefault(require("../Root.js"));
+const Error_js_1 = __importDefault(require("../Error.js"));
+const index_js_3 = __importDefault(require("../CtlBar/index.js"));
+const TemplateEditor = ({ template, size, onSaveTemplate, onChangeTemplate, }) => {
+    const copiedSchemas = (0, react_1.useRef)(null);
+    const past = (0, react_1.useRef)([]);
+    const future = (0, react_1.useRef)([]);
+    const mainRef = (0, react_1.useRef)(null);
+    const paperRefs = (0, react_1.useRef)([]);
+    const i18n = (0, react_1.useContext)(contexts_js_1.I18nContext);
+    const [hoveringSchemaId, setHoveringSchemaId] = (0, react_1.useState)(null);
+    const [activeElements, setActiveElements] = (0, react_1.useState)([]);
+    const [schemasList, setSchemasList] = (0, react_1.useState)([[]]);
+    const [pageCursor, setPageCursor] = (0, react_1.useState)(0);
+    const [zoomLevel, setZoomLevel] = (0, react_1.useState)(1);
+    const { backgrounds, pageSizes, scale, error } = (0, hooks_js_1.useUIPreProcessor)({ template, size, zoomLevel });
+    const onEdit = (targets) => {
+        setActiveElements(targets);
+        setHoveringSchemaId(null);
+    };
+    const onEditEnd = () => {
+        setActiveElements([]);
+        setHoveringSchemaId(null);
+    };
+    (0, hooks_js_1.useScrollPageCursor)({
+        ref: mainRef,
+        pageSizes,
+        scale,
+        pageCursor,
+        onChangePageCursor: (p) => {
+            setPageCursor(p);
+            onEditEnd();
+        },
+    });
+    const modifiedTemplate = (0, helper_js_1.fmtTemplate)(template, schemasList);
+    const commitSchemas = (0, react_1.useCallback)((newSchemas) => {
+        future.current = [];
+        past.current.push((0, helper_js_1.cloneDeep)(schemasList[pageCursor]));
+        const _schemasList = (0, helper_js_1.cloneDeep)(schemasList);
+        _schemasList[pageCursor] = newSchemas;
+        setSchemasList(_schemasList);
+        onChangeTemplate((0, helper_js_1.fmtTemplate)(template, _schemasList));
+    }, [template, schemasList, pageCursor, onChangeTemplate]);
+    const removeSchemas = (0, react_1.useCallback)((ids) => {
+        commitSchemas(schemasList[pageCursor].filter((schema) => !ids.includes(schema.id)));
+        onEditEnd();
+    }, [schemasList, pageCursor, commitSchemas]);
+    const changeSchemas = (0, react_1.useCallback)((objs) => {
+        const newSchemas = objs.reduce((acc, { key, value, schemaId }) => {
+            const tgt = acc.find((s) => s.id === schemaId);
+            // Assign to reference
+            (0, helper_js_1.set)(tgt, key, value);
+            if (key === 'type') {
+                const type = String(value);
+                // set default value, text or barcode
+                (0, helper_js_1.set)(tgt, 'data', (0, helper_js_1.getSampleByType)(type));
+                // For barcodes, adjust the height to get the correct ratio.
+                if (value !== 'text') {
+                    (0, helper_js_1.set)(tgt, 'height', (0, helper_js_1.getKeepRatioHeightByWidth)(type, tgt.width));
+                }
+            }
+            return acc;
+        }, (0, helper_js_1.cloneDeep)(schemasList[pageCursor]));
+        commitSchemas(newSchemas);
+    }, [commitSchemas, pageCursor, schemasList]);
+    const initEvents = (0, react_1.useCallback)(() => {
+        const getActiveSchemas = () => {
+            const ids = activeElements.map((ae) => ae.id);
+            return schemasList[pageCursor].filter((s) => ids.includes(s.id));
+        };
+        const timeTravel = (mode) => {
+            const isUndo = mode === 'undo';
+            const stack = isUndo ? past : future;
+            if (stack.current.length <= 0)
+                return;
+            (isUndo ? future : past).current.push((0, helper_js_1.cloneDeep)(schemasList[pageCursor]));
+            const s = (0, helper_js_1.cloneDeep)(schemasList);
+            s[pageCursor] = stack.current.pop();
+            setSchemasList(s);
+        };
+        (0, helper_js_1.initShortCuts)({
+            move: (command, isShift) => {
+                const pageSize = pageSizes[pageCursor];
+                const activeSchemas = getActiveSchemas();
+                const arg = (0, helper_js_1.moveCommandToChangeSchemasArg)({ command, activeSchemas, pageSize, isShift });
+                changeSchemas(arg);
+            },
+            copy: () => {
+                const activeSchemas = getActiveSchemas();
+                if (activeSchemas.length === 0)
+                    return;
+                copiedSchemas.current = activeSchemas;
+            },
+            paste: () => {
+                if (!copiedSchemas.current || copiedSchemas.current.length === 0)
+                    return;
+                const schema = schemasList[pageCursor];
+                const stackUniqSchemaKeys = [];
+                const pasteSchemas = copiedSchemas.current.map((cs) => {
+                    const id = (0, helper_js_1.uuid)();
+                    const key = (0, helper_js_1.getUniqSchemaKey)({ copiedSchemaKey: cs.key, schema, stackUniqSchemaKeys });
+                    const { height, width, position: p } = cs;
+                    const ps = pageSizes[pageCursor];
+                    const position = {
+                        x: p.x + 10 > ps.width - width ? ps.width - width : p.x + 10,
+                        y: p.y + 10 > ps.height - height ? ps.height - height : p.y + 10,
+                    };
+                    return Object.assign((0, helper_js_1.cloneDeep)(cs), { id, key, position });
+                });
+                commitSchemas(schemasList[pageCursor].concat(pasteSchemas));
+                onEdit(pasteSchemas.map((s) => document.getElementById(s.id)));
+                copiedSchemas.current = pasteSchemas;
+            },
+            redo: () => timeTravel('redo'),
+            undo: () => timeTravel('undo'),
+            save: () => onSaveTemplate && onSaveTemplate(modifiedTemplate),
+            remove: () => removeSchemas(getActiveSchemas().map((s) => s.id)),
+            esc: onEditEnd,
+            selectAll: () => onEdit(schemasList[pageCursor].map((s) => document.getElementById(s.id))),
+        });
+    }, [
+        activeElements,
+        changeSchemas,
+        commitSchemas,
+        modifiedTemplate,
+        pageCursor,
+        pageSizes,
+        removeSchemas,
+        onSaveTemplate,
+        schemasList,
+    ]);
+    const destroyEvents = (0, react_1.useCallback)(() => {
+        (0, helper_js_1.destroyShortCuts)();
+    }, []);
+    const updateTemplate = (0, react_1.useCallback)((newTemplate) => __awaiter(void 0, void 0, void 0, function* () {
+        var _a;
+        const sl = yield (0, helper_js_1.templateSchemas2SchemasList)(newTemplate);
+        setSchemasList(sl);
+        onEditEnd();
+        setPageCursor(0);
+        if ((_a = mainRef.current) === null || _a === void 0 ? void 0 : _a.scroll) {
+            mainRef.current.scroll({ top: 0, behavior: 'smooth' });
+        }
+    }), []);
+    (0, react_1.useEffect)(() => {
+        updateTemplate(template);
+    }, [template, updateTemplate]);
+    (0, react_1.useEffect)(() => {
+        initEvents();
+        return destroyEvents;
+    }, [initEvents, destroyEvents]);
+    const addSchema = () => {
+        const s = (0, helper_js_1.getInitialSchema)();
+        const paper = paperRefs.current[pageCursor];
+        const rectTop = paper ? paper.getBoundingClientRect().top : 0;
+        s.position.y = rectTop > 0 ? 0 : pageSizes[pageCursor].height / 2;
+        s.data = 'text';
+        s.key = `${i18n('field')}${schemasList[pageCursor].length + 1}`;
+        commitSchemas(schemasList[pageCursor].concat(s));
+        setTimeout(() => onEdit([document.getElementById(s.id)]));
+    };
+    const onSortEnd = (sortedSchemas) => {
+        commitSchemas(sortedSchemas);
+    };
+    const onChangeHoveringSchemaId = (id) => {
+        setHoveringSchemaId(id);
+    };
+    if (error) {
+        return react_1.default.createElement(Error_js_1.default, { size: size, error: error });
+    }
+    return (react_1.default.createElement(Root_js_1.default, { size: size, scale: scale },
+        react_1.default.createElement(index_js_3.default, { size: size, pageCursor: pageCursor, pageNum: schemasList.length, setPageCursor: (p) => {
+                if (!mainRef.current)
+                    return;
+                mainRef.current.scrollTop = (0, helper_js_1.getPagesScrollTopByIndex)(pageSizes, p, scale);
+                setPageCursor(p);
+                onEditEnd();
+            }, zoomLevel: zoomLevel, setZoomLevel: (zoom) => {
+                if (mainRef.current) {
+                    mainRef.current.scrollTop = (0, helper_js_1.getPagesScrollTopByIndex)(pageSizes, pageCursor, scale);
+                }
+                setZoomLevel(zoom);
+            } }),
+        react_1.default.createElement(index_js_1.default, { hoveringSchemaId: hoveringSchemaId, onChangeHoveringSchemaId: onChangeHoveringSchemaId, height: mainRef.current ? mainRef.current.clientHeight : 0, size: size, pageSize: pageSizes[pageCursor], activeElements: activeElements, schemas: schemasList[pageCursor], changeSchemas: changeSchemas, onSortEnd: onSortEnd, onEdit: (id) => {
+                const editingElem = document.getElementById(id);
+                editingElem && onEdit([editingElem]);
+            }, onEditEnd: onEditEnd, addSchema: addSchema }),
+        react_1.default.createElement(index_js_2.default, { ref: mainRef, paperRefs: paperRefs, hoveringSchemaId: hoveringSchemaId, onChangeHoveringSchemaId: onChangeHoveringSchemaId, height: size.height - constants_js_1.RULER_HEIGHT * constants_js_1.ZOOM, pageCursor: pageCursor, scale: scale, size: size, pageSizes: pageSizes, backgrounds: backgrounds, activeElements: activeElements, schemasList: schemasList, changeSchemas: changeSchemas, removeSchemas: removeSchemas, onEdit: onEdit })));
+};
+exports.default = TemplateEditor;
+//# sourceMappingURL=index.js.map