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

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>

package/src/components/elements/ViewLink.js

@@ -6,6 +6,7 @@
 
 import React, { useMemo } from "react";
 import { useNode } from "@craftjs/core";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import relationsCtx from "../relations_context";
 
@@ -20,6 +21,8 @@ import {
   HelpTopicLink,
   initialRelation,
   buildLayers,
+  reactSelectStyles,
+  builderSelectClassName,
 } from "./utils";
 
 import { RelationBadges } from "./RelationBadges";
@@ -102,6 +105,7 @@ export /**
  * @namespace
  */
 const ViewLinkSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     name: node.data.props.name,
     relation: node.data.props.relation,
@@ -233,7 +237,7 @@ const ViewLinkSettings = () => {
         } else
           window.notifyAlert({
             type: "warning",
-            text: `${target_value} has no relations`,
+            text: `${target_value} ${t("has no relations")}`,
           });
       }
     }
@@ -245,24 +249,24 @@ const ViewLinkSettings = () => {
     value: name,
   }));
   const selectedView = viewOptions.find((v) => v.value === use_view_name);
+
   return (
     <div>
       <table className="w-100">
         <tbody>
           <tr>
             <td colSpan="2">
-              <label>View to link to</label>
+              <label>{t("View to link to")}</label>
               {options.inJestTestingMode ? null : (
                 <Select
                   options={viewOptions}
-                  className="react-select viewlink-selector"
+                  className={builderSelectClassName("react-select viewlink-selector")}
+                  classNamePrefix="builder-select"
                   value={selectedView}
                   onChange={set_view_name}
                   onBlur={set_view_name}
                   menuPortalTarget={document.body}
-                  styles={{
-                    menuPortal: (base) => ({ ...base, zIndex: 19999 }),
-                  }}
+                  styles={reactSelectStyles()}
                 ></Select>
               )}
             </td>
@@ -295,7 +299,7 @@ const ViewLinkSettings = () => {
           </tr>
           <tr>
             <td colSpan="2">
-              <label>Label (leave blank for default)</label>
+              <label>{t("Label (leave blank for default)")}</label>
               <OrFormula nodekey="label" {...{ setProp, isFormula, node }}>
                 <input
                   type="text"
@@ -309,7 +313,7 @@ const ViewLinkSettings = () => {
           <tr>
             <td colSpan="2">
               <label>
-                Extra state Formula
+                {t("Extra state Formula")}
                 <HelpTopicLink topic="Extra state formula" {...helpContext} />
               </label>
               <SingleLineEditor
@@ -346,7 +350,7 @@ const ViewLinkSettings = () => {
           checked={link_target_blank}
           onChange={setAProp("link_target_blank", { checked: true })}
         />
-        <label className="form-check-label">Open in new tab</label>
+        <label className="form-check-label">{t("Open in new tab")}</label>
       </div>
       <div className="form-check">
         <input
@@ -356,7 +360,7 @@ const ViewLinkSettings = () => {
           checked={inModal}
           onChange={setAProp("inModal", { checked: true })}
         />
-        <label className="form-check-label">Open in popup modal?</label>
+        <label className="form-check-label">{t("Open in popup modal?")}</label>
       </div>
       <BlockSetting block={block} setProp={setProp} />
       <TextStyleSetting textStyle={textStyle} setProp={setProp} />
@@ -370,7 +374,7 @@ const ViewLinkSettings = () => {
                   target="_blank"
                   href={`/viewedit/config/${use_view_name}`}
                 >
-                  Configure this view
+                  {t("Configure this view")}
                 </a>
               </td>
             </tr>