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

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>

package/src/components/elements/utils.js

@@ -3,8 +3,9 @@
  * @module components/elements/utils
  * @subcategory components / elements
  */
-/* globals $, _sc_globalCsrf*/
+/* globals $, _sc_globalCsrf, apply_showif*/
 import React, { Fragment, useState, useEffect } from "react";
+import useTranslation from "../../hooks/useTranslation";
 import optionsCtx from "../context";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import {
@@ -30,6 +31,163 @@ import { RelationType } from "@saltcorn/common-code";
 import Select from "react-select";
 import { MultiLineCodeEditor, SingleLineEditor } from "./MonacoEditor";
 
+const isDarkMode = () => {
+  if (typeof window !== "undefined" && window._sc_lightmode) {
+    return window._sc_lightmode === "dark";
+  }
+  if (
+    typeof window !== "undefined" &&
+    window.matchMedia &&
+    window.matchMedia("(prefers-color-scheme: dark)").matches
+  )
+    return true;
+  return false;
+};
+
+export const builderSelectClassName = (base = "") =>
+  [base, isDarkMode() ? "builder-select-dark" : ""].filter(Boolean).join(" ");
+
+export const reactSelectStyles = (overrides = {}) => {
+  const dark = isDarkMode();
+  const base = {
+    menuPortal: (baseStyles) => ({ ...baseStyles, zIndex: 19999 }),
+  };
+
+  if (!dark) {
+    // Light mode styles
+    return {
+      ...base,
+      control: (baseStyles) => ({
+        ...baseStyles,
+        backgroundColor: "#ffffff",
+        borderColor: "#dee2e6",
+        color: "#212529",
+      }),
+      valueContainer: (baseStyles) => ({
+        ...baseStyles,
+        backgroundColor: "transparent",
+      }),
+      singleValue: (baseStyles) => ({
+        ...baseStyles,
+        color: "#212529",
+      }),
+      input: (baseStyles) => ({
+        ...baseStyles,
+        color: "#212529",
+      }),
+      placeholder: (baseStyles) => ({
+        ...baseStyles,
+        color: "#6c757d",
+      }),
+      menu: (baseStyles) => ({
+        ...baseStyles,
+        backgroundColor: "#ffffff",
+        border: "1px solid #dee2e6",
+      }),
+      menuList: (baseStyles) => ({
+        ...baseStyles,
+        backgroundColor: "#ffffff",
+      }),
+      option: (baseStyles, state) => ({
+        ...baseStyles,
+        backgroundColor: state.isFocused
+          ? "#e9ecef"
+          : state.isSelected
+            ? "#0d6efd"
+            : "transparent",
+        color: state.isSelected ? "#fff" : "#212529",
+      }),
+      dropdownIndicator: (baseStyles) => ({
+        ...baseStyles,
+        color: "#6c757d",
+      }),
+      clearIndicator: (baseStyles) => ({
+        ...baseStyles,
+        color: "#6c757d",
+      }),
+      indicatorSeparator: (baseStyles) => ({
+        ...baseStyles,
+        backgroundColor: "#dee2e6",
+      }),
+      groupHeading: (baseStyles) => ({
+        ...baseStyles,
+        color: "#6c757d",
+      }),
+      menuNotice: (baseStyles) => ({
+        ...baseStyles,
+        color: "#6c757d",
+      }),
+      ...overrides,
+    };
+  }
+
+  // Dark mode styles
+  return {
+    ...base,
+    control: (baseStyles) => ({
+      ...baseStyles,
+      backgroundColor: "#212529",
+      borderColor: "#495057",
+      color: "#f8f9fa",
+    }),
+    valueContainer: (baseStyles) => ({
+      ...baseStyles,
+      backgroundColor: "transparent",
+    }),
+    singleValue: (baseStyles) => ({
+      ...baseStyles,
+      color: "#f8f9fa",
+    }),
+    input: (baseStyles) => ({
+      ...baseStyles,
+      color: "#f8f9fa",
+    }),
+    placeholder: (baseStyles) => ({
+      ...baseStyles,
+      color: "#adb5bd",
+    }),
+    menu: (baseStyles) => ({
+      ...baseStyles,
+      backgroundColor: "#212529",
+      border: "1px solid #495057",
+    }),
+    menuList: (baseStyles) => ({
+      ...baseStyles,
+      backgroundColor: "#212529",
+    }),
+    option: (baseStyles, state) => ({
+      ...baseStyles,
+      backgroundColor: state.isFocused
+        ? "#343a40"
+        : state.isSelected
+          ? "#0d6efd"
+          : "transparent",
+      color: state.isSelected ? "#fff" : "#f8f9fa",
+    }),
+    dropdownIndicator: (baseStyles) => ({
+      ...baseStyles,
+      color: "#adb5bd",
+    }),
+    clearIndicator: (baseStyles) => ({
+      ...baseStyles,
+      color: "#adb5bd",
+    }),
+    indicatorSeparator: (baseStyles) => ({
+      ...baseStyles,
+      backgroundColor: "#495057",
+    }),
+    groupHeading: (baseStyles) => ({
+      ...baseStyles,
+      color: "#adb5bd",
+    }),
+    menuNotice: (baseStyles) => ({
+      ...baseStyles,
+      color: "#adb5bd",
+    }),
+    ...overrides,
+  };
+};
+
 export const DynamicFontAwesomeIcon = ({ icon, className }) => {
   if (!icon) return null;
   return <i className={`${icon} ${className || ""}`}></i>;
@@ -59,26 +217,30 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const BlockSetting = ({ block, setProp }) => (
-  <div className="form-check">
-    <input
-      className="form-check-input"
-      name="block"
-      type="checkbox"
-      checked={block}
-      onChange={(e) => {
-        if (e.target) {
-          const target_value = e.target.checked;
-          setProp((prop) => (prop.block = target_value));
-        }
-      }}
-    />
-    <label className="form-check-label">Block display</label>
-  </div>
-);
+const BlockSetting = ({ block, setProp }) => {
+  const { t } = useTranslation();
+  return (
+    <div className="form-check">
+      <input
+        className="form-check-input"
+        name="block"
+        type="checkbox"
+        checked={block}
+        onChange={(e) => {
+          if (e.target) {
+            const target_value = e.target.checked;
+            setProp((prop) => (prop.block = target_value));
+          }
+        }}
+      />
+      <label className="form-check-label">{t("Block display")}</label>
+    </div>
+  );
+};
 
-export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
-  !textStyle ||
+export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) => {
+  const { t } = useTranslation();
+  return !textStyle ||
   !textStyleToArray(textStyle).some((ts) => ts && ts.startsWith("h")) ? (
     <BlockSetting block={block} setProp={setProp} />
   ) : (
@@ -95,9 +257,10 @@ export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
           }
         }}
       />
-      <label className="form-check-label">Inline display</label>
+      <label className="form-check-label">{t("Inline display")}</label>
     </div>
   );
+};
 
 export const HelpTopicLink = ({ topic, ...context }) => {
   const { mode } = React.useContext(optionsCtx);
@@ -288,11 +451,12 @@ export /**
  * @subcategory components / elements / utils
  */
 const MinRoleSettingRow = ({ minRole, setProp }) => {
+  const { t } = useTranslation();
   const options = React.useContext(optionsCtx);
   return (
     <tr>
       <td>
-        <label>Minimum Role</label>
+        <label>{t("Minimum role")}</label>
       </td>
       <td>
         <select
@@ -789,6 +953,7 @@ const ConfigForm = ({
   onChange,
   tableName,
   fieldName,
+  openPopup
 }) => (
   <div className="form-namespace">
     {fields.map((f, ix) => {
@@ -813,6 +978,7 @@ const ConfigForm = ({
                   table_name={tableName}
                 />
               ) : null}
+              {" "}{openPopup && <i class="fas fa-external-link-alt " onClick={openPopup}></i>}
             </label>
           ) : null}
           <ConfigField
@@ -918,7 +1084,7 @@ const ConfigField = ({
     field.options =
       typeof field.attributes?.options === "string"
         ? field.attributes?.options.split(",").map((s) => s.trim())
-        : [...field.attributes?.options];
+        : [...(field.attributes?.options ?? [])];
     if (!field.required && field.options) field.options.unshift("");
   }
   const field_type = field.input_type || field.type.name || field.type;
@@ -1098,7 +1264,8 @@ const ConfigField = ({
         return (
           <Select
             options={seloptions}
-            className="react-select selectized-field"
+            className={builderSelectClassName("react-select selectized-field")}
+            classNamePrefix="builder-select"
             value={seloptions.find((so) => value === so.value)}
             onChange={(e) =>
               (e.name && myOnChange(e.name)) ||
@@ -1112,7 +1279,7 @@ const ConfigField = ({
               (typeof e === "string" && myOnChange(e))
             }
             menuPortalTarget={document.body}
-            styles={{ menuPortal: (base) => ({ ...base, zIndex: 19999 }) }}
+            styles={reactSelectStyles()}
           ></Select>
         );
       } else
@@ -1330,6 +1497,7 @@ const SettingsRow = ({
   subProp,
   valuePostfix,
 }) => {
+  const { t } = useTranslation();
   const fullWidth = ["String", "Bool", "textarea"].includes(field.type);
   const needLabel = field.type !== "Bool";
   const inner = field.canBeFormula ? (
@@ -1470,12 +1638,13 @@ const ButtonOrLinkSettingsRows = ({
   allowRunOnLoad = false,
   faIcons = [],
 }) => {
+  const { t } = useTranslation();
   const setAProp = setAPropGen(setProp);
   const addBtnClass = (s) => (btnClass ? `${btnClass} ${s}` : s);
   return [
     <tr key="btnstyle">
       <td>
-        <label>Style</label>
+        <label>{t("Style")}</label>
       </td>
       <td>
         <select
@@ -1485,41 +1654,41 @@ const ButtonOrLinkSettingsRows = ({
         >
           {linkFirst ? (
             <option value={linkIsBlank ? "" : addBtnClass("btn-link")}>
-              Link
+              {t("Link")}
             </option>
           ) : null}
-          <option value={addBtnClass("btn-primary")}>Primary button</option>
-          <option value={addBtnClass("btn-secondary")}>Secondary button</option>
-          <option value={addBtnClass("btn-success")}>Success button</option>
-          <option value={addBtnClass("btn-danger")}>Danger button</option>
-          <option value={addBtnClass("btn-warning")}>Warning button</option>
-          <option value={addBtnClass("btn-info")}>Info button</option>
+          <option value={addBtnClass("btn-primary")}>{t("Primary button")}</option>
+          <option value={addBtnClass("btn-secondary")}>{t("Secondary button")}</option>
+          <option value={addBtnClass("btn-success")}>{t("Success button")}</option>
+          <option value={addBtnClass("btn-danger")}>{t("Danger button")}</option>
+          <option value={addBtnClass("btn-warning")}>{t("Warning button")}</option>
+          <option value={addBtnClass("btn-info")}>{t("Info button")}</option>
           <option value={addBtnClass("btn-outline-primary")}>
-            Primary outline button
+            {t("Primary outline button")}
           </option>
           <option value={addBtnClass("btn-outline-secondary")}>
-            Secondary outline button
+            {t("Secondary outline button")}
           </option>
           <option value={addBtnClass("btn-outline-success")}>
-            Success outline button
+            {t("Success outline button")}
           </option>
           <option value={addBtnClass("btn-outline-danger")}>
-            Danger outline button
+            {t("Danger outline button")}
           </option>
           <option value={addBtnClass("btn-outline-warning")}>
-            Warning outline button
+            {t("Warning outline button")}
           </option>
           <option value={addBtnClass("btn-outline-info")}>
-            Info outline button
+            {t("Info outline button")}
           </option>
           <option value={addBtnClass("btn-custom-color")}>
-            Button custom color
+            {t("Button custom color")}
           </option>
           {!linkFirst ? (
-            <option value={addBtnClass("btn-link")}>Link</option>
+            <option value={addBtnClass("btn-link")}>{t("Link")}</option>
           ) : null}
           {!linkFirst && allowRunOnLoad ? (
-            <option value="on_page_load">Run on Page Load</option>
+            <option value="on_page_load">{t("Run on Page Load")}</option>
           ) : null}
         </select>
       </td>
@@ -1527,7 +1696,7 @@ const ButtonOrLinkSettingsRows = ({
     values[keyPrefix + "style"] !== "on_page_load" ? (
       <tr key="btnsz">
         <td>
-          <label>Size</label>
+          <label>{t("Size")}</label>
         </td>
         <td>
           <select
@@ -1535,12 +1704,12 @@ const ButtonOrLinkSettingsRows = ({
             value={values[keyPrefix + "size"]}
             onChange={setAProp(keyPrefix + "size")}
           >
-            <option value="">Standard</option>
-            <option value="btn-lg">Large</option>
-            <option value="btn-sm">Small</option>
-            <option value="btn-sm btn-xs">Extra Small</option>
-            <option value="btn-block">Block</option>
-            <option value="btn-block btn-lg">Large block</option>
+            <option value="">{t("Standard")}</option>
+            <option value="btn-lg">{t("Large")}</option>
+            <option value="btn-sm">{t("Small")}</option>
+            <option value="btn-sm btn-xs">{t("Extra Small")}</option>
+            <option value="btn-block">{t("Block")}</option>
+            <option value="btn-block btn-lg">{t("Large block")}</option>
           </select>
         </td>
       </tr>
@@ -1548,7 +1717,7 @@ const ButtonOrLinkSettingsRows = ({
     values[keyPrefix + "style"] !== "on_page_load" ? (
       <tr key="btnicon">
         <td>
-          <label>Icon</label>
+          <label>{t("Icon")}</label>
         </td>
         <td>
           <FontIconPicker
@@ -1566,7 +1735,7 @@ const ButtonOrLinkSettingsRows = ({
       ? [
           <tr key="btnbgcol">
             <td>
-              <label>Background</label>
+              <label>{t("Background")}</label>
             </td>
             <td>
               <input
@@ -1579,7 +1748,7 @@ const ButtonOrLinkSettingsRows = ({
           </tr>,
           <tr key="btnbdcol">
             <td>
-              <label>Border</label>
+              <label>{t("Border")}</label>
             </td>
             <td>
               <input
@@ -1592,7 +1761,7 @@ const ButtonOrLinkSettingsRows = ({
           </tr>,
           <tr key="btntxtcol">
             <td>
-              <label>Text</label>
+              <label>{t("Text")}</label>
             </td>
             <td>
               <input
@@ -1737,8 +1906,8 @@ export const buildBootstrapOptions = (values) => {
 
 export const arrayChunks = (xs, n) => {
   const arrayOfArrays = [];
-  for (var i = 0; i < bigarray.length; i += n) {
-    arrayOfArrays.push(bigarray.slice(i, i + n));
+  for (var i = 0; i < xs.length; i += n) {
+    arrayOfArrays.push(xs.slice(i, i + n));
   }
   return arrayOfArrays;
 };