datastake-daf 0.6.438 → 0.6.440

package/dist/components/index.js

@@ -14536,149 +14536,113 @@ DAFFooter.propTypes = {
 };
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
-const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const FOOTER_HEIGHT = 70;
+const GAP_BETWEEN_BLOCKS = 24; // vertical spacing inside page
+const FILL_RATIO = 0.80; // your "80% of page" rule
+
+const CONTENT_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
 const Row = _ref => {
   let {
     widgets,
     i,
     onChangeHeight = () => {}
   } = _ref;
-  const ref = React.useRef();
-  const [height, setHeight] = React.useState(0);
-  React.useEffect(() => {
-    const observer = new ResizeObserver(entries => {
-      for (const entry of entries) {
-        setHeight(entry.contentRect.height);
-      }
-    });
-    observer.observe(ref.current);
-    return () => observer.disconnect();
-  }, []);
-  React.useEffect(() => {
-    if (height) {
-      onChangeHeight(i, {
-        height,
+  const ref = React.useRef(null);
+  React.useLayoutEffect(() => {
+    if (!ref.current) return;
+    const ro = new ResizeObserver(entries => {
+      var _entries$0$contentRec, _entries$;
+      const h = (_entries$0$contentRec = (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentRect) === null || _entries$ === void 0 ? void 0 : _entries$.height) !== null && _entries$0$contentRec !== void 0 ? _entries$0$contentRec : 0;
+      if (h) onChangeHeight(i, {
+        height: h,
         ref
       });
-    }
-  }, [height]);
+    });
+    ro.observe(ref.current);
+    return () => ro.disconnect();
+  }, [i, onChangeHeight]);
   return /*#__PURE__*/jsxRuntime.jsx("section", {
     ref: ref,
     style: widgets.style,
-    children: typeof widgets.render === 'function' ? widgets.render() : null
+    children: typeof widgets.render === "function" ? widgets.render() : null
   });
 };
 function PdfView(_ref2) {
   let {
     config = [],
     customClassName,
-    title = 'Title',
-    imgSrc = '',
-    userId = 'IDD-0000000',
-    accountId = 'IDD-0000000',
-    documentId = 'IDD-0000000',
-    downloadId = 'DWL-00000123'
+    title = "Title",
+    imgSrc = "",
+    userId = "IDD-0000000",
+    accountId = "IDD-0000000",
+    documentId = "IDD-0000000",
+    downloadId = "DWL-00000123"
   } = _ref2;
-  const [sectionsConfig, setSectionsConfig] = React.useState({});
-  const [pages, setPages] = React.useState([1]);
-  const doSizing = React.useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
-    if (keys.length === config.length) {
-      let incrHeight = 0;
-      keys.forEach(k => {
-        const {
-          ref
-        } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      });
-      keys.forEach((k, i) => {
-        const {
-          height,
-          ref
-        } = sectionsConfig[k];
-        if (i === 0) {
-          ref.current.style.marginTop = "".concat(HEADER_HEIGHT, "px");
-          incrHeight += HEADER_HEIGHT;
-        }
-        const newHeight = incrHeight + height;
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
-        }
-        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
-          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
-          _page += 1;
-          _pages.push(_page);
-          if (sectionsConfig[keys[i - 1]]) {
-            const {
-              ref: topRef
-            } = sectionsConfig[keys[i - 1]];
-            topRef.current.style.marginBottom = "".concat(dif + HEADER_HEIGHT - 24, "px");
-            incrHeight = height + 24 + HEADER_HEIGHT;
-            // console.log('margin', dif);
-          }
-        } else {
-          incrHeight = newHeight + 24;
-        }
-        // console.groupEnd();
-      });
-      setPages(_pages);
-    }
-  }, [sectionsConfig]);
-  React.useEffect(() => {
-    doSizing();
-  }, [doSizing]);
+  // index -> {height, ref}
+  const [sections, setSections] = React.useState({});
+  // pageMap is an array of arrays of indices, e.g. [[0,1,2],[3,4],...]
+  const [pageMap, setPageMap] = React.useState([]);
   const onChangeHeight = React.useCallback((index, conf) => {
-    setSectionsConfig(prev => _objectSpread2(_objectSpread2({}, prev), {}, {
-      [index]: conf
-    }));
-  }, []);
-  const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
-  const renderDashboard = React.useCallback(() => {
-    return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "view-content",
-      children: /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "daf-analysis-layout",
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: "sections-cont",
-          children: config.map((widgets, i) => /*#__PURE__*/jsxRuntime.jsx(Row, {
-            widgets: widgets,
-            i: i,
-            onChangeHeight: onChangeHeight
-          }, "dashboard-sections=".concat(i + 1)))
-        })
-      })
+    setSections(prev => {
+      var _prev$index;
+      return ((_prev$index = prev[index]) === null || _prev$index === void 0 ? void 0 : _prev$index.height) === conf.height ? prev : _objectSpread2(_objectSpread2({}, prev), {}, {
+        [index]: conf
+      });
     });
-  }, [config, onChangeHeight]);
-
-  // <div className="daf-analysis">
-  // <Header title={t('Dashboard Title')} />
+  }, []);
 
-  // <div className="content">
-  //   <div className="view-content">
-  //     <div className="daf-analysis-layout">
-  //       <div className='sections-cont w-pt'>
-  //         <section>
+  // Core paginator: greedy packing with 80% threshold
+  const paginate = React.useCallback(() => {
+    const keys = Object.keys(sections).map(k => Number(k)).sort((a, b) => a - b);
+    if (keys.length !== config.length) return; // wait until all measured
+
+    const threshold = Math.floor(CONTENT_HEIGHT * FILL_RATIO);
+    const pages = [];
+    let current = [];
+    let used = 0;
+    for (let idx of keys) {
+      const h = sections[idx].height;
+      const hWithGap = (current.length === 0 ? 0 : GAP_BETWEEN_BLOCKS) + h;
+
+      // Oversized single block: start a new page but still place it alone
+      if (h > threshold && current.length === 0) {
+        current.push(idx);
+        pages.push(current);
+        current = [];
+        used = 0;
+        continue;
+      }
+      if (current.length === 0 || used + hWithGap <= threshold) {
+        current.push(idx);
+        used += hWithGap;
+      } else {
+        pages.push(current);
+        current = [idx];
+        used = h; // first item on a fresh page, no top gap
+      }
+    }
+    if (current.length) pages.push(current);
+    setPageMap(pages);
+  }, [sections, config.length]);
 
+  // Re-run pagination when sizes change
+  React.useEffect(() => {
+    paginate();
+  }, [paginate]);
+  const contClassName = formatClassname(["daf-analysis daf-pdf-view", customClassName]);
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     className: contClassName,
-    style: {
-      position: 'relative'
-    },
-    children: [renderDashboard(), pages.map(page => /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [pageMap.map((indices, pageIdx) => /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: "pdf-page",
+      style: {
+        height: PAGE_HEIGHT,
+        position: "relative",
+        overflow: "hidden"
+      },
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
         style: {
-          top: (page - 1) * PAGE_HEIGHT,
-          width: '100%',
-          height: HEADER_HEIGHT - 24,
-          position: 'absolute',
-          left: 0,
-          zIndex: 1000000
+          height: HEADER_HEIGHT
         },
         className: "flex-row dashboard-header",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
@@ -14693,39 +14657,53 @@ function PdfView(_ref2) {
             alt: "logo"
           })
         })]
-      }, "headers-".concat(page)), /*#__PURE__*/jsxRuntime.jsxs("div", {
+      }), /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "pdf-body",
         style: {
-          top: page * PAGE_HEIGHT - FOOTER_HEIGHT,
-          width: '100%',
-          height: FOOTER_HEIGHT,
-          position: 'absolute',
-          left: 0,
-          zIndex: 1000000
+          minHeight: CONTENT_HEIGHT,
+          paddingTop: 0,
+          paddingBottom: 0
+        },
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            gap: GAP_BETWEEN_BLOCKS
+          },
+          children: indices.map(i => /*#__PURE__*/jsxRuntime.jsx(Row, {
+            widgets: config[i],
+            i: i,
+            onChangeHeight: onChangeHeight
+          }, "row-".concat(i)))
+        })
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          height: FOOTER_HEIGHT
         },
         className: "dashboard-footer flex-row",
         children: [/*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center",
           children: /*#__PURE__*/jsxRuntime.jsx("h5", {
-            children: moment__default["default"]().format('DD MMM YYYY')
+            children: moment__default["default"]().format("DD MMM YYYY")
           })
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center",
           children: /*#__PURE__*/jsxRuntime.jsxs("div", {
             className: "flex gap-2",
             children: [/*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["User ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["User ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: userId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Account ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Account ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: accountId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Document ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Document ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: documentId
               })]
             }), /*#__PURE__*/jsxRuntime.jsxs("h5", {
-              children: ["Download ID:", ' ', /*#__PURE__*/jsxRuntime.jsx("strong", {
+              children: ["Download ID: ", /*#__PURE__*/jsxRuntime.jsx("strong", {
                 children: downloadId
               })]
             })]
@@ -14733,11 +14711,24 @@ function PdfView(_ref2) {
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
           className: "flex flex-column justify-center",
           children: /*#__PURE__*/jsxRuntime.jsx("h5", {
-            children: page
+            children: pageIdx + 1
           })
         })]
-      }, "footers-".concat(page))]
-    }))]
+      })]
+    }, "page-".concat(pageIdx))), pageMap.length === 0 && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "view-content",
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: "daf-analysis-layout",
+        children: /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: "sections-cont",
+          children: config.map((widgets, i) => /*#__PURE__*/jsxRuntime.jsx(Row, {
+            widgets: widgets,
+            i: i,
+            onChangeHeight: onChangeHeight
+          }, "measure-".concat(i)))
+        })
+      })
+    })]
   });
 }
 PdfView.propTypes = {
@@ -14747,7 +14738,8 @@ PdfView.propTypes = {
   imgSrc: PropTypes__default["default"].string,
   userId: PropTypes__default["default"].string,
   accountId: PropTypes__default["default"].string,
-  documentId: PropTypes__default["default"].string
+  documentId: PropTypes__default["default"].string,
+  downloadId: PropTypes__default["default"].string
 };
 
 const ajaxSelectFieldData = async (value, config, getApiBaseUrl = () => {}, getAppHeader = () => {}, app, formValues = {}) => {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "datastake-daf",
-	"version": "0.6.438",
+	"version": "0.6.440",
 	"dependencies": {
 		"@ant-design/icons": "^5.2.5",
 		"@antv/g2": "^5.1.1",

package/src/@daf/core/components/Dashboard/PdfView/index.jsx

@@ -1,152 +1,113 @@
 import moment from "moment";
-import PropTypes from 'prop-types';
-import { useCallback, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { formatClassname } from "../../../../../helpers/ClassesHelper";
 
 const PAGE_HEIGHT = 1587;
-// margin-top: 20, bottom: 20;
-const FOOTER_HEIGHT = 70;
 const HEADER_HEIGHT = 100;
+const FOOTER_HEIGHT = 70;
+const GAP_BETWEEN_BLOCKS = 24;     // vertical spacing inside page
+const FILL_RATIO = 0.80;           // your "80% of page" rule
 
-const Row = ({ widgets, i, onChangeHeight = () => { } }) => {
-  const ref = useRef();
-  const [height, setHeight] = useState(0);
-
-  useEffect(() => {
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        setHeight(entry.contentRect.height);
-      }
-    });
-
-    observer.observe(ref.current);
+const CONTENT_HEIGHT = PAGE_HEIGHT - HEADER_HEIGHT - FOOTER_HEIGHT;
 
-    return () => observer.disconnect();
-  }, []);
+const Row = ({ widgets, i, onChangeHeight = () => {} }) => {
+  const ref = useRef(null);
 
-  useEffect(() => {
-    if (height) {
-      onChangeHeight(i, { height, ref });
-    }
-  }, [height])
+  useLayoutEffect(() => {
+    if (!ref.current) return;
+    const ro = new ResizeObserver((entries) => {
+      const h = entries[0]?.contentRect?.height ?? 0;
+      if (h) onChangeHeight(i, { height: h, ref });
+    });
+    ro.observe(ref.current);
+    return () => ro.disconnect();
+  }, [i, onChangeHeight]);
 
   return (
     <section ref={ref} style={widgets.style}>
-      {typeof widgets.render === 'function' ? widgets.render() : null}
+      {typeof widgets.render === "function" ? widgets.render() : null}
     </section>
-  )
+  );
 };
 
 export default function PdfView({
   config = [],
   customClassName,
-  title = 'Title',
-  imgSrc = '',
-  userId = 'IDD-0000000',
-  accountId = 'IDD-0000000',
-  documentId = 'IDD-0000000',
-  downloadId = 'DWL-00000123',
+  title = "Title",
+  imgSrc = "",
+  userId = "IDD-0000000",
+  accountId = "IDD-0000000",
+  documentId = "IDD-0000000",
+  downloadId = "DWL-00000123",
 }) {
-  const [sectionsConfig, setSectionsConfig] = useState({});
-  const [pages, setPages] = useState([1]);
-
-  const doSizing = useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
-
-    if (keys.length === config.length) {
-      let incrHeight = 0;
-
-      keys.forEach(k => {
-        const { ref } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      })
-
-      keys.forEach((k, i) => {
-        const { height, ref } = sectionsConfig[k];
-
-        if (i === 0) {
-          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          incrHeight += HEADER_HEIGHT;
-        }
-
-        const newHeight = incrHeight + height;
-
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
-        }
-
-        if (newHeight > PAGE_HEIGHT - 30 - FOOTER_HEIGHT - HEADER_HEIGHT) {
-          const dif = Math.abs(PAGE_HEIGHT - incrHeight);
-          ref.current.style.marginTop = '30px';
-          _page += 1;
-          _pages.push(_page);
-
-          if (sectionsConfig[keys[i - 1]]) {
-            const { ref: topRef } = sectionsConfig[keys[i - 1]];
-            topRef.current.style.marginBottom = `${dif + HEADER_HEIGHT - 24}px`;
-            incrHeight = height + 24 + HEADER_HEIGHT;
-            // console.log('margin', dif);
-          }
-        } else {
-          incrHeight = newHeight + 24;
-        }
-        // console.groupEnd();
-      })
-      setPages(_pages);
-    }
-  }, [sectionsConfig]);
-
-  useEffect(() => {
-    doSizing();
-  }, [doSizing]);
+  // index -> {height, ref}
+  const [sections, setSections] = useState({});
+  // pageMap is an array of arrays of indices, e.g. [[0,1,2],[3,4],...]
+  const [pageMap, setPageMap] = useState([]);
 
   const onChangeHeight = useCallback((index, conf) => {
-    setSectionsConfig((prev) => ({ ...prev, [index]: conf }))
+    setSections((prev) => (prev[index]?.height === conf.height ? prev : { ...prev, [index]: conf }));
   }, []);
 
-  const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
-
-  const renderDashboard = useCallback(() => {
-    return (
-      <div className="view-content">
-        <div className="daf-analysis-layout">
-          <div className='sections-cont'>
-            {config.map((widgets, i) => (
-              <Row
-                widgets={widgets}
-                key={`dashboard-sections=${i + 1}`}
-                i={i}
-                onChangeHeight={onChangeHeight}
-              />
-            ))}
-          </div>
-        </div>
-      </div>
-    );
-  }, [config, onChangeHeight]);
+  // Core paginator: greedy packing with 80% threshold
+  const paginate = useCallback(() => {
+    const keys = Object.keys(sections)
+      .map((k) => Number(k))
+      .sort((a, b) => a - b);
+
+    if (keys.length !== config.length) return; // wait until all measured
+
+    const threshold = Math.floor(CONTENT_HEIGHT * FILL_RATIO);
+    const pages = [];
+    let current = [];
+    let used = 0;
+
+    for (let idx of keys) {
+      const h = sections[idx].height;
+      const hWithGap = (current.length === 0 ? 0 : GAP_BETWEEN_BLOCKS) + h;
+
+      // Oversized single block: start a new page but still place it alone
+      if (h > threshold && current.length === 0) {
+        current.push(idx);
+        pages.push(current);
+        current = [];
+        used = 0;
+        continue;
+      }
 
-  // <div className="daf-analysis">
-  // <Header title={t('Dashboard Title')} />
+      if (current.length === 0 || used + hWithGap <= threshold) {
+        current.push(idx);
+        used += hWithGap;
+      } else {
+        pages.push(current);
+        current = [idx];
+        used = h; // first item on a fresh page, no top gap
+      }
+    }
+
+    if (current.length) pages.push(current);
+    setPageMap(pages);
+  }, [sections, config.length]);
+
+  // Re-run pagination when sizes change
+  useEffect(() => {
+    paginate();
+  }, [paginate]);
 
-  // <div className="content">
-  //   <div className="view-content">
-  //     <div className="daf-analysis-layout">
-  //       <div className='sections-cont w-pt'>
-  //         <section>
+  const contClassName = formatClassname(["daf-analysis daf-pdf-view", customClassName]);
 
   return (
-    <div className={contClassName} style={{ position: 'relative' }}>
-      {renderDashboard()}
-      {pages.map((page) => (
-        <>
-          <div
-            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`headers-${page}`}
-            className="flex-row dashboard-header"
-          >
+    <div className={contClassName}>
+      {/* Render final paginated pages */}
+      {pageMap.map((indices, pageIdx) => (
+        <div
+          key={`page-${pageIdx}`}
+          className="pdf-page"
+          style={{ height: PAGE_HEIGHT, position: "relative", overflow: "hidden" }}
+        >
+          {/* Header */}
+          <div style={{ height: HEADER_HEIGHT }} className="flex-row dashboard-header">
             <div className="flex flex-column justify-center flex-1">
               <h2>{title}</h2>
             </div>
@@ -154,44 +115,65 @@ export default function PdfView({
               <img src={imgSrc} alt="logo" />
             </div>
           </div>
+
+          {/* Body */}
           <div
-            style={{ top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, width: '100%', height: FOOTER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`footers-${page}`}
-            className="dashboard-footer flex-row"
+            className="pdf-body"
+            style={{
+              minHeight: CONTENT_HEIGHT,
+              paddingTop: 0,
+              paddingBottom: 0,
+            }}
           >
+            <div style={{ display: "flex", flexDirection: "column", gap: GAP_BETWEEN_BLOCKS }}>
+              {indices.map((i) => (
+                <Row key={`row-${i}`} widgets={config[i]} i={i} onChangeHeight={onChangeHeight} />
+              ))}
+            </div>
+          </div>
+
+          {/* Footer */}
+          <div style={{ height: FOOTER_HEIGHT }} className="dashboard-footer flex-row">
             <div className="flex flex-column justify-center">
-              <h5>{moment().format('DD MMM YYYY')}</h5>
+              <h5>{moment().format("DD MMM YYYY")}</h5>
             </div>
             <div className="flex flex-column justify-center">
               <div className="flex gap-2">
                 <h5>
-                  User ID:
-                  {' '}
-                  <strong>{userId}</strong>
+                  User ID: <strong>{userId}</strong>
                 </h5>
                 <h5>
-                  Account ID:
-                  {' '}
-                  <strong>{accountId}</strong>
+                  Account ID: <strong>{accountId}</strong>
                 </h5>
                 <h5>
-                  Document ID:
-                  {' '}
-                  <strong>{documentId}</strong>
+                  Document ID: <strong>{documentId}</strong>
                 </h5>
                 <h5>
-                  Download ID:
-                  {' '}
-                  <strong>{downloadId}</strong>
+                  Download ID: <strong>{downloadId}</strong>
                 </h5>
               </div>
             </div>
             <div className="flex flex-column justify-center">
-              <h5>{page}</h5>
+              <h5>{pageIdx + 1}</h5>
             </div>
           </div>
-        </>
+        </div>
       ))}
+
+      {/* Optional: first pass "measurement layer" for instant sizes (kept visible). 
+          If you want to avoid double-render cost, keep as-is; if you want to hide it after pagination,
+          you can track a 'measured' flag and conditionally render. */}
+      {pageMap.length === 0 && (
+        <div className="view-content">
+          <div className="daf-analysis-layout">
+            <div className="sections-cont">
+              {config.map((widgets, i) => (
+                <Row key={`measure-${i}`} widgets={widgets} i={i} onChangeHeight={onChangeHeight} />
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }
@@ -204,4 +186,5 @@ PdfView.propTypes = {
   userId: PropTypes.string,
   accountId: PropTypes.string,
   documentId: PropTypes.string,
-}
+  downloadId: PropTypes.string,
+};