@saltcorn/builder 0.9.4-beta.14 → 0.9.4-beta.15

package/src/components/elements/ViewLink.js

@@ -24,6 +24,7 @@ import {
 
 import { RelationBadges } from "./RelationBadges";
 import { RelationOnDemandPicker } from "./RelationOnDemandPicker";
+import Select from "react-select";
 
 import {
   RelationsFinder,
@@ -201,8 +202,8 @@ const ViewLinkSettings = () => {
     });
   }
   const set_view_name = (e) => {
-    if (e.target) {
-      const target_value = e.target.value;
+    if (e?.target?.value || e?.value) {
+      const target_value = e.target?.value || e.value;
       if (target_value !== use_view_name) {
         const newRelations = finder.findRelations(
           tableName,
@@ -236,6 +237,11 @@ const ViewLinkSettings = () => {
   };
   const helpContext = { view_name: use_view_name };
   if (tableName) helpContext.srcTable = tableName;
+  const viewOptions = options.views.map(({ name, label }) => ({
+    label,
+    value: name,
+  }));
+  const selectedView = viewOptions.find((v) => v.value === use_view_name);
   return (
     <div>
       <table className="w-100">
@@ -243,18 +249,18 @@ const ViewLinkSettings = () => {
           <tr>
             <td colSpan="2">
               <label>View to link to</label>
-              <select
-                value={use_view_name}
-                className="form-control form-select"
-                onChange={set_view_name}
-                onBlur={set_view_name}
-              >
-                {options.views.map((f, ix) => (
-                  <option key={ix} value={f.name}>
-                    {f.label}
-                  </option>
-                ))}
-              </select>
+              {options.inJestTestingMode ? null : (
+                <Select
+                  options={viewOptions}
+                  value={selectedView}
+                  onChange={set_view_name}
+                  onBlur={set_view_name}
+                  menuPortalTarget={document.body}
+                  styles={{
+                    menuPortal: (base) => ({ ...base, zIndex: 19999 }),
+                  }}
+                ></Select>
+              )}
             </td>
           </tr>
           <tr>

package/src/components/elements/utils.js

@@ -19,6 +19,7 @@ import faIcons from "./faicons";
 import { Columns, ntimes } from "./Columns";
 import Tippy from "@tippyjs/react";
 import { RelationType } from "@saltcorn/common-code";
+import Select from "react-select";
 
 export const DynamicFontAwesomeIcon = ({ icon, className }) => {
   if (!icon) return null;
@@ -139,7 +140,7 @@ export /**
  */
 const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
   const { mode } = React.useContext(optionsCtx);
-
+  const allowFormula = mode === "show" || mode === "list";
   /**
    * @returns {void}
    */
@@ -160,14 +161,14 @@ const OrFormula = ({ setProp, isFormula, node, nodekey, children }) => {
     });
   };
   let errorString = false;
-  if (mode === "show" && isFormula[nodekey]) {
+  if (allowFormula && isFormula[nodekey]) {
     try {
       Function("return " + node[nodekey]);
     } catch (error) {
       errorString = error.message;
     }
   }
-  return mode !== "show" ? (
+  return !allowFormula ? (
     children
   ) : (
     <Fragment>
@@ -902,24 +903,51 @@ const ConfigField = ({
         spellCheck={false}
       />
     ),
-    select: () => (
-      <select
-        className="form-control form-select"
-        value={value || ""}
-        onChange={(e) => e.target && myOnChange(e.target.value)}
-        onBlur={(e) => e.target && myOnChange(e.target.value)}
-      >
-        {field.options.map((o, ix) =>
-          o.name && o.label ? (
-            <option key={ix} value={o.name}>
-              {o.label}
-            </option>
-          ) : (
-            <option key={ix}>{o}</option>
-          )
-        )}
-      </select>
-    ),
+    select: () => {
+      if (field.class?.includes?.("selectizable")) {
+        const seloptions = field.options.map((o, ix) =>
+          o.name && o.label
+            ? { value: o.name, label: o.label }
+            : { value: o, label: o }
+        );
+        return (
+          <Select
+            options={seloptions}
+            value={seloptions.find((so) => value === so.value)}
+            onChange={(e) =>
+              (e.name && myOnChange(e.name)) ||
+              (e.value && myOnChange(e.value)) ||
+              (typeof e === "string" && myOnChange(e))
+            }
+            onBlur={(e) =>
+              (e.name && myOnChange(e.name)) ||
+              (e.value && myOnChange(e.value)) ||
+              (typeof e === "string" && myOnChange(e))
+            }
+            menuPortalTarget={document.body}
+            styles={{ menuPortal: (base) => ({ ...base, zIndex: 19999 }) }}
+          ></Select>
+        );
+      } else
+        return (
+          <select
+            className="form-control form-select"
+            value={value || ""}
+            onChange={(e) => e.target && myOnChange(e.target.value)}
+            onBlur={(e) => e.target && myOnChange(e.target.value)}
+          >
+            {field.options.map((o, ix) =>
+              o.name && o.label ? (
+                <option key={ix} value={o.name}>
+                  {o.label}
+                </option>
+              ) : (
+                <option key={ix}>{o}</option>
+              )
+            )}
+          </select>
+        );
+    },
     btn_select: () => (
       <div className="btn-group w-100" role="group">
         {field.options.map((o, ix) => (
@@ -1017,8 +1045,15 @@ export /**
  * @returns {table}
  */
 const SettingsFromFields =
-  (fields, opts = {}) =>
+  (fieldsIn, opts = {}) =>
   () => {
+    const fields = [...fieldsIn];
+    if (opts.additionalFieldsOptionKey) {
+      const options = React.useContext(optionsCtx);
+
+      const addFields = options[opts.additionalFieldsOptionKey];
+      fields.push(...(addFields || []));
+    }
     const node = useNode((node) => {
       const ps = {};
       fields.forEach((f) => {
@@ -1290,6 +1325,7 @@ const ButtonOrLinkSettingsRows = ({
             <option value="">Standard</option>
             <option value="btn-lg">Large</option>
             <option value="btn-sm">Small</option>
+            <option value="btn-sm btn-xs">Extra Small</option>
             <option value="btn-block">Block</option>
             <option value="btn-block btn-lg">Large block</option>
           </select>

package/src/components/storage.js

@@ -12,6 +12,8 @@ import { Empty } from "./elements/Empty";
 import { Columns, ntimes, sum } from "./elements/Columns";
 import { JoinField } from "./elements/JoinField";
 import { Tabs } from "./elements/Tabs";
+import { ListColumns } from "./elements/ListColumns";
+import { ListColumn } from "./elements/ListColumn";
 import { Table } from "./elements/Table";
 import { Aggregation } from "./elements/Aggregation";
 import { LineBreak } from "./elements/LineBreak";
@@ -76,6 +78,8 @@ const allElements = [
   DropMenu,
   Page,
   Table,
+  ListColumn,
+  ListColumns,
 ];
 
 export /**
@@ -88,7 +92,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
+const layoutToNodes = (layout, query, actions, parent = "ROOT", options) => {
   //console.log("layoutToNodes", JSON.stringify(layout));
   /**
    * @param {object} segment
@@ -129,7 +133,6 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
         );
       else return <MatchElement key={ix} {...props} />;
     }
-
     if (segment.type === "blank") {
       return (
         <Text
@@ -285,6 +288,27 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
           )}
         />
       );
+    } else if (segment.besides && segment.list_columns) {
+      const addFields = options.additionalColumnFields;
+
+      return segment.besides.map((col, jx) => {
+        const addProps = {};
+        (addFields || []).forEach((f) => {
+          addProps[f.name] = col[f.name];
+        });
+        return (
+          <ListColumn
+            key={jx}
+            alignment={col.alignment}
+            header_label={col.header_label}
+            col_width={col.col_width}
+            showif={col.showif}
+            col_width_units={col.col_width_units}
+            contents={toTag(col.contents)}
+            {...addProps}
+          ></ListColumn>
+        );
+      });
     } else if (segment.besides) {
       return (
         <Columns
@@ -319,7 +343,7 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
       segment.above.forEach((child) => {
         if (child) go(child, parent);
       });
-    } else if (segment.besides) {
+    } else if (segment.besides && !segment.list_columns) {
       const node = query
         .parseReactElement(
           <Columns
@@ -341,7 +365,13 @@ const layoutToNodes = (layout, query, actions, parent = "ROOT") => {
       actions.addNodeTree(node, parent);
     } else {
       const tag = toTag(segment);
-      if (tag) {
+      if (Array.isArray(tag)) {
+        tag.forEach((t) => {
+          const node = query.parseReactElement(t).toNodeTree();
+          //console.log("other", node);
+          actions.addNodeTree(node, parent);
+        });
+      } else if (tag) {
         const node = query.parseReactElement(tag).toNodeTree();
         //console.log("other", node);
         actions.addNodeTree(node, parent);
@@ -365,7 +395,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
+const craftToSaltcorn = (nodes, startFrom = "ROOT", options) => {
   //console.log(JSON.stringify(nodes, null, 2));
   var columns = [];
   /**
@@ -421,6 +451,28 @@ const craftToSaltcorn = (nodes, startFrom = "ROOT") => {
       }
       return s;
     }
+    if (node.displayName === ListColumns.craft.displayName) {
+      return {
+        besides: node.nodes.map((nm) => go(nodes[nm])),
+        list_columns: true,
+      };
+    }
+    if (node.displayName === ListColumn.craft.displayName) {
+      const contents = go(nodes[node.linkedNodes.listcol]);
+      const addFields = options.additionalColumnFields;
+      const lc = {
+        contents,
+        col_width: node.props.col_width,
+        col_width_units: node.props.col_width_units,
+        alignment: node.props.alignment,
+        header_label: node.props.header_label,
+        showif: node.props.showif,
+      };
+      (addFields || []).forEach((f) => {
+        lc[f.name] = node.props[f.name];
+      });
+      return lc;
+    }
     if (node.isCanvas) {
       if (node.displayName === Container.craft.displayName)
         return {

package/tests/relations_finder.test.js

@@ -59,6 +59,7 @@ const doTest = (
     views: views,
     tableName: tableName,
     roles: [],
+    inJestTestingMode: true,
     excluded_subview_templates: excludedTemplates,
     // relationsCtx part
     relationsCache: relationsCache,