feat: update dialog from 7.1.8 to 7.2.1

components/vc-dialog/Dialog.jsx

@@ -1,4 +1,4 @@
-
+import { getComponentFromProp } from '../_util/props-util'
 import KeyCode from '../_util/KeyCode'
 import contains from '../_util/Dom/contains'
 import LazyRenderBox from './LazyRenderBox'
@@ -139,7 +139,7 @@ export default {
     tryFocus () {
       if (!contains(this.$refs.wrap, document.activeElement)) {
         this.lastOutSideFocusNode = document.activeElement
-        this.$refs.wrap.focus()
+        this.$refs.sentinelStart.focus()
       }
     },
     onAnimateLeave () {
@@ -178,20 +178,20 @@ export default {
       if (props.visible) {
         if (e.keyCode === KeyCode.TAB) {
           const activeElement = document.activeElement
-          const dialogRoot = this.$refs.wrap
+          const sentinelStart = this.$refs.sentinelStart
           if (e.shiftKey) {
-            if (activeElement === dialogRoot) {
+            if (activeElement === sentinelStart) {
-              this.$refs.sentinel.focus()
+              this.$refs.sentinelEnd.focus()
             }
-          } else if (activeElement === this.$refs.sentinel) {
+          } else if (activeElement === this.$refs.sentinelEnd) {
-            dialogRoot.focus()
+            sentinelStart.focus()
           }
         }
       }
     },
     getDialogElement () {
       const { closable, prefixCls, width, height,
-        title, footer: tempFooter, bodyStyle, visible, bodyProps } = this
+        title, footer: tempFooter, bodyStyle, visible, bodyProps, $props } = this
       const dest = {}
       if (width !== undefined) {
         dest.width = typeof width === 'number' ? `${width}px` : width
@@ -222,6 +222,7 @@ export default {
 
       let closer
       if (closable) {
+        const closeIcon = getComponentFromProp(this, 'closeIcon')
         closer = (
           <button
             key='close'
@@ -229,11 +230,12 @@ export default {
             aria-label='Close'
             class={`${prefixCls}-close`}
           >
-            <span class={`${prefixCls}-close-x`} />
+            {closeIcon || <span class={`${prefixCls}-close-x`} />}
           </button>)
       }
 
       const style = { ...this.dialogStyle, ...dest }
+      const sentinelStyle = { width: 0, height: 0, overflow: 'hidden' }
       const cls = {
         [prefixCls]: true,
         ...this.dialogClass,
@@ -248,6 +250,9 @@ export default {
           style={style}
           class={cls}
         >
+          <div tabIndex={0} ref='sentinelStart' style={sentinelStyle}>
+          sentinelStart
+          </div>
           <div class={`${prefixCls}-content`}>
             {closer}
             {header}
@@ -262,8 +267,8 @@ export default {
             </div>
             {footer}
           </div>
-          <div tabIndex={0} ref='sentinel' style='width: 0px; height: 0px; overflow: hidden'>
+          <div tabIndex={0} ref='sentinelEnd' style={sentinelStyle}>
-          sentinel
+          sentinelEnd
           </div>
         </LazyRenderBox>
       )

components/vc-dialog/IDialogPropTypes.js

@@ -34,6 +34,7 @@ function IDialogPropTypes () {
     getContainer: PropTypes.func,
     dialogStyle: PropTypes.object.def({}),
     dialogClass: PropTypes.object.def({}),
+    closeIcon: PropTypes.any,
   }
 }
 

components/vc-dialog/demo/ant-design.vue

@@ -5,6 +5,12 @@ import '../assets/index.less'
 // use import Dialog from 'rc-dialog'
 import Dialog from '../index'
 
+const clearPath = 'M793 242H366v-74c0-6.7-7.7-10.4-12.9' +
+  '-6.3l-142 112c-4.1 3.2-4.1 9.4 0 12.6l142 112c' +
+  '5.2 4.1 12.9 0.4 12.9-6.3v-74h415v470H175c-4.4' +
+  ' 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h618c35.3 0 64-' +
+  '28.7 64-64V306c0-35.3-28.7-64-64-64z'
+
 export default {
   data () {
     return {
@@ -13,9 +19,25 @@ export default {
       destroyOnClose: false,
       center: false,
       mousePosition: {},
+      useIcon: false,
     }
   },
   methods: {
+    getSvg  (path, props = {}, align = false) {
+      return (
+        <i {...{ props }}>
+          <svg
+            viewBox='0 0 1024 1024'
+            width='1em'
+            height='1em'
+            fill='currentColor'
+            style={align ? { verticalAlign: '-.125em ' } : {}}
+          >
+            <path d={path} p-id='5827'></path>
+          </svg>
+        </i>
+      )
+    },
     onClick (e) {
       this.visible = true
       this.mousePosition = {
@@ -40,6 +62,9 @@ export default {
     handleCenter (e) {
       this.center = e.target.checked
     },
+    toggleCloseIcon () {
+      this.useIcon = !this.useIcon
+    },
   },
 
   render () {
@@ -61,10 +86,14 @@ export default {
         style={style}
         mousePosition={this.mousePosition}
         destroyOnClose={this.destroyOnClose}
+        closeIcon={this.useIcon ? this.getSvg(clearPath, {}, true) : undefined}
       >
         <input autoFocus/>
         <p>basic modal</p>
         <button onClick={this.changeWidth}>change width</button>
+        <button onClick={this.toggleCloseIcon}>
+          use custom icon, is using icon: {this.useIcon && 'true' || 'false'}.
+        </button>
         <div style={{ height: '200px' }} />
       </Dialog>
     )

components/vc-dialog/index.js

@@ -1,3 +1,3 @@
-// based on vc-dialog 7.1.8
+// based on vc-dialog 7.2.1
 import DialogWrap from './DialogWrap'
 export default DialogWrap