@saltcorn/builder 1.0.0-rc.1 → 1.0.0-rc.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saltcorn/builder",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.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.0.0-rc.1",
+    "@saltcorn/common-code": "1.0.0-rc.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

@@ -257,6 +257,32 @@ const SettingsPanel = () => {
   );
 };
 
+// https://stackoverflow.com/questions/36862334/get-viewport-window-height-in-reactjs
+function getWindowDimensions() {
+  const { innerWidth: windowWidth, innerHeight: windowHeight } = window;
+  return {
+    windowWidth,
+    windowHeight,
+  };
+}
+
+function useWindowDimensions() {
+  const [windowDimensions, setWindowDimensions] = useState(
+    getWindowDimensions()
+  );
+
+  useEffect(() => {
+    function handleResize() {
+      setWindowDimensions(getWindowDimensions());
+    }
+
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  return windowDimensions;
+}
+
 const AddColumnButton = () => {
   const { query, actions } = useEditor(() => {});
   const options = useContext(optionsCtx);
@@ -369,6 +395,23 @@ const Builder = ({ options, layout, mode }) => {
   const [isEnlarged, setIsEnlarged] = useState(false);
   const [isLeftEnlarged, setIsLeftEnlarged] = useState(false);
   const [relationsCache, setRelationsCache] = useState({});
+  const { windowWidth, windowHeight } = useWindowDimensions();
+
+  const [builderHeight, setBuilderHeight] = useState(0);
+  const [builderTop, setBuilderTop] = useState(0);
+
+  const ref = useRef(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    setBuilderHeight(ref.current.clientHeight);
+    const rect = ref.current.getBoundingClientRect();
+    setBuilderTop(rect.top);
+  });
+
+  const canvasHeight =
+    Math.max(windowHeight - builderTop, builderHeight, 600) - 10;
+
   return (
     <ErrorBoundary>
       <Editor onRender={RenderNode}>
@@ -382,7 +425,7 @@ const Builder = ({ options, layout, mode }) => {
                 setRelationsCache,
               }}
             >
-              <div className="row" style={{ marginTop: "-5px" }}>
+              <div className="row" ref={ref} style={{ marginTop: "-5px" }}>
                 <div
                   className={`col-sm-auto left-builder-col ${
                     isLeftEnlarged
@@ -437,6 +480,7 @@ const Builder = ({ options, layout, mode }) => {
                 </div>
                 <div
                   id="builder-main-canvas"
+                  style={{ height: canvasHeight }}
                   className={`col builder-mode-${options.mode} ${
                     options.mode !== "list" ? "emptymsg" : ""
                   }`}

package/src/components/elements/utils.js

@@ -799,7 +799,7 @@ const ConfigField = ({
     //pick first value to mimic html form behaviour
     const options = getOptions();
     let o;
-    if ((o = options[0]))
+    if (options && (o = options[0]))
       useEffect(() => {
         myOnChange(typeof o === "string" ? o : o.value || o.name || o);
       }, []);
@@ -939,7 +939,7 @@ const ConfigField = ({
             onChange={(e) => e.target && myOnChange(e.target.value)}
             onBlur={(e) => e.target && myOnChange(e.target.value)}
           >
-            {field.options.map((o, ix) =>
+            {(field.options || []).map((o, ix) =>
               o.name && o.label ? (
                 <option key={ix} value={o.name}>
                   {o.label}