ant-design-vue/components/vc-dialog/Dialog.jsx

428 lines
12 KiB
Vue
Raw Normal View History

2018-03-19 10:16:27 +08:00
2018-03-05 19:05:23 +08:00
import KeyCode from '../_util/KeyCode'
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
import contains from '../_util/Dom/contains'
2018-03-05 19:05:23 +08:00
import LazyRenderBox from './LazyRenderBox'
import BaseMixin from '../_util/BaseMixin'
import getTransitionProps from '../_util/getTransitionProps'
2018-03-05 22:50:25 +08:00
import getScrollBarSize from '../_util/getScrollBarSize'
2018-03-05 19:05:23 +08:00
import getDialogPropTypes from './IDialogPropTypes'
const IDialogPropTypes = getDialogPropTypes()
let uuid = 0
let openCount = 0
/* eslint react/no-is-mounted:0 */
2018-03-06 22:53:32 +08:00
function noop () {}
2018-03-05 19:05:23 +08:00
function getScroll (w, top) {
let ret = w[`page${top ? 'Y' : 'X'}Offset`]
const method = `scroll${top ? 'Top' : 'Left'}`
if (typeof ret !== 'number') {
const d = w.document
ret = d.documentElement[method]
if (typeof ret !== 'number') {
ret = d.body[method]
}
}
return ret
}
function setTransformOrigin (node, value) {
const style = node.style;
['Webkit', 'Moz', 'Ms', 'ms'].forEach((prefix) => {
style[`${prefix}TransformOrigin`] = value
})
style[`transformOrigin`] = value
}
function offset (el) {
const rect = el.getBoundingClientRect()
const pos = {
left: rect.left,
top: rect.top,
}
const doc = el.ownerDocument
const w = doc.defaultView || doc.parentWindow
pos.left += getScroll(w)
pos.top += getScroll(w, true)
return pos
}
const initDefaultProps = (propTypes, defaultProps) => {
return Object.keys(defaultProps).map(k => propTypes[k].def(defaultProps[k]))
}
export default {
mixins: [BaseMixin],
props: {
...IDialogPropTypes,
...initDefaultProps(IDialogPropTypes, {
mask: true,
visible: false,
keyboard: true,
closable: true,
maskClosable: true,
destroyOnClose: false,
prefixCls: 'rc-dialog',
}),
},
2018-03-06 19:14:41 +08:00
data () {
return {
destroyPopup: false,
}
},
2018-03-05 19:05:23 +08:00
// private inTransition: boolean;
// private titleId: string;
// private openTime: number;
// private lastOutSideFocusNode: HTMLElement | null;
// private wrap: HTMLElement;
// private dialog: any;
// private sentinel: HTMLElement;
// private bodyIsOverflowing: boolean;
// private scrollbarWidth: number;
beforeMount () {
this.inTransition = false
this.titleId = `rcDialogTitle${uuid++}`
},
mounted () {
this.$nextTick(() => {
this.updatedCallback(false)
})
},
watch: {
visible (val) {
2018-03-06 19:14:41 +08:00
if (val) {
this.destroyPopup = false
}
2018-03-06 22:53:32 +08:00
this.$nextTick(() => {
this.updatedCallback(!val)
})
2018-03-05 19:05:23 +08:00
},
},
beforeDestroy () {
2018-03-06 19:14:41 +08:00
if (this.visible || this.inTransition) {
2018-03-05 19:05:23 +08:00
this.removeScrollingEffect()
}
},
methods: {
updatedCallback (visible) {
const mousePosition = this.mousePosition
if (this.visible) {
// first show
if (!visible) {
this.openTime = Date.now()
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
// this.lastOutSideFocusNode = document.activeElement
2018-03-05 19:05:23 +08:00
this.addScrollingEffect()
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
// this.$refs.wrap.focus()
this.tryFocus()
2018-03-05 22:50:25 +08:00
const dialogNode = this.$refs.dialog.$el
2018-03-05 19:05:23 +08:00
if (mousePosition) {
const elOffset = offset(dialogNode)
setTransformOrigin(dialogNode,
`${mousePosition.x - elOffset.left}px ${mousePosition.y - elOffset.top}px`)
} else {
setTransformOrigin(dialogNode, '')
}
}
} else if (visible) {
this.inTransition = true
if (this.mask && this.lastOutSideFocusNode) {
try {
this.lastOutSideFocusNode.focus()
} catch (e) {
this.lastOutSideFocusNode = null
}
this.lastOutSideFocusNode = null
}
}
},
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
tryFocus () {
if (!contains(this.$refs.wrap, document.activeElement)) {
this.lastOutSideFocusNode = document.activeElement
this.$refs.wrap.focus()
}
},
2018-03-05 19:05:23 +08:00
onAnimateLeave () {
2018-03-06 19:14:41 +08:00
const { afterClose, destroyOnClose } = this
2018-03-05 19:05:23 +08:00
// need demo?
// https://github.com/react-component/dialog/pull/28
if (this.$refs.wrap) {
this.$refs.wrap.style.display = 'none'
}
2018-03-06 19:14:41 +08:00
if (destroyOnClose) {
this.destroyPopup = true
}
2018-03-05 19:05:23 +08:00
this.inTransition = false
this.removeScrollingEffect()
if (afterClose) {
afterClose()
}
},
onMaskClick (e) {
// android trigger click on open (fastclick??)
if (Date.now() - this.openTime < 300) {
return
}
if (e.target === e.currentTarget) {
this.close(e)
}
},
onKeydown (e) {
const props = this.$props
if (props.keyboard && e.keyCode === KeyCode.ESC) {
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
e.stopPropagation()
2018-03-05 19:05:23 +08:00
this.close(e)
update to antd3.8.3 (#159) * refactor: align * feat: update align to 2.4.3 * feat: update trigger 2.5.4 * feat: update tooltip 3.7.2 * fix: align * feat: update vc-calendar to 9.6.2 * feat: update vc-checkbox to 2.1.5 * feat: update vc-dialog to 7.1.8 * feat: update vc-from to 2.2.1 * feat: update vc-notification to 3.1.1 * test: update snapshots * feat: update vc-tree to 1.12.6 * feat: update vc-table to 6.2.8 * feat: update vc-upload to 2.5.1 * feat: update vc-input-number to 4.0.12 * feat: update vc-tabs to 9.2.6 * refactor: vc-menu * refactor: update vc-menu to 7.0.5 * style: remove unused * feat: update pagination to 1.16.5 * feat: add vc-progress 2.2.5 tag * feat: add vc-rate 2.4.0 tag * feat: update vc-slider to 8.6.1 * fix: tooltip error * style: delete conosle * feat: update vc-steps to 3.1.1 * add vc-switch tag 1.6.0 * feat: update upload to 2.5.1 * fix: update vc-menu * fix: update store * fix: add ref dir * fix: trigger mock shouldComponentUpdate * fix: update vc-select * revert: trigger lazyrenderbox * fix: update vc-select * fix: update vc-select * fix: update vc-select * fix: update vc-menu * fix: update vc-slick ref * update style to 3.8.2 * test: update snapshots * update vc-select * update util & affix * feat: add drawer * fix: support title add slot mode * test: update affix test * update alert * update anchor * update snapshots * fix: doc and vc-drawer * update select & auto-complete * update back-top & grid * feractor: avatar * test: add drawer test * update badge * update button * update card * update divider * feat: update vc-tabs to 9.3.6 and tabs * add afterEnter callback * update form * fix: update drawer * test: update snapshots * update modal & notification * test: update snapshots * update message * update locale-provider * update dropdown * update layout popconfirm popover * update time-picker * update menu * update date-picker * docs: update input docs * update input * update snapshots * update table * update test snapshots * feat: update progress * update checkbox * feat: update spin * update radio * docs: slider steps timeline * update list * update transfer * update collapse * update cascader * update upload
2018-09-05 21:28:54 +08:00
return
2018-03-05 19:05:23 +08:00
}
// keep focus inside dialog
if (props.visible) {
if (e.keyCode === KeyCode.TAB) {
const activeElement = document.activeElement
const dialogRoot = this.$refs.wrap
if (e.shiftKey) {
if (activeElement === dialogRoot) {
this.$refs.sentinel.focus()
}
} else if (activeElement === this.$refs.sentinel) {
dialogRoot.focus()
}
}
}
},
getDialogElement () {
2018-03-06 19:14:41 +08:00
const { closable, prefixCls, width, height,
title, footer: tempFooter, bodyStyle, visible, bodyProps } = this
2018-03-05 19:05:23 +08:00
const dest = {}
2018-03-06 19:14:41 +08:00
if (width !== undefined) {
dest.width = typeof width === 'number' ? `${width}px` : width
2018-03-05 19:05:23 +08:00
}
2018-03-06 19:14:41 +08:00
if (height !== undefined) {
dest.height = typeof height === 'number' ? `${height}px` : height
2018-03-05 19:05:23 +08:00
}
let footer
2018-03-06 19:14:41 +08:00
if (tempFooter) {
2018-03-05 19:05:23 +08:00
footer = (
<div key='footer' class={`${prefixCls}-footer`} ref='footer'>
2018-03-06 19:14:41 +08:00
{tempFooter}
2018-03-05 19:05:23 +08:00
</div>
)
}
let header
2018-03-06 19:14:41 +08:00
if (title) {
2018-03-05 19:05:23 +08:00
header = (
<div key='header' class={`${prefixCls}-header`} ref='header'>
2018-03-05 19:05:23 +08:00
<div class={`${prefixCls}-title`} id={this.titleId}>
2018-03-06 19:14:41 +08:00
{title}
2018-03-05 19:05:23 +08:00
</div>
</div>
)
}
let closer
if (closable) {
closer = (
<button
key='close'
2018-03-06 22:53:32 +08:00
onClick={this.close || noop}
2018-03-05 19:05:23 +08:00
aria-label='Close'
class={`${prefixCls}-close`}
>
<span class={`${prefixCls}-close-x`} />
</button>)
}
2018-03-06 19:14:41 +08:00
const style = { ...this.dialogStyle, ...dest }
const cls = {
[prefixCls]: true,
...this.dialogClass,
}
2018-03-05 19:05:23 +08:00
const transitionName = this.getTransitionName()
const dialogElement = (
<LazyRenderBox
2018-03-06 19:14:41 +08:00
v-show={visible}
2018-03-05 19:05:23 +08:00
key='dialog-element'
role='document'
ref='dialog'
style={style}
2018-03-06 19:14:41 +08:00
class={cls}
2018-03-05 19:05:23 +08:00
>
<div class={`${prefixCls}-content`}>
{closer}
{header}
<div
key='body'
2018-03-05 19:05:23 +08:00
class={`${prefixCls}-body`}
2018-03-06 19:14:41 +08:00
style={bodyStyle}
2018-03-05 19:05:23 +08:00
ref='body'
2018-03-06 19:14:41 +08:00
{...bodyProps}
2018-03-05 19:05:23 +08:00
>
{this.$slots.default}
</div>
{footer}
</div>
<div tabIndex={0} ref='sentinel' style='width: 0px; height: 0px; overflow: hidden'>
sentinel
</div>
</LazyRenderBox>
)
const dialogTransitionProps = getTransitionProps(transitionName, {
afterLeave: this.onAnimateLeave,
})
return (
<transition
key='dialog'
{...dialogTransitionProps}
>
2018-03-06 19:14:41 +08:00
{(visible || !this.destroyPopup) ? dialogElement : null}
2018-03-05 19:05:23 +08:00
</transition>
)
},
getZIndexStyle () {
const style = {}
const props = this.$props
if (props.zIndex !== undefined) {
style.zIndex = props.zIndex
}
return style
},
getWrapStyle () {
return { ...this.getZIndexStyle(), ...this.wrapStyle }
},
getMaskStyle () {
return { ...this.getZIndexStyle(), ...this.maskStyle }
},
getMaskElement () {
const props = this.$props
let maskElement
if (props.mask) {
const maskTransition = this.getMaskTransitionName()
maskElement = (
<LazyRenderBox
v-show={props.visible}
style={this.getMaskStyle()}
key='mask'
class={`${props.prefixCls}-mask`}
{...props.maskProps}
/>
)
if (maskTransition) {
const maskTransitionProps = getTransitionProps(maskTransition)
maskElement = (
<transition
key='mask'
{...maskTransitionProps}
>
{maskElement}
</transition>
)
}
}
return maskElement
},
getMaskTransitionName () {
const props = this.$props
let transitionName = props.maskTransitionName
const animation = props.maskAnimation
if (!transitionName && animation) {
transitionName = `${props.prefixCls}-${animation}`
}
return transitionName
},
getTransitionName () {
const props = this.$props
let transitionName = props.transitionName
const animation = props.animation
if (!transitionName && animation) {
transitionName = `${props.prefixCls}-${animation}`
}
return transitionName
},
setScrollbar () {
if (this.bodyIsOverflowing && this.scrollbarWidth !== undefined) {
document.body.style.paddingRight = `${this.scrollbarWidth}px`
}
},
addScrollingEffect () {
openCount++
if (openCount !== 1) {
return
}
this.checkScrollbar()
this.setScrollbar()
document.body.style.overflow = 'hidden'
// this.adjustDialog();
},
removeScrollingEffect () {
openCount--
if (openCount !== 0) {
return
}
document.body.style.overflow = ''
this.resetScrollbar()
// this.resetAdjustments();
},
close (e) {
this.__emit('close', e)
},
checkScrollbar () {
let fullWindowWidth = window.innerWidth
if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
const documentElementRect = document.documentElement.getBoundingClientRect()
fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left)
}
this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth
if (this.bodyIsOverflowing) {
this.scrollbarWidth = getScrollBarSize()
}
},
resetScrollbar () {
document.body.style.paddingRight = ''
},
adjustDialog () {
if (this.$refs.wrap && this.scrollbarWidth !== undefined) {
const modalIsOverflowing =
this.$refs.wrap.scrollHeight > document.documentElement.clientHeight
this.$refs.wrap.style.paddingLeft =
`${!this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : ''}px`
this.$refs.wrap.style.paddingRight =
`${this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''}px`
}
},
resetAdjustments () {
if (this.$refs.wrap) {
this.$refs.wrap.style.paddingLeft = this.$refs.wrap.style.paddingLeft = ''
}
},
},
render () {
const { prefixCls, maskClosable, visible, wrapClassName, title, wrapProps } = this
const style = this.getWrapStyle()
// clear hide display
// and only set display after async anim, not here for hide
if (visible) {
style.display = null
}
return (
<div>
{this.getMaskElement()}
<div
tabIndex={-1}
onKeydown={this.onKeydown}
class={`${prefixCls}-wrap ${wrapClassName || ''}`}
2018-03-05 22:50:25 +08:00
ref='wrap'
2018-03-06 22:53:32 +08:00
onClick={maskClosable ? this.onMaskClick : noop}
2018-03-05 19:05:23 +08:00
role='dialog'
aria-labelledby={title ? this.titleId : null}
style={style}
{...wrapProps}
>
{this.getDialogElement()}
</div>
</div>
)
},
}