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

package/src/components/Toolbox.js

@@ -5,6 +5,7 @@
  */
 
 import React, { useEffect, useContext, Fragment } from "react";
+import useTranslation from "../hooks/useTranslation";
 import { Element, useEditor } from "@craftjs/core";
 import { Text } from "./elements/Text";
 import { HTMLCode } from "./elements/HTMLCode";
@@ -105,18 +106,21 @@ const WrapElem = ({
  * @subcategory components / Toolbox
  * @namespace
  */
-const TextElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    icon={<TextareaT className="mb-2" />}
-    fontSize="22px"
-    title="Text"
-    bold
-    label="Text"
-  >
-    <Text text="Hello world" block={false} textStyle={""} />
-  </WrapElem>
-);
+const TextElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon={<TextareaT className="mb-2" />}
+      fontSize="22px"
+      title={t("Text")}
+      bold
+      label={t("Text")}
+    >
+      <Text text="Hello world" block={false} textStyle={""} />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -125,17 +129,20 @@ const TextElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const ColumnsElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    innerClass="mt-m1px"
-    icon="fas fa-columns"
-    title="Split into columns"
-    label="Columns"
-  >
-    <Columns contents={[]} setting_col_n={1} />
-  </WrapElem>
-);
+const ColumnsElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      innerClass="mt-m1px"
+      icon="fas fa-columns"
+      title={t("Split into columns")}
+      label={t("Columns")}
+    >
+      <Columns contents={[]} setting_col_n={1} />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -144,16 +151,19 @@ const ColumnsElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const TabsElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    icon={<SegmentedNav className="mb-2 h4" />}
-    title="Tabbed content"
-    label="Tabs"
-  >
-    <Tabs contents={[]} />
-  </WrapElem>
-);
+const TabsElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon={<SegmentedNav className="mb-2 h4" />}
+      title={t("Tabbed content")}
+      label={t("Tabs")}
+    >
+      <Tabs contents={[]} />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -162,17 +172,20 @@ const TabsElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const LineBreakElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    text="↵"
-    fontSize="26px"
-    title="Line break"
-    label="Break"
-  >
-    <LineBreak />
-  </WrapElem>
-);
+const LineBreakElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      text="↵"
+      fontSize="26px"
+      title={t("Line break")}
+      label={t("Break")}
+    >
+      <LineBreak />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -181,16 +194,19 @@ const LineBreakElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const HTMLElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="fas fa-code"
-    title="HTML code"
-    label="Code"
-  >
-    <HTMLCode text={""} />
-  </WrapElem>
-);
+const HTMLElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-code"
+      title={t("HTML code")}
+      label={t("Code")}
+    >
+      <HTMLCode text={""} />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -199,16 +215,19 @@ const HTMLElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const CardElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    title="Card"
-    icon="far fa-square"
-    label="Card"
-  >
-    <Element canvas is={Card} isFormula={{}} url=""></Element>
-  </WrapElem>
-);
+const CardElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      title={t("Card")}
+      icon="far fa-square"
+      label={t("Card")}
+    >
+      <Element canvas is={Card} isFormula={{}} url=""></Element>
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -217,16 +236,19 @@ const CardElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const ImageElem = ({ connectors, images }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="fas fa-image"
-    title="Image"
-    label="Image"
-  >
-    <Image fileid={images.length > 0 ? images[0].id : 0} />
-  </WrapElem>
-);
+const ImageElem = ({ connectors, images }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-image"
+      title={t("Image")}
+      label={t("Image")}
+    >
+      <Image fileid={images.length > 0 ? images[0].id : 0} />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -235,16 +257,19 @@ const ImageElem = ({ connectors, images }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const LinkElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="fas fa-link"
-    title="Link"
-    label="Link"
-  >
-    <Link />
-  </WrapElem>
-);
+const LinkElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-link"
+      title={t("Link")}
+      label={t("Link")}
+    >
+      <Link />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -253,21 +278,24 @@ const LinkElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const ViewElem = ({ connectors, views, isPageEdit }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="fas fa-eye"
-    title="Embed a view"
-    label="View"
-    disable={!views || views.length < (!isPageEdit ? 2 : 1)}
-  >
-    <View
-      name={"not_assigned"}
-      state={"shared"}
-      view={views?.length > 0 ? views[0].name : ""}
-    />
-  </WrapElem>
-);
+const ViewElem = ({ connectors, views, isPageEdit }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-eye"
+      title={t("Embed a view")}
+      label={t("View")}
+      disable={!views || views.length < (!isPageEdit ? 2 : 1)}
+    >
+      <View
+        name={"not_assigned"}
+        state={"shared"}
+        view={views?.length > 0 ? views[0].name : ""}
+      />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -276,16 +304,19 @@ const ViewElem = ({ connectors, views, isPageEdit }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const SearchElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="fas fa-search"
-    title="Search bar"
-    label="Search"
-  >
-    <Element canvas is={SearchBar}></Element>
-  </WrapElem>
-);
+const SearchElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-search"
+      title={t("Search bar")}
+      label={t("Search")}
+    >
+      <Element canvas is={SearchBar}></Element>
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -294,16 +325,19 @@ const SearchElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const ContainerElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    icon={<BoundingBox className="mb-2 h5" />}
-    title="Container"
-    label="Contain"
-  >
-    <Element canvas is={Container}></Element>
-  </WrapElem>
-);
+const ContainerElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon={<BoundingBox className="mb-2 h5" />}
+      title={t("Container")}
+      label={t("Contain")}
+    >
+      <Element canvas is={Container}></Element>
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -312,22 +346,25 @@ const ContainerElem = ({ connectors }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const FieldElem = ({ connectors, fields, field_view_options }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="fas fa-asterisk"
-    title="Field"
-    label="Field"
-  >
-    <Field
-      name={fields[0].name}
-      block={false}
-      textStyle={""}
-      configuration={{}}
-      fieldview={fields[0].is_fkey ? "" : field_view_options[fields[0].name][0]}
-    />
-  </WrapElem>
-);
+const FieldElem = ({ connectors, fields, field_view_options }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-asterisk"
+      title={t("Field")}
+      label={t("Field")}
+    >
+      <Field
+        name={fields[0].name}
+        block={false}
+        textStyle={""}
+        configuration={{}}
+        fieldview={fields[0].is_fkey ? "" : field_view_options[fields[0].name][0]}
+      />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -336,44 +373,53 @@ const FieldElem = ({ connectors, fields, field_view_options }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const DropDownFilterElem = ({ connectors, fields }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="far fa-caret-square-down"
-    title="Dropdown filter"
-    label="Select"
-  >
-    <DropDownFilter
-      name={fields[0].name}
-      block={false}
-      neutral_label={""}
-      full_width={false}
-    />
-  </WrapElem>
-);
+const DropDownFilterElem = ({ connectors, fields }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="far fa-caret-square-down"
+      title={t("Dropdown filter")}
+      label={t("Select")}
+    >
+      <DropDownFilter
+        name={fields[0].name}
+        block={false}
+        neutral_label={""}
+        full_width={false}
+      />
+    </WrapElem>
+  );
+};
 
-const DropMenuElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="far fa-caret-square-down"
-    title="Dropdown menu"
-    label="DropMenu"
-  >
-    <Element canvas is={DropMenu}></Element>
-  </WrapElem>
-);
+const DropMenuElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="far fa-caret-square-down"
+      title={t("Dropdown menu")}
+      label={t("DropMenu")}
+    >
+      <Element canvas is={DropMenu}></Element>
+    </WrapElem>
+  );
+};
 
-const PageElem = ({ connectors, pages }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="fa-fw far fa-file"
-    title="Embed a page"
-    label="Page"
-    disable={pages.length <= 1}
-  >
-    <Page page={pages.length > 0 ? pages[0].name : "page"} />
-  </WrapElem>
-);
+const PageElem = ({ connectors, pages }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fa-fw far fa-file"
+      title={t("Embed a page")}
+      label={t("Page")}
+      disable={pages.length <= 1}
+    >
+      <Page page={pages.length > 0 ? pages[0].name : "page"} />
+    </WrapElem>
+  );
+};
 
 /**
  * @param {object} props
@@ -383,16 +429,19 @@ const PageElem = ({ connectors, pages }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const ToggleFilterElem = ({ connectors, fields }) => (
-  <WrapElem
-    connectors={connectors}
-    icon="fas fa-toggle-on"
-    title="Toggle filter"
-    label="Toggle"
-  >
-    <ToggleFilter name={fields[0].name} value={""} label={""} block={false} />
-  </WrapElem>
-);
+const ToggleFilterElem = ({ connectors, fields }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon="fas fa-toggle-on"
+      title={t("Toggle filter")}
+      label={t("Toggle")}
+    >
+      <ToggleFilter name={fields[0].name} value={""} label={""} block={false} />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -401,22 +450,25 @@ const ToggleFilterElem = ({ connectors, fields }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const JoinFieldElem = ({ connectors, options }) => (
-  <WrapElem
-    connectors={connectors}
-    icon={<Diagram3Fill className="mb-2 h5" />}
-    title="Join field"
-    label="Join"
-    disable={options.parent_field_list.length === 0}
-  >
-    <JoinField
-      name={options.parent_field_list[0]}
-      configuration={{}}
-      textStyle={""}
-      block={false}
-    />
-  </WrapElem>
-);
+const JoinFieldElem = ({ connectors, options }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icon={<Diagram3Fill className="mb-2 h5" />}
+      title={t("Join field")}
+      label={t("Join")}
+      disable={options.parent_field_list.length === 0}
+    >
+      <JoinField
+        name={options.parent_field_list[0]}
+        configuration={{}}
+        textStyle={""}
+        block={false}
+      />
+    </WrapElem>
+  );
+};
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -425,22 +477,25 @@ const JoinFieldElem = ({ connectors, options }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const ViewLinkElem = ({ connectors, options }) => (
-  <WrapElem
-    connectors={connectors}
-    icons={["fas fa-eye", "fas fa-link"]}
-    title="Link to a view"
-    label="ViewLink"
-    disable={!options.views || options.views.length < 2}
-  >
-    <ViewLink
-      name={options.views?.length > 0 ? options.views[0].name : ""}
-      block={false}
-      minRole={100}
-      label={""}
-    />
-  </WrapElem>
-);
+const ViewLinkElem = ({ connectors, options }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      icons={["fas fa-eye", "fas fa-link"]}
+      title={t("Link to a view")}
+      label={t("ViewLink")}
+      disable={!options.views || options.views.length < 2}
+    >
+      <ViewLink
+        name={options.views?.length > 0 ? options.views[0].name : ""}
+        block={false}
+        minRole={100}
+        label={""}
+      />
+    </WrapElem>
+  );
+};
 
 /**
  * @param {object} props
@@ -450,31 +505,34 @@ const ViewLinkElem = ({ connectors, options }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const ActionElem = ({ connectors, options }) => (
-  <WrapElem
-    connectors={connectors}
-    label="Action"
-    icon="fas fa-running"
-    title="Action button"
-  >
-    <Action
-      name={
-        options.actions[0].optgroup
-          ? options.actions[0].options[0]
-          : options.actions[0]
-      }
-      action_row_variable={""}
-      block={false}
-      minRole={100}
-      confirm={false}
-      spinner={true}
-      action_label={""}
-      isFormula={{}}
-      rndid={rand_ident()}
-      configuration={{}}
-    />
-  </WrapElem>
-);
+const ActionElem = ({ connectors, options }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      label={t("Action")}
+      icon="fas fa-running"
+      title={t("Action button")}
+    >
+      <Action
+        name={
+          options.actions[0].optgroup
+            ? options.actions[0].options[0]
+            : options.actions[0]
+        }
+        action_row_variable={""}
+        block={false}
+        minRole={100}
+        confirm={false}
+        spinner={true}
+        action_label={""}
+        isFormula={{}}
+        rndid={rand_ident()}
+        configuration={{}}
+      />
+    </WrapElem>
+  );
+};
 
 /**
  * @param {object} props
@@ -484,38 +542,44 @@ const ActionElem = ({ connectors, options }) => (
  * @subcategory components / Toolbox
  * @namespace
  */
-const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => (
-  <WrapElem
-    connectors={connectors}
-    text="∑"
-    title="Aggregation"
-    label="Aggreg8"
-    bold
-    fontSize="16px"
-    disable={child_field_list.length === 0}
-  >
-    <Aggregation
-      agg_relation={child_field_list[0]}
-      agg_field={headOr(agg_field_opts[child_field_list[0]], "")?.name}
-      stat={"Count"}
-      textStyle={""}
-      aggwhere={""}
-      block={false}
-    />
-  </WrapElem>
-);
+const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      text="∑"
+      title={t("Aggregation")}
+      label={t("Aggreg8")}
+      bold
+      fontSize="16px"
+      disable={child_field_list.length === 0}
+    >
+      <Aggregation
+        agg_relation={child_field_list[0]}
+        agg_field={headOr(agg_field_opts[child_field_list[0]], "")?.name}
+        stat={"Count"}
+        textStyle={""}
+        aggwhere={""}
+        block={false}
+      />
+    </WrapElem>
+  );
+};
 
-const TableElem = ({ connectors }) => (
-  <WrapElem
-    connectors={connectors}
-    innerClass="mt-m1px"
-    icon="fas fa-table"
-    title="Table"
-    label="Table"
-  >
-    <Table contents={[[], []]} rows={2} columns={2} />
-  </WrapElem>
-);
+const TableElem = ({ connectors }) => {
+  const { t } = useTranslation();
+  return (
+    <WrapElem
+      connectors={connectors}
+      innerClass="mt-m1px"
+      icon="fas fa-table"
+      title={t("Table")}
+      label={t("Table")}
+    >
+      <Table contents={[[], []]} rows={2} columns={2} />
+    </WrapElem>
+  );
+};
 
 const chunkToolBox = (elems, expanded) => {
   const chunks = chunk(elems, expanded ? 3 : 2);