@saltcorn/builder 0.7.0-beta.1 → 0.7.0-beta.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.7.0-beta.1",
+  "version": "0.7.0-beta.2",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/Builder.js

@@ -26,6 +26,7 @@ import { Image } from "./elements/Image";
 import { Tabs } from "./elements/Tabs";
 import { Empty } from "./elements/Empty";
 import { DropDownFilter } from "./elements/DropDownFilter";
+import { DropMenu } from "./elements/DropMenu";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import optionsCtx from "./context";
 import PreviewCtx from "./preview_context";
@@ -446,6 +447,7 @@ const Builder = ({ options, layout, mode }) => {
                       Container,
                       Column,
                       DropDownFilter,
+                      DropMenu,
                       Tabs,
                       ToggleFilter,
                     }}

package/src/components/Toolbox.js

@@ -16,6 +16,7 @@ import { ViewLink } from "./elements/ViewLink";
 import { Columns } from "./elements/Columns";
 import { Action } from "./elements/Action";
 import { DropDownFilter } from "./elements/DropDownFilter";
+import { DropMenu } from "./elements/DropMenu";
 import { ToggleFilter } from "./elements/ToggleFilter";
 import { Empty } from "./elements/Empty";
 import { Card } from "./elements/Card";
@@ -336,7 +337,7 @@ const DropDownFilterElem = ({ connectors, fields }) => (
     connectors={connectors}
     icon="far fa-caret-square-down"
     title="Dropdown filter"
-    label="Dropdown"
+    label="Select"
   >
     <DropDownFilter
       name={fields[0].name}
@@ -346,6 +347,18 @@ const DropDownFilterElem = ({ connectors, fields }) => (
     />
   </WrapElem>
 );
+
+const DropMenuElem = ({ connectors }) => (
+  <WrapElem
+    connectors={connectors}
+    icon="far fa-caret-square-down"
+    title="Dropdown menu"
+    label="DropMenu"
+  >
+    <DropMenu />
+  </WrapElem>
+);
+
 /**
  * @param {object} props
  * @param {object} props.connectors
@@ -456,7 +469,7 @@ const AggregationElem = ({ connectors, child_field_list, agg_field_opts }) => (
     connectors={connectors}
     text="∑"
     title="Aggregation"
-    label="Calc"
+    label="Aggreg8"
     bold
     fontSize="16px"
     disable={child_field_list.length === 0}
@@ -529,6 +542,7 @@ const ToolboxShow = () => {
       </div>
       <div className="toolbar-row">
         <HTMLElem connectors={connectors} />
+        <DropMenuElem connectors={connectors} />
       </div>
     </Fragment>
   );

package/src/components/elements/Aggregation.js

@@ -10,7 +10,7 @@ import optionsCtx from "../context";
 import { blockProps, BlockSetting, TextStyleRow } from "./utils";
 
 export /**
- * @param {object} props 
+ * @param {object} props
  * @param {string} props.agg_relation
  * @param {string} props.agg_field
  * @param {string} props.stat
@@ -21,13 +21,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const Aggregation = ({
-  agg_relation,
-  agg_field,
-  stat,
-  block,
-  textStyle,
-}) => {
+const Aggregation = ({ agg_relation, agg_field, stat, block, textStyle }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -129,6 +123,7 @@ const AggregationSettings = () => {
               <option value={"Sum"}>Sum</option>
               <option value={"Max"}>Max</option>
               <option value={"Min"}>Min</option>
+              <option value={"Array_Agg"}>Array_Agg</option>
               {options.fields
                 .filter((f) => f.type.name === "Date")
                 .map((f) => (
@@ -163,8 +158,8 @@ const AggregationSettings = () => {
   );
 };
 
-/** 
- * @type {object} 
+/**
+ * @type {object}
  */
 Aggregation.craft = {
   displayName: "Aggregation",

package/src/components/elements/DropMenu.js

@@ -0,0 +1,156 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/DropMenu
+ * @subcategory components / elements
+ */
+
+import React, { Fragment, useState } from "react";
+import { Element, useNode } from "@craftjs/core";
+import { Column } from "./Column";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCaretDown } from "@fortawesome/free-solid-svg-icons";
+import {
+  SettingsRow,
+  BlockSetting,
+  ButtonOrLinkSettingsRows,
+  DynamicFontAwesomeIcon,
+} from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {boolean} props.has_dropdown
+ * @param {string} props.children
+ * @param {boolean} props.show_badges
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropMenu = ({
+  children,
+  action_style,
+  action_size,
+  action_icon,
+  action_bgcol,
+  action_bordercol,
+  action_textcol,
+  block,
+  label,
+}) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  const [showDropdown, setDropdown] = useState(false);
+  //const [dropWidth, setDropWidth] = useState(200);
+  return (
+    <div
+      className={`${selected ? "selected-node" : ""} ${block ? "d-block" : ""}`}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <button
+        className={`btn ${action_style || "btn-primary"} ${action_size || ""} `}
+        style={
+          action_style === "btn-custom-color"
+            ? {
+                backgroundColor: action_bgcol || "#000000",
+                borderColor: action_bordercol || "#000000",
+                color: action_textcol || "#000000",
+              }
+            : {}
+        }
+      >
+        <DynamicFontAwesomeIcon icon={action_icon} className="me-1" />
+
+        {label}
+        <FontAwesomeIcon
+          icon={faCaretDown}
+          className="ms-1"
+          onClick={() => setDropdown(!showDropdown)}
+        />
+      </button>
+      <div
+        className={`dropdown-menu dropmenu-dropdown ${
+          showDropdown ? "show" : ""
+        }`}
+      >
+        <div className="canvas d-flex flex-column">{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export /**
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropMenuSettings = () => {
+  const node = useNode((node) => ({
+    label: node.data.props.label,
+    block: node.data.props.block,
+    action_style: node.data.props.action_style,
+    action_size: node.data.props.action_size,
+    action_icon: node.data.props.action_icon,
+    action_bgcol: node.data.props.action_bgcol,
+    action_bordercol: node.data.props.action_bordercol,
+    action_textcol: node.data.props.action_textcol,
+  }));
+  const {
+    actions: { setProp },
+    label,
+    block,
+  } = node;
+  return (
+    <table className="w-100">
+      <tbody>
+        <SettingsRow
+          field={{
+            label: "Label",
+            name: "label",
+            type: "String",
+          }}
+          node={node}
+          setProp={setProp}
+        />
+        <ButtonOrLinkSettingsRows
+          setProp={setProp}
+          keyPrefix="action_"
+          values={node}
+        />
+        <tr>
+          <td colSpan="2">
+            <BlockSetting block={block} setProp={setProp} />
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+/**
+ * @type {object}
+ */
+DropMenu.craft = {
+  displayName: "DropMenu",
+  props: {
+    label: "",
+    show_badges: false,
+  },
+  related: {
+    settings: DropMenuSettings,
+    segment_type: "dropdown_menu",
+    hasContents: true,
+    fields: [
+      "label",
+      "block",
+      "action_style",
+      "action_size",
+      "action_icon",
+      "action_bgcol",
+      "action_bordercol",
+      "action_textcol",
+    ],
+  },
+};

package/src/components/elements/utils.js

@@ -252,7 +252,7 @@ const TextStyleSelect = ({ textStyle, setProp }) => {
       <option value="h5">Heading 5</option>
       <option value="h6">Heading 6</option>
       <option value="fw-bold">Bold</option>
-      <option value="font-italic">Italics</option>
+      <option value="fst-italic">Italics</option>
       <option value="small">Small</option>
       <option value="text-muted">Muted</option>
       <option value="text-underline">Underline</option>

package/src/components/storage.js

@@ -25,6 +25,7 @@ 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";
 
 /**
  * @param {object} segment
@@ -69,6 +70,7 @@ const allElements = [
   DropDownFilter,
   Tabs,
   ToggleFilter,
+  DropMenu,
 ];
 
 export /**