feat: add wrapRenderer

react-component · Aug 13, 2020 · 5598113 · 5598113
1 parent d96907a
commit 5598113
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 24 deletions.
diff --git a/src/Dialog.tsx b/src/Dialog.tsx
@@ -203,32 +203,48 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
   }
 
   getDialogElement = () => {
-    const props = this.props;
-    const closable = props.closable;
-    const prefixCls = props.prefixCls;
+    const {
+      closable,
+      prefixCls,
+      width,
+      height,
+      title,
+      footer: pFooter,
+      closeIcon,
+      className,
+      visible,
+      forceRender,
+      style: pStyle,
+      bodyStyle,
+      bodyProps,
+      children,
+      destroyOnClose,
+      wrapRenderer: WrapRenderer = (wrapProps) => <div {...wrapProps}/>
+    } = this.props;
+
     const dest: any = {};
-    if (props.width !== undefined) {
-      dest.width = props.width;
+    if (width !== undefined) {
+      dest.width = width;
     }
-    if (props.height !== undefined) {
-      dest.height = props.height;
+    if (height !== undefined) {
+      dest.height = height;
     }
 
     let footer;
-    if (props.footer) {
+    if (pFooter) {
       footer = (
         <div className={`${prefixCls}-footer`} ref={this.saveRef('footer')}>
-          {props.footer}
+          {pFooter}
         </div>
       );
     }
 
     let header;
-    if (props.title) {
+    if (title) {
       header = (
         <div className={`${prefixCls}-header`} ref={this.saveRef('header')}>
           <div className={`${prefixCls}-title`} id={this.titleId}>
-            {props.title}
+            {title}
           </div>
         </div>
       );
@@ -243,12 +259,12 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
           aria-label="Close"
           className={`${prefixCls}-close`}
         >
-          {props.closeIcon || <span className={`${prefixCls}-close-x`} />}
+          {closeIcon || <span className={`${prefixCls}-close-x`} />}
         </button>
       );
     }
 
-    const style = { ...props.style, ...dest };
+    const style = { ...pStyle, ...dest };
     const sentinelStyle = { width: 0, height: 0, overflow: 'hidden', outline: 'none' };
     const transitionName = this.getTransitionName();
     const dialogElement = (
@@ -257,9 +273,9 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
         role="document"
         ref={this.saveRef('dialog')}
         style={style}
-        className={`${prefixCls} ${props.className || ''}`}
-        visible={props.visible}
-        forceRender={props.forceRender}
+        className={`${prefixCls} ${className || ''}`}
+        visible={visible}
+        forceRender={forceRender}
         onMouseDown={this.onDialogMouseDown}
       >
         <div
@@ -268,19 +284,19 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
           style={sentinelStyle}
           aria-hidden="true"
         />
-        <div className={`${prefixCls}-content`}>
+        <WrapRenderer className={`${prefixCls}-content`}>
           {closer}
           {header}
           <div
             className={`${prefixCls}-body`}
-            style={props.bodyStyle}
+            style={bodyStyle}
             ref={this.saveRef('body')}
-            {...props.bodyProps}
+            {...bodyProps}
           >
-            {props.children}
+            {children}
           </div>
           {footer}
-        </div>
+        </WrapRenderer>
         <div
           tabIndex={0}
           ref={this.saveRef('sentinelEnd')}
@@ -299,7 +315,7 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
         component=""
         transitionAppear
       >
-        {props.visible || !props.destroyOnClose ? dialogElement : null}
+        {visible || !destroyOnClose ? dialogElement : null}
       </Animate>
     );
   }
@@ -387,13 +403,14 @@ export default class Dialog extends React.Component<IDialogChildProps, any> {
 
   render() {
     const { props } = this;
-    const { prefixCls, maskClosable } = props;
+    const { prefixCls, maskClosable, visible } = props;
     const style = this.getWrapStyle();
     // clear hide display
     // and only set display after async anim, not here for hide
-    if (props.visible) {
+    if (visible) {
       style.display = null;
     }
+
     return (
       <div className={`${prefixCls}-root`}>
         {this.getMaskElement()}

diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
@@ -38,6 +38,7 @@ interface IDialogPropTypes {
   getContainer?: IStringOrHtmlElement | (() => IStringOrHtmlElement) | false;
   closeIcon?: ReactNode;
   forceRender?: boolean;
+  wrapRenderer?: React.ComponentType<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>>
   // https://github.com/ant-design/ant-design/issues/19771
   // https://github.com/react-component/dialog/issues/95
   focusTriggerAfterClose?: boolean;