@luomus/laji-form 14.3.8 → 15.1.0

package/lib/components/LajiForm.js

@@ -102,7 +102,6 @@ const fields = importLocalComponents("fields", [
     "InputWithDefaultValueButtonField",
     "MultiTagArrayField",
     "PdfArrayField",
-    "AsArrayField",
     { "InputTransformerField": "ConditionalOnChangeField" },
     { "ConditionalField": "ConditionalUiSchemaField" },
     { "UnitRapidField": "UnitShorthandField" },

package/lib/components/fields/ImageArrayField.js

@@ -415,7 +415,7 @@ function MediaArrayField(ComposedComponent) {
                     ? Promise.resolve(Object.assign(Object.assign({}, mediaMetadata), { capturerVerbatim: [mediaMetadata.capturerVerbatim] }))
                     : MACode
                         ? this.apiClient.fetchCached(`/person/by-id/${MACode}`).then(({ fullName = MACode }) => (Object.assign(Object.assign({ capturerVerbatim: Array.isArray(fullName) ? fullName : [fullName] }, mediaMetadata), { intellectualOwner: fullName }))).catch(() => Promise.resolve(mediaMetadata))
-                        : mediaMetadata;
+                        : Promise.resolve(mediaMetadata);
             };
             this.getMaxFileSizeAsString = () => {
                 let maxSize = this.MAX_FILE_SIZE.toString().substring(0, this.MAX_FILE_SIZE.toString().length - 6);
@@ -505,8 +505,6 @@ function MediaArrayField(ComposedComponent) {
             const { dragging } = this.state;
             const { Row, Col } = this.context.theme;
             const { DescriptionFieldTemplate } = this.props.registry.templates;
-            const mediaCount = (this.props.formData || []).length + (this.state.tmpMedias || []).length;
-            const showAdd = utils_1.isNullOrUndefined(this.props.schema.maxItems) || mediaCount < this.props.schema.maxItems;
             return (React.createElement(Row, null,
                 React.createElement(Col, { xs: 12 },
                     React.createElement(TitleFieldTemplate, { title: title, schema: schema, uiSchema: uiSchema, id: idSchema.$id, registry: this.props.registry }),
@@ -514,7 +512,7 @@ function MediaArrayField(ComposedComponent) {
                     React.createElement("div", { className: `laji-form-medias ${this.CONTAINER_CLASS}` },
                         this.renderMedias(),
                         this.renderLoadingMedias(),
-                        showAdd && React.createElement(OverlayTrigger, { overlay: tooltip },
+                        React.createElement(OverlayTrigger, { overlay: tooltip },
                             React.createElement(react_dropzone_1.default, { accept: this.ACCEPT_FILE_TYPES, onDragEnter: this.onDragEnter, onDragLeave: this.onDragLeave, onDrop: this.onDrop, disabled: readonly || disabled, noKeyboard: true }, ({ getRootProps, getInputProps }) => {
                                 const _a = getRootProps(), { onClick: _onClick } = _a, rootProps = __rest(_a, ["onClick"]);
                                 const onClick = addModal ? this.defaultOnClick : _onClick;

package/lib/components/fields/NamedPlaceSaverField.js

@@ -146,7 +146,7 @@ class PlaceSaverDialog extends React.Component {
     }
     componentDidMount() {
         this.mounted = true;
-        this.apiClient.fetchCached("/named-places", { includePublic: false, pageSize: 1000 }).then(response => {
+        this.apiClient.fetchCached("/named-places", { includePublic: false, pageSize: 10000 }).then(response => {
             if (!this.mounted)
                 return;
             const state = {

package/lib/components/fields/SectionArrayField.js

@@ -200,8 +200,12 @@ let SectionArrayFieldTemplate = class SectionArrayFieldTemplate extends React.Co
         };
         this.onNewSectionKeyDown = (e) => {
             if (e.key === "Enter") {
-                this.sectorIsValid(this.state.newSection) && this.addSection();
+                if (!this.sectorIsValid(this.state.newSection)) {
+                    return;
+                }
+                this.addSection();
                 this.hideAddSection();
+                e.stopPropagation();
             }
         };
         this.addSection = () => {

package/lib/components/fields/SingleActiveArrayField.js

@@ -770,7 +770,7 @@ let TableArrayFieldTemplate = class TableArrayFieldTemplate extends React.Compon
                             if (utils_1.filteredErrors(errorSchema)[utils_1.getFormDataIndex(idx, uiSchema)])
                                 className = className ? `${className} bg-danger` : "bg-danger";
                             return [
-                                React.createElement("tr", { key: utils_1.getUUID(this.props.formData[item.index]) || item.key, onClick: this.getOnChangeActive(idx), className: className, tabIndex: idx === activeIdx ? undefined : 0, id: idx !== activeIdx ? `_laji-form_${this.props.formContext.contextId}_${ArrayField_2.ArrayFieldPatched.prototype.getIdSchema(this.props, idx).$id}` : undefined, ref: setItemRef(idx), style: idx === activeIdx ? this.state.activeTrStyle : undefined, onMouseEnter: onMouseEnter(idx), onMouseLeave: onMouseLeave(idx), onKeyDown: this.onKeyDownActivate(idx) },
+                                React.createElement("tr", { key: utils_1.getUUID(this.props.formData[item.index]) || item.key, onClick: this.getOnChangeActive(idx), className: className, tabIndex: idx === activeIdx ? undefined : 0, id: idx !== activeIdx ? `_laji-form_${ArrayField_2.ArrayFieldPatched.prototype.getIdSchema(this.props, idx).$id}` : undefined, ref: setItemRef(idx), style: idx === activeIdx ? this.state.activeTrStyle : undefined, onMouseEnter: onMouseEnter(idx), onMouseLeave: onMouseLeave(idx), onKeyDown: this.onKeyDownActivate(idx) },
                                     cols.length ? cols.map(col => React.createElement("td", { key: col }, utils_1.formatValue(Object.assign(Object.assign({}, that.props), { schema: schema.items.properties[col], uiSchema: (uiSchema.items || {})[col], formData: formData[idx][col] }), formatters[col], { formData: formData[idx] }))) : React.createElement("td", null),
                                     (activeIdx !== undefined && items[activeIdx] && idx === activeIdx) ? (React.createElement("td", { key: utils_1.getUUID(formData[activeIdx]) || activeIdx, className: "single-active-array-table-content-col" },
                                         React.createElement("div", { className: "laji-form-field-template-item keep-vertical", style: this.state.activeStyle, ref: this.setActiveRef },

package/lib/components/fields/UnitShorthandField.js

@@ -96,14 +96,14 @@ let UnitShorthandField = class UnitShorthandField extends React.Component {
         const uiSchemaWithoutHelp = utils_1.isEmptyString(help) ? uiSchema : utils_1.updateTailUiSchema(uiSchema, { [shorthandFieldName]: { "ui:belowHelp": { $set: undefined } } });
         const id = (shorthandFieldName && this.props.idSchema[shorthandFieldName]) ?
             this.props.idSchema[shorthandFieldName].$id :
-            `${this.props.idSchema.$id}_shortHandField`;
+            `${this.props.idSchema.$id}-shortHandField`;
         let innerUiSchema = undefined;
         if (this.state.showSchema) {
             innerUiSchema = utils_1.getInnerUiSchema(Object.assign({}, uiSchemaWithoutHelp));
             const innerOptions = utils_1.getUiOptions(innerUiSchema);
             innerUiSchema = Object.assign(Object.assign({}, innerUiSchema), { "ui:options": Object.assign(Object.assign({}, innerOptions), { buttons: [...(innerOptions.buttons || []), toggleButton] }) });
         }
-        return !this.state.showSchema ? (React.createElement("div", { className: "laji-form-field-template-item", id: `_laji-form_${this.props.formContext.contextId}_${id}` },
+        return !this.state.showSchema ? (React.createElement("div", { className: "laji-form-field-template-item", id: `_laji-form_${id}` },
             React.createElement(CodeReader, { translations: this.props.formContext.translations, onChange: this.onCodeChange, value: this.props.formData[shorthandFieldName], formID: utils_1.getUiOptions(this.props.uiSchema).formID || formContext.formID || formContext.uiSchemaContext.formID, help: help, id: id, formContext: formContext, disabled: disabled, readonly: readonly, className: "laji-form-field-template-schema" }),
             React.createElement("div", { className: "laji-form-field-template-buttons" }, ArrayFieldTemplate_1.getButton(toggleButton)))) : (React.createElement(SchemaField, Object.assign({}, this.props, { uiSchema: innerUiSchema })));
     }

package/lib/components/templates/ArrayFieldTemplate.js

@@ -152,7 +152,7 @@ function handlesArrayKeys(ComposedComponent) {
                     const context = Context_1.default(this.props.formContext.contextId);
                     if (target === "last") {
                         context.idToFocus = `${this.props.idSchema.$id}_${this.props.formData.length - 1}`;
-                        context.idToScroll = `_laji-form_${this.props.formContext.contextId}_${this.props.idSchema.$id}_${this.props.formData.length - 2}`;
+                        context.idToScroll = `_laji-form_${this.props.idSchema.$id}_${this.props.formData.length - 2}`;
                     }
                     else {
                         console.warn(`custom event "focus" has only "last" implemented. Target value was: ${target}`);
@@ -277,8 +277,9 @@ class ArrayFieldTemplateWithoutKeyHandling extends React.Component {
         const bottomButtons = getButtonsElem(getButtonsForPosition(props, _buttons, "bottom"), props);
         const getRefFor = i => elem => { this.deleteButtonRefs[i] = elem; };
         const items = props.items.map((item, i) => {
+            const index = utils_1.getFormDataIndex(i, props.uiSchema);
             const getDeleteButton = () => (React.createElement("div", { className: "laji-form-field-template-buttons" },
-                React.createElement(components_1.DeleteButton, { id: `${props.idSchema.$id}_${i}`, disabled: disabled || readonly, ref: getRefFor(i), onClick: item.onDropIndexClick(item.index), confirm: confirmDelete, corner: deleteCorner, tooltip: deleteHelp, translations: props.formContext.translations })));
+                React.createElement(components_1.DeleteButton, { id: `${props.idSchema.$id}_${index}`, disabled: disabled || readonly, ref: getRefFor(i), onClick: item.onDropIndexClick(item.index), confirm: confirmDelete, corner: deleteCorner, tooltip: deleteHelp, translations: props.formContext.translations })));
             if (!this.onFocuses[i]) {
                 this.onFocuses[i] = this.getOnFocus(i);
             }

package/lib/components/templates/FieldTemplate.js

@@ -58,7 +58,7 @@ class _FieldTemplate extends React.Component {
         this.props.formContext.services.DOMIds.release(this.props.id, this.receiveId);
     }
     render() {
-        const { id, classNames: _classNames, children, rawErrors, description, hidden, required, displayLabel, schema, uiSchema, formContext, label: _label, forceDisplayLabel } = this.props;
+        const { id, classNames: _classNames, children, rawErrors, description, hidden, required, displayLabel, schema, uiSchema, label: _label, forceDisplayLabel } = this.props;
         const label = "ui:title" in uiSchema
             ? uiSchema["ui:title"]
             : "title" in schema
@@ -69,7 +69,7 @@ class _FieldTemplate extends React.Component {
         }
         const inlineHelp = uiSchema["ui:inlineHelp"];
         const belowHelp = uiSchema["ui:belowHelp"];
-        const htmlId = this.state.id ? `_laji-form_${formContext.contextId}_${this.state.id}` : undefined;
+        const htmlId = this.state.id ? `_laji-form_${this.state.id}` : undefined;
         const _displayLabel = forceDisplayLabel ||
             ((schema.items && schema.items.enum && !utils_1.isMultiSelect(schema, uiSchema)) ? false : displayLabel);
         let warnings = [];

package/lib/utils.d.ts

@@ -51,8 +51,8 @@ export declare const ReactUtils: (context: FormContext) => ReactUtilsType;
 export declare const getNextInputInInputs: (formContext: FormContext) => (inputElem: HTMLElement | undefined, reverseDirection: boolean | undefined, fields: HTMLElement[]) => HTMLElement | undefined;
 export declare const getNextInput: (formContext: FormContext) => (inputElem: HTMLElement, reverseDirection?: boolean) => HTMLElement | undefined;
 export declare const focusNextInput: (formContext: FormContext) => (reverseDirection?: boolean) => boolean;
-export declare const findNearestParentSchemaElemId: (contextId: number, elem: HTMLElement) => string | undefined;
-export declare const getSchemaElementById: (contextId: number, id: string) => HTMLElement | null;
+export declare const findNearestParentSchemaElemId: (elem: HTMLElement) => string | undefined;
+export declare const getSchemaElementById: (id: string) => HTMLElement | null;
 export declare const focusById: (context: FormContext, id: string, focus?: boolean | undefined) => boolean;
 export declare const focusAndScroll: (context: FormContext, idToFocus?: string | undefined, idToScroll?: string | undefined, focus?: boolean | undefined) => boolean | undefined;
 export declare const shouldSyncScroll: (context: FormContext) => boolean;
@@ -164,4 +164,8 @@ export declare const classNames: (...cs: any[]) => string;
 export declare function translate(translations: ByLang, key: string, params?: {
     [key: string]: string | undefined;
 }): string;
+export declare type JSONSerializable = string | number | boolean | JSONSerializableObject | JSONSerializable[] | null;
+export declare type JSONSerializableObject = {
+    [prop: string]: JSONSerializable;
+};
 export {};

package/lib/utils.js

@@ -245,8 +245,8 @@ function findNearestParentTabbableElem(elem) {
 }
 exports.findNearestParentTabbableElem = findNearestParentTabbableElem;
 const ReactUtils = (context) => ({
-    findNearestParentSchemaElemId: _findNearestParentSchemaElemId(context),
-    getSchemaElementById: _getSchemaElementById(context),
+    findNearestParentSchemaElemId: _findNearestParentSchemaElemId,
+    getSchemaElementById: _getSchemaElementById,
     focusById: _focusById(context),
     focusAndScroll: _focusAndScroll(context),
     shouldSyncScroll: _shouldSyncScroll(context),
@@ -322,23 +322,23 @@ const focusNextInput = (formContext) => (reverseDirection = false) => {
     return false;
 };
 exports.focusNextInput = focusNextInput;
-const _findNearestParentSchemaElemId = ({ contextId }) => (elem) => {
-    const nearestParentSchemaElem = findNearestParentSchemaElem(elem) || document.getElementById(`_laji-form_${contextId}_root`);
-    return nearestParentSchemaElem ? nearestParentSchemaElem.id.replace(`_laji-form_${contextId}_`, "") : undefined;
+const _findNearestParentSchemaElemId = (elem) => {
+    const nearestParentSchemaElem = findNearestParentSchemaElem(elem) || document.getElementById("_laji-form_root");
+    return nearestParentSchemaElem ? nearestParentSchemaElem.id.replace("_laji-form_", "") : undefined;
 };
-const findNearestParentSchemaElemId = (contextId, elem) => {
-    return _findNearestParentSchemaElemId({ contextId })(elem);
+const findNearestParentSchemaElemId = (elem) => {
+    return _findNearestParentSchemaElemId(elem);
 };
 exports.findNearestParentSchemaElemId = findNearestParentSchemaElemId;
-const _getSchemaElementById = ({ contextId }) => (id) => {
-    return document.getElementById(`_laji-form_${contextId}_${id}`);
+const _getSchemaElementById = (id) => {
+    return document.getElementById(`_laji-form_${id}`);
 };
-const getSchemaElementById = (contextId, id) => {
-    return _getSchemaElementById({ contextId })(id);
+const getSchemaElementById = (id) => {
+    return _getSchemaElementById(id);
 };
 exports.getSchemaElementById = getSchemaElementById;
 const _focusById = (context) => (id, focus = true) => {
-    const elem = exports.getSchemaElementById(context.contextId, id);
+    const elem = exports.getSchemaElementById(id);
     if (elem && document.body.contains(elem)) {
         const tabbableFields = getTabbableFields(elem);
         if (tabbableFields && tabbableFields.length) {
@@ -363,7 +363,7 @@ const _focusAndScroll = (context) => (idToFocus, idToScroll, focus = true) => {
         return false;
     if (idToScroll) {
         const elemToScroll = document.getElementById(getKeyHandlerTargetId(idToScroll, _context));
-        const elemToFocus = exports.getSchemaElementById(contextId, getKeyHandlerTargetId(idToFocus, _context));
+        const elemToFocus = exports.getSchemaElementById(getKeyHandlerTargetId(idToFocus, _context));
         if (!elemToScroll || !elemToFocus) {
             return end();
         }

package/llol

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Error</title>
+</head>
+<body>
+<pre>Cannot POST /v0/html-to-pdf</pre>
+</body>
+</html>

package/llol.pdf

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<title>Error</title>
+</head>
+<body>
+<pre>Cannot POST /v0/html-to-pdf</pre>
+</body>
+</html>

package/migrate.sh

@@ -0,0 +1,33 @@
+files="$@"
+set -e 
+
+echo "Add playwright import..."
+sed -i '1s/^/import { test, expect } from "@playwright\/test";\n/' $files
+
+echo "Removing protractor imports..."
+sed -i"" -e '/import.*protractor/d' $files
+
+#echo "Adding serial mode..."
+#sed -i"" -e '/import/,/^$/s/^$/\ntest.describe.configure\({ mode: "serial" }\);\n/g' $files
+
+echo "Replacing protractor cmds with playwright..."
+sed -i"" -E 's/\w?describe\(/test.describe\(/' $files
+sed -i"" -E 's/\w?it\(/test\(/' $files
+sed -i"" -E 's/\w?afterEach\(/test.afterEach\(/' $files
+sed -i"" -E 's/\w?beforeAll\(/test.beforeAll\(/' $files
+sed -i"" -E 's/\w?beforeEach\(/test.beforeEach\(/' $files
+sed -i"" -E 's/\w?afterAll\(/test.afterAll\(/' $files
+sed -i"" -E 's/\.\$\$\(/\.locator\(/g' $files
+sed -i"" -E 's/\.\$\(/\.locator\(/g' $files
+sed -i"" -E 's/\.get\(/\.nth\(/g' $files
+sed -i"" -E 's/ElementArrayFinder/ElementFinder/g' $files
+sed -i"" -E 's/ElementFinder/Locator/g' $files
+sed -i"" -E 's/sendKeys/fill/g' $files
+sed -i"" -E 's/protractor.Key.ENTER/"Enter"/g' $files
+sed -i"" -E 's/protractor.Key.TAB/"Tab"/g' $files
+sed -i"" -E 's/protractor.Key.DOWN/"ArrowDown"/g' $files
+
+#laji form specific
+sed -i"" -E 's/beforeAll\(async \(\)/beforeAll\(async \({browser}\)/' $files
+sed -i"" -E 's/createForm\(/createForm\(await browser.newPage(), /' $files
+sed -i"" -E 's/updateValue/form.updateValue/' $files

package/package.json

@@ -1,25 +1,22 @@
 {
   "name": "@luomus/laji-form",
-  "version": "14.3.8",
+  "version": "15.1.0",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
+    "prepare": "self-import",
     "start": "npx webpack serve",
     "staging": "webpack-dev-server --content-base playground playground/app.js --host 0.0.0.0 --port 4010",
     "build:lib": "rimraf lib && NODE_ENV=production tsc -p tsconfig.lib.json",
     "build:dist": "rimraf dist && NODE_ENV=production webpack --config webpack.config.dist.js && rimraf dist/styles.js",
-    "build:tests": "rimraf test-export && NODE_ENV=production tsc -p tsconfig.test.json",
+    "build:tests": "rimraf test-export & NODE_ENV=production tsc -p tsconfig.test.json",
     "build": "npm run build:lib && npm run build:dist && npm run build:tests",
-    "preversion": "npm run lint && npm run test:multi",
+    "preversion": "npm run lint && npm run test",
     "version": "bin/update-changelog.sh",
     "postversion": "npm run build && npm publish && git push & git push --tags",
     "lint": "eslint -c .eslintrc.prod.json src playground",
-    "test": "HOST=127.0.0.1 PORT=8083 protractor protractor.conf.js",
-    "test:multi": "TEST_BROWSER=multi HOST=127.0.0.1 PORT=8083 protractor protractor.conf.js",
-    "test:ffox": "TEST_BROWSER=firefox HOST=127.0.0.1 PORT=8083 protractor protractor.conf.js",
-    "test:debug": "HOST=127.0.0.1 PORT=8083 HEADLESS=false node --inspect-brk node_modules/protractor/bin/protractor protractor.conf.js",
-    "patch": "patch-package"
+    "test": "playwright test"
   },
   "keywords": [
     "react-jsonschema-form",
@@ -30,7 +27,7 @@
   "repository": "https://github.com/luomus/laji-form.git",
   "license": "MIT",
   "dependencies": {
-    "@luomus/laji-map": "^3.22.8",
+    "@luomus/laji-map": "^4.0.2",
     "@luomus/laji-validate": "0.0.120",
     "@rjsf/core": "~5.1.0",
     "@rjsf/utils": "~5.1.0",
@@ -58,26 +55,22 @@
     "react-widgets-moment": "^4.0.30"
   },
   "devDependencies": {
-    "@types/jasmine": "^3.7.7",
+    "@playwright/test": "^1.40.1",
+    "@types/node": "^20.10.1",
     "@typescript-eslint/eslint-plugin": "^4.28.1",
     "@typescript-eslint/parser": "^4.28.1",
     "copy-webpack-plugin": "^9.0.1",
     "css-loader": "^5.2.6",
     "eslint": "^7.30.0",
-    "eslint-plugin-jasmine": "^4.1.2",
-    "eslint-plugin-protractor": "^2.1.1",
     "eslint-plugin-react": "^7.24.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "mini-css-extract-plugin": "^2.1.0",
     "notus": "^0.3.2",
-    "patch-package": "^8.0.0",
-    "protractor": "^7.0.0",
-    "protractor-console-plugin": "^0.1.1",
     "querystring": "^0.2.1",
     "rimraf": "^2.5.4",
+    "self-import": "^1.0.1",
     "style-loader": "^3.0.0",
     "ts-loader": "^9.2.3",
-    "ts-node": "^9.1.1",
     "typescript": "^4.3.5",
     "webpack": "^5.41.1",
     "webpack-cli": "^4.8.0",
@@ -85,15 +78,15 @@
     "webpack-node-externals": "^3.0.0"
   },
   "optionalDependencies": {
-    "@types/react-bootstrap": "^0.32.22",
-    "react-bootstrap": "^0.33.1",
-    "react-bootstrap-5": "npm:react-bootstrap@^2.5.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
-    "@fortawesome/react-fontawesome": "^0.2.0"
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@types/react-bootstrap": "^0.32.22",
+    "react-bootstrap": "^0.33.1",
+    "react-bootstrap-5": "npm:react-bootstrap@^2.5.0"
   },
   "volta": {
-    "node": "14.21.3"
+    "node": "16.20.2"
   },
   "publishConfig": {
     "access": "public"