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

package/src/components/elements/BoxModelEditor.js

@@ -5,6 +5,7 @@
  */
 
 import React, { useContext, Fragment, useState } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import { SettingsRow, SettingsSectionHeaderRow, bstyleopt } from "./utils";
 /* 
 Contains code from https://github.com/tpaksu/boxmodel
@@ -22,6 +23,7 @@ export /**
  * @namespace
  */
 const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
+  const { t } = useTranslation();
   const [selectedCategory, setSelectedCategory] = useState(false);
   const [selectedDirection, setSelectedDirection] = useState(false);
   const selectedProperty = !selectedCategory
@@ -45,7 +47,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                 className="boxmodel-text boxmodel-header"
                 onClick={() => setCatAndDir("margin", null)}
               >
-                Margin
+                {t("Margin")}
               </span>
               <span
                 className="boxmodel-input-container boxmodel-input-direction-left"
@@ -74,7 +76,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                     className="boxmodel-text boxmodel-header"
                     onClick={() => setCatAndDir("border", null)}
                   >
-                    Border
+                    {t("Border")}
                   </span>
                   <span
                     className="boxmodel-input-container boxmodel-input-direction-left"
@@ -109,7 +111,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                         className="boxmodel-text boxmodel-header"
                         onClick={() => setCatAndDir("padding", null)}
                       >
-                        Padding
+                        {t("Padding")}
                       </span>
                       <span
                         className="boxmodel-input-container boxmodel-input-direction-left"
@@ -274,7 +276,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "width",
-                  label: "width",
+                  label: t("width"),
                   type: "DimUnits",
                   horiz: true,
                 }}
@@ -285,7 +287,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "min-width",
-                  label: "min width",
+                  label: t("min width"),
                   type: "DimUnits",
                   horiz: true,
                 }}
@@ -296,7 +298,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "max-width",
-                  label: "max width",
+                  label: t("max width"),
                   type: "DimUnits",
                   horiz: true,
                 }}
@@ -305,7 +307,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                 isStyle={true}
               />
               <SettingsRow
-                field={{ name: "height", label: "height", type: "DimUnits" }}
+                field={{ name: "height", label: t("height"), type: "DimUnits" }}
                 node={node}
                 setProp={setProp}
                 isStyle={!!sizeWithStyle}
@@ -313,7 +315,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: sizeWithStyle ? "min-height" : "minHeight",
-                  label: "min height",
+                  label: t("min height"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -323,7 +325,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: "max-height",
-                  label: "max height",
+                  label: t("max height"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -338,7 +340,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: selectedProperty + "-width",
-                  label: "width",
+                  label: t("width"),
                   type: "DimUnits",
                 }}
                 node={node}
@@ -348,7 +350,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: selectedProperty + "-style",
-                  label: "style",
+                  label: t("style"),
                   type: "btn_select",
                   btnClass: "btnstylesel",
                   options: [
@@ -369,7 +371,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
               <SettingsRow
                 field={{
                   name: selectedProperty + "-color",
-                  label: "color",
+                  label: t("color"),
                   type: "Color",
                 }}
                 node={node}
@@ -380,7 +382,7 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
                 <SettingsRow
                   field={{
                     name: selectedProperty + "-radius",
-                    label: "radius",
+                    label: t("radius"),
                     type: "DimUnits",
                   }}
                   node={node}
@@ -407,17 +409,17 @@ const BoxModelEditor = ({ setProp, node, sizeWithStyle }) => {
           {!selectedProperty && (
             <tr>
               <td colSpan={2}>
-                <div>Click above to select a property to adjust.</div>
+                <div>{t("Click above to select a property to adjust.")}</div>
                 <div>
                   <small>
-                    Click a label (margin, border, padding) to adjust all edges.
+                    {t("Click a label (margin, border, padding) to adjust all edges.")}
                   </small>
                 </div>
                 <div>
-                  <small>Click an edge to adjust that edge.</small>
+                  <small>{t("Click an edge to adjust that edge.")}</small>
                 </div>
                 <div>
-                  <small>Click center to adjust height and width</small>
+                  <small>{t("Click center to adjust height and width")}</small>
                 </div>
               </td>
             </tr>

package/src/components/elements/Card.js

@@ -16,9 +16,10 @@ import {
   buildOptions,
 } from "./utils";
 import { Column } from "./Column";
-
 import { Element, useNode } from "@craftjs/core";
 import { BoxModelEditor } from "./BoxModelEditor";
+import useTranslation from "../../hooks/useTranslation";
+
 import {
   AlignTop,
   AlignMiddle,
@@ -40,7 +41,7 @@ import { bstyleopt } from "./utils";
 
 export /**
  * @param {object} props
- * @param {string} props.children
+ * @param {string} props.contents - Card body contents
  * @param {object} props.isFormula
  * @param {string} [props.title]
  * @param {string} props.shadow
@@ -52,7 +53,7 @@ export /**
  * @namespace
  */
 const Card = ({
-  children,
+  contents,
   isFormula,
   title,
   shadow,
@@ -69,6 +70,7 @@ const Card = ({
   gradStartColor,
   gradEndColor,
   gradDirection,
+  titleRight,
 }) => {
   const {
     selected,
@@ -110,12 +112,17 @@ const Card = ({
         <img src={`/files/serve/${bgFileId}`} className="card-img-top" />
       ) : null}
       {title && title.length > 0 && (
-        <div className="card-header">
+        <div className="card-header right-section">
           {isFormula?.title ? (
             <span className="font-monospace">={title}</span>
           ) : (
             title
           )}
+           <div className='title-right'>
+          <Element canvas id="titleRight" is={Column}>
+            {titleRight}
+          </Element>
+        </div>
         </div>
       )}
       <div
@@ -132,7 +139,9 @@ const Card = ({
             : {}
         }
       >
-        <div className="canvas">{children}</div>
+        <Element canvas id="cardbody" is={Column}>
+          {contents}
+        </Element>
       </div>
       {hasFooter ? (
         <div className={`card-footer ${noPadding ? "p-0" : ""}`}>
@@ -152,6 +161,7 @@ export /**
  * @namespace
  */
 const CardSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => {
     const ps = {
       currentSettingsTab: node.data.props.currentSettingsTab,
@@ -186,11 +196,11 @@ const CardSettings = () => {
       value={currentSettingsTab}
       onChange={(ix) => setProp((prop) => (prop.currentSettingsTab = ix))}
     >
-      <table className="w-100" accordiontitle="Card properties">
+      <table className="w-100" accordiontitle={t("Card properties")}>
         <tbody>
           <SettingsRow
             field={{
-              label: "Card title",
+              label: t("Card title"),
               name: "title",
               type: "String",
               canBeFormula: true,
@@ -200,7 +210,7 @@ const CardSettings = () => {
           />
           <SettingsRow
             field={{
-              label: "Click URL",
+              label: t("Click URL"),
               name: "url",
               type: "String",
               canBeFormula: true,
@@ -210,7 +220,7 @@ const CardSettings = () => {
           />
           <SettingsRow
             field={{
-              label: "Class",
+              label: t("Class"),
               name: "class",
               type: "String",
               canBeFormula: true,
@@ -219,18 +229,18 @@ const CardSettings = () => {
             setProp={setProp}
           />
           <SettingsRow
-            field={{ label: "Card footer", name: "hasFooter", type: "Bool" }}
+            field={{ label: t("Card footer"), name: "hasFooter", type: "Bool" }}
             node={node}
             setProp={setProp}
           />
           <SettingsRow
-            field={{ label: "Shadow", name: "shadow", type: "Bool" }}
+            field={{ label: t("Shadow"), name: "shadow", type: "Bool" }}
             node={node}
             setProp={setProp}
           />
           <SettingsRow
             field={{
-              label: "Save indicator",
+              label: t("Save indicator"),
               name: "titleAjaxIndicator",
               type: "Bool",
             }}
@@ -238,37 +248,37 @@ const CardSettings = () => {
             setProp={setProp}
           />
           <SettingsRow
-            field={{ label: "No padding", name: "noPadding", type: "Bool" }}
+            field={{ label: t("No padding"), name: "noPadding", type: "Bool" }}
             node={node}
             setProp={setProp}
           />
         </tbody>
       </table>
-      <div accordiontitle="Box" className="w-100">
+      <div accordiontitle={t("Box")} className="w-100">
         <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
       </div>
-      <table className="w-100" accordiontitle="Contents">
+      <table className="w-100" accordiontitle={t("Contents")}>
         <tbody>
-          <SettingsSectionHeaderRow title="Align" />
+          <SettingsSectionHeaderRow title={t("Align")} />
           <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 /> },
@@ -294,7 +304,7 @@ const CardSettings = () => {
           {bgType === "Gradient" && (
             <Fragment>
               <tr>
-                <td>Start</td>
+                <td>{t("Start")}</td>
                 <td>
                   <OrFormula
                     nodekey="gradStartColor"
@@ -310,7 +320,7 @@ const CardSettings = () => {
                 </td>
               </tr>
               <tr>
-                <td>End</td>
+                <td>{t("End")}</td>
                 <td>
                   <OrFormula
                     nodekey="gradEndColor"
@@ -326,7 +336,7 @@ const CardSettings = () => {
                 </td>
               </tr>
               <tr>
-                <td>Direction (&deg;)</td>
+                <td>{t("Direction (&deg;)")}</td>
                 <td>
                   <OrFormula
                     nodekey="gradDirection"
@@ -348,7 +358,7 @@ const CardSettings = () => {
           {bgType === "Image" && (
             <tr>
               <td>
-                <label>File</label>
+                <label>{t("File")}</label>
               </td>
               <td>
                 <select
@@ -373,7 +383,7 @@ const CardSettings = () => {
           {bgType === "Image Field" && (
             <tr>
               <td>
-                <label>File field</label>
+                <label>{t("File field")}</label>
               </td>
               <td>
                 <select
@@ -401,7 +411,7 @@ const CardSettings = () => {
             <Fragment>
               <tr>
                 <td>
-                  <label>Location</label>
+                  <label>{t("Location")}</label>
                 </td>
 
                 <td>
@@ -410,9 +420,9 @@ const CardSettings = () => {
                     className="form-control-sm  form-select"
                     onChange={setAProp("imageLocation")}
                   >
-                    <option>Card</option>
-                    <option>Body</option>
-                    <option>Top</option>
+                    <option>{t("Card")}</option>
+                    <option>{t("Body")}</option>
+                    <option>{t("Top")}</option>
                   </select>
                 </td>
               </tr>
@@ -423,7 +433,7 @@ const CardSettings = () => {
               <Fragment>
                 <tr>
                   <td>
-                    <label>Size</label>
+                    <label>{t("Size")}</label>
                   </td>
 
                   <td>
@@ -440,7 +450,7 @@ const CardSettings = () => {
             )}
           {bgType === "Color" && (
             <tr>
-              <td>Color</td>
+              <td>{t("Color")}</td>
               <td>
                 <OrFormula nodekey="bgColor" {...{ setProp, isFormula, node }}>
                   <input
@@ -472,6 +482,8 @@ const fields = [
   { label: "Card footer", name: "hasFooter", type: "Bool" },
   { label: "Save indicator", name: "titleAjaxIndicator", type: "Bool" },
   { label: "No padding", name: "noPadding", type: "Bool" },
+  { label: "Contents", name: "contents", type: "Nodes", nodeID: "cardbody" },
+  { label: "Title Right", name: "titleRight", type: "Nodes", nodeID: "titleRight" },
   { label: "Footer", name: "footer", type: "Nodes", nodeID: "cardfooter" },
   { name: "style", default: {} },
   { label: "Class", name: "class", type: "String", canBeFormula: true },
@@ -498,13 +510,14 @@ Card.craft = {
     shadow: true,
     isFormula: {},
     style: {},
+    contents: [],
     footer: [],
+    titleRight: [],
   },
   displayName: "Card",
   related: {
     settings: CardSettings,
     segment_type: "card",
-    hasContents: true,
     fields,
   },
 };

package/src/components/elements/Clone.js

@@ -1,11 +1,26 @@
 import React, { Fragment, useState, useEffect } from "react";
 import { ListColumn } from "./ListColumn";
 import { Columns, ntimes } from "./Columns";
+import { Card } from "./Card";
+import { Container } from "./Container";
+import { Tabs } from "./Tabs";
+import { Table } from "./Table";
 import { Element } from "@craftjs/core";
 
 const rand_ident = () =>
   Math.floor(Math.random() * 16777215).toString(16);
 
+/**
+ * Clone the children of a linked node (not the linked node wrapper itself).
+ * The parent component's render recreates the wrapper via <Element canvas>.
+ */
+const cloneLinkedNodeChildren = (query, linkedNodeId) => {
+  if (!linkedNodeId) return undefined;
+  const linkedNodeData = query.node(linkedNodeId).get().data;
+  const childNodes = linkedNodeData.nodes || [];
+  return childNodes.map(recursivelyCloneToElems(query));
+};
+
 export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
   const { data } = query.node(nodeId).get();
   const { type, props, nodes } = data;
@@ -14,8 +29,6 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
     newProps.rndid = rand_ident();
   }
 
-  // console.log("cloning", data.displayName, data.linkedNodes["listcol"]);
-
   const children = (nodes || []).map(recursivelyCloneToElems(query));
   if (data.displayName === "Columns") {
     const cols = ntimes(data.props.ncols, (ix) =>
@@ -37,6 +50,65 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
     });
   }
 
+  if (data.displayName === "Card") {
+    const clonedContents = cloneLinkedNodeChildren(
+      query,
+      data.linkedNodes["cardbody"]
+    );
+    const clonedFooter = cloneLinkedNodeChildren(
+      query,
+      data.linkedNodes["cardfooter"]
+    );
+    return React.createElement(Card, {
+      ...newProps,
+      ...(typeof ix !== "undefined" ? { key: ix } : {}),
+      contents: clonedContents,
+      footer: clonedFooter,
+    });
+  }
+
+  if (data.displayName === "Container") {
+    const clonedContents = cloneLinkedNodeChildren(
+      query,
+      data.linkedNodes["container-canvas"]
+    );
+    return React.createElement(Container, {
+      ...newProps,
+      ...(typeof ix !== "undefined" ? { key: ix } : {}),
+      contents: clonedContents,
+    });
+  }
+
+  if (data.displayName === "Tabs") {
+    const cols = ntimes(data.props.ntabs, (ix) =>
+      data.linkedNodes["Tab" + ix]
+        ? cloneLinkedNodeChildren(query, data.linkedNodes["Tab" + ix])
+        : undefined
+    );
+    return React.createElement(Tabs, {
+      ...newProps,
+      ...(typeof ix !== "undefined" ? { key: ix } : {}),
+      contents: cols,
+    });
+  }
+
+  if (data.displayName === "Table") {
+    const rows = data.props.rows || 0;
+    const columns = data.props.columns || 0;
+    const clonedContents = ntimes(rows, (ri) =>
+      ntimes(columns, (ci) =>
+        data.linkedNodes[`cell_${ri}_${ci}`]
+          ? cloneLinkedNodeChildren(query, data.linkedNodes[`cell_${ri}_${ci}`])
+          : undefined
+      )
+    );
+    return React.createElement(Table, {
+      ...newProps,
+      ...(typeof ix !== "undefined" ? { key: ix } : {}),
+      contents: clonedContents,
+    });
+  }
+
   if (data.isCanvas)
     return React.createElement(
       Element,

package/src/components/elements/Column.js

@@ -64,7 +64,7 @@ Column.craft = {
   props: {},
   rules: {
     canDrag: () => true,
-    canMoveIn: (incomming, current) => {
+    canMoveIn: (incoming, current) => {
       if (current?.data?.props?.singleOccupancy && current.data.nodes?.length)
         return false;