@luomus/laji-form 15.1.60 → 15.1.62

package/lib/components/LajiForm.d.ts

@@ -18,6 +18,7 @@ import IdService from "../services/id-service";
 import RootInstanceService from "../services/root-instance-service";
 import SingletonMapService from "../services/singleton-map-service";
 import { FieldProps, HasMaybeChildren, Lang } from "../types";
+import MultiActiveArrayService from "../services/multi-active-array-service";
 export interface LajiFormProps extends HasMaybeChildren {
     apiClient?: ApiClientImplementation;
     lang?: Lang;
@@ -114,6 +115,7 @@ export interface FormContext {
         ids: IdService;
         rootInstance: RootInstanceService;
         singletonMap: SingletonMapService;
+        multiActiveArray: MultiActiveArrayService;
     };
 }
 export declare type NotifyMessager = (msg: string) => void;
@@ -212,9 +214,13 @@ export default class LajiForm extends React.Component<LajiFormProps, LajiFormSta
     };
     pushBlockingLoader: () => void;
     popBlockingLoader: () => void;
+    focusField: (fieldName: string) => void;
+    openAllMultiActiveArrays: () => void;
+    closeAllMultiActiveArrays: () => void;
     getSettings(global?: boolean): {};
     onSettingsChange: (settings: Settings, global?: boolean) => void;
     addEventListener: (target: typeof document | typeof window, name: string, fn: (e: Event) => void) => void;
     setTimeout: (fn: () => void, time?: number) => number;
     destroy: () => void;
+    getSchemaValidationErrors: (formData: any) => any;
 }

package/lib/components/LajiForm.js

@@ -36,7 +36,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const PropTypes = __importStar(require("prop-types"));
-const validation_1 = __importDefault(require("../validation"));
+const validation_1 = __importStar(require("../validation"));
 const validation_2 = require("../validation");
 const components_1 = require("./components");
 const utils_1 = require("../utils");
@@ -59,6 +59,7 @@ const dom_id_service_1 = __importDefault(require("../services/dom-id-service"));
 const id_service_1 = __importDefault(require("../services/id-service"));
 const root_instance_service_1 = __importDefault(require("../services/root-instance-service"));
 const singleton_map_service_1 = __importDefault(require("../services/singleton-map-service"));
+const multi_active_array_service_1 = __importDefault(require("../services/multi-active-array-service"));
 const fields = importLocalComponents("fields", [
     "SchemaField",
     { "ArraySchemaField": "SchemaField" },
@@ -128,6 +129,7 @@ const fields = importLocalComponents("fields", [
     "PdfArrayField",
     "AsArrayField",
     "CondensedObjectField",
+    "MultiActiveArrayField",
     { "InputTransformerField": "ConditionalOnChangeField" },
     { "ConditionalField": "ConditionalUiSchemaField" },
     { "UnitRapidField": "UnitShorthandField" },
@@ -303,7 +305,7 @@ class LajiForm extends React.Component {
                 liveValidations = {};
             }
             const schemaErrors = nonlive || onlySchema
-                ? validator_ajv6_1.default.validateFormData(removeUndefinedFromArrays(formData), this.props.schema, undefined, ((e) => validation_2.transformErrors(this.state.formContext.translations, e))).errorSchema
+                ? this.getSchemaValidationErrors(formData)
                 : {};
             block && this.memoizedFormContext.services.blocker.push();
             return new Promise(resolve => Promise.all([validation_1.default(validations, formData), validation_1.default(liveValidations, formData)]).then(([_validations, _liveValidations]) => {
@@ -444,6 +446,16 @@ class LajiForm extends React.Component {
         this.popBlockingLoader = () => {
             this.memoizedFormContext.services.blocker.pop();
         };
+        this.focusField = (fieldName) => {
+            const id = utils_1.JSONPointerToId(fieldName);
+            this.memoizedFormContext.services.focus.focus("root_" + id);
+        };
+        this.openAllMultiActiveArrays = () => {
+            this.memoizedFormContext.services.multiActiveArray.openAll();
+        };
+        this.closeAllMultiActiveArrays = () => {
+            this.memoizedFormContext.services.multiActiveArray.closeAll();
+        };
         this.onSettingsChange = (settings, global = false) => {
             if (this.props.onSettingsChange)
                 this.props.onSettingsChange(settings, global);
@@ -468,6 +480,10 @@ class LajiForm extends React.Component {
                 });
             this.eventListeners = [];
         };
+        this.getSchemaValidationErrors = (formData) => {
+            const errors = validator_ajv6_1.default.validateFormData(removeUndefinedFromArrays(formData), this.props.schema, undefined, ((e) => validation_2.transformErrors(this.state.formContext.translations, e))).errors;
+            return validation_1.toErrorSchema(errors);
+        };
         if (props.apiClient) {
             this.apiClient = new ApiClient_1.default(props.apiClient, props.lang, this.translations);
         }
@@ -535,6 +551,7 @@ class LajiForm extends React.Component {
                 this.memoizedFormContext.services.ids = new id_service_1.default(props.schema, props.formData);
                 this.memoizedFormContext.services.rootInstance = new root_instance_service_1.default(props.schema, props.formData, (formData) => this.onChange({ formData }), this.validate, () => this.validateAndSubmit(false));
                 this.memoizedFormContext.services.singletonMap = new singleton_map_service_1.default();
+                this.memoizedFormContext.services.multiActiveArray = new multi_active_array_service_1.default();
             }
             return this.memoizedFormContext;
         }

package/lib/components/fields/CondensedObjectField.js

@@ -156,7 +156,7 @@ class CondensedObjectField extends React.Component {
                     React.createElement(SchemaField, Object.assign({}, this.props, props, { key: idx, onChange: this.onFieldChange(idx) }))),
                 React.createElement("div", { className: "laji-form-field-template-buttons" },
                     React.createElement(components_1.DeleteButton, { id: props.idSchema.$id, onClick: this.onFieldDelete(idx), translations: translations })))),
-            React.createElement(SelectWidget_1.default, { key: childProps.length, options: { enumOptions: selectableFieldEnums, placeholder: addFieldPlaceholder }, onChange: this.onSelectFieldChange, includeEmpty: true, schema: {}, id: `${idSchema.$id}_field_select`, formContext: this.props.formContext })));
+            React.createElement(SelectWidget_1.default, { key: childProps.length, options: { enumOptions: selectableFieldEnums, placeholder: addFieldPlaceholder }, onChange: this.onSelectFieldChange, includeEmpty: true, schema: {}, id: `${idSchema.$id}_field_select`, formContext: this.props.formContext, disabled: this.props.disabled, readonly: this.props.readonly })));
     }
 }
 exports.default = CondensedObjectField;

package/lib/components/fields/MultiActiveArrayField.d.ts

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { FieldProps, JSONSchemaObject } from "src/types";
+import * as PropTypes from "prop-types";
+interface State {
+    activeIdx: number[];
+}
+export default class MultiActiveArrayField extends React.Component<FieldProps<JSONSchemaObject>, State> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                renderer: PropTypes.Requireable<string>;
+                activeIdx: PropTypes.Requireable<(number | null | undefined)[]>;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<any[]>;
+    };
+    deleteButtonRefs: {};
+    deleteButtonRefSetters: {};
+    constructor(props: FieldProps<JSONSchemaObject>);
+    getInitialActiveIdx: (props: FieldProps<JSONSchemaObject>) => number[];
+    getStateFromProps(props: FieldProps<JSONSchemaObject>): State | null;
+    render(): JSX.Element;
+    onActiveChange: (idx: number, prop?: string | undefined, callback?: (() => void) | undefined) => void;
+    onDelete: (item: any) => (e: any) => void;
+    buttonDefinitions: {
+        add: {
+            callback: () => void;
+        };
+        addPredefined: {
+            callback: () => void;
+        };
+        copy: {
+            fn: () => (...params: any[]) => void;
+            callback: () => void;
+            rules: {
+                minLength: number;
+            };
+        };
+    };
+}
+export {};

package/lib/components/fields/MultiActiveArrayField.js

@@ -0,0 +1,152 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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 __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+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 BaseComponent_1 = __importDefault(require("../BaseComponent"));
+const React = __importStar(require("react"));
+const ReactContext_1 = __importDefault(require("../../ReactContext"));
+const PropTypes = __importStar(require("prop-types"));
+const utils_1 = require("../../utils");
+const deepmerge_1 = __importDefault(require("deepmerge"));
+const ArrayFieldTemplate_1 = require("../templates/ArrayFieldTemplate");
+const ArrayField_1 = require("./ArrayField");
+const SingleActiveArrayField_1 = require("./SingleActiveArrayField");
+let MultiActiveArrayField = class MultiActiveArrayField extends React.Component {
+    constructor(props) {
+        super(props);
+        // these are required by the AccordionArrayFieldTemplate
+        this.deleteButtonRefs = {};
+        this.deleteButtonRefSetters = {};
+        this.getInitialActiveIdx = (props) => {
+            const { formData } = props;
+            const formDataLength = (formData || []).length;
+            return [...Array(formDataLength).keys()];
+        };
+        this.onActiveChange = (idx, prop, callback) => {
+            let newActiveIdx;
+            if (this.state.activeIdx.includes(idx)) {
+                newActiveIdx = this.state.activeIdx.filter(i => i !== idx);
+            }
+            else {
+                newActiveIdx = [...this.state.activeIdx, idx];
+            }
+            this.setState({ activeIdx: newActiveIdx }, callback);
+        };
+        this.onDelete = (item) => (e) => {
+            const idx = item.index;
+            const newActiveIdx = this.state.activeIdx.filter(i => i !== idx).map(i => i > idx ? i - 1 : i);
+            this.setState({ activeIdx: newActiveIdx });
+            item.onDropIndexClick(item.index)(e);
+        };
+        this.buttonDefinitions = {
+            add: {
+                callback: () => this.onActiveChange((this.props.formData || []).length)
+            },
+            addPredefined: {
+                callback: () => this.onActiveChange((this.props.formData || []).length)
+            },
+            copy: {
+                fn: () => (...params) => {
+                    const { formData = [] } = this.props;
+                    const idx = this.state.activeIdx.length > 0 ?
+                        this.state.activeIdx[this.state.activeIdx.length - 1] :
+                        formData.length - 1;
+                    ArrayFieldTemplate_1.beforeAdd(this.props, idx + 1);
+                    this.props.onChange([
+                        ...formData.slice(0, idx + 1),
+                        ArrayField_1.copyItemFunction(this, formData[idx])(...params),
+                        ...formData.slice(idx + 1)
+                    ]);
+                },
+                callback: () => {
+                    const idx = this.state.activeIdx !== undefined ?
+                        this.state.activeIdx[this.state.activeIdx.length - 1] :
+                        (this.props.formData || []).length - 1;
+                    this.onActiveChange(idx + 1);
+                },
+                rules: {
+                    minLength: 1
+                }
+            }
+        };
+        this.deleteButtonRefs = {};
+        this.deleteButtonRefSetters = {};
+        this.state = Object.assign({ activeIdx: this.getInitialActiveIdx(props) }, this.getStateFromProps(props));
+    }
+    getStateFromProps(props) {
+        let activeIdx;
+        const options = utils_1.getUiOptions(props.uiSchema);
+        if ("activeIdx" in options) {
+            activeIdx = options.activeIdx;
+        }
+        else if ((props.formData || []).length > 0 && (this.props.formData || []).length === 0) {
+            activeIdx = [...Array((props.formData || []).length).keys()];
+        }
+        if (!activeIdx && this.props && props.idSchema.$id !== this.props.idSchema.$id) {
+            activeIdx = this.getInitialActiveIdx(props);
+        }
+        return activeIdx ? { activeIdx } : null;
+    }
+    render() {
+        const { renderer = "accordion" } = utils_1.getUiOptions(this.props.uiSchema);
+        let ArrayFieldTemplate = undefined;
+        switch (renderer) {
+            case "accordion":
+                ArrayFieldTemplate = SingleActiveArrayField_1.AccordionArrayFieldTemplate;
+                break;
+            default:
+                throw new Error(`Unknown renderer '${renderer}' for MultiActiveArrayField`);
+        }
+        const formContext = Object.assign(Object.assign({}, this.props.formContext), { this: this, activeIdx: this.state.activeIdx });
+        const { registry: { fields: { ArrayField } } } = this.props;
+        const { buttons = [], buttonDefinitions } = utils_1.getUiOptions(this.props.uiSchema);
+        let uiSchema = Object.assign(Object.assign({}, this.props.uiSchema), { "ui:field": undefined, "ui:classNames": undefined, "ui:options": Object.assign(Object.assign({}, utils_1.getUiOptions(this.props.uiSchema)), { buttons, buttonDefinitions: buttonDefinitions
+                    ? deepmerge_1.default(this.buttonDefinitions, buttonDefinitions)
+                    : this.buttonDefinitions }) });
+        uiSchema["ui:ArrayFieldTemplate"] = ArrayFieldTemplate;
+        return (React.createElement(ArrayField, Object.assign({}, this.props, { formContext: formContext, registry: Object.assign(Object.assign({}, this.props.registry), { formContext }), schema: this.props.schema, uiSchema: uiSchema, idSchema: this.props.idSchema, errorSchema: this.props.errorSchema, onChange: this.props.onChange, onBlur: this.props.onBlur, onFocus: this.props.onFocus, disabled: this.props.disabled, readonly: this.props.readonly, name: this.props.name })));
+    }
+};
+MultiActiveArrayField.contextType = ReactContext_1.default;
+MultiActiveArrayField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            renderer: PropTypes.oneOf(["accordion"]),
+            activeIdx: PropTypes.arrayOf(PropTypes.number)
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array"])
+    }).isRequired,
+    formData: PropTypes.array
+};
+MultiActiveArrayField = __decorate([
+    BaseComponent_1.default
+], MultiActiveArrayField);
+exports.default = MultiActiveArrayField;

package/lib/components/fields/SchemaField.js

@@ -77,7 +77,7 @@ class _SchemaField extends React.Component {
         return Object.assign(Object.assign({}, _props), { uiSchema: Object.assign(Object.assign({}, _props.uiSchema), { "ui:functions": restUiFns }) });
     }
     render() {
-        var _a;
+        var _a, _b;
         const props = this.applyFunction(this.props);
         let { schema, uiSchema = {}, formContext, registry } = props, _props = __rest(props, ["schema", "uiSchema", "formContext", "registry"]); // eslint-disable-line @typescript-eslint/no-unused-vars
         const { formContext: _formContext } = registry;
@@ -105,6 +105,11 @@ class _SchemaField extends React.Component {
                 registry = Object.assign(Object.assign({}, registry), { formContext: Object.assign(Object.assign({}, _formContext), { formDataTransformers: filtered }) });
             }
         }
+        const idPointer = props.idSchema.$id ? utils_1.idSchemaIdToJSONPointer(props.idSchema.$id) : undefined;
+        if (idPointer && ((_b = _formContext.uiSchemaContext.additionalClassNames) === null || _b === void 0 ? void 0 : _b[idPointer])) {
+            const additionalClassNames = _formContext.uiSchemaContext.additionalClassNames[idPointer];
+            uiSchema = Object.assign(Object.assign({}, uiSchema), { "ui:classNames": utils_1.classNames(uiSchema["ui:classNames"], additionalClassNames) });
+        }
         const { SchemaField } = core_1.getDefaultRegistry().fields;
         return React.createElement(SchemaField, Object.assign({}, _props, { registry: registry, schema: schema, uiSchema: uiSchema }));
     }

package/lib/components/fields/SingleActiveArrayField.d.ts

@@ -26,7 +26,6 @@ export default class SingleActiveArrayField extends React.Component<any, any, an
     localContextKey: any;
     localContext: any;
     updateRenderingMode: (normalRendering: any, callback: any) => void;
-    getPopupDataPromise: (idx: any, props: any, itemFormData: any) => Promise<any>;
     onActiveChange: (idx: any, prop: any, callback: any) => void;
     onDelete: (item: any) => (e: any) => void;
     buttonDefinitions: {
@@ -45,5 +44,14 @@ export default class SingleActiveArrayField extends React.Component<any, any, an
         };
     };
 }
+export class AccordionArrayFieldTemplate extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    setHeaderRef: (elem: any) => void;
+    headerRef: any;
+    onSelect: (key: any) => void;
+    setDeleteButtonRef: (idx: any) => (elem: any) => void;
+}
 import * as React from "react";
 import * as PropTypes from "prop-types";