@saltcorn/builder 0.8.7 → 0.8.8-beta.0

package/src/components/elements/Tabs.js

@@ -8,7 +8,7 @@ import React, { Fragment, useState, useContext, useEffect } from "react";
 import { ntimes } from "./Columns";
 import { Column } from "./Column";
 import optionsCtx from "../context";
-import { setAPropGen } from "./utils";
+import { setAPropGen, buildOptions } from "./utils";
 
 import { Element, useNode } from "@craftjs/core";
 
@@ -23,13 +23,25 @@ export /**
  * @category saltcorn-builder
  * @subcategory components
  */
-const Tabs = ({ contents, titles, tabsStyle, ntabs, independent, field }) => {
+const Tabs = ({
+  contents,
+  titles,
+  tabsStyle,
+  ntabs,
+  independent,
+  startClosed,
+  field,
+}) => {
   const {
     selected,
     connectors: { connect, drag },
   } = useNode((node) => ({ selected: node.events.selected }));
-  const [showTab, setShowTab] = useState(0);
-  const [showTabs, setShowTabs] = useState([true]);
+  const [showTab, setShowTab] = useState(
+    tabsStyle === "Accordion" && startClosed ? false : 0
+  );
+  const [showTabs, setShowTabs] = useState(
+    tabsStyle === "Accordion" && startClosed ? [] : [true]
+  );
   if (tabsStyle === "Accordion")
     return (
       <div className="accordion">
@@ -159,6 +171,7 @@ const TabsSettings = () => {
     tabsStyle: node.data.props.tabsStyle,
     ntabs: node.data.props.ntabs,
     independent: node.data.props.independent,
+    startClosed: node.data.props.startClosed,
     deeplink: node.data.props.deeplink,
     titles: node.data.props.titles,
     field: node.data.props.field,
@@ -169,6 +182,7 @@ const TabsSettings = () => {
     tabsStyle,
     deeplink,
     independent,
+    startClosed,
     ntabs,
     field,
   } = node;
@@ -196,6 +210,9 @@ const TabsSettings = () => {
         });
   }, [field]);
   const setAProp = setAPropGen(setProp);
+  const styleOptions = ["Tabs", "Pills", "Accordion"];
+  if (["show", "edit"].includes(options.mode))
+    styleOptions.push("Value switch");
 
   return (
     <table className="w-100" accordiontitle="Placement">
@@ -210,12 +227,7 @@ const TabsSettings = () => {
               className="form-control form-select"
               onChange={setAProp("tabsStyle")}
             >
-              <option>Tabs</option>
-              <option>Pills</option>
-              <option>Accordion</option>
-              {["show", "edit"].includes(options.mode) && (
-                <option>Value switch</option>
-              )}
+              {buildOptions(styleOptions)}
             </select>
           </td>
         </tr>
@@ -309,6 +321,24 @@ const TabsSettings = () => {
                 </td>
               </tr>
             )}
+            {tabsStyle === "Accordion" ? (
+              <tr>
+                <td colSpan="2">
+                  <div className="form-check">
+                    <input
+                      className="form-check-input"
+                      name="block"
+                      type="checkbox"
+                      checked={startClosed}
+                      onChange={setAProp("startClosed", { checked: true })}
+                    />
+                    <label className="form-check-label">
+                      Inititally closed
+                    </label>
+                  </div>
+                </td>
+              </tr>
+            ) : null}
           </Fragment>
         )}
       </tbody>
@@ -325,6 +355,7 @@ Tabs.craft = {
     ntabs: 2,
     tabsStyle: "Tabs",
     independent: false,
+    startClosed: false,
     deeplink: true,
   },
   displayName: "Tabs",

package/src/components/elements/ToggleFilter.js

@@ -7,7 +7,12 @@
 import React, { useContext, Fragment } from "react";
 import { useNode } from "@craftjs/core";
 import optionsCtx from "../context";
-import { blockProps, BlockSetting, TextStyleRow, setAPropGen } from "./utils";
+import {
+  blockProps,
+  BlockSetting,
+  setAPropGen,
+  buildOptions,
+} from "./utils";
 
 export /**
  * @param {object} props
@@ -196,14 +201,19 @@ const ToggleFilterSettings = () => {
               value={style}
               onChange={setAProp("style")}
             >
-              <option value="primary">Primary</option>
-              <option value="secondary">Secondary</option>
-              <option value="success">Success</option>
-              <option value="danger">Danger</option>
-              <option value="warning">Warning</option>
-              <option value="info">Info</option>
-              <option value="light">Light</option>
-              <option value="dark">Dark</option>
+              {buildOptions(
+                [
+                  "primary",
+                  "secondary",
+                  "success",
+                  "danger",
+                  "warning",
+                  "info",
+                  "light",
+                  "dark",
+                ],
+                { valAttr: true, capitalize: true }
+              )}
             </select>
           </td>
         </tr>

package/src/components/elements/View.js

@@ -14,6 +14,7 @@ import {
   ConfigForm,
   setAPropGen,
   FormulaTooltip,
+  buildOptions,
 } from "./utils";
 
 import { RelationPicker } from "./RelationPicker";
@@ -206,9 +207,10 @@ const ViewSettings = () => {
               onChange={setAProp("state")}
               onBlur={setAProp("state")}
             >
-              <option value="shared">Shared</option>
-              <option value="fixed">Fixed</option>
-              <option value="local">Local</option>
+              {buildOptions(["shared", "fixed", "local"], {
+                valAttr: true,
+                capitalize: true,
+              })}
             </select>
           </div>
           {state === "fixed" &&

package/src/components/elements/utils.js

@@ -519,16 +519,11 @@ export /**
  * @subcategory components / elements / utils
  * @namespace
  */
-const SelectUnits = ({ vert, autoable, ...props }) => (
-  <select {...props}>
-    <option>px</option>
-    <option>%</option>
-    <option>{vert ? "vh" : "vw"}</option>
-    <option>em</option>
-    <option>rem</option>
-    {autoable && <option>auto</option>}
-  </select>
-);
+const SelectUnits = ({ vert, autoable, ...props }) => {
+  const options = ["px", "%", vert ? "vh" : "vw", "em", "rem"];
+  if (autoable) options.push("auto");
+  return <select {...props}>{buildOptions(options)}</select>;
+};
 
 /**
  * @function
@@ -1427,3 +1422,38 @@ export const parseLegacyRelation = (type, rest, parentTbl) => {
 export const removeWhitespaces = (str) => {
   return str.replace(/\s/g, "X");
 };
+
+/**
+ *
+ * @param {string} string
+ * @returns {string}
+ */
+export const capitalizeFirstLetter = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+export const buildOptions = (
+  options,
+  { valAttr, keyAttr, capitalize } = {}
+) => {
+  return options.map((option) => (
+    <option
+      {...(valAttr ? { value: option } : {})}
+      {...(keyAttr ? { key: option } : {})}
+    >
+      {capitalize ? capitalizeFirstLetter(option) : option}
+    </option>
+  ));
+};
+
+export const buildBootstrapOptions = (values) => {
+  const mappings = {
+    sm: "small",
+    md: "medium",
+    lg: "large",
+    xl: "x-large",
+  };
+  return values.map((option) => (
+    <option value={option}>{mappings[option]}</option>
+  ));
+};

package/src/components/storage.js

@@ -158,6 +158,8 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           key={ix}
           name={segment.action_name}
           rndid={segment.rndid || "not_assigned"}
+          action_row_variable={segment.action_row_variable || ""}
+          action_row_limit={segment.action_row_limit || ""}
           action_label={segment.action_label || ""}
           action_style={segment.action_style || "btn-primary"}
           action_size={segment.action_size || ""}
@@ -244,6 +246,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           titles={segment.titles}
           ntabs={segment.ntabs}
           independent={segment.independent}
+          startClosed={segment.startClosed}
           deeplink={segment.deeplink}
           field={segment.field}
           tabsStyle={segment.tabsStyle}
@@ -502,6 +505,7 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         tabsStyle: node.props.tabsStyle,
         field: node.props.field,
         independent: node.props.independent,
+        startClosed: node.props.startClosed,
         deeplink: node.props.deeplink,
         ntabs: node.props.ntabs,
       };
@@ -524,6 +528,12 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
       columns.push({
         type: "Action",
         action_name: node.props.name,
+        ...(node.props.name !== "Clear" && node.props.action_row_variable
+          ? {
+              action_row_variable: node.props.action_row_variable,
+              action_row_limit: node.props.action_row_limit,
+            }
+          : {}),
         action_label: node.props.action_label,
         action_style: node.props.action_style,
         action_size: node.props.action_size,
@@ -543,6 +553,12 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
         configuration: node.props.configuration,
         confirm: node.props.confirm,
         action_name: node.props.name,
+        ...(node.props.name !== "Clear" && node.props.action_row_variable
+          ? {
+              action_row_variable: node.props.action_row_variable,
+              action_row_limit: node.props.action_row_limit,
+            }
+          : {}),
         action_label: node.props.action_label,
         action_style: node.props.action_style,
         action_size: node.props.action_size,