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

package/src/components/elements/Columns.js

@@ -4,13 +4,14 @@
  * @subcategory components / elements
  */
 
-import React, { Fragment } from "react";
+import React, { Fragment, useContext } from "react";
 import { Column } from "./Column";
+import useTranslation from "../../hooks/useTranslation";
+import PreviewCtx from "../preview_context";
 
 import { Element, useNode } from "@craftjs/core";
 import {
   Accordion,
-  ConfigField,
   SettingsRow,
   reactifyStyles,
   SettingsSectionHeaderRow,
@@ -18,6 +19,7 @@ import {
   parseStyles,
 } from "./utils";
 import { BoxModelEditor } from "./BoxModelEditor";
+import { ArrayManager } from "./ArrayManager";
 import {
   AlignTop,
   AlignMiddle,
@@ -65,6 +67,35 @@ const resetWidths = (ncols) => ntimes(ncols - 1, () => Math.floor(12 / ncols));
 const getWidth = (widths, colix) =>
   colix < widths.length ? widths[colix] : 12 - sum(widths);
 
+/**
+ * Bootstrap breakpoint minimum widths (px)
+ */
+const BREAKPOINT_MIN_WIDTH = {
+  "": 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200,
+};
+
+const PREVIEW_DEVICE_WIDTH = {
+  desktop: Infinity,
+  tablet: 768,
+  mobile: 375,
+};
+
+const getColClass = (width, breakpoint, previewDevice) => {
+  if (!previewDevice || previewDevice === "desktop") {
+    const bp = breakpoint || "sm";
+    return bp ? `col-${bp}-${width}` : `col-${width}`;
+  }
+  const deviceWidth = PREVIEW_DEVICE_WIDTH[previewDevice] || Infinity;
+  const bpMin = BREAKPOINT_MIN_WIDTH[breakpoint || "sm"] || 0;
+  if (deviceWidth < bpMin) return "col-12";
+  const bp = breakpoint || "sm";
+  return bp ? `col-${bp}-${width}` : `col-${width}`;
+};
+
 export /**
  * @param {object} opts
  * @param {number[]} opts.widths
@@ -87,11 +118,13 @@ const Columns = ({
   colClasses,
   colStyles,
   customClass,
+  breakpoints,
 }) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
+  const { previewDevice } = useContext(PreviewCtx);
   return (
     <div
       className={`row builder-columns ${customClass || ""} ${selected ? "selected-node" : ""} ${
@@ -103,7 +136,11 @@ const Columns = ({
       {ntimes(ncols, (ix) => (
         <div
           key={ix}
-          className={`split-col col-sm-${getWidth(widths, ix)} text-${
+          className={`split-col ${getColClass(
+            getWidth(widths, ix),
+            breakpoints?.[ix],
+            previewDevice
+          )} text-${
             aligns?.[ix]
           } align-items-${vAligns?.[ix]} ${colClasses?.[ix] || ""}`}
           style={parseStyles(colStyles?.[ix] || "")}
@@ -124,6 +161,7 @@ export /**
  * @subcategory components
  */
 const ColumnsSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     widths: node.data.props.widths,
     ncols: node.data.props.ncols,
@@ -154,122 +192,93 @@ const ColumnsSettings = () => {
     currentSettingsTab,
   } = node;
   const colSetsNode = {
-    vAlign: vAligns?.[setting_col_n - 1],
-    hAlign: aligns?.[setting_col_n - 1],
-    colClass: colClasses?.[setting_col_n - 1] || "",
-    colStyle: colStyles?.[setting_col_n - 1] || "",
+    vAlign: vAligns?.[setting_col_n],
+    hAlign: aligns?.[setting_col_n],
+    colClass: colClasses?.[setting_col_n] || "",
+    colStyle: colStyles?.[setting_col_n] || "",
   };
   return (
     <Accordion
       value={currentSettingsTab}
       onChange={(ix) => setProp((prop) => (prop.currentSettingsTab = ix))}
     >
-      <table accordiontitle="Column properties">
-        <tbody>
-          <tr>
-            <td colSpan="3">
-              <label>Number of columns</label>
-            </td>
-            <td>
-              <input
-                type="number"
-                value={ncols}
-                className="form-control"
-                step="1"
-                min="1"
-                max="6"
-                onChange={(e) => {
-                  if (!e.target) return;
-                  const value = e.target.value;
-                  setProp((prop) => {
-                    prop.ncols = value;
-                    prop.widths = resetWidths(value);
-                  });
-                }}
-              />
-            </td>
-          </tr>
-          <tr>
-            <th colSpan="4">Widths &amp; Breakpoint</th>
-          </tr>
-          {ntimes(ncols, (ix) => (
-            <Fragment key={ix}>
-              <tr>
-                <th colSpan="4">Column {ix + 1}</th>
-              </tr>
-              <tr>
-                <td>
-                  <label>Width</label>
-                </td>
-                <td align="right">
-                  {ix < ncols - 1 ? (
-                    <input
-                      type="number"
-                      value={widths[ix]}
-                      className="form-control"
-                      step="1"
-                      min="1"
-                      max={12 - (sum(widths) - widths[ix]) - 1}
-                      onChange={(e) => {
-                        if (!e.target) return;
-                        const value = e.target.value;
-                        setProp((prop) => (prop.widths[ix] = +value));
-                      }}
-                    />
-                  ) : (
-                    `${12 - sum(widths)}`
-                  )}
-                </td>
-                <td>/12</td>
-                <td>
-                  <select
-                    className="form-control form-select"
-                    value={breakpoints[ix]}
+      <div accordiontitle={t("Column properties")}>
+        <ArrayManager
+          node={node}
+          setProp={setProp}
+          countProp={"ncols"}
+          currentProp={"setting_col_n"}
+          managedArrays={["widths", "breakpoints", "aligns", "vAligns", "colClasses", "colStyles"]}
+          manageContents={true}
+          contentsKey={"besides"}
+          initialAddProps={{
+            breakpoints: "sm",
+          }}
+          onLayoutChange={(layout, action) => {
+            if (action === "add" || action === "delete") {
+              const n = layout.besides.length;
+              layout.widths = ntimes(n, () => Math.floor(12 / n));
+            }
+          }}
+        />
+        <table className="w-100 mt-2">
+          <tbody>
+            <tr>
+              <th colSpan="4">{t("Width & Breakpoint")}</th>
+            </tr>
+            <tr>
+              <td>
+                <label>{t("Width")}</label>
+              </td>
+              <td colSpan="3" align="right">
+                {setting_col_n < ncols - 1 ? (
+                  <input
+                    type="number"
+                    value={widths[setting_col_n]}
+                    className="form-control"
+                    step="1"
+                    min="1"
+                    max={12 - (sum(widths) - widths[setting_col_n]) - 1}
                     onChange={(e) => {
                       if (!e.target) return;
                       const value = e.target.value;
-                      setProp((prop) => (prop.breakpoints[ix] = value));
+                      setProp((prop) => (prop.widths[setting_col_n] = +value));
                     }}
-                  >
-                    <option disabled>Breakpoint</option>
-                    <option value="">none</option>
-                    {buildBootstrapOptions(["sm", "md", "lg"])}
-                  </select>
-                </td>
-              </tr>
-            </Fragment>
-          ))}
-        </tbody>
-      </table>
-      <div accordiontitle="Column settings">
-        Settings for column #
-        <ConfigField
-          field={{
-            name: "setting_col_n",
-            label: "Column number",
-            type: "btn_select",
-            options: ntimes(ncols, (i) => ({
-              value: i + 1,
-              title: `${i + 1}`,
-              label: `${i + 1}`,
-            })),
-          }}
-          node={node}
-          setProp={setProp}
-          props={node}
-        ></ConfigField>
-        <table className="w-100">
-          <tbody>
-            <SettingsSectionHeaderRow title="Align" />
+                  />
+                ) : (
+                  `${12 - sum(widths)}`
+                )}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <label>{t("Breakpoint")}</label>
+              </td>
+              <td colSpan="3">
+                <select
+                  className="form-control form-select"
+                  value={breakpoints[setting_col_n]}
+                  onChange={(e) => {
+                    if (!e.target) return;
+                    const value = e.target.value;
+                    setProp((prop) => (prop.breakpoints[setting_col_n] = value));
+                  }}
+                >
+                  <option value="">{t("none")}</option>
+                  {buildBootstrapOptions(["sm", "md", "lg"])}
+                </select>
+              </td>
+            </tr>
+            <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}
@@ -277,19 +286,19 @@ const ColumnsSettings = () => {
               onChange={(k, v) =>
                 setProp((prop) => {
                   if (!prop.vAligns) prop.vAligns = [];
-                  prop.vAligns[setting_col_n - 1] = v;
+                   prop.vAligns[setting_col_n] = v;
                 })
               }
             />
             <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}
@@ -297,14 +306,14 @@ const ColumnsSettings = () => {
               onChange={(k, v) =>
                 setProp((prop) => {
                   if (!prop.aligns) prop.aligns = [];
-                  prop.aligns[setting_col_n - 1] = v;
+                   prop.aligns[setting_col_n] = v;
                 })
               }
             />
             <SettingsRow
               field={{
                 name: "colClass",
-                label: "Class",
+                label: t("Class"),
                 type: "String",
               }}
               node={colSetsNode}
@@ -312,34 +321,34 @@ const ColumnsSettings = () => {
               onChange={(k, v) =>
                 setProp((prop) => {
                   if (!prop.colClasses) prop.colClasses = [];
-                  prop.colClasses[setting_col_n - 1] = v;
+                   prop.colClasses[setting_col_n] = v;
                 })
               }
             />
             <SettingsRow
               field={{
                 name: "colStyle",
-                label: "CSS",
-                type: "textarea",
+                label: t("CSS"),
+                type: "String",
               }}
               node={colSetsNode}
               setProp={setProp}
               onChange={(k, v) =>
                 setProp((prop) => {
                   if (!prop.colStyles) prop.colStyles = [];
-                  prop.colStyles[setting_col_n - 1] = v;
+                  prop.colStyles[setting_col_n] = v;
                 })
               }
             />
           </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 +357,7 @@ const ColumnsSettings = () => {
           <SettingsRow
             field={{
               name: "gy",
-              label: "Vertical 0-5",
+              label: t("Vertical 0-5"),
               type: "Integer",
             }}
             node={node}
@@ -357,7 +366,7 @@ const ColumnsSettings = () => {
           <SettingsRow
             field={{
               name: "customClass",
-              label: "Custom class",
+              label: t("Custom class"),
               type: "String",
             }}
             node={node}
@@ -365,7 +374,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>
@@ -382,7 +391,7 @@ Columns.craft = {
     ncols: 2,
     style: {},
     breakpoints: ["sm", "sm"],
-    setting_col_n: 1,
+    setting_col_n: 0,
     customClass: "",
   },
   related: {