@luomus/laji-form 15.1.47 → 15.1.49

package/lib/components/fields/SchemaField.js

@@ -81,7 +81,10 @@ class _SchemaField extends React.Component {
         const props = this.functionOutputProps || this.props;
         let { schema, uiSchema = {}, formContext, registry } = props, _props = __rest(props, ["schema", "uiSchema", "formContext", "registry"]); // eslint-disable-line @typescript-eslint/no-unused-vars
         const { formContext: _formContext } = registry;
-        if (schema.uniqueItems && schema.items.enum && !utils_1.isMultiSelect(schema, uiSchema) && schema.uniqueItems) {
+        // rjsf displays a duplicate label if 'uniqueItems' is true in some cases. We prevent that here.
+        // Example of when it shows duplicate is http://localhost:8083/?id=JX.652&local=true, "Elinympäristö" on gathering
+        // level.
+        if (props.schema.type === "array" && props.uiSchema && props.uiSchema.items && props.uiSchema.items["ui:field"]) {
             schema = Object.assign(Object.assign({}, schema), { uniqueItems: false });
         }
         const options = utils_1.getUiOptions(uiSchema);

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

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+import { FieldProps, JSONSchemaEnum } from "../../types";
 /**
  * Constructs selects from given tree.
  * uiSchema = {"ui:options": {
@@ -5,35 +7,4 @@
 *   labels: [<string>]
  * }
  */
-export default class SelectTreeField extends React.Component<any, any, any> {
-    static propTypes: {
-        uiSchema: PropTypes.Validator<PropTypes.InferProps<{
-            "ui:options": PropTypes.Validator<PropTypes.InferProps<{
-                tree: PropTypes.Validator<object>;
-                labels: PropTypes.Requireable<(string | null | undefined)[]>;
-                uiSchema: PropTypes.Requireable<object>;
-            }>>;
-        }>>;
-        schema: PropTypes.Validator<PropTypes.InferProps<{
-            type: PropTypes.Requireable<string>;
-        }>>;
-        value: PropTypes.Requireable<string>;
-    };
-    constructor(props: any);
-    constructor(props: any, context: any);
-    getStateFromProps(props: any): {
-        schema: {
-            type: string;
-            title: any;
-        };
-        formData: {};
-        uiSchema: any;
-        idSchema: {
-            $id: any;
-        };
-    };
-    onChange: (formData: any) => void;
-    onKeyDown: (e: any) => void;
-}
-import * as React from "react";
-import * as PropTypes from "prop-types";
+export default function SelectTreeField(props: FieldProps<JSONSchemaEnum>): JSX.Element;

package/lib/components/fields/SelectTreeField.js

@@ -1,15 +1,8 @@
 "use strict";
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = require("react");
-const PropTypes = require("prop-types");
 const utils_1 = require("../../utils");
-const BaseComponent_1 = require("../BaseComponent");
+const react_1 = require("react");
 /**
  * Constructs selects from given tree.
  * uiSchema = {"ui:options": {
@@ -17,127 +10,97 @@ const BaseComponent_1 = require("../BaseComponent");
 *   labels: [<string>]
  * }
  */
-let SelectTreeField = class SelectTreeField extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.onChange = (formData) => {
-            let selectNames = Object.keys(formData).sort((a, b) => { return b - a; });
-            for (let i in selectNames) {
-                if (formData[i] !== this.state.formData[i]) {
-                    let value;
-                    if (utils_1.isEmptyString(formData[i])) {
-                        value = (i > 0) ? formData[i - 1] : undefined;
-                    }
-                    else {
-                        value = formData[i];
-                    }
-                    this.props.onChange(value);
-                    break;
+function SelectTreeField(props) {
+    const childProps = getChildProps(props);
+    const { onChange: parentOnChange } = props;
+    const { formData: childFormData } = childProps;
+    const onChange = react_1.useCallback((formData) => {
+        let selectNames = Object.keys(formData).sort((a, b) => { return +b - +a; });
+        for (let i in selectNames) {
+            if (formData[i] !== childFormData[i]) {
+                let value;
+                if (utils_1.isEmptyString(formData[i])) {
+                    value = (+i > 0) ? formData[+i - 1] : undefined;
                 }
+                else {
+                    value = formData[i];
+                }
+                parentOnChange(value);
+                break;
             }
-        };
-        this.onKeyDown = (e) => {
-            if (e.key == "Enter" && !e.ctrlKey) {
-                e.preventDefault();
-                e.stopPropagation();
-                this.props.formContext.setTimeout(() => {
-                    this.props.formContext.services.focus.focusNextInput(e.shiftKey);
-                });
-            }
-        };
-    }
-    getStateFromProps(props) {
-        let schema = { "type": "object", title: props.schema.title };
-        let { uiSchema } = props;
-        uiSchema = utils_1.getInnerUiSchema(props.uiSchema);
-        let formData = {};
-        let idSchema = { $id: props.idSchema.$id };
-        let dictionarifiedEnums = {};
-        props.schema.oneOf.forEach(e => {
-            dictionarifiedEnums[e.const] = e.title;
-        });
-        let { tree, labels } = utils_1.getUiOptions(props.uiSchema);
-        let levels = [];
-        let parentsMap = {};
-        let childrenMap = {};
-        let orderMap = {};
-        function getLevels(tree, depth, root) {
-            childrenMap[root] = {};
-            if (tree.children)
-                Object.keys(tree.children).forEach(key => {
-                    if (!levels[depth])
-                        levels[depth] = {};
-                    levels[depth][key] = true;
-                    parentsMap[key] = root;
-                    childrenMap[root][key] = true;
-                    getLevels(tree.children[key], depth + 1, key);
-                });
-            if (tree.order)
-                orderMap[root] = tree.order;
         }
-        getLevels(tree, 0);
-        let properties = {};
-        function addSelect(depth, key, childrenKeys) {
-            let select = { "type": "string", oneOf: [{ const: "", title: "" }] };
-            let order = orderMap[key];
-            if (order)
-                childrenKeys.sort((a, b) => { return order.indexOf(a) - order.indexOf(b); });
-            childrenKeys.forEach(key => {
-                select.oneOf.push({ const: key, title: dictionarifiedEnums[key] });
-            });
-            if (labels && labels[depth]) {
-                select.title = labels[depth];
-            }
-            select.title = (labels && labels[depth]) ? labels[depth] : "";
-            properties[depth] = select;
-            idSchema[depth] = { $id: idSchema.$id + "_" + depth };
+    }, [childFormData, parentOnChange]);
+    const SchemaField = props.registry.fields.SchemaField;
+    return React.createElement(SchemaField, Object.assign({}, props, childProps, { onChange: onChange }));
+}
+exports.default = SelectTreeField;
+const getChildProps = (props) => {
+    let schema = { "type": "object", title: props.schema.title };
+    let formData = {};
+    let idSchema = { $id: props.idSchema.$id };
+    let dictionarifiedEnums = {};
+    props.schema.oneOf.forEach(e => {
+        dictionarifiedEnums[e.const] = e.title;
+    });
+    const tree = utils_1.getUiOptions(props.uiSchema).tree;
+    let levels = [];
+    let parentsMap = {};
+    let childrenMap = {};
+    let orderMap = {};
+    function getLevels(tree, depth, root) {
+        childrenMap[root] = {};
+        if (!tree.children) {
+            return;
         }
-        let searchTerm = props.formData;
-        let depth = 0;
-        if (!utils_1.isEmptyString(searchTerm))
-            for (let i in levels) {
-                let level = levels[i];
-                if (level[searchTerm])
-                    break;
-                depth++;
-            }
-        let n = searchTerm;
-        let d = depth;
-        while (d >= 0) {
-            formData[d] = n;
-            if (utils_1.isEmptyString(n))
-                n = undefined; //object keys can't be "", so root key is in childrenMap 'undefined'.
-            addSelect(d, n, Object.keys(childrenMap[parentsMap[n]]));
-            d--;
-            n = parentsMap[n];
+        Object.keys(tree.children).forEach(key => {
+            if (!levels[depth])
+                levels[depth] = {};
+            levels[depth][key] = true;
+            parentsMap[key] = root;
+            childrenMap[root][key] = true;
+            getLevels(tree.children[key], depth + 1, key);
+        });
+        orderMap[root] = tree.order;
+    }
+    getLevels(tree, 0);
+    let properties = {};
+    function addSelect(depth, key, childrenKeys) {
+        let select = { type: "string", oneOf: [{ const: "", title: "" }] };
+        let order = orderMap[key];
+        if (order) {
+            childrenKeys.sort((a, b) => { return order.indexOf(a) - order.indexOf(b); });
+        }
+        childrenKeys.forEach(key => {
+            select.oneOf.push({ const: key, title: dictionarifiedEnums[key] });
+        });
+        select.title = "";
+        properties[depth] = select;
+        idSchema[depth] = { $id: idSchema.$id + "_" + depth };
+    }
+    let searchTerm = props.formData;
+    let depth = 0;
+    if (!utils_1.isEmptyString(searchTerm)) {
+        for (const level of levels) {
+            if (level[searchTerm])
+                break;
+            depth++;
         }
-        if (!utils_1.isEmptyString(searchTerm) && childrenMap[searchTerm] && Object.keys(childrenMap[searchTerm]).length) {
-            addSelect(depth + 1, searchTerm, Object.keys(childrenMap[searchTerm]));
-            formData[depth + 1] = undefined;
+    }
+    let n = searchTerm;
+    let d = depth;
+    while (d >= 0) {
+        formData[d] = n;
+        if (utils_1.isEmptyString(n)) {
+            n = undefined; //object keys can't be "", so root key is in childrenMap 'undefined'.
         }
-        schema.properties = properties;
-        return { schema, formData, uiSchema, idSchema };
+        addSelect(d, n, Object.keys(childrenMap[parentsMap[n]]));
+        d--;
+        n = parentsMap[n];
     }
-    render() {
-        const SchemaField = this.props.registry.fields.SchemaField;
-        return (React.createElement("div", { onKeyDown: this.onKeyDown },
-            React.createElement(SchemaField, Object.assign({}, this.props, this.state, { onChange: this.onChange }))));
+    if (!utils_1.isEmptyString(searchTerm) && childrenMap[searchTerm] && Object.keys(childrenMap[searchTerm]).length) {
+        addSelect(depth + 1, searchTerm, Object.keys(childrenMap[searchTerm]));
+        formData[depth + 1] = undefined;
     }
+    schema.properties = properties;
+    return { schema, formData, uiSchema: utils_1.getInnerUiSchema(props.uiSchema), idSchema };
 };
-SelectTreeField.propTypes = {
-    uiSchema: PropTypes.shape({
-        "ui:options": PropTypes.shape({
-            tree: PropTypes.object.isRequired,
-            labels: PropTypes.arrayOf(PropTypes.string),
-            uiSchema: PropTypes.object
-        }).isRequired
-    }).isRequired,
-    schema: PropTypes.shape({
-        type: PropTypes.oneOf(["string"])
-    }).isRequired,
-    value: PropTypes.string
-};
-SelectTreeField = __decorate([
-    BaseComponent_1.default
-], SelectTreeField);
-exports.default = SelectTreeField;

package/lib/components/widgets/SelectWidget.js

@@ -55,17 +55,18 @@ function SelectWidget(props) {
 exports.default = SelectWidget;
 function SearchableDrowndown(props) {
     const { id, disabled, readonly, value, uiSchema, options, onChange, includeEmpty = true } = props;
-    const { theme } = React.useContext(ReactContext_1.default);
-    const containerRef = React.useRef(null);
-    const inputRef = React.useRef(null);
-    const dropdownRef = React.useRef(null);
-    const enumOptions = React.useMemo(() => 
+    const { theme } = react_1.useContext(ReactContext_1.default);
+    const containerRef = react_1.useRef(null);
+    const inputRef = react_1.useRef(null);
+    const dropdownRef = react_1.useRef(null);
+    const enumOptions = react_1.useMemo(() => 
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     getEnumOptions(options.enumOptions, uiSchema, includeEmpty), [options.enumOptions, uiSchema, includeEmpty]);
-    const [inputValue, setInputValue] = react_1.useState(value
+    const getLabelFromValue = react_1.useCallback((value) => value !== undefined
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         ? enumOptions.find(item => item.value === value).label
-        : "");
+        : "", [enumOptions]);
+    const [inputValue, setInputValue] = react_1.useState(getLabelFromValue(value));
     const [inputTouched, setInputTouched] = react_1.useState(false);
     const [filterTerm, setFilterTerm] = react_1.useState("");
     const onInputChange = react_1.useCallback((e) => {
@@ -73,10 +74,17 @@ function SearchableDrowndown(props) {
         setInputValue(value);
         setInputTouched(true);
     }, []);
-    React.useEffect(() => {
+    react_1.useEffect(() => {
         inputTouched && setFilterTerm(inputValue);
     }, [inputTouched, inputValue]);
-    const displayedEnums = React.useMemo(() => {
+    // Sync inputValue if value changes.
+    react_1.useEffect(() => {
+        if (inputTouched) {
+            return;
+        }
+        setInputValue(getLabelFromValue(value));
+    }, [inputTouched, value, enumOptions, getLabelFromValue]);
+    const displayedEnums = react_1.useMemo(() => {
         return filterTerm !== ""
             ? enumOptions.filter(({ label }) => label.toLowerCase().match(filterTerm.toLowerCase()))
             : enumOptions;
@@ -86,7 +94,6 @@ function SearchableDrowndown(props) {
     const [activeIdx, activeIdxUp, activeIdxDown, setActiveIdx] = useRangeIncrementor((displayedEnums || []).length, getDefaultActiveIdx(displayedEnums, value));
     const onItemSelected = react_1.useCallback((item) => {
         onChange(item.value);
-        setInputValue(item.label);
         setInputTouched(false);
         setActiveIdx(displayedEnums.findIndex(enu => enu.value === item.value));
         hide();
@@ -179,13 +186,11 @@ function SearchableMultiDrowndown(props) {
     const onItemSelected = react_1.useCallback((item) => {
         var _a;
         onChange([...(value || []), item.value]);
-        setInputValue("");
         (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
         setActiveIdx(undefined);
     }, [onChange, setActiveIdx, value]);
     const onItemSelectedByBlur = react_1.useCallback((item) => {
         onChange([...(value || []), item.value]);
-        setInputValue("");
         setActiveIdx(undefined);
     }, [onChange, setActiveIdx, value]);
     const [isFocused, setFocused, setBlurred] = utils_1.useBooleanSetter(false);

package/package.json

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