@saltcorn/builder 1.3.1-beta.2 → 1.3.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.3.1-beta.2",
+  "version": "1.3.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.3.1-beta.2",
+    "@saltcorn/common-code": "1.3.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

@@ -127,7 +127,8 @@ const SettingsPanel = () => {
    */
   const handleUserKeyPress = (event) => {
     const { keyCode, target } = event;
-    if (target.tagName.toLowerCase() === "body" && selected) {
+    const tagName = target.tagName.toLowerCase();
+    if ((tagName === "body" || tagName === "button") && selected) {
       //8 backsp, 46 del
       if ((keyCode === 8 || keyCode === 46) && selected.id === "ROOT") {
         deleteChildren();

package/src/components/elements/Action.js

@@ -22,6 +22,7 @@ import {
 } from "./utils";
 import { ntimes } from "./Columns";
 import { ArrayManager } from "./ArrayManager";
+import Select from "react-select";
 
 export /**
  *
@@ -155,6 +156,40 @@ const ActionSettings = () => {
           step_action_names?.[use_setting_action_n]
         )}`
       : "";
+  const setAction = (value0) => {
+    const value = value0.value || value0;
+    setProp((prop) => {
+      prop.name = value;
+      if (options.mode === "filter" && value !== "Clear") {
+        const rowRequired =
+          options.actionConstraints &&
+          options.actionConstraints[value]?.requireRow;
+        if (!action_row_variable) {
+          prop.action_row_variable = rowRequired ? "state" : "none";
+        } else if (rowRequired && action_row_variable === "none") {
+          prop.action_row_variable = "state";
+        }
+      }
+      if (value === "Multi-step action" && !nsteps) prop.nsteps = 1;
+      if (value === "Multi-step action" && !setting_action_n)
+        prop.setting_action_n = 0;
+      if (value === "Multi-step action" && !configuration.steps)
+        prop.configuration = { steps: [] };
+    });
+    setInitialConfig(setProp, value, getCfgFields(value));
+  };
+  const actionOptions = options.actions.filter(Boolean).map((f, ix) =>
+    f.optgroup && !f.options.length
+      ? null
+      : f.optgroup
+        ? {
+            label: f.label,
+            options: f.options.map((a, jx) => ({ label: a, value: a })),
+          }
+        : { label: f, value: f }
+  );
+  const selectedAction = { label: name, value: name };
+
   return (
     <div>
       <table className="w-100">
@@ -163,56 +198,20 @@ const ActionSettings = () => {
             <td>
               <label>Action</label>
             </td>
-            <td>
-              <select
-                value={name}
-                className="form-control form-select"
-                onChange={(e) => {
-                  if (!e.target) return;
-                  const value = e.target.value;
-                  setProp((prop) => {
-                    prop.name = value;
-                    if (options.mode === "filter" && value !== "Clear") {
-                      const rowRequired =
-                        options.actionConstraints &&
-                        options.actionConstraints[value]?.requireRow;
-                      if (!action_row_variable) {
-                        prop.action_row_variable = rowRequired
-                          ? "state"
-                          : "none";
-                      } else if (
-                        rowRequired &&
-                        action_row_variable === "none"
-                      ) {
-                        prop.action_row_variable = "state";
-                      }
-                    }
-                    if (value === "Multi-step action" && !nsteps)
-                      prop.nsteps = 1;
-                    if (value === "Multi-step action" && !setting_action_n)
-                      prop.setting_action_n = 0;
-                    if (value === "Multi-step action" && !configuration.steps)
-                      prop.configuration = { steps: [] };
-                  });
-                  setInitialConfig(setProp, value, getCfgFields(value));
-                }}
-              >
-                {options.actions.filter(Boolean).map((f, ix) =>
-                  f.optgroup && !f.options.length ? null : f.optgroup ? (
-                    <optgroup key={ix} label={f.label}>
-                      {f.options.map((a, jx) => (
-                        <option key={jx} value={a}>
-                          {a}
-                        </option>
-                      ))}
-                    </optgroup>
-                  ) : (
-                    <option key={ix} value={f}>
-                      {f}
-                    </option>
-                  )
-                )}
-              </select>
+            <td>             
+              {options.inJestTestingMode ? null : (
+                <Select
+                  options={actionOptions}
+                  className="react-select action-selector"
+                  value={selectedAction}
+                  defaultValue={selectedAction}
+                  onChange={setAction}
+                  menuPortalTarget={document.body}
+                  styles={{
+                    menuPortal: (base) => ({ ...base, zIndex: 19999 }),
+                  }}
+                ></Select>
+              )}
             </td>
           </tr>
           {name !== "Clear" && options.mode === "filter" ? (

package/src/components/elements/View.js

@@ -261,6 +261,7 @@ const ViewSettings = () => {
               <Select
                 options={viewOptions}
                 value={selectedView}
+                className="react-select view-selector"
                 onChange={set_view_name}
                 onBlur={set_view_name}
                 menuPortalTarget={document.body}
@@ -302,6 +303,7 @@ const ViewSettings = () => {
             <Select
               options={viewOptions}
               value={selectedView}
+              className="react-select view-selector"
               onChange={(e) => {
                 const target_value = e?.target?.value || e?.value;
                 setProp((prop) => {

package/src/components/elements/ViewLink.js

@@ -254,6 +254,7 @@ const ViewLinkSettings = () => {
               {options.inJestTestingMode ? null : (
                 <Select
                   options={viewOptions}
+                  className="react-select viewlink-selector"
                   value={selectedView}
                   onChange={set_view_name}
                   onBlur={set_view_name}

package/src/components/elements/utils.js

@@ -135,7 +135,7 @@ export const FormulaTooltip = () => {
   
       <div>
         In view formulae, you can use aggregation formulae. The syntax for this is 
-        <code>{inbound_table}${inboundkey_field}${target_field}${aggrgation}</code> 
+        <code>[inbound_table]$[inboundkey_field]$[target_field]$[aggrgation]</code> 
         The aggregation (which should be lower case) can be ommitted and defaults to 
         <code>array_agg</code>. Examples: <code>patients$favbook$id$count</code> or 
         <code>patients$favbook$id</code>. 
@@ -1056,6 +1056,7 @@ const ConfigField = ({
         return (
           <Select
             options={seloptions}
+            className="react-select selectized-field"
             value={seloptions.find((so) => value === so.value)}
             onChange={(e) =>
               (e.name && myOnChange(e.name)) ||