@saltcorn/builder 0.9.4-beta.5 → 0.9.4-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "0.9.4-beta.5",
+  "version": "0.9.4-beta.7",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",

package/src/components/Builder.js

@@ -396,8 +396,8 @@ const Builder = ({ options, layout, mode }) => {
   const nodekeys = useRef([]);
   const [isSaving, setIsSaving] = useState(false);
   const [isEnlarged, setIsEnlarged] = useState(false);
+  const [isLeftEnlarged, setIsLeftEnlarged] = useState(false);
   const [relationsCache, setRelationsCache] = useState({});
-
   return (
     <ErrorBoundary>
       <Editor onRender={RenderNode}>
@@ -412,7 +412,13 @@ const Builder = ({ options, layout, mode }) => {
               }}
             >
               <div className="row" style={{ marginTop: "-5px" }}>
-                <div className="col-sm-auto left-builder-col">
+                <div
+                  className={`col-sm-auto left-builder-col ${
+                    isLeftEnlarged
+                      ? "builder-left-enlarged"
+                      : "builder-left-shrunk"
+                  }`}
+                >
                   <div className="componets-and-library-accordion toolbox-card">
                     <InitNewElement
                       nodekeys={nodekeys}
@@ -421,19 +427,34 @@ const Builder = ({ options, layout, mode }) => {
                     <Accordion>
                       <div className="card mt-1" accordiontitle="Components">
                         {{
-                          show: <ToolboxShow />,
-                          edit: <ToolboxEdit />,
-                          page: <ToolboxPage />,
-                          filter: <ToolboxFilter />,
+                          show: <ToolboxShow expanded={isLeftEnlarged} />,
+                          edit: <ToolboxEdit expanded={isLeftEnlarged} />,
+                          page: <ToolboxPage expanded={isLeftEnlarged} />,
+                          filter: <ToolboxFilter expanded={isLeftEnlarged} />,
                         }[mode] || <div>Missing mode</div>}
                       </div>
                       <div accordiontitle="Library">
-                        <Library />
+                        <Library expanded={isLeftEnlarged} />
                       </div>
                     </Accordion>
                   </div>
-                  <div className="card toolbox-card pe-0">
-                    <div className="card-header">Layers</div>
+                  <div
+                    className="card toolbox-card pe-0"
+                    style={isLeftEnlarged ? { width: "12.35rem" } : {}}
+                  >
+                    <div className="card-header p-2 d-flex justify-content-between">
+                      <div>Layers</div>
+                      <FontAwesomeIcon
+                        icon={
+                          isLeftEnlarged
+                            ? faCaretSquareLeft
+                            : faCaretSquareRight
+                        }
+                        className={"float-end fa-lg"}
+                        onClick={() => setIsLeftEnlarged(!isLeftEnlarged)}
+                        title={isLeftEnlarged ? "Shrink" : "Enlarge"}
+                      />
+                    </div>
                     {showLayers && (
                       <div className="card-body p-0 builder-layers">
                         <Layers expandRootOnLoad={true} />
@@ -488,6 +509,7 @@ const Builder = ({ options, layout, mode }) => {
                       icon={isEnlarged ? faCaretSquareRight : faCaretSquareLeft}
                       className={"float-end me-2 mt-1 fa-lg"}
                       onClick={() => setIsEnlarged(!isEnlarged)}
+                      title={isEnlarged ? "Shrink" : "Enlarge"}
                     />
 
                     <SettingsPanel />

package/src/components/Library.js

@@ -20,18 +20,7 @@ import faIcons from "./elements/faicons";
 import { craftToSaltcorn, layoutToNodes } from "./storage";
 import optionsCtx from "./context";
 import { WrapElem } from "./Toolbox";
-import { isEqual, throttle } from "lodash";
-
-/**
- *
- * @param {object[]} xs
- * @returns {object[]}
- */
-const twoByTwos = (xs) => {
-  if (xs.length <= 2) return [xs];
-  const [x, y, ...rest] = xs;
-  return [[x, y], ...twoByTwos(rest)];
-};
+import { isEqual, throttle, chunk } from "lodash";
 
 export /**
  * @param {object} props
@@ -184,7 +173,7 @@ export /**
  * @subcategory components
  * @namespace
  */
-const Library = () => {
+const Library = ({ expanded }) => {
   const { actions, selected, query, connectors } = useEditor((state, query) => {
     return {
       selected: state.events.selected,
@@ -216,7 +205,10 @@ const Library = () => {
     setRecent([...recent, data]);
   };
 
-  const elemRows = twoByTwos([...(options.library || []), ...recent]);
+  const elemRows = chunk(
+    [...(options.library || []), ...recent],
+    expanded ? 3 : 2
+  );
   return (
     <div className="builder-library">
       <div className="dropdown">

package/src/components/Toolbox.js

@@ -35,6 +35,7 @@ import {
   SegmentedNav,
   TextareaT,
 } from "react-bootstrap-icons";
+import { chunk } from "lodash";
 
 /**
  *
@@ -510,13 +511,24 @@ const TableElem = ({ connectors }) => (
   </WrapElem>
 );
 
+const chunkToolBox = (elems, expanded) => {
+  const chunks = chunk(elems, expanded ? 3 : 2);
+  return chunks.map((es, ix) => (
+    <div className="toolbar-row" key={ix}>
+      {es.map((e, j) => (
+        <Fragment key={j}>{e}</Fragment>
+      ))}
+    </div>
+  ));
+};
+
 export /**
  * @returns {Fragment}
  * @category saltcorn-builder
  * @subcategory components / Toolbox
  * @namespace
  */
-const ToolboxShow = () => {
+const ToolboxShow = ({ expanded }) => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
   const {
@@ -527,52 +539,35 @@ const ToolboxShow = () => {
     views,
     images,
   } = options;
-  return (
-    <Fragment>
-      <div className="toolbar-row">
-        <TextElem connectors={connectors} />
-        <ColumnsElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <FieldElem
-          connectors={connectors}
-          fields={fields}
-          field_view_options={field_view_options}
-        />
-        <LineBreakElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <JoinFieldElem connectors={connectors} options={options} />
-        <ViewLinkElem connectors={connectors} options={options} />
-      </div>
-      <div className="toolbar-row">
-        <ActionElem connectors={connectors} options={options} />
-        <LinkElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <AggregationElem
-          connectors={connectors}
-          child_field_list={child_field_list}
-          agg_field_opts={agg_field_opts}
-        />
-        <ViewElem connectors={connectors} views={views} />
-      </div>
-      <div className="toolbar-row">
-        <ContainerElem connectors={connectors} />
-        <CardElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <TabsElem connectors={connectors} />
-        <ImageElem connectors={connectors} images={images} />
-      </div>
-      <div className="toolbar-row">
-        <HTMLElem connectors={connectors} />
-        <DropMenuElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <TableElem connectors={connectors} />
-      </div>
-    </Fragment>
+  return chunkToolBox(
+    [
+      <TextElem connectors={connectors} />,
+      <ColumnsElem connectors={connectors} />,
+      <FieldElem
+        connectors={connectors}
+        fields={fields}
+        field_view_options={field_view_options}
+      />,
+      <LineBreakElem connectors={connectors} />,
+      <JoinFieldElem connectors={connectors} options={options} />,
+      <ViewLinkElem connectors={connectors} options={options} />,
+      <ActionElem connectors={connectors} options={options} />,
+      <LinkElem connectors={connectors} />,
+      <AggregationElem
+        connectors={connectors}
+        child_field_list={child_field_list}
+        agg_field_opts={agg_field_opts}
+      />,
+      <ViewElem connectors={connectors} views={views} />,
+      <ContainerElem connectors={connectors} />,
+      <CardElem connectors={connectors} />,
+      <TabsElem connectors={connectors} />,
+      <ImageElem connectors={connectors} images={images} />,
+      <HTMLElem connectors={connectors} />,
+      <DropMenuElem connectors={connectors} />,
+      <TableElem connectors={connectors} />,
+    ],
+    expanded
   );
 };
 
@@ -582,50 +577,34 @@ export /**
  * @subcategory components / Toolbox
  * @namespace
  */
-const ToolboxFilter = () => {
+const ToolboxFilter = ({ expanded }) => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
   const { fields, views, field_view_options } = options;
-  return (
-    <Fragment>
-      <div className="toolbar-row">
-        <TextElem connectors={connectors} />
-        <ColumnsElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <FieldElem
-          connectors={connectors}
-          fields={fields}
-          field_view_options={field_view_options}
-        />
-        <LineBreakElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <DropDownFilterElem connectors={connectors} fields={fields} />
-        <ToggleFilterElem connectors={connectors} fields={fields} />
-      </div>
-      <div className="toolbar-row">
-        <SearchElem connectors={connectors} />
-        <ActionElem connectors={connectors} options={options} />
-      </div>
-      <div className="toolbar-row">
-        <ContainerElem connectors={connectors} />
-
-        <CardElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <TabsElem connectors={connectors} />
-        <ViewElem connectors={connectors} views={views} />
-      </div>
-      <div className="toolbar-row">
-        <HTMLElem connectors={connectors} />
-        <LinkElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <TableElem connectors={connectors} />
-        <DropMenuElem connectors={connectors} />
-      </div>
-    </Fragment>
+  return chunkToolBox(
+    [
+      <TextElem connectors={connectors} />,
+      <ColumnsElem connectors={connectors} />,
+      <FieldElem
+        connectors={connectors}
+        fields={fields}
+        field_view_options={field_view_options}
+      />,
+      <LineBreakElem connectors={connectors} />,
+      <DropDownFilterElem connectors={connectors} fields={fields} />,
+      <ToggleFilterElem connectors={connectors} fields={fields} />,
+      <SearchElem connectors={connectors} />,
+      <ActionElem connectors={connectors} options={options} />,
+      <ContainerElem connectors={connectors} />,
+      <CardElem connectors={connectors} />,
+      <TabsElem connectors={connectors} />,
+      <ViewElem connectors={connectors} views={views} />,
+      <HTMLElem connectors={connectors} />,
+      <LinkElem connectors={connectors} />,
+      <TableElem connectors={connectors} />,
+      <DropMenuElem connectors={connectors} />,
+    ],
+    expanded
   );
 };
 
@@ -635,49 +614,34 @@ export /**
  * @subcategory components / Toolbox
  * @namespace
  */
-const ToolboxEdit = () => {
+const ToolboxEdit = ({ expanded }) => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
   const { fields, field_view_options, images, views } = options;
-  return (
-    <Fragment>
-      <div className="toolbar-row">
-        <TextElem connectors={connectors} />
-        <ColumnsElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <FieldElem
-          connectors={connectors}
-          fields={fields}
-          field_view_options={field_view_options}
-        />
-        <LineBreakElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <ActionElem connectors={connectors} options={options} />
-        <ContainerElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <CardElem connectors={connectors} />
-        <TabsElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <LinkElem connectors={connectors} />
-        <ImageElem connectors={connectors} images={images} />
-      </div>
-      <div className="toolbar-row">
-        <HTMLElem connectors={connectors} />
-        <ViewElem connectors={connectors} views={views} />
-      </div>
-      <div className="toolbar-row">
-        <JoinFieldElem connectors={connectors} options={options} />
-        <DropMenuElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <TableElem connectors={connectors} />
-        <ViewLinkElem connectors={connectors} options={options} />
-      </div>
-    </Fragment>
+  return chunkToolBox(
+    [
+      <TextElem connectors={connectors} />,
+      <ColumnsElem connectors={connectors} />,
+      <FieldElem
+        connectors={connectors}
+        fields={fields}
+        field_view_options={field_view_options}
+      />,
+      <LineBreakElem connectors={connectors} />,
+      <ActionElem connectors={connectors} options={options} />,
+      <ContainerElem connectors={connectors} />,
+      <CardElem connectors={connectors} />,
+      <TabsElem connectors={connectors} />,
+      <LinkElem connectors={connectors} />,
+      <ImageElem connectors={connectors} images={images} />,
+      <HTMLElem connectors={connectors} />,
+      <ViewElem connectors={connectors} views={views} />,
+      <JoinFieldElem connectors={connectors} options={options} />,
+      <DropMenuElem connectors={connectors} />,
+      <TableElem connectors={connectors} />,
+      <ViewLinkElem connectors={connectors} options={options} />,
+    ],
+    expanded
   );
 };
 
@@ -687,43 +651,28 @@ export /**
  * @subcategory components / Toolbox
  * @namespace
  */
-const ToolboxPage = () => {
+const ToolboxPage = ({ expanded }) => {
   const { connectors, query } = useEditor();
   const options = useContext(optionsCtx);
   const { views, pages, images } = options;
-  return (
-    <Fragment>
-      <div className="toolbar-row">
-        <TextElem connectors={connectors} />
-        <ColumnsElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <LineBreakElem connectors={connectors} />
-        <HTMLElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <CardElem connectors={connectors} />
-        <ImageElem connectors={connectors} images={images} />{" "}
-      </div>
-      <div className="toolbar-row">
-        <LinkElem connectors={connectors} />
-        <ViewElem connectors={connectors} views={views} isPageEdit={true} />
-      </div>
-      <div className="toolbar-row">
-        <SearchElem connectors={connectors} />
-        <ActionElem connectors={connectors} options={options} />
-      </div>
-      <div className="toolbar-row">
-        <ContainerElem connectors={connectors} />
-        <TabsElem connectors={connectors} />
-      </div>
-      <div className="toolbar-row">
-        <DropMenuElem connectors={connectors} />
-        <PageElem connectors={connectors} pages={pages} />
-      </div>
-      <div className="toolbar-row">
-        <TableElem connectors={connectors} />
-      </div>
-    </Fragment>
+  return chunkToolBox(
+    [
+      <TextElem connectors={connectors} />,
+      <ColumnsElem connectors={connectors} />,
+      <LineBreakElem connectors={connectors} />,
+      <HTMLElem connectors={connectors} />,
+      <CardElem connectors={connectors} />,
+      <ImageElem connectors={connectors} images={images} />,
+      <LinkElem connectors={connectors} />,
+      <ViewElem connectors={connectors} views={views} isPageEdit={true} />,
+      <SearchElem connectors={connectors} />,
+      <ActionElem connectors={connectors} options={options} />,
+      <ContainerElem connectors={connectors} />,
+      <TabsElem connectors={connectors} />,
+      <DropMenuElem connectors={connectors} />,
+      <PageElem connectors={connectors} pages={pages} />,
+      <TableElem connectors={connectors} />,
+    ],
+    expanded
   );
 };

package/src/components/elements/Columns.js

@@ -250,7 +250,7 @@ const ColumnsSettings = () => {
           setProp={setProp}
           props={node}
         ></ConfigField>
-        <table>
+        <table className="w-100">
           <tbody>
             <SettingsSectionHeaderRow title="Align" />
             <SettingsRow

package/src/components/elements/Tabs.js

@@ -424,7 +424,7 @@ const TabsSettings = () => {
                 />
               </td>
             </tr>
-            {options.mode === "show" ? (
+            {options.mode === "show" || options.mode === "edit" ? (
               <Fragment>
                 <tr>
                   <th colSpan="2">Show if formula</th>

package/src/components/elements/utils.js

@@ -1505,6 +1505,14 @@ export const buildBootstrapOptions = (values) => {
   ));
 };
 
+export const arrayChunks = (xs, n) => {
+  const arrayOfArrays = [];
+  for (var i = 0; i < bigarray.length; i += n) {
+    arrayOfArrays.push(bigarray.slice(i, i + n));
+  }
+  return arrayOfArrays;
+};
+
 export const prepCacheAndFinder = ({
   tables,
   views,