@luomus/laji-form 15.1.53 → 15.1.55

package/lib/components/widgets/SelectWidget.js

@@ -56,6 +56,7 @@ exports.default = SelectWidget;
 function SearchableDrowndown(props) {
     const { id, disabled, readonly, value, uiSchema, options, onChange, includeEmpty = true } = props;
     const { theme } = react_1.useContext(ReactContext_1.default);
+    const { FormControl } = theme;
     const containerRef = react_1.useRef(null);
     const inputRef = react_1.useRef(null);
     const dropdownRef = react_1.useRef(null);
@@ -66,35 +67,28 @@ function SearchableDrowndown(props) {
         // 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) => {
-        const { value } = e.target;
-        setInputValue(value);
-        setInputTouched(true);
-    }, []);
-    react_1.useEffect(() => {
-        inputTouched && setFilterTerm(inputValue);
-    }, [inputTouched, inputValue]);
-    // Sync inputValue if value changes.
-    react_1.useEffect(() => {
-        if (inputTouched) {
-            return;
-        }
-        setInputValue(getLabelFromValue(value));
-    }, [inputTouched, value, enumOptions, getLabelFromValue]);
+    const [filterTerm, setFilterTerm] = react_1.useState(undefined);
+    const [isOpen, show, hide] = utils_1.useBooleanSetter(false);
     const displayedEnums = react_1.useMemo(() => {
-        return filterTerm !== ""
+        return filterTerm !== undefined && filterTerm !== ""
             ? enumOptions.filter(({ label }) => label.toLowerCase().match(filterTerm.toLowerCase()))
             : enumOptions;
     }, [filterTerm, enumOptions]);
-    const [isOpen, show, hide] = utils_1.useBooleanSetter(false);
-    const { FormControl } = theme;
     const [activeIdx, activeIdxUp, activeIdxDown, setActiveIdx] = useRangeIncrementor((displayedEnums || []).length, getDefaultActiveIdx(displayedEnums, value));
+    const inputValue = filterTerm !== null && filterTerm !== void 0 ? filterTerm : getLabelFromValue(value);
+    const showAndSelectText = react_1.useCallback(() => {
+        var _a;
+        show();
+        (_a = react_dom_1.findDOMNode(inputRef.current)) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, inputValue.length);
+    }, [show, inputValue.length]);
+    const onInputChange = react_1.useCallback((e) => {
+        const { value } = e.target;
+        setFilterTerm(value);
+        setActiveIdx(0);
+    }, [setActiveIdx]);
     const onItemSelected = react_1.useCallback((item) => {
         onChange(item.value);
-        setInputTouched(false);
+        setFilterTerm(undefined);
         setActiveIdx(displayedEnums.findIndex(enu => enu.value === item.value));
         hide();
     }, [displayedEnums, hide, onChange, setActiveIdx]);
@@ -109,39 +103,46 @@ function SearchableDrowndown(props) {
             onItemSelected(displayedEnums[activeIdx]);
         }
         else {
-            setInputValue("");
+            setFilterTerm(undefined);
         }
         hide();
     }, [activeIdx, displayedEnums, hide, onItemSelected]);
     const onKeyDown = react_1.useCallback((e) => {
         switch (e.key) {
             case "ArrowDown":
-                activeIdxDown();
+                if (!isOpen) {
+                    showAndSelectText();
+                }
+                else {
+                    activeIdxDown();
+                }
                 e.preventDefault();
                 break;
             case "ArrowUp":
-                activeIdxUp();
+                if (!isOpen) {
+                    showAndSelectText();
+                }
+                else {
+                    activeIdxUp();
+                }
                 e.preventDefault();
                 break;
             case "Enter":
-                activeIdx !== undefined && displayedEnums && onItemSelected(displayedEnums[activeIdx]);
+                if (activeIdx !== undefined && displayedEnums) {
+                    onItemSelected(displayedEnums[activeIdx]);
+                }
                 e.preventDefault();
                 break;
             case "Escape":
-                setInputValue("");
+                setFilterTerm(undefined);
                 setActiveIdx(getDefaultActiveIdx(displayedEnums, value));
                 e.preventDefault();
                 break;
         }
-    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, onItemSelected, setActiveIdx, value]);
-    const onFocus = react_1.useCallback(() => {
-        var _a;
-        show();
-        (_a = react_dom_1.findDOMNode(inputRef.current)) === null || _a === void 0 ? void 0 : _a.setSelectionRange(0, inputValue.length);
-    }, [inputValue.length, show]);
+    }, [activeIdx, activeIdxDown, activeIdxUp, displayedEnums, isOpen, onItemSelected, setActiveIdx, showAndSelectText, value]);
     return (React.createElement("div", { onBlur: onBlur, onKeyDown: onKeyDown, ref: containerRef, style: { position: "relative" }, className: "laji-form-dropdown-container" },
-        React.createElement(FormControl, { disabled: disabled || readonly, id: id, onFocus: onFocus, value: inputValue, onChange: onInputChange, autoComplete: "off", ref: inputRef }),
-        React.createElement(Caret, { onFocus: onFocus }),
+        React.createElement(FormControl, { disabled: disabled || readonly, id: id, onClick: showAndSelectText, onFocus: showAndSelectText, value: inputValue, onChange: onInputChange, autoComplete: "off", ref: inputRef }),
+        React.createElement(Caret, null),
         React.createElement("div", { className: `laji-form-dropdown laji-form-dropdown-${isOpen ? "open" : "closed"}`, style: { position: "absolute" }, tabIndex: -1, ref: dropdownRef }, displayedEnums.map((oneOf, idx) => {
             var _a;
             return (React.createElement(ListItem, { key: (_a = oneOf.value) !== null && _a !== void 0 ? _a : "", onSelected: onItemSelected, active: idx === activeIdx }, oneOf));
@@ -153,7 +154,7 @@ function SearchableMultiDrowndown(props) {
         ? undefined
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         : getEnumOptions(options.enumOptions, uiSchema, false));
-    const [inputValue, setInputValue] = react_1.useState("");
+    const [inputValue, setUserTypedInputValue] = react_1.useState("");
     const [filterTerm, setFilterTerm] = react_1.useState("");
     const [loading, setLoading] = react_1.useState(undefined);
     const [isOpen, show, hide] = utils_1.useBooleanSetter(false);
@@ -161,7 +162,7 @@ function SearchableMultiDrowndown(props) {
     const inputRef = React.useRef(null);
     const onInputChange = react_1.useCallback((e) => {
         const { value } = e.target;
-        setInputValue(value);
+        setUserTypedInputValue(value);
     }, []);
     React.useEffect(() => {
         setFilterTerm(inputValue);
@@ -244,7 +245,7 @@ function SearchableMultiDrowndown(props) {
             onItemSelectedByBlur(displayedEnums[activeIdx]);
         }
         else {
-            setInputValue("");
+            setUserTypedInputValue("");
         }
     }, [activeIdx, displayedEnums, hide, onItemSelectedByBlur, setBlurred]);
     const onKeyDown = react_1.useCallback((e) => {
@@ -262,7 +263,7 @@ function SearchableMultiDrowndown(props) {
                 e.preventDefault();
                 break;
             case "Escape":
-                setInputValue("");
+                setUserTypedInputValue("");
                 setActiveIdx(undefined);
                 e.preventDefault();
                 break;
@@ -296,7 +297,7 @@ function SearchableMultiDrowndown(props) {
                 .map(enu => React.createElement(SelectedMultiValue, { key: enu.value, onDelete: onDelete, readonly: readonly || disabled }, enu))),
             React.createElement("input", { disabled: disabled || readonly, id: id, onFocus: onFocus, value: inputValue, onChange: onInputChange, autoComplete: "off", ref: inputRef }),
             loading && React.createElement(Spinner, null)),
-        React.createElement(Caret, { onFocus: onFocus }),
+        React.createElement(Caret, null),
         React.createElement("div", { className: `laji-form-dropdown laji-form-dropdown-${isOpen ? "open" : "closed"}`, style: { position: "absolute", zIndex: 99999 }, tabIndex: -1 }, displayedEnums.map((oneOf, idx) => {
             var _a;
             return (React.createElement(ListItem, { key: (_a = oneOf.value) !== null && _a !== void 0 ? _a : "", onSelected: onItemSelected, active: idx === activeIdx }, oneOf));
@@ -308,9 +309,9 @@ const SelectedMultiValue = ({ children: enu, onDelete, readonly }) => {
         enu.label,
         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" },
-        React.createElement("img", { src: "https://cdn.laji.fi/images/icons/caret-down.svg" })));
+const Caret = () => (React.createElement("div", { className: "laji-form-dropdown-caret-container", style: { position: "absolute", pointerEvents: "none" } },
+    React.createElement("span", { 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

@@ -873,5 +873,10 @@
         "fi": "Klikkaa järjestääksesi",
         "en": "Click to sort",
         "sv": "Klicka för att sortera"
+    },
+    "addField": {
+        "fi": "Lisää kenttä",
+        "en": "Add field",
+        "sv": "Lägg till fält"
     }
 }

package/lib/utils.js

@@ -784,6 +784,9 @@ function checkRules(rules, props, cache, prop = "formData") {
             if (_rule === "isAdmin") {
                 passes = props.formContext.uiSchemaContext.isAdmin;
             }
+            else if (_rule === "isLoggedIn") {
+                passes = props.formContext.uiSchemaContext.creator;
+            }
             else if (_rule === "isEdit") {
                 passes = props.formContext.uiSchemaContext.isEdit;
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@luomus/laji-form",
-  "version": "15.1.53",
+  "version": "15.1.55",
   "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

@@ -292,9 +292,16 @@ class DemoPageForm extends Form {
         return this.page.evaluate(`window.lajiForm.${path}`);
     }
     setState(state) {
-        const onSubmit = "function(data) {window.submittedData = data.formData;}";
-        const onChange = "function(formData) {window.changedData = formData;}";
-        return this.e(`setState({onSubmit: ${onSubmit}, onChange: ${onChange}, ...${JSON.stringify(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,
+                onChange }, (state || {})));
+        }, state);
     }
     getState() {
         return this.page.evaluate(() => {