@saltcorn/builder 0.0.1-beta.1

package/src/components/elements/DropDownFilter.js

@@ -0,0 +1,154 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/DropDownFilter
+ * @subcategory components / elements
+ */
+
+import React, { useContext, Fragment } from "react";
+import { useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+import { blockProps, BlockSetting, TextStyleRow } from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {string} props.name
+ * @param {boolean} props.block
+ * @param {boolean} props.full_width
+ * @returns {span}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropDownFilter = ({ name, block, full_width }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <span
+      className={selected ? "selected-node" : ""}
+      {...blockProps(block)}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <select disabled={true} className={full_width ? "w-100" : ""}>
+        <option>{name}</option>
+      </select>
+    </span>
+  );
+};
+
+export /**
+ * @returns {table}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const DropDownFilterSettings = () => {
+  const {
+    actions: { setProp },
+    name,
+    block,
+    neutral_label,
+    full_width,
+    where,
+  } = useNode((node) => ({
+    name: node.data.props.name,
+    block: node.data.props.block,
+    neutral_label: node.data.props.neutral_label,
+    full_width: node.data.props.full_width,
+    where: node.data.props.where,
+  }));
+  const options = useContext(optionsCtx);
+  return (
+    <table className="w-100">
+      <tbody>
+        <tr>
+          <td>
+            <label>Field</label>
+          </td>
+          <td>
+            <select
+              value={name}
+              className="form-control form-select"
+              onChange={(e) => setProp((prop) => (prop.name = e.target.value))}
+            >
+              {options.fields.map((f, ix) => (
+                <option key={ix} value={f.name}>
+                  {f.label}
+                </option>
+              ))}
+            </select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label>Neutral label</label>
+          </td>
+          <td>
+            <input
+              value={neutral_label}
+              className="form-control"
+              onChange={(e) =>
+                setProp((prop) => (prop.neutral_label = e.target.value))
+              }
+            />
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <label>Where</label>
+          </td>
+          <td>
+            <input
+              value={where}
+              className="form-control"
+              onChange={(e) => setProp((prop) => (prop.where = e.target.value))}
+            />
+          </td>
+        </tr>
+        <tr>
+          <td></td>
+          <td>
+            <BlockSetting block={block} setProp={setProp} />
+          </td>
+        </tr>
+        <tr>
+          <td></td>
+          <td>
+            <div className="form-check">
+              <input
+                className="form-check-input"
+                name="block"
+                type="checkbox"
+                checked={full_width}
+                onChange={(e) =>
+                  setProp((prop) => (prop.full_width = e.target.checked))
+                }
+              />
+              <label className="form-check-label">Full width</label>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+/** 
+ * @type {object} 
+ */
+DropDownFilter.craft = {
+  displayName: "DropDownFilter",
+  related: {
+    settings: DropDownFilterSettings,
+    segment_type: "dropdown_filter",
+    column_type: "DropDownFilter",
+    fields: [
+      { name: "name", segment_name: "field_name", column_name: "field_name" },
+      "full_width",
+      "neutral_label",
+      "where",
+      "block",
+    ],
+  },
+};

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: "Menu",
+    block: 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/Empty.js

@@ -0,0 +1,30 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Empty
+ * @subcategory components / elements
+ */
+
+import React, { Fragment } from "react";
+import { useNode } from "@craftjs/core";
+
+export /**
+ * @param {object} [props = {}]
+ * @returns {Fragment}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const Empty = ({}) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return null;
+};
+
+/** 
+ * @type {object} 
+ */
+Empty.craft = {
+  displayName: "Empty",
+};

package/src/components/elements/Field.js

@@ -0,0 +1,239 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Field
+ * @subcategory components / elements
+ */
+
+import React, { useContext, useEffect, Fragment } from "react";
+import { useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+import previewCtx from "../preview_context";
+import {
+  blockProps,
+  BlockOrInlineSetting,
+  TextStyleRow,
+  ConfigForm,
+  setInitialConfig,
+  isBlock,
+  fetchFieldPreview,
+} from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {string} props.name
+ * @param {string} props.fieldview
+ * @param {boolean} props.block
+ * @param {string} props.textStyle
+ * @param {object} props.configuration
+ * @returns {div}
+ * @category saltcorn-builder
+ * @subcategory components
+ * @namespace
+ */
+const Field = ({
+  name,
+  fieldview,
+  block,
+  inline,
+  textStyle,
+  configuration,
+}) => {
+  const {
+    selected,
+    node_id,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected, node_id: node.id }));
+  const { previews, setPreviews } = useContext(previewCtx);
+  const myPreview = previews[node_id];
+  const options = useContext(optionsCtx);
+  const blockDisplays = (options.blockDisplay || {})[name];
+  const blockDisplay = blockDisplays && blockDisplays.includes(fieldview);
+  useEffect(() => {
+    fetchFieldPreview({
+      options,
+      name,
+      fieldview,
+      configuration,
+      setPreviews,
+      node_id,
+    })();
+  }, []);
+  return (
+    <div
+      className={`${textStyle} ${selected ? "selected-node" : ""} ${
+        isBlock(block, inline, textStyle) || blockDisplay
+          ? "d-block"
+          : "d-inline-block"
+      }`}
+      ref={(dom) => connect(drag(dom))}
+    >
+      {myPreview ? (
+        <div
+          className="d-inline"
+          dangerouslySetInnerHTML={{ __html: myPreview }}
+        ></div>
+      ) : (
+        `[${fieldview} ${name}]`
+      )}
+    </div>
+  );
+};
+
+export /**
+ * @returns {Fragment}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const FieldSettings = () => {
+  const {
+    actions: { setProp },
+    name,
+    fieldview,
+    block,
+    inline,
+    configuration,
+    node_id,
+    textStyle,
+  } = useNode((node) => ({
+    name: node.data.props.name,
+    fieldview: node.data.props.fieldview,
+    block: node.data.props.block,
+    inline: node.data.props.inline,
+    textStyle: node.data.props.textStyle,
+    configuration: node.data.props.configuration,
+    node_id: node.id,
+  }));
+  const options = useContext(optionsCtx);
+  const { setPreviews } = useContext(previewCtx);
+
+  const fvs = options.field_view_options[name];
+  const handlesTextStyle = (options.handlesTextStyle || {})[name];
+  const blockDisplay = (options.blockDisplay || {})[name];
+  const getCfgFields = (fv) =>
+    ((options.fieldViewConfigForms || {})[name] || {})[fv];
+  const cfgFields = getCfgFields(fieldview);
+  const refetchPreview = fetchFieldPreview({
+    options,
+    name,
+    fieldview,
+    configuration,
+    setPreviews,
+    node_id,
+  });
+
+  return (
+    <Fragment>
+      <i>
+        <small>
+          Previews shown in canvas are indicative based on random rows
+        </small>
+      </i>
+      <table className="w-100">
+        <tbody>
+          <tr>
+            <td>
+              <label>Field</label>
+            </td>
+            <td>
+              <select
+                value={name}
+                className="form-control form-select"
+                onChange={(e) => {
+                  setProp((prop) => (prop.name = e.target.value));
+                  const newfvs = options.field_view_options[e.target.value];
+                  if (newfvs && newfvs.length > 0) {
+                    setProp((prop) => (prop.fieldview = newfvs[0]));
+                    refetchPreview({
+                      name: e.target.value,
+                      fieldview: newfvs[0],
+                    });
+                  } else refetchPreview({ name: e.target.value });
+                }}
+              >
+                {options.fields.map((f, ix) => (
+                  <option key={ix} value={f.name}>
+                    {f.label}
+                  </option>
+                ))}
+              </select>
+            </td>
+          </tr>
+          {fvs && (
+            <tr>
+              <td>
+                <label>Field view</label>
+              </td>
+
+              <td>
+                <select
+                  value={fieldview}
+                  className="form-control form-select"
+                  onChange={(e) => {
+                    setProp((prop) => (prop.fieldview = e.target.value));
+                    setInitialConfig(
+                      setProp,
+                      e.target.value,
+                      getCfgFields(e.target.value)
+                    );
+                    refetchPreview({ fieldview: e.target.value });
+                  }}
+                >
+                  {(fvs || []).map((fvnm, ix) => (
+                    <option key={ix} value={fvnm}>
+                      {fvnm}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          {!(blockDisplay && blockDisplay.includes(fieldview)) && (
+            <tr>
+              <td></td>
+              <td>
+                <BlockOrInlineSetting
+                  block={block}
+                  inline={inline}
+                  textStyle={textStyle}
+                  setProp={setProp}
+                />
+              </td>
+            </tr>
+          )}
+          {!(handlesTextStyle && handlesTextStyle.includes(fieldview)) && (
+            <TextStyleRow textStyle={textStyle} setProp={setProp} />
+          )}
+        </tbody>
+      </table>
+      {cfgFields ? (
+        <ConfigForm
+          fields={cfgFields}
+          configuration={configuration}
+          setProp={setProp}
+          onChange={(k, v) => refetchPreview({ configuration: { [k]: v } })}
+        />
+      ) : null}
+    </Fragment>
+  );
+};
+
+/**
+ * @type {object}
+ */
+Field.craft = {
+  displayName: "Field",
+  related: {
+    settings: FieldSettings,
+    segment_type: "field",
+    column_type: "Field",
+    fields: [
+      { name: "name", segment_name: "field_name", column_name: "field_name" },
+      "fieldview",
+      "textStyle",
+      "block",
+      "inline",
+      { name: "configuration", default: {} },
+    ],
+  },
+};

package/src/components/elements/HTMLCode.js

@@ -0,0 +1,61 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/HTMLCode
+ * @subcategory components / elements
+ */
+
+import React from "react";
+import { useNode } from "@craftjs/core";
+import {
+  blockProps,
+  BlockSetting,
+  SettingsFromFields,
+  TextStyleSetting,
+} from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {string} props.text
+ * @returns {span}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const HTMLCode = ({ text }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <span
+      className={`is-html-block ${selected ? "selected-node" : ""}`}
+      ref={(dom) => connect(drag(dom))}
+    >
+      <div style={{ fontSize: "8px" }}>HTML</div>
+      <div dangerouslySetInnerHTML={{ __html: text }}></div>
+    </span>
+  );
+};
+
+const fields = [
+  {
+    label: "HTML Code",
+    name: "text",
+    type: "textarea",
+    segment_name: "contents"
+  },
+];
+
+/**
+ * @type {object}
+ */
+HTMLCode.craft = {
+  displayName: "HTMLCode",
+  related: {
+    settings: SettingsFromFields(fields),
+    segment_type: "blank",
+    segment_vars: { isHTML: true },
+    segment_match: (segment) => segment.isHTML,
+    fields,
+  },
+};