feat: 增加extra

Author: Roxannej

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,19 @@ 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 !== null &&
+  extra !== undefined &&
+  typeof extra !== 'boolean' &&
+  !(typeof extra === 'string' && extra.trim() === '');
+
   // ============================== Refs ==============================
   React.useImperativeHandle(ref, () => ({
     ...panelRef.current,
@@ -77,6 +84,7 @@ const Content = React.forwardRef<ContentRef, ContentProps>((props, ref) => {
         <Panel
           {...props}
           ref={panelRef}
+          extra={hasExtra ? extra : null}
           title={title}
           ariaId={ariaId}
           prefixCls={prefixCls}

src/Dialog/index.tsx

@@ -43,6 +43,7 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     rootStyle,
     classNames: modalClassNames,
     styles: modalStyles,
+    extra,
   } = props;
 
   if (process.env.NODE_ENV !== 'production') {
@@ -55,6 +56,12 @@ const Dialog: React.FC<IDialogPropTypes> = (props) => {
     }
   }
 
+  const hasExtra =
+  extra !== null &&
+  extra !== undefined &&
+  typeof extra !== 'boolean' &&
+  !(typeof extra === 'string' && extra.trim() === '');
+
   const lastOutSideActiveElementRef = useRef<HTMLElement>(null);
   const wrapperRef = useRef<HTMLDivElement>(null);
   const contentRef = useRef<ContentRef>(null);

src/IDialogPropTypes.tsx

@@ -55,4 +55,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"
           />