@saltcorn/builder 0.7.4-beta.2 → 0.7.4-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.7.4-beta.2",
+  "version": "0.7.4-beta.3",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/elements/Link.js

@@ -34,44 +34,43 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Link = ({
-  text,
-  block,
-  isFormula,
-  textStyle,
-  link_style,
-  link_size,
-  link_icon,
-  link_bgcol,
-  link_bordercol,
-  link_textcol,
-}) => {
-  const {
-    selected,
-    connectors: { connect, drag },
-  } = useNode((node) => ({ selected: node.events.selected }));
-  return (
-    <span
-      className={`${textStyle} is-builder-link ${
-        selected ? "selected-node" : ""
-      } ${isFormula?.text ? "font-monospace" : ""} ${link_style} ${link_size}`}
-      {...blockProps(block)}
-      ref={(dom) => connect(drag(dom))}
-      style={
-        link_style === "btn btn-custom-color"
-          ? {
+  const Link = ({
+    text,
+    block,
+    isFormula,
+    textStyle,
+    link_style,
+    link_size,
+    link_icon,
+    link_bgcol,
+    link_bordercol,
+    link_textcol,
+  }) => {
+    const {
+      selected,
+      connectors: { connect, drag },
+    } = useNode((node) => ({ selected: node.events.selected }));
+    return (
+      <span
+        className={`${textStyle} is-builder-link ${selected ? "selected-node" : ""
+          } ${isFormula?.text ? "font-monospace" : ""} ${link_style} ${link_size}`}
+        {...blockProps(block)}
+        ref={(dom) => connect(drag(dom))}
+        style={
+          link_style === "btn btn-custom-color"
+            ? {
               backgroundColor: link_bgcol || "#000000",
               borderColor: link_bordercol || "#000000",
               color: link_textcol || "#000000",
             }
-          : {}
-      }
-    >
-      <DynamicFontAwesomeIcon icon={link_icon} className="me-1" />
-      {isFormula?.text ? `=${text}` : text}
-    </span>
-  );
-};
+            : {}
+        }
+      >
+        <DynamicFontAwesomeIcon icon={link_icon} className="me-1" />
+        {isFormula?.text ? `=${text}` : text}
+      </span>
+    );
+  };
 
 export /**
  * @returns {div}
@@ -79,205 +78,222 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const LinkSettings = () => {
-  const node = useNode((node) => ({
-    text: node.data.props.text,
-    url: node.data.props.url,
-    block: node.data.props.block,
-    isFormula: node.data.props.isFormula,
-    textStyle: node.data.props.textStyle,
-    nofollow: node.data.props.nofollow,
-    in_modal: node.data.props.in_modal,
-    link_src: node.data.props.link_src,
-    target_blank: node.data.props.target_blank,
-    link_style: node.data.props.link_style,
-    link_size: node.data.props.link_size,
-    link_icon: node.data.props.link_icon,
-    link_bgcol: node.data.props.link_bgcol,
-    link_bordercol: node.data.props.link_bordercol,
-    link_textcol: node.data.props.link_textcol,
-    transfer_state: node.data.props.transfer_state,
-  }));
-  const {
-    actions: { setProp },
-    text,
-    url,
-    block,
-    isFormula,
-    textStyle,
-    nofollow,
-    target_blank,
-    link_src,
-    in_modal,
-    transfer_state,
-  } = node;
-  const options = useContext(optionsCtx);
-  const setAProp = setAPropGen(setProp);
-  return (
-    <div>
-      <table className="w-100">
-        <tbody>
-          <tr>
-            <td>
-              <label>Text to display</label>
-            </td>
-            <td>
-              <OrFormula nodekey="text" {...{ setProp, isFormula, node }}>
-                <input
-                  type="text"
-                  className="form-control text-to-display"
-                  value={text}
-                  onChange={setAProp("text")}
-                />
-              </OrFormula>
-            </td>
-          </tr>
-          <tr>
-            <td>
-              <label>Link source</label>
-            </td>
-            <td>
-              <select
-                value={link_src}
-                className="form-control form-select"
-                onChange={(e) => {
-                  if (!e.target) return;
-                  const value = e.target.value;
-                  setProp((prop) => {
-                    prop.link_src = value;
-                    if (e.target.value !== "URL") {
-                      prop.isFormula.url = false;
-                    }
-                  });
-                }}
-              >
-                <option>URL</option>
-                {(options.pages || []).length > 0 && <option>Page</option>}
-                {(options.views || []).length > 0 &&
-                  ["page", "filter"].includes(options.mode) && (
-                    <option>View</option>
-                  )}
-              </select>
-            </td>
-          </tr>
-          {link_src === "URL" && (
+  const LinkSettings = () => {
+    const node = useNode((node) => ({
+      text: node.data.props.text,
+      url: node.data.props.url,
+      block: node.data.props.block,
+      isFormula: node.data.props.isFormula,
+      textStyle: node.data.props.textStyle,
+      nofollow: node.data.props.nofollow,
+      in_modal: node.data.props.in_modal,
+      view_state_fml: node.data.props.view_state_fml,
+      link_src: node.data.props.link_src,
+      target_blank: node.data.props.target_blank,
+      link_style: node.data.props.link_style,
+      link_size: node.data.props.link_size,
+      link_icon: node.data.props.link_icon,
+      link_bgcol: node.data.props.link_bgcol,
+      link_bordercol: node.data.props.link_bordercol,
+      link_textcol: node.data.props.link_textcol,
+      transfer_state: node.data.props.transfer_state,
+    }));
+    const {
+      actions: { setProp },
+      text,
+      url,
+      block,
+      isFormula,
+      textStyle,
+      nofollow,
+      target_blank,
+      link_src,
+      in_modal,
+      transfer_state,
+      view_state_fml
+    } = node;
+    const options = useContext(optionsCtx);
+    const setAProp = setAPropGen(setProp);
+    return (
+      <div>
+        <table className="w-100">
+          <tbody>
             <tr>
               <td>
-                <label>URL</label>
+                <label>Text to display</label>
               </td>
               <td>
-                <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
+                <OrFormula nodekey="text" {...{ setProp, isFormula, node }}>
                   <input
                     type="text"
-                    className="form-control "
-                    value={url}
-                    onChange={setAProp("url")}
+                    className="form-control text-to-display"
+                    value={text}
+                    onChange={setAProp("text")}
                   />
                 </OrFormula>
               </td>
             </tr>
-          )}
-          {link_src === "Page" && (
-            <tr>
-              <td>
-                <label>Page</label>
-              </td>
-              <td>
-                <select
-                  value={url}
-                  className="form-control form-select"
-                  onChange={setAProp("url")}
-                >
-                  <option></option>
-                  {(options.pages || []).map((p, ix) => (
-                    <option key={ix} value={`/page/${p.name}`}>
-                      {p.name}
-                    </option>
-                  ))}
-                </select>
-              </td>
-            </tr>
-          )}
-          {link_src === "View" && (
             <tr>
               <td>
-                <label>View</label>
+                <label>Link source</label>
               </td>
               <td>
                 <select
-                  value={url}
+                  value={link_src}
                   className="form-control form-select"
-                  onChange={setAProp("url")}
+                  onChange={(e) => {
+                    if (!e.target) return;
+                    const value = e.target.value;
+                    setProp((prop) => {
+                      prop.link_src = value;
+                      if (value !== "URL" && prop.isFormula) {
+                        prop.isFormula.url = false;
+                      }
+                    });
+                  }}
                 >
-                  <option></option>
-                  {(options.views || []).map((p, ix) => (
-                    <option key={ix} value={`/view/${p.name}`}>
-                      {p.name} [{p.viewtemplate}]
-                    </option>
-                  ))}
+                  <option>URL</option>
+                  {(options.pages || []).length > 0 && <option>Page</option>}
+                  {(options.views || []).length > 0 &&
+                    ["page", "filter"].includes(options.mode) && (
+                      <option>View</option>
+                    )}
                 </select>
               </td>
             </tr>
-          )}
-          <ButtonOrLinkSettingsRows
-            setProp={setProp}
-            keyPrefix="link_"
-            btnClass="btn"
-            values={node}
-            linkFirst={true}
-          />
-        </tbody>
-      </table>
-
-      <div className="form-check">
-        <input
-          className="form-check-input"
-          name="block"
-          type="checkbox"
-          checked={nofollow}
-          onChange={setAProp("nofollow", { checked: true })}
-        />
-        <label className="form-check-label">Nofollow</label>
-      </div>
-      <div className="form-check">
-        <input
-          className="form-check-input"
-          name="block"
-          type="checkbox"
-          checked={target_blank}
-          onChange={setAProp("target_blank", { checked: true })}
-        />
-        <label className="form-check-label">Open in new tab</label>
-      </div>
-      <div className="form-check">
-        <input
-          className="form-check-input"
-          name="block"
-          type="checkbox"
-          checked={in_modal}
-          onChange={setAProp("in_modal", { checked: true })}
-        />
-        <label className="form-check-label">Open in popup modal?</label>
-      </div>
+            {link_src === "URL" && (
+              <tr>
+                <td>
+                  <label>URL</label>
+                </td>
+                <td>
+                  <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
+                    <input
+                      type="text"
+                      className="form-control "
+                      value={url}
+                      onChange={setAProp("url")}
+                    />
+                  </OrFormula>
+                </td>
+              </tr>
+            )}
+            {link_src === "Page" && (
+              <tr>
+                <td>
+                  <label>Page</label>
+                </td>
+                <td>
+                  <select
+                    value={url}
+                    className="form-control form-select"
+                    onChange={setAProp("url")}
+                  >
+                    <option></option>
+                    {(options.pages || []).map((p, ix) => (
+                      <option key={ix} value={`/page/${p.name}`}>
+                        {p.name}
+                      </option>
+                    ))}
+                  </select>
+                </td>
+              </tr>
+            )}
+            {link_src === "View" && (
+              <tr>
+                <td>
+                  <label>View</label>
+                </td>
+                <td>
+                  <select
+                    value={url}
+                    className="form-control form-select"
+                    onChange={setAProp("url")}
+                  >
+                    <option></option>
+                    {(options.views || []).map((p, ix) => (
+                      <option key={ix} value={`/view/${p.name}`}>
+                        {p.name} [{p.viewtemplate}]
+                      </option>
+                    ))}
+                  </select>
+                </td>
+              </tr>
+            )}
+            {link_src === "View" && (
+              <tr>
+                <td>
+                  <label>State Formula</label>
+                </td>
+                <td>
+                  <input
+                    type="text"
+                    className="form-control"
+                    value={view_state_fml}
+                    onChange={setAProp("view_state_fml")}
+                  />
+                </td>
+              </tr>
+            )}
+            <ButtonOrLinkSettingsRows
+              setProp={setProp}
+              keyPrefix="link_"
+              btnClass="btn"
+              values={node}
+              linkFirst={true}
+            />
+          </tbody>
+        </table>
 
-      {["filter", "page"].includes(options.mode) && (
         <div className="form-check">
           <input
             className="form-check-input"
             name="block"
             type="checkbox"
-            checked={transfer_state}
-            onChange={setAProp("transfer_state", { checked: true })}
+            checked={nofollow}
+            onChange={setAProp("nofollow", { checked: true })}
           />
-          <label className="form-check-label">Transfer state</label>
+          <label className="form-check-label">Nofollow</label>
+        </div>
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            name="block"
+            type="checkbox"
+            checked={target_blank}
+            onChange={setAProp("target_blank", { checked: true })}
+          />
+          <label className="form-check-label">Open in new tab</label>
+        </div>
+        <div className="form-check">
+          <input
+            className="form-check-input"
+            name="block"
+            type="checkbox"
+            checked={in_modal}
+            onChange={setAProp("in_modal", { checked: true })}
+          />
+          <label className="form-check-label">Open in popup modal?</label>
         </div>
-      )}
 
-      <BlockSetting block={block} setProp={setProp} />
-      <TextStyleSetting textStyle={textStyle} setProp={setProp} />
-    </div>
-  );
-};
+        {["filter", "page"].includes(options.mode) && (
+          <div className="form-check">
+            <input
+              className="form-check-input"
+              name="block"
+              type="checkbox"
+              checked={transfer_state}
+              onChange={setAProp("transfer_state", { checked: true })}
+            />
+            <label className="form-check-label">Transfer state</label>
+          </div>
+        )}
+
+        <BlockSetting block={block} setProp={setProp} />
+        <TextStyleSetting textStyle={textStyle} setProp={setProp} />
+      </div>
+    );
+  };
 
 /**
  * @type {object}
@@ -313,6 +329,8 @@ Link.craft = {
       "link_textcol",
       "in_modal",
       "transfer_state",
+      "view_state_fml"
+
     ],
   },
 };