fix(dialog): fix Dialog render Header remain some header elements (#3081

)

* fix(dialog): fix render Header

* chore: update snapshot

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/dialog/DialogCard.tsx

@@ -67,11 +67,7 @@ const DialogCard = forwardRef<HTMLDivElement, DialogCardProps>((props, ref) => {
     ...otherProps
   } = useDefaultProps<DialogCardProps>(props, dialogCardDefaultProps);
 
-  const renderHeader = () => {
-    if (!header) {
-      return null;
-    }
-
+  const renderHeaderContent = () => {
     const iconMap = {
       info: <InfoCircleFilledIcon className={`${classPrefix}-is-info`} />,
       warning: <InfoCircleFilledIcon className={`${classPrefix}-is-warning`} />,
@@ -109,11 +105,14 @@ const DialogCard = forwardRef<HTMLDivElement, DialogCardProps>((props, ref) => {
     );
   };
 
-  const renderFooter = () => {
-    if (footer === false || footer === null) {
-      return null;
-    }
+  const renderHeader = () => (
+    <div className={classNames(`${componentCls}__header`)}>
+      {renderHeaderContent()}
+      {renderCloseBtn()}
+    </div>
+  );
 
+  const renderFooter = () => {
     const defaultFooter = () => {
       const renderCancelBtn = renderDialogButton(cancelBtn, {
         variant: 'outline',
@@ -138,12 +137,9 @@ const DialogCard = forwardRef<HTMLDivElement, DialogCardProps>((props, ref) => {
 
   return (
     <div ref={ref} {...otherProps} className={classNames(componentCls, `${componentCls}--default`, className)}>
-      <div className={classNames(`${componentCls}__header`)}>
-        {renderHeader()}
-        {renderCloseBtn()}
-      </div>
+      {!!header && renderHeader()}
       <div className={`${componentCls}__body`}>{body || children}</div>
-      {renderFooter()}
+      {!!footer && renderFooter()}
     </div>
   );
 });

src/dialog/__tests__/dialog.test.tsx

@@ -177,4 +177,14 @@ describe('Dialog组件测试', () => {
     fireEvent.click(document.querySelector('#test'));
     await mockTimeout(() => expect(document.querySelector('.t-dialog__modal')).not.toBeInTheDocument(), 400);
   });
+
+  test('Dislog props.header render', async () => {
+    const { container } = render(
+      <Dialog header={false} visible>
+        <p>This is a dialog</p>
+      </Dialog>,
+    );
+
+    expect(container.querySelector('.t-dialog__header')).toBeNull();
+  });
 });