@saltcorn/builder 0.7.3 → 0.7.4-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.7.3",
+  "version": "0.7.4-beta.2",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -35,6 +35,7 @@
     "react-contenteditable": "3.3.5",
     "react-dom": "16.13.1",
     "react-transition-group": "4.4.1",
+    "@tippyjs/react": "4.2.6",
     "webpack": "4.43.0",
     "webpack-cli": "3.3.11",
     "lodash": "4.17.11"

package/src/components/Builder.js

@@ -58,7 +58,6 @@ import {
 } from "./elements/utils";
 import { InitNewElement, Library } from "./Library";
 import { RenderNode } from "./RenderNode";
-import { isEqual } from "lodash";
 const { Provider } = optionsCtx;
 
 /**
@@ -389,47 +388,11 @@ const Builder = ({ options, layout, mode }) => {
   const [previews, setPreviews] = useState({});
   const [uploadedFiles, setUploadedFiles] = useState([]);
   const nodekeys = useRef([]);
-  const [saveTimeout, setSaveTimeout] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
-  const [savedData, setSavedData] = useState(false);
-  const doSave = (query) => {
-    if (!query.serialize) return;
 
-    const data = craftToSaltcorn(JSON.parse(query.serialize()));
-    const urlroot = options.page_id ? "pageedit" : "viewedit";
-    if (savedData === false) {
-      //do not save on first call
-      setSavedData(data.layout);
-      setIsSaving(false);
-      return;
-    }
-    if (isEqual(savedData, data.layout)) return;
-    setSavedData(data.layout);
-
-    fetch(`/${urlroot}/savebuilder/${options.page_id || options.view_id}`, {
-      method: "POST", // or 'PUT'
-      headers: {
-        "Content-Type": "application/json",
-        "CSRF-Token": options.csrfToken,
-      },
-      body: JSON.stringify(data),
-    }).then(() => {
-      setIsSaving(false);
-    });
-  };
-  const nodesChange = (query) => {
-    if (saveTimeout) clearTimeout(saveTimeout);
-    setIsSaving(true);
-    setSaveTimeout(
-      setTimeout(() => {
-        doSave(query);
-        setSaveTimeout(false);
-      }, 500)
-    );
-  };
   return (
     <ErrorBoundary>
-      <Editor onRender={RenderNode} onNodesChange={nodesChange}>
+      <Editor onRender={RenderNode}>
         <Provider value={options}>
           <PreviewCtx.Provider
             value={{ previews, setPreviews, uploadedFiles, setUploadedFiles }}
@@ -437,7 +400,10 @@ const Builder = ({ options, layout, mode }) => {
             <div className="row" style={{ marginTop: "-5px" }}>
               <div className="col-sm-auto left-builder-col">
                 <div className="componets-and-library-accordion toolbox-card">
-                  <InitNewElement nodekeys={nodekeys} />
+                  <InitNewElement
+                    nodekeys={nodekeys}
+                    setIsSaving={setIsSaving}
+                  />
                   <Accordion>
                     <div className="card mt-1" accordiontitle="Components">
                       {{

package/src/components/Library.js

@@ -4,7 +4,13 @@
  * @subcategory components
  */
 
-import React, { useEffect, useContext, useState, Fragment } from "react";
+import React, {
+  useEffect,
+  useContext,
+  useState,
+  Fragment,
+  useRef,
+} from "react";
 import { useEditor, useNode } from "@craftjs/core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faPlus, faTimes } from "@fortawesome/free-solid-svg-icons";
@@ -13,10 +19,11 @@ import faIcons from "./elements/faicons";
 import { craftToSaltcorn, layoutToNodes } from "./storage";
 import optionsCtx from "./context";
 import { WrapElem } from "./Toolbox";
+import { isEqual } from "lodash";
 
 /**
- * 
- * @param {object[]} xs 
+ *
+ * @param {object[]} xs
  * @returns {object[]}
  */
 const twoByTwos = (xs) => {
@@ -67,10 +74,38 @@ export /**
  * @subcategory components
  * @namespace
  */
-const InitNewElement = ({ nodekeys }) => {
+const InitNewElement = ({ nodekeys, setIsSaving }) => {
+  const [saveTimeout, setSaveTimeout] = useState(false);
+  const savedData = useRef(false);
   const { actions, query, connectors } = useEditor((state, query) => {
     return {};
   });
+  const options = useContext(optionsCtx);
+  const doSave = (query) => {
+    if (!query.serialize) return;
+
+    const data = craftToSaltcorn(JSON.parse(query.serialize()));
+    const urlroot = options.page_id ? "pageedit" : "viewedit";
+    if (savedData.current === false) {
+      //do not save on first call
+      savedData.current = JSON.stringify(data.layout);
+      setIsSaving(false);
+      return;
+    }
+    if (isEqual(savedData.current, JSON.stringify(data.layout))) return;
+    savedData.current = JSON.stringify(data.layout);
+
+    fetch(`/${urlroot}/savebuilder/${options.page_id || options.view_id}`, {
+      method: "POST", // or 'PUT'
+      headers: {
+        "Content-Type": "application/json",
+        "CSRF-Token": options.csrfToken,
+      },
+      body: JSON.stringify(data),
+    }).then(() => {
+      setIsSaving(false);
+    });
+  };
   const onNodesChange = (arg, arg1) => {
     const nodes = arg.getSerializedNodes();
     const newNodeIds = [];
@@ -98,6 +133,14 @@ const InitNewElement = ({ nodekeys }) => {
         actions.selectNode(id);
       }
     }
+    if (saveTimeout) clearTimeout(saveTimeout);
+    setIsSaving(true);
+    setSaveTimeout(
+      setTimeout(() => {
+        doSave(query);
+        setSaveTimeout(false);
+      }, 500)
+    );
   };
   useEffect(() => {
     const nodes = query.getSerializedNodes();

package/src/components/elements/Container.js

@@ -19,6 +19,7 @@ import {
   reactifyStyles,
   bstyleopt,
   setAPropGen,
+  FormulaTooltip,
 } from "./utils";
 import {
   BorderOuter,
@@ -757,7 +758,7 @@ const ContainerSettings = () => {
                   onChange={setAProp("showIfFormula")}
                 />
                 <div style={{ marginTop: "-5px" }}>
-                  <small className="text-muted font-monospace">FORMULA</small>
+                  <small className="text-muted font-monospace">FORMULA <FormulaTooltip /></small>
                 </div>
               </td>
             </tr>

package/src/components/elements/DropDownFilter.js

@@ -79,6 +79,11 @@ const DropDownFilterSettings = () => {
                   {f.label}
                 </option>
               ))}
+              {options.parent_field_list.map((f, ix) => (
+                <option key={ix} value={f}>
+                  {f}
+                </option>
+              ))}
             </select>
           </td>
         </tr>

package/src/components/elements/View.js

@@ -16,6 +16,7 @@ import {
   fetchViewPreview,
   ConfigForm,
   setAPropGen,
+  FormulaTooltip,
 } from "./utils";
 
 export /**
@@ -158,7 +159,7 @@ const ViewSettings = () => {
       {(state === "shared" || options.mode === "page") && (
         <Fragment>
           {" "}
-          <label>Extra state Formula</label>
+          <label>Extra state Formula <FormulaTooltip /></label>
           <input
             type="text"
             className="viewlink-label form-control"

package/src/components/elements/ViewLink.js

@@ -15,6 +15,7 @@ import {
   TextStyleSetting,
   ButtonOrLinkSettingsRows,
   setAPropGen,
+  FormulaTooltip,
 } from "./utils";
 
 export /**
@@ -157,7 +158,7 @@ const ViewLinkSettings = () => {
           </tr>
           <tr>
             <td colSpan="2">
-              <label>Extra state Formula</label>
+              <label>Extra state Formula <FormulaTooltip /></label>
               <input
                 type="text"
                 className="viewlink-label form-control"