@luomus/laji-form 15.1.71 → 15.1.73

package/dist/styles.css

@@ -2899,25 +2899,6 @@ body .laji-form {
 .laji-form .hidden {
 	display: none;
 }
-.laji-form .checkbox-container {
-	display: table;
-}
-
-.laji-form-checkbox-selected-value-glyph, .laji-form-checkbox-unselected-value-glyph {
-	pointer-events: none;
-}
-.laji-form-checkbox-selected-value-glyph:before, .laji-form-checkbox-unselected-value-glyph:before {
-	content: "•";
-	margin-right: 6px;
-	height: 0;
-	font-weight: 900;
-	color: #9e9e9e;
-	font-size: 18px;
-	vertical-align: -2px;
-}
-.laji-form-checkbox-unselected-value-glyph:before {
-	visibility: hidden;
-}
 
 .laji-form.map-dialog .modal-content, .laji-form.map-dialog .modal-body {
 	width: auto;
@@ -3931,3 +3912,28 @@ body .laji-form {
 	margin-left: -20px !important;
 }
 
+.laji-form .checkbox-container label {
+	font-weight: initial;
+	margin-right: 5px;
+}
+.laji-form input[type="radio"] {
+	margin-right: 5px;
+	margin-top: -2px;
+	vertical-align: middle;
+	accent-color: #7d7d7d;
+}
+.laji-form .has-error input[type="radio"] {
+	accent-color: #a94442 !important;
+}
+
+.laji-form .checkbox-container label input:focus {
+	outline-offset: 0;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 5px 2px rgb(0 142 255);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 5px 2px rgb(0 142 255);
+}
+.laji-form .checkbox-container label input:focus-within {
+	outline-offset: 0;
+	-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 5px 2px rgb(0 142 255);
+	box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 5px 2px rgb(0 142 255);
+}
+

package/lib/components/LajiForm.d.ts

@@ -5,7 +5,7 @@ import { ReactUtilsType } from "../utils";
 import { Theme } from "../themes/theme";
 import { ContextProps } from "../ReactContext";
 import Form from "@rjsf/core";
-import { Field, Widget, TemplatesType } from "@rjsf/utils";
+import { Field, Widget, TemplatesType, ErrorSchema } from "@rjsf/utils";
 import ApiClient, { ApiClientImplementation } from "../ApiClient";
 import KeyHandlerService, { ShortcutKeys } from "../services/key-handler-service";
 import SettingsService, { Settings } from "../services/settings-service";
@@ -53,19 +53,21 @@ export interface LajiFormProps extends HasMaybeChildren {
     onSubmit?: (data: {
         formData: any;
     }) => void;
-    onValidationError?: (extraErrors: any) => void;
+    onValidationError?: (extraErrors: ErrorSchema) => void;
     validators?: any;
     warnings?: any;
     onSettingsChange?: (settings: any, global: boolean) => void;
     mediaMetadata?: MediaMetadata;
     theme?: Theme;
     lajiGeoServerAddress?: string;
+    extraErrors: ErrorSchema;
 }
 export interface LajiFormState {
     submitHooks?: SubmitHook[];
     formContext: FormContext;
     formData?: any;
-    extraErrors?: any;
+    extraErrors?: ErrorSchema;
+    externalErrors?: ErrorSchema;
     error?: boolean;
     runningSubmitHooks?: boolean;
 }

package/lib/components/LajiForm.js

@@ -282,7 +282,8 @@ class LajiForm extends React.Component {
         this.validateAndSubmit = (warnings = true, onlySchema = false) => {
             const { formData } = this.state;
             const { onValidationError, onSubmit } = this.props;
-            return this.validate(warnings, true, onlySchema).then((valid) => {
+            this.setState({ externalErrors: undefined });
+            return this.validate(warnings, true, onlySchema).then(valid => {
                 if (formData !== this.state.formData) {
                     this.validateAndSubmit(warnings, onlySchema);
                 }
@@ -329,12 +330,15 @@ class LajiForm extends React.Component {
                     this.cachedNonliveValidations = (0, deepmerge_1.default)(schemaErrors, _validations);
                     block && this.memoizedFormContext.services.blocker.pop();
                 }
-                const merged = (0, deepmerge_1.default)(_liveValidations, !nonlive
+                const mergedInternalErrors = (0, deepmerge_1.default)(_liveValidations, !nonlive
                     ? (this.cachedNonliveValidations || {})
                     : (0, deepmerge_1.default)(_validations, schemaErrors));
+                const mergedAll = (0, deepmerge_1.default)(this.state.externalErrors || {}, mergedInternalErrors);
                 this.validating = false;
-                resolve(!Object.keys(merged).length);
-                !equals((this.state.extraErrors || {}), merged) && this.setState({ extraErrors: merged }, this.popErrorListIfNeeded);
+                resolve(!Object.keys(mergedAll).length);
+                if (!equals((this.state.extraErrors || {}), mergedAll)) {
+                    this.setState({ extraErrors: mergedAll }, this.popErrorListIfNeeded);
+                }
             }).catch((e) => {
                 block && this.memoizedFormContext.services.blocker.pop();
                 throw e;
@@ -516,11 +520,16 @@ class LajiForm extends React.Component {
         if (this.apiClient && "lang" in props && this.props.lang !== props.lang) {
             this.apiClient.setLang(props.lang);
         }
-        this.setState(this.getStateFromProps(props));
+        this.setState(this.getStateFromProps(props), this.popErrorListIfNeeded);
     }
     getStateFromProps(props) {
+        var _a;
         const state = {
-            formContext: this.getMemoizedFormContext(props)
+            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
         };
         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];
@@ -632,7 +641,7 @@ class LajiForm extends React.Component {
                 showShortcutsButton && this.props.showShortcutButton !== false && shortcuts && (React.createElement(components_1.TooltipComponent, { tooltip: this.getShorcutButtonTooltip() },
                     React.createElement(components_1.Button, { variant: undefined, onClick: this.toggleHelp }, translations.Shortcuts))),
                 React.createElement(components_1.FailedBackgroundJobsPanel, { jobs: this.state.submitHooks, schema: this.props.schema, uiSchema: uiSchema, formContext: this.state.formContext, errorClickHandler: this.memoizedFormContext.services.focus.focus, ref: this.bgJobRef }),
-                React.createElement(core_1.default, Object.assign({}, this.props, { formData: this.state.formData, uiSchema: uiSchema, ref: this.formRef, onChange: this.onChange, onSubmit: this.onSubmit, fields: this.getFields(this.props.fields), widgets: this.getWidgets(this.props.widgets), templates: this.getTemplates(this.props.templates), formContext: this.state.formContext, validator: validator_ajv6_1.default, noValidate: true, extraErrors: this.state.extraErrors, noHtml5Validate: true, liveValidate: true, autoComplete: "off", tagName: "div", readonly: readonly, disabled: disabled }), this.props.children),
+                React.createElement(core_1.default, Object.assign({}, this.props, { formData: this.state.formData, uiSchema: uiSchema, ref: this.formRef, onChange: this.onChange, onSubmit: this.onSubmit, fields: this.getFields(this.props.fields), widgets: this.getWidgets(this.props.widgets), templates: this.getTemplates(this.props.templates), formContext: this.state.formContext, validator: validator_ajv6_1.default, noValidate: true, extraErrors: this.state.extraErrors || {}, noHtml5Validate: true, liveValidate: true, autoComplete: "off", tagName: "div", readonly: readonly, disabled: disabled }), this.props.children),
                 (!this.props.children && this.props.renderSubmit !== false) ? (React.createElement(components_1.Button, { id: "submit", onClick: this.submit, disabled: readonly || disabled }, this.props.submitText || translations.Submit)) : null,
                 shortcuts &&
                     React.createElement(Panel, { ref: this.shortcutHelpRef, className: "shortcut-help laji-form-popped z-depth-3 hidden", style: { top: (this.props.topOffset || 0) + 5, bottom: (this.props.bottomOffset || 0) + 5 }, variant: "info" },

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

@@ -17,24 +17,14 @@ export default class CheckboxWidget extends React.Component<any, any, any> {
         value: PropTypes.Requireable<boolean>;
     };
     constructor(props: any);
-    trueRef: React.RefObject<any>;
-    falseRef: React.RefObject<any>;
-    undefinedRef: React.RefObject<any>;
-    groupRef: React.RefObject<any>;
-    componentDidMount(): void;
-    componentDidUpdate(): void;
-    rmInputTabIndices: () => void;
+    containerRef: React.RefObject<any>;
+    onKeyDown: (e: any) => void;
     onChange: (value: any) => void;
-    onButtonGroupChange: (value: any) => void;
+    onChangeTrue: () => void;
+    onChangeFalse: () => void;
+    onChangeUndefined: () => void;
     getOptions: (props: any) => any;
     render(): JSX.Element;
-    getToggleMode: (props: any) => boolean;
-    onGroupKeyDown: any;
-    onTrueKeyDown: any;
-    onFalseKeyDown: any;
-    onUndefinedKeyDown: any;
-    toggle: (e: any) => void;
-    formatValue(value: any, options: any, props: any): any;
 }
 import * as React from "react";
 import * as PropTypes from "prop-types";

package/lib/components/widgets/CheckboxWidget.js

@@ -37,133 +37,67 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const PropTypes = __importStar(require("prop-types"));
 const utils_1 = require("../../utils");
 const ReactContext_1 = __importDefault(require("../../ReactContext"));
 class CheckboxWidget extends React.Component {
     constructor(props) {
         super(props);
-        this.rmInputTabIndices = () => {
-            [this.trueRef, this.falseRef, this.undefinedRef].forEach(node => {
-                const domNode = (0, react_dom_1.findDOMNode)(node.current);
-                if (!domNode) {
-                    return;
-                }
-                const input = domNode.getElementsByTagName("input")[0];
-                if (!input) {
-                    return;
-                }
-                input.setAttribute("tabindex", -1);
-            });
+        this.containerRef = React.createRef();
+        this.onKeyDown = (e) => {
+            if (!e.key.startsWith("Arrow")) {
+                return;
+            }
+            const inputs = this.containerRef.current.querySelectorAll("input");
+            console.log(inputs, document.activeElement);
+            if (["ArrowRight", "ArrowDown"].includes(e.key) && document.activeElement === inputs[inputs.length - 1]) {
+                e.preventDefault();
+            }
+            else if (["ArrowLeft", "ArrowUp"].includes(e.key) && document.activeElement === inputs[0]) {
+                e.preventDefault();
+            }
         };
         this.onChange = (value) => {
             if (value !== undefined && this.getOptions(this.props).invert) {
                 value = !value;
             }
+            console.log("change", value);
             this.props.onChange(value);
         };
-        this.onButtonGroupChange = (value) => {
-            if (value === "undefined") {
-                value = undefined;
-            }
-            this.onChange(value);
-        };
+        this.onChangeTrue = () => this.onChange(true);
+        this.onChangeFalse = () => this.onChange(false);
+        this.onChangeUndefined = () => this.onChange(undefined);
         this.getOptions = (props) => {
             const { Yes, No, Unknown } = props.registry.formContext.translations;
             return Object.assign({ allowUndefined: true, showUndefined: true, invert: false, trueLabel: Yes, falseLabel: No, unknownLabel: Unknown, required: this.props.required }, (0, utils_1.getUiOptions)(props));
         };
-        this.getToggleMode = (props) => {
-            const { allowUndefined, showUndefined } = this.getOptions(props);
-            const displayUndefined = (allowUndefined && showUndefined);
-            return !displayUndefined;
-        };
-        this.onGroupKeyDown = this.props.formContext.utils.keyboardClick((e) => {
-            this.getToggleMode(this.props) && this.toggle(e);
-        });
-        this.onTrueKeyDown = this.props.formContext.utils.keyboardClick((e) => {
-            this.onChange(true);
-            e.preventDefault();
-            e.stopPropagation();
-        });
-        this.onFalseKeyDown = this.props.formContext.utils.keyboardClick((e) => {
-            this.onChange(false);
-            e.preventDefault();
-            e.stopPropagation();
-        });
-        this.onUndefinedKeyDown = this.props.formContext.utils.keyboardClick((e) => {
-            this.onChange(undefined);
-            e.preventDefault();
-            e.stopPropagation();
-        });
-        this.toggle = (e) => {
-            if (this.props.disabled || this.props.readonly) {
-                return;
-            }
-            const nodes = [this.trueRef, this.falseRef, this.groupRef].map(r => (0, react_dom_1.findDOMNode)(r.current));
-            if (!nodes.includes(e.target)) {
-                return;
-            }
-            e.preventDefault();
-            this.props.onChange(!this.props.value);
-        };
-        this.trueRef = React.createRef();
-        this.falseRef = React.createRef();
-        this.undefinedRef = React.createRef();
-        this.groupRef = React.createRef();
-    }
-    componentDidMount() {
-        this.rmInputTabIndices();
-    }
-    componentDidUpdate() {
-        this.rmInputTabIndices();
     }
     render() {
-        const { value, disabled, readonly, label, id } = this.props;
+        const { value, disabled, readonly, label } = this.props;
         const options = this.getOptions(this.props);
         const { allowUndefined, showUndefined, invert, trueLabel, falseLabel, unknownLabel, required, label: uiOptionsLabel } = options;
         const hasLabel = !(0, utils_1.isEmptyString)(label) && uiOptionsLabel !== false;
-        // "undefined" for silencing ToggleButton warning.
-        const _value = value === undefined
-            ? "undefined"
-            : invert
-                ? !value
-                : value;
-        const { ButtonToolbar, ToggleButton, ToggleButtonGroup } = this.context.theme;
+        const _value = invert
+            ? !value
+            : value;
         const displayUndefined = (allowUndefined && showUndefined);
-        const toggleMode = this.getToggleMode(this.props);
         const _disabled = disabled || readonly;
-        const commonProps = {
-            disabled: _disabled,
-            tabIndex: (toggleMode || _disabled) ? undefined : 0
-        };
         const tabTargetClass = "laji-form-checkbox-widget-tab-target";
-        const selectedValueGlyph = React.createElement("span", { className: "laji-form-checkbox-selected-value-glyph" });
-        const unselectedValueGlyph = React.createElement("span", { className: "laji-form-checkbox-unselected-value-glyph" });
-        const checkbox = (React.createElement(ButtonToolbar, { className: (0, 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: (0, 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: (0, utils_1.classNames)(_value === true && tabTargetClass), onKeyDown: this.onTrueKeyDown }, commonProps),
-                    _value === true ? selectedValueGlyph : unselectedValueGlyph,
-                    trueLabel),
-                React.createElement(ToggleButton, Object.assign({ id: `${id}-false`, ref: this.falseRef, value: false, onClick: toggleMode ? this.toggle : undefined, className: (0, utils_1.classNames)(_value === false && tabTargetClass), onKeyDown: this.onFalseKeyDown }, commonProps),
-                    _value === false ? selectedValueGlyph : unselectedValueGlyph,
-                    falseLabel),
-                (displayUndefined ?
-                    React.createElement(ToggleButton, Object.assign({ id: `${id}-undefined`, ref: this.undefinedRef, value: "undefined", className: (0, utils_1.classNames)(value === undefined && tabTargetClass) }, commonProps, { onKeyDown: this.onUndefinedKeyDown }),
-                        _value === "undefined" ? selectedValueGlyph : unselectedValueGlyph,
-                        unknownLabel) : null))));
+        const checkbox = (React.createElement("div", { ref: this.containerRef, className: "checkbox-container", disabled: _disabled },
+            React.createElement("label", null,
+                React.createElement("input", { type: "radio", value: "true", checked: _value === true, onChange: this.onChangeTrue, className: tabTargetClass, onKeyDown: this.onKeyDown }),
+                trueLabel),
+            React.createElement("label", null,
+                React.createElement("input", { type: "radio", value: "false", checked: _value === false, onChange: this.onChangeFalse, onKeyDown: this.onKeyDown }),
+                falseLabel),
+            displayUndefined && (React.createElement("label", null,
+                React.createElement("input", { type: "radio", value: "undefined", checked: _value === undefined, onChange: this.onChangeUndefined, onKeyDown: this.onKeyDown }),
+                unknownLabel))));
         const { Label } = this.props.formContext;
         return !hasLabel ? checkbox : React.createElement(React.Fragment, null,
             React.createElement(Label, { label: label, required: required, uiSchema: this.props.uiSchema, registry: this.props.registry, id: this.props.id }),
             checkbox);
     }
-    formatValue(value, options, props) {
-        return value === undefined
-            ? ""
-            : value === true
-                ? props.formContext.translations.Yes
-                : props.formContext.translations.No;
-    }
 }
 CheckboxWidget.contextType = ReactContext_1.default;
 CheckboxWidget.propTypes = {

package/lib/themes/bs3.js

@@ -164,6 +164,7 @@ const theme = {
     ControlLabel: ControlLabel_1.default,
     Checkbox: Checkbox_1.default,
     ToggleButton: ToggleButton_1.default,
-    ToggleButtonGroup: ToggleButtonGroup_1.default
+    ToggleButtonGroup: ToggleButtonGroup_1.default,
+    // Radio
 };
 exports.default = theme;

package/lib/utils.js

@@ -292,16 +292,18 @@ function isMultiSelect(schema, uiSchema) {
 function isSelect(schema) {
     return (0, utils_1.isSelect)(validator_ajv6_1.default, schema);
 }
-const SWITCH_CLASS = "laji-form-checkbox-widget-tab-target";
+const CHECKBOX_CLASS = "laji-form-checkbox-widget-tab-target";
 const IMG_ADD_CLASS = "laji-form-drop-zone";
 const tabbableSelectors = [
     "input",
     "select",
-    "textarea",
-    `.${SWITCH_CLASS}`,
+    "textarea"
+].map(type => `${type}:not([type="hidden"]):not(:disabled):not([readonly]):not([type="file"]):not(.leaflet-control-layers-selector):not(.laji-map-input):not([type="radio"])`);
+const tabbableSelectorsQuery = [
+    ...tabbableSelectors,
+    `.${CHECKBOX_CLASS}`,
     `.${IMG_ADD_CLASS}`
-].map(type => `${type}:not([type="hidden"]):not(:disabled):not([readonly]):not([type="file"]):not(.leaflet-control-layers-selector):not(.laji-map-input)`);
-const tabbableSelectorsQuery = tabbableSelectors.join(", ");
+].join(", ");
 function getTabbableFields(elem, reverse) {
     const fieldsNodeList = elem.querySelectorAll(tabbableSelectorsQuery);
     let fields = Array.from(fieldsNodeList).filter(node => node.tabIndex !== -1);
@@ -312,7 +314,7 @@ function getTabbableFields(elem, reverse) {
 function isTabbableInput(elem) {
     return elem.id.match(/^_laji-form_/)
         || ["input", "select", "textarea"].includes(elem.tagName.toLowerCase())
-        || elem.className.includes(SWITCH_CLASS)
+        || elem.className.includes(CHECKBOX_CLASS)
         || elem.className.includes(IMG_ADD_CLASS);
 }
 function canFocusNextInput(root, inputElem) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.71",
+  "version": "15.1.73",
   "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.js

@@ -228,14 +228,14 @@ class Form {
         });
     }
     getBooleanWidget(str) {
-        const $container = this.$locate(str).locator(".btn-toolbar");
+        const $container = this.$locate(str).locator(".checkbox-container");
         return {
             $container,
-            $true: $container.locator(".btn").nth(0), // eslint-disable-line  protractor/use-first-last
-            $false: $container.locator(".btn").nth(1),
-            $undefined: this.$locate(str).locator(".btn").nth(2),
-            $active: $container.locator(".btn.active"),
-            $nonactive: $container.locator(".btn:not(.active)").first()
+            $true: $container.locator("input").nth(0), // eslint-disable-line  protractor/use-first-last
+            $false: $container.locator("input").nth(1),
+            $undefined: this.$locate(str).locator("input").nth(2),
+            $active: $container.locator("input[checked]"),
+            $nonactive: $container.locator("input:not([checked])").first()
         };
     }
     $getInputWidget(str) {