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

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 } from "@craftjs/core";
 import { Column } from "./Column";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
@@ -22,6 +24,7 @@ export /**
  * @subcategory components
  */
 const SearchBar = ({ has_dropdown, children, show_badges }) => {
+  const { t } = useTranslation();
   const {
     selected,
     connectors: { connect, drag },
@@ -47,7 +50,7 @@ const SearchBar = ({ has_dropdown, children, show_badges }) => {
       <input
         type="text"
         className="form-control bg-light"
-        placeholder="Search..."
+        placeholder={t("Search...")}
         readOnly={true}
       />
 
@@ -85,6 +88,7 @@ export /**
  * @subcategory components
  */
 const SearchBarSettings = () => {
+  const { t } = useTranslation();
   const {
     actions: { setProp },
     has_dropdown,
@@ -107,7 +111,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 +121,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 +131,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>
   );

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,
   },
 };

package/src/components/elements/Tabs.js

@@ -5,6 +5,7 @@
  */
 
 import React, { Fragment, useState, useContext, useEffect } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import { ntimes } from "./Columns";
 import { Column } from "./Column";
 import optionsCtx from "../context";
@@ -34,6 +35,7 @@ const Tabs = ({
   field,
   setting_tab_n,
 }) => {
+  const { t } = useTranslation();
   const {
     selected,
     connectors: { connect, drag },
@@ -121,7 +123,7 @@ const Tabs = ({
                     (typeof titles[ix].label === "undefined"
                       ? titles[ix]
                       : titles[ix].label === ""
-                        ? "(empty)"
+                        ? t("(empty)")
                         : titles[ix].label)}
                 </a>
               </li>
@@ -173,6 +175,7 @@ export /**
  * @subcategory components
  */
 const TabsSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     tabsStyle: node.data.props.tabsStyle,
     ntabs: node.data.props.ntabs,
@@ -237,11 +240,11 @@ const TabsSettings = () => {
     styleOptions.push("Value switch");
 
   return (
-    <table className="w-100" accordiontitle="Placement">
+    <table className="w-100" accordiontitle={t("Placement")}>
       <tbody>
         <tr>
           <th>
-            <label>Style</label>
+            <label>{t("Style")}</label>
           </th>
           <td>
             <select
@@ -257,7 +260,7 @@ const TabsSettings = () => {
           <Fragment>
             <tr>
               <td>
-                <label>Field</label>
+                <label>{t("Field")}</label>
               </td>
               <td>
                 <select
@@ -289,7 +292,7 @@ const TabsSettings = () => {
                         onChange={setAProp("independent", { checked: true })}
                       />
                       <label className="form-check-label">
-                        Open independently
+                        {t("Open independently")}
                       </label>
                     </div>
                   </td>
@@ -305,7 +308,7 @@ const TabsSettings = () => {
                         onChange={setAProp("lazyLoadViews", { checked: true })}
                       />
                       <label className="form-check-label">
-                        Lazy load views
+                        {t("Lazy load views")}
                       </label>
                     </div>
                   </td>
@@ -323,7 +326,7 @@ const TabsSettings = () => {
                         checked={deeplink}
                         onChange={setAProp("deeplink", { checked: true })}
                       />
-                      <label className="form-check-label">Deep link</label>
+                      <label className="form-check-label">{t("Deep link")}</label>
                     </div>
                   </td>
                 </tr>
@@ -338,7 +341,7 @@ const TabsSettings = () => {
                         onChange={setAProp("serverRendered", { checked: true })}
                       />
                       <label className="form-check-label">
-                        Server rendering
+                        {t("Server rendering")}
                       </label>
                     </div>
                   </td>
@@ -346,7 +349,7 @@ const TabsSettings = () => {
                 {serverRendered ? (
                   <tr>
                     <th>
-                      <label>Identifier</label>
+                      <label>{t("Identifier")}</label>
                     </th>
                     <td>
                       <input
@@ -370,7 +373,7 @@ const TabsSettings = () => {
                         onChange={setAProp("lazyLoadViews", { checked: true })}
                       />
                       <label className="form-check-label">
-                        Lazy load views
+                        {t("Lazy load views")}
                       </label>
                     </div>
                   </td>
@@ -389,7 +392,7 @@ const TabsSettings = () => {
                       onChange={setAProp("startClosed", { checked: true })}
                     />
                     <label className="form-check-label">
-                      Inititally closed
+                      {t("Initially closed")}
                     </label>
                   </div>
                 </td>
@@ -407,7 +410,7 @@ const TabsSettings = () => {
                       onChange={setAProp("disable_inactive", { checked: true })}
                     />
                     <label className="form-check-label">
-                      Disable inactive inputs
+                      {t("Disable inactive inputs")}
                     </label>
                   </div>
                 </td>
@@ -427,7 +430,7 @@ const TabsSettings = () => {
               </td>
             </tr>
             <tr>
-              <th colSpan="2">Title</th>
+              <th colSpan="2">{t("Title")}</th>
             </tr>
             <tr>
               <td colSpan={2}>
@@ -449,7 +452,7 @@ const TabsSettings = () => {
             options.mode === "filter" ? (
               <Fragment>
                 <tr>
-                  <th colSpan="2">Show if formula</th>
+                  <th colSpan="2">{t("Show if formula")}</th>
                 </tr>
                 <tr>
                   <td colSpan={2}>
@@ -489,7 +492,7 @@ const TabsSettings = () => {
                         });
                       }}
                     />
-                    <label className="form-check-label">Initially open</label>
+                    <label className="form-check-label">{t("Initially open")}</label>
                   </div>
                 </td>
               </tr>