@luomus/laji-form 14.3.6

package/lib/components/fields/ArrayField.js

@@ -0,0 +1,148 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ArrayFieldPatched = exports.onArrayFieldChange = exports.copyItemFunction = void 0;
+const React = require("react");
+const merge = require("deepmerge");
+const utils_1 = require("../../utils");
+const BaseComponent_1 = require("../BaseComponent");
+const ArrayFieldTemplate_1 = require("../templates/ArrayFieldTemplate");
+const ReactContext_1 = require("../../ReactContext");
+const core_1 = require("@rjsf/core");
+// Doesn't work with arrays properly since uses JSON Pointers but not JSON path.
+// e.g. "copy all array item values expect these" is impossible.
+const copyItemFunction = (that, copyItem) => (props, { type, filter }) => {
+    const { schema, registry, formContext } = that.props;
+    const defaultItem = utils_1.getDefaultFormState(schema.items, undefined);
+    copyItem = formContext.utils.filterItemIdsDeeply(copyItem, that.props.idSchema.$id);
+    const source = type === "blacklist" ? defaultItem : copyItem;
+    const filtered = filter.sort().reverse().reduce((target, f) => {
+        let sourceValue;
+        try {
+            sourceValue = utils_1.parseJSONPointer(source, f);
+        }
+        catch (e) {
+            const schema = utils_1.schemaJSONPointer(schema.items, f);
+            sourceValue = utils_1.getDefaultFormState(schema, undefined);
+        }
+        return utils_1.updateFormDataWithJSONPointer({ schema: schema.items, formData: target, registry }, sourceValue, f);
+    }, type === "blacklist" ? copyItem : defaultItem);
+    const tmpIdTree = that.props.formContext.services.ids.getRelativeTmpIdTree(props.idSchema.$id);
+    return utils_1.addLajiFormIds(filtered, tmpIdTree, false)[0];
+};
+exports.copyItemFunction = copyItemFunction;
+function onArrayFieldChange(formData, props) {
+    const tmpIdTree = props.formContext.services.ids.getRelativeTmpIdTree(props.idSchema.$id);
+    return utils_1.addLajiFormIds(formData, tmpIdTree, false)[0];
+}
+exports.onArrayFieldChange = onArrayFieldChange;
+const { ArrayField } = core_1.getDefaultRegistry().fields;
+class ArrayFieldPatched extends ArrayField {
+    constructor(...params) {
+        super(...params);
+        const { _getNewFormDataRow } = this;
+        this._getNewFormDataRow = () => {
+            const tmpIdTree = this.props.formContext.services.ids.getRelativeTmpIdTree(this.props.idSchema.$id);
+            const [item] = utils_1.addLajiFormIds(_getNewFormDataRow.call(this), tmpIdTree, false);
+            return item;
+        };
+        const { onDropIndexClick } = this;
+        this.onDropIndexClick = (index) => (event) => {
+            const item = this.props.formData[index];
+            const tmpIdTree = this.props.formContext.services.ids.getRelativeTmpIdTree(`${this.props.idSchema.$id}_${index}`);
+            const oldIds = utils_1.getAllLajiFormIdsDeeply(item, tmpIdTree);
+            Object.keys(oldIds).forEach((id) => {
+                return this.props.formContext.services.submitHooks.remove(id);
+            }, []);
+            onDropIndexClick.call(this, index)(event);
+        };
+    }
+    renderArrayFieldItem(props) {
+        // rjsf@5 started rendering array items with titles as "name-idx" - we don't want that.
+        if (typeof props.name === "string") {
+            props.name = undefined;
+        }
+        if (this.props.idSchema) {
+            const idSchema = this.getIdSchema(this.props, props.index);
+            return super.renderArrayFieldItem(Object.assign(Object.assign({}, props), { itemIdSchema: idSchema }));
+        }
+        return super.renderArrayFieldItem(props);
+    }
+    getIdSchema(props, _index) {
+        const { idSchema } = props;
+        const index = utils_1.getFormDataIndex(_index, props.uiSchema);
+        const root = idSchema.$id;
+        const reduced = (idSchema, root) => Object.keys(idSchema).reduce((idSchema, prop) => {
+            if (prop === "$id") {
+                return Object.assign(Object.assign({}, idSchema), { "$id": idSchema.$id.replace(root, `${root}_${index}`) });
+            }
+            return Object.assign(Object.assign({}, idSchema), { [prop]: reduced(idSchema[prop], root) });
+        }, idSchema);
+        return reduced(idSchema, root);
+    }
+}
+exports.ArrayFieldPatched = ArrayFieldPatched;
+let _ArrayField = class _ArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onChange = (formData) => {
+            this.props.onChange(onArrayFieldChange(formData, this.props));
+        };
+        this.buttonDefinitions = {
+            copy: {
+                glyph: "duplicate",
+                fn: () => (...params) => {
+                    ArrayFieldTemplate_1.beforeAdd(this.props);
+                    this.onChange([
+                        ...this.props.formData,
+                        exports.copyItemFunction(this, this.props.formData[this.props.formData.length - 1])(...params)
+                    ]);
+                },
+                rules: {
+                    minLength: 1,
+                    canAdd: true
+                },
+                changesFormData: true
+            },
+            addPredefined: {
+                fn: () => (onClickProps, { default: _default }) => {
+                    ArrayFieldTemplate_1.beforeAdd(this.props);
+                    this.onChange([
+                        ...(this.props.formData || []),
+                        utils_1.getDefaultFormState(this.props.schema.items, _default)
+                    ]);
+                },
+                rules: {
+                    canAdd: true
+                },
+                changesFormData: true
+            }
+        };
+    }
+    render() {
+        const { props } = this;
+        let { schema } = props;
+        if (props.uiSchema.items && props.uiSchema.items["ui:field"]) {
+            schema = Object.assign(Object.assign({}, schema), { uniqueItems: false });
+        }
+        // MultiArrayField needs to intercept default ArrayField internals, the instance is passed in formContext.
+        const { ArrayField: _ArrayField } = props.formContext;
+        const Component = _ArrayField || ArrayFieldPatched;
+        // Reset formContext.ArrayField
+        const formContext = _ArrayField ? Object.assign(Object.assign({}, props.formContext), { ArrayField: undefined }) : props.formContext;
+        const registry = _ArrayField ? Object.assign(Object.assign({}, props.registry), { formContext }) : props.registry;
+        return React.createElement(Component, Object.assign({}, props, { formContext: formContext, registry: registry, schema: schema, uiSchema: Object.assign(Object.assign({}, props.uiSchema), { "ui:options": Object.assign(Object.assign({ orderable: false }, props.uiSchema["ui:options"]), { buttonDefinitions: utils_1.getUiOptions(props.uiSchema).buttonDefinitions
+                        ? merge(this.buttonDefinitions, utils_1.getUiOptions(props.uiSchema).buttonDefinitions)
+                        : this.buttonDefinitions }) }), onChange: this.onChange }));
+    }
+};
+_ArrayField.contextType = ReactContext_1.default;
+_ArrayField = __decorate([
+    BaseComponent_1.default
+], _ArrayField);
+exports.default = _ArrayField;

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

@@ -0,0 +1,22 @@
+export default class AudioArrayField extends React.Component<any, any, any> {
+    static contextType: React.Context<import("../../ReactContext").ContextProps>;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    ALLOWED_FILE_TYPES: string[];
+    ACCEPT_FILE_TYPES: string[];
+    MAX_FILE_SIZE: number;
+    KEY: string;
+    ENDPOINT: string;
+    GLYPH: string;
+    TRANSLATION_TAKE_NEW: string;
+    TRANSLATION_SELECT_FILE: string;
+    TRANSLATION_NO_MEDIA: string;
+    CONTAINER_CLASS: string;
+    METADATA_FORM_ID: string;
+    renderMedia: (id: any, idx: any) => JSX.Element;
+    renderLoadingMedia: () => null;
+    onMediaClick: () => null;
+    renderModalMedia: (idx: any) => JSX.Element;
+    formatValue: (value: any) => any;
+}
+import * as React from "react";

package/lib/components/fields/AudioArrayField.js

@@ -0,0 +1,100 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const { useState, useEffect } = React;
+const ImageArrayField_1 = require("./ImageArrayField");
+const Spinner = require("react-spinner");
+const components_1 = require("../components");
+const ReactContext_1 = require("../../ReactContext");
+const FILE_TYPES = ["audio/mp3", "audio/mpeg", "audio/x-wav", "audio/wav", "audio/wave", "audio/vnd.wave"];
+let AudioArrayField = class AudioArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.ALLOWED_FILE_TYPES = FILE_TYPES;
+        this.ACCEPT_FILE_TYPES = ["audio/*"];
+        this.MAX_FILE_SIZE = 20000000;
+        this.KEY = "AUDIO";
+        this.ENDPOINT = "audio";
+        this.GLYPH = "headphones";
+        this.TRANSLATION_TAKE_NEW = "TakeNewRecording";
+        this.TRANSLATION_SELECT_FILE = "SelectRecording";
+        this.TRANSLATION_NO_MEDIA = "NoRecording";
+        this.CONTAINER_CLASS = "audios-container";
+        this.METADATA_FORM_ID = "MHL.63";
+        this.renderMedia = (id, idx) => (React.createElement("div", { className: "audio-container" },
+            React.createElement(AudioButton, { id: id, idx: idx, apiClient: this.props.formContext.apiClient, translations: this.props.formContext.translations }),
+            React.createElement(components_1.GlyphButton, { className: "audio-metadata-button", variant: "info", glyph: "pencil", onClick: this.openModalFor(idx) },
+                " ",
+                this.props.formContext.translations.Edit)));
+        this.renderLoadingMedia = () => null;
+        this.renderLoadingMedia = () => React.createElement("div", { className: "audio-container loading" },
+            React.createElement(Spinner, null));
+        this.onMediaClick = () => null;
+        this.renderModalMedia = (idx) => (React.createElement("div", null,
+            React.createElement("img", { src: this.state.modalMediaSrc }),
+            React.createElement(LajiAudio, { id: this.props.formData[idx], style: { width: "100%" }, apiClient: this.props.formContext.apiClient, downloadLinks: true, translations: this.props.formContext.translations })));
+        this.formatValue = (value) => {
+            const { Glyphicon } = this.context.theme;
+            return (value || []).map((id, idx) => React.createElement(Glyphicon, { key: idx, glyph: "headphones" }));
+        };
+    }
+};
+AudioArrayField.contextType = ReactContext_1.default;
+AudioArrayField = __decorate([
+    ImageArrayField_1.MediaArrayField
+], AudioArrayField);
+exports.default = AudioArrayField;
+const AudioButton = React.forwardRef((props, ref) => {
+    const [loaded, setLoaded] = useState(null);
+    const [playing, setPlaying] = useState(null);
+    const audioRef = React.useRef();
+    const play = React.useCallback(() => {
+        setPlaying(true);
+        audioRef.current.play();
+    }, [audioRef, setPlaying]);
+    const stop = React.useCallback(() => {
+        audioRef.current.pause();
+        audioRef.current.currentTime = 0;
+        setPlaying(false);
+    }, [audioRef, setPlaying]);
+    const onKeyDown = React.useCallback((e) => {
+        if (e.key === " ") {
+            playing ? stop() : play();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }, [playing, stop, play]);
+    const { Glyphicon } = React.useContext(ReactContext_1.default).theme;
+    return (React.createElement(React.Fragment, null,
+        !loaded
+            ? React.createElement("div", { className: "media-loading" },
+                React.createElement(Spinner, null))
+            : React.createElement(Glyphicon, { glyph: playing ? "pause" : "play", onClick: playing ? stop : play, ref: ref, tabIndex: 0, onKeyDown: onKeyDown }),
+        React.createElement(LajiAudio, { style: { display: "none" }, ref: audioRef, id: props.id, onLoaded: setLoaded, onStop: stop, apiClient: props.apiClient, translations: props.translations })));
+});
+const LajiAudio = React.forwardRef((props, ref) => {
+    const [mp3Url, setMp3Url] = useState(null);
+    const [wavUrl, setWavUrl] = useState(null);
+    useEffect(() => {
+        props.apiClient.fetchCached(`/audio/${props.id}`, undefined, { failSilently: true }).then(response => {
+            setMp3Url(response.mp3URL);
+            setWavUrl(response.wavURL);
+            props.onLoaded && props.onLoaded(true);
+        });
+    });
+    return !mp3Url ? React.createElement(Spinner, { style: props.style }) : (React.createElement("div", null,
+        React.createElement("audio", { controls: true, style: props.style, ref: ref, onPause: props.onStop },
+            React.createElement("source", { src: mp3Url })),
+        props.downloadLinks && (React.createElement(React.Fragment, null,
+            React.createElement("a", { href: mp3Url, download: true }, `${props.translations.Download} mp3`),
+            wavUrl &&
+                React.createElement(React.Fragment, null,
+                    " | ",
+                    React.createElement("a", { href: wavUrl, download: true }, `${props.translations.Download} wav`))))));
+});

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

@@ -0,0 +1,24 @@
+export default class AutoArrayField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Requireable<PropTypes.InferProps<{
+            "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
+                autofocus: any;
+            }>>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Requireable<any[]>;
+    };
+    static getName(): string;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    getStateFromProps(props: any): {
+        formData: any;
+        onChange: (formData: any) => void;
+    };
+    emptyItem: any;
+    onChange: (formData: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";

package/lib/components/fields/AutoArrayField.js

@@ -0,0 +1,56 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const PropTypes = require("prop-types");
+const VirtualSchemaField_1 = require("../VirtualSchemaField");
+const utils_1 = require("../../utils");
+let AutoArrayField = class AutoArrayField extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.onChange = (formData) => {
+            const emptyItem = utils_1.getDefaultFormState(this.props.schema.items);
+            if (formData && formData.length !== 0 && this.props.formContext.utils.formDataEquals(formData[formData.length - 1], emptyItem, this.props.idSchema.$id)) {
+                formData = formData.slice(0, formData.length - 1);
+            }
+            this.props.onChange(formData);
+        };
+    }
+    static getName() { return "AutoArrayField"; }
+    getStateFromProps(props) {
+        const { formData = [], schema, uiSchema, formContext: { utils } } = props;
+        const state = { formData, onChange: this.onChange };
+        const newEmptyItem = utils_1.getDefaultFormState(schema.items);
+        const emptyItem = this.emptyItem
+            && utils.formDataEquals(newEmptyItem, this.emptyItem, props.idSchema.$id)
+            && formData.every(item => utils_1.getUUID(item) !== utils_1.getUUID(this.emptyItem))
+            ? this.emptyItem
+            : utils_1.assignUUID(newEmptyItem);
+        this.emptyItem = emptyItem;
+        if (formData && (formData.length === 0 || !utils.formDataEquals(formData[formData.length - 1], emptyItem, props.idSchema.$id))) {
+            state.formData = [...formData, emptyItem];
+        }
+        state.uiSchema = Object.assign(Object.assign({}, uiSchema), { "ui:options": Object.assign(Object.assign({ canAdd: false }, (uiSchema["ui:options"] || {})), { nonOrderables: [state.formData.length - 1], nonRemovables: [state.formData.length - 1] }) });
+        return state;
+    }
+};
+AutoArrayField.propTypes = {
+    uiSchema: PropTypes.shape({
+        "ui:options": PropTypes.shape({
+            autofocus: PropTypes.boolean
+        })
+    }),
+    schema: PropTypes.shape({
+        type: PropTypes.oneOf(["array"])
+    }).isRequired,
+    formData: PropTypes.array
+};
+AutoArrayField = __decorate([
+    VirtualSchemaField_1.default
+], AutoArrayField);
+exports.default = AutoArrayField;

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

@@ -0,0 +1,69 @@
+/**
+ * Uses AutosuggestWidget to apply autosuggested values to multiple object's fields. Options are passed to AutosuggestWidget.
+ *
+ * uischema = {"ui:options": {
+ *  autosuggestField: <string> (field name which is used for api call. The suggestions renderer method is also defined by autosuggestField)
+ *  suggestionInputField: <fieldName> (the field which is rendered as the autosuggest input)
+ *  suggestionValueField: <fieldName> (the field which the value for autosuggest is pulled from)
+ *  suggestionReceivers: {
+ *    <fieldName>: <suggestion path>,     (when an autosuggestion is selected, these fields receive the autosuggestions value defined by suggestion path.
+ *    <fieldName2>: <suggestion path 2>,   Example: autosuggestion = {key: "MLV.2", value: "kalalokki", payload: {informalGroups: ["linnut"]}}
+ *   }                                              suggestionReceivers: {someFieldName: "key", someFieldName2: "/payload/informalgroups/0"}
+ *                                         If fieldName start  with '$', then a function from autosuggestFieldSettings parses the suggestion. Example: $taxonGroup
+ *                                         If fieldName start  with '/', it is handled as a JSON pointer.
+ *  uiSchema: <uiSchema> (uiSchema which is passed to inner SchemaField)
+ * }
+ */
+export default class AutosuggestField extends React.Component<any, any, any> {
+    static propTypes: {
+        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
+            "ui:options": PropTypes.Validator<PropTypes.InferProps<{
+                autosuggestField: PropTypes.Validator<string>;
+                suggestionInputField: PropTypes.Validator<string>;
+                allowNonsuggestedValue: any;
+                suggestionReceivers: PropTypes.Validator<object>;
+                inputTransformer: PropTypes.Requireable<PropTypes.InferProps<{
+                    regexp: PropTypes.Validator<string>;
+                    transformations: PropTypes.Validator<object>;
+                }>>;
+                informalTaxonGroups: PropTypes.Requireable<string>;
+                informalTaxonGroupPersistenceKey: PropTypes.Requireable<string>;
+            }>>;
+            uiSchema: PropTypes.Requireable<object>;
+        }>>;
+        schema: PropTypes.Validator<PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+        }>>;
+        formData: PropTypes.Validator<object>;
+    };
+    static getName(): string;
+    constructor(props: any);
+    onNextTick: (() => any) | undefined;
+    getTogglePersistenceContextKey: (props: any) => string;
+    getInformalTaxonGroupsPersistenceContextKey: (props: any) => string;
+    getStateFromProps: (props: any, toggled: any) => {
+        schema: any;
+        uiSchema: any;
+        toggled: any;
+        taxonGroupID: any;
+    };
+    getActiveOptions: (options: any, toggled: any) => any;
+    getSuggestionReceiverValue(suggestion: any, suggestionReceiver: any): any;
+    getSuggestionValue: (suggestion: any, def: any) => any;
+    onSuggestionSelected: (suggestion: any, mounted: any) => void;
+    onConfirmUnsuggested: (value: any) => void;
+    onInputChange: ({ target: { value } }: {
+        target: {
+            value: any;
+        };
+    }) => any;
+    isValueSuggested: () => boolean;
+    getSuggestionFromValue: () => Promise<{
+        value: any;
+        key: any;
+    }>;
+    onInformalTaxonGroupSelected: (informalTaxonID: any) => void;
+    onToggleChange: (value: any) => void;
+}
+import * as React from "react";
+import * as PropTypes from "prop-types";