1- import { getComponentFromProp } from '../_util/props-util' ;
1+ import { getComponentFromProp , initDefaultProps } from '../_util/props-util' ;
22import KeyCode from '../_util/KeyCode' ;
33import contains from '../_util/Dom/contains' ;
44import LazyRenderBox from './LazyRenderBox' ;
55import BaseMixin from '../_util/BaseMixin' ;
66import getTransitionProps from '../_util/getTransitionProps' ;
7- import getScrollBarSize from '../_util/getScrollBarSize ' ;
7+ import switchScrollingEffect from '../_util/switchScrollingEffect ' ;
88import getDialogPropTypes from './IDialogPropTypes' ;
99const IDialogPropTypes = getDialogPropTypes ( ) ;
1010
1111let uuid = 0 ;
12- let openCount = 0 ;
1312
1413/* eslint react/no-is-mounted:0 */
1514function noop ( ) { }
@@ -46,23 +45,19 @@ function offset(el) {
4645 pos . top += getScroll ( w , true ) ;
4746 return pos ;
4847}
49- const initDefaultProps = ( propTypes , defaultProps ) => {
50- return Object . keys ( defaultProps ) . map ( k => propTypes [ k ] . def ( defaultProps [ k ] ) ) ;
51- } ;
48+
5249export default {
5350 mixins : [ BaseMixin ] ,
54- props : {
55- ...IDialogPropTypes ,
56- ...initDefaultProps ( IDialogPropTypes , {
57- mask : true ,
58- visible : false ,
59- keyboard : true ,
60- closable : true ,
61- maskClosable : true ,
62- destroyOnClose : false ,
63- prefixCls : 'rc-dialog' ,
64- } ) ,
65- } ,
51+ props : initDefaultProps ( IDialogPropTypes , {
52+ mask : true ,
53+ visible : false ,
54+ keyboard : true ,
55+ closable : true ,
56+ maskClosable : true ,
57+ destroyOnClose : false ,
58+ prefixCls : 'rc-dialog' ,
59+ getOpenCount : ( ) => null ,
60+ } ) ,
6661 data ( ) {
6762 return {
6863 destroyPopup : false ,
@@ -97,12 +92,18 @@ export default {
9792 mounted ( ) {
9893 this . $nextTick ( ( ) => {
9994 this . updatedCallback ( false ) ;
95+ // if forceRender is true, set element style display to be none;
96+ if ( ( this . forceRender || ( this . getContainer === false && ! this . visible ) ) && this . $refs . wrap ) {
97+ this . $refs . wrap . style . display = 'none' ;
98+ }
10099 } ) ;
101100 } ,
102101 beforeDestroy ( ) {
103- if ( this . visible || this . inTransition ) {
102+ const { visible, getOpenCount } = this ;
103+ if ( ( visible || this . inTransition ) && ! getOpenCount ( ) ) {
104104 this . removeScrollingEffect ( ) ;
105105 }
106+ clearTimeout ( this . timeoutId ) ;
106107 } ,
107108 methods : {
108109 updatedCallback ( visible ) {
@@ -160,12 +161,23 @@ export default {
160161 afterClose ( ) ;
161162 }
162163 } ,
164+ onDialogMouseDown ( ) {
165+ this . dialogMouseDown = true ;
166+ } ,
167+
168+ onMaskMouseUp ( ) {
169+ if ( this . dialogMouseDown ) {
170+ this . timeoutId = setTimeout ( ( ) => {
171+ this . dialogMouseDown = false ;
172+ } , 0 ) ;
173+ }
174+ } ,
163175 onMaskClick ( e ) {
164176 // android trigger click on open (fastclick??)
165177 if ( Date . now ( ) - this . openTime < 300 ) {
166178 return ;
167179 }
168- if ( e . target === e . currentTarget ) {
180+ if ( e . target === e . currentTarget && ! this . dialogMouseDown ) {
169181 this . close ( e ) ;
170182 }
171183 } ,
@@ -236,6 +248,7 @@ export default {
236248 const closeIcon = getComponentFromProp ( this , 'closeIcon' ) ;
237249 closer = (
238250 < button
251+ type = "button"
239252 key = "close"
240253 onClick = { this . close || noop }
241254 aria-label = "Close"
@@ -261,10 +274,9 @@ export default {
261274 ref = "dialog"
262275 style = { style }
263276 class = { cls }
277+ onMousedown = { this . onDialogMouseDown }
264278 >
265- < div tabIndex = { 0 } ref = "sentinelStart" style = { sentinelStyle } >
266- sentinelStart
267- </ div >
279+ < div tabIndex = { 0 } ref = "sentinelStart" style = { sentinelStyle } aria-hidden = "true" />
268280 < div class = { `${ prefixCls } } >
269281 { closer }
270282 { header }
@@ -273,9 +285,7 @@ export default {
273285 </ div >
274286 { footer }
275287 </ div >
276- < div tabIndex = { 0 } ref = "sentinelEnd" style = { sentinelStyle } >
277- sentinelEnd
278- </ div >
288+ < div tabIndex = { 0 } ref = "sentinelEnd" style = { sentinelStyle } aria-hidden = "true" />
279289 </ LazyRenderBox >
280290 ) ;
281291 const dialogTransitionProps = getTransitionProps ( transitionName , {
@@ -344,65 +354,65 @@ export default {
344354 }
345355 return transitionName ;
346356 } ,
347- setScrollbar ( ) {
348- if ( this . bodyIsOverflowing && this . scrollbarWidth !== undefined ) {
349- document . body . style . paddingRight = `${ this . scrollbarWidth } ;
350- }
351- } ,
357+ // setScrollbar() {
358+ // if (this.bodyIsOverflowing && this.scrollbarWidth !== undefined) {
359+ // document.body.style.paddingRight = `${this.scrollbarWidth}px`;
360+ // }
361+ // },
352362 addScrollingEffect ( ) {
353- openCount ++ ;
363+ const { getOpenCount } = this ;
364+ const openCount = getOpenCount ( ) ;
354365 if ( openCount !== 1 ) {
355366 return ;
356367 }
357- this . checkScrollbar ( ) ;
358- this . setScrollbar ( ) ;
368+ switchScrollingEffect ( ) ;
359369 document . body . style . overflow = 'hidden' ;
360- // this.adjustDialog();
361370 } ,
362371 removeScrollingEffect ( ) {
363- openCount -- ;
372+ const { getOpenCount } = this ;
373+ const openCount = getOpenCount ( ) ;
364374 if ( openCount !== 0 ) {
365375 return ;
366376 }
367377 document . body . style . overflow = '' ;
368- this . resetScrollbar ( ) ;
378+ switchScrollingEffect ( true ) ;
369379 // this.resetAdjustments();
370380 } ,
371381 close ( e ) {
372382 this . __emit ( 'close' , e ) ;
373383 } ,
374- checkScrollbar ( ) {
375- let fullWindowWidth = window . innerWidth ;
376- if ( ! fullWindowWidth ) {
377- // workaround for missing window.innerWidth in IE8
378- const documentElementRect = document . documentElement . getBoundingClientRect ( ) ;
379- fullWindowWidth = documentElementRect . right - Math . abs ( documentElementRect . left ) ;
380- }
381- this . bodyIsOverflowing = document . body . clientWidth < fullWindowWidth ;
382- if ( this . bodyIsOverflowing ) {
383- this . scrollbarWidth = getScrollBarSize ( ) ;
384- }
385- } ,
386- resetScrollbar ( ) {
387- document . body . style . paddingRight = '' ;
388- } ,
389- adjustDialog ( ) {
390- if ( this . $refs . wrap && this . scrollbarWidth !== undefined ) {
391- const modalIsOverflowing =
392- this . $refs . wrap . scrollHeight > document . documentElement . clientHeight ;
393- this . $refs . wrap . style . paddingLeft = `${
394- ! this . bodyIsOverflowing && modalIsOverflowing ? this . scrollbarWidth : ''
395- } px`;
396- this . $refs . wrap . style . paddingRight = `${
397- this . bodyIsOverflowing && ! modalIsOverflowing ? this . scrollbarWidth : ''
398- } px`;
399- }
400- } ,
401- resetAdjustments ( ) {
402- if ( this . $refs . wrap ) {
403- this . $refs . wrap . style . paddingLeft = this . $refs . wrap . style . paddingLeft = '' ;
404- }
405- } ,
384+ // checkScrollbar() {
385+ // let fullWindowWidth = window.innerWidth;
386+ // if (!fullWindowWidth) {
387+ // // workaround for missing window.innerWidth in IE8
388+ // const documentElementRect = document.documentElement.getBoundingClientRect();
389+ // fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
390+ // }
391+ // this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
392+ // if (this.bodyIsOverflowing) {
393+ // this.scrollbarWidth = getScrollBarSize();
394+ // }
395+ // },
396+ // resetScrollbar() {
397+ // document.body.style.paddingRight = '';
398+ // },
399+ // adjustDialog() {
400+ // if (this.$refs.wrap && this.scrollbarWidth !== undefined) {
401+ // const modalIsOverflowing =
402+ // this.$refs.wrap.scrollHeight > document.documentElement.clientHeight;
403+ // this.$refs.wrap.style.paddingLeft = `${
404+ // !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : ''
405+ // }px`;
406+ // this.$refs.wrap.style.paddingRight = `${
407+ // this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
408+ // }px`;
409+ // }
410+ // },
411+ // resetAdjustments() {
412+ // if (this.$refs.wrap) {
413+ // this.$refs.wrap.style.paddingLeft = this.$refs.wrap.style.paddingLeft = '';
414+ // }
415+ // },
406416 } ,
407417 render ( ) {
408418 const { prefixCls, maskClosable, visible, wrapClassName, title, wrapProps } = this ;
@@ -421,6 +431,7 @@ export default {
421431 class = { `${ prefixCls } ${ wrapClassName || '' } }
422432 ref = "wrap"
423433 onClick = { maskClosable ? this . onMaskClick : noop }
434+ onMouseup = { maskClosable ? this . onMaskMouseUp : noop }
424435 role = "dialog"
425436 aria-labelledby = { title ? this . titleId : null }
426437 style = { style }
0 commit comments