@saltcorn/builder 1.1.1-beta.2 → 1.1.1-beta.3

package/src/components/elements/ArrayManager.js

@@ -0,0 +1,244 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/utils
+ * @subcategory components / elements
+ */
+/* globals $, _sc_globalCsrf*/
+import React, { Fragment, useState, useEffect } from "react";
+import optionsCtx from "../context";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faChevronDown,
+  faChevronRight,
+  faInfoCircle,
+  faQuestionCircle,
+  faBold,
+  faItalic,
+  faFont,
+  faPlus,
+  faCommentSlash,
+  faUnderline,
+  faAngleDoubleLeft,
+  faAngleDoubleRight,
+  faTerminal,
+  faTrashAlt,
+} from "@fortawesome/free-solid-svg-icons";
+import { useNode, Element, useEditor } from "@craftjs/core";
+import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
+import Tippy from "@tippyjs/react";
+import { RelationType } from "@saltcorn/common-code";
+import Select from "react-select";
+import { recursivelyCloneToElems } from "./Clone";
+import { ConfigField } from "./utils";
+import { Empty } from "./Empty";
+import { Column } from "./Column";
+import storageCtx from "../storage_context";
+
+export const DynamicFontAwesomeIcon = ({ icon, className }) => {
+  if (!icon) return null;
+  return <i className={`${icon} ${className || ""}`}></i>;
+};
+
+const ntimes = (n, f) => {
+  var res = [];
+  for (let index = 0; index < n; index++) {
+    res.push(f(index));
+  }
+  return res;
+};
+
+export const ArrayManager = ({
+  node,
+  setProp,
+  countProp,
+  currentProp,
+  managedArrays,
+  manageContents,
+  initialAddProps,
+}) => {
+  const { actions, query, connectors } = useEditor((state, query) => {
+    return {};
+  });
+  const { craftToSaltcorn, layoutToNodes } = React.useContext(storageCtx);
+  const options = React.useContext(optionsCtx);
+
+  const fullNode = query.node(node.id).get();
+  const parentId = fullNode.data.parent;
+  const siblings = query.node(parentId).childNodes();
+  const sibIx = siblings.findIndex((sib) => sib === node.id);
+
+  const deleteElem = () => {
+    if (manageContents) {
+      const rmIx = node[currentProp];
+      const { layout } = craftToSaltcorn(
+        JSON.parse(query.serialize()),
+        node.id,
+        options
+      );
+      layout.contents.splice(rmIx, 1);
+
+      managedArrays.forEach((arrNm) => {
+        layout[arrNm].splice(rmIx, 1);
+      });
+      layout[countProp] = node[countProp] - 1;
+      layout[currentProp] = node[currentProp] - 1;
+      actions.delete(node.id);
+      layoutToNodes(layout, query, actions, parentId, options, sibIx);
+    } else {
+      setProp((prop) => {
+        const rmIx = prop[currentProp];
+
+        managedArrays.forEach((arrNm) => {
+          if (arrNm.includes(".")) {
+            const vars = arrNm.split(".");
+            let arr = prop;
+            for (const tvar of vars) arr = arr[tvar];
+            if (arr) arr.splice(rmIx, 1);
+          } else if (prop[arrNm]) prop[arrNm].splice(rmIx, 1);
+        });
+        prop[countProp] = node[countProp] - 1;
+        prop[currentProp] = node[currentProp] - 1;
+      });
+    }
+  };
+
+  const move = (delta) => {
+    const swapElements = (arr, i, j) => {
+      const tmp = arr[i];
+      arr[i] = arr[j];
+      arr[j] = tmp;
+    };
+    if (manageContents) {
+      const curIx = node[currentProp];
+
+      const { layout } = craftToSaltcorn(
+        JSON.parse(query.serialize()),
+        node.id,
+        options
+      );
+
+      swapElements(layout.contents, curIx, curIx + delta);
+
+      managedArrays.forEach((arrNm) => {
+        if (arrNm.includes(".")) {
+          let arr = layout;
+          for (const tvar of arrNm.split(".")) arr = arr[tvar];
+          if (arr) swapElements(arr, curIx, curIx + delta);
+        } else if (layout[arrNm])
+          swapElements(layout[arrNm], curIx, curIx + delta);
+      });
+      layout[currentProp] = node[currentProp] + delta;
+      actions.delete(node.id);
+      layoutToNodes(layout, query, actions, parentId, options, sibIx);
+    } else
+      setProp((prop) => {
+        const curIx = prop[currentProp];
+        if (curIx + delta < 0 || curIx + delta >= prop[countProp]) return;
+
+        managedArrays.forEach((arrNm) => {
+          if (arrNm.includes(".")) {
+            let arr = prop;
+            for (const tvar of arrNm.split(".")) arr = arr[tvar];
+            if (arr) swapElements(arr, curIx, curIx + delta);
+          } else if (prop[arrNm])
+            swapElements(prop[arrNm], curIx, curIx + delta);
+        });
+        prop[currentProp] = prop[currentProp] + delta;
+      });
+  };
+  const add = () => {
+    if (manageContents) {
+      const { layout } = craftToSaltcorn(
+        JSON.parse(query.serialize()),
+        node.id,
+        options
+      );
+
+      layout.contents.push(null);
+      managedArrays.forEach((arrNm) => {
+        if (initialAddProps?.[arrNm])
+          layout[arrNm][node[countProp]] = initialAddProps?.[arrNm];
+      });
+      layout[currentProp] = node[countProp];
+      layout[countProp] = node[countProp] + 1;
+
+      actions.delete(node.id);
+      layoutToNodes(layout, query, actions, parentId, options, sibIx);
+    } else
+      setProp((prop) => {
+        prop[countProp] = node[countProp] + 1;
+        prop[currentProp] = node[countProp];
+        managedArrays.forEach((arrNm) => {
+          if (initialAddProps?.[arrNm])
+            if (arrNm.includes(".")) {
+              let arr = prop;
+              for (const tvar of arrNm.split(".")) arr = arr[tvar];
+              if (arr) arr[node[countProp]] = initialAddProps?.[arrNm];
+            } else if (prop[arrNm])
+              prop[arrNm][node[countProp]] = initialAddProps?.[arrNm];
+        });
+      });
+  };
+
+  //console.log("arrayman", { node });
+
+  return (
+    <Fragment>
+      <ConfigField
+        field={{
+          name: currentProp,
+          label: "Number of things",
+          type: "btn_select",
+          options: ntimes(node[countProp], (i) => ({
+            value: i,
+            title: `${i + 1}`,
+            label: `${i + 1}`,
+          })),
+        }}
+        node={node}
+        setProp={setProp}
+        props={node}
+      ></ConfigField>
+      <div className="btn-group w-100" role="group">
+        <button
+          title="Move left"
+          type="button"
+          style={{ width: "25%" }}
+          className="btn btn-sm"
+          onClick={() => move(-1)}
+          disabled={node[currentProp] === 0}
+        >
+          <FontAwesomeIcon icon={faAngleDoubleLeft} />
+        </button>
+        <button
+          title="Add"
+          type="button"
+          style={{ width: "25%" }}
+          className="btn btn-sm"
+          onClick={() => add()}
+        >
+          <FontAwesomeIcon icon={faPlus} />
+        </button>
+        <button
+          title="Delete"
+          type="button"
+          style={{ width: "25%" }}
+          className="btn btn-sm"
+          onClick={() => deleteElem()}
+        >
+          <FontAwesomeIcon icon={faTrashAlt} />
+        </button>
+        <button
+          title="Move right"
+          type="button"
+          disabled={node[currentProp] === node[countProp] - 1}
+          style={{ width: "25%" }}
+          className="btn btn-sm"
+          onClick={() => move(1)}
+        >
+          <FontAwesomeIcon icon={faAngleDoubleRight} />
+        </button>
+      </div>
+    </Fragment>
+  );
+};

package/src/components/elements/Clone.js

@@ -1,9 +1,11 @@
 import React, { Fragment, useState, useEffect } from "react";
 import { ListColumn } from "./ListColumn";
 import { Columns, ntimes } from "./Columns";
-import { rand_ident } from "./utils";
 import { Element } from "@craftjs/core";
 
+const rand_ident = () =>
+  Math.floor(Math.random() * 16777215).toString(16);
+
 export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
   const { data } = query.node(nodeId).get();
   const { type, props, nodes } = data;

package/src/components/elements/Container.js

@@ -98,6 +98,7 @@ const Container = ({
   setTextColor,
   textColor,
   customClass,
+  customId,
   customCSS,
   margin,
   padding,
@@ -119,6 +120,7 @@ const Container = ({
     htmlElement,
     {
       ref: (dom) => connect(drag(dom)),
+      id: customId || "",
       className: `${customClass || ""} kontainer canvas text-${hAlign} ${
         vAlign === "middle" ? "d-flex align-items-center" : ""
       } ${
@@ -202,6 +204,7 @@ const ContainerSettings = () => {
     showForRole: node.data.props.showForRole,
     textColor: node.data.props.textColor,
     customClass: node.data.props.customClass,
+    customId: node.data.props.customId,
     customCSS: node.data.props.customCSS,
     minScreenWidth: node.data.props.minScreenWidth,
     maxScreenWidth: node.data.props.maxScreenWidth,
@@ -220,6 +223,10 @@ const ContainerSettings = () => {
     transform: node.data.props.transform,
     imgResponsiveWidths: node.data.props.imgResponsiveWidths,
     click_action: node.data.props.click_action,
+    animateName: node.data.props.animateName,
+    animateDelay: node.data.props.animateDelay,
+    animateDuration: node.data.props.animateDuration,
+    animateInitialHide: node.data.props.animateInitialHide,
   }));
   const {
     actions: { setProp },
@@ -234,6 +241,7 @@ const ContainerSettings = () => {
     isFormula,
     showForRole,
     customClass,
+    customId,
     customCSS,
     minScreenWidth,
     maxScreenWidth,
@@ -848,6 +856,39 @@ const ContainerSettings = () => {
           )}
         </tbody>
       </table>
+      <table className="w-100" accordiontitle="Animate">
+        <tbody>
+          <SettingsRow
+            field={{
+              name: "animateName",
+              label: "Animation",
+              type: "select",
+              options: ["None", ...options.keyframes || []],
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{
+              name: "animateDuration",
+              label: "Duration (s)",
+              type: "Float",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{ name: "animateDelay", label: "Delay (s)", type: "Float" }}
+            node={node}
+            setProp={setProp}
+          />
+           <SettingsRow
+            field={{ name: "animateInitialHide", label: "Initially hidden", type: "Bool" }}
+            node={node}
+            setProp={setProp}
+          />
+        </tbody>
+      </table>
       <table className="w-100" accordiontitle="Show if...">
         <tbody>
           {["show", "edit", "filter"].includes(options.mode) && (
@@ -997,7 +1038,18 @@ const ContainerSettings = () => {
         </select>
       </div>
 
-      <div accordiontitle="Custom class/CSS">
+      <div accordiontitle="Class, ID and CSS">
+        <div>
+          <label>ID</label>
+        </div>
+        <OrFormula nodekey="customId" {...{ setProp, isFormula, node }}>
+          <input
+            type="text"
+            className="form-control text-to-display"
+            value={customId}
+            onChange={setAProp("customId")}
+          />
+        </OrFormula>
         <div>
           <label>Custom class</label>
         </div>

package/src/components/elements/Tabs.js

@@ -9,6 +9,7 @@ import { ntimes } from "./Columns";
 import { Column } from "./Column";
 import optionsCtx from "../context";
 import { setAPropGen, buildOptions, ConfigField } from "./utils";
+import { ArrayManager } from "./ArrayManager";
 
 import { Element, useNode } from "@craftjs/core";
 
@@ -186,6 +187,7 @@ const TabsSettings = () => {
     showif: node.data.props.showif,
     field: node.data.props.field,
     acc_init_opens: node.data.props.acc_init_opens,
+    contents: node.data.props.contents,
   }));
   const {
     actions: { setProp },
@@ -374,39 +376,17 @@ const TabsSettings = () => {
                 </td>
               </tr>
             ) : null}
-            <tr>
-              <th>
-                <label>Number of sections</label>
-              </th>
-              <td>
-                <input
-                  type="number"
-                  className="form-control"
-                  value={ntabs}
-                  step="1"
-                  min="1"
-                  max="20"
-                  onChange={setAProp("ntabs")}
-                />
-              </td>
-            </tr>
             <tr>
               <td colSpan={2}>
-                <ConfigField
-                  field={{
-                    name: "setting_tab_n",
-                    label: "Tab number",
-                    type: "btn_select",
-                    options: ntimes(ntabs, (i) => ({
-                      value: i,
-                      title: `${i + 1}`,
-                      label: `${i + 1}`,
-                    })),
-                  }}
+                <ArrayManager
                   node={node}
                   setProp={setProp}
-                  props={node}
-                ></ConfigField>
+                  countProp={"ntabs"}
+                  currentProp={"setting_tab_n"}
+                  managedArrays={["titles", "acc_init_opens"]}
+                  manageContents={true}
+                  initialAddProps={{ titles: "New Tab" }}
+                ></ArrayManager>
               </td>
             </tr>
             <tr>

package/src/components/elements/utils.js

@@ -15,11 +15,15 @@ import {
   faBold,
   faItalic,
   faFont,
+  faPlus,
   faCommentSlash,
   faUnderline,
+  faAngleDoubleLeft,
+  faAngleDoubleRight,
   faTerminal,
+  faTrashAlt,
 } from "@fortawesome/free-solid-svg-icons";
-import { useNode, Element } from "@craftjs/core";
+import { useNode, Element, useEditor } from "@craftjs/core";
 import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
 import Tippy from "@tippyjs/react";
 import { RelationType } from "@saltcorn/common-code";
@@ -30,6 +34,14 @@ export const DynamicFontAwesomeIcon = ({ icon, className }) => {
   return <i className={`${icon} ${className || ""}`}></i>;
 };
 
+const ntimes = (n, f) => {
+  var res = [];
+  for (let index = 0; index < n; index++) {
+    res.push(f(index));
+  }
+  return res;
+};
+
 export /**
  * @param {boolean} is_block
  * @returns {object}

package/src/components/storage.js

@@ -92,7 +92,14 @@ export /**
  * @subcategory components
  * @namespace
  */
-const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
+const layoutToNodes = (
+  layout,
+  query,
+  actions,
+  parent = "ROOT",
+  options,
+  index = 0
+) => {
   //console.log("layoutToNodes", JSON.stringify(layout));
   /**
    * @param {object} segment
@@ -211,7 +218,12 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
           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]}
@@ -277,6 +289,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
           titles={segment.titles}
           showif={segment.showif}
           ntabs={segment.ntabs}
+          setting_tab_n={segment.setting_tab_n}
           independent={segment.independent}
           startClosed={segment.startClosed}
           deeplink={segment.deeplink}
@@ -358,7 +371,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
    * @param {object} parent
    * @returns {void}
    */
-  function go(segment, parent) {
+  function go(segment, parent, ix) {
     if (!segment) return;
     if (segment.above) {
       segment.above.forEach((child) => {
@@ -383,25 +396,25 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
           />
         )
         .toNodeTree();
-      actions.addNodeTree(node, parent);
+      actions.addNodeTree(node, parent, ix);
     } else {
       const tag = toTag(segment);
       if (Array.isArray(tag)) {
         tag.forEach((t) => {
           const node = query.parseReactElement(t).toNodeTree();
           //console.log("other", node);
-          actions.addNodeTree(node, parent);
+          actions.addNodeTree(node, parent, ix);
         });
       } else if (tag) {
         const node = query.parseReactElement(tag).toNodeTree();
         //console.log("other", node);
-        actions.addNodeTree(node, parent);
+        actions.addNodeTree(node, parent, ix);
       }
     }
   }
   //const node1 = query.createNode(toTag(layout));
   //actions.add(node1, );
-  go(layout, parent);
+  go(layout, parent, index);
 };
 
 /**
@@ -507,6 +520,11 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
           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,
@@ -628,6 +646,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
         serverRendered: node.props.serverRendered,
         tabId: node.props.tabId,
         ntabs: node.props.ntabs,
+        setting_tab_n: node.props.setting_tab_n,
         ...customProps,
       };
     }

package/src/components/storage_context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export default createContext({});

package/webpack.config.js

@@ -1,5 +1,5 @@
 const path = require("path");
-const webpack = require('webpack')
+const webpack = require("webpack");
 module.exports = {
   module: {
     rules: [
@@ -18,10 +18,13 @@ module.exports = {
     //libraryTarget: 'window',
     //libraryExport: 'default'
   },
+  resolve: {
+    fallback: { "process/browser": require.resolve("process/browser") },
+  },
   plugins: [
     // fix "process is not defined" error:
     new webpack.ProvidePlugin({
-      process: 'process/browser',
+      process: "process/browser",
     }),
-  ]
+  ],
 };