Fix duplicated header/footer issue in the Table component

issue #13
PejmanNik · Jul 8, 2023 · ff51703 · ff51703
1 parent 83744d4
commit ff51703
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+
+## [0.3.2]
+
+### Fixed
+
+- Fix duplicated header/footer issue in the Table component
+
 ## [0.3.1]
 ### Fixed
 

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jikji/react",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",
   "files": [

diff --git a/packages/react/src/components/Table/TableHostComponentPulp.ts b/packages/react/src/components/Table/TableHostComponentPulp.ts
@@ -25,7 +25,7 @@ export class TableHostComponentPulp extends HostComponentPulp {
         super(id, elementType, props, domNode, domBoxInfo, rendered, version);
         this.header = header;
         this.footer = footer;
-        this.component = this.createComponent(props, props.children);
+        this.component = this.createComponent(props, rendered?.[0]?.component ?? props.children);
     }
 
     static FromPulp(pulp: HostComponentPulp, tableChildren: TableChildren) {
@@ -80,7 +80,7 @@ export class TableHostComponentPulp extends HostComponentPulp {
             this.domNode,
             newProps.domBoxInfo ?? this.domBoxInfo,
             merge(this.rendered, newProps.rendered),
-            newProps.version ?? this.version,            
+            newProps.version ?? this.version,
             this.header,
             this.footer
         );

diff --git a/packages/react/src/components/Table/plugin.ts b/packages/react/src/components/Table/plugin.ts
@@ -26,9 +26,9 @@ export const tablePlugin: ReportPlugin = {
         // to overate the split and layout behavior for HTML table component
         return pulp.clone({
             rendered: [TableHostComponentPulp.FromPulp(tablePulp, {
-                ...children,
                 header: freezeColumnWidth(children.header),
                 body: children.body,
+                footer: children.footer,
             })],
             component: null,
         });

diff --git a/packages/react/src/core/pulp/pulpTree.ts b/packages/react/src/core/pulp/pulpTree.ts
@@ -48,7 +48,9 @@ export function makePulpTree(contentElement: HTMLDivElement, plugins: Readonly<R
     );
   }
 
-  const pageContentFiber = findPageContentFiber(contentElement, [fiberRoot]);
+  const pageContentFiber = findPageContentFiber(contentElement, [fiberRoot])
+    ?? findPageContentFiber(contentElement, fiberRoot.alternate ? [fiberRoot.alternate] : []);
+
   if (!pageContentFiber) {
     throw Error(
       "can't find the `PageContent` component, make sure you follow the documents.",
@@ -59,16 +61,16 @@ export function makePulpTree(contentElement: HTMLDivElement, plugins: Readonly<R
 }
 
 export function findPageContentFiber(contentElement: HTMLDivElement, fiber: Fiber[]): Fiber | null {
-  for (let i = 0; i < fiber.length; i++) {    
-    if (fiber[i].elementType 
-      && isInstanceOfComponent(fiber[i].elementType, PageContent) 
-      && fiber[i].return?.stateNode == contentElement) {    
-        return fiber[i];
+  for (let i = 0; i < fiber.length; i++) {
+    if (fiber[i].elementType
+      && isInstanceOfComponent(fiber[i].elementType, PageContent)
+      && fiber[i].return?.stateNode == contentElement) {
+      return fiber[i];
     }
 
     // find PageContent in the fiber children
     const children = getChildren(fiber[i]);
-    if (!children) {
+    if (children.length === 0) {
       continue;
     }
 

diff --git a/packages/react/src/core/pulp/treeHelper.ts b/packages/react/src/core/pulp/treeHelper.ts
@@ -1,4 +1,4 @@
-import type {Fiber} from 'react-reconciler';
+import type { Fiber } from 'react-reconciler';
 
 export function getSiblings(fiberRoot: Fiber | null) {
   const result: Fiber[] = [];
@@ -12,12 +12,9 @@ export function getSiblings(fiberRoot: Fiber | null) {
   return result;
 }
 
-export function getChildren(fiber: Fiber) {
-  if (!fiber.child) return null;
-
+export function getChildren(fiber: Fiber): Fiber[] {  
   const siblings = getSiblings(fiber.child);
-  if (siblings.length === 0) {
-    return [fiber.child];
-  }
+  if (!fiber.child) return siblings;
+
   return [fiber.child, ...siblings];
 }