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

package/src/components/elements/ListColumn.js

@@ -11,6 +11,7 @@ import React, {
   useEffect,
   useState,
 } from "react";
+import useTranslation from "../../hooks/useTranslation";
 
 import { Element, useNode, useEditor } from "@craftjs/core";
 import { setAPropGen, SettingsFromFields } from "./utils";
@@ -38,6 +39,7 @@ const ListColumn = ({
   col_width,
   col_width_units,
 }) => {
+  const { t } = useTranslation();
   const {
     selected,
     id,
@@ -75,16 +77,18 @@ const ListColumn = ({
       <div className={`list-column flex-50 p-2`}>
         <div className="d-flex justify-content-between h-100">
           <div className="">
-            Column {childIx}
+            {t("Column")} {childIx}
             {header_label ? `: ${header_label}` : ""}
             <br />
             {showif ? (
-              <span className="badge bg-secondary me-2">showif</span>
+              <span className="badge bg-secondary me-2">{t("showif")}</span>
             ) : (
               ""
             )}
             {alignment && alignment !== "Default" ? (
-              <span className="badge bg-secondary me-2">Align {alignment}</span>
+              <span className="badge bg-secondary me-2">
+                {t("Align")} {alignment}
+              </span>
             ) : (
               ""
             )}

package/src/components/elements/ListColumns.js

@@ -53,7 +53,10 @@ ListColumns.craft = {
     canDrag: () => false,
     canDrop: () => false,
     canMoveIn: (incoming) => {
-      return incoming?.data?.displayName === "ListColumn";
+      const incomingNodes = Array.isArray(incoming) ? incoming : [incoming];
+      return incomingNodes.every(
+        (node) => node?.data?.displayName === "ListColumn"
+      );
     },
   },
   related: {

package/src/components/elements/MonacoEditor.js

@@ -68,7 +68,7 @@ export const SingleLineEditor = React.forwardRef(
   }
 );
 
-export const MultiLineCodeEditor = ({ setProp, value, onChange }) => {
+export const MultiLineCodeEditor = ({ setProp, value, onChange, isModalEditor = false }) => {
   const options = React.useContext(optionsCtx);
 
   const handleEditorWillMount = (monaco) => {
@@ -77,7 +77,7 @@ export const MultiLineCodeEditor = ({ setProp, value, onChange }) => {
   return (
     <div className="form-control p-0 pt-2">
       <Editor
-        height="150px"
+        height={isModalEditor ? "100%" : "150px"}
         value={value}
         onChange={onChange}
         defaultLanguage="typescript"
@@ -86,6 +86,7 @@ export const MultiLineCodeEditor = ({ setProp, value, onChange }) => {
         options={multiLineEditorOptions}
         //theme="myCoolTheme"
         beforeMount={handleEditorWillMount}
+        className={isModalEditor ? 'code-modal-form' : ''}
       />
     </div>
   );
@@ -93,6 +94,7 @@ export const MultiLineCodeEditor = ({ setProp, value, onChange }) => {
 
 const multiLineEditorOptions = {
   fontSize: "14px",
+  minHeight:"80vh",
   fontWeight: "normal",
   wordWrap: "off",
   lineNumbers: "off",

package/src/components/elements/Page.js

@@ -1,10 +1,12 @@
-import React, { Fragment, useContext, useEffect } from "react";
+import React, { Fragment, useState, useContext, useEffect } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
 import { fetchPagePreview, setAPropGen } from "./utils";
 
 export const Page = ({ page }) => {
+  const { t } = useTranslation();
   const {
     selected,
     node_id,
@@ -35,13 +37,14 @@ export const Page = ({ page }) => {
           dangerouslySetInnerHTML={{ __html: myPreview }}
         ></div>
       ) : (
-        `Page: ${page}`
+        `${t("Page")}: ${page}`
       )}
     </div>
   );
 };
 
 export const PageSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     page: node.data.props.page,
     node_id: node.id,
@@ -58,7 +61,7 @@ export const PageSettings = () => {
     <div>
       <Fragment>
         <div>
-          <label>Page to embed</label>
+          <label>{t("Page to embed")}</label>
           <select
             value={page}
             className="form-control form-select"
@@ -83,7 +86,7 @@ export const PageSettings = () => {
           target="_blank"
           href={`/pageedit/edit/${page}`}
         >
-          Edit this page
+          {t("Edit this page")}
         </a>
       ) : null}
     </div>

package/src/components/elements/RelationBadges.js

@@ -1,4 +1,6 @@
-import React from "react";
+import React, { Fragment, useState, useContext } from "react";
+import useTranslation from "../../hooks/useTranslation";
+import optionsCtx from "../context";
 import { removeWhitespaces } from "./utils";
 import {
   parseLegacyRelation,
@@ -6,14 +8,14 @@ import {
   Relation,
 } from "@saltcorn/common-code";
 
-const buildBadgeCfgs = (sourceTblName, type, path, caches, relString) => {
+const buildBadgeCfgs = (sourceTblName, type, path, caches, relString, t) => {
   if (type === RelationType.OWN)
-    return [{ table: `${sourceTblName} (same table)` }];
+    return [{ table: `${sourceTblName} ${t("(same table)")}` }];
   else if (type === RelationType.INDEPENDENT)
-    return [{ table: "None (no relation)" }];
-  else if (path.length === 0) return [{ table: "invalid relation" }];
+    return [{ table: t("None (no relation)") }];
+  else if (path.length === 0) return [{ table: t("invalid relation") }];
   else if (relString === Relation.fixedUserRelation)
-    return [{ table: "logged in user" }];
+    return [{ table: t("logged in user") }];
   else {
     const result = [];
     let currentCfg = null;
@@ -82,6 +84,7 @@ const buildBadge = ({ up, table, down }, index) => {
 };
 
 export const RelationBadges = ({ view, relation, parentTbl, caches }) => {
+  const { t } = useTranslation();
   if (relation) {
     return (
       <div className="overflow-scroll">
@@ -90,16 +93,17 @@ export const RelationBadges = ({ view, relation, parentTbl, caches }) => {
           relation.type,
           relation.path,
           caches,
-          relation.relationString
+          relation.relationString,
+          t
         ).map(buildBadge)}
       </div>
     );
   } else {
-    if (!view) return buildBadge({ table: "invalid relation" }, 0);
+    if (!view) return buildBadge({ table: t("invalid relation") }, 0);
     const [prefix, rest] = view.split(":");
-    if (!rest) return buildBadge({ table: "invalid relation" }, 0);
+    if (!rest) return buildBadge({ table: t("invalid relation") }, 0);
     const { type, path } = parseLegacyRelation(prefix, rest, parentTbl);
-    if (path.length === 0) return buildBadge({ table: "invalid relation" }, 0);
+    if (path.length === 0) return buildBadge({ table: t("invalid relation") }, 0);
     else if (path.length === 1 && (type === "Independent" || type === "Own"))
       return (
         <div className="overflow-scroll">
@@ -114,7 +118,8 @@ export const RelationBadges = ({ view, relation, parentTbl, caches }) => {
             type,
             path,
             caches,
-            relation.relationString
+            relation.relationString,
+            t
           ).map(buildBadge)}
         </div>
       );

package/src/components/elements/RelationOnDemandPicker.js

@@ -1,8 +1,17 @@
+/* globals $ */
+
 import React from "react";
+import { createRoot } from "react-dom/client";
 import { removeWhitespaces, rand_ident } from "./utils";
-import ReactDOM from "react-dom";
+import useTranslation from "../../hooks/useTranslation";
 
 const maxLevelDefault = 10;
+const renderInto = (container, node) => {
+  if (!container) return;
+  const root = container.__scRoot || createRoot(container);
+  container.__scRoot = root;
+  root.render(node);
+};
 
 const keyLabel = (key, type) =>
   type === "fk" ? `${key.name}` : `${key.name} (from ${key.table})`;
@@ -78,15 +87,11 @@ const Relation = ({ cfg }) => {
                 maxLevel,
                 setMaxLevel,
               };
-              ReactDOM.render(
-                <RelationLayer cfg={layerCfg} />,
-                document.getElementById(nextDropId),
-                () => {
-                  toggleLayers(level, maxLevel, [`#${toggleId}`]);
-                  setActiveClasses(level, maxLevel, itemId);
-                  if (level > maxLevel) setMaxLevel(level);
-                }
-              );
+              const container = document.getElementById(nextDropId);
+              renderInto(container, <RelationLayer cfg={layerCfg} />);
+              toggleLayers(level, maxLevel, [`#${toggleId}`]);
+              setActiveClasses(level, maxLevel, itemId);
+              if (level > maxLevel) setMaxLevel(level);
             }}
           >
             {keyLabel(relation, type)}
@@ -178,6 +183,7 @@ const RelationLayer = ({ cfg }) => {
  * @returns
  */
 export const RelationOnDemandPicker = ({ relations, update }) => {
+  const { t } = useTranslation();
   const [maxLevel, setMaxLevel] = React.useState(maxLevelDefault);
   const toggleId = "_relation_picker_toggle_";
   const layerCfg = {
@@ -189,7 +195,7 @@ export const RelationOnDemandPicker = ({ relations, update }) => {
   };
   return (
     <div>
-      <label>Relation</label>
+      <label>{t("Relation")}</label>
       <div style={{ zIndex: 10000 }} className="dropstart">
         <button
           id={toggleId}
@@ -201,7 +207,7 @@ export const RelationOnDemandPicker = ({ relations, update }) => {
             setMaxLevel(maxLevelDefault);
           }}
         >
-          Select
+          {t("Select")}
         </button>
         <div className="dropdown-menu">
           <RelationLayer cfg={layerCfg} />

package/src/components/elements/SearchBar.js

@@ -4,8 +4,10 @@
  * @subcategory components / elements
  */
 
-import React, { Fragment, useState } from "react";
-import { Element, useNode } from "@craftjs/core";
+import React, { Fragment, useState, useEffect, useContext } from "react";
+import useTranslation from "../../hooks/useTranslation";
+import optionsCtx from "../context";
+import { useNode, Element } from "@craftjs/core";
 import { Column } from "./Column";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
@@ -21,13 +23,23 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const SearchBar = ({ has_dropdown, children, show_badges }) => {
+const SearchBar = ({ has_dropdown, children, contents, show_badges }) => {
+  const { t } = useTranslation();
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
   const [showDropdown, setDropdown] = useState(false);
   const [dropWidth, setDropWidth] = useState(200);
+
+  const renderContents = () => {
+    const actualChildren = contents || children;
+    if (!actualChildren) return null;
+    if (React.isValidElement(actualChildren)) return actualChildren;
+    if (Array.isArray(actualChildren)) return actualChildren;
+    return actualChildren;
+  };
+
   return (
     <div
       className={`input-group  ${selected ? "selected-node" : ""}`}
@@ -47,7 +59,7 @@ const SearchBar = ({ has_dropdown, children, show_badges }) => {
       <input
         type="text"
         className="form-control bg-light"
-        placeholder="Search..."
+        placeholder={t("Search...")}
         readOnly={true}
       />
 
@@ -70,10 +82,19 @@ const SearchBar = ({ has_dropdown, children, show_badges }) => {
             }`}
             style={{ width: dropWidth, left: 0 }}
           >
-            <div className="canvas">{children}</div>
+            <Element canvas id="searchbar-contents" is={Column}>
+              {renderContents()}
+            </Element>
           </div>
         </Fragment>
       )}
+      {!has_dropdown && (
+        <div style={{ display: "none" }}>
+          <Element canvas id="searchbar-contents" is={Column}>
+            {renderContents()}
+          </Element>
+        </div>
+      )}
     </div>
   );
 };
@@ -85,6 +106,7 @@ export /**
  * @subcategory components
  */
 const SearchBarSettings = () => {
+  const { t } = useTranslation();
   const {
     actions: { setProp },
     has_dropdown,
@@ -107,7 +129,7 @@ const SearchBarSettings = () => {
           checked={has_dropdown}
           onChange={setAProp("has_dropdown", { checked: true })}
         />
-        <label className="form-check-label">Has Dropdown</label>
+        <label className="form-check-label">{t("Has Dropdown")}</label>
       </div>
       <div className="form-check">
         <input
@@ -117,7 +139,7 @@ const SearchBarSettings = () => {
           checked={show_badges}
           onChange={setAProp("show_badges", { checked: true })}
         />
-        <label className="form-check-label">Show current state badges</label>
+        <label className="form-check-label">{t("Show current state badges")}</label>
       </div>
       <div className="form-check">
         <input
@@ -127,7 +149,7 @@ const SearchBarSettings = () => {
           checked={autofocus}
           onChange={setAProp("autofocus", { checked: true })}
         />
-        <label className="form-check-label">Autofocus</label>
+        <label className="form-check-label">{t("Autofocus")}</label>
       </div>
     </div>
   );
@@ -142,11 +164,16 @@ SearchBar.craft = {
     has_dropdown: false,
     show_badges: false,
     autofocus: false,
+    contents: [],
   },
   related: {
     settings: SearchBarSettings,
     segment_type: "search_bar",
-    hasContents: true,
-    fields: ["has_dropdown", "show_badges", "autofocus"],
+    fields: [
+      { name: "has_dropdown" },
+      { name: "show_badges" },
+      { name: "autofocus" },
+      { label: "Contents", name: "contents", type: "Nodes", nodeID: "searchbar-contents" },
+    ],
   },
 };

package/src/components/elements/Table.js

@@ -7,6 +7,7 @@
 import React, { Fragment, useState, useContext, useEffect } from "react";
 import { ntimes } from "./Columns";
 import { Column } from "./Column";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import { setAPropGen, SettingsFromFields } from "./utils";
 
@@ -67,60 +68,76 @@ const Table = ({
   );
 };
 
-const fields = [
-  {
-    label: "Rows",
-    name: "rows",
-    type: "Integer",
-    attributes: { min: 0 },
-  },
-  {
-    label: "Columns",
-    name: "columns",
-    type: "Integer",
-    attributes: { min: 0 },
-  },
-  {
-    name: "customClass",
-    label: "Custom class",
-    type: "String",
-  },
-  {
-    label: "Bootstrap style",
-    name: "bs_style",
-    type: "Bool",
-  },
-  {
-    label: "Small",
-    name: "bs_small",
-    type: "Bool",
-    showIf: { bs_style: true },
-  },
-  {
-    label: "Striped",
-    name: "bs_striped",
-    type: "Bool",
-    showIf: { bs_style: true },
-  },
-  {
-    label: "Bordered",
-    name: "bs_bordered",
-    type: "Bool",
-    showIf: { bs_style: true },
-  },
-  {
-    label: "Borderless",
-    name: "bs_borderless",
-    type: "Bool",
-    showIf: { bs_style: true },
-  },
-  {
-    label: "Auto width",
-    name: "bs_wauto",
-    type: "Bool",
-    showIf: { bs_style: true },
-  },
-];
+const TableSettings = () => {
+  const { t } = useTranslation();
+  const fields = [
+    {
+      label: t("Rows"),
+      name: "rows",
+      type: "Integer",
+      attributes: { min: 0 },
+    },
+    {
+      label: t("Columns"),
+      name: "columns",
+      type: "Integer",
+      attributes: { min: 0 },
+    },
+    {
+      name: "customClass",
+      label: t("Custom class"),
+      type: "String",
+    },
+    {
+      label: t("Bootstrap style"),
+      name: "bs_style",
+      type: "Bool",
+    },
+    {
+      label: t("Small"),
+      name: "bs_small",
+      type: "Bool",
+      showIf: { bs_style: true },
+    },
+    {
+      label: t("Striped"),
+      name: "bs_striped",
+      type: "Bool",
+      showIf: { bs_style: true },
+    },
+    {
+      label: t("Bordered"),
+      name: "bs_bordered",
+      type: "Bool",
+      showIf: { bs_style: true },
+    },
+    {
+      label: t("Borderless"),
+      name: "bs_borderless",
+      type: "Bool",
+      showIf: { bs_style: true },
+    },
+    {
+      label: t("Auto width"),
+      name: "bs_wauto",
+      type: "Bool",
+      showIf: { bs_style: true },
+    },
+  ];
+  return (
+    <SettingsFromFields
+      fields={fields}
+      onChange={(fnm, v, setProp) => {
+        if (fnm === "rows")
+          setProp((prop) => {
+            ntimes(v, (i) => {
+              if (!prop.contents[i]) prop.contents[i] = [];
+            });
+          });
+      }}
+    />
+  );
+};
 
 /**
  * @type {object}
@@ -128,16 +145,6 @@ const fields = [
 Table.craft = {
   displayName: "Table",
   related: {
-    settings: SettingsFromFields(fields, {
-      onChange(fnm, v, setProp) {
-        if (fnm === "rows")
-          setProp((prop) => {
-            ntimes(v, (i) => {
-              if (!prop.contents[i]) prop.contents[i] = [];
-            });
-          });
-      },
-    }),
-    fields,
+    settings: TableSettings,
   },
 };