feat: 增加extra

assets/index/Dialog.less

@@ -22,6 +22,10 @@
     font-weight: bold;
   }
 
+  &-extra {
+    padding-right: 36px;
+  }
+
   &-section {
     position: relative;
     background-color: #ffffff;
@@ -43,15 +47,15 @@
     color: #000;
     text-shadow: 0 1px 0 #fff;
     filter: alpha(opacity=20);
-    opacity: .2;
+    opacity: 0.2;
     text-decoration: none;
 
     &:disabled {
       pointer-events: none;
     }
 
     &-x:after {
-      content: '×'
+      content: '×';
     }
 
     &:hover {
@@ -67,6 +71,9 @@
     background: #fff;
     color: #666;
     border-bottom: 1px solid #e9e9e9;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
   }
 
   &-body {
@@ -85,7 +92,8 @@
     animation-fill-mode: both;
   }
 
-  &-zoom-enter, &-zoom-appear {
+  &-zoom-enter,
+  &-zoom-appear {
     opacity: 0;
     .effect();
     animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);
@@ -98,7 +106,8 @@
     animation-play-state: paused;
   }
 
-  &-zoom-enter&-zoom-enter-active, &-zoom-appear&-zoom-appear-active {
+  &-zoom-enter&-zoom-enter-active,
+  &-zoom-appear&-zoom-appear-active {
     animation-name: rcDialogZoomIn;
     animation-play-state: running;
   }
@@ -120,7 +129,6 @@
   }
   @keyframes rcDialogZoomOut {
     0% {
-
       transform: scale(1, 1);
     }
     100% {

docs/examples/ant-design.tsx

@@ -96,6 +96,7 @@ const MyControl: React.FC = () => {
       onClose={onClose}
       style={style}
       title="dialog1"
+      extra={<a onClick={onClick}>click me</a>}
       mousePosition={mousePosition}
       destroyOnHidden={destroyOnHidden}
       closeIcon={useIcon ? getSvg(clearPath, {}, true) : undefined}

src/Dialog/Content/Panel.tsx

@@ -54,6 +54,7 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
     height,
     classNames: modalClassNames,
     styles: modalStyles,
+    extra,
   } = props;
 
   // ================================= Refs =================================
@@ -97,6 +98,15 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
     </div>
   ) : null;
 
+  const extraNode = extra ? (
+    <div
+      style={{ ...modalStyles?.extra }}
+      className={classNames(`${prefixCls}-extra`, modalClassNames?.extra)}
+    >
+      {extra}
+    </div>
+  ) : null;
+
   const headerNode = title ? (
     <div
       className={classNames(`${prefixCls}-header`, modalClassNames?.header)}
@@ -109,8 +119,16 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
       >
         {title}
       </div>
+      {extraNode}
     </div>
-  ) : null;
+  ) : (
+    <div
+      className={classNames(`${prefixCls}-header`, modalClassNames?.header)}
+      style={{ ...modalStyles?.header }}
+    >
+      {extraNode}
+    </div>
+  );
 
   const closableObj = useMemo(() => {
     if (typeof closable === 'object' && closable !== null) {

src/Dialog/Content/index.tsx

@@ -30,12 +30,17 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
     ariaId,
     onVisibleChanged,
     mousePosition,
+    extra,
   } = props;
 
   const dialogRef = useRef<{ nativeElement: HTMLElement } & CSSMotionStateRef>(null);
 
   const panelRef = useRef<PanelRef>(null);
 
+  const hasExtra = !!extra && !(typeof extra === 'string' && extra.trim() === '');
+
+  const curExtra = hasExtra ? extra : null;
+
   // ============================== Refs ==============================
   React.useImperativeHandle(ref, () => ({
     ...panelRef.current,
@@ -77,6 +82,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
         <Panel
           {...props}
           ref={panelRef}
+          extra={curExtra}
           title={title}
           ariaId={ariaId}
           prefixCls={prefixCls}

src/IDialogPropTypes.tsx

@@ -1,7 +1,15 @@
 import type { GetContainer } from '@rc-component/util/lib/PortalWrapper';
 import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
 
-export type SemanticName = 'header' | 'body' | 'footer' | 'section' | 'title' | 'wrapper' | 'mask';
+export type SemanticName =
+  | 'header'
+  | 'body'
+  | 'footer'
+  | 'section'
+  | 'title'
+  | 'wrapper'
+  | 'mask'
+  | 'extra';
 
 export type ModalClassNames = Partial<Record<SemanticName, string>>;
 
@@ -55,4 +63,6 @@ export type IDialogPropTypes = {
 
   // Refs
   panelRef?: React.Ref<HTMLDivElement>;
+
+  extra?: ReactNode;
 };

tests/__snapshots__/index.spec.tsx.snap

@@ -35,6 +35,9 @@ exports[`dialog add rootClassName and rootStyle should render correct 1`] = `
               class="rc-dialog-close-x"
             />
           </button>
+          <div
+            class="rc-dialog-header"
+          />
           <div
             class="rc-dialog-body"
           />

tests/index.spec.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-render-return-value, max-classes-per-file, func-names, no-console */
-import { fireEvent, render, act } from '@testing-library/react';
+import { fireEvent, render, act, screen } from '@testing-library/react';
 import { Provider } from '@rc-component/motion';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React, { cloneElement, useEffect } from 'react';
@@ -733,4 +733,40 @@ describe('dialog', () => {
     expect(document.querySelector('.rc-dialog')).toBeTruthy();
     expect(document.querySelector('.rc-dialog-close')).toBeFalsy();
   });
+
+  it('should render extra when extra is a React node', () => {
+    render(<Dialog visible extra={<span data-testid="extra-node">Node</span>} />);
+
+    expect(screen.getByTestId('extra-node')).toBeInTheDocument();
+  });
+
+  it('does not render extra when extra is empty string', () => {
+    render(<Dialog visible extra="" />);
+    expect(screen.queryByTestId('.rc-dialog-extra')).toBeNull();
+  });
+
+  it('does not render extra when extra is string with only spaces', () => {
+    render(<Dialog visible extra="   " />);
+    expect(screen.queryByText('   ')).toBeNull();
+  });
+
+  it('renders extra when extra is non-empty string', () => {
+    render(<Dialog visible extra="hello" />);
+    expect(screen.getByText('hello')).toBeInTheDocument();
+    const extraDiv = document.querySelector('.rc-dialog-extra');
+    expect(extraDiv).toHaveTextContent('hello');
+  });
+
+  it('does not render extra when extra is null or undefined', () => {
+    const { container } = render(<Dialog visible extra={null} />);
+    expect(container.querySelector('.rc-dialog-extra')).toBeNull();
+
+    const { container: container2 } = render(<Dialog visible />);
+    expect(container2.querySelector('.rc-dialog-extra')).toBeNull();
+  });
+
+  it('renders extra when extra is a non-empty string', () => {
+    render(<Dialog visible extra="Extra Text" />);
+    expect(screen.getByText('Extra Text')).toBeInTheDocument();
+  });
 });