@saltcorn/builder 1.6.0-alpha.1 → 1.6.0-alpha.10

package/src/components/elements/Container.js

@@ -3,10 +3,13 @@
  * @module components/elements/Container
  * @subcategory components / elements
  */
+/* globals $, validate_expression_elem */
 
 import React, { useContext, Fragment } from "react";
 
 import { Element, useNode } from "@craftjs/core";
+import { Column } from "./Column";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import {
   Accordion,
@@ -83,6 +86,7 @@ export /**
  */
 const Container = ({
   children,
+  contents,
   minHeight,
   height,
   width,
@@ -111,18 +115,46 @@ const Container = ({
   style,
   htmlElement,
   transform,
+  showForRole,
+  bgField,
+  maxScreenWidth,
+  imgResponsiveWidths,
+  click_action,
+  animateName,
+  animateDelay,
+  animateDuration,
+  animateInitialHide,
+  url,
+  hoverColor,
+  overflow,
+  show_for_owner,
+  showIfFormula,
+  isFormula,
+  minRole,
 }) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
-  //console.log("container style", style);
+
+  const actualChildren = contents || children;
+
+  const renderChildren = () => {
+    if (!actualChildren) return null;
+    if (React.isValidElement(actualChildren)) return actualChildren;
+    if (Array.isArray(actualChildren)) return actualChildren;
+    if (typeof actualChildren === 'object' && actualChildren !== null && 'children' in actualChildren) {
+      return actualChildren.children;
+    }
+    return actualChildren;
+  };
+
   return React.createElement(
     htmlElement,
     {
       ref: (dom) => connect(drag(dom)),
       id: customId || "",
-      className: `${customClass || ""} kontainer canvas text-${hAlign} ${
+      className: `${customClass || ""} kontainer text-${hAlign} ${
         vAlign === "middle" ? "d-flex align-items-center" : ""
       } ${
         vAlign === "middle" && hAlign === "center" && "justify-content-center"
@@ -176,7 +208,7 @@ const Container = ({
           : {}),
       },
     },
-    children
+    React.createElement(Element, { canvas: true, id: "container-canvas", is: Column }, renderChildren())
   );
 };
 
@@ -188,6 +220,7 @@ export /**
  * @subcategory components
  */
 const ContainerSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     minHeight: node.data.props.minHeight,
     height: node.data.props.height,
@@ -287,15 +320,15 @@ const ContainerSettings = () => {
       value={currentSettingsTab}
       onChange={(ix) => setProp((prop) => (prop.currentSettingsTab = ix))}
     >
-      <div accordiontitle="Box" className="w-100">
+      <div accordiontitle={t("Box")} className="w-100">
         <BoxModelEditor setProp={setProp} node={node} />
       </div>
-      <table className="w-100" accordiontitle="Display">
+      <table className="w-100" accordiontitle={t("Display")}>
         <tbody>
           <SettingsRow
             field={{
               name: "display",
-              label: "Display",
+              label: t("Display"),
               type: "select",
               options: [
                 "block",
@@ -312,7 +345,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "htmlElement",
-              label: "HTML element",
+              label: t("HTML element"),
               type: "select",
               options: [
                 "div",
@@ -346,19 +379,19 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "overflow",
-              label: "Overflow",
+              label: t("Overflow"),
               type: "btn_select",
               options: [
-                { value: "visible", title: "Visible", label: <EyeFill /> },
-                { value: "hidden", title: "Hidden", label: <EyeSlashFill /> },
+                { value: "visible", title: t("Visible"), label: <EyeFill /> },
+                { value: "hidden", title: t("Hidden"), label: <EyeSlashFill /> },
                 {
                   value: "scroll",
-                  title: "Scroll",
+                  title: t("Scroll"),
                   label: <FontAwesomeIcon icon={faScroll} />,
                 },
                 {
                   value: "auto",
-                  title: "Auto",
+                  title: t("Auto"),
                   label: <FontAwesomeIcon icon={faRobot} />,
                 },
               ],
@@ -369,7 +402,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "opacity",
-              label: "Opacity",
+              label: t("Opacity"),
               type: "Float",
               attributes: { min: 0, max: 1 },
             }}
@@ -380,7 +413,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "position",
-              label: "Position",
+              label: t("Position"),
               type: "select",
               options: ["static", "relative", "fixed", "absolute", "sticky"],
             }}
@@ -393,7 +426,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "top",
-                  label: "Top",
+                  label: t("Top"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -403,7 +436,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "right",
-                  label: "Right",
+                  label: t("Right"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -413,7 +446,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "bottom",
-                  label: "Bottom",
+                  label: t("Bottom"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -423,7 +456,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "left",
-                  label: "Left",
+                  label: t("Left"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -443,34 +476,34 @@ const ContainerSettings = () => {
                   onChange={setAProp("fullPageWidth", { checked: true })}
                 />
                 <label className="form-check-label">
-                  Expand to full page width
+                  {t("Expand to full page width")}
                 </label>
               </div>
             </td>
           </tr>
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Contents">
+      <table className="w-100" accordiontitle={t("Contents")}>
         <tbody>
           <SettingsRow
             field={{
               name: "rotate",
-              label: "Rotate °",
+              label: t("Rotate °"),
               type: "Integer",
             }}
             node={node}
             setProp={setProp}
           />
-          <SettingsSectionHeaderRow title="Align" />
+          <SettingsSectionHeaderRow title={t("Align")} />
           <SettingsRow
             field={{
               name: "vAlign",
-              label: "Vertical",
+              label: t("Vertical"),
               type: "btn_select",
               options: [
-                { value: "top", title: "All", label: <AlignTop /> },
-                { value: "middle", title: "All", label: <AlignMiddle /> },
-                { value: "bottom", title: "All", label: <AlignBottom /> },
+                { value: "top", title: t("All"), label: <AlignTop /> },
+                { value: "middle", title: t("All"), label: <AlignMiddle /> },
+                { value: "bottom", title: t("All"), label: <AlignBottom /> },
               ],
             }}
             node={node}
@@ -479,22 +512,22 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "hAlign",
-              label: "Horizontal",
+              label: t("Horizontal"),
               type: "btn_select",
               options: [
-                { value: "start", title: "Left", label: <AlignStart /> },
-                { value: "center", title: "Center", label: <AlignCenter /> },
-                { value: "end", title: "Right", label: <AlignEnd /> },
+                { value: "start", title: t("Left"), label: <AlignStart /> },
+                { value: "center", title: t("Center"), label: <AlignCenter /> },
+                { value: "end", title: t("Right"), label: <AlignEnd /> },
               ],
             }}
             node={node}
             setProp={setProp}
           />
-          <SettingsSectionHeaderRow title="Background" />
+          <SettingsSectionHeaderRow title={t("Background")} />
           <SettingsRow
             field={{
               name: "bgType",
-              label: "Type",
+              label: t("Type"),
               type: "btn_select",
               options: [
                 { value: "None", label: <SlashCircle /> },
@@ -520,7 +553,7 @@ const ContainerSettings = () => {
           {bgType === "Gradient" && (
             <Fragment>
               <tr>
-                <td>Start</td>
+                <td>{t("Start")}</td>
                 <td>
                   <OrFormula
                     nodekey="gradStartColor"
@@ -536,7 +569,7 @@ const ContainerSettings = () => {
                 </td>
               </tr>
               <tr>
-                <td>End</td>
+                <td>{t("End")}</td>
                 <td>
                   <OrFormula
                     nodekey="gradEndColor"
@@ -552,7 +585,7 @@ const ContainerSettings = () => {
                 </td>
               </tr>
               <tr>
-                <td>Direction (&deg;)</td>
+                <td>{t("Direction (&deg;)")}</td>
                 <td>
                   <OrFormula
                     nodekey="gradDirection"
@@ -574,7 +607,7 @@ const ContainerSettings = () => {
           {bgType === "Image" && (
             <tr>
               <td>
-                <label>File</label>
+                <label>{t("File")}</label>
               </td>
               <td>
                 <select
@@ -599,7 +632,7 @@ const ContainerSettings = () => {
           {bgType === "Image Field" && (
             <tr>
               <td>
-                <label>File field</label>
+                <label>{t("File field")}</label>
               </td>
               <td>
                 <select
@@ -627,7 +660,7 @@ const ContainerSettings = () => {
             <Fragment>
               <tr>
                 <td>
-                  <label>Size</label>
+                  <label>{t("Size")}</label>
                 </td>
 
                 <td>
@@ -643,7 +676,7 @@ const ContainerSettings = () => {
               {imageSize !== "repeat" && (
                 <tr>
                   <td>
-                    <label>Responsive widths</label>
+                    <label>{t("Responsive widths")}</label>
                   </td>
 
                   <td>
@@ -656,8 +689,7 @@ const ContainerSettings = () => {
                     />
                     <small>
                       <i>
-                        List of widths to serve resized images, e.g. 300, 400,
-                        600
+                        {t("List of widths to serve resized images, e.g. 300, 400, 600")}
                       </i>
                     </small>
                   </td>
@@ -667,7 +699,7 @@ const ContainerSettings = () => {
           )}
           {bgType === "Color" && (
             <tr>
-              <td>Color</td>
+              <td>{t("Color")}</td>
               <td>
                 <OrFormula nodekey="bgColor" {...{ setProp, isFormula, node }}>
                   <input
@@ -680,11 +712,11 @@ const ContainerSettings = () => {
               </td>
             </tr>
           )}
-          <SettingsSectionHeaderRow title="Typography" />
+          <SettingsSectionHeaderRow title={t("Typography")} />
           <SettingsRow
             field={{
               name: "font-family",
-              label: "Font family",
+              label: t("Font family"),
               type: "Font",
             }}
             node={node}
@@ -694,7 +726,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "font-size",
-              label: "Font size",
+              label: t("Font size"),
               type: "DimUnits",
             }}
             node={node}
@@ -704,7 +736,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "font-weight",
-              label: "Weight",
+              label: t("Weight"),
               type: "Integer",
               min: 100,
               max: 900,
@@ -717,7 +749,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "line-height",
-              label: "Line height",
+              label: t("Line height"),
               type: "DimUnits",
             }}
             node={node}
@@ -727,7 +759,7 @@ const ContainerSettings = () => {
           <tr>
             <td colSpan="2">
               <label>
-                Set text color
+                {t("Set text color")}
                 <input
                   name="setTextColor"
                   type="checkbox"
@@ -740,7 +772,7 @@ const ContainerSettings = () => {
           {setTextColor && (
             <tr>
               <td>
-                <label>Text</label>
+                <label>{t("Text")}</label>
               </td>
               <td>
                 <input
@@ -754,39 +786,39 @@ const ContainerSettings = () => {
           )}
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Transform">
+      <table className="w-100" accordiontitle={t("Transform")}>
         <tbody>
           <SettingsRow
             field={{
               name: "rotate",
-              label: "Rotate°",
+              label: t("Rotate°"),
               type: "Integer",
             }}
             node={node}
             setProp={setProp}
           />
           <SettingsRow
-            field={{ name: "skewX", label: "SkewX°", type: "Integer" }}
+            field={{ name: "skewX", label: t("SkewX°"), type: "Integer" }}
             node={node}
             setProp={setProp}
             subProp="transform"
             valuePostfix="deg"
           />
           <SettingsRow
-            field={{ name: "skewY", label: "SkewY°", type: "Integer" }}
+            field={{ name: "skewY", label: t("SkewY°"), type: "Integer" }}
             node={node}
             setProp={setProp}
             subProp="transform"
             valuePostfix="deg"
           />
           <SettingsRow
-            field={{ name: "scaleX", label: "ScaleX", type: "Float" }}
+            field={{ name: "scaleX", label: t("ScaleX"), type: "Float" }}
             node={node}
             setProp={setProp}
             subProp="transform"
           />
           <SettingsRow
-            field={{ name: "scaleY", label: "ScaleY", type: "Float" }}
+            field={{ name: "scaleY", label: t("ScaleY"), type: "Float" }}
             node={node}
             setProp={setProp}
             subProp="transform"
@@ -794,7 +826,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "translateX",
-              label: "TranslateX",
+              label: t("TranslateX"),
               type: "DimUnits",
             }}
             node={node}
@@ -804,7 +836,7 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "translateY",
-              label: "TranslateY",
+              label: t("TranslateY"),
               type: "DimUnits",
             }}
             node={node}
@@ -813,28 +845,28 @@ const ContainerSettings = () => {
           />
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Flex properties">
+      <table className="w-100" accordiontitle={t("Flex properties")}>
         <tbody>
-          <SettingsSectionHeaderRow title="Flex item" />
+          <SettingsSectionHeaderRow title={t("Flex item")} />
           <SettingsRow
-            field={{ name: "flex-grow", label: "Grow", type: "Float" }}
+            field={{ name: "flex-grow", label: t("Grow"), type: "Float" }}
             node={node}
             setProp={setProp}
             isStyle={true}
           />
           <SettingsRow
-            field={{ name: "flex-shrink", label: "Shrink", type: "Float" }}
+            field={{ name: "flex-shrink", label: t("Shrink"), type: "Float" }}
             node={node}
             setProp={setProp}
             isStyle={true}
           />
           {display && display.includes("flex") && (
             <Fragment>
-              <SettingsSectionHeaderRow title="Flex container" />
+              <SettingsSectionHeaderRow title={t("Flex container")} />
               <SettingsRow
                 field={{
                   name: "flex-direction",
-                  label: "Direction",
+                  label: t("Direction"),
                   type: "select",
                   options: ["row", "row-reverse", "column", "column-reverse"],
                 }}
@@ -845,7 +877,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "flex-wrap",
-                  label: "Wrap",
+                  label: t("Wrap"),
                   type: "select",
                   options: ["nowrap", "wrap", "wrap-reverse"],
                 }}
@@ -856,7 +888,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "justify-content",
-                  label: "Justify content",
+                  label: t("Justify content"),
                   type: "select",
                   options: [
                     "flex-start",
@@ -878,7 +910,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "align-items",
-                  label: "Align items",
+                  label: t("Align items"),
                   type: "select",
                   options: [
                     "stretch",
@@ -901,7 +933,7 @@ const ContainerSettings = () => {
               <SettingsRow
                 field={{
                   name: "align-content",
-                  label: "Align content",
+                  label: t("Align content"),
                   type: "select",
                   options: [
                     "flex-start",
@@ -926,12 +958,12 @@ const ContainerSettings = () => {
           )}
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Animate">
+      <table className="w-100" accordiontitle={t("Animate")}>
         <tbody>
           <SettingsRow
             field={{
               name: "animateName",
-              label: "Animation",
+              label: t("Animation"),
               type: "select",
               options: ["None", ...(options.keyframes || [])],
             }}
@@ -941,21 +973,21 @@ const ContainerSettings = () => {
           <SettingsRow
             field={{
               name: "animateDuration",
-              label: "Duration (s)",
+              label: t("Duration (s)"),
               type: "Float",
             }}
             node={node}
             setProp={setProp}
           />
           <SettingsRow
-            field={{ name: "animateDelay", label: "Delay (s)", type: "Float" }}
+            field={{ name: "animateDelay", label: t("Delay (s)"), type: "Float" }}
             node={node}
             setProp={setProp}
           />
           <SettingsRow
             field={{
               name: "animateInitialHide",
-              label: "Initially hidden",
+              label: t("Initially hidden"),
               type: "Bool",
             }}
             node={node}
@@ -963,16 +995,16 @@ const ContainerSettings = () => {
           />
         </tbody>
       </table>
-      <table className="w-100" accordiontitle="Show if...">
+      <table className="w-100" accordiontitle={t("Show if...")}>
         <tbody>
           {["show", "edit", "filter", "list"].includes(options.mode) && (
-            <SettingsSectionHeaderRow title="Formula - show if true" />
+            <SettingsSectionHeaderRow title={t("Formula - show if true")} />
           )}
           <tr>
             <td colSpan={2}>
               <input
                 type="text"
-                placeholder="Example: x === y"
+                placeholder={t("Example: x === y")}
                 className="form-control text-to-display"
                 value={showIfFormula}
                 spellCheck={false}
@@ -981,12 +1013,12 @@ const ContainerSettings = () => {
               />
               <div style={{ marginTop: "-5px" }}>
                 <small className="text-muted font-monospace">
-                  FORMULA <FormulaTooltip />
+                  {t("FORMULA")} <FormulaTooltip />
                 </small>
               </div>
             </td>
           </tr>
-          <SettingsSectionHeaderRow title="Role" />
+          <SettingsSectionHeaderRow title={t("Role")} />
           {options.roles.map(({ role, id }) => (
             <tr key={id}>
               <td colSpan="2">
@@ -1028,14 +1060,14 @@ const ContainerSettings = () => {
                     checked={show_for_owner}
                     onChange={setAProp("show_for_owner", { checked: true })}
                   />
-                  <label className="form-check-label">Owner</label>
+                  <label className="form-check-label">{t("Owner")}</label>
                 </div>
               </td>
             </tr>
           ) : null}
           <tr>
             <td>
-              <label>Min screen width</label>
+              <label>{t("Min screen width")}</label>
             </td>
             <td>
               <select
@@ -1050,7 +1082,7 @@ const ContainerSettings = () => {
           </tr>
           <tr>
             <td>
-              <label>Max screen width</label>
+              <label>{t("Max screen width")}</label>
             </td>
             <td>
               <select
@@ -1067,8 +1099,8 @@ const ContainerSettings = () => {
           </tr>
         </tbody>
       </table>
-      <div accordiontitle="Container link">
-        <label>URL</label>
+      <div accordiontitle={t("Container link")}>
+        <label>{t("URL")}</label>
         <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
           <input
             type="text"
@@ -1080,7 +1112,7 @@ const ContainerSettings = () => {
         </OrFormula>
         {options.triggerActions ? (
           <Fragment>
-            <label>Click action</label>
+            <label>{t("Click action")}</label>
             <select
               value={click_action}
               className="form-control form-select"
@@ -1101,7 +1133,7 @@ const ContainerSettings = () => {
             </select>
           </Fragment>
         ) : null}
-        <label>Hover color</label>
+        <label>{t("Hover color")}</label>
         <select
           value={hoverColor}
           className="form-control form-select"
@@ -1114,9 +1146,9 @@ const ContainerSettings = () => {
         </select>
       </div>
 
-      <div accordiontitle="Class, ID and CSS">
+      <div accordiontitle={t("Class, ID and CSS")}>
         <div>
-          <label>ID</label>
+          <label>{t("ID")}</label>
         </div>
         <OrFormula nodekey="customId" {...{ setProp, isFormula, node }}>
           <input
@@ -1128,7 +1160,7 @@ const ContainerSettings = () => {
           />
         </OrFormula>
         <div>
-          <label>Custom class</label>
+          <label>{t("Custom class")}</label>
         </div>
         <OrFormula nodekey="customClass" {...{ setProp, isFormula, node }}>
           <input
@@ -1140,7 +1172,7 @@ const ContainerSettings = () => {
           />
         </OrFormula>
         <div>
-          <label>Custom CSS</label>
+          <label>{t("Custom CSS")}</label>
         </div>
         <textarea
           rows="4"
@@ -1161,7 +1193,7 @@ const ContainerSettings = () => {
 Container.craft = {
   displayName: "Container",
   props: {
-    minHeight: 0,
+    minHeight: 20,
     vAlign: "top",
     hAlign: "left",
     bgFileId: 0,
@@ -1181,17 +1213,65 @@ Container.craft = {
     showIfFormula: "",
     showForRole: [],
     margin: [0, 0, 0, 0],
-    padding: [0, 0, 0, 0],
+    padding: [16, 16, 16, 16],
     minScreenWidth: "",
     display: "block",
     show_for_owner: false,
     style: {},
     htmlElement: "div",
+    contents: [],
   },
   rules: {
     canDrag: () => true,
   },
   related: {
     settings: ContainerSettings,
+    segment_type: "container",
+    fields: [
+      { label: "Contents", name: "contents", type: "Nodes", nodeID: "container-canvas" },
+      { name: "gradStartColor", canBeFormula: true },
+      { name: "gradEndColor", canBeFormula: true },
+      { name: "gradDirection", canBeFormula: true },
+      { name: "rotate", default: 0 },
+      { name: "animateName", },
+      { name: "animateDuration" },
+      { name: "animateDelay" },
+      { name: "animateInitialHide" },
+      { name: "customClass" },
+      { name: "customId" },
+      { name: "customCSS" },
+      { name: "overflow" },
+      { name: "margin", default: [0, 0, 0, 0] },
+      { name: "padding", default: [0, 0, 0, 0] },
+      { name: "minHeight", default: 20 },
+      { name: "height" },
+      { name: "width" },
+      { name: "click_action" },
+      { name: "url", canBeFormula: true },
+      { name: "hoverColor" },
+      { name: "minHeightUnit", default: "px" },
+      { name: "heightUnit", default: "px" },
+      { name: "widthUnit", default: "px" },
+      { name: "vAlign" },
+      { name: "hAlign" },
+      { name: "htmlElement", default: "div" },
+      { name: "display", default: "block" },
+      { name: "fullPageWidth", default: false },
+      { name: "bgFileId" },
+      { name: "bgField" },
+      { name: "imageSize", default: "contain" },
+      { name: "imgResponsiveWidths" },
+      { name: "bgType", default: "None" },
+      { name: "style", default: {} },
+      { name: "transform", default: {} },
+      { name: "bgColor", default: "#ffffff", canBeFormula: true },
+      { name: "setTextColor", default: false },
+      { name: "textColor", default: "#000000" },
+      { name: "showIfFormula", default: "" },
+      { name: "showForRole", default: [] },
+      { name: "minScreenWidth", default: "" },
+      { name: "maxScreenWidth", default: "" },
+      { name: "show_for_owner", default: false },
+    ],
   },
 };