feat: Modifying the DOM structure

react-component · Aug 22, 2024 · 6f1011d · 6f1011d
1 parent ff91951
commit 6f1011d
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 18 deletions.
diff --git a/assets/index.less b/assets/index.less
@@ -85,13 +85,13 @@
   &-content {
     overflow: hidden;
     color: @text-color;
-    padding: 0 16px;
+    padding: 16px;
     background-color: #fff;
 
-    & > &-box {
-      margin-top: 16px;
-      margin-bottom: 16px;
-    }
+    // & > &-box {
+    //   margin-top: 16px;
+    //   margin-bottom: 16px;
+    // }
 
     // &-inactive {
     //   display: none;

diff --git a/src/PanelContent.tsx b/src/PanelContent.tsx
@@ -35,21 +35,18 @@ const PanelContent = React.forwardRef<
       ref={ref}
       className={classnames(
         `${prefixCls}-content`,
+        `${prefixCls}-content-box`,
         {
           [`${prefixCls}-content-active`]: isActive,
           [`${prefixCls}-content-inactive`]: !isActive,
         },
         className,
+        customizeClassNames?.body,
       )}
-      style={style}
+      style={{ ...style, ...styles?.body }}
       role={role}
     >
-      <div
-        className={classnames(`${prefixCls}-content-box`, customizeClassNames?.body)}
-        style={styles?.body}
-      >
-        {children}
-      </div>
+      {children}
     </div>
   );
 });

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
@@ -86,7 +86,7 @@ describe('collapse', () => {
       fireEvent.click(header);
       jest.runAllTimers();
       expect(collapse.container.querySelector('.rc-collapse-content-inactive')?.innerHTML).toBe(
-        '<div class="rc-collapse-content-box">second</div>',
+        'second',
       );
       expect(collapse.container.querySelectorAll('.rc-collapse-content-active').length).toBeFalsy();
     });
@@ -201,7 +201,7 @@ describe('collapse', () => {
       const { container } = render(element);
       const header = container.querySelector('.rc-collapse-header');
 
-      expect(header.classList.contains('custom-class')).toBeTruthy();
+      expect(header?.classList.contains('custom-class')).toBeTruthy();
     });
   });
 
@@ -778,7 +778,7 @@ describe('collapse', () => {
           ]}
         />,
       );
-      fireEvent.click(container.querySelector('.rc-collapse-header'));
+      fireEvent.click(container.querySelector('.rc-collapse-header')!);
       expect(onItemClick).toHaveBeenCalled();
       expect(onItemClick).lastCalledWith('0');
     });
@@ -800,11 +800,11 @@ describe('collapse', () => {
         />,
       );
 
-      fireEvent.click(container.querySelector('.rc-collapse-header'));
+      fireEvent.click(container.querySelector('.rc-collapse-header')!);
       expect(onItemClick).not.toHaveBeenCalled();
 
       fireEvent.click(
-        container.querySelector('.rc-collapse-item:nth-child(2) .rc-collapse-expand-icon'),
+        container.querySelector('.rc-collapse-item:nth-child(2) .rc-collapse-expand-icon')!,
       );
       expect(onItemClick).toHaveBeenCalled();
       expect(onChangeFn).toBeCalledTimes(1);

diff --git a/tsconfig.json b/tsconfig.json
@@ -13,5 +13,12 @@
       "rc-collapse": ["src/index.tsx"]
     }
   },
-  "include": [".dumirc.ts", "./src/**/*.ts", "./src/**/*.tsx", "./docs/**/*.tsx"]
+  "include": [
+    ".dumirc.ts",
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+    "./tests/**/*.ts",
+    "./tests/**/*.tsx",
+    "./docs/**/*.tsx"
+  ]
 }