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

package/src/components/elements/DropDownFilter.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, TextStyleRow, setAPropGen } from "./utils";
 import { SingleLineEditor } from "./MonacoEditor";
@@ -49,6 +50,7 @@ export /**
  * @subcategory components
  */
 const DropDownFilterSettings = () => {
+  const { t } = useTranslation();
   const {
     actions: { setProp },
     name,
@@ -80,7 +82,7 @@ const DropDownFilterSettings = () => {
       <tbody>
         <tr>
           <td>
-            <label>Field</label>
+            <label>{t("Field")}</label>
           </td>
           <td>
             <select
@@ -103,7 +105,7 @@ const DropDownFilterSettings = () => {
         </tr>
         <tr>
           <td>
-            <label>Neutral label</label>
+            <label>{t("Neutral label")}</label>
           </td>
           <td>
             <input
@@ -115,7 +117,7 @@ const DropDownFilterSettings = () => {
         </tr>
         <tr>
           <td>
-            <label>Where</label>
+            <label>{t("Where")}</label>
           </td>
           <td>
             <SingleLineEditor
@@ -127,7 +129,7 @@ const DropDownFilterSettings = () => {
         </tr>
         <tr>
           <td>
-            <label>Label formula</label>
+            <label>{t("Label formula")}</label>
           </td>
           <td>
             <input
@@ -157,7 +159,7 @@ const DropDownFilterSettings = () => {
                 checked={full_width}
                 onChange={setAProp("full_width", { checked: true })}
               />
-              <label className="form-check-label">Full width</label>
+              <label className="form-check-label">{t("Full width")}</label>
             </div>
           </td>
         </tr>
@@ -173,7 +175,7 @@ const DropDownFilterSettings = () => {
                   checked={all_options}
                   onChange={setAProp("all_options", { checked: true })}
                 />
-                <label className="form-check-label">All options</label>
+                <label className="form-check-label">{t("All options")}</label>
               </div>
             </td>
           </tr>
@@ -190,7 +192,7 @@ const DropDownFilterSettings = () => {
                   checked={apply_select2}
                   onChange={setAProp("apply_select2", { checked: true })}
                 />
-                <label className="form-check-label">Apply select2</label>
+                <label className="form-check-label">{t("Apply select2")}</label>
               </div>
             </td>
           </tr>

package/src/components/elements/DropMenu.js

@@ -4,7 +4,8 @@
  * @subcategory components / elements
  */
 
-import React, { Fragment, useState, useContext } from "react";
+import React, { Fragment, useState, useContext, useEffect } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import { Element, useNode } from "@craftjs/core";
 import { Column } from "./Column";
@@ -32,7 +33,7 @@ export /**
  * @subcategory components
  */
 const DropMenu = ({
-  children,
+  contents,
   action_style,
   action_size,
   action_icon,
@@ -43,12 +44,12 @@ const DropMenu = ({
   label,
   menu_direction,
 }) => {
+  const { t } = useTranslation();
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
   const [showDropdown, setDropdown] = useState(false);
-  //const [dropWidth, setDropWidth] = useState(200);
   return (
     <div
       className={`${selected ? "selected-node" : ""} ${block ? "d-block" : "d-inline"}`}
@@ -80,7 +81,9 @@ const DropMenu = ({
           showDropdown ? "show" : ""
         } ${menu_direction === "end" ? "dropdown-menu-end" : ""}`}
       >
-        <div className="canvas d-flex flex-column">{children}</div>
+        <Element canvas id="dropmenu-contents" is={Column}>
+          {contents}
+        </Element>
       </div>
     </div>
   );
@@ -93,6 +96,7 @@ export /**
  * @subcategory components
  */
 const DropMenuSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     label: node.data.props.label,
     block: node.data.props.block,
@@ -117,7 +121,7 @@ const DropMenuSettings = () => {
       <tbody>
         <SettingsRow
           field={{
-            label: "Label",
+            label: t("Label"),
             name: "label",
             type: "String",
           }}
@@ -138,18 +142,18 @@ const DropMenuSettings = () => {
         </tr>
         <SettingsRow
           field={{
-            label: "Drop direction",
+            label: t("Drop direction"),
             name: "menu_direction",
             type: "btn_select",
             options: [
               {
                 value: "end",
-                title: "End",
+                title: t("End"),
                 label: <FontAwesomeIcon icon={faCaretSquareLeft} />,
               },
               {
                 value: "start",
-                title: "Start",
+                title: t("Start"),
                 label: <FontAwesomeIcon icon={faCaretSquareRight} />,
               },
             ],
@@ -174,8 +178,13 @@ DropMenu.craft = {
   related: {
     settings: DropMenuSettings,
     segment_type: "dropdown_menu",
-    hasContents: true,
     fields: [
+      {
+        label: "Contents",
+        name: "contents",
+        type: "Nodes",
+        nodeID: "dropmenu-contents",
+      },
       "label",
       "block",
       "action_style",

package/src/components/elements/Field.js

@@ -8,6 +8,7 @@ import React, { useContext, useEffect, useState, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
+import useTranslation from "../../hooks/useTranslation";
 import {
   blockProps,
   BlockOrInlineSetting,
@@ -87,6 +88,7 @@ export /**
  * @subcategory components
  */
 const FieldSettings = () => {
+  const { t } = useTranslation();
   const {
     actions: { setProp },
     name,
@@ -153,14 +155,14 @@ const FieldSettings = () => {
     <Fragment>
       <i>
         <small>
-          Previews shown in canvas are indicative based on random rows
+          {t("Previews shown in canvas are indicative based on random rows")}
         </small>
       </i>
       <table className="w-100">
         <tbody>
           <tr>
             <td>
-              <label>Field</label>
+              <label>{t("Field")}</label>
             </td>
             <td>
               <select
@@ -192,7 +194,7 @@ const FieldSettings = () => {
             <tr>
               <td>
                 <label>
-                  Field view
+                  {t("Field view")}
                   <HelpTopicLink
                     topic="Field views"
                     field_name={name}
@@ -241,7 +243,7 @@ const FieldSettings = () => {
                       }
                     }}
                   />
-                  <label className="form-check-label">Click to edit?</label>
+                  <label className="form-check-label">{t("Click to edit?")}</label>
                 </div>
               </td>
             </tr>
@@ -277,7 +279,7 @@ const FieldSettings = () => {
       ) : null}
       {options.mode === "edit" && options.triggerActions ? (
         <Fragment>
-          <label>On change action</label>
+          <label>{t("On change action")}</label>
           <select
             value={onchange_action}
             className="on-change-action form-control form-select"
@@ -289,7 +291,7 @@ const FieldSettings = () => {
               });
             }}
           >
-            <option value="">None</option>
+            <option value="">{t("None")}</option>
             {options.triggerActions.map((f, ix) => (
               <option key={ix} value={f}>
                 {f}
@@ -302,7 +304,7 @@ const FieldSettings = () => {
               target="_blank"
               href={`/actions/configure/${onchange_action}`}
             >
-              Configure this action
+              {t("Configure this action")}
             </a>
           ) : null}
         </Fragment>

package/src/components/elements/HTMLCode.js

@@ -5,6 +5,7 @@
  */
 
 import React, { Fragment, useContext } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import { useNode } from "@craftjs/core";
 import {
   blockProps,
@@ -27,12 +28,13 @@ const HTMLCode = ({ text }) => {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
+  const { t } = useTranslation();
   return (
     <span
       className={`is-html-block ${selected ? "selected-node" : ""}`}
       ref={(dom) => connect(drag(dom))}
     >
-      <div style={{ fontSize: "8px" }}>HTML</div>
+      <div style={{ fontSize: "8px" }}>{t("HTML")}</div>
       <div dangerouslySetInnerHTML={{ __html: text }}></div>
     </span>
   );

package/src/components/elements/Image.js

@@ -8,6 +8,7 @@ import React, { useContext, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
 import previewCtx from "../preview_context";
+import useTranslation from "../../hooks/useTranslation";
 import { BoxModelEditor } from "./BoxModelEditor";
 
 import {
@@ -38,6 +39,7 @@ const Image = ({ fileid, block, srctype, url, alt, style, customClass }) => {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
+  const { t } = useTranslation();
   const theurl =
     srctype === "File"
       ? /^(?:[a-z]+:)?\/\//i.test(fileid)
@@ -53,7 +55,7 @@ const Image = ({ fileid, block, srctype, url, alt, style, customClass }) => {
       ref={(dom) => connect(drag(dom))}
       style={reactifyStyles(style || {})}
     >
-      No images Available
+      {t("No images Available")}
     </span>
   ) : (
     <img
@@ -76,6 +78,7 @@ export /**
  * @subcategory components
  */
 const ImageSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     fileid: node.data.props.fileid,
     field: node.data.props.field,
@@ -147,23 +150,23 @@ const ImageSettings = () => {
       value={currentSettingsTab}
       onChange={(ix) => setProp((prop) => (prop.currentSettingsTab = ix))}
     >
-      <table accordiontitle="Select image">
+      <table accordiontitle={t("Select image")}>
         <tbody>
           <tr>
             <td colSpan="2">
               <i>
-                <small>Preview shown in canvas is indicative</small>
+                <small>{t("Preview shown in canvas is indicative")}</small>
               </i>
             </td>
           </tr>
           <tr>
             <td>
-              <label>Source</label>
+              <label>{t("Source")}</label>
             </td>
             <td>
               <select
                 value={srctype}
-                className="form-control form-select"
+                 className="form-control form-select"
                 onChange={setAProp("srctype")}
               >
                 {buildOptions(sourceOpts)}
@@ -173,7 +176,7 @@ const ImageSettings = () => {
           {srctype === "File" && (
             <tr>
               <td>
-                <label>File</label>
+                <label>{t("File")}</label>
               </td>
               <td>
                 <select
@@ -199,7 +202,7 @@ const ImageSettings = () => {
           {srctype === "URL" && (
             <tr>
               <td>
-                <label>URL</label>
+                <label>{t("URL")}</label>
               </td>
               <td>
                 <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
@@ -217,7 +220,7 @@ const ImageSettings = () => {
           {srctype === "Upload" && (
             <tr>
               <td>
-                <label>File</label>
+                <label>{t("File")}</label>
               </td>
               <td>
                 <input
@@ -232,7 +235,7 @@ const ImageSettings = () => {
           {srctype === "Field" && (
             <tr>
               <td>
-                <label>Field</label>
+                <label>{t("Field")}</label>
               </td>
               <td>
                 <select
@@ -260,7 +263,7 @@ const ImageSettings = () => {
           {srctype !== "Upload" && (
             <tr>
               <td>
-                <label>Alt text</label>
+                <label>{t("Alt text")}</label>
               </td>
               <td>
                 <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
@@ -277,7 +280,7 @@ const ImageSettings = () => {
           {srctype !== "Upload" && (
             <tr>
               <td style={{ verticalAlign: "top" }}>
-                <label>Responsive widths</label>
+                <label>{t("Responsive widths")}</label>
               </td>
 
               <td>
@@ -290,7 +293,9 @@ const ImageSettings = () => {
                 />
                 <small>
                   <i>
-                    List of widths to serve resized images, e.g. 300, 400, 600
+                    {t(
+                      "List of widths to serve resized images, e.g. 300, 400, 600"
+                    )}
                   </i>
                 </small>
               </td>
@@ -299,7 +304,7 @@ const ImageSettings = () => {
           <SettingsRow
             field={{
               name: "object-fit",
-              label: "Object fit",
+              label: t("Object fit"),
               type: "select",
               options: ["none", "fill", "contain", "cover", "scale-down"],
             }}
@@ -308,7 +313,7 @@ const ImageSettings = () => {
             isStyle={true}
           />
           <tr>
-            <td>Class</td>
+            <td>{t("Class")}</td>
             <td>
               <input
                 type="text"
@@ -328,7 +333,7 @@ const ImageSettings = () => {
           )}
         </tbody>
       </table>
-      <div accordiontitle="Box" className="w-100">
+      <div accordiontitle={t("Box")} className="w-100">
         <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
       </div>
     </Accordion>

package/src/components/elements/JoinField.js

@@ -5,7 +5,8 @@
  */
 /* eslint-env jquery */
 
-import React, { useContext, useEffect, useState, Fragment } 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 {
@@ -66,7 +67,7 @@ const JoinField = ({ name, block, fieldview, textStyle }) => {
   );
 };
 
-const buildFieldsMenu = (options, setProp, refetchPreview) => {
+const buildFieldsMenu = (options, setProp, refetchPreview, t) => {
   const { join_field_options } = options.join_field_picker_data;
   return (
     <div className="dropdown">
@@ -81,7 +82,7 @@ const buildFieldsMenu = (options, setProp, refetchPreview) => {
         className="btn btn-outline-primary dropdown-toggle"
         aria-expanded="false"
       >
-        Fields
+        {t("Fields")}
       </button>
       <div className="dropdown-menu">
         <ul className="ps-0 mb-0">
@@ -249,7 +250,8 @@ const buildRelationsMenu = (
   options,
   setProp,
   refetchPreview,
-  hasFieldsPicker
+  hasFieldsPicker,
+  t
 ) => {
   const { relation_options } = options.join_field_picker_data;
   return (
@@ -265,7 +267,7 @@ const buildRelationsMenu = (
         className="btn btn-outline-primary dropdown-toggle"
         aria-expanded="false"
       >
-        Relations
+        {t("Relations")}
       </button>
       <div className="dropdown-menu">
         <ul className="ps-0 mb-0">
@@ -369,6 +371,7 @@ export /**
  * @subcategory components
  */
 const JoinFieldSettings = () => {
+  const { t } = useTranslation();
   const {
     actions: { setProp },
     name,
@@ -432,14 +435,14 @@ const JoinFieldSettings = () => {
     <Fragment>
       <i>
         <small>
-          Previews shown in canvas are indicative based on random rows
+          {t("Previews shown in canvas are indicative based on random rows")}
         </small>
       </i>
       <table className="w-100">
         <tbody>
           <tr>
             <td>
-              <label>Join field</label>
+              <label>{t("Join field")}</label>
             </td>
             <td>
               <input
@@ -459,13 +462,14 @@ const JoinFieldSettings = () => {
             <td colSpan="2">
               <div className="d-flex">
                 {showFieldsPicker &&
-                  buildFieldsMenu(options, setProp, refetchPreview)}
+                  buildFieldsMenu(options, setProp, refetchPreview, t)}
                 {showRelationsPicker &&
                   buildRelationsMenu(
                     options,
                     setProp,
                     refetchPreview,
-                    showFieldsPicker
+                    showFieldsPicker,
+                    t
                   )}
               </div>
             </td>
@@ -473,7 +477,7 @@ const JoinFieldSettings = () => {
           {fvs && (
             <tr>
               <td>
-                <label>Field view</label>
+                <label>{t("Field view")}</label>
               </td>
 
               <td>
@@ -513,7 +517,7 @@ const JoinFieldSettings = () => {
                       }
                     }}
                   />
-                  <label className="form-check-label">Click to edit?</label>
+                  <label className="form-check-label">{t("Click to edit?")}</label>
                 </div>
               </td>
             </tr>

package/src/components/elements/Link.js

@@ -6,6 +6,7 @@
 
 import React, { Fragment, useContext } from "react";
 import { useNode } from "@craftjs/core";
+import useTranslation from "../../hooks/useTranslation";
 import {
   blockProps,
   BlockSetting,
@@ -94,6 +95,7 @@ export /**
  * @subcategory components
  */
 const LinkSettings = () => {
+  const { t } = useTranslation();
   const node = useNode((node) => ({
     text: node.data.props.text,
     url: node.data.props.url,
@@ -137,7 +139,7 @@ const LinkSettings = () => {
         <tbody>
           <tr>
             <td>
-              <label>Text to display</label>
+              <label>{t("Text to display")}</label>
             </td>
             <td>
               <OrFormula nodekey="text" {...{ setProp, isFormula, node }}>
@@ -152,7 +154,7 @@ const LinkSettings = () => {
           </tr>
           <tr>
             <td>
-              <label>Link source</label>
+              <label>{t("Link source")}</label>
             </td>
             <td>
               <select
@@ -169,14 +171,14 @@ const LinkSettings = () => {
                   });
                 }}
               >
-                <option>URL</option>
-                {(options.pages || []).length > 0 && <option>Page</option>}
+                <option>{t("URL")}</option>
+                {(options.pages || []).length > 0 && <option>{t("Page")}</option>}
                 {(options.views || []).length > 0 &&
                   ["page", "filter"].includes(options.mode) && (
-                    <option>View</option>
+                    <option>{t("View")}</option>
                   )}
                 {(options.page_groups || []).length > 0 && (
-                  <option>Page Group</option>
+                  <option>{t("Page Group")}</option>
                 )}
               </select>
             </td>
@@ -184,7 +186,7 @@ const LinkSettings = () => {
           {link_src === "URL" && (
             <tr>
               <td>
-                <label>URL</label>
+                <label>{t("URL")}</label>
               </td>
               <td>
                 <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
@@ -202,7 +204,7 @@ const LinkSettings = () => {
           {link_src === "Page" && (
             <tr>
               <td>
-                <label>Page</label>
+                <label>{t("Page")}</label>
               </td>
               <td>
                 <select
@@ -223,7 +225,7 @@ const LinkSettings = () => {
           {link_src === "Page Group" && (
             <tr>
               <td>
-                <label>Page Group</label>
+                <label>{t("Page Group")}</label>
               </td>
               <td>
                 <select
@@ -244,7 +246,7 @@ const LinkSettings = () => {
           {link_src === "View" && (
             <tr>
               <td>
-                <label>View</label>
+                <label>{t("View")}</label>
               </td>
               <td>
                 <select
@@ -265,7 +267,7 @@ const LinkSettings = () => {
           {link_src === "View" && (
             <tr>
               <td>
-                <label>State Formula</label>
+                <label>{t("State Formula")}</label>
               </td>
               <td>
                 <input
@@ -299,7 +301,7 @@ const LinkSettings = () => {
           checked={nofollow}
           onChange={setAProp("nofollow", { checked: true })}
         />
-        <label className="form-check-label">Nofollow</label>
+        <label className="form-check-label">{t("Nofollow")}</label>
       </div>
       <div className="form-check">
         <input
@@ -309,7 +311,7 @@ const LinkSettings = () => {
           checked={target_blank}
           onChange={setAProp("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
@@ -319,7 +321,7 @@ const LinkSettings = () => {
           checked={in_modal}
           onChange={setAProp("in_modal", { checked: true })}
         />
-        <label className="form-check-label">Open in popup modal?</label>
+        <label className="form-check-label">{t("Open in popup modal?")}</label>
       </div>
 
       {["filter", "page"].includes(options.mode) && (
@@ -331,7 +333,7 @@ const LinkSettings = () => {
             checked={transfer_state}
             onChange={setAProp("transfer_state", { checked: true })}
           />
-          <label className="form-check-label">Transfer state</label>
+          <label className="form-check-label">{t("Transfer state")}</label>
         </div>
       )}
 
@@ -354,7 +356,7 @@ const LinkSettings = () => {
                         : ""
                   }
                 >
-                  Configure this {link_src}
+                  {t("Configure this")} {link_src}
                 </a>
               </td>
             </tr>