From 26186d7aadd8298bf3c8cb1a1147e9ace4409793 Mon Sep 17 00:00:00 2001 From: tangjinzhou <415800467@qq.com> Date: Mon, 29 Oct 2018 20:49:38 +0800 Subject: [PATCH] feat: update dialog from 7.1.8 to 7.2.1 --- components/vc-dialog/Dialog.jsx | 27 +++++++++++++--------- components/vc-dialog/IDialogPropTypes.js | 1 + components/vc-dialog/demo/ant-design.vue | 29 ++++++++++++++++++++++++ components/vc-dialog/index.js | 2 +- 4 files changed, 47 insertions(+), 12 deletions(-) diff --git a/components/vc-dialog/Dialog.jsx b/components/vc-dialog/Dialog.jsx index 10b9be568..cd396f723 100644 --- a/components/vc-dialog/Dialog.jsx +++ b/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) { - this.$refs.sentinel.focus() + if (activeElement === sentinelStart) { + this.$refs.sentinelEnd.focus() } - } else if (activeElement === this.$refs.sentinel) { - dialogRoot.focus() + } else if (activeElement === this.$refs.sentinelEnd) { + 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 = ( ) } 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} > +
+ sentinelStart +
{closer} {header} @@ -262,8 +267,8 @@ export default {
{footer} -
- sentinel +
+ sentinelEnd
) diff --git a/components/vc-dialog/IDialogPropTypes.js b/components/vc-dialog/IDialogPropTypes.js index b0e6e397d..531520820 100644 --- a/components/vc-dialog/IDialogPropTypes.js +++ b/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, } } diff --git a/components/vc-dialog/demo/ant-design.vue b/components/vc-dialog/demo/ant-design.vue index 06a43ecd1..8e721864f 100644 --- a/components/vc-dialog/demo/ant-design.vue +++ b/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 ( + + + + + + ) + }, 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} >

basic modal

+
) diff --git a/components/vc-dialog/index.js b/components/vc-dialog/index.js index 27129313a..ec4da46a0 100644 --- a/components/vc-dialog/index.js +++ b/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