zent
Version:
一套前端设计语言和基于React的实现
61 lines (51 loc) • 1.6 kB
JavaScript
import React, { PropTypes, Component } from 'react';
import Portal, { withNonScrollable, withESCToClose } from 'zent-portal';
import DialogEl from './DialogEl';
const DialogPortal = withNonScrollable(Portal);
const DialogPortalESCToClose = withESCToClose(DialogPortal);
export default class Dialog extends Component {
static propTypes = {
prefix: PropTypes.string,
onClose: PropTypes.func,
visible: PropTypes.bool,
className: PropTypes.string,
style: PropTypes.object,
title: PropTypes.node,
closeBtn: PropTypes.bool,
mask: PropTypes.bool,
maskClosable: PropTypes.bool,
footer: PropTypes.node
}
static defaultProps = {
prefix: 'zent',
onClose() {},
visible: false,
className: '',
style: {},
title: '',
closeBtn: true,
mask: true,
maskClosable: true,
footer: null
}
onClose = (e) => {
this.props.onClose(e);
};
render() {
const { visible, prefix, closeBtn, style } = this.props;
// load default max/min-width value when width is not specified in style prop
const elStyle = {
...style.width ? {} : { minWidth: '450px', maxWidth: '75%' },
...style
};
// 有关闭按钮的时候同时具有ESC关闭的行为
const PortalComponent = closeBtn ? DialogPortalESCToClose : DialogPortal;
return (
<PortalComponent visible={visible} onClose={this.onClose} className={`${prefix}-dialog-r-anchor`}>
<DialogEl {...this.props} onClose={this.onClose} style={elStyle}>
{this.props.children}
</DialogEl>
</PortalComponent>
);
}
}