@saltcorn/builder 0.7.3-beta.6 → 0.7.4-beta.0

package/src/components/elements/Link.js

@@ -13,6 +13,7 @@ import {
   OrFormula,
   ButtonOrLinkSettingsRows,
   DynamicFontAwesomeIcon,
+  setAPropGen,
 } from "./utils";
 import optionsCtx from "../context";
 
@@ -111,12 +112,7 @@ const LinkSettings = () => {
     transfer_state,
   } = node;
   const options = useContext(optionsCtx);
-  const setAProp = (key) => (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
-      setProp((prop) => (prop[key] = target_value));
-    }
-  };
+  const setAProp = setAPropGen(setProp);
   return (
     <div>
       <table className="w-100">
@@ -144,14 +140,16 @@ const LinkSettings = () => {
               <select
                 value={link_src}
                 className="form-control form-select"
-                onChange={(e) =>
+                onChange={(e) => {
+                  if (!e.target) return;
+                  const value = e.target.value;
                   setProp((prop) => {
-                    prop.link_src = e.target.value;
+                    prop.link_src = value;
                     if (e.target.value !== "URL") {
                       prop.isFormula.url = false;
                     }
-                  })
-                }
+                  });
+                }}
               >
                 <option>URL</option>
                 {(options.pages || []).length > 0 && <option>Page</option>}
@@ -237,9 +235,7 @@ const LinkSettings = () => {
           name="block"
           type="checkbox"
           checked={nofollow}
-          onChange={(e) =>
-            setProp((prop) => (prop.nofollow = e.target.checked))
-          }
+          onChange={setAProp("nofollow", { checked: true })}
         />
         <label className="form-check-label">Nofollow</label>
       </div>
@@ -249,9 +245,7 @@ const LinkSettings = () => {
           name="block"
           type="checkbox"
           checked={target_blank}
-          onChange={(e) =>
-            setProp((prop) => (prop.target_blank = e.target.checked))
-          }
+          onChange={setAProp("target_blank", { checked: true })}
         />
         <label className="form-check-label">Open in new tab</label>
       </div>
@@ -261,9 +255,7 @@ const LinkSettings = () => {
           name="block"
           type="checkbox"
           checked={in_modal}
-          onChange={(e) =>
-            setProp((prop) => (prop.in_modal = e.target.checked))
-          }
+          onChange={setAProp("in_modal", { checked: true })}
         />
         <label className="form-check-label">Open in popup modal?</label>
       </div>
@@ -275,9 +267,7 @@ const LinkSettings = () => {
             name="block"
             type="checkbox"
             checked={transfer_state}
-            onChange={(e) =>
-              setProp((prop) => (prop.transfer_state = e.target.checked))
-            }
+            onChange={setAProp("transfer_state", { checked: true })}
           />
           <label className="form-check-label">Transfer state</label>
         </div>

package/src/components/elements/SearchBar.js

@@ -9,6 +9,7 @@ import { Element, useNode } from "@craftjs/core";
 import { Column } from "./Column";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import { setAPropGen } from "./utils";
 
 export /**
  * @param {object} props
@@ -92,6 +93,7 @@ const SearchBarSettings = () => {
     has_dropdown: node.data.props.has_dropdown,
     show_badges: node.data.props.show_badges,
   }));
+  const setAProp = setAPropGen(setProp);
 
   return (
     <div>
@@ -101,9 +103,7 @@ const SearchBarSettings = () => {
           name="block"
           type="checkbox"
           checked={has_dropdown}
-          onChange={(e) =>
-            setProp((prop) => (prop.has_dropdown = e.target.checked))
-          }
+          onChange={setAProp("has_dropdown", { checked: true })}
         />
         <label className="form-check-label">Has Dropdown</label>
       </div>
@@ -113,9 +113,7 @@ const SearchBarSettings = () => {
           name="block"
           type="checkbox"
           checked={show_badges}
-          onChange={(e) =>
-            setProp((prop) => (prop.show_badges = e.target.checked))
-          }
+          onChange={setAProp("show_badges", { checked: true })}
         />
         <label className="form-check-label">Show current state badges</label>
       </div>

package/src/components/elements/Tabs.js

@@ -8,6 +8,7 @@ import React, { Fragment, useState, useContext, useEffect } from "react";
 import { ntimes } from "./Columns";
 import { Column } from "./Column";
 import optionsCtx from "../context";
+import { setAPropGen } from "./utils";
 
 import { Element, useNode } from "@craftjs/core";
 
@@ -194,6 +195,8 @@ const TabsSettings = () => {
           }
         });
   }, [field]);
+  const setAProp = setAPropGen(setProp);
+
   return (
     <table className="w-100" accordiontitle="Placement">
       <tbody>
@@ -205,11 +208,7 @@ const TabsSettings = () => {
             <select
               value={tabsStyle}
               className="form-control form-select"
-              onChange={(e) =>
-                setProp((prop) => {
-                  prop.tabsStyle = e.target.value;
-                })
-              }
+              onChange={setAProp("tabsStyle")}
             >
               <option>Tabs</option>
               <option>Pills</option>
@@ -229,9 +228,7 @@ const TabsSettings = () => {
               <select
                 value={field}
                 className="form-control form-select"
-                onChange={(e) => {
-                  setProp((prop) => (prop.field = e.target.value));
-                }}
+                onChange={setAProp("field")}
               >
                 {options.fields.map((f, ix) => (
                   <option key={ix} value={f.name}>
@@ -255,9 +252,7 @@ const TabsSettings = () => {
                   step="1"
                   min="0"
                   max="20"
-                  onChange={(e) =>
-                    setProp((prop) => (prop.ntabs = e.target.value))
-                  }
+                  onChange={setAProp("ntabs")}
                 />
               </td>
             </tr>
@@ -272,9 +267,11 @@ const TabsSettings = () => {
                     type="text"
                     className="form-control text-to-display"
                     value={titles[ix]}
-                    onChange={(e) =>
-                      setProp((prop) => (prop.titles[ix] = e.target.value))
-                    }
+                    onChange={(e) => {
+                      if (!e.target) return;
+                      const value = e.target.value;
+                      setProp((prop) => (prop.titles[ix] = value));
+                    }}
                   />
                 </td>
               </tr>
@@ -288,13 +285,7 @@ const TabsSettings = () => {
                       name="block"
                       type="checkbox"
                       checked={independent}
-                      onChange={(e) => {
-                        if (e.target) {
-                          setProp(
-                            (prop) => (prop.independent = e.target.checked)
-                          );
-                        }
-                      }}
+                      onChange={setAProp("independent", { checked: true })}
                     />
                     <label className="form-check-label">
                       Open independently
@@ -311,11 +302,7 @@ const TabsSettings = () => {
                       name="block"
                       type="checkbox"
                       checked={deeplink}
-                      onChange={(e) => {
-                        if (e.target) {
-                          setProp((prop) => (prop.deeplink = e.target.checked));
-                        }
-                      }}
+                      onChange={setAProp("deeplink", { checked: true })}
                     />
                     <label className="form-check-label">Deep link</label>
                   </div>

package/src/components/elements/Text.js

@@ -17,6 +17,7 @@ import {
   isBlock,
   reactifyStyles,
   SettingsRow,
+  setAPropGen,
 } from "./utils";
 import ContentEditable from "react-contenteditable";
 import optionsCtx from "../context";
@@ -121,7 +122,9 @@ const Text = ({
             html={text}
             style={{ display: "inline" }}
             disabled={!editable}
-            onChange={(e) => setProp((props) => (props.text = e.target.value))}
+            onChange={(e) =>
+              e?.target && setProp((props) => (props.text = e.target.value))
+            }
           />
         </Fragment>
       ) : editable ? (
@@ -175,12 +178,7 @@ const TextSettings = () => {
     style,
   } = node;
   const { mode, fields } = useContext(optionsCtx);
-  const setAProp = (key) => (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
-      setProp((prop) => (prop[key] = target_value));
-    }
-  };
+  const setAProp = setAPropGen(setProp);
   return (
     <div>
       {mode === "show" && (
@@ -189,9 +187,11 @@ const TextSettings = () => {
             type="checkbox"
             className="form-check-input"
             checked={isFormula.text}
-            onChange={(e) =>
-              setProp((prop) => (prop.isFormula.text = e.target.checked))
-            }
+            onChange={(e) => {
+              if (!e.target) return;
+              const checked = e.target.checked;
+              setProp((prop) => (prop.isFormula.text = checked));
+            }}
           />
           <label className="form-check-label">Formula?</label>
         </div>

package/src/components/elements/ToggleFilter.js

@@ -7,7 +7,7 @@
 import React, { useContext, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
-import { blockProps, BlockSetting, TextStyleRow } from "./utils";
+import { blockProps, BlockSetting, TextStyleRow, setAPropGen } from "./utils";
 
 export /**
  * @param {object} props
@@ -78,12 +78,7 @@ const ToggleFilterSettings = () => {
   const field = options.fields.find((f) => f.name === name);
   const preset_options = field.preset_options;
   const isBool = field && field.type.name === "Bool";
-  const setAProp = (key) => (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
-      setProp((prop) => (prop[key] = target_value));
-    }
-  };
+  const setAProp = setAPropGen(setProp);
   return (
     <table className="w-100">
       <tbody>
@@ -96,13 +91,15 @@ const ToggleFilterSettings = () => {
               value={name}
               className="form-control form-select"
               onChange={(e) => {
-                setProp((prop) => (prop.name = e.target.value));
-                const field = options.fields.find(
-                  (f) => f.name === e.target.value
-                );
-                const isBool = field && field.type.name === "Bool";
-                if (isBool) setProp((prop) => (prop.value = "on"));
-                setProp((prop) => (prop.preset_value = ""));
+                if (e?.target) {
+                  if (!e.target) return;
+                  const value = e.target.value;
+                  setProp((prop) => (prop.name = value));
+                  const field = options.fields.find((f) => f.name === value);
+                  const isBool = field && field.type.name === "Bool";
+                  if (isBool) setProp((prop) => (prop.value = "on"));
+                  setProp((prop) => (prop.preset_value = ""));
+                }
               }}
             >
               {options.fields.map((f, ix) => (

package/src/components/elements/View.js

@@ -15,6 +15,7 @@ import {
   MinRoleSetting,
   fetchViewPreview,
   ConfigForm,
+  setAPropGen,
 } from "./utils";
 
 export /**
@@ -99,18 +100,17 @@ const ViewSettings = () => {
     options.fixed_state_fields && options.fixed_state_fields[view];
   const { setPreviews } = useContext(previewCtx);
 
-  const setAProp = (key) => (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
-      setProp((prop) => (prop[key] = target_value));
-    }
-  };
+  const setAProp = setAPropGen(setProp);
   let errorString = false;
   try {
     Function("return " + extra_state_fml);
   } catch (error) {
     errorString = error.message;
   }
+  let viewname = view;
+  if (viewname && viewname.includes(":")) viewname = viewname.split(":")[1];
+  if (viewname && viewname.includes(".")) viewname = viewname.split(".")[0];
+
   return (
     <div>
       <div>
@@ -118,9 +118,7 @@ const ViewSettings = () => {
         <select
           value={view}
           className="form-control form-select"
-          onChange={(e) => {
-            setProp((prop) => (prop.view = e.target.value));
-          }}
+          onChange={setAProp("view")}
         >
           {views.map((f, ix) => (
             <option key={ix} value={f.name}>
@@ -165,9 +163,7 @@ const ViewSettings = () => {
             type="text"
             className="viewlink-label form-control"
             value={extra_state_fml}
-            onChange={(e) =>
-              setProp((prop) => (prop.extra_state_fml = e.target.value))
-            }
+            onChange={setAProp("extra_state_fml")}
           />
           {errorString ? (
             <small className="text-danger font-monospace d-block">
@@ -180,7 +176,7 @@ const ViewSettings = () => {
         <a
           className="d-block mt-2"
           target="_blank"
-          href={`/viewedit/config/${view}`}
+          href={`/viewedit/config/${viewname}`}
         >
           Configure this view
         </a>

package/src/components/elements/ViewLink.js

@@ -14,6 +14,7 @@ import {
   OrFormula,
   TextStyleSetting,
   ButtonOrLinkSettingsRows,
+  setAPropGen,
 } from "./utils";
 
 export /**
@@ -119,6 +120,8 @@ const ViewLinkSettings = () => {
   } catch (error) {
     errorString = error.message;
   }
+  const setAProp = setAPropGen(setProp);
+
   return (
     <div>
       <table className="w-100">
@@ -129,9 +132,7 @@ const ViewLinkSettings = () => {
               <select
                 value={name}
                 className="form-control form-select"
-                onChange={(e) =>
-                  setProp((prop) => (prop.name = e.target.value))
-                }
+                onChange={setAProp("name")}
               >
                 {options.link_view_opts.map((f, ix) => (
                   <option key={ix} value={f.name}>
@@ -149,9 +150,7 @@ const ViewLinkSettings = () => {
                   type="text"
                   className="viewlink-label form-control"
                   value={label}
-                  onChange={(e) =>
-                    setProp((prop) => (prop.label = e.target.value))
-                  }
+                  onChange={setAProp("label")}
                 />
               </OrFormula>
             </td>
@@ -163,9 +162,7 @@ const ViewLinkSettings = () => {
                 type="text"
                 className="viewlink-label form-control"
                 value={extra_state_fml}
-                onChange={(e) =>
-                  setProp((prop) => (prop.extra_state_fml = e.target.value))
-                }
+                onChange={setAProp("extra_state_fml")}
               />
               {errorString ? (
                 <small className="text-danger font-monospace d-block">
@@ -190,7 +187,7 @@ const ViewLinkSettings = () => {
           name="block"
           type="checkbox"
           checked={inModal}
-          onChange={(e) => setProp((prop) => (prop.inModal = e.target.checked))}
+          onChange={setAProp("inModal", { checked: true })}
         />
         <label className="form-check-label">Open in popup modal?</label>
       </div>

package/src/components/elements/utils.js

@@ -111,7 +111,7 @@ const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
     });
   };
   let errorString = false;
-  if (isFormula[nodekey]) {
+  if (mode === "show" && isFormula[nodekey]) {
     try {
       Function("return " + node[nodekey]);
     } catch (error) {
@@ -820,6 +820,7 @@ const ConfigField = ({
               className="w-50 form-control-sm d-inline dimunit"
               disabled={field.autoable && styleDim === "auto"}
               onChange={(e) =>
+                e?.target &&
                 myOnChange(
                   isStyle
                     ? `${e.target.value}${styleDim || "px"}`
@@ -1053,12 +1054,7 @@ const ButtonOrLinkSettingsRows = ({
   values,
   linkFirst = false,
 }) => {
-  const setAProp = (key) => (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
-      setProp((prop) => (prop[key] = target_value));
-    }
-  };
+  const setAProp = setAPropGen(setProp);
   const addBtnClass = (s) => (btnClass ? `${btnClass} ${s}` : s);
   return [
     <tr key="btnstyle">
@@ -1228,3 +1224,13 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
 
 export const isBlock = (block, inline, textStyle) =>
   !textStyle || !textStyle.startsWith("h") ? block : !inline;
+
+export const setAPropGen =
+  (setProp) =>
+  (key, opts = {}) =>
+  (e) => {
+    if (e.target) {
+      const target_value = opts?.checked ? e.target.checked : e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };