@saltcorn/builder 0.5.6-beta.3 → 0.6.0-beta.0

package/src/components/storage.js

@@ -56,7 +56,7 @@ const allElements = [
   ToggleFilter,
 ];
 
-export const layoutToNodes = (layout, query, actions) => {
+export const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
   //console.log("layoutToNodes", JSON.stringify(layout));
   function toTag(segment, ix) {
     if (!segment) return <Empty key={ix} />;
@@ -98,6 +98,7 @@ export const layoutToNodes = (layout, query, actions) => {
           textStyle={segment.textStyle || ""}
           labelFor={segment.labelFor || ""}
           icon={segment.icon}
+          font={segment.font || ""}
         />
       );
     } else if (segment.type === "view") {
@@ -107,6 +108,7 @@ export const layoutToNodes = (layout, query, actions) => {
           view={segment.view}
           name={segment.name}
           state={segment.state}
+          configuration={segment.configuration || {}}
         />
       );
     } else if (segment.type === "action") {
@@ -119,6 +121,9 @@ export const layoutToNodes = (layout, query, actions) => {
           action_style={segment.action_style || "btn-primary"}
           action_size={segment.action_size || ""}
           action_icon={segment.action_icon || ""}
+          action_bgcol={segment.action_bgcol || ""}
+          action_bordercol={segment.action_bordercol || ""}
+          action_textcol={segment.action_textcol || ""}
           confirm={segment.confirm}
           configuration={segment.configuration || {}}
           block={segment.block || false}
@@ -131,15 +136,10 @@ export const layoutToNodes = (layout, query, actions) => {
         <Element
           key={ix}
           canvas
-          borderWidth={segment.borderWidth}
-          borderStyle={segment.borderStyle}
-          borderRadius={segment.borderRadius}
-          borderDirection={segment.borderDirection}
-          borderColor={segment.borderColor}
-          borderRadiusUnit={segment.borderRadiusUnit}
           gradStartColor={segment.gradStartColor}
           gradEndColor={segment.gradEndColor}
           gradDirection={segment.gradDirection}
+          rotate={segment.rotate || 0}
           customClass={segment.customClass}
           customCSS={segment.customCSS}
           overflow={segment.overflow}
@@ -155,7 +155,14 @@ export const layoutToNodes = (layout, query, actions) => {
           widthUnit={segment.widthUnit || "px"}
           vAlign={segment.vAlign}
           hAlign={segment.hAlign}
-          block={typeof segment.block === "undefined" ? true : segment.block}
+          display={
+            segment.display ||
+            (segment.block === true
+              ? "block"
+              : segment.block === false
+              ? "inline-block"
+              : "block")
+          }
           fullPageWidth={
             typeof segment.fullPageWidth === "undefined"
               ? false
@@ -164,6 +171,7 @@ export const layoutToNodes = (layout, query, actions) => {
           bgFileId={segment.bgFileId}
           imageSize={segment.imageSize || "contain"}
           bgType={segment.bgType || "None"}
+          style={segment.style || {}}
           bgColor={segment.bgColor || "#ffffff"}
           setTextColor={!!segment.setTextColor}
           textColor={segment.textColor || "#000000"}
@@ -231,12 +239,12 @@ export const layoutToNodes = (layout, query, actions) => {
   }
   //const node1 = query.createNode(toTag(layout));
   //actions.add(node1, );
-  go(layout, "ROOT");
+  go(layout, parent);
 };
 
 const rand_ident = () => Math.floor(Math.random() * 16777215).toString(16);
 
-export const craftToSaltcorn = (nodes) => {
+export const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
   //console.log(JSON.stringify(nodes, null, 2));
   var columns = [];
   const get_nodes = (node) => {
@@ -276,12 +284,6 @@ export const craftToSaltcorn = (nodes) => {
         return {
           contents: get_nodes(node),
           type: "container",
-          borderWidth: node.props.borderWidth,
-          borderStyle: node.props.borderStyle,
-          borderColor: node.props.borderColor,
-          borderRadius: node.props.borderRadius,
-          borderDirection: node.props.borderDirection,
-          borderRadiusUnit: node.props.borderRadiusUnit,
           customCSS: node.props.customCSS,
           customClass: node.props.customClass,
           minHeight: node.props.minHeight,
@@ -297,7 +299,7 @@ export const craftToSaltcorn = (nodes) => {
           margin: node.props.margin,
           padding: node.props.padding,
           overflow: node.props.overflow,
-          block: node.props.block || false,
+          display: node.props.display,
           fullPageWidth: node.props.fullPageWidth || false,
           bgFileId: node.props.bgFileId,
           bgType: node.props.bgType,
@@ -314,6 +316,8 @@ export const craftToSaltcorn = (nodes) => {
           gradStartColor: node.props.gradStartColor,
           gradEndColor: node.props.gradEndColor,
           gradDirection: node.props.gradDirection,
+          rotate: node.props.rotate,
+          style: node.props.style,
         };
       else return get_nodes(node);
     }
@@ -327,6 +331,7 @@ export const craftToSaltcorn = (nodes) => {
         isFormula: node.props.isFormula,
         labelFor: node.props.labelFor,
         icon: node.props.icon,
+        font: node.props.font,
       };
     }
 
@@ -357,6 +362,7 @@ export const craftToSaltcorn = (nodes) => {
         name:
           node.props.name === "not_assigned" ? rand_ident() : node.props.name,
         state: node.props.state,
+        configuration: node.props.configuration,
       };
     }
 
@@ -369,6 +375,9 @@ export const craftToSaltcorn = (nodes) => {
         action_style: node.props.action_style,
         action_size: node.props.action_size,
         action_icon: node.props.action_icon,
+        action_bgcol: node.props.action_bgcol,
+        action_bordercol: node.props.action_bordercol,
+        action_textcol: node.props.action_textcol,
         minRole: node.props.minRole,
         confirm: node.props.confirm,
         configuration: node.props.configuration,
@@ -385,13 +394,16 @@ export const craftToSaltcorn = (nodes) => {
         action_style: node.props.action_style,
         action_size: node.props.action_size,
         action_icon: node.props.action_icon,
+        action_bgcol: node.props.action_bgcol,
+        action_bordercol: node.props.action_bordercol,
+        action_textcol: node.props.action_textcol,
         minRole: node.props.minRole,
         isFormula: node.props.isFormula,
         rndid: node.props.rndid === "not_assigned" ? newid : node.props.rndid,
       };
     }
   };
-  const layout = go(nodes["ROOT"]) || { type: "blank", contents: "" };
+  const layout = go(nodes[startFrom]) || { type: "blank", contents: "" };
   /*console.log("nodes", JSON.stringify(nodes));
   console.log("cols", JSON.stringify(columns));
   console.log("layout", JSON.stringify(layout));*/