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

package/src/components/Toolbox.js

@@ -20,11 +20,16 @@ import { View } from "./elements/View";
 import { SearchBar } from "./elements/SearchBar";
 import { Link } from "./elements/Link";
 import optionsCtx from "./context";
-import { BoundingBox, Diagram3Fill, SegmentedNav, TextareaT } from "react-bootstrap-icons";
+import {
+  BoundingBox,
+  Diagram3Fill,
+  SegmentedNav,
+  TextareaT,
+} from "react-bootstrap-icons";
 
 const headOr = (xs, def) => (xs && xs.length > 0 ? xs[0] : def);
 
-const WrapElem = ({
+export const WrapElem = ({
   children,
   connectors,
   icon,
@@ -32,6 +37,7 @@ const WrapElem = ({
   text,
   fontSize,
   title,
+  innerClass,
   bold,
   label,
   disable,
@@ -39,11 +45,14 @@ const WrapElem = ({
   <div
     className={`${
       disable ? "text-muted" : ""
-    } wrap-builder-elem d-flex align-items-center justify-content-center`}
+    }  d-inline-flex wrap-builder-elem align-items-center justify-content-center`}
     title={title}
     ref={disable ? undefined : (ref) => connectors.create(ref, children)}
   >
-    <div className="inner" style={fontSize ? { fontSize } : {}}>
+    <div
+      className={`inner ${innerClass || ""}`}
+      style={fontSize ? { fontSize } : {}}
+    >
       {(text && (bold ? <strong>{text}</strong> : text)) ||
         (icons &&
           icons.map((ic, ix) => <i key={ix} className={`${ic}`}></i>)) ||
@@ -67,6 +76,7 @@ const TextElem = ({ connectors }) => (
 const ColumnsElem = ({ connectors }) => (
   <WrapElem
     connectors={connectors}
+    innerClass="mt-m1px"
     icon="fas fa-columns"
     title="Split into columns"
     label="Columns"
@@ -215,7 +225,7 @@ const ToggleFilterElem = ({ connectors, fields }) => (
 const JoinFieldElem = ({ connectors, options }) => (
   <WrapElem
     connectors={connectors}
-    icon={<Diagram3Fill className="mb-2 h5"/>}
+    icon={<Diagram3Fill className="mb-2 h5" />}
     title="Join field"
     label="Join"
     disable={options.parent_field_list.length === 0}
@@ -299,29 +309,45 @@ export const ToolboxShow = () => {
   } = options;
   return (
     <Fragment>
-      <TextElem connectors={connectors} />
-      <ColumnsElem connectors={connectors} />
-      <FieldElem
-        connectors={connectors}
-        fields={fields}
-        field_view_options={field_view_options}
-      />
-      <LineBreakElem connectors={connectors} />
-      <JoinFieldElem connectors={connectors} options={options} />
-      <ViewLinkElem connectors={connectors} options={options} />
-      <ActionElem connectors={connectors} options={options} />
-      <LinkElem connectors={connectors} />
-      <AggregationElem
-        connectors={connectors}
-        child_field_list={child_field_list}
-        agg_field_opts={agg_field_opts}
-      />
-      <ViewElem connectors={connectors} views={views} />
-      <ContainerElem connectors={connectors} />
-      <CardElem connectors={connectors} />
-      <TabsElem connectors={connectors} />
-      <ImageElem connectors={connectors} images={images} />
-      <HTMLElem connectors={connectors} />
+      <div className="toolbar-row">
+        <TextElem connectors={connectors} />
+        <ColumnsElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <FieldElem
+          connectors={connectors}
+          fields={fields}
+          field_view_options={field_view_options}
+        />
+        <LineBreakElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <JoinFieldElem connectors={connectors} options={options} />
+        <ViewLinkElem connectors={connectors} options={options} />
+      </div>
+      <div className="toolbar-row">
+        <ActionElem connectors={connectors} options={options} />
+        <LinkElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <AggregationElem
+          connectors={connectors}
+          child_field_list={child_field_list}
+          agg_field_opts={agg_field_opts}
+        />
+        <ViewElem connectors={connectors} views={views} />
+      </div>
+      <div className="toolbar-row">
+        <ContainerElem connectors={connectors} />
+        <CardElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <TabsElem connectors={connectors} />
+        <ImageElem connectors={connectors} images={images} />
+      </div>
+      <div className="toolbar-row">
+        <HTMLElem connectors={connectors} />
+      </div>
     </Fragment>
   );
 };
@@ -332,19 +358,30 @@ export const ToolboxFilter = () => {
   const { fields, views } = options;
   return (
     <Fragment>
-      <TextElem connectors={connectors} />
-      <ColumnsElem connectors={connectors} />
-
-      <LineBreakElem connectors={connectors} />
-      <DropDownFilterElem connectors={connectors} fields={fields} />
-      <ToggleFilterElem connectors={connectors} fields={fields} />
-      <SearchElem connectors={connectors} />
-      <ActionElem connectors={connectors} options={options} />
-      <ContainerElem connectors={connectors} />
-      <CardElem connectors={connectors} />
-      <TabsElem connectors={connectors} />
-      <ViewElem connectors={connectors} views={views} />
-      <HTMLElem connectors={connectors} />
+      <div className="toolbar-row">
+        <TextElem connectors={connectors} />
+        <ColumnsElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <LineBreakElem connectors={connectors} />
+        <DropDownFilterElem connectors={connectors} fields={fields} />
+      </div>
+      <div className="toolbar-row">
+        <ToggleFilterElem connectors={connectors} fields={fields} />
+        <SearchElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <ActionElem connectors={connectors} options={options} />
+        <ContainerElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <CardElem connectors={connectors} />
+        <TabsElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <ViewElem connectors={connectors} views={views} />
+        <HTMLElem connectors={connectors} />
+      </div>
     </Fragment>
   );
 };
@@ -355,22 +392,34 @@ export const ToolboxEdit = () => {
   const { fields, field_view_options, images, views } = options;
   return (
     <Fragment>
-      <TextElem connectors={connectors} />
-      <ColumnsElem connectors={connectors} />
-      <FieldElem
-        connectors={connectors}
-        fields={fields}
-        field_view_options={field_view_options}
-      />
-      <LineBreakElem connectors={connectors} />
-      <ActionElem connectors={connectors} options={options} />
-      <ContainerElem connectors={connectors} />
-      <CardElem connectors={connectors} />
-      <TabsElem connectors={connectors} />
-      <LinkElem connectors={connectors} />
-      <ImageElem connectors={connectors} images={images} />
-      <HTMLElem connectors={connectors} />
-      <ViewElem connectors={connectors} views={views} />
+      <div className="toolbar-row">
+        <TextElem connectors={connectors} />
+        <ColumnsElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <FieldElem
+          connectors={connectors}
+          fields={fields}
+          field_view_options={field_view_options}
+        />
+        <LineBreakElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <ActionElem connectors={connectors} options={options} />
+        <ContainerElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <CardElem connectors={connectors} />
+        <TabsElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <LinkElem connectors={connectors} />
+        <ImageElem connectors={connectors} images={images} />
+      </div>
+      <div className="toolbar-row">
+        <HTMLElem connectors={connectors} />
+        <ViewElem connectors={connectors} views={views} />
+      </div>
     </Fragment>
   );
 };
@@ -381,18 +430,30 @@ export const ToolboxPage = () => {
   const { views, images } = options;
   return (
     <Fragment>
-      <TextElem connectors={connectors} />
-      <ColumnsElem connectors={connectors} />
-      <LineBreakElem connectors={connectors} />
-      <HTMLElem connectors={connectors} />
-      <CardElem connectors={connectors} />
-      <ImageElem connectors={connectors} images={images} />
-      <LinkElem connectors={connectors} />
-      <ViewElem connectors={connectors} views={views} />
-      <SearchElem connectors={connectors} />
-      <ActionElem connectors={connectors} options={options} />
-      <ContainerElem connectors={connectors} />
-      <TabsElem connectors={connectors} />
+      <div className="toolbar-row">
+        <TextElem connectors={connectors} />
+        <ColumnsElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <LineBreakElem connectors={connectors} />
+        <HTMLElem connectors={connectors} />
+      </div>
+      <div className="toolbar-row">
+        <CardElem connectors={connectors} />
+        <ImageElem connectors={connectors} images={images} />{" "}
+      </div>
+      <div className="toolbar-row">
+        <LinkElem connectors={connectors} />
+        <ViewElem connectors={connectors} views={views} />
+      </div>
+      <div className="toolbar-row">
+        <SearchElem connectors={connectors} />
+        <ActionElem connectors={connectors} options={options} />
+      </div>
+      <div className="toolbar-row">
+        <ContainerElem connectors={connectors} />
+        <TabsElem connectors={connectors} />
+      </div>
     </Fragment>
   );
 };

package/src/components/elements/Action.js

@@ -1,7 +1,6 @@
 import React, { Fragment, useContext } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
-import faIcons from "./faicons";
 import {
   blockProps,
   BlockSetting,
@@ -9,8 +8,8 @@ import {
   OrFormula,
   ConfigForm,
   setInitialConfig,
+  ButtonOrLinkSettingsRows,
 } from "./utils";
-import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
 
 export const Action = ({
   name,
@@ -19,16 +18,29 @@ export const Action = ({
   action_style,
   action_icon,
   action_size,
+  action_bgcol,
+  action_bordercol,
+  action_textcol,
 }) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
+
   const btn = (
     <button
       className={`btn ${action_style || "btn-primary"} ${action_size || ""}`}
       {...blockProps(block)}
       ref={(dom) => connect(drag(dom))}
+      style={
+        action_style === "btn-custom-color"
+          ? {
+              backgroundColor: action_bgcol || "#000000",
+              borderColor: action_bordercol || "#000000",
+              color: action_textcol || "#000000",
+            }
+          : {}
+      }
     >
       {action_icon ? <i className={`${action_icon} mr-1`}></i> : ""}
       {action_label || name}
@@ -49,6 +61,9 @@ export const ActionSettings = () => {
     action_style: node.data.props.action_style,
     action_size: node.data.props.action_size,
     action_icon: node.data.props.action_icon,
+    action_bgcol: node.data.props.action_bgcol,
+    action_bordercol: node.data.props.action_bordercol,
+    action_textcol: node.data.props.action_textcol,
   }));
   const {
     actions: { setProp },
@@ -59,119 +74,64 @@ export const ActionSettings = () => {
     confirm,
     configuration,
     action_label,
-    action_style,
-    action_size,
-    action_icon,
   } = node;
   const options = useContext(optionsCtx);
   const getCfgFields = (fv) => (options.actionConfigForms || {})[fv];
   const cfgFields = getCfgFields(name);
-  console.log({ action_icon });
   return (
     <div>
       <table className="w-100">
-        <tr>
-          <td>
-            <label>Action</label>
-          </td>
-          <td>
-            <select
-              value={name}
-              className="form-control"
-              onChange={(e) => {
-                setProp((prop) => (prop.name = e.target.value));
-                setInitialConfig(
-                  setProp,
-                  e.target.value,
-                  getCfgFields(e.target.value)
-                );
-              }}
-            >
-              {options.actions.map((f, ix) => (
-                <option key={ix} value={f}>
-                  {f}
-                </option>
-              ))}
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td colSpan="2">
-            <label>Label (leave blank for default)</label>
-            <OrFormula nodekey="action_label" {...{ setProp, isFormula, node }}>
-              <input
-                type="text"
+        <tbody>
+          <tr>
+            <td>
+              <label>Action</label>
+            </td>
+            <td>
+              <select
+                value={name}
                 className="form-control"
-                value={action_label}
-                onChange={(e) =>
-                  setProp((prop) => (prop.action_label = e.target.value))
-                }
-              />
-            </OrFormula>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label>Action style</label>
-          </td>
-          <td>
-            <select
-              className="form-control"
-              value={action_style}
-              onChange={(e) =>
-                setProp((prop) => (prop.action_style = e.target.value))
-              }
-            >
-              <option value="btn-primary">Primary button</option>
-              <option value="btn-secondary">Secondary button</option>
-              <option value="btn-success">Success button</option>
-              <option value="btn-danger">Danger button</option>
-              <option value="btn-outline-primary">
-                Primary outline button
-              </option>
-              <option value="btn-outline-secondary">
-                Secondary outline button
-              </option>
-              <option value="btn-link">Link</option>
-            </select>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label>Action size</label>
-          </td>
-          <td>
-            {" "}
-            <select
-              className="form-control"
-              value={action_size}
-              onChange={(e) =>
-                setProp((prop) => (prop.action_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>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            <label>Icon</label>
-          </td>
-          <td>
-            <FontIconPicker
-              value={action_icon}
-              icons={faIcons}
-              onChange={(value) =>
-                setProp((prop) => (prop.action_icon = value))
-              }
-              isMulti={false}
-            />
-          </td>
-        </tr><MinRoleSettingRow minRole={minRole} setProp={setProp} />
+                onChange={(e) => {
+                  setProp((prop) => (prop.name = e.target.value));
+                  setInitialConfig(
+                    setProp,
+                    e.target.value,
+                    getCfgFields(e.target.value)
+                  );
+                }}
+              >
+                {options.actions.map((f, ix) => (
+                  <option key={ix} value={f}>
+                    {f}
+                  </option>
+                ))}
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan="2">
+              <label>Label (leave blank for default)</label>
+              <OrFormula
+                nodekey="action_label"
+                {...{ setProp, isFormula, node }}
+              >
+                <input
+                  type="text"
+                  className="form-control"
+                  value={action_label}
+                  onChange={(e) =>
+                    setProp((prop) => (prop.action_label = e.target.value))
+                  }
+                />
+              </OrFormula>
+            </td>
+          </tr>
+          <ButtonOrLinkSettingsRows
+            setProp={setProp}
+            keyPrefix="action_"
+            values={node}
+          />
+          <MinRoleSettingRow minRole={minRole} setProp={setProp} />
+        </tbody>
       </table>
       {options.mode === "show" ? (
         <div className="form-check">
@@ -188,7 +148,7 @@ export const ActionSettings = () => {
         </div>
       ) : null}
       <BlockSetting block={block} setProp={setProp} />
-      
+
       {cfgFields ? (
         <ConfigForm
           fields={cfgFields}

package/src/components/elements/Aggregation.js

@@ -118,7 +118,6 @@ export const AggregationSettings = () => {
             <label>Where</label>
           </td>
           <td>
-            {" "}
             <input
               type="text"
               className="form-control"

package/src/components/elements/Column.js

@@ -6,6 +6,7 @@ import optionsCtx from "../context";
 export const Column = ({ children, align }) => {
   const {
     selected,
+    id,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
   return (
@@ -13,7 +14,9 @@ export const Column = ({ children, align }) => {
       className={selected ? "selected-node" : ""}
       ref={(dom) => connect(drag(dom))}
     >
-      <div className="canvas">{children}</div>
+      <div className={`canvas ${id === "ROOT" ? "root-canvas" : ""}`}>
+        {children}
+      </div>
     </div>
   );
 };

package/src/components/elements/Columns.js

@@ -85,7 +85,6 @@ export const ColumnsSettings = () => {
           {ntimes(ncols, (ix) => (
             <Fragment key={ix}>
               <tr>
-                {" "}
                 <th colSpan="4">Column {ix + 1}</th>
               </tr>
               <tr>
@@ -127,7 +126,7 @@ export const ColumnsSettings = () => {
                 </td>
               </tr>
             </Fragment>
-          ))}{" "}
+          ))}
         </tbody>
       </table>
     </div>