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

package/src/components/elements/Container.js

@@ -10,6 +10,8 @@ import {
   SelectUnits,
   SettingsSectionHeaderRow,
   SettingsRow,
+  reactifyStyles,
+  bstyleopt,
 } from "./utils";
 import {
   BorderOuter,
@@ -34,10 +36,14 @@ import {
 } from "react-bootstrap-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faScroll, faRobot } from "@fortawesome/free-solid-svg-icons";
+import { BoxModelEditor } from "./BoxModelEditor";
+
+function capitalizeFirstLetter(string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
 export const Container = ({
   children,
-  borderWidth,
-  borderStyle,
   minHeight,
   height,
   width,
@@ -49,7 +55,7 @@ export const Container = ({
   bgFileId,
   imageSize,
   bgType,
-  block,
+  display,
   bgColor,
   setTextColor,
   textColor,
@@ -58,35 +64,32 @@ export const Container = ({
   margin,
   padding,
   minScreenWidth,
-  borderRadius,
-  borderRadiusUnit,
-  borderDirection,
-  borderColor,
   gradStartColor,
   gradEndColor,
   gradDirection,
+  rotate,
+  style,
 }) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
+  //console.log("container style", style);
   return (
     <div
       ref={(dom) => connect(drag(dom))}
-      className={`${customClass || ""} text-${hAlign} ${
+      className={`${customClass || ""} canvas text-${hAlign} ${
         vAlign === "middle" ? "d-flex align-items-center" : ""
       } ${
         vAlign === "middle" && hAlign === "center" && "justify-content-center"
       } ${selected ? "selected-node" : ""}`}
       style={{
         ...parseStyles(customCSS || ""),
-        padding: padding.map((p) => p + "px").join(" "),
-        margin: margin.map((p) => p + "px").join(" "),
+        ...reactifyStyles(style),
+        display,
+        //padding: padding.map((p) => p + "px").join(" "),
+        //margin: margin.map((p) => p + "px").join(" "),
         minHeight: `${Math.max(minHeight, 15)}${minHeightUnit || "px"}`,
-        [`border${
-          borderDirection ? `-${borderDirection}` : ""
-        }`]: `${borderWidth}px ${borderStyle} ${borderColor || "black"}`,
-        ...(block === false ? { display: "inline-block" } : {}),
         ...(bgType === "Image" && bgFileId && +bgFileId
           ? {
               backgroundImage: `url('/files/serve/${bgFileId}')`,
@@ -116,31 +119,25 @@ export const Container = ({
               height: `${height}${heightUnit || "px"}`,
             }
           : {}),
-        ...(typeof borderRadius !== "undefined"
+        ...(typeof width !== "undefined"
           ? {
-              borderRadius: `${borderRadius}${borderRadiusUnit || "px"}`,
+              width: `${width}${widthUnit || "px"}`,
             }
           : {}),
-        ...(typeof width !== "undefined"
+        ...(rotate
           ? {
-              width: `${width}${widthUnit || "px"}`,
+              transform: `rotate(${rotate}deg)`,
             }
           : {}),
       }}
     >
-      <div className="canvas">{children}</div>
+      {children}
     </div>
   );
 };
 
 export const ContainerSettings = () => {
   const node = useNode((node) => ({
-    borderWidth: node.data.props.borderWidth,
-    borderStyle: node.data.props.borderStyle,
-    borderRadius: node.data.props.borderRadius,
-    borderRadiusUnit: node.data.props.borderRadiusUnit,
-    borderDirection: node.data.props.borderDirection,
-    borderColor: node.data.props.borderColor,
     minHeight: node.data.props.minHeight,
     height: node.data.props.height,
     width: node.data.props.width,
@@ -154,7 +151,6 @@ export const ContainerSettings = () => {
     imageSize: node.data.props.imageSize,
     vAlign: node.data.props.vAlign,
     hAlign: node.data.props.hAlign,
-    block: node.data.props.block,
     fullPageWidth: node.data.props.fullPageWidth,
     showIfFormula: node.data.props.showIfFormula,
     setTextColor: node.data.props.setTextColor,
@@ -173,27 +169,16 @@ export const ContainerSettings = () => {
     gradEndColor: node.data.props.gradEndColor,
     gradDirection: node.data.props.gradDirection,
     overflow: node.data.props.overflow,
+    rotate: node.data.props.rotate,
+    display: node.data.props.display,
+    style: node.data.props.style,
   }));
   const {
     actions: { setProp },
-    borderWidth,
-    borderStyle,
-    borderDirection,
-    borderRadius,
-    borderRadiusUnit,
-    borderColor,
-    minHeight,
-    height,
-    width,
-    minHeightUnit,
-    heightUnit,
-    widthUnit,
-    vAlign,
-    hAlign,
     bgFileId,
     imageSize,
     bgType,
-    block,
+    display,
     bgColor,
     setTextColor,
     textColor,
@@ -217,132 +202,67 @@ export const ContainerSettings = () => {
   } = node;
   const options = useContext(optionsCtx);
   const ownership = !!options.ownership;
-  const bstyleopt = (style) => ({
-    value: style,
-    title: style,
-    label: (
-      <div
-        style={{
-          borderLeftStyle: style,
-          borderTopStyle: style,
-          height: "15px",
-          width: "6px",
-        }}
-      ></div>
-    ),
-  });
+
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
   return (
     <Accordion>
-      <table className="w-100" accordiontitle="Placement">
+      <div accordiontitle="Box" className="w-100">
+        <BoxModelEditor setProp={setProp} node={node} />
+        <table className="w-100">
+          <tbody>
+            <tr>
+              <td colSpan="2"></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <table className="w-100" accordiontitle="Display">
         <tbody>
-          <SettingsSectionHeaderRow title="Border" />
-          <tr>
-            <td>
-              <label>Width</label>
-            </td>
-            <td>
-              <div className="input-group input-group-sm w-100">
-                <input
-                  type="number"
-                  value={borderWidth}
-                  step="1"
-                  className="form-control w-50"
-                  min="0"
-                  max="20"
-                  onChange={(e) =>
-                    setProp((prop) => {
-                      prop.borderWidth = e.target.value;
-                    })
-                  }
-                />
-                <div class="input-group-append w-50 d-inline">
-                  <span class="input-group-text">px</span>
-                </div>
-              </div>
-            </td>
-          </tr>
           <SettingsRow
             field={{
-              name: "borderStyle",
-              label: "Style",
-              type: "btn_select",
-              btnClass: "btnstylesel",
+              name: "display",
+              label: "Display",
+              type: "select",
               options: [
-                "solid",
-                "dotted",
-                "dashed",
-                "double",
-                "groove",
-                "ridge",
-                "inset",
-                "outset",
-              ].map(bstyleopt),
+                "block",
+                "inline",
+                "inline-block",
+                "none",
+                "flex",
+                "inline-flex",
+              ],
             }}
             node={node}
             setProp={setProp}
           />
           <SettingsRow
             field={{
-              name: "borderDirection",
-              label: "Direction",
+              name: "overflow",
+              label: "Overflow",
               type: "btn_select",
-              btnClass: "btnstylesel",
               options: [
-                { value: "", title: "None", label: <BorderAll /> },
-                { value: "top", title: "Top", label: <BorderTop /> },
-                { value: "bottom", title: "Bottom", label: <BorderBottom /> },
-                { value: "left", title: "Left", label: <BorderLeft /> },
-                { value: "right", title: "Right", label: <BorderRight /> },
+                { value: "visible", title: "Visible", label: <EyeFill /> },
+                { value: "hidden", title: "Hidden", label: <EyeSlashFill /> },
+                {
+                  value: "scroll",
+                  title: "Scroll",
+                  label: <FontAwesomeIcon icon={faScroll} />,
+                },
+                {
+                  value: "auto",
+                  title: "Auto",
+                  label: <FontAwesomeIcon icon={faRobot} />,
+                },
               ],
             }}
             node={node}
             setProp={setProp}
           />
-
-          <tr>
-            <td>
-              <label>Color</label>
-            </td>
-            <td>
-              <input
-                type="color"
-                value={borderColor}
-                className="form-control-sm w-50 mr-2"
-                onChange={(e) =>
-                  setProp((prop) => {
-                    prop.borderColor = e.target.value;
-                  })
-                }
-              />
-              <small>{borderColor}</small>
-            </td>
-          </tr>
-          <SettingsRow
-            field={{ name: "borderRadius", label: "Radius", type: "DimUnits" }}
-            node={node}
-            setProp={setProp}
-          />
-          <SettingsSectionHeaderRow title="Size" />
-          <SettingsRow
-            field={{ name: "minHeight", label: "Min height", type: "DimUnits" }}
-            node={node}
-            setProp={setProp}
-          />
-          <SettingsRow
-            field={{ name: "height", label: "Height", type: "DimUnits" }}
-            node={node}
-            setProp={setProp}
-          />
-          <SettingsRow
-            field={{ name: "width", label: "Widths", type: "DimUnits" }}
-            node={node}
-            setProp={setProp}
-          />
-          <tr>
-            <td colSpan="2">
-              <BlockSetting block={block} setProp={setProp} />
-            </td>
-          </tr>
           <tr>
             <td colSpan="2">
               <div className="form-check">
@@ -363,49 +283,17 @@ export const ContainerSettings = () => {
           </tr>
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Spacing">
-        <tbody>
-          <tr>
-            <th></th>
-            <th>Margin</th>
-            <th>Padding</th>
-          </tr>
-          {["Top", "Right", "Bottom", "Left"].map((direction, ix) => (
-            <tr key={ix}>
-              <td>{direction}</td>
-              <td>
-                <input
-                  type="number"
-                  value={margin[ix]}
-                  step="1"
-                  className="form-control-sm w-100"
-                  onChange={(e) =>
-                    setProp((prop) => {
-                      prop.margin[ix] = e.target.value;
-                    })
-                  }
-                />
-              </td>
-              <td>
-                <input
-                  type="number"
-                  value={padding[ix]}
-                  step="1"
-                  className="form-control-sm w-100"
-                  onChange={(e) =>
-                    setProp((prop) => {
-                      prop.padding[ix] = e.target.value;
-                    })
-                  }
-                />
-              </td>
-              <td>px</td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
       <table className="w-100" accordiontitle="Contents">
         <tbody>
+          <SettingsRow
+            field={{
+              name: "rotate",
+              label: "Rotate °",
+              type: "Integer",
+            }}
+            node={node}
+            setProp={setProp}
+          />
           <SettingsSectionHeaderRow title="Align" />
           <SettingsRow
             field={{
@@ -436,29 +324,6 @@ export const ContainerSettings = () => {
             node={node}
             setProp={setProp}
           />
-          <SettingsRow
-            field={{
-              name: "overflow",
-              label: "Overflow",
-              type: "btn_select",
-              options: [
-                { value: "visible", title: "Visible", label: <EyeFill /> },
-                { value: "hidden", title: "Hidden", label: <EyeSlashFill /> },
-                {
-                  value: "scroll",
-                  title: "Scroll",
-                  label: <FontAwesomeIcon icon={faScroll} />,
-                },
-                {
-                  value: "auto",
-                  title: "Auto",
-                  label: <FontAwesomeIcon icon={faRobot} />,
-                },
-              ],
-            }}
-            node={node}
-            setProp={setProp}
-          />
           <SettingsSectionHeaderRow title="Background" />
           <SettingsRow
             field={{
@@ -495,11 +360,7 @@ export const ContainerSettings = () => {
                       type="color"
                       value={gradStartColor}
                       className="form-control-sm w-50"
-                      onChange={(e) =>
-                        setProp((prop) => {
-                          prop.gradStartColor = e.target.value;
-                        })
-                      }
+                      onChange={setAProp("gradStartColor")}
                     />
                   </OrFormula>
                 </td>
@@ -515,11 +376,7 @@ export const ContainerSettings = () => {
                       type="color"
                       value={gradEndColor}
                       className="form-control-sm w-50"
-                      onChange={(e) =>
-                        setProp((prop) => {
-                          prop.gradEndColor = e.target.value;
-                        })
-                      }
+                      onChange={setAProp("gradEndColor")}
                     />
                   </OrFormula>
                 </td>
@@ -537,11 +394,7 @@ export const ContainerSettings = () => {
                       max="360"
                       value={gradDirection}
                       className="form-control-sm w-50"
-                      onChange={(e) =>
-                        setProp((prop) => {
-                          prop.gradDirection = e.target.value;
-                        })
-                      }
+                      onChange={setAProp("gradDirection")}
                     />
                   </OrFormula>
                 </td>
@@ -558,9 +411,7 @@ export const ContainerSettings = () => {
                   <select
                     value={bgFileId}
                     className="form-control-sm w-100"
-                    onChange={(e) =>
-                      setProp((prop) => (prop.bgFileId = e.target.value))
-                    }
+                    onChange={setAProp("bgFileId")}
                   >
                     {options.images.map((f, ix) => (
                       <option key={ix} value={f.id}>
@@ -579,11 +430,7 @@ export const ContainerSettings = () => {
                   <select
                     value={imageSize}
                     className="form-control-sm"
-                    onChange={(e) =>
-                      setProp((prop) => {
-                        prop.imageSize = e.target.value;
-                      })
-                    }
+                    onChange={setAProp("imageSize")}
                   >
                     <option>contain</option>
                     <option>cover</option>
@@ -601,11 +448,7 @@ export const ContainerSettings = () => {
                     type="color"
                     value={bgColor}
                     className="form-control-sm w-50"
-                    onChange={(e) =>
-                      setProp((prop) => {
-                        prop.bgColor = e.target.value;
-                      })
-                    }
+                    onChange={setAProp("bgColor")}
                   />
                 </OrFormula>
               </td>
@@ -614,7 +457,7 @@ export const ContainerSettings = () => {
           <tr>
             <td colSpan="2">
               <label>
-                Set text color{" "}
+                Set text color
                 <input
                   name="setTextColor"
                   type="checkbox"
@@ -622,10 +465,10 @@ export const ContainerSettings = () => {
                   onChange={(e) =>
                     setProp((prop) => (prop.setTextColor = e.target.checked))
                   }
-                />{" "}
+                />
               </label>
             </td>
-          </tr>{" "}
+          </tr>
           {setTextColor && (
             <tr>
               <td>
@@ -636,17 +479,124 @@ export const ContainerSettings = () => {
                   type="color"
                   value={textColor}
                   className="form-control-sm"
-                  onChange={(e) =>
-                    setProp((prop) => {
-                      prop.textColor = e.target.value;
-                    })
-                  }
+                  onChange={setAProp("textColor")}
                 />
               </td>
             </tr>
           )}
         </tbody>
       </table>
+      <table className="w-100" accordiontitle="Flex properties">
+        <tbody>
+          <SettingsSectionHeaderRow title="Flex item" />
+          <SettingsRow
+            field={{ name: "flex-grow", label: "Grow", type: "Float" }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{ name: "flex-shrink", label: "Shrink", type: "Float" }}
+            node={node}
+            setProp={setProp}
+          />
+          {display && display.includes("flex") && (
+            <Fragment>
+              <SettingsSectionHeaderRow title="Flex container" />
+              <SettingsRow
+                field={{
+                  name: "flex-direction",
+                  label: "Direction",
+                  type: "select",
+                  options: ["row", "row-reverse", "column", "column-reverse"],
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+              <SettingsRow
+                field={{
+                  name: "flex-wrap",
+                  label: "Wrap",
+                  type: "select",
+                  options: ["nowrap", "wrap", "wrap-reverse"],
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+              <SettingsRow
+                field={{
+                  name: "justify-content",
+                  label: "Justify content",
+                  type: "select",
+                  options: [
+                    "flex-start",
+                    "flex-end",
+                    "center",
+                    "space-between",
+                    "space-around",
+                    "space-evenly",
+                    "start",
+                    "end",
+                    "left",
+                    "right",
+                  ],
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+              <SettingsRow
+                field={{
+                  name: "align-items",
+                  label: "Align items",
+                  type: "select",
+                  options: [
+                    "stretch",
+                    "flex-start",
+                    "flex-end",
+                    "center",
+                    "baseline",
+                    "first baseline",
+                    "last baseline",
+                    "start",
+                    "end",
+                    "self-start",
+                    "self-end",
+                  ],
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+              <SettingsRow
+                field={{
+                  name: "align-content",
+                  label: "Align content",
+                  type: "select",
+                  options: [
+                    "flex-start",
+                    "flex-end",
+                    "center",
+                    "space-between",
+                    "space-around",
+                    "space-evenly",
+                    "stretch",
+                    "start",
+                    "end",
+                    "baseline",
+                    "first baseline",
+                    "last baseline",
+                  ],
+                }}
+                node={node}
+                setProp={setProp}
+                isStyle={true}
+              />
+            </Fragment>
+          )}
+        </tbody>
+      </table>
       <table className="w-100" accordiontitle="Show if...">
         <tbody>
           {["show", "edit"].includes(options.mode) && (
@@ -659,9 +609,7 @@ export const ContainerSettings = () => {
                   type="text"
                   className="form-control text-to-display"
                   value={showIfFormula}
-                  onChange={(e) =>
-                    setProp((prop) => (prop.showIfFormula = e.target.value))
-                  }
+                  onChange={setAProp("showIfFormula")}
                 />
                 <div style={{ marginTop: "-5px" }}>
                   <small className="text-muted text-monospace">FORMULA</small>
@@ -722,11 +670,7 @@ export const ContainerSettings = () => {
               <select
                 value={minScreenWidth}
                 className="form-control"
-                onChange={(e) =>
-                  setProp((prop) => {
-                    prop.minScreenWidth = e.target.value;
-                  })
-                }
+                onChange={setAProp("minScreenWidth")}
               >
                 <option value="">all</option>
                 <option value="sm">small</option>
@@ -744,11 +688,7 @@ export const ContainerSettings = () => {
               <select
                 value={maxScreenWidth}
                 className="form-control"
-                onChange={(e) =>
-                  setProp((prop) => {
-                    prop.maxScreenWidth = e.target.value;
-                  })
-                }
+                onChange={setAProp("maxScreenWidth")}
               >
                 <option value="">all</option>
                 <option value="md">small</option>
@@ -766,7 +706,7 @@ export const ContainerSettings = () => {
             type="text"
             className="form-control"
             value={url}
-            onChange={(e) => setProp((prop) => (prop.url = e.target.value))}
+            onChange={setAProp("url")}
           />
         </OrFormula>
 
@@ -774,11 +714,7 @@ export const ContainerSettings = () => {
         <select
           value={hoverColor}
           className="form-control"
-          onChange={(e) =>
-            setProp((prop) => {
-              prop.hoverColor = e.target.value;
-            })
-          }
+          onChange={setAProp("hoverColor")}
         >
           <option value="">None</option>
           <option value="gray">gray</option>
@@ -797,9 +733,7 @@ export const ContainerSettings = () => {
             type="text"
             className="form-control text-to-display"
             value={customClass}
-            onChange={(e) =>
-              setProp((prop) => (prop.customClass = e.target.value))
-            }
+            onChange={setAProp("customClass")}
           />
         </OrFormula>
         <div>
@@ -810,7 +744,7 @@ export const ContainerSettings = () => {
           type="text"
           className="text-to-display form-control"
           value={customCSS}
-          onChange={(e) => setProp((prop) => (prop.customCSS = e.target.value))}
+          onChange={setAProp("customCSS")}
         ></textarea>
       </div>
     </Accordion>
@@ -819,15 +753,13 @@ export const ContainerSettings = () => {
 Container.craft = {
   displayName: "Container",
   props: {
-    borderWidth: 0,
-    borderStyle: "solid",
     minHeight: 0,
     vAlign: "top",
     hAlign: "left",
     bgFileId: 0,
+    rotate: 0,
     isFormula: {},
     bgType: "None",
-    block: true,
     fullPageWidth: false,
     bgColor: "#ffffff",
     borderColor: "#000000",
@@ -842,7 +774,9 @@ Container.craft = {
     margin: [0, 0, 0, 0],
     padding: [0, 0, 0, 0],
     minScreenWidth: "",
+    display: "block",
     show_for_owner: false,
+    style: {},
   },
   rules: {
     canDrag: () => true,