@saltcorn/builder 1.7.0-beta.1 → 1.7.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.7.0-beta.1",
+  "version": "1.7.0-beta.3",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -30,7 +30,7 @@
     "@fortawesome/free-solid-svg-icons": "5.15.2",
     "@fortawesome/react-fontawesome": "0.1.14",
     "@monaco-editor/react": "4.7.0",
-    "@saltcorn/common-code": "1.7.0-beta.1",
+    "@saltcorn/common-code": "1.7.0-beta.3",
     "@tippyjs/react": "4.2.6",
     "babel-loader": "9.2.1",
     "ckeditor4-react": "2.0.0",

package/src/components/elements/Columns.js

@@ -121,6 +121,7 @@ const Columns = ({
   colClasses,
   colStyles,
   customClass,
+  isFormula,
   breakpoints,
 }) => {
   const {
@@ -149,7 +150,9 @@ const Columns = ({
   }
   return (
     <div
-      className={`row builder-columns ${customClass || ""} ${selected ? "selected-node" : ""} ${
+      className={`row builder-columns ${
+        (!isFormula?.customClass && customClass) || ""
+      } ${selected ? "selected-node" : ""} ${
         typeof gx !== "undefined" && gx !== null ? `gx-${gx}` : ""
       } ${typeof gy !== "undefined" && gy !== null ? `gy-${gy}` : ""}`}
       ref={(dom) => connect(drag(dom))}
@@ -204,6 +207,7 @@ const ColumnsSettings = () => {
     colClasses: node.data.props.colClasses,
     colStyles: node.data.props.colStyles,
     customClass: node.data.props.customClass,
+    isFormula: node.data.props.isFormula,
     currentSettingsTab: node.data.props.currentSettingsTab,
   }));
   const {
@@ -409,6 +413,8 @@ const ColumnsSettings = () => {
               name: "customClass",
               label: t("Custom class"),
               type: "String",
+              canBeFormula: true,
+              formulaInEdit: true,
             }}
             node={node}
             setProp={setProp}
@@ -434,6 +440,7 @@ Columns.craft = {
     breakpoints: ["sm", "sm"],
     setting_col_n: 0,
     customClass: "",
+    isFormula: {},
   },
   related: {
     settings: ColumnsSettings,

package/src/components/elements/Container.js

@@ -5,7 +5,7 @@
  */
 /* globals $, validate_expression_elem */
 
-import React, { useContext, Fragment } from "react";
+import React, { useContext, Fragment, useRef } from "react";
 
 import { Element, useNode } from "@craftjs/core";
 import { Column } from "./Column";
@@ -48,6 +48,7 @@ import {
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faScroll, faRobot } from "@fortawesome/free-solid-svg-icons";
 import { BoxModelEditor } from "./BoxModelEditor";
+import { SingleLineEditor } from "./MonacoEditor";
 import previewCtx from "../preview_context";
 
 export /**
@@ -344,6 +345,7 @@ const ContainerSettings = () => {
    * @returns {function}
    */
   const setAProp = setAPropGen(setProp);
+  const showIfEditorRef = useRef(null);
   //console.log("transform", transform);
 
   return (
@@ -1033,14 +1035,15 @@ const ContainerSettings = () => {
           )}
           <tr>
             <td colSpan={2}>
-              <input
-                type="text"
-                placeholder={t("Example: x === y")}
-                className="form-control text-to-display"
+              <SingleLineEditor
+                ref={showIfEditorRef}
                 value={showIfFormula}
-                spellCheck={false}
-                onChange={setAProp("showIfFormula")}
-                onInput={(e) => validate_expression_elem($(e.target))}
+                setProp={setProp}
+                propKey="showIfFormula"
+                placeholder={t("Example: x === y")}
+                onInput={(value) =>
+                  validate_expression_elem(value, showIfEditorRef.current)
+                }
               />
               <div style={{ marginTop: "-5px" }}>
                 <small className="text-muted font-monospace">

package/src/components/elements/Tabs.js

@@ -3,14 +3,16 @@
  * @module components/elements/Tabs
  * @subcategory components / elements
  */
+/* globals validate_expression_elem */
 
-import React, { Fragment, useState, useContext, useEffect } from "react";
+import React, { Fragment, useState, useContext, useEffect, useRef } from "react";
 import useTranslation from "../../hooks/useTranslation";
 import { ntimes } from "./Columns";
 import { Column } from "./Column";
 import optionsCtx from "../context";
 import { setAPropGen, buildOptions, ConfigField } from "./utils";
 import { ArrayManager } from "./ArrayManager";
+import { SingleLineEditor } from "./MonacoEditor";
 
 import { Element, useNode } from "@craftjs/core";
 
@@ -235,6 +237,7 @@ const TabsSettings = () => {
         });
   }, [field]);
   const setAProp = setAPropGen(setProp);
+  const showIfEditorRef = useRef(null);
   const styleOptions = ["Tabs", "Pills", "Accordion"];
   if (["show", "edit"].includes(options.mode))
     styleOptions.push("Value switch");
@@ -456,19 +459,18 @@ const TabsSettings = () => {
                 </tr>
                 <tr>
                   <td colSpan={2}>
-                    <input
-                      type="text"
-                      spellCheck={false}
-                      className="form-control text-to-display"
+                    <SingleLineEditor
+                      ref={showIfEditorRef}
                       value={showif?.[use_setting_tab_n] || ""}
-                      onChange={(e) => {
-                        if (!e.target) return;
-                        const value = e.target.value;
+                      onChange={(value) => {
                         setProp((prop) => {
                           if (!prop.showif) prop.showif = [];
                           prop.showif[use_setting_tab_n] = value;
                         });
                       }}
+                      onInput={(value) =>
+                        validate_expression_elem(value, showIfEditorRef.current)
+                      }
                     />
                   </td>
                 </tr>

package/src/components/elements/utils.js

@@ -327,14 +327,23 @@ export /**
  * @param {object} props.node
  * @param {string} props.nodekey
  * @param {string} props.children
+ * @param {boolean} [props.allowInEdit] also offer the formula in edit views
  * @returns {Fragment}
  * @namespace
  * @category saltcorn-builder
  * @subcategory components / elements / utils
  */
-const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
+const OrFormula = ({
+  setProp,
+  isFormula,
+  node,
+  nodekey,
+  children,
+  allowInEdit,
+}) => {
   const { mode } = React.useContext(optionsCtx);
-  const allowFormula = mode === "show" || mode === "list";
+  const allowFormula =
+    mode === "show" || mode === "list" || (allowInEdit && mode === "edit");
   /**
    * @returns {void}
    */
@@ -1616,6 +1625,7 @@ const SettingsRow = ({
     <OrFormula
       nodekey={field.name}
       isFormula={node.isFormula}
+      allowInEdit={field.formulaInEdit}
       {...{ setProp, node }}
     >
       <ConfigField

package/src/components/storage.js

@@ -409,6 +409,7 @@ const layoutToNodes = (
             header_label={col.header_label}
             col_width={col.col_width}
             showif={col.showif}
+            cell_css_formula={col.cell_css_formula}
             col_width_units={col.col_width_units}
             contents={toTag(col.contents)}
             {...addProps}
@@ -427,6 +428,7 @@ const layoutToNodes = (
           gx={segment.gx}
           gy={segment.gy}
           customClass={segment.customClass}
+          isFormula={segment.isFormula || {}}
           vAligns={segment.vAligns}
           colClasses={segment.colClasses}
           colStyles={segment.colStyles}
@@ -469,6 +471,7 @@ const layoutToNodes = (
             gx={segment.gx}
             gy={segment.gy}
             customClass={segment.customClass}
+            isFormula={segment.isFormula || {}}
             vAligns={segment.vAligns}
             colClasses={segment.colClasses}
             colStyles={segment.colStyles}
@@ -635,6 +638,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         alignment: node.props.alignment,
         header_label: node.props.header_label,
         showif: node.props.showif,
+        cell_css_formula: node.props.cell_css_formula,
         ...customProps,
       };
       (addFields || []).forEach((f) => {
@@ -728,6 +732,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         besides: widths.map((w, ix) => go(nodes[node.linkedNodes["Col" + ix]])),
         breakpoints: node.props.breakpoints,
         customClass: node.props.customClass,
+        isFormula: node.props.isFormula,
         gx: node.props.gx != null ? +node.props.gx : undefined,
         gy: node.props.gy != null ? +node.props.gy : undefined,
         aligns: node.props.aligns,