@saltcorn/builder 1.6.0-alpha.6 → 1.6.0-alpha.8

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;
 

package/src/components/elements/Columns.js

@@ -6,6 +6,7 @@
 
 import React, { Fragment } from "react";
 import { Column } from "./Column";
+import useTranslation from "../../hooks/useTranslation";
 
 import { Element, useNode } from "@craftjs/core";
 import {
@@ -124,6 +125,7 @@ export /**
  * @subcategory components
  */
 const ColumnsSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     widths: node.data.props.widths,
     ncols: node.data.props.ncols,
@@ -164,11 +166,11 @@ const ColumnsSettings = () => {
       value={currentSettingsTab}
       onChange={(ix) => setProp((prop) => (prop.currentSettingsTab = ix))}
     >
-      <table accordiontitle="Column properties">
+      <table accordiontitle={t("Column properties")}>
         <tbody>
           <tr>
             <td colSpan="3">
-              <label>Number of columns</label>
+              <label>{t("Number of columns")}</label>
             </td>
             <td>
               <input
@@ -190,7 +192,7 @@ const ColumnsSettings = () => {
             </td>
           </tr>
           <tr>
-            <th colSpan="4">Widths &amp; Breakpoint</th>
+            <th colSpan="4">{t("Widths & Breakpoint")}</th>
           </tr>
           {ntimes(ncols, (ix) => (
             <Fragment key={ix}>
@@ -199,7 +201,7 @@ const ColumnsSettings = () => {
               </tr>
               <tr>
                 <td>
-                  <label>Width</label>
+                  <label>{t("Width")}</label>
                 </td>
                 <td align="right">
                   {ix < ncols - 1 ? (
@@ -231,8 +233,8 @@ const ColumnsSettings = () => {
                       setProp((prop) => (prop.breakpoints[ix] = value));
                     }}
                   >
-                    <option disabled>Breakpoint</option>
-                    <option value="">none</option>
+                    <option disabled>{t("Breakpoint")}</option>
+                    <option value="">{t("none")}</option>
                     {buildBootstrapOptions(["sm", "md", "lg"])}
                   </select>
                 </td>
@@ -241,12 +243,12 @@ const ColumnsSettings = () => {
           ))}
         </tbody>
       </table>
-      <div accordiontitle="Column settings">
-        Settings for column #
+      <div accordiontitle={t("Column settings")}>
+        {t("Settings for column #")}
         <ConfigField
           field={{
             name: "setting_col_n",
-            label: "Column number",
+            label: t("Column number"),
             type: "btn_select",
             options: ntimes(ncols, (i) => ({
               value: i + 1,
@@ -260,16 +262,16 @@ const ColumnsSettings = () => {
         ></ConfigField>
         <table className="w-100">
           <tbody>
-            <SettingsSectionHeaderRow title="Align" />
+            <SettingsSectionHeaderRow title={t("Align")} />
             <SettingsRow
               field={{
                 name: "vAlign",
-                label: "Vertical",
+                label: t("Vertical"),
                 type: "btn_select",
                 options: [
-                  { value: "start", title: "Start", label: <AlignTop /> },
-                  { value: "center", title: "Center", label: <AlignMiddle /> },
-                  { value: "end", title: "End", label: <AlignBottom /> },
+                  { value: "start", title: t("Start"), label: <AlignTop /> },
+                  { value: "center", title: t("Center"), label: <AlignMiddle /> },
+                  { value: "end", title: t("End"), label: <AlignBottom /> },
                 ],
               }}
               node={colSetsNode}
@@ -284,12 +286,12 @@ const ColumnsSettings = () => {
             <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={colSetsNode}
@@ -304,7 +306,7 @@ const ColumnsSettings = () => {
             <SettingsRow
               field={{
                 name: "colClass",
-                label: "Class",
+                label: t("Class"),
                 type: "String",
               }}
               node={colSetsNode}
@@ -319,7 +321,7 @@ const ColumnsSettings = () => {
             <SettingsRow
               field={{
                 name: "colStyle",
-                label: "CSS",
+                label: t("CSS"),
                 type: "textarea",
               }}
               node={colSetsNode}
@@ -334,12 +336,12 @@ const ColumnsSettings = () => {
           </tbody>
         </table>
       </div>
-      <table className="w-100" accordiontitle="Gutters and class">
+      <table className="w-100" accordiontitle={t("Gutters and class")}>
         <tbody>
           <SettingsRow
             field={{
               name: "gx",
-              label: "Horizontal 0-5",
+              label: t("Horizontal 0-5"),
               type: "Integer",
             }}
             node={node}
@@ -348,7 +350,7 @@ const ColumnsSettings = () => {
           <SettingsRow
             field={{
               name: "gy",
-              label: "Vertical 0-5",
+              label: t("Vertical 0-5"),
               type: "Integer",
             }}
             node={node}
@@ -357,7 +359,7 @@ const ColumnsSettings = () => {
           <SettingsRow
             field={{
               name: "customClass",
-              label: "Custom class",
+              label: t("Custom class"),
               type: "String",
             }}
             node={node}
@@ -365,7 +367,7 @@ const ColumnsSettings = () => {
           />
         </tbody>
       </table>
-      <div accordiontitle="Box" className="w-100">
+      <div accordiontitle={t("Box")} className="w-100">
         <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
       </div>
     </Accordion>