@luomus/laji-form 15.1.12 → 15.1.14

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

@@ -102,6 +102,7 @@ export declare function MediaArrayField<LFC extends Constructor<React.Component<
         }) => void;
         getMetadataPromise: () => Promise<MediaMetadataSchema>;
         getMaxFileSizeAsString: () => string;
+        getAllowedMediaFormatsTranslationKey: () => "AllowedFileFormat" | "AllowedFileFormats";
         getAllowedMediaFormatsAsString: () => string;
         context: any;
         setState<K extends keyof MediaArrayState>(state: MediaArrayState | ((prevState: Readonly<MediaArrayState>, props: Readonly<FieldProps>) => MediaArrayState | Pick<MediaArrayState, K> | null) | Pick<MediaArrayState, K> | null, callback?: (() => void) | undefined): void;

package/lib/components/fields/ImageArrayField.js

@@ -421,6 +421,9 @@ function MediaArrayField(ComposedComponent) {
                 let maxSize = this.MAX_FILE_SIZE.toString().substring(0, this.MAX_FILE_SIZE.toString().length - 6);
                 return maxSize + " " + `${this.props.formContext.translations.Mb}`;
             };
+            this.getAllowedMediaFormatsTranslationKey = () => {
+                return this.ALLOWED_FILE_TYPES.length === 1 ? "AllowedFileFormat" : "AllowedFileFormats";
+            };
             this.getAllowedMediaFormatsAsString = () => {
                 let formats = "";
                 for (let i = 0; i < this.ALLOWED_FILE_TYPES.length; i++) {
@@ -492,7 +495,7 @@ function MediaArrayField(ComposedComponent) {
                     translations.DropOrSelectFiles,
                     ". "),
                 React.createElement("span", null,
-                    translations.AllowedFileFormats,
+                    translations[this.getAllowedMediaFormatsTranslationKey()],
                     " ",
                     this.getAllowedMediaFormatsAsString(),
                     " ",
@@ -561,7 +564,7 @@ function MediaArrayField(ComposedComponent) {
                     return body;
                 }, new FormData());
                 if (noValidData && invalidFile) {
-                    fail("AllowedFileFormats", this.getAllowedMediaFormatsAsString() + ".");
+                    fail(this.getAllowedMediaFormatsTranslationKey(), this.getAllowedMediaFormatsAsString() + ".");
                     return;
                 }
                 else if (noValidData && fileTooLarge) {

package/lib/components/fields/MapArrayField.js

@@ -35,6 +35,7 @@ const NestField_1 = require("./NestField");
 const ArrayFieldTemplate_1 = require("../templates/ArrayFieldTemplate");
 const ArrayField_1 = require("./ArrayField");
 const utils_3 = require("@rjsf/utils");
+const utils_4 = require("@luomus/laji-map/lib/utils");
 function parseGeometries(geometry) {
     return ((geometry && geometry.type === "GeometryCollection") ? geometry.geometries : [geometry])
         .filter(geometry => geometry)
@@ -594,6 +595,7 @@ let LineTransectMapArrayField = class LineTransectMapArrayField extends React.Co
             });
             const afterState = () => {
                 if (formDataChanged) {
+                    formData = syncLineTransectStartEnd(formData);
                     this.props.onChange(addOrDelete ? ArrayField_1.onArrayFieldChange(formData, this.props) : formData);
                 }
                 if ("activeIdx" in state) {
@@ -635,6 +637,7 @@ let LineTransectMapArrayField = class LineTransectMapArrayField extends React.Co
             });
         };
         this.state = { showLTTools: false };
+        this.props.onChange(syncLineTransectStartEnd(this.props.formData));
     }
     getOptions() {
         const { formData, disabled, readonly } = this.props;
@@ -1781,3 +1784,20 @@ const getFeatureStyleWithHighlight = style => {
     return Object.assign(Object.assign({}, style), { color, fillOpacity: saneOpacityRange(style.fillOpacity || 0.4 + 0.4) });
 };
 exports.getFeatureStyleWithHighlight = getFeatureStyleWithHighlight;
+const syncLineTransectStartEnd = (formData) => {
+    const lineTransectFeature = Object.keys((formData || [])[0].geometry || {}).length
+        ? { type: "Feature", properties: {}, geometry: { type: "MultiLineString", coordinates: formData.map(item => item.geometry.coordinates) } }
+        : undefined;
+    if (lineTransectFeature) {
+        return formData.map((item, idx) => {
+            const [start, end] = utils_4.getLineTransectStartEndDistancesForIdx(lineTransectFeature, idx, 10);
+            if (!item.gatheringFact) {
+                item.gatheringFact = {};
+            }
+            item.gatheringFact.lineTransectSegmentMetersStart = start;
+            item.gatheringFact.lineTransectSegmentMetersEnd = end;
+            return Object.assign(Object.assign({}, item), { gatheringFact: Object.assign(Object.assign({}, (item.gatheringFact || {})), { lineTransectSegmentMetersStart: start, lineTransectSegmentMetersEnd: end }) });
+        });
+    }
+    return formData;
+};

package/lib/components/fields/MultiTagArrayField.js

@@ -51,11 +51,11 @@ let MultiTagArrayField = class MultiTagArrayField extends React.Component {
             }
         });
         this.onTagClick = memoize((fromField) => (idx, e) => {
-            e.preventDefault();
             const { activeButtonIdx } = this.state;
             if (activeButtonIdx === undefined) {
                 return;
             }
+            e.preventDefault();
             const { buttons = [] } = utils_1.getUiOptions(this.props.uiSchema);
             const options = buttons[activeButtonIdx];
             const { operation } = options;

package/lib/components/fields/SingleActiveArrayField.js

@@ -29,8 +29,7 @@ const ArrayField_1 = require("./ArrayField");
 const Context_1 = require("../../Context");
 const ReactContext_1 = require("../../ReactContext");
 const BaseComponent_1 = require("../BaseComponent");
-const utils_3 = require("@luomus/laji-map/lib/utils");
-const utils_4 = require("@rjsf/utils");
+const utils_3 = require("@rjsf/utils");
 const memoize = require("memoizee");
 const ArrayField_2 = require("./ArrayField");
 const popupMappers = {
@@ -504,8 +503,8 @@ let UncontrolledArrayFieldTemplate = class UncontrolledArrayFieldTemplate extend
         const that = this.props.formContext.this;
         const arrayTemplateFieldProps = this.props;
         const activeIdx = that.state.activeIdx;
-        const TitleFieldTemplate = utils_4.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
-        const DescriptionFieldTemplate = utils_4.getTemplate("DescriptionFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
+        const TitleFieldTemplate = utils_3.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
+        const DescriptionFieldTemplate = utils_3.getTemplate("DescriptionFieldTemplate", this.props.registry, utils_1.getUiOptions(this.props.uiSchema));
         const { Label } = this.props.formContext;
         const Title = utils_1.getUiOptions(that.props.uiSchema).renderTitleAsLabel ? Label : TitleFieldTemplate;
         const title = utils_1.getTitle(this.props, activeIdx);
@@ -700,8 +699,8 @@ let TableArrayFieldTemplate = class TableArrayFieldTemplate extends React.Compon
             return React.createElement(ArrayFieldTemplate_1.default, Object.assign({}, this.props));
         }
         const { schema, uiSchema = {}, formData = [], items, disabled, readonly } = this.props;
-        const TitleFieldTemplate = utils_4.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(uiSchema));
-        const DescriptionFieldTemplate = utils_4.getTemplate("DescriptionFieldTemplate", this.props.registry, utils_1.getUiOptions(uiSchema));
+        const TitleFieldTemplate = utils_3.getTemplate("TitleFieldTemplate", this.props.registry, utils_1.getUiOptions(uiSchema));
+        const DescriptionFieldTemplate = utils_3.getTemplate("DescriptionFieldTemplate", this.props.registry, utils_1.getUiOptions(uiSchema));
         const { renderTitleAsLabel, formatters = {}, shownColumns = [], removable = true } = utils_1.getUiOptions(uiSchema);
         const { Label } = this.props.formContext;
         const Title = renderTitleAsLabel ? Label : TitleFieldTemplate;
@@ -874,12 +873,8 @@ const headerFormatters = {
     },
     lineTransect: {
         component: (props) => {
-            let start, end;
-            const lineTransectFeature = Object.keys((props.that.props.formData || [])[0].geometry || {}).length
-                ? { type: "Feature", properties: {}, geometry: { type: "MultiLineString", coordinates: props.that.props.formData.map(item => item.geometry.coordinates) } }
-                : undefined;
-            if (lineTransectFeature)
-                [start, end] = utils_3.getLineTransectStartEndDistancesForIdx(lineTransectFeature, props.idx, 10);
+            const item = props.that.props.formData[props.idx];
+            const [start, end] = [item.gatheringFact.lineTransectSegmentMetersStart, item.gatheringFact.lineTransectSegmentMetersEnd];
             return props.idx !== undefined && end ? React.createElement("span", { className: "text-muted" }, `${start}-${end}m`) : null;
         }
     },

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

@@ -4,6 +4,12 @@ export default class TagArrayField extends React.Component<any, any, any> {
             "ui:options": PropTypes.Requireable<PropTypes.InferProps<{
                 separatorKeys: PropTypes.Requireable<(string | null | undefined)[]>;
                 showDeleteButton: PropTypes.Requireable<boolean>;
+                showAsLink: PropTypes.Requireable<boolean>;
+                linkPrefix: PropTypes.Requireable<string>;
+                replacements: PropTypes.Requireable<(PropTypes.InferProps<{
+                    searchRegexp: PropTypes.Validator<string>;
+                    replaceValue: PropTypes.Validator<string>;
+                }> | null | undefined)[]>;
             }>>;
         }>>;
         schema: PropTypes.Validator<PropTypes.InferProps<{
@@ -31,7 +37,7 @@ export class TagInputComponent extends React.Component<any, any, any> {
     onClick: () => void;
     onInputChange: (e: any) => void;
     onTagClick: ((idx: any) => (e: any) => void) & memoize.Memoized<(idx: any) => (e: any) => void>;
-    getTrimmedValue(): any;
+    processValue(value: any): any;
 }
 import * as React from "react";
 import * as PropTypes from "prop-types";

package/lib/components/fields/TagArrayField.js

@@ -25,7 +25,13 @@ TagArrayField.propTypes = {
     uiSchema: PropTypes.shape({
         "ui:options": PropTypes.shape({
             separatorKeys: PropTypes.arrayOf(PropTypes.string),
-            showDeleteButton: PropTypes.bool
+            showDeleteButton: PropTypes.bool,
+            showAsLink: PropTypes.bool,
+            linkPrefix: PropTypes.string,
+            replacements: PropTypes.arrayOf(PropTypes.shape({
+                searchRegexp: PropTypes.string.isRequired,
+                replaceValue: PropTypes.string.isRequired
+            }))
         })
     }),
     schema: PropTypes.shape({
@@ -48,7 +54,7 @@ class TagInputComponent extends React.Component {
             return separatorKeys;
         };
         this.onKeyDown = (e) => {
-            const value = this.getTrimmedValue();
+            const value = this.processValue(this.state.value);
             const { tags = [] } = this.props;
             const separatorKeys = this.getSeparatorKeys(this.props.uiSchema);
             if (separatorKeys.includes(e.key) && !utils_1.isEmptyString(value)) {
@@ -74,7 +80,7 @@ class TagInputComponent extends React.Component {
         this.onBlur = (e) => {
             this.setState({ focused: false });
             utils_1.triggerParentComponent("onBlur", e, this.props);
-            const value = this.getTrimmedValue();
+            const value = this.processValue(this.state.value);
             if (!utils_1.isEmptyString(value)) {
                 this.props.onChange([...(this.props.tags || []), value], "blur");
             }
@@ -90,7 +96,7 @@ class TagInputComponent extends React.Component {
             onInputChange && e.persist();
             const { target: { value } } = e;
             const separatorKeys = this.getSeparatorKeys(this.props.uiSchema);
-            const splitted = separatorKeys.reduce((splitted, separator) => splitted.reduce((_splitted, i) => ([..._splitted, ...i.split(separator)]), []), [value]).map(s => s.trim()).filter(s => !utils_1.isEmptyString(s));
+            const splitted = separatorKeys.reduce((splitted, separator) => splitted.reduce((_splitted, i) => ([..._splitted, ...i.split(separator)]), []), [value]).map(s => this.processValue(s)).filter(s => !utils_1.isEmptyString(s));
             this.setState({ value }, () => {
                 onInputChange && this.props.onInputChange(e);
                 if (splitted.length > 1) {
@@ -107,9 +113,16 @@ class TagInputComponent extends React.Component {
     UNSAFE_componentWillReceiveProps(props) {
         this.setState(this.getStateFromProps(props));
     }
-    getTrimmedValue() {
-        const { value } = this.state;
-        return value === null || value === void 0 ? void 0 : value.trim();
+    processValue(value) {
+        if (!value) {
+            return value;
+        }
+        value = value.trim();
+        const { replacements = [] } = utils_1.getUiOptions(this.props.uiSchema);
+        replacements.forEach(replacement => {
+            value = value.replace(new RegExp(replacement.searchRegexp), replacement.replaceValue);
+        });
+        return value;
     }
     render() {
         let { tags = [], InputComponent, readonly, disabled, uiSchema } = this.props;

package/lib/themes/bs5.js

@@ -62,6 +62,12 @@ _Dropdown.Toggle = React.forwardRef((_a, ref) => {
     var { variant } = _a, props = __rest(_a, ["variant"]);
     return (React.createElement(react_bootstrap_5_1.Dropdown.Toggle, Object.assign({ variant: mapVariant(variant) }, props, { ref: ref })));
 });
+const _Popover = React.forwardRef((_a, ref) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (React.createElement(react_bootstrap_5_1.Popover, Object.assign({}, props, { ref: ref }),
+        props.title ? React.createElement(react_bootstrap_5_1.Popover.Header, null, props.title) : null,
+        React.createElement(react_bootstrap_5_1.Popover.Body, null, children)));
+});
 const theme = {
     Panel,
     Table: react_bootstrap_5_1.Table,
@@ -74,7 +80,7 @@ const theme = {
     ButtonToolbar: react_bootstrap_5_1.ButtonToolbar,
     Overlay: React.forwardRef((props, ref) => React.createElement(react_bootstrap_5_1.Overlay, Object.assign({}, props, { ref: ref }))),
     OverlayTrigger: (props) => React.createElement(react_bootstrap_5_1.OverlayTrigger, Object.assign({}, props)),
-    Popover: react_bootstrap_5_1.Popover,
+    Popover: _Popover,
     Tooltip: react_bootstrap_5_1.Tooltip,
     Glyphicon,
     Modal: _Modal,

package/lib/translations.json

@@ -225,29 +225,34 @@
         "sv": "Mb"
     },
     "allowedFileFormats": {
-        "fi": "Sallitut kuvaformaatit ovat",
-        "en": "Allowed image formats are",
-        "sv": "Tillåtna filformat för bilderna är"
+        "fi": "Sallitut tiedostoformaatit ovat",
+        "en": "Allowed file formats are",
+        "sv": "Tillåtna filformat är"
+    },
+    "allowedFileFormat": {
+        "fi": "Sallittu tiedostoformaatti on",
+        "en": "Allowed file format is",
+        "sv": "Tillåtet filformat är"
     },
     "allowedFileSize": {
-        "fi": "Kuvan suurin sallittu koko on",
+        "fi": "Tiedoston suurin sallittu koko on",
         "en": "The maximum allowed file size is",
-        "sv": "Den största tillåtna storleken på en bild är"
+        "sv": "Den största tillåtna filstorleken är"
     },
     "invalidFile": {
-        "fi": "Kuvatiedosto oli virheellinen.",
+        "fi": "Tiedosto oli virheellinen.",
         "en": "The file was invalid.",
         "sv": "Filen var ogiltig."
     },
     "insufficientSpace": {
-        "fi": "Kuvapalvelin ei pysty käsittelemään latauspyyntöä riittämättömän levytilan vuoksi.",
-        "en": "The image server can't process the upload request because of insufficient space.",
-        "sv": "Bildservern kan inte bearbeta uppladdnings begäran på grund av otillräckligt utrymme."
+        "fi": "Mediapalvelin ei pysty käsittelemään latauspyyntöä riittämättömän levytilan vuoksi.",
+        "en": "The media server can't process the upload request because of insufficient space.",
+        "sv": "Mediaservern kan inte bearbeta uppladdnings begäran på grund av otillräckligt utrymme."
     },
     "filesLengthDiffer": {
-        "fi": "Kaikki kuvat eivät tallentuneet. Tarkista kuvat.",
-        "en": "All the images weren't saved. Please verify the images.",
-        "sv": "Alla bilder sparades inte. Vänligen kontrollera bilderna."
+        "fi": "Kaikki tiedostot eivät tallentuneet. Tarkista tiedostot.",
+        "en": "All the files weren't saved. Please verify the files.",
+        "sv": "Alla filer sparades inte. Vänligen kontrollera filerna."
     },
     "error": {
         "fi": "Virhe",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.12",
+  "version": "15.1.14",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",