@saltcorn/builder 0.5.6-beta.3 → 0.6.0-beta.0

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>
@@ -254,13 +279,14 @@ export const fetchViewPreview = (args = {}) => (changes = {}) => {
   });
 };
 
-export const SelectUnits = ({ vert, ...props }) => (
+export const SelectUnits = ({ vert, autoable, ...props }) => (
   <select {...props}>
     <option>px</option>
     <option>%</option>
     <option>{vert ? "vh" : "vw"}</option>
     <option>em</option>
     <option>rem</option>
+    {autoable && <option>auto</option>}
   </select>
 );
 
@@ -284,6 +310,19 @@ export const parseStyles = (styles) =>
       }),
       {}
     );
+
+export const reactifyStyles = (styles) => {
+  const toCamel = (s) => {
+    return s.replace(/([-][a-z])/gi, ($1) => {
+      return $1.toUpperCase().replace("-", "");
+    });
+  };
+  const reactified = {};
+  Object.keys(styles).forEach((k) => {
+    reactified[toCamel(k)] = styles[k];
+  });
+  return reactified;
+};
 const isCheckbox = (f) =>
   f && f.type && (f.type === "Bool" || f.type.name === "Bool");
 export const setInitialConfig = (setProp, fieldview, fields) => {
@@ -295,6 +334,24 @@ export const setInitialConfig = (setProp, fieldview, fields) => {
       });
   });
 };
+
+const ColorInput = ({ value, onChange }) =>
+  value ? (
+    <input
+      type="color"
+      value={value}
+      className="form-control"
+      onChange={(e) => e.target && onChange(e.target.value)}
+    />
+  ) : (
+    <button
+      className="btn btn-sm btn-outline-secondary"
+      onClick={() => onChange("#000000")}
+    >
+      <small>Set color</small>
+    </button>
+  );
+
 export const ConfigForm = ({
   fields,
   configuration,
@@ -322,7 +379,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>
       );
     })}
@@ -338,25 +397,41 @@ export const ConfigField = ({
   setProp,
   onChange,
   props,
+  isStyle,
 }) => {
   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 if (isStyle) {
+        if (!prop.style) prop.style = {};
+        prop.style[field.name] = v;
+      } else prop[field.name] = v;
     });
     onChange && onChange(field.name, v);
   };
   const value = or_if_undef(
-    configuration ? configuration[field.name] : props[field.name],
+    configuration
+      ? configuration[field.name]
+      : isStyle
+      ? props.style[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,34 +439,27 @@ 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)}
-      />
-    ),
-    Color: () => (
-      <input
-        type="color"
-        value={value}
-        className="form-control"
-        onChange={(e) => myOnChange(e.target.value)}
+        onChange={(e) => e.target && myOnChange(e.target.value)}
       />
     ),
+    Color: () => <ColorInput value={value} onChange={(c) => myOnChange(c)} />,
     Bool: () => (
       <div className="form-check">
         <input
           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 +470,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 +494,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)}
@@ -433,37 +511,77 @@ export const ConfigField = ({
         ))}
       </div>
     ),
-    DimUnits: () => (
-      <Fragment>
-        <input
-          type="number"
-          value={value}
-          step="1"
-          min="0"
-          max="9999"
-          className="w-50 form-control-sm d-inline dimunit"
-          onChange={(e) => myOnChange(e.target.value)}
-        />
-        <SelectUnits
-          value={or_if_undef(
-            configuration
-              ? configuration[field.name + "Unit"]
-              : props[field.name + "Unit"],
-            "px"
+    DimUnits: () => {
+      let styleVal, styleDim;
+      if (isStyle && value === "auto") {
+        styleVal = "";
+        styleDim = "auto";
+      } else if (isStyle && value && typeof value === "string") {
+        const matches = value.match(/^([0-9]+\.?[0-9]*)(.*)/);
+        if (matches) {
+          styleVal = matches[1];
+          styleDim = matches[2];
+        }
+      }
+      return (
+        <Fragment>
+          {styleDim !== "auto" && (
+            <input
+              type="number"
+              value={(isStyle ? styleVal : value) || ""}
+              step="1"
+              min="0"
+              max="9999"
+              className="w-50 form-control-sm d-inline dimunit"
+              disabled={field.autoable && styleDim === "auto"}
+              onChange={(e) =>
+                myOnChange(
+                  isStyle
+                    ? `${e.target.value}${styleDim || "px"}`
+                    : e.target.value
+                )
+              }
+            />
           )}
-          className="w-50 form-control-sm d-inline dimunit"
-          vert={true}
-          onChange={(e) =>
-            setProp((prop) => {
-              if (configuration)
-                prop.configuration[field.name + "Unit"] = e.target.value;
-              else prop[field.name + "Unit"] = e.target.value;
-            })
-          }
-        />
-      </Fragment>
-    ),
-  }[field.input_type || field.type.name || field.type]();
+          <SelectUnits
+            value={or_if_undef(
+              configuration
+                ? configuration[field.name + "Unit"]
+                : isStyle
+                ? styleDim
+                : props[field.name + "Unit"],
+              "px"
+            )}
+            autoable={field.autoable}
+            className={`w-${
+              styleDim === "auto" ? 100 : 50
+            } form-control-sm d-inline dimunit`}
+            vert={true}
+            onChange={(e) => {
+              if (!e.target) return;
+              const target_value = e.target.value;
+              setProp((prop) => {
+                const myStyleVal =
+                  target_value === "auto" && field.autoable && isStyle
+                    ? ""
+                    : styleVal;
+                if (configuration)
+                  prop.configuration[field.name + "Unit"] = target_value;
+                else if (isStyle) {
+                  prop.style[field.name] = `${or_if_undef(
+                    myStyleVal,
+                    0
+                  )}${target_value}`;
+                } else prop[field.name + "Unit"] = target_value;
+              });
+            }}
+          />
+        </Fragment>
+      );
+    },
+  };
+  const f = dispatch[field.input_type || field.type.name || field.type];
+  return f ? f() : null;
 };
 
 export const SettingsFromFields = (fields) => () => {
@@ -497,7 +615,7 @@ export const SettingsSectionHeaderRow = ({ title }) => (
   </tr>
 );
 
-export const SettingsRow = ({ field, node, setProp, onChange }) => {
+export const SettingsRow = ({ field, node, setProp, onChange, isStyle }) => {
   const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
   const needLabel = field.type !== "Bool";
   const inner = field.canBeFormula ? (
@@ -519,6 +637,7 @@ export const SettingsRow = ({ field, node, setProp, onChange }) => {
       props={node}
       setProp={setProp}
       onChange={onChange}
+      isStyle={isStyle}
     />
   );
   return (
@@ -562,3 +681,143 @@ 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>,
+        ]
+      : []),
+  ];
+};
+export const bstyleopt = (style) => ({
+  value: style,
+  title: style,
+  label: (
+    <div
+      style={{
+        borderLeftStyle: style,
+        borderTopStyle: style,
+        height: "15px",
+        width: "6px",
+      }}
+    ></div>
+  ),
+});