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

package/src/components/elements/ViewLink.js

@@ -7,9 +7,8 @@ import {
   MinRoleSettingRow,
   OrFormula,
   TextStyleSetting,
+  ButtonOrLinkSettingsRows,
 } from "./utils";
-import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
-import faIcons from "./faicons";
 
 export const ViewLink = ({
   name,
@@ -21,6 +20,9 @@ export const ViewLink = ({
   inModal,
   label,
   textStyle,
+  link_bgcol,
+  link_bordercol,
+  link_textcol,
 }) => {
   const {
     selected,
@@ -35,6 +37,15 @@ export const ViewLink = ({
       } ${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> : ""}
       {displabel}
@@ -54,6 +65,9 @@ export const ViewLinkSettings = () => {
     link_size: node.data.props.link_size,
     link_icon: node.data.props.link_icon,
     textStyle: node.data.props.textStyle,
+    link_bgcol: node.data.props.link_bgcol,
+    link_bordercol: node.data.props.link_bordercol,
+    link_textcol: node.data.props.link_textcol,
   }));
   const {
     actions: { setProp },
@@ -63,82 +77,55 @@ export const ViewLinkSettings = () => {
     label,
     isFormula,
     inModal,
-    link_style,
-    link_icon,
-    link_size,
     textStyle,
   } = node;
   const options = useContext(optionsCtx);
   return (
     <div>
-      <div>
-        <label>View to link to</label>
-        <select
-          value={name}
-          className="form-control"
-          onChange={(e) => setProp((prop) => (prop.name = e.target.value))}
-        >
-          {options.link_view_opts.map((f, ix) => (
-            <option key={ix} value={f.name}>
-              {f.label}
-            </option>
-          ))}
-        </select>
-      </div>
-      <div>
-        <label>Label (leave blank for default)</label>
-        <OrFormula nodekey="label" {...{ setProp, isFormula, node }}>
-          <input
-            type="text"
-            className="viewlink-label form-control"
-            value={label}
-            onChange={(e) => setProp((prop) => (prop.label = e.target.value))}
+      <table className="w-100">
+        <tbody>
+          <tr>
+            <td colSpan="2">
+              <label>View to link to</label>
+              <select
+                value={name}
+                className="form-control"
+                onChange={(e) =>
+                  setProp((prop) => (prop.name = e.target.value))
+                }
+              >
+                {options.link_view_opts.map((f, ix) => (
+                  <option key={ix} value={f.name}>
+                    {f.label}
+                  </option>
+                ))}
+              </select>
+            </td>
+          </tr>
+          <tr>
+            <td colSpan="2">
+              <label>Label (leave blank for default)</label>
+              <OrFormula nodekey="label" {...{ setProp, isFormula, node }}>
+                <input
+                  type="text"
+                  className="viewlink-label form-control"
+                  value={label}
+                  onChange={(e) =>
+                    setProp((prop) => (prop.label = e.target.value))
+                  }
+                />
+              </OrFormula>
+            </td>
+          </tr>
+          <ButtonOrLinkSettingsRows
+            setProp={setProp}
+            keyPrefix="link_"
+            btnClass="btn"
+            values={node}
+            linkFirst={true}
           />
-        </OrFormula>
-      </div>
-      <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}
-      />
+        </tbody>
+      </table>
       <div className="form-check">
         <input
           className="form-check-input"
@@ -179,6 +166,9 @@ ViewLink.craft = {
       "link_style",
       "link_icon",
       "link_size",
+      "link_bgcol",
+      "link_bordercol",
+      "link_textcol",
     ],
   },
 };

package/src/components/elements/utils.js

@@ -6,6 +6,8 @@ import {
   faChevronRight,
 } from "@fortawesome/free-solid-svg-icons";
 import { useNode } from "@craftjs/core";
+import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
+import faIcons from "./faicons";
 
 export const blockProps = (is_block) =>
   is_block ? { style: { display: "block" } } : {};
@@ -17,7 +19,12 @@ export const BlockSetting = ({ block, setProp }) => (
       name="block"
       type="checkbox"
       checked={block}
-      onChange={(e) => setProp((prop) => (prop.block = e.target.checked))}
+      onChange={(e) => {
+        if (e.target) {
+          const target_value = e.target.checked;
+          setProp((prop) => (prop.block = target_value));
+        }
+      }}
     />
     <label className="form-check-label">Block display</label>
   </div>
@@ -36,9 +43,12 @@ export const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
             type="text"
             className="form-control text-to-display"
             value={node[nodekey]}
-            onChange={(e) =>
-              setProp((prop) => (prop[nodekey] = e.target.value))
-            }
+            onChange={(e) => {
+              if (e.target) {
+                const target_value = e.target.value;
+                setProp((prop) => (prop[nodekey] = target_value));
+              }
+            }}
           />
         ) : (
           children
@@ -50,7 +60,7 @@ export const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
             }`}
             title="Calculated formula"
             type="button"
-            onClick={(e) =>
+            onClick={() =>
               setProp((prop) => (prop.isFormula[nodekey] = !isFormula[nodekey]))
             }
           >
@@ -73,7 +83,12 @@ export const MinRoleSetting = ({ minRole, setProp }) => {
       <label>Minimum Role</label>
       <select
         value={minRole}
-        onChange={(e) => setProp((prop) => (prop.minRole = e.target.value))}
+        onChange={(e) => (e) => {
+          if (e.target) {
+            const target_value = e.target.value;
+            setProp((prop) => (prop.minRole = target_value));
+          }
+        }}
       >
         {options.roles.map((r) => (
           <option key={r.id} value={r.id}>
@@ -95,7 +110,12 @@ export const MinRoleSettingRow = ({ minRole, setProp }) => {
         <select
           value={minRole}
           className="form-control"
-          onChange={(e) => setProp((prop) => (prop.minRole = e.target.value))}
+          onChange={(e) => {
+            if (e.target) {
+              const target_value = e.target.value;
+              setProp((prop) => (prop.minRole = target_value));
+            }
+          }}
         >
           {options.roles.map((r) => (
             <option key={r.id} value={r.id}>
@@ -112,7 +132,12 @@ const TextStyleSelect = ({ textStyle, setProp }) => {
     <select
       value={textStyle}
       className="form-control"
-      onChange={(e) => setProp((prop) => (prop.textStyle = e.target.value))}
+      onChange={(e) => {
+        if (e.target) {
+          const target_value = e.target.value;
+          setProp((prop) => (prop.textStyle = target_value));
+        }
+      }}
     >
       <option value="">Normal</option>
       <option value="h1">Heading 1</option>
@@ -322,7 +347,9 @@ export const ConfigForm = ({
             setProp={setProp}
             onChange={onChange}
           />
-          {f.sublabel ? <i>{f.sublabel}</i> : null}
+          {f.sublabel ? (
+            <i dangerouslySetInnerHTML={{ __html: f.sublabel }}></i>
+          ) : null}
         </div>
       );
     })}
@@ -341,8 +368,10 @@ export const ConfigField = ({
 }) => {
   const myOnChange = (v) => {
     setProp((prop) => {
-      if (configuration) prop.configuration[field.name] = v;
-      else prop[field.name] = v;
+      if (configuration) {
+        if (!prop.configuration) prop.configuration = {};
+        prop.configuration[field.name] = v;
+      } else prop[field.name] = v;
     });
     onChange && onChange(field.name, v);
   };
@@ -350,13 +379,19 @@ export const ConfigField = ({
     configuration ? configuration[field.name] : props[field.name],
     field.default
   );
-  return {
+  if (field.input_type === "fromtype") field.input_type = null;
+  if (field.type && field.type.name === "String" && field.attributes.options) {
+    field.input_type = "select";
+    field.options = field.attributes.options;
+    if (!field.required) field.options.unshift("");
+  }
+  const dispatch = {
     String: () => (
       <input
         type="text"
         className="form-control"
-        value={value}
-        onChange={(e) => myOnChange(e.target.value)}
+        value={value || ""}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
     Integer: () => (
@@ -364,17 +399,17 @@ export const ConfigField = ({
         type="number"
         className="form-control"
         step={1}
-        value={value}
-        onChange={(e) => myOnChange(e.target.value)}
+        value={value || ""}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
     Float: () => (
       <input
         type="number"
         className="form-control"
-        value={value}
+        value={value || ""}
         step={0.01}
-        onChange={(e) => myOnChange(e.target.value)}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
     Color: () => (
@@ -382,7 +417,7 @@ export const ConfigField = ({
         type="color"
         value={value}
         className="form-control"
-        onChange={(e) => myOnChange(e.target.value)}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
     Bool: () => (
@@ -391,7 +426,7 @@ export const ConfigField = ({
           type="checkbox"
           className="form-check-input"
           checked={value}
-          onChange={(e) => myOnChange(e.target.checked)}
+          onChange={(e) => e.target && myOnChange(e.target.checked)}
         />
         <label className="form-check-label">{field.label}</label>
       </div>
@@ -402,14 +437,23 @@ export const ConfigField = ({
         type="text"
         className="form-control"
         value={value}
-        onChange={(e) => myOnChange(e.target.value)}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
+      />
+    ),
+    code: () => (
+      <textarea
+        rows="6"
+        type="text"
+        className="form-control"
+        value={value}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
     select: () => (
       <select
         className="form-control"
-        value={value}
-        onChange={(e) => myOnChange(e.target.value)}
+        value={value || ""}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
       >
         {field.options.map((o, ix) => (
           <option key={ix}>{o}</option>
@@ -417,13 +461,14 @@ export const ConfigField = ({
       </select>
     ),
     btn_select: () => (
-      <div class="btn-group w-100" role="group">
+      <div className="btn-group w-100" role="group">
         {field.options.map((o, ix) => (
           <button
+            key={ix}
             title={o.title || o.value}
             type="button"
             style={{ width: `${Math.floor(100 / field.options.length)}%` }}
-            class={`btn btn-sm btn-${
+            className={`btn btn-sm btn-${
               value !== o.value ? "outline-" : ""
             }secondary ${field.btnClass || ""}`}
             onClick={() => myOnChange(o.value)}
@@ -453,17 +498,21 @@ export const ConfigField = ({
           )}
           className="w-50 form-control-sm d-inline dimunit"
           vert={true}
-          onChange={(e) =>
+          onChange={(e) => {
+            if (!e.target) return;
+            const target_value = e.target.value;
             setProp((prop) => {
               if (configuration)
-                prop.configuration[field.name + "Unit"] = e.target.value;
-              else prop[field.name + "Unit"] = e.target.value;
-            })
-          }
+                prop.configuration[field.name + "Unit"] = target_value;
+              else prop[field.name + "Unit"] = target_value;
+            });
+          }}
         />
       </Fragment>
     ),
-  }[field.input_type || field.type.name || field.type]();
+  };
+  const f = dispatch[field.input_type || field.type.name || field.type];
+  return f ? f() : null;
 };
 
 export const SettingsFromFields = (fields) => () => {
@@ -562,3 +611,129 @@ export class ErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
+
+export const ButtonOrLinkSettingsRows = ({
+  setProp,
+  btnClass = null,
+  keyPrefix = "",
+  values,
+  linkFirst = false,
+}) => {
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
+  const addBtnClass = (s) => (btnClass ? `${btnClass} ${s}` : s);
+  return [
+    <tr key="btnstyle">
+      <td>
+        <label>Style</label>
+      </td>
+      <td>
+        <select
+          className="form-control"
+          value={values[keyPrefix + "style"]}
+          onChange={setAProp(keyPrefix + "style")}
+        >
+          {linkFirst ? (
+            <option value={addBtnClass("btn-link")}>Link</option>
+          ) : null}
+          <option value={addBtnClass("btn-primary")}>Primary button</option>
+          <option value={addBtnClass("btn-secondary")}>Secondary button</option>
+          <option value={addBtnClass("btn-success")}>Success button</option>
+          <option value={addBtnClass("btn-danger")}>Danger button</option>
+          <option value={addBtnClass("btn-outline-primary")}>
+            Primary outline button
+          </option>
+          <option value={addBtnClass("btn-outline-secondary")}>
+            Secondary outline button
+          </option>
+          <option value={addBtnClass("btn-custom-color")}>
+            Button custom color
+          </option>
+          {!linkFirst ? (
+            <option value={addBtnClass("btn-link")}>Link</option>
+          ) : null}
+        </select>
+      </td>
+    </tr>,
+    <tr key="btnsz">
+      <td>
+        <label>Action size</label>
+      </td>
+      <td>
+        <select
+          className="form-control"
+          value={values[keyPrefix + "size"]}
+          onChange={setAProp(keyPrefix + "size")}
+        >
+          <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 key="btnicon">
+      <td>
+        <label>Icon</label>
+      </td>
+      <td>
+        <FontIconPicker
+          value={values[keyPrefix + "icon"]}
+          onChange={(value) =>
+            setProp((prop) => (prop[keyPrefix + "icon"] = value))
+          }
+          isMulti={false}
+          icons={faIcons}
+        />
+      </td>
+    </tr>,
+    ...(values[keyPrefix + "style"] === addBtnClass("btn-custom-color")
+      ? [
+          <tr key="btnbgcol">
+            <td>
+              <label>Background</label>
+            </td>
+            <td>
+              <input
+                type="color"
+                value={values[keyPrefix + "bgcol"]}
+                className="form-control-sm w-50"
+                onChange={setAProp(keyPrefix + "bgcol")}
+              />
+            </td>
+          </tr>,
+          <tr key="btnbdcol">
+            <td>
+              <label>Border</label>
+            </td>
+            <td>
+              <input
+                type="color"
+                value={values[keyPrefix + "bordercol"]}
+                className="form-control-sm w-50"
+                onChange={setAProp(keyPrefix + "bordercol")}
+              />
+            </td>
+          </tr>,
+          <tr key="btntxtcol">
+            <td>
+              <label>Text</label>
+            </td>
+            <td>
+              <input
+                type="color"
+                value={values[keyPrefix + "textcol"]}
+                className="form-control-sm w-50"
+                onChange={setAProp(keyPrefix + "textcol")}
+              />
+            </td>
+          </tr>,
+        ]
+      : []),
+  ];
+};

package/src/components/storage.js

@@ -56,7 +56,7 @@ const allElements = [
   ToggleFilter,
 ];
 
-export const layoutToNodes = (layout, query, actions) => {
+export const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
   //console.log("layoutToNodes", JSON.stringify(layout));
   function toTag(segment, ix) {
     if (!segment) return <Empty key={ix} />;
@@ -98,6 +98,7 @@ export const layoutToNodes = (layout, query, actions) => {
           textStyle={segment.textStyle || ""}
           labelFor={segment.labelFor || ""}
           icon={segment.icon}
+          font={segment.font || ""}
         />
       );
     } else if (segment.type === "view") {
@@ -107,6 +108,7 @@ export const layoutToNodes = (layout, query, actions) => {
           view={segment.view}
           name={segment.name}
           state={segment.state}
+          configuration={segment.configuration || {}}
         />
       );
     } else if (segment.type === "action") {
@@ -119,6 +121,9 @@ export const layoutToNodes = (layout, query, actions) => {
           action_style={segment.action_style || "btn-primary"}
           action_size={segment.action_size || ""}
           action_icon={segment.action_icon || ""}
+          action_bgcol={segment.action_bgcol || ""}
+          action_bordercol={segment.action_bordercol || ""}
+          action_textcol={segment.action_textcol || ""}
           confirm={segment.confirm}
           configuration={segment.configuration || {}}
           block={segment.block || false}
@@ -140,6 +145,7 @@ export const layoutToNodes = (layout, query, actions) => {
           gradStartColor={segment.gradStartColor}
           gradEndColor={segment.gradEndColor}
           gradDirection={segment.gradDirection}
+          rotate={segment.rotate || 0}
           customClass={segment.customClass}
           customCSS={segment.customCSS}
           overflow={segment.overflow}
@@ -231,12 +237,12 @@ export const layoutToNodes = (layout, query, actions) => {
   }
   //const node1 = query.createNode(toTag(layout));
   //actions.add(node1, );
-  go(layout, "ROOT");
+  go(layout, parent);
 };
 
 const rand_ident = () => Math.floor(Math.random() * 16777215).toString(16);
 
-export const craftToSaltcorn = (nodes) => {
+export const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
   //console.log(JSON.stringify(nodes, null, 2));
   var columns = [];
   const get_nodes = (node) => {
@@ -314,6 +320,7 @@ export const craftToSaltcorn = (nodes) => {
           gradStartColor: node.props.gradStartColor,
           gradEndColor: node.props.gradEndColor,
           gradDirection: node.props.gradDirection,
+          rotate: node.props.rotate,
         };
       else return get_nodes(node);
     }
@@ -327,6 +334,7 @@ export const craftToSaltcorn = (nodes) => {
         isFormula: node.props.isFormula,
         labelFor: node.props.labelFor,
         icon: node.props.icon,
+        font: node.props.font,
       };
     }
 
@@ -357,6 +365,7 @@ export const craftToSaltcorn = (nodes) => {
         name:
           node.props.name === "not_assigned" ? rand_ident() : node.props.name,
         state: node.props.state,
+        configuration: node.props.configuration,
       };
     }
 
@@ -369,6 +378,9 @@ export const craftToSaltcorn = (nodes) => {
         action_style: node.props.action_style,
         action_size: node.props.action_size,
         action_icon: node.props.action_icon,
+        action_bgcol: node.props.action_bgcol,
+        action_bordercol: node.props.action_bordercol,
+        action_textcol: node.props.action_textcol,
         minRole: node.props.minRole,
         confirm: node.props.confirm,
         configuration: node.props.configuration,
@@ -385,13 +397,16 @@ export const craftToSaltcorn = (nodes) => {
         action_style: node.props.action_style,
         action_size: node.props.action_size,
         action_icon: node.props.action_icon,
+        action_bgcol: node.props.action_bgcol,
+        action_bordercol: node.props.action_bordercol,
+        action_textcol: node.props.action_textcol,
         minRole: node.props.minRole,
         isFormula: node.props.isFormula,
         rndid: node.props.rndid === "not_assigned" ? newid : node.props.rndid,
       };
     }
   };
-  const layout = go(nodes["ROOT"]) || { type: "blank", contents: "" };
+  const layout = go(nodes[startFrom]) || { type: "blank", contents: "" };
   /*console.log("nodes", JSON.stringify(nodes));
   console.log("cols", JSON.stringify(columns));
   console.log("layout", JSON.stringify(layout));*/