@saltcorn/builder 0.5.6-beta.2 → 0.6.0-alpha.0

package/src/components/elements/Link.js

@@ -1,9 +1,13 @@
 import React, { Fragment, useContext } from "react";
 import { useNode } from "@craftjs/core";
-import { blockProps, BlockSetting, TextStyleSetting, OrFormula } from "./utils";
+import {
+  blockProps,
+  BlockSetting,
+  TextStyleSetting,
+  OrFormula,
+  ButtonOrLinkSettingsRows,
+} from "./utils";
 import optionsCtx from "../context";
-import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
-import faIcons from "./faicons";
 
 export const Link = ({
   text,
@@ -13,6 +17,9 @@ export const Link = ({
   link_style,
   link_size,
   link_icon,
+  link_bgcol,
+  link_bordercol,
+  link_textcol,
 }) => {
   const {
     selected,
@@ -25,6 +32,15 @@ export const Link = ({
       } ${isFormula.text ? "text-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",
+            }
+          : {}
+      }
     >
       {link_icon ? <i className={`${link_icon} mr-1`}></i> : ""}
       {isFormula.text ? `=${text}` : text}
@@ -45,6 +61,9 @@ export const LinkSettings = () => {
     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,
   }));
   const {
     actions: { setProp },
@@ -56,140 +75,124 @@ export const LinkSettings = () => {
     nofollow,
     target_blank,
     link_src,
-    link_style,
-    link_size,
-    link_icon,
   } = node;
   const options = useContext(optionsCtx);
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
   return (
     <div>
-      <label>Text to display</label>
-      <OrFormula nodekey="text" {...{ setProp, isFormula, node }}>
-        <input
-          type="text"
-          className="form-control text-to-display"
-          value={text}
-          onChange={(e) => setProp((prop) => (prop.text = e.target.value))}
-        />
-      </OrFormula>
-      <label>Link source</label>
-      <select
-        value={link_src}
-        className="form-control"
-        onChange={(e) =>
-          setProp((prop) => {
-            prop.link_src = e.target.value;
-            if (e.target.value !== "URL") {
-              prop.isFormula.url = false;
-            }
-          })
-        }
-      >
-        <option>URL</option>
-        {(options.pages || []).length > 0 && <option>Page</option>}
-        {(options.views || []).length > 0 && options.mode === "page" && (
-          <option>View</option>
-        )}
-      </select>
-      {link_src === "URL" && (
-        <Fragment>
-          {" "}
-          <label>URL</label>
-          <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
-            <input
-              type="text"
-              className="form-control "
-              value={url}
-              onChange={(e) => setProp((prop) => (prop.url = e.target.value))}
-            />
-          </OrFormula>
-        </Fragment>
-      )}
-      {link_src === "Page" && (
-        <Fragment>
-          {" "}
-          <label>Page</label>
-          <select
-            value={url}
-            className="form-control"
-            onChange={(e) =>
-              setProp((prop) => {
-                prop.url = e.target.value;
-              })
-            }
-          >
-            <option></option>
-            {(options.pages || []).map((p) => (
-              <option value={`/page/${p.name}`}>{p.name}</option>
-            ))}
-          </select>
-        </Fragment>
-      )}
-      {link_src === "View" && (
-        <Fragment>
-          {" "}
-          <label>View</label>
-          <select
-            value={url}
-            className="form-control"
-            onChange={(e) =>
-              setProp((prop) => {
-                prop.url = e.target.value;
-              })
-            }
-          >
-            <option></option>
-            {(options.views || []).map((p) => (
-              <option value={`/view/${p.name}`}>
-                {p.name} [{p.viewtemplate}]
-              </option>
-            ))}
-          </select>
-        </Fragment>
-      )}
-      <div>
-        <label>Link style</label>
-        <select
-          className="form-control"
-          value={link_style}
-          onChange={(e) =>
-            setProp((prop) => (prop.link_style = e.target.value))
-          }
-        >
-          <option value="">Link</option>
-          <option value="btn btn-primary">Primary button</option>
-          <option value="btn btn-secondary">Secondary button</option>
-          <option value="btn btn-success">Success button</option>
-          <option value="btn btn-danger">Danger button</option>
-          <option value="btn btn-outline-primary">
-            Primary outline button
-          </option>
-          <option value="btn btn-outline-secondary">
-            Secondary outline button
-          </option>
-        </select>
-      </div>
-      <div>
-        <label>Link size</label>
-        <select
-          className="form-control"
-          value={link_size}
-          onChange={(e) => setProp((prop) => (prop.link_size = e.target.value))}
-        >
-          <option value="">Standard</option>
-          <option value="btn-lg">Large</option>
-          <option value="btn-sm">Small</option>
-          <option value="btn-block">Block</option>
-          <option value="btn-block btn-lg">Large block</option>
-        </select>
-      </div>
-      <label className="mr-2">Icon</label>
-      <FontIconPicker
-        value={link_icon}
-        icons={faIcons}
-        onChange={(value) => setProp((prop) => (prop.link_icon = value))}
-        isMulti={false}
-      />
+      <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"
+                onChange={(e) =>
+                  setProp((prop) => {
+                    prop.link_src = e.target.value;
+                    if (e.target.value !== "URL") {
+                      prop.isFormula.url = false;
+                    }
+                  })
+                }
+              >
+                <option>URL</option>
+                {(options.pages || []).length > 0 && <option>Page</option>}
+                {(options.views || []).length > 0 &&
+                  options.mode === "page" && <option>View</option>}
+              </select>
+            </td>
+          </tr>
+          {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"
+                  onChange={setAProp("url")}
+                >
+                  <option></option>
+                  {(options.pages || []).map((p) => (
+                    <option 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"
+                  onChange={setAProp("url")}
+                >
+                  <option></option>
+                  {(options.views || []).map((p) => (
+                    <option value={`/view/${p.name}`}>
+                      {p.name} [{p.viewtemplate}]
+                    </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"
@@ -246,6 +249,9 @@ Link.craft = {
       "link_size",
       "link_icon",
       "link_style",
+      "link_bgcol",
+      "link_bordercol",
+      "link_textcol",
     ],
   },
 };

package/src/components/elements/SearchBar.js

@@ -25,7 +25,7 @@ export const SearchBar = ({ has_dropdown, contents, show_badges }) => {
     >
       <div className="input-group-prepend">
         <button className="btn btn-outline-secondary" disabled>
-          <i class="fas fa-search"></i>
+          <i className="fas fa-search"></i>
         </button>
       </div>
       <input

package/src/components/elements/Text.js

@@ -6,6 +6,7 @@ import {
   TextStyleSetting,
   OrFormula,
   ErrorBoundary,
+  TextStyleRow,
 } from "./utils";
 import ContentEditable from "react-contenteditable";
 import optionsCtx from "../context";
@@ -44,7 +45,7 @@ const ckConfig = {
 function escape_tags(str) {
   return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 }
-export const Text = ({ text, block, isFormula, textStyle, icon }) => {
+export const Text = ({ text, block, isFormula, textStyle, icon, font }) => {
   const {
     connectors: { connect, drag },
     selected,
@@ -66,6 +67,7 @@ export const Text = ({ text, block, isFormula, textStyle, icon }) => {
       {...blockProps(block)}
       ref={(dom) => connect(drag(dom))}
       onClick={(e) => selected && setEditable(true)}
+      style={font ? { fontFamily: font } : {}}
     >
       {icon ? <i className={`${icon} mr-1`}></i> : ""}
       {isFormula.text ? (
@@ -106,6 +108,7 @@ export const TextSettings = () => {
     textStyle: node.data.props.textStyle,
     labelFor: node.data.props.labelFor,
     icon: node.data.props.icon,
+    font: node.data.props.font,
   }));
   const {
     actions: { setProp },
@@ -115,8 +118,15 @@ export const TextSettings = () => {
     isFormula,
     labelFor,
     icon,
+    font,
   } = 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));
+    }
+  };
   return (
     <div>
       {mode === "show" && (
@@ -132,35 +142,35 @@ export const TextSettings = () => {
           <label className="form-check-label">Formula?</label>
         </div>
       )}
-      <label>Text to display:</label>
+      <label>Text to display</label>
       {mode === "show" && isFormula.text ? (
         <input
           type="text"
           className="text-to-display form-control"
           value={text}
-          onChange={(e) => setProp((prop) => (prop.text = e.target.value))}
+          onChange={setAProp("text")}
         />
       ) : (
         <ErrorBoundary>
-          <CKEditor
-            data={text}
-            onChange={(e) =>
-              setProp((props) => (props.text = e.editor.getData()))
-            }
-            config={ckConfig}
-            type="inline"
-          />
+          <div className="border">
+            <CKEditor
+              data={text}
+              onChange={(e) => {
+                if (e.editor) {
+                  const text = e.editor.getData();
+                  setProp((props) => (props.text = text));
+                }
+              }}
+              config={ckConfig}
+              type="inline"
+            />
+          </div>
         </ErrorBoundary>
       )}
       {mode === "edit" && (
         <Fragment>
           <label>Label for Field</label>
-          <select
-            value={labelFor}
-            onChange={(e) => {
-              setProp((prop) => (prop.labelFor = e.target.value));
-            }}
-          >
+          <select value={labelFor} onChange={setAProp("labelFor")}>
             <option value={""}></option>
             {fields.map((f, ix) => (
               <option key={ix} value={f.name}>
@@ -170,16 +180,39 @@ export const TextSettings = () => {
           </select>
         </Fragment>
       )}
-      <br />
-      <label>Icon</label>
-      <FontIconPicker
-        value={icon}
-        icons={faIcons}
-        onChange={(value) => setProp((prop) => (prop.icon = value))}
-        isMulti={false}
-      />
+      <table className="w-100 mt-2">
+        <tbody>
+          <TextStyleRow textStyle={textStyle} setProp={setProp} />
+          <tr>
+            <td>
+              <label>Icon</label>
+            </td>
+            <td>
+              <FontIconPicker
+                className="w-100"
+                value={icon}
+                icons={faIcons}
+                onChange={(value) => setProp((prop) => (prop.icon = value))}
+                isMulti={false}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label>Font</label>
+            </td>
+            <td>
+              <input
+                type="text"
+                className="form-control"
+                value={font}
+                onChange={setAProp("font")}
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
       <BlockSetting block={block} setProp={setProp} />
-      <TextStyleSetting textStyle={textStyle} setProp={setProp} />
     </div>
   );
 };
@@ -191,6 +224,7 @@ Text.craft = {
     isFormula: {},
     textStyle: "",
     labelFor: "",
+    font: "",
   },
   displayName: "Text",
   related: {

package/src/components/elements/ToggleFilter.js

@@ -52,6 +52,12 @@ export 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));
+    }
+  };
   return (
     <table className="w-100">
       <tbody>
@@ -90,9 +96,7 @@ export const ToggleFilterSettings = () => {
               <select
                 value={value}
                 className="w-100"
-                onChange={(e) =>
-                  setProp((prop) => (prop.value = e.target.value))
-                }
+                onChange={setAProp("value")}
               >
                 <option value="on">True</option>
                 <option value="off">False</option>
@@ -102,9 +106,7 @@ export const ToggleFilterSettings = () => {
               <input
                 value={value}
                 className="w-100"
-                onChange={(e) =>
-                  setProp((prop) => (prop.value = e.target.value))
-                }
+                onChange={setAProp("value")}
               />
             )}
           </td>
@@ -118,9 +120,7 @@ export const ToggleFilterSettings = () => {
               <select
                 value={preset_value}
                 className="form-control"
-                onChange={(e) => {
-                  setProp((prop) => (prop.preset_value = e.target.value));
-                }}
+                onChange={setAProp("preset_value")}
               >
                 <option value=""></option>
                 {preset_options.map((po, ix) => (
@@ -140,7 +140,7 @@ export const ToggleFilterSettings = () => {
             <input
               value={label}
               className="w-100"
-              onChange={(e) => setProp((prop) => (prop.label = e.target.value))}
+              onChange={setAProp("label")}
             />
           </td>
         </tr>
@@ -149,11 +149,10 @@ export const ToggleFilterSettings = () => {
             <label>Button size</label>
           </td>
           <td>
-            {" "}
             <select
               className="form-control"
               value={size}
-              onChange={(e) => setProp((prop) => (prop.size = e.target.value))}
+              onChange={setAProp("size")}
             >
               <option value="">Standard</option>
               <option value="btn-lg">Large</option>
@@ -169,11 +168,10 @@ export const ToggleFilterSettings = () => {
             <label>Button style</label>
           </td>
           <td>
-            {" "}
             <select
               className="form-control"
               value={style}
-              onChange={(e) => setProp((prop) => (prop.style = e.target.value))}
+              onChange={setAProp("style")}
             >
               <option value="primary">Primary</option>
               <option value="secondary">Secondary</option>

package/src/components/elements/View.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { Fragment, useContext, useEffect } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
@@ -8,6 +8,7 @@ import {
   BlockSetting,
   MinRoleSetting,
   fetchViewPreview,
+  ConfigForm,
 } from "./utils";
 
 export const View = ({ name, view, state }) => {
@@ -51,20 +52,26 @@ export const View = ({ name, view, state }) => {
 };
 
 export const ViewSettings = () => {
+  const node = useNode((node) => ({
+    name: node.data.props.name,
+    view: node.data.props.view,
+    state: node.data.props.state,
+    configuration: node.data.props.configuration, // fixed states
+    node_id: node.id,
+  }));
+
   const {
     actions: { setProp },
     name,
     view,
     state,
     node_id,
-  } = useNode((node) => ({
-    name: node.data.props.name,
-    view: node.data.props.view,
-    state: node.data.props.state,
-    node_id: node.id,
-  }));
+    configuration,
+  } = node;
   const options = useContext(optionsCtx);
   const views = options.views;
+  const fixed_state_fields =
+    options.fixed_state_fields && options.fixed_state_fields[view];
   const { setPreviews } = useContext(previewCtx);
   const refetchPreview = fetchViewPreview({
     options,
@@ -72,7 +79,12 @@ export const ViewSettings = () => {
     setPreviews,
     node_id,
   });
-  //console.log(options)
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
   return (
     <div>
       <div>
@@ -93,17 +105,32 @@ export const ViewSettings = () => {
         </select>
       </div>
       {options.mode === "page" && (
-        <div>
-          <label>State</label>
-          <select
-            value={state}
-            className="form-control"
-            onChange={(e) => setProp((prop) => (prop.state = e.target.value))}
-          >
-            <option value="shared">Shared</option>
-            <option value="fixed">Fixed</option>
-          </select>
-        </div>
+        <Fragment>
+          <div>
+            <label>State</label>
+            <select
+              value={state}
+              className="form-control"
+              onChange={setAProp("state")}
+            >
+              <option value="shared">Shared</option>
+              <option value="fixed">Fixed</option>
+            </select>
+          </div>
+          {state === "fixed" &&
+            fixed_state_fields &&
+            fixed_state_fields.length > 0 && (
+              <Fragment>
+                <h6>View state fields</h6>
+                <ConfigForm
+                  fields={fixed_state_fields}
+                  configuration={configuration || {}}
+                  setProp={setProp}
+                  node={node}
+                />
+              </Fragment>
+            )}
+        </Fragment>
       )}
     </div>
   );