@luomus/laji-form 14.3.6

package/lib/validation.d.ts

@@ -0,0 +1,7 @@
+export function initializeValidation(apiClient: any): void;
+export function transformErrors(translations: any, errors: any): any;
+declare function _default({ errors: error, warnings: warning }: {
+    errors: any;
+    warnings: any;
+}, data: any): Promise<any>;
+export default _default;

package/lib/validation.js

@@ -0,0 +1,141 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.transformErrors = exports.initializeValidation = void 0;
+const lajiValidate = require("@luomus/laji-validate");
+function initializeValidation(apiClient) {
+    lajiValidate.extend(lajiValidate.validators.remote, {
+        fetch: (...params) => apiClient.fetchRaw(...params)
+    });
+}
+exports.initializeValidation = initializeValidation;
+exports.default = ({ errors: error, warnings: warning }, data) => {
+    const promises = [];
+    const getPromiseForValidator = (type, validator) => {
+        return lajiValidate.async(data, validator)
+            .then(() => { })
+            .catch(res => res)
+            .then(err => { return { type, err }; });
+    };
+    const _validators = { error, warning };
+    Object.keys(_validators).forEach(type => {
+        const validator = _validators[type];
+        promises.push(getPromiseForValidator(type, validator));
+    });
+    return Promise.all(promises).then((res) => {
+        const messages = res.reduce((arr, { type, err }) => {
+            arr = arr.concat(getMessages(err, type));
+            return arr;
+        }, []);
+        return Promise.resolve(toErrorSchema(messages));
+    });
+};
+function transformErrors(translations, errors) {
+    return errors.map(error => {
+        if (error.name === "type") {
+            error.message = translations.TypeError + translations[error.params.type] + ".";
+        }
+        else if (error.name === "required") {
+            error.message = translations.FieldIsRequired + ".";
+        }
+        return error;
+    });
+}
+exports.transformErrors = transformErrors;
+function getMessages(result, type) {
+    const messages = [];
+    for (let k in result) {
+        for (let l in result[k]) {
+            const message = (type !== "validators") ? `[${type}]` + result[k][l] : result[k][l];
+            messages.push({
+                property: "instance." + k,
+                message: message
+            });
+        }
+    }
+    return messages;
+}
+// these are taken from @rjsf/core to convert error messages to wanted form
+// see https://github.com/mozilla-services/@rjsf/core/blob/master/src/validate.js
+function toErrorSchema(errors) {
+    // Transforms a jsonschema validation errors list:
+    // [
+    //   {property: "instance.level1.level2[2].level3", message: "err a"},
+    //   {property: "instance.level1.level2[2].level3", message: "err b"},
+    //   {property: "instance.level1.level2[4].level3", message: "err b"},
+    // ]
+    // Into an error tree:
+    // {
+    //   level1: {
+    //     level2: {
+    //       2: {level3: {errors: ["err a", "err b"]}},
+    //       4: {level3: {errors: ["err b"]}},
+    //     }
+    //   }
+    // };
+    if (!errors.length) {
+        return {};
+    }
+    return errors.reduce(function (errorSchema, error) {
+        var property = error.property;
+        var message = error.message;
+        var path = errorPropertyToPath(property);
+        var parent = errorSchema;
+        var _iteratorNormalCompletion = true;
+        var _didIteratorError = false;
+        var _iteratorError = undefined;
+        try {
+            for (var _iterator = path.slice(1)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+                var segment = _step.value;
+                if (!(segment in parent)) {
+                    parent[segment] = {};
+                }
+                parent = parent[segment];
+            }
+        }
+        catch (err) {
+            _didIteratorError = true;
+            _iteratorError = err;
+        }
+        finally {
+            try {
+                if (!_iteratorNormalCompletion && _iterator.return) {
+                    _iterator.return();
+                }
+            }
+            finally {
+                if (_didIteratorError) {
+                    throw _iteratorError;
+                }
+            }
+        }
+        if (Array.isArray(parent.__errors)) {
+            // We store the list of errors for this node in a property named __errors
+            // to avoid name collision with a possible sub schema field named
+            // "errors" (see `validate.createErrorHandler`).
+            parent.__errors = parent.__errors.concat(message);
+        }
+        else {
+            parent.__errors = [message];
+        }
+        return errorSchema;
+    }, {});
+}
+const RE_ERROR_ARRAY_PATH = /\[\d+]/g;
+function errorPropertyToPath(property) {
+    // Parse array indices, eg. "instance.level1.level2[2].level3"
+    // => ["instance", "level1", "level2", 2, "level3"]
+    return property.split(".").reduce(function (path, node) {
+        var match = node.match(RE_ERROR_ARRAY_PATH);
+        if (match) {
+            var nodeName = node.slice(0, node.indexOf("["));
+            var indices = match.map(function (str) {
+                return parseInt(str.slice(1, -1), 10);
+            });
+            path = path.concat(nodeName, indices);
+        }
+        else {
+            path.push(node);
+        }
+        return path;
+    }, []);
+}

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/package.json

@@ -0,0 +1,99 @@
+{
+  "name": "@luomus/laji-form",
+  "version": "14.3.6",
+  "description": "React module capable of building dynamic forms from Laji form json schemas",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "scripts": {
+    "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": "npm run build:lib && npm run build:dist && npm run build:tests",
+    "preversion": "npm run lint && npm run test:multi",
+    "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"
+  },
+  "keywords": [
+    "react-jsonschema-form",
+    "laji-form",
+    "luomus"
+  ],
+  "author": "Olli Raitio <olli.raitio@helsinki.fi>",
+  "repository": "https://github.com/luomus/laji-form.git",
+  "license": "MIT",
+  "dependencies": {
+    "@luomus/laji-map": "^3.22.8",
+    "@luomus/laji-validate": "0.0.120",
+    "@rjsf/core": "~5.1.0",
+    "@rjsf/utils": "~5.1.0",
+    "@rjsf/validator-ajv6": "~5.1.0",
+    "@types/deep-equal": "^1.0.1",
+    "@types/memoizee": "^0.4.8",
+    "@types/react": "^16.14.10",
+    "@types/react-dom": "^16.9.13",
+    "@types/react-spinner": "^0.2.0",
+    "deep-equal": "^2.0.5",
+    "deepmerge": "^4.2.2",
+    "exif-js": "^2.3.0",
+    "immutability-helper": "^3.1.1",
+    "isomorphic-fetch": "^3.0.0",
+    "memoizee": "^0.4.15",
+    "moment": "^2.29.1",
+    "prop-types": "^15.5.8",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-dropzone": "^11.3.4",
+    "react-inlinesvg": "^2.3.0",
+    "react-sortable-hoc": "^2.0.0",
+    "react-spinner": "^0.2.7",
+    "react-widgets": "^4.6.1",
+    "react-widgets-moment": "^4.0.30"
+  },
+  "devDependencies": {
+    "@types/jasmine": "^3.7.7",
+    "@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",
+    "protractor": "^7.0.0",
+    "protractor-console-plugin": "^0.1.1",
+    "querystring": "^0.2.1",
+    "rimraf": "^2.5.4",
+    "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",
+    "webpack-dev-server": "^4.2.1",
+    "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"
+  },
+  "volta": {
+    "node": "14.21.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/q

@@ -0,0 +1,196 @@
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+modified: src/components/components.js
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+@ src/components/components.js:360 @ export class Stretch extends React.Component {
+	}
+
+	invalidate = (callback) => {
+		console.log('invalidate');
+		this.update(this.getState(), callback);
+	}
+
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+modified: src/components/fields/EnumRangeArrayField.js
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+@ src/components/fields/EnumRangeArrayField.js:8 @ import BaseComponent from "../BaseComponent";
+import { getUiOptions } from "../../utils";
+import { Autosuggest } from "../widgets/AutosuggestWidget";
+import { TagInputComponent } from "./TagArrayField";
+const equals = require("deep-equal");
+
+@BaseComponent
+export default class EnumRangeArrayField extends React.Component {
+@ src/components/fields/EnumRangeArrayField.js:30 @ export default class EnumRangeArrayField extends React.Component {
+		this.state = {value: ""};
+	}
+
+	UNSAFE_componentWillReceiveProps(props) {
+		if (!equals(props.formData, this.props.formData)) {
+			this.props.formContext.services.customEvents.send(props.idSchema.$id, "resize");
+		}
+	}
+ 
+	setRef = (elem) => {
+		this.autosuggestRef = elem;
+	}
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+modified: src/components/fields/ImageArrayField.tsx
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+@ src/components/fields/ImageArrayField.tsx:209 @ export function MediaArrayField<LFC extends Constructor<React.Component<FieldPro
+			this.mounted = false;
+		}
+
+		componentDidUpdate(prevProps: FieldProps, prevState: MediaArrayState) {
+			const getCount = (_props: FieldProps, _state: MediaArrayState) => ((_props.formData || []).length + (_state.tmpMedias || []).length);
+ 
+			if (getCount(prevProps, prevState) !== getCount(this.props, this.state)) {
+				this.props.formContext.services.customEvents.send(this.props.idSchema.$id, "resize");
+			}
+		}
+ 
+		onDragEnter = () => {this.setState({dragging: true});};
+
+		onDragLeave = () => {this.setState({dragging: false});};
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+modified: src/components/fields/MapArrayField.js
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+@ src/components/fields/MapArrayField.js:1159 @ class _MapArrayField extends ComposedComponent { // eslint-disable-line indent
+			this._tileLayerNameOnNextTick = tileLayerOptions;
+			this._tileLayerNameOnNextTickCallback = callback;
+		};
+		this._resizeEventHandler = () => {
+			this.refs.stretch.invalidate();
+		};
+		this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "activeIdx", this._setActiveEventHandler);
+		this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "zoomToData", this._zoomToDataEventHandler);
+		this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "tileLayers", this._tileLayersEventHandler);
+		this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "resize", this._resizeEventHandler);
+
+		if (this.state.activeIdx !== undefined) {
+			this.afterActiveChange(this.state.activeIdx, !!"initial call");
+@ src/components/fields/MapArrayField.js:1179 @ class _MapArrayField extends ComposedComponent { // eslint-disable-line indent
+		this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "activeIdx", this._setActiveEventHandler);
+		this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "zoomToData", this._zoomToDataEventHandler);
+		this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "tileLayers", this._tileLayersEventHandler);
+		this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "resize", this._resizeEventHandler);
+	}
+
+	componentDidUpdate(...params) {
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+modified: src/components/fields/SchemaField.js
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+@ src/components/fields/SchemaField.js:112 @ export default class _SchemaField extends React.Component {
+		};
+	}
+
+	componentDidUpdate(prevProps) {
+		if (!deepEquals(prevProps.errorSchema, this.props.errorSchema)) {
+			this.props.registry.formContext.services.customEvents.send(this.props.idSchema.$id, "resize");
+		}
+	}
+ 
+	render() {
+		const props = this.functionOutputProps || this.props;
+		let {schema, uiSchema = {}, formContext, registry, ..._props} = props; // eslint-disable-line @typescript-eslint/no-unused-vars
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+modified: src/components/fields/ScopeField.js
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+@ src/components/fields/ScopeField.js:138 @ export default class ScopeField extends React.Component {
+		}
+		if (!equals(prevState.fieldsToShow, this.state.fieldsToShow)) {
+			this.props.formContext.utils.syncScroll();
+			this.props.formContext.services.customEvents.send(this.props.idSchema.$id, "resize");
+		}
+	}
+
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+modified: src/components/fields/SingleActiveArrayField.js
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+@ src/components/fields/SingleActiveArrayField.js:678 @ class TableArrayFieldTemplate extends React.Component {
+		super(props);
+		this.state = {};
+		this.itemElems = [];
+		this.resizeObserver = new ResizeObserver(this.onResize);
+	}
+
+	onResize = (data, callback) => {
+		this.updateLayout(null, callback);
+	onResize = () => {
+		this.updateLayout();
+	}
+
+	componentDidMount() {
+		this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "resize", this.onResize);
+		this._updateRenderingMode = () => this.updateRenderingMode();
+		window.addEventListener("resize", this._updateRenderingMode);
+		this.updateRenderingMode();
+@ src/components/fields/SingleActiveArrayField.js:694 @ class TableArrayFieldTemplate extends React.Component {
+
+	componentWillUnmount() {
+		window.removeEventListener("resize", this._updateRenderingMode);
+		this.props.formContext.services.customEvents.remove(this.props.idSchema.$id, "resize", this.onResize);
+		this.resizeObserver.disconnect();
+	}
+
+	componentDidUpdate(prevProps, prevState) {
+@ src/components/fields/SingleActiveArrayField.js:726 @ class TableArrayFieldTemplate extends React.Component {
+			if (tHeadHeight) this.prevTHeadHeight = tHeadHeight;
+			this._prevCheckedLength = this.props.items.length;
+		}
+ 
+		if (this.props.idSchema.$id !== prevProps.idSchema.$id) {
+			prevProps.formContext.services.customEvents.remove(prevProps.idSchema.$id, "resize", this.onResize);
+			this.props.formContext.services.customEvents.add(this.props.idSchema.$id, "resize", this.onResize);
+			this.updateLayout();
+		}
+	}
+
+	// Sets state.normalRendering on if screen is too small for table layout.
+@ src/components/fields/SingleActiveArrayField.js:775 @ class TableArrayFieldTemplate extends React.Component {
+
+	setActiveRef = (elem) => {
+		this.activeElem = elem;
+		this.activeElem && this.resizeObserver.observe(this.activeElem);
+	}
+
+	setTHeadRef = (elem) => {
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+modified: src/components/fields/TagArrayField.js
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+@ src/components/fields/TagArrayField.js:6 @ import { findDOMNode } from "react-dom";
+import * as PropTypes from "prop-types";
+import { isEmptyString, getUiOptions, triggerParentComponent } from "../../utils";
+import BaseComponent from "../BaseComponent";
+const equals = require("deep-equal");
+
+@BaseComponent
+export default class TagArrayField extends React.Component {
+@ src/components/fields/TagArrayField.js:43 @ export class TagInputComponent extends React.Component {
+		this.setState(this.getStateFromProps(props));
+	}
+
+	componentDidUpdate(prevProps) {
+		if (!equals(prevProps.formData, this.props.formData)) {
+			this.props.formContext.services.customEvents.send(this.props.idSchema.$id, "resize");
+		}
+	}
+ 
+	getStateFromProps = ({value}) => {
+		return {value};
+	}
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+modified: src/components/templates/ArrayFieldTemplate.js
+───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
+@ src/components/templates/ArrayFieldTemplate.js:13 @ import { getTemplate } from "@rjsf/utils";
+function onAdd(e, props) {
+	if (!canAdd(props)) return;
+	props.onAddClick(e);
+	setTimeout(() => props.formContext.services.customEvents.send(props.idSchema.$id, "resize"));
+}
+
+export const onDelete = (item, props) => (e) => {
+	item.onDropIndexClick(item.index)(e);
+	setTimeout(() => props.formContext.services.customEvents.send(props.idSchema.$id, "resize"));
+};
+
+export function beforeAdd(props) {

package/test-export/array-spec.d.ts

@@ -0,0 +1 @@
+export {};