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

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>

package/src/components/elements/Text.js

@@ -21,12 +21,14 @@ import {
 } from "./utils";
 import ContentEditable from "react-contenteditable";
 import optionsCtx from "../context";
-import CKEditor from "ckeditor4-react";
+import { CKEditor } from "ckeditor4-react";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import fas from "@fortawesome/free-solid-svg-icons";
 import far from "@fortawesome/free-regular-svg-icons";
 import { SingleLineEditor } from "./MonacoEditor";
+import useTranslation from "../../hooks/useTranslation";
+
 const ckConfig = {
   toolbarGroups: [
     { name: "document", groups: ["mode", "document", "doctools"] },
@@ -109,7 +111,7 @@ const Text = ({
         isFormula.text ? "font-monospace" : ""
       } ${selected ? "selected-node" : ""}`}
       ref={(dom) => connect(drag(dom))}
-      onClick={(e) => selected && setEditable(true)}
+      onDoubleClick={(e) => selected && setEditable(true)}
       style={{
         ...(font ? { fontFamily: font } : {}),
         ...reactifyStyles(style || {}),
@@ -131,7 +133,7 @@ const Text = ({
       ) : editable ? (
         <ErrorBoundary>
           <CKEditor
-            data={text}
+            initData={text || ""}
             style={{ display: "inline" }}
             onChange={(e) =>
               setProp((props) => (props.text = e.editor.getData()))
@@ -155,7 +157,9 @@ export /**
  * @subcategory components
  */
 const TextSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
+    id: node.id,
     text: node.data.props.text,
     block: node.data.props.block,
     inline: node.data.props.inline,
@@ -198,17 +202,18 @@ const TextSettings = () => {
               setProp((prop) => (prop.isFormula.text = checked));
             }}
           />
-          <label className="form-check-label">Formula?</label>
+          <label className="form-check-label">{t("Formula?")}</label>
         </div>
       )}
-      <label>Text to display</label>
+     <label>{t("Text to display")}</label>
       {allowFormula && isFormula.text ? (
         <SingleLineEditor setProp={setProp} value={text} propKey="text" />
       ) : (
         <ErrorBoundary>
           <div className="border">
             <CKEditor
-              data={text}
+              key={node.id}
+              initData={text || ""}
               onChange={(e) => {
                 if (e.editor) {
                   const text = e.editor.getData();
@@ -223,7 +228,7 @@ const TextSettings = () => {
       )}
       {mode === "edit" && (
         <Fragment>
-          <label>Label for Field</label>
+          <label>{t("Label for Field")}</label>
           <select
             value={labelFor}
             onChange={setAProp("labelFor")}
@@ -243,7 +248,7 @@ const TextSettings = () => {
           <TextStyleRow textStyle={textStyle} setProp={setProp} />
           <tr>
             <td>
-              <label>Icon</label>
+              <label>{t("Icon")}</label>
             </td>
             <td>
               <FontIconPicker
@@ -258,7 +263,7 @@ const TextSettings = () => {
           <SettingsRow
             field={{
               name: "font",
-              label: "Font family",
+              label: t("Font family"),
               type: "Font",
             }}
             node={node}
@@ -267,7 +272,7 @@ const TextSettings = () => {
           <SettingsRow
             field={{
               name: "font-size",
-              label: "Font size",
+              label: t("Font size"),
               type: "DimUnits",
             }}
             node={node}
@@ -277,7 +282,7 @@ const TextSettings = () => {
           <SettingsRow
             field={{
               name: "font-weight",
-              label: "Weight",
+              label: t("Weight"),
               type: "Integer",
               min: 100,
               max: 900,
@@ -290,7 +295,7 @@ const TextSettings = () => {
           <SettingsRow
             field={{
               name: "line-height",
-              label: "Line height",
+              label: t("Line height"),
               type: "DimUnits",
             }}
             node={node}
@@ -298,7 +303,7 @@ const TextSettings = () => {
             isStyle={true}
           />
           <tr>
-            <td>Class</td>
+            <td>{t("Class")}</td>
             <td>
               <input
                 type="text"
@@ -312,7 +317,7 @@ const TextSettings = () => {
           <SettingsRow
             field={{
               name: "color",
-              label: "Color",
+              label: t("Color"),
               type: "Color",
             }}
             node={node}

package/src/components/elements/ToggleFilter.js

@@ -4,8 +4,9 @@
  * @subcategory components / elements
  */
 
-import React, { useContext, Fragment } from "react";
+import React, { Fragment, useState, useContext, useEffect } from "react";
 import { useNode } from "@craftjs/core";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import { blockProps, BlockSetting, setAPropGen, buildOptions } from "./utils";
 
@@ -32,6 +33,7 @@ const ToggleFilter = ({
   size,
   style,
 }) => {
+  const { t } = useTranslation();
   const {
     selected,
     connectors: { connect, drag },
@@ -43,7 +45,7 @@ const ToggleFilter = ({
       ref={(dom) => connect(drag(dom))}
     >
       <button className={`btn btn-outline-${style || "primary"} ${size}`}>
-        {label || value || preset_value || "Set label"}
+        {label || value || preset_value || t("Set label")}
       </button>
     </span>
   );
@@ -56,6 +58,7 @@ export /**
  * @subcategory components
  */
 const ToggleFilterSettings = () => {
+  const { t } = useTranslation();
   const {
     actions: { setProp },
     name,
@@ -85,7 +88,7 @@ const ToggleFilterSettings = () => {
       <tbody>
         <tr>
           <td>
-            <label>Field</label>
+            <label>{t("Field")}</label>
           </td>
           <td>
             <select
@@ -115,7 +118,7 @@ const ToggleFilterSettings = () => {
         </tr>
         <tr>
           <td>
-            <label>Value</label>
+            <label>{t("Value")}</label>
           </td>
           <td>
             {isBool ? (
@@ -124,9 +127,9 @@ const ToggleFilterSettings = () => {
                 className="w-100 form-select"
                 onChange={setAProp("value")}
               >
-                <option value="on">True</option>
-                <option value="off">False</option>
-                <option value="?">Both</option>
+                <option value="on">{t("True")}</option>
+                <option value="off">{t("False")}</option>
+                <option value="?">{t("Both")}</option>
               </select>
             ) : (
               <input
@@ -140,7 +143,7 @@ const ToggleFilterSettings = () => {
         {preset_options && preset_options.length > 0 ? (
           <tr>
             <td>
-              <label>Preset</label>
+              <label>{t("Preset")}</label>
             </td>
             <td>
               <select
@@ -160,7 +163,7 @@ const ToggleFilterSettings = () => {
         ) : null}
         <tr>
           <td>
-            <label>Label</label>
+            <label>{t("Label")}</label>
           </td>
           <td>
             <input
@@ -172,7 +175,7 @@ const ToggleFilterSettings = () => {
         </tr>
         <tr>
           <td>
-            <label>Button size</label>
+            <label>{t("Button size")}</label>
           </td>
           <td>
             <select
@@ -180,18 +183,18 @@ const ToggleFilterSettings = () => {
               value={size}
               onChange={setAProp("size")}
             >
-              <option value="">Standard</option>
-              <option value="btn-lg">Large</option>
-              <option value="btn-sm">Small</option>
-              <option value="btn-block">Block</option>
-              <option value="btn-block btn-lg">Large block</option>
-              <option value="btn-block btn-sm">Small block</option>
+              <option value="">{t("Standard")}</option>
+              <option value="btn-lg">{t("Large")}</option>
+              <option value="btn-sm">{t("Small")}</option>
+              <option value="btn-block">{t("Block")}</option>
+              <option value="btn-block btn-lg">{t("Large block")}</option>
+              <option value="btn-block btn-sm">{t("Small block")}</option>
             </select>
           </td>
         </tr>
         <tr>
           <td>
-            <label>Button style</label>
+            <label>{t("Button style")}</label>
           </td>
           <td>
             <select
@@ -201,14 +204,14 @@ const ToggleFilterSettings = () => {
             >
               {buildOptions(
                 [
-                  "primary",
-                  "secondary",
-                  "success",
-                  "danger",
-                  "warning",
-                  "info",
-                  "light",
-                  "dark",
+                  t("primary"),
+                  t("secondary"),
+                  t("success"),
+                  t("danger"),
+                  t("warning"),
+                  t("info"),
+                  t("light"),
+                  t("dark"),
                 ],
                 { valAttr: true, capitalize: true }
               )}

package/src/components/elements/View.js

@@ -8,6 +8,7 @@ import React, { Fragment, useEffect, useMemo } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
+import useTranslation from "../../hooks/useTranslation";
 import relationsCtx from "../relations_context";
 import Select from "react-select";
 
@@ -19,6 +20,8 @@ import {
   HelpTopicLink,
   initialRelation,
   buildLayers,
+  reactSelectStyles,
+  builderSelectClassName,
 } from "./utils";
 
 import { RelationBadges } from "./RelationBadges";
@@ -47,6 +50,7 @@ const View = ({ name, view, configuration, state }) => {
     node_id,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected, node_id: node.id }));
+  const { t } = useTranslation();
   const options = React.useContext(optionsCtx);
 
   let viewname = view;
@@ -81,7 +85,7 @@ const View = ({ name, view, configuration, state }) => {
           dangerouslySetInnerHTML={{ __html: myPreview }}
         ></div>
       ) : (
-        `View: ${label}`
+        `${t("View")}: ${label}`
       )}
     </div>
   );
@@ -94,6 +98,7 @@ export /**
  * @namespace
  */
 const ViewSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     name: node.data.props.name,
     view: node.data.props.view,
@@ -157,6 +162,7 @@ const ViewSettings = () => {
   }
   if (viewname && viewname.includes(".")) viewname = viewname.split(".")[0];
 
+  let cacheWasPopulated = false;
   if (
     finder &&
     !(relationsCache[tableName] && relationsCache[tableName][viewname])
@@ -173,8 +179,13 @@ const ViewSettings = () => {
     );
     relationsCache[tableName] = relationsCache[tableName] || {};
     relationsCache[tableName][viewname] = { relations, layers };
-    setRelationsCache({ ...relationsCache });
+    cacheWasPopulated = true;
   }
+  useEffect(() => {
+    if (cacheWasPopulated) {
+      setRelationsCache({ ...relationsCache });
+    }
+  });
   const [relationsData, setRelationsData] = finder
     ? React.useState(relationsCache[tableName][viewname])
     : [undefined, undefined];
@@ -188,18 +199,23 @@ const ViewSettings = () => {
       subView.display_type
     );
   }
-  if (
+  const needsInitialRelation =
     options.mode !== "filter" &&
     subView?.table_id &&
     !safeRelation &&
     !hasLegacyRelation &&
-    relationsData?.relations.length > 0
-  ) {
+    relationsData?.relations.length > 0;
+  if (needsInitialRelation) {
     safeRelation = initialRelation(relationsData.relations);
-    setProp((prop) => {
-      prop.relation = safeRelation.relationString;
-    });
   }
+  useEffect(() => {
+    if (needsInitialRelation) {
+      const rel = initialRelation(relationsData.relations);
+      setProp((prop) => {
+        prop.relation = rel.relationString;
+      });
+    }
+  }, [needsInitialRelation]);
   const helpContext = { view_name: viewname };
   if (options.tableName) helpContext.srcTable = options.tableName;
   const set_view_name = (e) => {
@@ -235,7 +251,7 @@ const ViewSettings = () => {
           } else
             window.notifyAlert({
               type: "warning",
-              text: `${target_value} has no relations`,
+              text: `${target_value} ${t("has no relations")}`,
             });
         }
       }
@@ -262,11 +278,12 @@ const ViewSettings = () => {
               <Select
                 options={viewOptions}
                 value={selectedView}
-                className="react-select view-selector"
+                className={builderSelectClassName("react-select view-selector")}
+                classNamePrefix="builder-select"
                 onChange={set_view_name}
                 onBlur={set_view_name}
                 menuPortalTarget={document.body}
-                styles={{ menuPortal: (base) => ({ ...base, zIndex: 19999 }) }}
+                styles={reactSelectStyles()}
               ></Select>
             )}
           </div>
@@ -304,7 +321,8 @@ const ViewSettings = () => {
             <Select
               options={viewOptions}
               value={selectedView}
-              className="react-select view-selector"
+              className={builderSelectClassName("react-select view-selector")}
+              classNamePrefix="builder-select"
               onChange={(e) => {
                 const target_value = e?.target?.value || e?.value;
                 setProp((prop) => {
@@ -312,7 +330,7 @@ const ViewSettings = () => {
                 });
               }}
               menuPortalTarget={document.body}
-              styles={{ menuPortal: (base) => ({ ...base, zIndex: 19999 }) }}
+              styles={reactSelectStyles()}
             ></Select>
           )}
         </div>
@@ -322,7 +340,7 @@ const ViewSettings = () => {
       theview?.viewtemplate === "Edit" &&
       targetTable ? (
         <div>
-          <label>Order field</label>
+          <label>{t("Order field")}</label>
           <select
             value={order_field}
             className="form-control form-select"
@@ -341,7 +359,7 @@ const ViewSettings = () => {
       {options.mode !== "edit" && (
         <Fragment>
           <div>
-            <label>State</label>
+            <label>{t("State")}</label>
             <select
               value={state}
               className="form-control form-select"
@@ -365,7 +383,7 @@ const ViewSettings = () => {
             fixed_state_fields &&
             fixed_state_fields.length > 0 && (
               <Fragment>
-                <h6>View state fields</h6>
+                <h6>{t("View state fields")}</h6>
                 <ConfigForm
                   fields={fixed_state_fields}
                   configuration={configuration || {}}
@@ -379,7 +397,7 @@ const ViewSettings = () => {
       {
         <Fragment>
           <label>
-            Extra state Formula
+            {t("Extra state Formula")}
             <HelpTopicLink topic="Extra state formula" {...helpContext} />
           </label>
           <SingleLineEditor
@@ -401,7 +419,7 @@ const ViewSettings = () => {
           target="_blank"
           href={`/viewedit/config/${viewname}`}
         >
-          Configure this view
+          {t("Configure this view")}
         </a>
       ) : null}
     </div>