@saltcorn/builder 1.1.1-beta.2 → 1.1.1-beta.3

package/dist/builder_bundle.js.LICENSE.txt

@@ -0,0 +1,96 @@
+/*
+object-assign
+(c) Sindre Sorhus
+@license MIT
+*/
+
+/*!
+  Copyright (c) 2017 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * Font Awesome Free 5.15.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
+
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
+
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+
+/*!*
+ * @license Copyright (c) 2003-2021, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md.
+ */
+
+/**
+ * @license
+ * Lodash <https://lodash.com/>
+ * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
+ * Released under MIT license <https://lodash.com/license>
+ * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
+ * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
+ */
+
+/** @license React v0.19.1
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.1.1-beta.2",
+  "version": "1.1.1-beta.3",
   "description": "Drag and drop view builder for Saltcorn, open-source no-code platform",
   "main": "index.js",
   "homepage": "https://saltcorn.com",
@@ -20,7 +20,7 @@
     "@babel/preset-react": "7.24.7",
     "@craftjs/core": "0.1.0-beta.20",
     "@craftjs/utils": "0.1.0-beta.20",
-    "@saltcorn/common-code": "1.1.1-beta.2",
+    "@saltcorn/common-code": "1.1.1-beta.3",
     "saltcorn-craft-layers-noeye": "0.1.0-beta.22",
     "@fonticonpicker/react-fonticonpicker": "1.2.0",
     "@fortawesome/fontawesome-svg-core": "1.2.34",

package/src/components/Builder.js

@@ -32,6 +32,7 @@ import { ToggleFilter } from "./elements/ToggleFilter";
 import optionsCtx from "./context";
 import PreviewCtx from "./preview_context";
 import RelationsCtx from "./relations_context";
+import StorageCtx from "./storage_context";
 import {
   ToolboxShow,
   ToolboxEdit,
@@ -206,7 +207,7 @@ const SettingsPanel = () => {
       sibIx + 1
     );
   };
-  
+
   return (
     <div className="settings-panel card mt-1">
       <div className="card-header px-2 py-1">
@@ -423,134 +424,143 @@ const Builder = ({ options, layout, mode }) => {
                 setRelationsCache,
               }}
             >
-              <div className="row" ref={ref} style={{ marginTop: "-5px" }}>
-                <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}
-                      setSavingState={setSavingState}
-                      savingState={savingState}
-                    />
-                    <Accordion>
-                      <div className="card mt-1" accordiontitle="Components">
-                        {{
-                          show: <ToolboxShow expanded={isLeftEnlarged} />,
-                          list: <ToolboxList expanded={isLeftEnlarged} />,
-                          edit: <ToolboxEdit expanded={isLeftEnlarged} />,
-                          page: <ToolboxPage expanded={isLeftEnlarged} />,
-                          filter: <ToolboxFilter expanded={isLeftEnlarged} />,
-                        }[mode] || <div>Missing mode</div>}
-                      </div>
-                      <div accordiontitle="Library">
-                        <Library expanded={isLeftEnlarged} />
+              <StorageCtx.Provider
+                value={{
+                  craftToSaltcorn,
+                  layoutToNodes,
+                }}
+              >
+                <div className="row" ref={ref} style={{ marginTop: "-5px" }}>
+                  <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}
+                        setSavingState={setSavingState}
+                        savingState={savingState}
+                      />
+                      <Accordion>
+                        <div className="card mt-1" accordiontitle="Components">
+                          {{
+                            show: <ToolboxShow expanded={isLeftEnlarged} />,
+                            list: <ToolboxList expanded={isLeftEnlarged} />,
+                            edit: <ToolboxEdit expanded={isLeftEnlarged} />,
+                            page: <ToolboxPage expanded={isLeftEnlarged} />,
+                            filter: <ToolboxFilter expanded={isLeftEnlarged} />,
+                          }[mode] || <div>Missing mode</div>}
+                        </div>
+                        <div accordiontitle="Library">
+                          <Library expanded={isLeftEnlarged} />
+                        </div>
+                      </Accordion>
+                    </div>
+                    <div
+                      className="card toolbox-card pe-0"
+                      style={isLeftEnlarged ? { width: "13.4rem" } : {}}
+                    >
+                      <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>
-                    </Accordion>
+                      {showLayers && (
+                        <div className="card-body p-0 builder-layers">
+                          <Layers expandRootOnLoad={true} />
+                        </div>
+                      )}
+                    </div>
                   </div>
                   <div
-                    className="card toolbox-card pe-0"
-                    style={isLeftEnlarged ? { width: "13.4rem" } : {}}
+                    id="builder-main-canvas"
+                    style={{ height: canvasHeight }}
+                    className={`col builder-mode-${options.mode} ${
+                      options.mode !== "list" ? "emptymsg" : ""
+                    }`}
                   >
-                    <div className="card-header p-2 d-flex justify-content-between">
-                      <div>Layers</div>
+                    <div>
+                      <Frame
+                        resolver={{
+                          Text,
+                          Empty,
+                          Columns,
+                          JoinField,
+                          Field,
+                          ViewLink,
+                          Action,
+                          HTMLCode,
+                          LineBreak,
+                          Aggregation,
+                          Card,
+                          Image,
+                          Link,
+                          View,
+                          SearchBar,
+                          Container,
+                          Column,
+                          DropDownFilter,
+                          DropMenu,
+                          Tabs,
+                          Table,
+                          ToggleFilter,
+                          ListColumn,
+                          ListColumns,
+                        }}
+                      >
+                        {options.mode === "list" ? (
+                          <Element canvas is={ListColumns}></Element>
+                        ) : (
+                          <Element canvas is={Column}></Element>
+                        )}
+                      </Frame>
+                      {options.mode === "list" ? <AddColumnButton /> : null}
+                    </div>
+                  </div>
+                  <div className="col-sm-auto builder-sidebar">
+                    <div style={{ width: isEnlarged ? "28rem" : "16rem" }}>
+                      <NextButton layout={layout} />
+                      <HistoryPanel />
+                      <FontAwesomeIcon
+                        icon={faSave}
+                        className={savingState.isSaving ? "d-inline" : "d-none"}
+                      />
+                      <FontAwesomeIcon
+                        icon={faExclamationTriangle}
+                        color="#ff0033"
+                        className={savingState.error ? "d-inline" : "d-none"}
+                      />
                       <FontAwesomeIcon
                         icon={
-                          isLeftEnlarged
-                            ? faCaretSquareLeft
-                            : faCaretSquareRight
+                          isEnlarged ? faCaretSquareRight : faCaretSquareLeft
                         }
-                        className={"float-end fa-lg"}
-                        onClick={() => setIsLeftEnlarged(!isLeftEnlarged)}
-                        title={isLeftEnlarged ? "Shrink" : "Enlarge"}
+                        className={"float-end me-2 mt-1 fa-lg"}
+                        onClick={() => setIsEnlarged(!isEnlarged)}
+                        title={isEnlarged ? "Shrink" : "Enlarge"}
                       />
-                    </div>
-                    {showLayers && (
-                      <div className="card-body p-0 builder-layers">
-                        <Layers expandRootOnLoad={true} />
+                      <div
+                        className={` ${
+                          savingState.error ? "d-block" : "d-none"
+                        } my-2 fw-bold`}
+                      >
+                        your work is not being saved
                       </div>
-                    )}
-                  </div>
-                </div>
-                <div
-                  id="builder-main-canvas"
-                  style={{ height: canvasHeight }}
-                  className={`col builder-mode-${options.mode} ${
-                    options.mode !== "list" ? "emptymsg" : ""
-                  }`}
-                >
-                  <div>
-                    <Frame
-                      resolver={{
-                        Text,
-                        Empty,
-                        Columns,
-                        JoinField,
-                        Field,
-                        ViewLink,
-                        Action,
-                        HTMLCode,
-                        LineBreak,
-                        Aggregation,
-                        Card,
-                        Image,
-                        Link,
-                        View,
-                        SearchBar,
-                        Container,
-                        Column,
-                        DropDownFilter,
-                        DropMenu,
-                        Tabs,
-                        Table,
-                        ToggleFilter,
-                        ListColumn,
-                        ListColumns,
-                      }}
-                    >
-                      {options.mode === "list" ? (
-                        <Element canvas is={ListColumns}></Element>
-                      ) : (
-                        <Element canvas is={Column}></Element>
-                      )}
-                    </Frame>
-                    {options.mode === "list" ? <AddColumnButton /> : null}
-                  </div>
-                </div>
-                <div className="col-sm-auto builder-sidebar">
-                  <div style={{ width: isEnlarged ? "28rem" : "16rem" }}>
-                    <NextButton layout={layout} />
-                    <HistoryPanel />
-                    <FontAwesomeIcon
-                      icon={faSave}
-                      className={savingState.isSaving ? "d-inline" : "d-none"}
-                    />
-                    <FontAwesomeIcon
-                      icon={faExclamationTriangle}
-                      color="#ff0033"
-                      className={savingState.error ? "d-inline" : "d-none"}
-                    />
-                    <FontAwesomeIcon
-                      icon={isEnlarged ? faCaretSquareRight : faCaretSquareLeft}
-                      className={"float-end me-2 mt-1 fa-lg"}
-                      onClick={() => setIsEnlarged(!isEnlarged)}
-                      title={isEnlarged ? "Shrink" : "Enlarge"}
-                    />
-                    <div
-                      className={` ${
-                        savingState.error ? "d-block" : "d-none"
-                      } my-2 fw-bold`}
-                    >
-                      your work is not being saved
+                      <SettingsPanel />
                     </div>
-                    <SettingsPanel />
                   </div>
                 </div>
-              </div>
+              </StorageCtx.Provider>
             </RelationsCtx.Provider>
           </PreviewCtx.Provider>
         </Provider>

package/src/components/elements/Action.js

@@ -21,6 +21,7 @@ import {
   ConfigField,
 } from "./utils";
 import { ntimes } from "./Columns";
+import { ArrayManager } from "./ArrayManager";
 
 export /**
  *
@@ -314,46 +315,20 @@ const ActionSettings = () => {
       ) : null}
       {name === "Multi-step action" ? (
         <Fragment>
-          <table className="mb-2">
-            <tbody>
-              <tr>
-                <td className="w-50">
-                  <label>#Steps</label>
-                </td>
-                <td>
-                  <input
-                    type="number"
-                    value={nsteps}
-                    className="form-control d-inline"
-                    step="1"
-                    min="1"
-                    onChange={(e) => {
-                      if (!e.target) return;
-                      const value = e.target.value;
-                      setProp((prop) => {
-                        prop.nsteps = value;
-                      });
-                    }}
-                  />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <ConfigField
-            field={{
-              name: "setting_action_n",
-              label: "Column number",
-              type: "btn_select",
-              options: ntimes(nsteps, (i) => ({
-                value: i,
-                title: `${i + 1}`,
-                label: `${i + 1}`,
-              })),
-            }}
+          <label>Steps</label>
+
+          <ArrayManager
             node={node}
             setProp={setProp}
-            props={node}
-          ></ConfigField>
+            countProp={"nsteps"}
+            currentProp={"setting_action_n"}
+            managedArrays={[
+              "step_action_names",
+              "step_only_ifs",
+              "configuration.steps",
+            ]}
+          ></ArrayManager>
+
           <label>Action</label>
           <select
             value={step_action_names?.[use_setting_action_n] || ""}