@saltcorn/builder 0.6.3-beta.2 → 0.6.4-beta.2

package/src/components/elements/Image.js

@@ -8,8 +8,15 @@ 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, TextStyleSetting, OrFormula } from "./utils";
+import {
+  blockProps,
+  BlockSetting,
+  reactifyStyles,
+  Accordion,
+  OrFormula,
+} from "./utils";
 
 export /**
  * @param {object} props
@@ -23,7 +30,7 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Image = ({ fileid, block, srctype, url, alt }) => {
+const Image = ({ fileid, block, srctype, url, alt, style }) => {
   const {
     selected,
     connectors: { connect, drag },
@@ -35,7 +42,10 @@ const Image = ({ fileid, block, srctype, url, alt }) => {
         "No images Available"
       ) : (
         <img
-          className={`w-100 image-widget ${selected ? "selected-node" : ""}`}
+          className={`${style && style.width ? "" : "w-100"} image-widget ${
+            selected ? "selected-node" : ""
+          }`}
+          style={reactifyStyles(style || {})}
           src={theurl}
           alt={alt}
         ></img>
@@ -59,6 +69,7 @@ const ImageSettings = () => {
     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,
   }));
   const {
@@ -71,6 +82,7 @@ const ImageSettings = () => {
     block,
     isFormula,
     filepath,
+    style,
   } = node;
   const options = useContext(optionsCtx);
   const { uploadedFiles, setUploadedFiles } = useContext(previewCtx);
@@ -113,141 +125,146 @@ const ImageSettings = () => {
     }
   };
   return (
-    <table>
-      <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"
-              onChange={setAProp("srctype")}
-            >
-              <option>File</option>
-              <option>URL</option>
-              <option>Upload</option>
-              {options.mode === "show" && <option>Field</option>}
-            </select>
-          </td>
-        </tr>
-        {srctype === "File" && (
+    <Accordion>
+      <table accordiontitle="Select image">
+        <tbody>
           <tr>
-            <td>
-              <label>File</label>
-            </td>
-            <td>
-              <select
-                value={fileid}
-                className="form-control"
-                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 colSpan="2">
+              <i>
+                <small>Preview shown in canvas is indicative</small>
+              </i>
             </td>
           </tr>
-        )}
-        {srctype === "Field" && (
           <tr>
             <td>
-              <label>Field</label>
+              <label>Source</label>
             </td>
             <td>
               <select
-                value={field}
+                value={srctype}
                 className="form-control"
-                onChange={setAProp("field")}
+                onChange={setAProp("srctype")}
               >
-                {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>
-                  ))}
+                <option>File</option>
+                <option>URL</option>
+                <option>Upload</option>
+                {options.mode === "show" && <option>Field</option>}
               </select>
             </td>
           </tr>
-        )}
-        {srctype !== "Upload" && (
-          <tr>
-            <td>
-              <label>Alt text</label>
-            </td>
-            <td>
-              <OrFormula nodekey="alt" {...{ setProp, isFormula, node }}>
+          {srctype === "File" && (
+            <tr>
+              <td>
+                <label>File</label>
+              </td>
+              <td>
+                <select
+                  value={fileid}
+                  className="form-control"
+                  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="text"
+                  type="file"
                   className="form-control"
-                  value={alt}
-                  onChange={setAProp("alt")}
+                  value={filepath}
+                  onChange={handleUpload}
                 />
-              </OrFormula>
-            </td>
-          </tr>
-        )}
-        {srctype !== "Upload" && (
-          <tr>
-            <td colSpan="2">
-              <BlockSetting block={block} setProp={setProp} />
-            </td>
-          </tr>
-        )}
-      </tbody>
-    </table>
+              </td>
+            </tr>
+          )}
+          {srctype === "Field" && (
+            <tr>
+              <td>
+                <label>Field</label>
+              </td>
+              <td>
+                <select
+                  value={field}
+                  className="form-control"
+                  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 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>
   );
 };
 
@@ -261,6 +278,7 @@ Image.craft = {
     block: false,
     isFormula: {},
     srctype: "File",
+    style: {},
   },
   related: {
     settings: ImageSettings,
@@ -272,6 +290,7 @@ Image.craft = {
       { name: "fileid", default: 0 },
       "field",
       "block",
+      { name: "style", default: {} },
     ],
   },
 };

package/src/components/elements/JoinField.js

@@ -11,6 +11,7 @@ import {
   blockProps,
   BlockSetting,
   TextStyleRow,
+  ConfigForm,
   fetchFieldPreview,
 } from "./utils";
 import previewCtx from "../preview_context";
@@ -76,6 +77,7 @@ const JoinFieldSettings = () => {
     name,
     block,
     textStyle,
+    configuration,
     fieldview,
     node_id,
   } = useNode((node) => ({
@@ -83,17 +85,22 @@ const JoinFieldSettings = () => {
     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: {},
+    configuration,
     setPreviews,
     node_id,
   });
@@ -167,6 +174,14 @@ const JoinFieldSettings = () => {
           <TextStyleRow textStyle={textStyle} setProp={setProp} />
         </tbody>
       </table>
+      {cfgFields ? (
+        <ConfigForm
+          fields={cfgFields}
+          configuration={configuration || {}}
+          setProp={setProp}
+          onChange={(k, v) => refetchPreview({ configuration: { [k]: v } })}
+        />
+      ) : null}
     </Fragment>
   );
 };
@@ -185,6 +200,7 @@ JoinField.craft = {
       "fieldview",
       "textStyle",
       "block",
+      { name: "configuration", default: {} },
     ],
   },
 };

package/src/components/elements/Text.js

@@ -8,12 +8,13 @@ import React, { useState, useContext, useEffect, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import {
   blockProps,
-  BlockSetting,
+  BlockOrInlineSetting,
   TextStyleSetting,
   OrFormula,
   ErrorBoundary,
   TextStyleRow,
   DynamicFontAwesomeIcon,
+  isBlock,
 } from "./utils";
 import ContentEditable from "react-contenteditable";
 import optionsCtx from "../context";
@@ -53,7 +54,7 @@ const ckConfig = {
 };
 
 /**
- * @param {string} str 
+ * @param {string} str
  * @returns {string}
  */
 function escape_tags(str) {
@@ -73,7 +74,7 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Text = ({ text, block, isFormula, textStyle, icon, font }) => {
+const Text = ({ text, block, inline, isFormula, textStyle, icon, font }) => {
   const {
     connectors: { connect, drag },
     selected,
@@ -89,10 +90,11 @@ const Text = ({ text, block, isFormula, textStyle, icon, font }) => {
   }, [selected]);
   return (
     <div
-      className={`${!block ? "d-inline-block" : ""} ${textStyle} is-text ${
-        isFormula.text ? "text-monospace" : ""
-      } ${selected ? "selected-node" : ""}`}
-      {...blockProps(block)}
+      className={`${
+        isBlock(block, inline, textStyle) ? "d-block" : "d-inline-block"
+      } ${textStyle} is-text ${isFormula.text ? "text-monospace" : ""} ${
+        selected ? "selected-node" : ""
+      }`}
       ref={(dom) => connect(drag(dom))}
       onClick={(e) => selected && setEditable(true)}
       style={font ? { fontFamily: font } : {}}
@@ -133,11 +135,12 @@ export /**
  * @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,
@@ -148,6 +151,7 @@ const TextSettings = () => {
     actions: { setProp },
     text,
     block,
+    inline,
     textStyle,
     isFormula,
     labelFor,
@@ -246,7 +250,12 @@ const TextSettings = () => {
           </tr>
         </tbody>
       </table>
-      <BlockSetting block={block} setProp={setProp} />
+      <BlockOrInlineSetting
+        block={block}
+        inline={inline}
+        textStyle={textStyle}
+        setProp={setProp}
+      />
     </div>
   );
 };
@@ -258,6 +267,7 @@ Text.craft = {
   defaultProps: {
     text: "Click here",
     block: false,
+    inline: false,
     isFormula: {},
     textStyle: "",
     labelFor: "",

package/src/components/elements/utils.js

@@ -55,6 +55,27 @@ const BlockSetting = ({ block, setProp }) => (
   </div>
 );
 
+export const BlockOrInlineSetting = ({ block, inline, textStyle, setProp }) =>
+  !textStyle || !textStyle.startsWith("h") ? (
+    <BlockSetting block={block} setProp={setProp} />
+  ) : (
+    <div className="form-check">
+      <input
+        className="form-check-input"
+        name="inline"
+        type="checkbox"
+        checked={inline}
+        onChange={(e) => {
+          if (e.target) {
+            const target_value = e.target.checked;
+            setProp((prop) => (prop.inline = target_value));
+          }
+        }}
+      />
+      <label className="form-check-label">Inline display</label>
+    </div>
+  );
+
 export /**
  * @param {object} props
  * @param {function} props.setProp
@@ -1168,3 +1189,6 @@ export const recursivelyCloneToElems = (query) => (nodeId, ix) => {
     children
   );
 };
+
+export const isBlock = (block, inline, textStyle) =>
+  !textStyle || !textStyle.startsWith("h") ? block : !inline;

package/src/components/storage.js

@@ -125,6 +125,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           text={segment.contents}
           isFormula={segment.isFormula || {}}
           block={segment.block || false}
+          inline={segment.inline || false}
           textStyle={segment.textStyle || ""}
           labelFor={segment.labelFor || ""}
           icon={segment.icon}
@@ -235,6 +236,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           breakpoints={segment.breakpoints || default_breakpoints(segment)}
           ncols={segment.besides.length}
           widths={getColWidths(segment)}
+          style={segment.style || {}}
           contents={segment.besides.map(toTag)}
         />
       );
@@ -261,6 +263,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
             widths={getColWidths(segment)}
             breakpoints={segment.breakpoints || default_breakpoints(segment)}
             ncols={segment.besides.length}
+            style={segment.style || {}}
             contents={segment.besides.map(toTag)}
           />
         )
@@ -387,6 +390,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         type: "blank",
         contents: node.props.text,
         block: node.props.block,
+        inline: node.props.inline,
         textStyle: node.props.textStyle,
         isFormula: node.props.isFormula,
         labelFor: node.props.labelFor,
@@ -400,6 +404,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
       return {
         besides: widths.map((w, ix) => go(nodes[node.linkedNodes["Col" + ix]])),
         breakpoints: node.props.breakpoints,
+        style: node.props.style,
         widths,
       };
     }