@saltcorn/builder 1.6.0-alpha.1 → 1.6.0-alpha.11

package/src/components/storage.js

@@ -26,10 +26,10 @@ import { Link } from "./elements/Link";
 import { View } from "./elements/View";
 import { Page } from "./elements/Page";
 import { SearchBar } from "./elements/SearchBar";
-import { Container } from "./elements/Container";
 import { DropDownFilter } from "./elements/DropDownFilter";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import { DropMenu } from "./elements/DropMenu";
+import { Container } from "./elements/Container";
 import { rand_ident } from "./elements/utils";
 
 /**
@@ -67,11 +67,11 @@ const allElements = [
   LineBreak,
   Aggregation,
   Card,
+  Container,
   Image,
   Link,
   View,
   SearchBar,
-  Container,
   DropDownFilter,
   Tabs,
   ToggleFilter,
@@ -100,14 +100,31 @@ const layoutToNodes = (
   options,
   index = false
 ) => {
-  //console.log("layoutToNodes", JSON.stringify(layout));
   /**
    * @param {object} segment
    * @param {string} ix
    * @returns {Element|Text|View|Action|Tabs|Columns}
    */
   function toTag(segment, ix) {
-    if (!segment) return <Empty key={ix} />;
+    if (!segment) return null;
+
+    if (
+      (segment.type === "card" || segment.type === "container") &&
+      typeof segment.contents === "string"
+    ) {
+      segment.contents = {
+        type: "blank",
+        contents: segment.contents,
+      };
+    }
+
+    if (segment.type === "container" && typeof segment.display === "undefined") {
+      segment.display = segment.block === true
+        ? "block"
+        : segment.block === false
+          ? "inline-block"
+          : "block";
+    }
 
     const MatchElement = allElements.find(
       (e) =>
@@ -123,8 +140,10 @@ const layoutToNodes = (
       const props = {};
       related.fields.forEach((f) => {
         if (f.type === "Nodes" && f.nodeID) {
-          props[f.name || f] = toTag(segment[f.segment_name || f.name || f]);
-          //).map(toTag);
+          const v = segment[f.segment_name || f.name || f];
+          if (typeof v !== "undefined") {
+            props[f.name || f] = toTag(v);
+          }
         } else {
           const v = segment[f.segment_name || f.name || f];
           props[f.name || f] = typeof v === "undefined" ? f.default : v;
@@ -212,72 +231,6 @@ const layoutToNodes = (
           isFormula={segment.isFormula || {}}
         />
       );
-    } else if (segment.type === "container") {
-      return (
-        <Element
-          key={ix}
-          custom={segment._custom || {}}
-          canvas
-          gradStartColor={segment.gradStartColor}
-          gradEndColor={segment.gradEndColor}
-          gradDirection={segment.gradDirection}
-          rotate={segment.rotate || 0}
-          animateName={segment.animateName}
-          animateDuration={segment.animateDuration}
-          animateDelay={segment.animateDelay}
-          animateInitialHide={segment.animateInitialHide}
-          customClass={segment.customClass}
-          customId={segment.customId}
-          customCSS={segment.customCSS}
-          overflow={segment.overflow}
-          margin={segment.margin || [0, 0, 0, 0]}
-          padding={segment.padding || [0, 0, 0, 0]}
-          minHeight={segment.minHeight}
-          height={segment.height}
-          width={segment.width}
-          click_action={segment.click_action}
-          url={segment.url}
-          hoverColor={segment.hoverColor}
-          minHeightUnit={segment.minHeightUnit || "px"}
-          heightUnit={segment.heightUnit || "px"}
-          widthUnit={segment.widthUnit || "px"}
-          vAlign={segment.vAlign}
-          hAlign={segment.hAlign}
-          htmlElement={segment.htmlElement || "div"}
-          display={
-            segment.display ||
-            (segment.block === true
-              ? "block"
-              : segment.block === false
-                ? "inline-block"
-                : "block")
-          }
-          fullPageWidth={
-            typeof segment.fullPageWidth === "undefined"
-              ? false
-              : segment.fullPageWidth
-          }
-          bgFileId={segment.bgFileId}
-          bgField={segment.bgField}
-          imageSize={segment.imageSize || "contain"}
-          imgResponsiveWidths={segment.imgResponsiveWidths}
-          bgType={segment.bgType || "None"}
-          style={segment.style || {}}
-          transform={segment.transform || {}}
-          bgColor={segment.bgColor || "#ffffff"}
-          setTextColor={!!segment.setTextColor}
-          textColor={segment.textColor || "#000000"}
-          isFormula={segment.isFormula || {}}
-          showIfFormula={segment.showIfFormula || ""}
-          showForRole={segment.showForRole || []}
-          minScreenWidth={segment.minScreenWidth || ""}
-          maxScreenWidth={segment.maxScreenWidth || ""}
-          show_for_owner={!!segment.show_for_owner}
-          is={Container}
-        >
-          {toTag(segment.contents)}
-        </Element>
-      );
     } else if (segment.type === "tabs") {
       let contentsArray = segment.contents.map(toTag);
       let contents;
@@ -365,7 +318,7 @@ const layoutToNodes = (
           colClasses={segment.colClasses}
           colStyles={segment.colStyles}
           aligns={segment.aligns}
-          setting_col_n={1}
+          setting_col_n={segment.setting_col_n !== undefined ? segment.setting_col_n : 0}
           contents={segment.besides.map(toTag)}
         />
       );
@@ -401,7 +354,7 @@ const layoutToNodes = (
             colClasses={segment.colClasses}
             colStyles={segment.colStyles}
             aligns={segment.aligns}
-            setting_col_n={1}
+            setting_col_n={segment.setting_col_n !== undefined ? segment.setting_col_n : 0}
             contents={segment.besides.map(toTag)}
           />
         )
@@ -412,18 +365,14 @@ const layoutToNodes = (
       if (Array.isArray(tag)) {
         tag.forEach((t) => {
           const node = query.parseReactElement(t).toNodeTree();
-          //console.log("other", node);
           actions.addNodeTree(node, parent, ix);
         });
       } else if (tag) {
         const node = query.parseReactElement(tag).toNodeTree();
-        //console.log("other", node);
         actions.addNodeTree(node, parent, ix);
       }
     }
   }
-  //const node1 = query.createNode(toTag(layout));
-  //actions.add(node1, );
   go(layout, parent, index);
 };
 
@@ -440,12 +389,12 @@ export /**
  * @namespace
  */
 const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
-  //console.log(JSON.stringify(nodes, null, 2));
   var columns = [];
   /**
    * @param {object} node
    * @returns {void|object}
    */
+
   const removeEmpty = ({ above }) => {
     const valids = above.filter(Boolean);
     if (valids.length === 1) return valids[0];
@@ -480,7 +429,6 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
       if (related.hasContents) s.contents = get_nodes(node);
       related.fields.forEach((f) => {
         if (f.type === "Nodes" && f.nodeID) {
-          //console.log("nodetype", node);
           s[f.segment_name || f.name || f] = go(
             nodes[node.linkedNodes[f.nodeID]]
           );
@@ -525,57 +473,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
       return lc;
     }
     if (node.isCanvas) {
-      if (node.displayName === Container.craft.displayName)
-        return {
-          contents: get_nodes(node),
-          type: "container",
-          customCSS: node.props.customCSS,
-          customClass: node.props.customClass,
-          customId: node.props.customId,
-          animateName: node.props.animateName,
-          animateDelay: node.props.animateDelay,
-          animateDuration: node.props.animateDuration,
-          animateInitialHide: node.props.animateInitialHide,
-          minHeight: node.props.minHeight,
-          height: node.props.height,
-          width: node.props.width,
-          url: node.props.url,
-          hoverColor: node.props.hoverColor,
-          minHeightUnit: node.props.minHeightUnit,
-          heightUnit: node.props.heightUnit,
-          widthUnit: node.props.widthUnit,
-          vAlign: node.props.vAlign,
-          hAlign: node.props.hAlign,
-          htmlElement: node.props.htmlElement,
-          margin: node.props.margin,
-          padding: node.props.padding,
-          overflow: node.props.overflow,
-          display: node.props.display,
-          fullPageWidth: node.props.fullPageWidth || false,
-          bgFileId: node.props.bgFileId,
-          bgField: node.props.bgField,
-          bgType: node.props.bgType,
-          imageSize: node.props.imageSize,
-          imgResponsiveWidths: node.props.imgResponsiveWidths,
-          bgColor: node.props.bgColor,
-          setTextColor: node.props.setTextColor,
-          textColor: node.props.textColor,
-          isFormula: node.props.isFormula,
-          showIfFormula: node.props.showIfFormula,
-          showForRole: node.props.showForRole,
-          minScreenWidth: node.props.minScreenWidth,
-          maxScreenWidth: node.props.maxScreenWidth,
-          show_for_owner: node.props.show_for_owner,
-          gradStartColor: node.props.gradStartColor,
-          gradEndColor: node.props.gradEndColor,
-          gradDirection: node.props.gradDirection,
-          click_action: node.props.click_action,
-          rotate: node.props.rotate,
-          style: node.props.style,
-          transform: node.props.transform,
-          ...customProps,
-        };
-      else return get_nodes(node);
+      return get_nodes(node);
     }
 
     if (node.displayName === Text.craft.displayName) {
@@ -624,14 +522,15 @@ 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,
-        gx: +node.props.gx,
-        gy: +node.props.gy,
+        gx: node.props.gx != null ? +node.props.gx : undefined,
+        gy: node.props.gy != null ? +node.props.gy : undefined,
         aligns: node.props.aligns,
         vAligns: node.props.vAligns,
         colClasses: node.props.colClasses,
         colStyles: node.props.colStyles,
         style: node.props.style,
         widths,
+        setting_col_n: node.props.setting_col_n,
         ...customProps,
       };
     }
@@ -747,7 +646,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
       };
     }
   };
-  const layout = go(nodes[startFrom]) || { type: "blank", contents: "" };
+  const layout = go(nodes[startFrom]) || {};
   /*console.log("nodes", JSON.stringify(nodes));
     console.log("cols", JSON.stringify(columns));
   console.log("layout", JSON.stringify(layout));*/

package/src/hooks/useTranslation.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import optionsCtx from "../components/context";
+
+const useTranslation = () => {
+  const options = useContext(optionsCtx);
+  const translations = options.translations || {};
+  const t = (phrase) => translations[phrase] || phrase;
+  return { t };
+};
+
+export default useTranslation;

package/src/index.js

@@ -49,8 +49,8 @@
  */
 
 import React from "react";
+import { createRoot } from "react-dom/client";
 import Builder from "./components/Builder";
-import ReactDOM from "react-dom";
 
 /**
  * 
@@ -60,13 +60,16 @@ import ReactDOM from "react-dom";
  * @param {string} mode 
  */
 function renderBuilder(id, options, layout, mode) {
-  ReactDOM.render(
+  const container = document.getElementById(id);
+  if (!container) return;
+  const root = container.__scRoot || createRoot(container);
+  container.__scRoot = root;
+  root.render(
     <Builder
       options={JSON.parse(decodeURIComponent(options))}
       layout={JSON.parse(decodeURIComponent(layout))}
       mode={mode}
     />,
-    document.getElementById(id)
   );
 }