@luomus/laji-form 15.1.10 → 15.1.12

package/dist/styles.css

@@ -3752,7 +3752,7 @@ min-height: 20px;
 .laji-form-multi-tag-array-field-buttons .btn-group-vertical {
 	margin-right: 17px;
 }
-.laji-form-multi-tag-array-field.laji-form-multi-tag-array-field-active .rw-multiselect-tag:hover {
+.laji-form-multi-tag-array-field.laji-form-multi-tag-array-field-active .rw-multiselect-tag:hover, .laji-form-multi-tag-array-field.laji-form-multi-tag-array-field-active .rw-multiselect-tag:hover a {
 	cursor: crosshair;
 }
 .laji-form-multi-tag-array-field-buttons .btn-group-vertical button.active::before {

package/lib/ApiClient.js

@@ -47,6 +47,9 @@ class ApiClient {
             if (!failSilently && response.status >= 400) {
                 throw new Error("Request failed");
             }
+            if (response.status === 204) {
+                return undefined;
+            }
             return response.json();
         }).catch(() => {
             if (this.cache[path])

package/lib/components/fields/ImageArrayField.js

@@ -118,7 +118,7 @@ function MediaArrayField(ComposedComponent) {
                     if (!medias || !medias[item])
                         return null;
                     return (React.createElement("div", { key: i, className: "media-container" },
-                        React.createElement("a", null, this.renderLoadingMedia(medias[item]))));
+                        React.createElement("div", { className: "media-container-link" }, this.renderLoadingMedia(medias[item]))));
                 });
             };
             this.openModalFor = (i) => () => {

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

@@ -31,6 +31,6 @@ export default class MultiTagArrayField extends React.Component<FieldProps, Stat
     render(): JSX.Element;
     onChange: ((key: string) => (formData: any) => void) & memoize.Memoized<(key: string) => (formData: any) => void>;
     onButtonClick: ((idx: number) => () => void) & memoize.Memoized<(idx: number) => () => void>;
-    onTagClick: ((fromField: string) => (idx: number) => void) & memoize.Memoized<(fromField: string) => (idx: number) => void>;
+    onTagClick: ((fromField: string) => (idx: number, e: React.MouseEvent<HTMLButtonElement>) => void) & memoize.Memoized<(fromField: string) => (idx: number, e: React.MouseEvent<HTMLButtonElement>) => void>;
 }
 export {};

package/lib/components/fields/MultiTagArrayField.js

@@ -50,7 +50,8 @@ let MultiTagArrayField = class MultiTagArrayField extends React.Component {
                 this.setState({ activeButtonIdx: idx });
             }
         });
-        this.onTagClick = memoize((fromField) => (idx) => {
+        this.onTagClick = memoize((fromField) => (idx, e) => {
+            e.preventDefault();
             const { activeButtonIdx } = this.state;
             if (activeButtonIdx === undefined) {
                 return;

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

@@ -14,7 +14,7 @@ export default class PdfArrayField extends React.Component<FieldProps, MediaArra
     CONTAINER_CLASS: string;
     METADATA_FORM_ID: string;
     renderMedia: (id: string) => JSX.Element;
-    renderLoadingMedia: (id: string) => JSX.Element;
+    renderLoadingMedia: () => JSX.Element;
     onMediaClick: () => null;
     formatValue(value: string[], options: any, props: FieldProps): string | null;
 }

package/lib/components/fields/PdfArrayField.js

@@ -23,7 +23,7 @@ let PdfArrayField = class PdfArrayField extends React.Component {
         this.CONTAINER_CLASS = "pdf-container";
         this.METADATA_FORM_ID = "";
         this.renderMedia = (id) => React.createElement(ImageArrayField_1.Thumbnail, { id: id, apiClient: this.props.formContext.apiClient, apiEndpoint: this.ENDPOINT, downloadLink: true });
-        this.renderLoadingMedia = (id) => React.createElement(ImageArrayField_1.Thumbnail, { dataURL: id, loading: true, apiClient: this.props.formContext.apiClient, apiEndpoint: this.ENDPOINT, downloadLink: true });
+        this.renderLoadingMedia = () => React.createElement(ImageArrayField_1.Thumbnail, { loading: true, apiClient: this.props.formContext.apiClient, apiEndpoint: this.ENDPOINT, downloadLink: true });
         this.onMediaClick = () => null;
     }
     formatValue(value, options, props) {

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

@@ -30,7 +30,7 @@ export class TagInputComponent extends React.Component<any, any, any> {
     inputRef: any;
     onClick: () => void;
     onInputChange: (e: any) => void;
-    onTagClick: ((idx: any) => () => void) & memoize.Memoized<(idx: any) => () => void>;
+    onTagClick: ((idx: any) => (e: any) => void) & memoize.Memoized<(idx: any) => (e: any) => void>;
     getTrimmedValue(): any;
 }
 import * as React from "react";

package/lib/components/fields/TagArrayField.js

@@ -98,9 +98,9 @@ class TagInputComponent extends React.Component {
                 }
             });
         };
-        this.onTagClick = memoize((idx) => () => {
+        this.onTagClick = memoize((idx) => (e) => {
             const { onTagClick } = utils_1.getUiOptions(this.props.uiSchema);
-            onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(idx);
+            onTagClick === null || onTagClick === void 0 ? void 0 : onTagClick(idx, e);
         });
         this.state = this.getStateFromProps(props);
     }
@@ -116,10 +116,16 @@ class TagInputComponent extends React.Component {
         tags = tags.filter(s => !utils_1.isEmptyString(s));
         const { value = "" } = this.state;
         const inputProps = Object.assign(Object.assign({ type: "text", className: "rw-input-reset", ref: this.setInputRef, value: value, onChange: this.onInputChange, id: this.props.id }, this.props.inputProps), { onFocus: this.onFocus, onBlur: this.onBlur, onKeyDown: this.onKeyDown });
-        const { showDeleteButton = true } = utils_1.getUiOptions(uiSchema);
+        const { showDeleteButton = true, showAsLink = false, linkPrefix = "" } = utils_1.getUiOptions(uiSchema);
+        const tagElems = tags.map(item => {
+            if (showAsLink) {
+                return React.createElement("a", { href: `${linkPrefix}${item}`, target: "_blank", rel: "noopener noreferrer" }, item);
+            }
+            return item;
+        });
         return (React.createElement("div", { className: `rw-multiselect rw-widget${this.state.focused ? " rw-state-focus" : ""}${readonly || disabled ? " rw-state-disabled" : ""}`, onClick: this.onClick },
             React.createElement("div", { className: "rw-widget-input rw-widget-picked rw-widget-container" },
-                React.createElement("ul", { className: "rw-multiselect-taglist" }, tags.map((item, idx) => React.createElement("li", { key: idx, className: "rw-multiselect-tag", onClick: this.onTagClick(idx) },
+                React.createElement("ul", { className: "rw-multiselect-taglist" }, tagElems.map((item, idx) => React.createElement("li", { key: idx, className: "rw-multiselect-tag", onClick: this.onTagClick(idx) },
                     item,
                     showDeleteButton ? React.createElement("span", { className: "rw-tag-btn", onClick: this.onRemove(idx), tabIndex: 0, onKeyDown: this.props.formContext.utils.keyboardClick(this.onRemove(idx)) }, "\u00D7") : ""))),
                 InputComponent ? React.createElement(InputComponent, Object.assign({}, inputProps)) : React.createElement("input", Object.assign({}, inputProps, { disabled: disabled || readonly })))));

package/lib/components/widgets/AutosuggestWidget.js

@@ -46,6 +46,8 @@ class _AutosuggestWidget extends React.Component {
                     return React.createElement(FriendsAutosuggestWidget, Object.assign({}, this.props));
                 case "organization":
                     return React.createElement(OrganizationAutosuggestWidget, Object.assign({}, this.props));
+                case "collection":
+                    return React.createElement(CollectionAutosuggestWidget, Object.assign({}, this.props));
                 default:
                     return React.createElement(RangeAutosuggestWidget, Object.assign({}, this.props));
             }
@@ -69,6 +71,9 @@ class _AutosuggestWidget extends React.Component {
                 case "organization":
                     component = OrganizationAutosuggestWidget;
                     break;
+                case "collection":
+                    component = CollectionAutosuggestWidget;
+                    break;
                 default:
                     component = RangeAutosuggestWidget;
             }
@@ -348,6 +353,46 @@ class OrganizationAutosuggestWidget extends React.Component {
     }
 }
 OrganizationAutosuggestWidget.contextType = ReactContext_1.default;
+class CollectionAutosuggestWidget extends React.Component {
+    constructor(props) {
+        super(props);
+        this.findExactMatch = (suggestions, inputValue) => {
+            return suggestions.find(suggestion => (suggestion && suggestion.value.toLowerCase() === inputValue.trim().toLowerCase()));
+        };
+        this.getSuggestionFromValue = this.getSuggestionFromValue.bind(this);
+        this.isValueSuggested = this.isValueSuggested.bind(this);
+    }
+    getSuggestionFromValue(value) {
+        if (this.isValueSuggested(value)) {
+            return this.props.formContext.apiClient.fetchCached(`/collection/by-id/${value}`).then(({ collectionName }) => {
+                if (collectionName) {
+                    return {
+                        value: collectionName,
+                        key: value
+                    };
+                }
+            });
+        }
+        else {
+            return Promise.reject();
+        }
+    }
+    isValueSuggested(value) {
+        return !utils_1.isEmptyString(value) && value.match(/HR\.\d+/);
+    }
+    render() {
+        const _a = this.props, { options: propsOptions } = _a, propsWithoutOptions = __rest(_a, ["options"]);
+        const options = {
+            query: Object.assign({ includeSelf: true }, propsOptions.queryOptions),
+            getSuggestionFromValue: this.getSuggestionFromValue,
+            isValueSuggested: this.isValueSuggested,
+            Wrapper: CollectionWrapper,
+            findExactMatch: this.findExactMatch
+        };
+        return React.createElement(Autosuggest, Object.assign({}, options, propsWithoutOptions, propsOptions));
+    }
+}
+CollectionAutosuggestWidget.contextType = ReactContext_1.default;
 class RangeAutosuggestWidget extends React.Component {
     render() {
         const _a = this.props, { options: propsOptions } = _a, propsWithoutOptions = __rest(_a, ["options"]);
@@ -1109,19 +1154,14 @@ class ReactAutosuggest extends React.Component {
     }
 }
 ReactAutosuggest.contextType = ReactContext_1.default;
-const FriendsWrapper = React.forwardRef(({ formContext, children, id, inputValue, isSuggested }, ref) => {
-    const { Tooltip } = React.useContext(ReactContext_1.default).theme;
-    if (!inputValue || isSuggested) {
-        return children;
-    }
-    const tooltip = (React.createElement(Tooltip, { id: `${id}-tooltip` }, formContext.translations.UnknownName));
-    return (React.createElement(components_1.OverlayTrigger, { overlay: tooltip, placement: "top", ref: ref }, children));
-});
-const OrganizationWrapper = React.forwardRef(({ formContext, children, id, inputValue, isSuggested }, ref) => {
+const getWrapper = (unknownValueLabel) => React.forwardRef(({ formContext, children, id, inputValue, isSuggested }, ref) => {
     const { Tooltip } = React.useContext(ReactContext_1.default).theme;
     if (!inputValue || isSuggested) {
         return children;
     }
-    const tooltip = (React.createElement(Tooltip, { id: `${id}-tooltip` }, formContext.translations.UnknownOrganization));
+    const tooltip = (React.createElement(Tooltip, { id: `${id}-tooltip` }, formContext.translations[unknownValueLabel]));
     return (React.createElement(components_1.OverlayTrigger, { overlay: tooltip, placement: "top", ref: ref }, children));
 });
+const FriendsWrapper = getWrapper("UnknownName");
+const OrganizationWrapper = getWrapper("UnknownOrganization");
+const CollectionWrapper = getWrapper("UnknownCollection");

package/lib/components/widgets/DateTimeWidget.d.ts

@@ -56,7 +56,11 @@ export default class DateTimeWidget extends React.Component<any, any, any> {
     setToday: () => void;
     setYesterday: () => void;
     setSameAsToday: () => void;
+    setPlusSixMonths: () => void;
+    setPlusYear: () => void;
     formatValue(value: any, options: any, props: any): any;
+    getCurrentDateOrNow(): moment.Moment;
 }
 import * as React from "react";
+import * as moment from "moment";
 import * as PropTypes from "prop-types";

package/lib/components/widgets/DateTimeWidget.js

@@ -102,6 +102,12 @@ let DateTimeWidget = DateTimeWidget_1 = class DateTimeWidget extends React.Compo
                 this.onChange(today);
             }
         };
+        this.setPlusSixMonths = () => {
+            this.onChange(this.getCurrentDateOrNow().add(6, "M").format("YYYY-MM-DD"));
+        };
+        this.setPlusYear = () => {
+            this.onChange(this.getCurrentDateOrNow().add(1, "y").format("YYYY-MM-DD"));
+        };
         momentLocalizer(moment);
     }
     componentDidMount() {
@@ -192,6 +198,16 @@ let DateTimeWidget = DateTimeWidget_1 = class DateTimeWidget extends React.Compo
                 className: "same",
                 label: translations.Same,
                 onClick: this.setSameAsToday
+            },
+            plusSixMonths: {
+                className: "plus-six-months",
+                label: translations.plusSixMonths,
+                onClick: this.setPlusSixMonths
+            },
+            plusYear: {
+                className: "plus-year",
+                label: translations.plusYear,
+                onClick: this.setPlusYear
             }
         };
         const options = showButtons === true
@@ -209,6 +225,13 @@ let DateTimeWidget = DateTimeWidget_1 = class DateTimeWidget extends React.Compo
         const { inputFormat: format } = DateTimeWidget_1.prototype.getStateFromProps(Object.assign(Object.assign({}, props), { date: true, time: true, value }));
         return localizers_1.date.format(value, format, props.formContext.lang);
     }
+    getCurrentDateOrNow() {
+        const date = moment(this.props.value);
+        if (date.isValid()) {
+            return date;
+        }
+        return moment();
+    }
 };
 DateTimeWidget.contextType = ReactContext_1.default;
 DateTimeWidget.propTypes = {

package/lib/translations.json

@@ -19,6 +19,16 @@
         "en": "Yesterday",
         "sv": "Igår"
     },
+    "plusSixMonths": {
+        "fi": "+6k",
+        "en": "+6m",
+        "sv": "+6m"
+    },
+    "plusYear": {
+        "fi": "+1v",
+        "en": "+1y",
+        "sv": "+1å"
+    },
     "dd/mm/yyyy": {
         "fi": "pp/kk/vvvv",
         "en": "dd/mm/yyyy",
@@ -64,6 +74,11 @@
         "en": "Unknown organization",
         "sv": "Okänd organisation"
     },
+    "unknownCollection": {
+        "fi": "Tuntematon kokoelma",
+        "en": "Unknown collection",
+        "sv": "Okänd samling"
+    },
     "fix": {
         "fi": "Korjaa",
         "en": "Fix",

package/package.json

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

package/test-export/test-utils.d.ts

@@ -21,6 +21,8 @@ export interface DateWidgetPO {
         $same: Locator;
         $date: Locator;
         $time: Locator;
+        $plusSixMonths: Locator;
+        $plusYear: Locator;
     };
     calendar: {
         $today: Locator;
@@ -118,6 +120,8 @@ export declare class Form {
             $same: Locator;
             $date: Locator;
             $time: Locator;
+            $plusSixMonths: Locator;
+            $plusYear: Locator;
         };
         calendar: {
             $today: Locator;

package/test-export/test-utils.js

@@ -223,7 +223,9 @@ class Form {
                 $yesterday: $widget.locator(".yesterday"),
                 $same: $widget.locator(".same"),
                 $date: $widget.locator(".rw-i-calendar"),
-                $time: $widget.locator(".rw-i-clock-o")
+                $time: $widget.locator(".rw-i-clock-o"),
+                $plusSixMonths: $widget.locator(".plus-six-months"),
+                $plusYear: $widget.locator(".plus-year"),
             },
             calendar: {
                 $today: $widget.locator(".rw-calendar-footer button"),