@saltcorn/builder 0.0.1-beta.1

package/src/components/elements/Image.js

@@ -0,0 +1,320 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Image
+ * @subcategory components / elements
+ */
+
+import React, { useContext, Fragment } from "react";
+import { useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+import previewCtx from "../preview_context";
+import { BoxModelEditor } from "./BoxModelEditor";
+
+import {
+  blockProps,
+  BlockSetting,
+  reactifyStyles,
+  Accordion,
+  OrFormula,
+} from "./utils";
+
+export /**
+ * @param {object} props
+ * @param {string} props.fileid
+ * @param {boolean} props.block
+ * @param {string} props.srctype
+ * @param {string} props.url
+ * @param {string} props.alt
+ * @returns {span}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const Image = ({ fileid, block, srctype, url, alt, style }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  const theurl = srctype === "File" ? `/files/serve/${fileid}` : url;
+  return (
+    <span {...blockProps(block)} ref={(dom) => connect(drag(dom))}>
+      {fileid === 0 ? (
+        "No images Available"
+      ) : (
+        <img
+          className={`${style && style.width ? "" : "w-100"} image-widget ${
+            selected ? "selected-node" : ""
+          }`}
+          style={reactifyStyles(style || {})}
+          src={theurl}
+          alt={alt}
+        ></img>
+      )}
+    </span>
+  );
+};
+
+export /**
+ * @returns {table}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const ImageSettings = () => {
+  const node = useNode((node) => ({
+    fileid: node.data.props.fileid,
+    field: node.data.props.field,
+    url: node.data.props.url,
+    filepath: node.data.props.filepath,
+    srctype: node.data.props.srctype,
+    alt: node.data.props.alt,
+    block: node.data.props.block,
+    style: node.data.props.style,
+    isFormula: node.data.props.isFormula,
+    imgResponsiveWidths: node.data.props.imgResponsiveWidths,
+  }));
+  const {
+    actions: { setProp },
+    fileid,
+    srctype,
+    field,
+    url,
+    alt,
+    block,
+    isFormula,
+    filepath,
+    imgResponsiveWidths,
+    style,
+  } = node;
+  const options = useContext(optionsCtx);
+  const { uploadedFiles, setUploadedFiles } = useContext(previewCtx);
+
+  const handleUpload = (e) => {
+    if (e.target.files && e.target.files.length > 0) {
+      const formData = new FormData();
+
+      formData.append("file", e.target.files[0]);
+      formData.append("min_role_read", options.min_role || 1);
+
+      fetch("/files/upload", {
+        method: "POST",
+        body: formData,
+        headers: {
+          "X-Requested-With": "XMLHttpRequest",
+          "CSRF-Token": options.csrfToken,
+        },
+      })
+        .then((response) => response.json())
+        .then((result) => {
+          setUploadedFiles((upFls) => [
+            ...upFls,
+            { id: result.success.id, filename: result.success.filename },
+          ]);
+          setProp((prop) => {
+            prop.fileid = result.success.id;
+            prop.srctype = "File";
+          });
+        })
+        .catch((error) => {
+          console.error("Error:", error);
+        });
+    }
+  };
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
+  return (
+    <Accordion>
+      <table accordiontitle="Select image">
+        <tbody>
+          <tr>
+            <td colSpan="2">
+              <i>
+                <small>Preview shown in canvas is indicative</small>
+              </i>
+            </td>
+          </tr>
+          <tr>
+            <td>
+              <label>Source</label>
+            </td>
+            <td>
+              <select
+                value={srctype}
+                className="form-control form-select"
+                onChange={setAProp("srctype")}
+              >
+                <option>File</option>
+                <option>URL</option>
+                <option>Upload</option>
+                {options.mode === "show" && <option>Field</option>}
+              </select>
+            </td>
+          </tr>
+          {srctype === "File" && (
+            <tr>
+              <td>
+                <label>File</label>
+              </td>
+              <td>
+                <select
+                  value={fileid}
+                  className="form-control form-select"
+                  onChange={setAProp("fileid")}
+                >
+                  {options.images.map((f, ix) => (
+                    <option key={ix} value={f.id}>
+                      {f.filename}
+                    </option>
+                  ))}
+                  {(uploadedFiles || []).map((uf, ix) => (
+                    <option key={ix} value={uf.id}>
+                      {uf.filename}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          {srctype === "URL" && (
+            <tr>
+              <td>
+                <label>URL</label>
+              </td>
+              <td>
+                <OrFormula nodekey="url" {...{ setProp, isFormula, node }}>
+                  <input
+                    type="text"
+                    className="form-control"
+                    value={url}
+                    onChange={setAProp("url")}
+                  />
+                </OrFormula>
+              </td>
+            </tr>
+          )}
+          {srctype === "Upload" && (
+            <tr>
+              <td>
+                <label>File</label>
+              </td>
+              <td>
+                <input
+                  type="file"
+                  className="form-control"
+                  value={filepath}
+                  onChange={handleUpload}
+                />
+              </td>
+            </tr>
+          )}
+          {srctype === "Field" && (
+            <tr>
+              <td>
+                <label>Field</label>
+              </td>
+              <td>
+                <select
+                  value={field}
+                  className="form-control form-select"
+                  onChange={setAProp("field")}
+                >
+                  {options.fields
+                    .filter(
+                      (f) =>
+                        (f.type && f.type.name === "String") ||
+                        f.reftable_name === "_sc_files"
+                    )
+                    .map((f, ix) => (
+                      <option key={ix} value={f.name}>
+                        {f.label}
+                      </option>
+                    ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td>
+                <label>Alt text</label>
+              </td>
+              <td>
+                <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
+                  <input
+                    type="text"
+                    className="form-control"
+                    value={alt}
+                    onChange={setAProp("alt")}
+                  />
+                </OrFormula>
+              </td>
+            </tr>
+          )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td>
+                <label>Responsive widths</label>
+              </td>
+
+              <td>
+                <input
+                  type="text"
+                  value={imgResponsiveWidths}
+                  className="form-control"
+                  onChange={setAProp("imgResponsiveWidths")}
+                />
+                <small>
+                  <i>
+                    List of widths to serve resized images, e.g. 300, 400, 600
+                  </i>
+                </small>
+              </td>
+            </tr>
+          )}
+          {srctype !== "Upload" && (
+            <tr>
+              <td colSpan="2">
+                <BlockSetting block={block} setProp={setProp} />
+              </td>
+            </tr>
+          )}
+        </tbody>
+      </table>
+      <div accordiontitle="Box" className="w-100">
+        <BoxModelEditor setProp={setProp} node={node} sizeWithStyle={true} />
+      </div>
+    </Accordion>
+  );
+};
+
+/**
+ * @type {object}
+ */
+Image.craft = {
+  displayName: "Image",
+  defaultProps: {
+    alt: "",
+    block: false,
+    isFormula: {},
+    srctype: "File",
+    style: {},
+  },
+  related: {
+    settings: ImageSettings,
+    segment_type: "image",
+    fields: [
+      { name: "alt", canBeFormula: true },
+      { name: "url", canBeFormula: true },
+      { name: "srctype", default: "File" },
+      { name: "fileid", default: 0 },
+      "field",
+      "block",
+      "imgResponsiveWidths",
+      { name: "style", default: {} },
+    ],
+  },
+};

package/src/components/elements/JoinField.js

@@ -0,0 +1,206 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/JoinField
+ * @subcategory components / elements
+ */
+
+import React, { useContext, useEffect, Fragment } from "react";
+import { useNode } from "@craftjs/core";
+import optionsCtx from "../context";
+import {
+  blockProps,
+  BlockSetting,
+  TextStyleRow,
+  ConfigForm,
+  fetchFieldPreview,
+} from "./utils";
+import previewCtx from "../preview_context";
+
+export /**
+ * @param {object} props
+ * @param {string} props.name
+ * @param {boolean} props.block
+ * @param {object} props.fieldview
+ * @param {string} props.textStyle
+ * @returns {span}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const JoinField = ({ name, block, fieldview, textStyle }) => {
+  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);
+
+  useEffect(() => {
+    fetchFieldPreview({
+      options,
+      name,
+      fieldview,
+      configuration: {},
+      setPreviews,
+      node_id,
+    })();
+  }, []);
+  return (
+    <span
+      className={`${textStyle} ${selected ? "selected-node" : ""}`}
+      {...blockProps(block)}
+      ref={(dom) => connect(drag(dom))}
+    >
+      {myPreview ? (
+        <div
+          className="d-inline"
+          dangerouslySetInnerHTML={{ __html: myPreview }}
+        ></div>
+      ) : (
+        `[${name}]`
+      )}
+    </span>
+  );
+};
+
+export /**
+ * @returns {Fragment}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const JoinFieldSettings = () => {
+  const {
+    actions: { setProp },
+    name,
+    block,
+    textStyle,
+    configuration,
+    fieldview,
+    node_id,
+  } = useNode((node) => ({
+    name: node.data.props.name,
+    block: node.data.props.block,
+    textStyle: node.data.props.textStyle,
+    fieldview: node.data.props.fieldview,
+    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 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>Join 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.parent_field_list.map((f, ix) => (
+                  <option key={ix} value={f}>
+                    {f}
+                  </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));
+                    refetchPreview({ fieldview: e.target.value });
+                  }}
+                >
+                  {(fvs || []).map((fvnm, ix) => (
+                    <option key={ix} value={fvnm}>
+                      {fvnm}
+                    </option>
+                  ))}
+                </select>
+              </td>
+            </tr>
+          )}
+          <tr>
+            <td></td>
+            <td>
+              <BlockSetting block={block} setProp={setProp} />
+            </td>
+          </tr>
+          <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}
+ */
+JoinField.craft = {
+  displayName: "JoinField",
+  related: {
+    settings: JoinFieldSettings,
+    segment_type: "join_field",
+    column_type: "JoinField",
+    fields: [
+      { name: "name", segment_name: "join_field", column_name: "join_field" },
+      "fieldview",
+      "textStyle",
+      "block",
+      { name: "configuration", default: {} },
+    ],
+  },
+};

package/src/components/elements/LineBreak.js

@@ -0,0 +1,46 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/LineBreak
+ * @subcategory components / elements
+ */
+
+import React, { Fragment } from "react";
+import { useNode } from "@craftjs/core";
+import { SettingsFromFields } from "./utils";
+
+export /**
+ * @param {object} [props = {}]
+ * @returns {Fragment}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+ const LineBreak = ({}) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  return (
+    <Fragment>
+      <span
+        className={selected ? "selected-node" : ""}
+        ref={(dom) => connect(drag(dom))}
+      >
+        ↵
+      </span>
+      <br />
+    </Fragment>
+  );
+};
+
+/**
+ * @type {object}
+ */
+LineBreak.craft = {
+  displayName: "LineBreak",
+  related: {
+    settings: SettingsFromFields([]),
+    segment_type: "line_break",
+    fields: [],
+  },
+};