@luomus/laji-form 15.1.29 → 15.1.31

package/dist/styles.css

@@ -3150,6 +3150,9 @@ body .laji-form {
 	margin-top: 5px;
 }
 
+.laji-form .autosuggest-input-addon {
+	margin-bottom: 0px;
+}
 .laji-form .autosuggest-input-addon.active {
         color: #2980b9 !important;
 }
@@ -3848,9 +3851,12 @@ body .laji-form {
 	font-size: 20px;
 }
 .laji-form-dropdown-caret {
-	bottom: 2px;
 	position: absolute;
 	right: 3px;
+	bottom: 0px;
+}
+.laji-form-dropdown-caret img {
+	width: 20px;
 }
 
 .laji-form-multiselect-input-wrapper-focus {
@@ -3859,4 +3865,8 @@ body .laji-form {
 .laji-form-multiselect-input-wrapper-readonly {
 	background-color: #eee;
 }
+.laji-form-checkbox-buttons .btn {
+	height: 25px;
+}
+
 

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

@@ -5,6 +5,9 @@ export const rulePropType: PropTypes.Requireable<string | PropTypes.InferProps<{
     valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
     valueLengthLessThan: PropTypes.Requireable<number>;
     complement: PropTypes.Requireable<boolean>;
+}> | PropTypes.InferProps<{
+    rule: PropTypes.Requireable<string>;
+    complement: PropTypes.Requireable<boolean>;
 }>>;
 export const operationPropType: PropTypes.Requireable<PropTypes.InferProps<{
     type: PropTypes.Requireable<string>;
@@ -17,6 +20,9 @@ export const rulesPropType: PropTypes.Requireable<string | PropTypes.InferProps<
     valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
     valueLengthLessThan: PropTypes.Requireable<number>;
     complement: PropTypes.Requireable<boolean>;
+}> | PropTypes.InferProps<{
+    rule: PropTypes.Requireable<string>;
+    complement: PropTypes.Requireable<boolean>;
 }> | (string | PropTypes.InferProps<{
     container: PropTypes.Requireable<string>;
     field: PropTypes.Validator<string>;
@@ -24,6 +30,9 @@ export const rulesPropType: PropTypes.Requireable<string | PropTypes.InferProps<
     valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
     valueLengthLessThan: PropTypes.Requireable<number>;
     complement: PropTypes.Requireable<boolean>;
+}> | PropTypes.InferProps<{
+    rule: PropTypes.Requireable<string>;
+    complement: PropTypes.Requireable<boolean>;
 }> | null | undefined)[]>;
 /**
  * Transforms uiSchema according to conditional cases. Cases are not mutually exclusive.
@@ -64,6 +73,9 @@ export default class ConditionalUiSchemaField extends React.Component<any, any,
                         valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
                         valueLengthLessThan: PropTypes.Requireable<number>;
                         complement: PropTypes.Requireable<boolean>;
+                    }> | PropTypes.InferProps<{
+                        rule: PropTypes.Requireable<string>;
+                        complement: PropTypes.Requireable<boolean>;
                     }> | (string | PropTypes.InferProps<{
                         container: PropTypes.Requireable<string>;
                         field: PropTypes.Validator<string>;
@@ -71,6 +83,9 @@ export default class ConditionalUiSchemaField extends React.Component<any, any,
                         valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
                         valueLengthLessThan: PropTypes.Requireable<number>;
                         complement: PropTypes.Requireable<boolean>;
+                    }> | PropTypes.InferProps<{
+                        rule: PropTypes.Requireable<string>;
+                        complement: PropTypes.Requireable<boolean>;
                     }> | null | undefined)[]>;
                     operations: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;
@@ -87,6 +102,9 @@ export default class ConditionalUiSchemaField extends React.Component<any, any,
                         valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
                         valueLengthLessThan: PropTypes.Requireable<number>;
                         complement: PropTypes.Requireable<boolean>;
+                    }> | PropTypes.InferProps<{
+                        rule: PropTypes.Requireable<string>;
+                        complement: PropTypes.Requireable<boolean>;
                     }> | (string | PropTypes.InferProps<{
                         container: PropTypes.Requireable<string>;
                         field: PropTypes.Validator<string>;
@@ -94,6 +112,9 @@ export default class ConditionalUiSchemaField extends React.Component<any, any,
                         valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
                         valueLengthLessThan: PropTypes.Requireable<number>;
                         complement: PropTypes.Requireable<boolean>;
+                    }> | PropTypes.InferProps<{
+                        rule: PropTypes.Requireable<string>;
+                        complement: PropTypes.Requireable<boolean>;
                     }> | null | undefined)[]>;
                     operations: PropTypes.Requireable<PropTypes.InferProps<{
                         type: PropTypes.Requireable<string>;

package/lib/components/fields/ConditionalUiSchemaField.js

@@ -21,6 +21,10 @@ exports.rulePropType = PropTypes.oneOfType([
         valueLengthLessThan: PropTypes.number,
         complement: PropTypes.bool
     }),
+    PropTypes.shape({
+        rule: PropTypes.oneOf(["isAdmin", "isEdit"]),
+        complement: PropTypes.bool
+    }),
     PropTypes.oneOf(["isAdmin", "isEdit"])
 ]);
 exports.operationPropType = PropTypes.shape({

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

@@ -5,6 +5,9 @@ export const arrayRulesPropType: PropTypes.Requireable<string | PropTypes.InferP
     valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
     valueLengthLessThan: PropTypes.Requireable<number>;
     complement: PropTypes.Requireable<boolean>;
+}> | PropTypes.InferProps<{
+    rule: PropTypes.Requireable<string>;
+    complement: PropTypes.Requireable<boolean>;
 }> | PropTypes.InferProps<{
     idx: PropTypes.Requireable<number>;
     isLast: PropTypes.Requireable<number>;
@@ -16,6 +19,9 @@ export const arrayRulesPropType: PropTypes.Requireable<string | PropTypes.InferP
     valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
     valueLengthLessThan: PropTypes.Requireable<number>;
     complement: PropTypes.Requireable<boolean>;
+}> | PropTypes.InferProps<{
+    rule: PropTypes.Requireable<string>;
+    complement: PropTypes.Requireable<boolean>;
 }> | PropTypes.InferProps<{
     idx: PropTypes.Requireable<number>;
     isLast: PropTypes.Requireable<number>;
@@ -32,6 +38,9 @@ export default class FilterArrayField extends React.Component<any, any, any> {
                     valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
                     valueLengthLessThan: PropTypes.Requireable<number>;
                     complement: PropTypes.Requireable<boolean>;
+                }> | PropTypes.InferProps<{
+                    rule: PropTypes.Requireable<string>;
+                    complement: PropTypes.Requireable<boolean>;
                 }> | PropTypes.InferProps<{
                     idx: PropTypes.Requireable<number>;
                     isLast: PropTypes.Requireable<number>;
@@ -43,6 +52,9 @@ export default class FilterArrayField extends React.Component<any, any, any> {
                     valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
                     valueLengthLessThan: PropTypes.Requireable<number>;
                     complement: PropTypes.Requireable<boolean>;
+                }> | PropTypes.InferProps<{
+                    rule: PropTypes.Requireable<string>;
+                    complement: PropTypes.Requireable<boolean>;
                 }> | PropTypes.InferProps<{
                     idx: PropTypes.Requireable<number>;
                     isLast: PropTypes.Requireable<number>;

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

@@ -9,6 +9,9 @@ export default class MultiArrayField extends React.Component<any, any, any> {
                     valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
                     valueLengthLessThan: PropTypes.Requireable<number>;
                     complement: PropTypes.Requireable<boolean>;
+                }> | PropTypes.InferProps<{
+                    rule: PropTypes.Requireable<string>;
+                    complement: PropTypes.Requireable<boolean>;
                 }> | PropTypes.InferProps<{
                     idx: PropTypes.Requireable<number>;
                     isLast: PropTypes.Requireable<number>;
@@ -20,6 +23,9 @@ export default class MultiArrayField extends React.Component<any, any, any> {
                     valueIn: PropTypes.Requireable<(string | null | undefined)[]>;
                     valueLengthLessThan: PropTypes.Requireable<number>;
                     complement: PropTypes.Requireable<boolean>;
+                }> | PropTypes.InferProps<{
+                    rule: PropTypes.Requireable<string>;
+                    complement: PropTypes.Requireable<boolean>;
                 }> | PropTypes.InferProps<{
                     idx: PropTypes.Requireable<number>;
                     isLast: PropTypes.Requireable<number>;

package/lib/components/widgets/AutosuggestWidget.js

@@ -48,6 +48,8 @@ class _AutosuggestWidget extends React.Component {
                     return React.createElement(OrganizationAutosuggestWidget, Object.assign({}, this.props));
                 case "collection":
                     return React.createElement(CollectionAutosuggestWidget, Object.assign({}, this.props));
+                case "dataset":
+                    return React.createElement(DatasetAutosuggestWidget, Object.assign({}, this.props));
                 default:
                     return React.createElement(RangeAutosuggestWidget, Object.assign({}, this.props));
             }
@@ -74,6 +76,9 @@ class _AutosuggestWidget extends React.Component {
                 case "collection":
                     component = CollectionAutosuggestWidget;
                     break;
+                case "dataset":
+                    component = DatasetAutosuggestWidget;
+                    break;
                 default:
                     component = RangeAutosuggestWidget;
             }
@@ -314,46 +319,24 @@ class FriendsAutosuggestWidget extends React.Component {
 }
 FriendsAutosuggestWidget.contextType = ReactContext_1.default;
 class OrganizationAutosuggestWidget 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(`/organization/by-id/${value}`).then(({ fullName }) => {
-                if (fullName) {
-                    return {
-                        value: fullName,
-                        key: value
-                    };
-                }
-            });
-        }
-        else {
-            return Promise.reject();
-        }
-    }
-    isValueSuggested(value) {
-        return !utils_1.isEmptyString(value) && value.match(/MOS\.\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: OrganizationWrapper,
-            findExactMatch: this.findExactMatch
-        };
-        return React.createElement(Autosuggest, Object.assign({}, options, propsWithoutOptions, propsOptions));
+        return (React.createElement(BasicAutosuggestWidget, Object.assign({}, this.props, this.props.options, { nameField: "fullName", validValueRegexp: "MOS.\\d+", Wrapper: OrganizationWrapper })));
     }
 }
 OrganizationAutosuggestWidget.contextType = ReactContext_1.default;
 class CollectionAutosuggestWidget extends React.Component {
+    render() {
+        return (React.createElement(BasicAutosuggestWidget, Object.assign({}, this.props, this.props.options, { nameField: "collectionName", validValueRegexp: "HR.\\d+", Wrapper: CollectionWrapper })));
+    }
+}
+CollectionAutosuggestWidget.contextType = ReactContext_1.default;
+class DatasetAutosuggestWidget extends React.Component {
+    render() {
+        return (React.createElement(BasicAutosuggestWidget, Object.assign({}, this.props, this.props.options, { nameField: "datasetName", validValueRegexp: "GX.\\d+", Wrapper: DatasetWrapper })));
+    }
+}
+DatasetAutosuggestWidget.contextType = ReactContext_1.default;
+class BasicAutosuggestWidget extends React.Component {
     constructor(props) {
         super(props);
         this.findExactMatch = (suggestions, inputValue) => {
@@ -363,11 +346,12 @@ class CollectionAutosuggestWidget extends React.Component {
         this.isValueSuggested = this.isValueSuggested.bind(this);
     }
     getSuggestionFromValue(value) {
+        const { autosuggestField, nameField } = this.props;
         if (this.isValueSuggested(value)) {
-            return this.props.formContext.apiClient.fetchCached(`/collection/by-id/${value}`).then(({ collectionName }) => {
-                if (collectionName) {
+            return this.props.formContext.apiClient.fetchCached(`/${autosuggestField}/by-id/${value}`).then(result => {
+                if (result[nameField]) {
                     return {
-                        value: collectionName,
+                        value: result[nameField],
                         key: value
                     };
                 }
@@ -378,21 +362,36 @@ class CollectionAutosuggestWidget extends React.Component {
         }
     }
     isValueSuggested(value) {
-        return !utils_1.isEmptyString(value) && value.match(/HR\.\d+/);
+        const regexp = new RegExp(this.props.validValueRegexp);
+        return !utils_1.isEmptyString(value) && value.match(regexp);
     }
     render() {
-        const _a = this.props, { options: propsOptions } = _a, propsWithoutOptions = __rest(_a, ["options"]);
         const options = {
-            query: Object.assign({ includeSelf: true }, propsOptions.queryOptions),
+            query: Object.assign({ includeSelf: true }, this.props.queryOptions),
             getSuggestionFromValue: this.getSuggestionFromValue,
             isValueSuggested: this.isValueSuggested,
-            Wrapper: CollectionWrapper,
+            Wrapper: this.props.Wrapper,
             findExactMatch: this.findExactMatch
         };
-        return React.createElement(Autosuggest, Object.assign({}, options, propsWithoutOptions, propsOptions));
+        return React.createElement(Autosuggest, Object.assign({}, options, this.props));
     }
 }
-CollectionAutosuggestWidget.contextType = ReactContext_1.default;
+BasicAutosuggestWidget.contextType = ReactContext_1.default;
+BasicAutosuggestWidget.propTypes = {
+    autosuggestField: PropTypes.string.isRequired,
+    allowNonsuggestedValue: PropTypes.bool,
+    onSuggestionSelected: PropTypes.func,
+    onUnsuggestedSelected: PropTypes.func,
+    onInputChange: PropTypes.func,
+    uiSchema: PropTypes.object,
+    nameField: PropTypes.string,
+    validValueRegexp: PropTypes.string,
+    Wrapper: PropTypes.object
+};
+BasicAutosuggestWidget.defaultProps = {
+    nameField: "name",
+    validValueRegexp: ""
+};
 class RangeAutosuggestWidget extends React.Component {
     render() {
         const _a = this.props, { options: propsOptions } = _a, propsWithoutOptions = __rest(_a, ["options"]);
@@ -1165,3 +1164,4 @@ const getWrapper = (unknownValueLabel) => React.forwardRef(({ formContext, child
 const FriendsWrapper = getWrapper("UnknownName");
 const OrganizationWrapper = getWrapper("UnknownOrganization");
 const CollectionWrapper = getWrapper("UnknownCollection");
+const DatasetWrapper = getWrapper("UnknownTag");

package/lib/components/widgets/CheckboxWidget.js

@@ -112,14 +112,16 @@ class CheckboxWidget extends React.Component {
             tabIndex: (toggleMode || _disabled) ? undefined : 0
         };
         const tabTargetClass = "laji-form-checkbox-widget-tab-target";
-        const checkbox = (React.createElement(ButtonToolbar, { className: utils_1.classNames(toggleMode && "desktop-layout") },
+        const checkbox = (React.createElement(ButtonToolbar, { className: utils_1.classNames("laji-form-checkbox-buttons", toggleMode && "desktop-layout") },
             React.createElement(ToggleButtonGroup, Object.assign({ ref: this.groupRef, type: "radio", value: [_value], name: this.props.id, onChange: this.onButtonGroupChange, onKeyDown: this.onGroupKeyDown, className: utils_1.classNames(toggleMode && tabTargetClass) }, commonProps, { tabIndex: (toggleMode && !_disabled) ? 0 : undefined }),
                 React.createElement(ToggleButton, Object.assign({ id: `${id}-true`, ref: this.trueRef, value: true, onClick: toggleMode ? this.toggle : undefined, className: utils_1.classNames(toggleMode && _value === false && "laji-form-hide-btn-label", _value === true && tabTargetClass), onKeyDown: this.onTrueKeyDown }, commonProps), trueLabel),
                 React.createElement(ToggleButton, Object.assign({ id: `${id}-false`, ref: this.falseRef, value: false, onClick: toggleMode ? this.toggle : undefined, className: utils_1.classNames(toggleMode && _value === true && "laji-form-hide-btn-label", _value === false && tabTargetClass), onKeyDown: this.onFalseKeyDown }, commonProps), falseLabel),
                 (displayUndefined ?
                     React.createElement(ToggleButton, Object.assign({ id: `${id}-undefined`, ref: this.undefinedRef, value: "undefined", className: utils_1.classNames(value === undefined && tabTargetClass) }, commonProps, { onKeyDown: this.onUndefinedKeyDown }), unknownLabel) : null))));
         const { Label } = this.props.formContext;
-        return !hasLabel ? checkbox : (React.createElement(Label, { label: label, required: required, uiSchema: options, contextId: this.props.formContext.contextId }, checkbox));
+        return !hasLabel ? checkbox : React.createElement(React.Fragment, null,
+            React.createElement(Label, { label: label, required: required, uiSchema: options, contextId: this.props.formContext.contextId }),
+            checkbox);
     }
     formatValue(value, options, props) {
         return value === undefined

package/lib/components/widgets/SelectWidget.js

@@ -308,7 +308,8 @@ const SelectedMultiValue = ({ children: enu, onDelete, readonly }) => {
         React.createElement("span", { tabIndex: readonly ? undefined : 0, role: readonly ? undefined : "button", onClick: onDeleteClick }, "\u00D7")));
 };
 const Caret = ({ onFocus }) => React.createElement("div", { className: "laji-form-dropdown-caret-container", style: { position: "absolute", pointerEvents: "none" } },
-    React.createElement("span", { onFocus: onFocus, className: "laji-form-dropdown-caret" }, "\u2304"));
+    React.createElement("span", { onFocus: onFocus, className: "laji-form-dropdown-caret" },
+        React.createElement("img", { src: "https://cdn.laji.fi/images/icons/caret-down.svg" })));
 function ListItem({ onSelected, active, children }) {
     const onClick = react_1.useCallback(() => {
         onSelected(children);

package/lib/translations.json

@@ -79,6 +79,11 @@
         "en": "Unknown collection",
         "sv": "Okänd samling"
     },
+    "unknownTag": {
+        "fi": "Tuntematon tagi",
+        "en": "Unknown tag",
+        "sv": "Okänd tagg"
+    },
     "fix": {
         "fi": "Korjaa",
         "en": "Fix",

package/package.json

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