@luomus/laji-form 15.1.72 → 15.1.74

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/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,25 +37,24 @@ 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");
+            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) {
@@ -63,107 +62,40 @@ class CheckboxWidget extends React.Component {
             }
             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" },
+            React.createElement("label", null,
+                React.createElement("input", { type: "radio", value: "true", checked: _value === true, onChange: this.onChangeTrue, className: tabTargetClass, onKeyDown: this.onKeyDown, disabled: _disabled }),
+                trueLabel),
+            React.createElement("label", null,
+                React.createElement("input", { type: "radio", value: "false", checked: _value === false, onChange: this.onChangeFalse, onKeyDown: this.onKeyDown, disabled: _disabled }),
+                falseLabel),
+            displayUndefined && (React.createElement("label", null,
+                React.createElement("input", { type: "radio", value: "undefined", checked: _value === undefined, onChange: this.onChangeUndefined, onKeyDown: this.onKeyDown, disabled: _disabled }),
+                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.72",
+  "version": "15.1.74",
   "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) {