datastake-daf 0.6.421 → 0.6.422

package/package.json

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

package/src/@daf/core/components/Dashboard/PdfView/PdfView.stories.js

@@ -189,5 +189,15 @@ export const Primary = {
       },
     ],
   },
-}
-
+  render: (args) => (
+    <div style={{
+      height: '100vh',
+      overflowY: 'auto',
+        background: "#f8f8f8",
+        padding: "20px",
+      }}
+    >
+      <PdfView {...args} />
+    </div>
+  ),
+};

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

@@ -1,41 +1,17 @@
 import moment from "moment";
 import PropTypes from 'prop-types';
-import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment, 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 PAGE_MARGIN_TOP = 20;
+const PAGE_MARGIN_BOTTOM = 20;
+const CONTENT_HEIGHT = 1200; // 1397px
+const SECTION_GAP = 24;
 
-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);
-
-    return () => observer.disconnect();
-  }, []);
-
-  useEffect(() => {
-    if (height) {
-      onChangeHeight(i, { height, ref });
-    }
-  }, [height])
-
-  return (
-    <section ref={ref} style={widgets.style}>
-      {typeof widgets.render === 'function' ? widgets.render() : null}
-    </section>
-  )
-};
+const isHTMLElement = (node) => node instanceof HTMLElement;
 
 export default function PdfView({
   config = [],
@@ -47,104 +23,224 @@ export default function PdfView({
   documentId = 'IDD-0000000',
   downloadId = 'DWL-00000123',
 }) {
-  const [sectionsConfig, setSectionsConfig] = useState({});
   const [pages, setPages] = useState([1]);
+  const contentRef = useRef(null);
+  const sectionsRef = useRef([]);
+
+  const resetPaginationStyles = useCallback((sections) => {
+    sections.forEach((section) => {
+      if (!section) return;
+      section.style.marginTop = '';
+      section.style.marginBottom = '';
+      section.style.pageBreakBefore = '';
+      section.style.breakBefore = '';
+      section.removeAttribute('data-pdf-page');
+      
+      // Reset all children
+      const allElements = section.querySelectorAll('*');
+      allElements.forEach((el) => {
+        if (!isHTMLElement(el)) return;
+        el.style.marginTop = '';
+        el.style.marginBottom = '';
+        el.style.pageBreakBefore = '';
+        el.style.breakBefore = '';
+        el.removeAttribute('data-pdf-page');
+      });
+    });
+  }, []);
 
-  const doSizing = useCallback(() => {
-    const keys = Object.keys(sectionsConfig);
-    let _pages = [1];
-    let _page = 1;
+  const getAllBreakableElements = useCallback((section) => {
+    const elements = [];
+    
+    const shouldInclude = (el) => {
+      if (!isHTMLElement(el)) return false;
+      const style = window.getComputedStyle(el);
+      if (style.display === 'inline' || style.display === 'contents') return false;
+      if (style.position === 'absolute' || style.position === 'fixed') return false;
+      if (el.offsetHeight === 0) return false;
+      return true;
+    };
 
-    if (keys.length === config.length) {
-      let incrHeight = 0;
+    const traverse = (parent) => {
+      Array.from(parent.children).forEach((child) => {
+        if (shouldInclude(child)) {
+          elements.push(child);
+          traverse(child);
+        }
+      });
+    };
 
-      keys.forEach(k => {
-        const { ref } = sectionsConfig[k];
-        ref.current.style.marginBottom = '0px';
-        // ref.current.style.marginTop = '15px';
-      })
+    traverse(section);
+    return elements;
+  }, []);
 
-      keys.forEach((k, i) => {
-        const { height, ref } = sectionsConfig[k];
+  const paginateContent = useCallback(() => {
+    const sections = sectionsRef.current.filter(Boolean);
+    if (sections.length === 0) return;
 
-        if (i === 0) {
-          ref.current.style.marginTop = `${HEADER_HEIGHT}px`;
-          incrHeight += HEADER_HEIGHT;
-        }
+    resetPaginationStyles(sections);
 
-        const newHeight = incrHeight + height;
+    // Force layout recalc
+    sections.forEach(s => s.offsetHeight);
 
-        if (i === keys.length - 1) {
-          ref.current.style.paddingBottom = '30px';
-        }
+    let currentPage = 1;
+    let currentPageHeight = 0;
+    const breaks = [];
 
-        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);
+    sections.forEach((section, sectionIndex) => {
+      // Measure height after reset
+      const sectionHeight = section.offsetHeight;
+      const isFirstOnPage = currentPageHeight === 0;
+      const gapBefore = isFirstOnPage ? 0 : SECTION_GAP;
+      
+      if (currentPageHeight + gapBefore + sectionHeight <= CONTENT_HEIGHT) {
+        // Fits in current page
+        section.setAttribute('data-pdf-page', currentPage.toString());
+        
+        if (isFirstOnPage) {
+          // First item on page
+          if (currentPage === 1) {
+            // Very first section on first page - needs to be below header
+            section.style.marginTop = '0px'; // Container padding handles this
+          } else {
+            // First section on subsequent pages - no margin (container padding handles it)
+            section.style.marginTop = '0px';
           }
         } else {
-          incrHeight = newHeight + 24;
+          // Not first item on page - add gap
+          section.style.marginTop = `${SECTION_GAP}px`;
         }
-        // console.groupEnd();
-      })
-      setPages(_pages);
-    }
-  }, [sectionsConfig]);
+        currentPageHeight += gapBefore + sectionHeight;
+      } else {
+        // Doesn't fit - need to move to next page
+        const remainingSpace = CONTENT_HEIGHT - currentPageHeight;
+        
+        // Calculate margin needed to push this section to the next page
+        // remainingSpace = space left on current page
+        // Then we need to skip: footer margin + footer + header margin + header
+        const pushMargin = remainingSpace + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
+        
+        // Move entire section to next page
+        currentPage += 1;
+        breaks.push({ section, type: 'section', page: currentPage });
+        section.setAttribute('data-pdf-page', currentPage.toString());
+        section.style.pageBreakBefore = 'always';
+        section.style.breakBefore = 'page';
+        section.style.marginTop = `${pushMargin}px`;
+        
+        // Start fresh height counter for new page
+        currentPageHeight = sectionHeight;
+        
+        // Check if section is too tall and needs internal breaks
+        if (sectionHeight > CONTENT_HEIGHT) {
+          // Try to break within section
+          const innerElements = getAllBreakableElements(section);
+          let pageHeightInSection = 0;
+          let sectionPage = currentPage;
+          
+          for (const el of innerElements) {
+            const rect = el.getBoundingClientRect();
+            const sectionRect = section.getBoundingClientRect();
+            const relativeTop = rect.top - sectionRect.top;
+            const elHeight = rect.height;
+            
+            // Check if this element would exceed the page
+            if (pageHeightInSection + elHeight > CONTENT_HEIGHT && relativeTop > 50) {
+              // Calculate remaining space on this page within the section
+              const remainingInSection = CONTENT_HEIGHT - pageHeightInSection;
+              const pushMarginInner = remainingInSection + PAGE_MARGIN_BOTTOM + FOOTER_HEIGHT + PAGE_MARGIN_TOP + HEADER_HEIGHT;
+              
+              sectionPage += 1;
+              breaks.push({ element: el, type: 'inner', page: sectionPage });
+              el.setAttribute('data-pdf-page', sectionPage.toString());
+              el.style.pageBreakBefore = 'always';
+              el.style.breakBefore = 'page';
+              el.style.marginTop = `${pushMarginInner}px`;
+              
+              // Reset page height for new page within section
+              pageHeightInSection = elHeight;
+            } else {
+              pageHeightInSection += elHeight;
+            }
+          }
+          
+          // Update current page if we created additional pages
+          if (sectionPage > currentPage) {
+            currentPage = sectionPage;
+            currentPageHeight = pageHeightInSection;
+          }
+        }
+      }
+    });
+
+    setPages(Array.from({ length: currentPage }, (_, idx) => idx + 1));
+  }, [getAllBreakableElements, resetPaginationStyles]);
+
+  useLayoutEffect(() => {
+    // Use requestAnimationFrame to ensure DOM is painted
+    const rafId = requestAnimationFrame(() => {
+      paginateContent();
+    });
+    
+    return () => cancelAnimationFrame(rafId);
+  }, [paginateContent, config]);
 
   useEffect(() => {
-    doSizing();
-  }, [doSizing]);
+    const sections = sectionsRef.current.filter(Boolean);
+    if (sections.length === 0) return undefined;
 
-  const onChangeHeight = useCallback((index, conf) => {
-    setSectionsConfig((prev) => ({ ...prev, [index]: conf }))
-  }, []);
+    const observer = new ResizeObserver(() => {
+      paginateContent();
+    });
+
+    sections.forEach(section => observer.observe(section));
+
+    return () => observer.disconnect();
+  }, [paginateContent, config.length]);
 
   const contClassName = formatClassname(['daf-analysis daf-pdf-view', customClassName]);
 
-  const renderDashboard = useCallback(() => {
-    return (
+  return (
+    <div className={contClassName} style={{ position: 'relative', minHeight: `${PAGE_HEIGHT}px` }}>
       <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
+            className='sections-cont'
+            ref={contentRef}
+            data-pdf-content-root="true"
+            style={{
+              marginTop: `${HEADER_HEIGHT + PAGE_MARGIN_TOP}px`,
+              // paddingBottom: `${FOOTER_HEIGHT + PAGE_MARGIN_BOTTOM}px !important`,
+              position: 'relative',
+            }}
+          >
+            {config.map((widgets, index) => (
+              <section
+                key={`dashboard-section-${index + 1}`}
+                ref={(el) => {
+                  sectionsRef.current[index] = el;
+                }}
+                style={widgets.style}
+                data-pdf-section="true"
+              >
+                {typeof widgets.render === 'function' ? widgets.render() : null}
+              </section>
             ))}
           </div>
         </div>
       </div>
-    );
-  }, [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>
-
-  return (
-    <div className={contClassName} style={{ position: 'relative' }}>
-      {renderDashboard()}
       {pages.map((page) => (
-        <>
+        <Fragment key={`pdf-decor-${page}`}>
           <div
-            style={{ top: ((page - 1) * PAGE_HEIGHT), width: '100%', height: HEADER_HEIGHT - 24, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`headers-${page}`}
+            style={{ 
+              top: ((page - 1) * PAGE_HEIGHT) + PAGE_MARGIN_TOP, 
+              width: '100%', 
+              height: HEADER_HEIGHT, 
+              position: 'absolute', 
+              left: 0, 
+              zIndex: 1000000,
+              pointerEvents: 'none'
+            }}
             className="flex-row dashboard-header"
           >
             <div className="flex flex-column justify-center flex-1">
@@ -155,8 +251,15 @@ export default function PdfView({
             </div>
           </div>
           <div
-            style={{ top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT, width: '100%', height: FOOTER_HEIGHT, position: 'absolute', left: 0, zIndex: 1000000 }}
-            key={`footers-${page}`}
+            style={{ 
+              top: (page * PAGE_HEIGHT) - FOOTER_HEIGHT - PAGE_MARGIN_BOTTOM, 
+              width: '100%', 
+              height: FOOTER_HEIGHT, 
+              position: 'absolute', 
+              left: 0, 
+              zIndex: 1000000,
+              pointerEvents: 'none'
+            }}
             className="dashboard-footer flex-row"
           >
             <div className="flex flex-column justify-center">
@@ -190,7 +293,7 @@ export default function PdfView({
               <h5>{page}</h5>
             </div>
           </div>
-        </>
+        </Fragment>
       ))}
     </div>
   );

package/src/@daf/core/components/Icon/configs/index.js

@@ -209,7 +209,6 @@ import Hedera01 from "./Hedera01";
 import Records from "./Records";
 import Lightning from "./Lightning";
 import MagicWand from "./MagicWant";
-import Straatos from "./Straatos";
 
 const config = {
 	Right,
@@ -423,7 +422,6 @@ const config = {
 	Records,
 	Lightning,
 	MagicWand,
-	Straatos,
 };
 
 export default config;