@luomus/laji-form 15.1.11 → 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/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/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/translations.json

@@ -74,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.11",
+  "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",