@saltcorn/builder 0.0.1-beta.1

package/src/components/elements/Tabs.js

@@ -0,0 +1,347 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Tabs
+ * @subcategory components / elements
+ */
+
+import React, { Fragment, useState, useContext, useEffect } from "react";
+import { ntimes } from "./Columns";
+import { Column } from "./Column";
+import optionsCtx from "../context";
+
+import { Element, useNode } from "@craftjs/core";
+
+export /**
+ * @param {object} props
+ * @param {string[]} props.contents
+ * @param {string[]} props.titles
+ * @param {string} props.tabsStyle
+ * @param {number} props.ntabs
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const Tabs = ({ contents, titles, tabsStyle, ntabs, independent, field }) => {
+  const {
+    selected,
+    connectors: { connect, drag },
+  } = useNode((node) => ({ selected: node.events.selected }));
+  const [showTab, setShowTab] = useState(0);
+  const [showTabs, setShowTabs] = useState([true]);
+  if (tabsStyle === "Accordion")
+    return (
+      <div className="accordion">
+        {ntimes(ntabs, (ix) => (
+          <div key={ix} className="card">
+            <div className="card-header">
+              <h2 className="mb-0">
+                <button
+                  className="btn btn-link btn-block text-left"
+                  type="button"
+                  onClick={() => {
+                    setShowTab(ix);
+                    if (!independent) {
+                      let newArr = [];
+                      newArr[ix] = true;
+                      setShowTabs(newArr);
+                    } else {
+                      let newArr = [...showTabs];
+                      newArr[ix] = !newArr[ix];
+                      setShowTabs(newArr);
+                    }
+                  }}
+                >
+                  {titles[ix]}
+                </button>
+              </h2>
+            </div>
+
+            <div
+              id={`collapse${ix}`}
+              className={`collapse ${
+                (independent && showTabs[ix]) || (!independent && showTab == ix)
+                  ? "show"
+                  : ""
+              }`}
+              aria-labelledby="headingOne"
+              data-parent="#accordionExample"
+            >
+              <div className="card-body">
+                <Element canvas id={`Tab${ix}`} is={Column}>
+                  {contents[ix]}
+                </Element>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  else
+    return (
+      <Fragment>
+        <ul
+          id="myTab"
+          role="tablist"
+          className={`nav ${
+            tabsStyle === "Tabs" ? "nav-tabs" : "nav-pills"
+          } builder ${selected ? "selected-node" : ""}`}
+          ref={(dom) => connect(drag(dom))}
+        >
+          {ntimes(ntabs, (ix) => {
+            if (!titles[ix]) return null;
+            const targetIx =
+              typeof titles[ix].value === "undefined" ? ix : titles[ix].value;
+            return (
+              <li key={ix} className="nav-item" role="presentation">
+                <a
+                  className={`nav-link ${targetIx === showTab ? `active` : ""}`}
+                  onClick={() => setShowTab(targetIx)}
+                >
+                  {titles[ix] &&
+                    (typeof titles[ix].label === "undefined"
+                      ? titles[ix]
+                      : titles[ix].label === ""
+                      ? "(empty)"
+                      : titles[ix].label)}
+                </a>
+              </li>
+            );
+          })}
+        </ul>
+        <div className="tab-content" id="myTabContent">
+          {ntimes(ntabs, (ix) => {
+            if (!titles[ix]) return null;
+
+            const useIx =
+              typeof titles[ix].value === "undefined" ? ix : titles[ix].value;
+
+            if (useIx !== showTab)
+              return (
+                <div className="d-none" key={ix}>
+                  <Element canvas id={`Tab${useIx}`} is={Column}>
+                    {contents[useIx]}
+                  </Element>
+                </div>
+              );
+            //d-none display of useIx is bug workaround? needed
+            else
+              return (
+                <div
+                  key={ix}
+                  className={`tab-pane fade ${
+                    useIx === showTab ? `show active` : ""
+                  }`}
+                  role="tabpanel"
+                  aria-labelledby="home-tab"
+                >
+                  <div className="d-none">{useIx}</div>
+                  <Element canvas id={`Tab${useIx}`} is={Column}>
+                    {contents[useIx]}
+                  </Element>
+                </div>
+              );
+          })}
+        </div>
+      </Fragment>
+    );
+};
+
+export /**
+ * @returns {table}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const TabsSettings = () => {
+  const node = useNode((node) => ({
+    tabsStyle: node.data.props.tabsStyle,
+    ntabs: node.data.props.ntabs,
+    independent: node.data.props.independent,
+    deeplink: node.data.props.deeplink,
+    titles: node.data.props.titles,
+    field: node.data.props.field,
+  }));
+  const {
+    actions: { setProp },
+    titles,
+    tabsStyle,
+    deeplink,
+    independent,
+    ntabs,
+    field,
+  } = node;
+  const options = useContext(optionsCtx);
+  useEffect(() => {
+    if (field)
+      fetch(`/api/${options.tableName}/distinct/${field}`, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          "CSRF-Token": options.csrfToken,
+        },
+      })
+        .then(function (response) {
+          if (response.status < 399) return response.json();
+          else return "";
+        })
+        .then(function (data) {
+          if (data.success) {
+            const len = data.success.length;
+
+            setProp((prop) => (prop.ntabs = len));
+            setProp((prop) => (prop.titles = data.success));
+          }
+        });
+  }, [field]);
+  return (
+    <table className="w-100" accordiontitle="Placement">
+      <tbody>
+        <tr>
+          <th>
+            <label>Style</label>
+          </th>
+          <td>
+            <select
+              value={tabsStyle}
+              className="form-control form-select"
+              onChange={(e) =>
+                setProp((prop) => {
+                  prop.tabsStyle = e.target.value;
+                })
+              }
+            >
+              <option>Tabs</option>
+              <option>Pills</option>
+              <option>Accordion</option>
+              {["show", "edit"].includes(options.mode) && (
+                <option>Value switch</option>
+              )}
+            </select>
+          </td>
+        </tr>
+        {tabsStyle === "Value switch" ? (
+          <tr>
+            <td>
+              <label>Field</label>
+            </td>
+            <td>
+              <select
+                value={field}
+                className="form-control form-select"
+                onChange={(e) => {
+                  setProp((prop) => (prop.field = e.target.value));
+                }}
+              >
+                {options.fields.map((f, ix) => (
+                  <option key={ix} value={f.name}>
+                    {f.label}
+                  </option>
+                ))}
+              </select>
+            </td>
+          </tr>
+        ) : (
+          <Fragment>
+            <tr>
+              <th>
+                <label>Number of sections</label>
+              </th>
+              <td>
+                <input
+                  type="number"
+                  className="form-control"
+                  value={ntabs}
+                  step="1"
+                  min="0"
+                  max="20"
+                  onChange={(e) =>
+                    setProp((prop) => (prop.ntabs = e.target.value))
+                  }
+                />
+              </td>
+            </tr>
+            <tr>
+              <th colSpan="2">Titles</th>
+            </tr>
+            {ntimes(ntabs, (ix) => (
+              <tr key={ix}>
+                <th>{ix + 1}</th>
+                <td>
+                  <input
+                    type="text"
+                    className="form-control text-to-display"
+                    value={titles[ix]}
+                    onChange={(e) =>
+                      setProp((prop) => (prop.titles[ix] = e.target.value))
+                    }
+                  />
+                </td>
+              </tr>
+            ))}
+            {tabsStyle === "Accordion" ? (
+              <tr>
+                <td colSpan="2">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      name="block"
+                      type="checkbox"
+                      checked={independent}
+                      onChange={(e) => {
+                        if (e.target) {
+                          setProp(
+                            (prop) => (prop.independent = e.target.checked)
+                          );
+                        }
+                      }}
+                    />
+                    <label className="form-check-label">
+                      Open independently
+                    </label>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              <tr>
+                <td colSpan="2">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      name="block"
+                      type="checkbox"
+                      checked={deeplink}
+                      onChange={(e) => {
+                        if (e.target) {
+                          setProp((prop) => (prop.deeplink = e.target.checked));
+                        }
+                      }}
+                    />
+                    <label className="form-check-label">Deep link</label>
+                  </div>
+                </td>
+              </tr>
+            )}
+          </Fragment>
+        )}
+      </tbody>
+    </table>
+  );
+};
+
+/**
+ * @type {object}
+ */
+Tabs.craft = {
+  props: {
+    titles: ["Tab1", "Tab2"],
+    ntabs: 2,
+    tabsStyle: "Tabs",
+    independent: false,
+    deeplink: true,
+  },
+  displayName: "Tabs",
+  related: {
+    settings: TabsSettings,
+  },
+};

package/src/components/elements/Text.js

@@ -0,0 +1,330 @@
+/**
+ * @category saltcorn-builder
+ * @module components/elements/Text
+ * @subcategory components / elements
+ */
+
+import React, { useState, useContext, useEffect, Fragment } from "react";
+import { useNode } from "@craftjs/core";
+import {
+  blockProps,
+  BlockOrInlineSetting,
+  TextStyleSetting,
+  OrFormula,
+  ErrorBoundary,
+  TextStyleRow,
+  DynamicFontAwesomeIcon,
+  isBlock,
+  reactifyStyles,
+  SettingsRow,
+} from "./utils";
+import ContentEditable from "react-contenteditable";
+import optionsCtx from "../context";
+import CKEditor from "ckeditor4-react";
+import FontIconPicker from "@fonticonpicker/react-fonticonpicker";
+import faIcons from "./faicons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import fas from "@fortawesome/free-solid-svg-icons";
+import far from "@fortawesome/free-regular-svg-icons";
+const ckConfig = {
+  toolbarGroups: [
+    { name: "document", groups: ["mode", "document", "doctools"] },
+    { name: "clipboard", groups: ["clipboard", "undo"] },
+    { name: "forms", groups: ["forms"] },
+    { name: "basicstyles", groups: ["basicstyles", "cleanup"] },
+    {
+      name: "editing",
+      groups: ["find", "selection", "spellchecker", "editing"],
+    },
+    {
+      name: "paragraph",
+      groups: ["list", "indent", "blocks", "align", "bidi", "paragraph"],
+    },
+    { name: "links", groups: ["links"] },
+    "/",
+    { name: "insert", groups: ["insert"] },
+    { name: "styles", groups: ["styles"] },
+    { name: "colors", groups: ["colors"] },
+    { name: "tools", groups: ["tools"] },
+    { name: "others", groups: ["others"] },
+    { name: "about", groups: ["about"] },
+  ],
+  autoParagraph: false,
+  fillEmptyBlocks: false,
+  removeButtons:
+    "Source,Save,NewPage,ExportPdf,Print,Preview,Templates,Cut,Copy,Paste,PasteText,PasteFromWord,Find,Replace,SelectAll,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,CopyFormatting,CreateDiv,BidiLtr,BidiRtl,Language,Anchor,Flash,Iframe,PageBreak,Maximize,ShowBlocks,About,Undo,Redo,Image",
+};
+
+/**
+ * @param {string} str
+ * @returns {string}
+ */
+function escape_tags(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+export /**
+ * @param {object} props
+ * @param {string} props.text
+ * @param {boolean} props.block
+ * @param {object} props.isFormula
+ * @param {string} props.textStyle
+ * @param {string} [props.icon]
+ * @param {string} [props.font]
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const Text = ({
+  text,
+  block,
+  inline,
+  isFormula,
+  textStyle,
+  icon,
+  font,
+  style,
+}) => {
+  const {
+    connectors: { connect, drag },
+    selected,
+    actions: { setProp },
+  } = useNode((state) => ({
+    selected: state.events.selected,
+    dragged: state.events.dragged,
+  }));
+  const [editable, setEditable] = useState(false);
+
+  useEffect(() => {
+    !selected && setEditable(false);
+  }, [selected]);
+  return (
+    <div
+      className={`${
+        isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
+      } ${textStyle} is-text ${isFormula.text ? "font-monospace" : ""} ${
+        selected ? "selected-node" : ""
+      }`}
+      ref={(dom) => connect(drag(dom))}
+      onClick={(e) => selected && setEditable(true)}
+      style={{
+        ...(font ? { fontFamily: font } : {}),
+        ...reactifyStyles(style || {}),
+      }}
+    >
+      <DynamicFontAwesomeIcon icon={icon} className="me-1" />
+      {isFormula.text ? (
+        <Fragment>
+          =
+          <ContentEditable
+            html={text}
+            style={{ display: "inline" }}
+            disabled={!editable}
+            onChange={(e) => setProp((props) => (props.text = e.target.value))}
+          />
+        </Fragment>
+      ) : editable ? (
+        <ErrorBoundary>
+          <CKEditor
+            data={text}
+            style={{ display: "inline" }}
+            onChange={(e) =>
+              setProp((props) => (props.text = e.editor.getData()))
+            }
+            config={ckConfig}
+            type="inline"
+          />
+        </ErrorBoundary>
+      ) : (
+        <div className="d-inline" dangerouslySetInnerHTML={{ __html: text }} />
+      )}
+    </div>
+  );
+};
+//<div dangerouslySetInnerHTML={{ __html: text }} />
+
+export /**
+ * @returns {div}
+ * @namespace
+ * @category saltcorn-builder
+ * @subcategory components
+ */
+const TextSettings = () => {
+  const node = useNode((node) => ({
+    text: node.data.props.text,
+    block: node.data.props.block,
+    inline: node.data.props.inline,
+    isFormula: node.data.props.isFormula,
+    textStyle: node.data.props.textStyle,
+    labelFor: node.data.props.labelFor,
+    icon: node.data.props.icon,
+    font: node.data.props.font,
+    style: node.data.props.style,
+  }));
+  const {
+    actions: { setProp },
+    text,
+    block,
+    inline,
+    textStyle,
+    isFormula,
+    labelFor,
+    icon,
+    font,
+    style,
+  } = node;
+  const { mode, fields } = useContext(optionsCtx);
+  const setAProp = (key) => (e) => {
+    if (e.target) {
+      const target_value = e.target.value;
+      setProp((prop) => (prop[key] = target_value));
+    }
+  };
+  return (
+    <div>
+      {mode === "show" && (
+        <div className="form-check">
+          <input
+            type="checkbox"
+            className="form-check-input"
+            checked={isFormula.text}
+            onChange={(e) =>
+              setProp((prop) => (prop.isFormula.text = e.target.checked))
+            }
+          />
+          <label className="form-check-label">Formula?</label>
+        </div>
+      )}
+      <label>Text to display</label>
+      {mode === "show" && isFormula.text ? (
+        <input
+          type="text"
+          className="text-to-display form-control"
+          value={text}
+          onChange={setAProp("text")}
+        />
+      ) : (
+        <ErrorBoundary>
+          <div className="border">
+            <CKEditor
+              data={text}
+              onChange={(e) => {
+                if (e.editor) {
+                  const text = e.editor.getData();
+                  setProp((props) => (props.text = text));
+                }
+              }}
+              config={ckConfig}
+              type="inline"
+            />
+          </div>
+        </ErrorBoundary>
+      )}
+      {mode === "edit" && (
+        <Fragment>
+          <label>Label for Field</label>
+          <select
+            value={labelFor}
+            onChange={setAProp("labelFor")}
+            className="form-control form-select"
+          >
+            <option value={""}></option>
+            {fields.map((f, ix) => (
+              <option key={ix} value={f.name}>
+                {f.label}
+              </option>
+            ))}
+          </select>
+        </Fragment>
+      )}
+      <table className="w-100 mt-2">
+        <tbody>
+          <TextStyleRow textStyle={textStyle} setProp={setProp} />
+          <tr>
+            <td>
+              <label>Icon</label>
+            </td>
+            <td>
+              <FontIconPicker
+                className="w-100"
+                value={icon}
+                icons={faIcons}
+                onChange={(value) => setProp((prop) => (prop.icon = value))}
+                isMulti={false}
+              />
+            </td>
+          </tr>
+          <SettingsRow
+            field={{
+              name: "font",
+              label: "Font family",
+              type: "Font",
+            }}
+            node={node}
+            setProp={setProp}
+          />
+          <SettingsRow
+            field={{
+              name: "font-size",
+              label: "Font size",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
+          <SettingsRow
+            field={{
+              name: "font-weight",
+              label: "Weight",
+              type: "Integer",
+              min: 100,
+              max: 900,
+              step: 100,
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
+          <SettingsRow
+            field={{
+              name: "line-height",
+              label: "Line height",
+              type: "DimUnits",
+            }}
+            node={node}
+            setProp={setProp}
+            isStyle={true}
+          />
+        </tbody>
+      </table>
+      <BlockOrInlineSetting
+        block={block}
+        inline={inline}
+        textStyle={textStyle}
+        setProp={setProp}
+      />
+    </div>
+  );
+};
+
+/**
+ * @type {object}
+ */
+Text.craft = {
+  defaultProps: {
+    text: "Click here",
+    block: false,
+    inline: false,
+    isFormula: {},
+    textStyle: "",
+    labelFor: "",
+    font: "",
+    style: {},
+  },
+  displayName: "Text",
+  related: {
+    settings: TextSettings,
+  },
+};