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

87 lines
1.9 KiB
React
Raw Normal View History

2018-03-19 02:16:27 +00:00
2018-03-05 11:05:23 +00:00
import Dialog from './Dialog'
2018-03-05 14:50:25 +00:00
import ContainerRender from '../_util/ContainerRender'
2018-03-05 11:05:23 +00:00
import getDialogPropTypes from './IDialogPropTypes'
2018-03-06 11:14:41 +00:00
import { getStyle, getClass } from '../_util/props-util'
2018-03-05 11:05:23 +00:00
const IDialogPropTypes = getDialogPropTypes()
const DialogWrap = {
props: {
...IDialogPropTypes,
visible: IDialogPropTypes.visible.def(false),
},
data () {
this.renderComponent = () => {}
this.removeContainer = () => {}
return {}
},
beforeDestroy () {
if (this.visible) {
this.renderComponent({
afterClose: this.removeContainer,
visible: false,
2018-03-07 13:36:15 +00:00
on: {
close () {},
},
2018-03-05 11:05:23 +00:00
})
} else {
this.removeContainer()
}
},
2018-03-05 14:50:25 +00:00
methods: {
getComponent (extra = {}) {
2018-03-06 11:14:41 +00:00
const { $attrs, $listeners, $props, $slots } = this
2018-03-07 13:36:15 +00:00
const { on, ...otherProps } = extra
2018-03-05 14:50:25 +00:00
const dialogProps = {
props: {
2018-03-06 11:14:41 +00:00
...$props,
dialogClass: getClass(this),
dialogStyle: getStyle(this),
2018-03-07 13:36:15 +00:00
...otherProps,
2018-03-05 14:50:25 +00:00
},
2018-03-06 11:14:41 +00:00
attrs: $attrs,
2018-03-05 14:50:25 +00:00
ref: '_component',
key: 'dialog',
2018-03-07 13:36:15 +00:00
on: {
...$listeners,
...on,
},
2018-03-05 14:50:25 +00:00
}
return (
2018-03-06 11:14:41 +00:00
<Dialog {...dialogProps}>{$slots.default}</Dialog>
2018-03-05 14:50:25 +00:00
)
},
2018-03-05 11:05:23 +00:00
2018-03-05 14:50:25 +00:00
getContainer2 () {
if (this.getContainer) {
return this.getContainer()
}
const container = document.createElement('div')
document.body.appendChild(container)
return container
},
2018-03-05 11:05:23 +00:00
},
render () {
const { visible } = this
return (
<ContainerRender
parent={this}
visible={visible}
autoDestroy={false}
getComponent={this.getComponent}
2018-03-05 14:50:25 +00:00
getContainer={this.getContainer2}
children={({ renderComponent, removeContainer }) => {
2018-03-05 11:05:23 +00:00
this.renderComponent = renderComponent
this.removeContainer = removeContainer
return null
}}
2018-03-05 14:50:25 +00:00
/>
2018-03-05 11:05:23 +00:00
)
},
}
export default DialogWrap