@luomus/laji-form 15.1.113 → 15.1.115

package/lib/components/LajiForm.js

@@ -203,7 +203,7 @@ class LajiForm extends React.Component {
                 const mergedInternalErrors = (0, deepmerge_1.default)(_liveValidations, !nonlive
                     ? (this.cachedNonliveValidations || {})
                     : (0, deepmerge_1.default)(_validations, schemaErrors));
-                let mergedAll = (0, deepmerge_1.default)(this.state.externalErrors || {}, mergedInternalErrors);
+                const mergedAll = addExternalErrors(mergedInternalErrors, this.state.externalErrors || {});
                 this.validating = false;
                 resolve(!Object.keys(mergedAll).length);
                 if (!equals((this.state.extraErrors || {}), mergedAll)) {
@@ -393,22 +393,22 @@ class LajiForm extends React.Component {
         this.state = this.getStateFromProps(props);
     }
     UNSAFE_componentWillReceiveProps(props) {
+        var _a;
         if (props.apiClient && props.apiClient !== this.apiClient.apiClient) {
             this.apiClient = new ApiClient_1.default(props.apiClient, props.lang, this.translations);
         }
         if (this.apiClient && "lang" in props && this.props.lang !== props.lang) {
             this.apiClient.setLang(props.lang);
         }
-        this.setState(this.getStateFromProps(props), this.popErrorListIfNeeded);
+        const popErrorList = props.extraErrors !== ((_a = this.state) === null || _a === void 0 ? void 0 : _a.externalErrors);
+        this.setState(this.getStateFromProps(props), popErrorList ? this.popErrorListIfNeeded : undefined);
     }
     getStateFromProps(props) {
         var _a;
         const state = {
             formContext: this.getMemoizedFormContext(props),
             externalErrors: props.extraErrors,
-            extraErrors: ((_a = this.state) === null || _a === void 0 ? void 0 : _a.extraErrors)
-                ? (0, deepmerge_1.default)(this.state.extraErrors, props.extraErrors || {})
-                : props.extraErrors
+            extraErrors: addExternalErrors(((_a = this.state) === null || _a === void 0 ? void 0 : _a.extraErrors) || {}, props.extraErrors || {})
         };
         if (((!this.state && props.schema && Object.keys(props.schema).length) || (this.state && !("formData" in this.state))) || ("formData" in props && props.formData !== this.props.formData)) {
             state.formData = state.formContext.services.ids.addLajiFormIds((0, utils_1.getDefaultFormState)(props.schema, props.formData, props.schema))[0];
@@ -605,3 +605,18 @@ const getShortcuts = (uiSchema) => {
     const { "ui:shortcuts": shortcuts } = uiSchema || {};
     return shortcuts;
 };
+const addExternalErrors = (internalErrors, externalErrors) => {
+    return (0, deepmerge_1.default)(internalErrors, processExternalErrors(externalErrors));
+};
+const processExternalErrors = (errors) => {
+    const result = {};
+    if (errors.__errors) {
+        result.__errors = errors.__errors.map(error => `[external]${error}`);
+    }
+    for (const key in errors) {
+        if (key !== "__errors" && errors[key]) {
+            result[key] = processExternalErrors(errors[key]);
+        }
+    }
+    return result;
+};

package/lib/components/components/ErrorPanel.js

@@ -62,7 +62,7 @@ class ErrorPanel extends React.Component {
                         title,
                         React.createElement("span", { className: "pull-right" },
                             React.createElement(components_1.GlyphButton, { glyph: this.state.expanded ? "chevron-up" : "chevron-down", variant: "link" }, translations[this.state.expanded ? "Close" : "Open"]),
-                            showToggle && React.createElement(components_1.GlyphButton, { glyph: "new-window", variant: "link", onClick: poppedToggle }, translations[popped ? "Unpop" : "Pop"]))))),
+                            showToggle && React.createElement(components_1.GlyphButton, { glyph: popped ? "pushpin" : "new-window", variant: "link", onClick: poppedToggle }, translations[popped ? "Unpop" : "Pop"]))))),
             React.createElement(Panel.Collapse, { in: this.state.expanded },
                 React.createElement(ListGroup, null, errors.map((props, i) => React.createElement(ErrorPanelError, Object.assign({ key: i, clickHandler: clickHandler }, props))))),
             footer

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

@@ -28,6 +28,7 @@ export default class ScientificNameTaxonAutosuggestField extends React.Component
     state: State;
     getUiSchema: (props: FieldProps<JSONSchemaObject>) => any;
     getSuggestionValue: (suggestion: any) => string;
+    findExactMatch: (suggestions: any[], inputValue?: string) => any;
     onSuggestionSelected: (suggestion: any, mounted: boolean) => void;
     onUnsuggestionSelected: (value: any) => void;
     isValueSuggested: (value?: string, valueContext?: ValueContext) => boolean | undefined;

package/lib/components/fields/ScientificNameTaxonAutosuggestField.js

@@ -78,7 +78,7 @@ class ScientificNameTaxonAutosuggestField extends React.Component {
             if (taxonRank) {
                 taxonRankLabel = (_a = (this.getTaxonRankOptions() || []).find(option => option.const === taxonRank)) === null || _a === void 0 ? void 0 : _a.title;
             }
-            let options = Object.assign(Object.assign({}, uiOptions), { autosuggestField: "taxon", onSuggestionSelected: this.onSuggestionSelected, onUnsuggestedSelected: this.onUnsuggestionSelected, isValueSuggested: this.isValueSuggested, getSuggestionFromValue: this.getSuggestionFromValue, getSuggestionValue: this.getSuggestionValue, renderSuggestion: this.renderSuggestion, valueContext: { taxonRank, author }, taxonRankLabel, Wrapper: TaxonWrapper });
+            let options = Object.assign(Object.assign({}, uiOptions), { autosuggestField: "taxon", onSuggestionSelected: this.onSuggestionSelected, onUnsuggestedSelected: this.onUnsuggestionSelected, isValueSuggested: this.isValueSuggested, getSuggestionFromValue: this.getSuggestionFromValue, getSuggestionValue: this.getSuggestionValue, findExactMatch: this.findExactMatch, renderSuggestion: this.renderSuggestion, valueContext: { taxonRank, author }, taxonRankLabel, Wrapper: TaxonWrapper });
             if (!(0, utils_1.isEmptyString)(scientificName)) {
                 options.value = scientificName;
             }
@@ -94,6 +94,9 @@ class ScientificNameTaxonAutosuggestField extends React.Component {
         this.getSuggestionValue = (suggestion) => {
             return suggestion.scientificName;
         };
+        this.findExactMatch = (suggestions, inputValue = "") => {
+            return suggestions.find(suggestion => { var _a; return (((_a = suggestion === null || suggestion === void 0 ? void 0 : suggestion.scientificName) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === inputValue.trim().toLowerCase()); });
+        };
         this.onSuggestionSelected = (suggestion, mounted) => {
             if (suggestion === null)
                 suggestion = undefined;

package/lib/components/fields/TaxonSetPopulatorField.js

@@ -100,7 +100,8 @@ let TaxonSetPopulatorField = class TaxonSetPopulatorField extends React.Componen
                         return this.unitTaxonSets[unit.identifications[0].taxonID]
                             && this.unitTaxonSets[unit.identifications[0].taxonID].includes(deletedTaxonSetId);
                     });
-                    observationsExist = deletedTaxonSetUnits.some((unit) => unit.observationStatus !== "MY.observationStatusIgnored");
+                    observationsExist = deletedTaxonSetUnits.some((unit) => unit.observationStatus !== "MY.observationStatusIgnored" &&
+                        unit.observationStatus !== "MY.observationStatusNotObserved");
                     if (observationsExist) {
                         window.alert(translations === null || translations === void 0 ? void 0 : translations.TaxonSetDeletionFailed);
                         const restoredFormData = Object.assign(Object.assign({}, formData), { taxonCensus: [

package/lib/components/templates/ErrorListTemplate.js

@@ -84,23 +84,23 @@ class ErrorListTemplate extends React.Component {
             const { __errors } = errorSchema, properties = __rest(errorSchema, ["__errors"]);
             const _schema = (0, utils_1.parseJSONPointer)(schema, path);
             const title = _schema.title || defaultTitle;
-            let { errors, warnings } = (__errors || []).reduce(({ errors, warnings }, _error) => {
-                if (_error.includes("[warning]")) {
-                    warnings.push({
-                        label: title,
-                        error: (0, utils_1.formatErrorMessage)(_error),
-                        id: id
-                    });
+            let { externalErrors, errors, warnings } = (__errors || []).reduce(({ externalErrors, errors, warnings }, _error) => {
+                const error = {
+                    label: title,
+                    error: (0, utils_1.formatErrorMessage)(_error),
+                    id: id
+                };
+                if (_error.includes("[external]")) {
+                    externalErrors.push(error);
+                }
+                else if (_error.includes("[warning]")) {
+                    warnings.push(error);
                 }
                 else {
-                    errors.push({
-                        label: title,
-                        error: (0, utils_1.formatErrorMessage)(_error),
-                        id: id
-                    });
+                    errors.push(error);
                 }
-                return { errors, warnings };
-            }, { errors: [], warnings: [] });
+                return { externalErrors, errors, warnings };
+            }, { externalErrors: [], errors: [], warnings: [] });
             Object.keys(properties).forEach(prop => {
                 let _path = path;
                 if (prop.match(/^\d+$/))
@@ -109,13 +109,14 @@ class ErrorListTemplate extends React.Component {
                     _path = `${_path}/properties/${prop}`;
                 const _defaultTitle = _schema.type === "array" || uiSchema["ui:multiLanguage"] ? `${title} (${prop})` : prop;
                 const childErrors = walkErrors(_path, `${id}_${prop}`, errorSchema[prop], uiSchema[prop] || {}, _defaultTitle);
+                externalErrors = [...externalErrors, ...childErrors.externalErrors];
                 errors = [...errors, ...childErrors.errors];
                 warnings = [...warnings, ...childErrors.warnings];
             });
-            return { errors, warnings };
+            return { externalErrors, errors, warnings };
         }
         const { Glyphicon } = this.context.theme;
-        const { errors, warnings } = walkErrors("", "root", errorSchema, uiSchema, "");
+        const { externalErrors, errors, warnings } = walkErrors("", "root", errorSchema, uiSchema, "");
         const footer = (errors.length > 0
             ? React.createElement(components_1.Button, { onClick: this.revalidate },
                 React.createElement(Glyphicon, { glyph: "refresh" }),
@@ -123,8 +124,9 @@ class ErrorListTemplate extends React.Component {
                 translations.Revalidate)
             : React.createElement(components_1.Button, { onClick: this.submitWithWarnings, variant: "success", disabled: disabled || readonly }, translations.SubmitWithWarnings));
         return (React.createElement("div", { className: `laji-form-error-list${this.state.popped ? " laji-form-popped" : ""}${errors.length === 0 ? " laji-form-warning-list" : ""}`, style: this.state.popped ? { top: (this.props.formContext.topOffset || 0) + 5 } : null },
-            React.createElement(components_1.ErrorPanel, { classNames: "error-panel", ref: "errorPanel", errors: errors, title: translations.Errors, clickHandler: clickHandler, showToggle: true, poppedToggle: this.poppedToggle, popped: this.state.popped, formContext: this.props.formContext, footer: footer }),
-            React.createElement(components_1.ErrorPanel, { classNames: "warning-panel", ref: "warningPanel", errors: warnings, title: translations.Warnings, clickHandler: clickHandler, showToggle: errors.length === 0, poppedToggle: this.poppedToggle, popped: this.state.popped, formContext: this.props.formContext, footer: footer })));
+            React.createElement(components_1.ErrorPanel, { classNames: "error-panel", ref: "externalErrorPanel", errors: externalErrors, title: translations.ExternalErrors, clickHandler: clickHandler, showToggle: true, poppedToggle: this.poppedToggle, popped: this.state.popped, formContext: this.props.formContext, footer: null }),
+            React.createElement(components_1.ErrorPanel, { classNames: "error-panel", ref: "errorPanel", errors: errors, title: translations.Errors, clickHandler: clickHandler, showToggle: externalErrors.length === 0, poppedToggle: this.poppedToggle, popped: this.state.popped, formContext: this.props.formContext, footer: warnings.length === 0 ? footer : null }),
+            React.createElement(components_1.ErrorPanel, { classNames: "warning-panel", ref: "warningPanel", errors: warnings, title: translations.Warnings, clickHandler: clickHandler, showToggle: externalErrors.length === 0 && errors.length === 0, poppedToggle: this.poppedToggle, popped: this.state.popped, formContext: this.props.formContext, footer: footer })));
     }
 }
 ErrorListTemplate.contextType = ReactContext_1.default;

package/lib/components/widgets/AutosuggestWidget.js

@@ -650,6 +650,10 @@ class Autosuggest extends React.Component {
                 return;
             }
             const parsedInputValue = this.props.parseInputValue ? this.props.parseInputValue(inputValue) : inputValue;
+            if (this.state.suggestion && inputValue === this.getSuggestionValue(this.state.suggestion)) {
+                callback && callback();
+                return;
+            }
             const { selectOnlyOne, selectOnlyNonMatchingBeforeUnsuggested = true, informalTaxonGroups, informalTaxonGroupsValue, allowNonsuggestedValue } = this.props;
             const exactMatch = this.findExactMatch(suggestions, parsedInputValue);
             const onlyOneMatch = selectOnlyOne ? this.findTheOnlyOneMatch(suggestions) : undefined;
@@ -818,7 +822,6 @@ class Autosuggest extends React.Component {
             });
         }
         else if (valueContextChanged) {
-            this.setState({ isLoading: true });
             if (this.triggerConvertTimeout) {
                 clearTimeout(this.triggerConvertTimeout);
             }
@@ -848,7 +851,7 @@ class Autosuggest extends React.Component {
         return React.createElement(React.Fragment, null,
             renderExtra && renderExtra(),
             React.createElement("div", { className: (0, utils_1.classNames)("autosuggest-wrapper", props.wrapperClassName) },
-                React.createElement(ReactAutosuggest, { id: `${this.props.id}-autosuggest`, inputProps: inputProps, renderInputComponent: this.renderInput, suggestions: suggestions, renderSuggestion: this.renderSuggestion, onSuggestionsFetchRequested: this.onSuggestionsFetchRequested, onSuggestionsClearRequested: this.onSuggestionsClearRequested, onSuggestionSelected: this.onSuggestionSelected, onUnsuggestedSelected: this.onUnsuggestedSelected, highlightFirstSuggestion: highlightFirstSuggestion, suggestionsOpenOnFocus: !this.isSuggested(), theme: cssClasses, formContext: this.props.formContext, ref: this.setRef })));
+                React.createElement(ReactAutosuggest, { id: `${this.props.id}-autosuggest`, inputProps: inputProps, renderInputComponent: this.renderInput, suggestions: suggestions, renderSuggestion: this.renderSuggestion, onSuggestionsFetchRequested: this.onSuggestionsFetchRequested, onSuggestionsClearRequested: this.onSuggestionsClearRequested, onSuggestionSelected: this.onSuggestionSelected, onUnsuggestedSelected: this.onUnsuggestedSelected, highlightFirstSuggestion: highlightFirstSuggestion, suggestionsOpenOnFocus: !this.isSuggested(), getSuggestionValue: this.getSuggestionValue, theme: cssClasses, formContext: this.props.formContext, ref: this.setRef })));
     }
 }
 exports.Autosuggest = Autosuggest;
@@ -1091,6 +1094,11 @@ const TaxonName = ({ scientificName, vernacularName = "", cursiveName, finnish,
 class ReactAutosuggest extends React.Component {
     constructor(props) {
         super(props);
+        this.getDisplayValue = (suggestion) => {
+            return this.props.getSuggestionValue
+                ? this.props.getSuggestionValue(suggestion)
+                : suggestion.value;
+        };
         this.onInputFocus = (e) => {
             this.setState({ focused: true, hideSuggestions: false });
             this.requestFetch(this.state.inputValue);
@@ -1123,7 +1131,7 @@ class ReactAutosuggest extends React.Component {
                         touched: true
                     };
                     if (state.focusedIdx !== undefined) {
-                        state.inputValue = this.props.suggestions[state.focusedIdx].value;
+                        state.inputValue = this.getDisplayValue(this.props.suggestions[state.focusedIdx]);
                     }
                     this.setState(state);
                     break;
@@ -1131,7 +1139,7 @@ class ReactAutosuggest extends React.Component {
                     e.preventDefault();
                     state = { focusedIdx: this.state.focusedIdx > 0 ? this.state.focusedIdx - 1 : undefined, touched: true };
                     if (state.focusedIdx !== undefined) {
-                        state.inputValue = this.props.suggestions[state.focusedIdx].value;
+                        state.inputValue = this.getDisplayValue(this.props.suggestions[state.focusedIdx]);
                     }
                     this.setState(state);
                     break;
@@ -1172,12 +1180,12 @@ class ReactAutosuggest extends React.Component {
             this.suggestionMouseDownFlag = true;
         };
         this.onSuggestionMouseUp = (e) => {
+            var _a, _b;
             this.suggestionMouseDownFlag = false;
             const suggestion = this.getSuggestionFromClick(e);
-            this.setState({ inputValue: suggestion.value }, () => {
-                this._onInputChange(suggestion.value, "click");
-                this.onBlur(e);
-            });
+            this.onSuggestionSelected(suggestion);
+            this.setState({ focused: false, focusedIdx: undefined, touched: false });
+            (_b = (_a = this.props.inputProps) === null || _a === void 0 ? void 0 : _a.onBlur) === null || _b === void 0 ? void 0 : _b.call(_a, e, true);
         };
         this.getSuggestionFromClick = ({ target }) => {
             let idx;

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

@@ -72,6 +72,7 @@ export default class DateTimeWidget extends React.Component<any, any, any> {
     containerRef: any;
     onTextWidgetFocus: () => void;
     onBlur: () => void;
+    onDateTimePickerSelect: (dateTime: any) => void;
     onDateTimePickerChange: (value: any) => void;
     render(): JSX.Element;
     renderButtons(showButtons: any): JSX.Element[];

package/lib/components/widgets/DateTimeWidget.js

@@ -101,6 +101,16 @@ class DateTimeWidget extends React.Component {
         this.onBlur = () => {
             !(0, utils_1.isDescendant)((0, react_dom_1.findDOMNode)(this.containerRef), document.activeElement) && this.setState({ textInputFocused: false });
         };
+        // used to display time when 00:00 (same as default time) is selected
+        this.onDateTimePickerSelect = (dateTime) => {
+            if (this.toggle === "time") {
+                const { value } = this.props;
+                const momentValue = (0, moment_1.default)(dateTime);
+                if (value && !value.includes("T") && momentValue.isValid()) {
+                    this.onChange(momentValue.format("YYYY-MM-DDTHH:mm"));
+                }
+            }
+        };
         this.onDateTimePickerChange = (value) => {
             const momentValue = (0, moment_1.default)(value);
             let formattedValue = momentValue.format("YYYY-MM-DDTHH:mm");
@@ -228,7 +238,7 @@ class DateTimeWidget extends React.Component {
         const options = (0, utils_1.getUiOptions)(this.props);
         const showTimeList = options.showTimeList !== undefined ? options.showTimeList : true;
         const culture = lang === "en" ? "en-gb" : lang;
-        const datePicker = (React.createElement(DateTimePicker, { ref: this.setRef, date: this.state.calendar, time: this.state.time && showTimeList, format: this.state.inputFormat, timeFormat: this.state.timeFormat, placeholder: this.state.placeholder, onToggle: this.onToggle, onChange: this.onDateTimePickerChange, value: value && momentValue.isValid() ? momentValue.toDate() : null, parse: this.parse, disabled: readonly || disabled, culture: culture, messages: {
+        const datePicker = (React.createElement(DateTimePicker, { ref: this.setRef, date: this.state.calendar, time: this.state.time && showTimeList, format: this.state.inputFormat, timeFormat: this.state.timeFormat, placeholder: this.state.placeholder, onToggle: this.onToggle, onSelect: this.onDateTimePickerSelect, onChange: this.onDateTimePickerChange, value: value && momentValue.isValid() ? momentValue.toDate() : null, parse: this.parse, disabled: readonly || disabled, culture: culture, messages: {
                 calendarButton: translations.ChooseDate,
                 timeButton: translations.ChooseTime
             }, onBlur: this.onBlur }));

package/lib/translations.json

@@ -66,7 +66,7 @@
     },
     "unknownName": {
         "fi": "Ei tunnettu nimi",
-        "en": "Not known name",
+        "en": "Name not known",
         "sv": "Okänt namn"
     },
     "unknownOrganization": {
@@ -359,6 +359,11 @@
         "en": "below",
         "sv": "under"
     },
+    "externalErrors": {
+        "fi": "virheet tallennettaessa",
+        "en": "errors while saving",
+        "sv": "fel när du sparar"
+    },
     "errors": {
         "fi": "virheet",
         "en": "errors",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.113",
+  "version": "15.1.115",
   "description": "React module capable of building dynamic forms from Laji form json schemas",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -41,7 +41,7 @@
   "license": "MIT",
   "dependencies": {
     "@luomus/laji-map": "^5.1.19",
-    "@luomus/laji-validate": "^0.0.132",
+    "@luomus/laji-validate": "^0.0.133",
     "@rjsf/core": "~5.1.0",
     "@rjsf/utils": "~5.1.0",
     "@rjsf/validator-ajv6": "~5.1.0",

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

@@ -28,6 +28,7 @@ export interface DateWidgetPO {
         $today: Locator;
     };
     clock: {
+        "$00:00": Locator;
         "$01:00": Locator;
     };
 }
@@ -127,6 +128,7 @@ export declare class Form {
             $today: Locator;
         };
         clock: {
+            "$00:00": Locator;
             "$01:00": Locator;
         };
     };

package/test-export/test-utils.js

@@ -266,6 +266,7 @@ class Form {
                 $today: $widget.locator(".rw-calendar-footer button"),
             },
             clock: {
+                "$00:00": $widget.locator(".rw-list li").nth(0),
                 "$01:00": $widget.locator(".rw-list li").nth(2),
             }
         };
@@ -327,10 +328,8 @@ class DemoPageForm extends Form {
     }
     setState(state) {
         return this.page.evaluate((state) => {
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             const onSubmit = function (data) { window.submittedData = data.formData; };
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
             const onChange = function (formData) { window.changedData = formData; };
             return window.lajiForm.setState(Object.assign({ onSubmit,