231 lines
8.6 KiB
JavaScript
231 lines
8.6 KiB
JavaScript
import { Modal,Row, Col, Button,Icon,Menu,} from 'antd';
|
|
import {Dropdown} from 'mode-coms'
|
|
import {WeaLocaleProvider} from 'ecCom';
|
|
const getLabel = WeaLocaleProvider.getLabel;
|
|
const Item = Menu.Item
|
|
import isString from 'lodash/isString';
|
|
import './style/index.css'
|
|
|
|
class Main extends React.Component {
|
|
static defaultProps = {
|
|
style: {width: 520, height: 400},
|
|
icon: 'icon-coms-ModelingEngine',
|
|
maskClosable: false,
|
|
closable: true,
|
|
title: 'Dialog',
|
|
iconBgcolor: '#2db7f5',
|
|
isallscreen:false,
|
|
hasMoreBtn:false
|
|
}
|
|
static contextTypes = {
|
|
router: React.PropTypes.routerShape
|
|
}
|
|
listenRouter(){
|
|
this.context.router.listen(nextState => {
|
|
const { path } = this.state;
|
|
const { pathname } = nextState;
|
|
if(path !== pathname){
|
|
this._reactInternalInstance !== undefined && this.setState({path:pathname, visible:false});
|
|
}
|
|
})
|
|
}
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
visible: false,
|
|
modalBody: '',
|
|
title: props.title || '',
|
|
url: props.url || '',
|
|
style: props.style,
|
|
icon: props.icon,
|
|
closable: props.closable,
|
|
buttons: props.buttons,
|
|
maskClosable: props.maskClosable,
|
|
iconBgcolor: props.iconBgcolor,
|
|
path: window.location.hash && window.location.hash.split('#/')[1].split('?')[0],
|
|
isallscreen:false,
|
|
hasMoreBtn:props.hasMoreBtn || false,
|
|
dropMenuDatas:props.dropMenuDatas || [],
|
|
showDrop:false
|
|
}
|
|
this.onCancel = this.onCancel.bind(this);
|
|
}
|
|
componentWillReceiveProps(nextProps){
|
|
|
|
|
|
if (this.props.visible !== nextProps.visible || this.state.visible !== nextProps.visible) {
|
|
this.setState({visible: nextProps.visible});
|
|
}
|
|
if (this.props.url !== nextProps.url) {
|
|
this.setState({url: nextProps.url});
|
|
}
|
|
// if (!WeaTools.isEqual(this.props.style, nextProps.style)) {
|
|
// this.setState({style: nextProps.style});
|
|
// }
|
|
if ('buttons' in this.props) {
|
|
this.setState({buttons: nextProps.buttons});
|
|
}
|
|
if (this.props.title !== nextProps.title) {
|
|
this.setState({title: nextProps.title});
|
|
}
|
|
// if (this.props.icon !== nextProps.icon) {
|
|
// this.setState({icon: nextProps.icon});
|
|
// }
|
|
// if (this.props.iconBgcolor !== nextProps.iconBgcolor) {
|
|
// this.setState({iconBgcolor: nextProps.iconBgcolor});
|
|
// }
|
|
}
|
|
shouldComponentUpdate(...args) {
|
|
return true
|
|
// return PureRenderMixin.shouldComponentUpdate.apply(this, args);
|
|
}
|
|
componentDidMount(){
|
|
this.listenRouter();
|
|
window.initExtendDialog = params => {
|
|
let state = {};
|
|
if (params.style) {
|
|
state.style = params.style;
|
|
}
|
|
if (params.buttons) {
|
|
state.buttons = params.buttons;
|
|
}
|
|
if (params.url) {
|
|
state.url = params.url;
|
|
}
|
|
if (params.modalBody) {
|
|
state.modalBody = params.modalBody;
|
|
}
|
|
if (params.title) {
|
|
state.title = params.title;
|
|
}
|
|
if (params.icon) {
|
|
state.icon = params.icon;
|
|
}
|
|
if (params.closable !== undefined) {
|
|
state.closable = params.closable;
|
|
}
|
|
if (params.maskClosable !== undefined) {
|
|
state.maskClosable = params.maskClosable;
|
|
}
|
|
if (params.iconBgcolor) {
|
|
state.iconBgcolor = params.iconBgcolor;
|
|
}
|
|
if(params.hasMoreBtn){
|
|
state.hasMoreBtn = params.hasMoreBtn
|
|
}
|
|
if(params.dropMenuDatas){
|
|
state.dropMenuDatas = params.dropMenuDatas
|
|
}
|
|
this.setState(state);
|
|
}
|
|
window.showExtendDialog = () => {
|
|
this.setState({visible: true});
|
|
}
|
|
window.closeExtendDialog = () => {
|
|
this.onCancel();
|
|
}
|
|
}
|
|
onCancel() {
|
|
this.setState({visible: false});
|
|
this.props.onCancel && this.props.onCancel();
|
|
}
|
|
toAllScreen=()=>{
|
|
const screenH = window.document.documentElement.clientHeight || window.body.clientHeight;
|
|
|
|
this.setState({
|
|
style:{width:"100%",height:screenH-100},
|
|
isallscreen:true
|
|
});
|
|
jQuery('.extend-dialog .ant-modal').addClass('extend-dialog-allscreen')
|
|
}
|
|
claseAllScreen=()=>{
|
|
this.setState({
|
|
style:this.props.style,
|
|
isallscreen:false
|
|
});
|
|
jQuery('.extend-dialog .ant-modal').removeClass('extend-dialog-allscreen')
|
|
}
|
|
getFooterButtons(){
|
|
const {buttons,dropMenuDatas,hasMoreBtn,showDrop} = this.state;
|
|
let newButtons = [];
|
|
const menu = dropMenuDatas ?
|
|
<Menu mode='vertical' onClick={o => {if(typeof this.props.onDropMenuClick == 'function') this.props.onDropMenuClick(o.key)}}>
|
|
{
|
|
dropMenuDatas.map((d, i)=> {
|
|
return <Item key={d.key || i} disabled={d.disabled}>
|
|
<span className='extend-dialog-menu-icon'>{d.icon}</span>
|
|
{d.content}
|
|
</Item>
|
|
})}
|
|
</Menu> : '';
|
|
if(hasMoreBtn){
|
|
newButtons.push(<span style={{position:"relative"}}>
|
|
<span className="extend-dialog-menu" onMouseLeave={()=>this.setState({showDrop:false})} style={{display:showDrop ? "block":"none"}}>
|
|
<div className="extend-right-menu-icon-background"></div>
|
|
{menu}</span>
|
|
<Button onClick={()=>this.setState({showDrop:!showDrop})}>{getLabel(17499,"更多")}<i className="icon-coms-Browse-box-Add-to" style={{marginLeft:"5px"}}/>
|
|
<i className="icon-coms-Browse-box-Add-to" style={{marginLeft:"-5px"}} /></Button>
|
|
</span>)
|
|
}
|
|
return [...buttons,...newButtons]
|
|
|
|
}
|
|
render(){
|
|
const {children, hideIcon = false} = this.props;
|
|
const {modalBody, visible, url, closable, style, maskClosable, buttons, title, icon, iconBgcolor,isallscreen,hasMoreBtn,dropMenuDatas} = this.state;
|
|
let titleEle = (
|
|
<Row>
|
|
<Col span="18" style={{paddingLeft:20,lineHeight:'48px'}}>
|
|
<div>
|
|
{
|
|
!hideIcon &&
|
|
<div className="wea-browser-single-icon-circle" style={{background: iconBgcolor}}>
|
|
<i className={icon}/>
|
|
</div>
|
|
}
|
|
<span style={{verticalAlign:'middle'}}>{title}</span>
|
|
</div>
|
|
</Col>
|
|
<Col span="6" style={{paddingRight:10,lineHeight:'48px',textAlign:"right"}}>
|
|
<div>
|
|
{
|
|
isallscreen ? <span onClick={this.claseAllScreen} className="extend-dialog-header-icon" style={{cursor:"pointer",color:"#999"}}> <Icon type="shrink" /></span>:
|
|
<span onClick={this.toAllScreen} className="extend-dialog-header-icon" style={{cursor:"pointer",color:"#999"}}> <Icon type="arrow-salt" /></span>
|
|
}
|
|
<span onClick={this.onCancel} className="extend-dialog-header-icon" style={{cursor:"pointer",color:"#999",marginLeft:"-5px"}}> <Icon type="cross" /></span>
|
|
</div>
|
|
</Col>
|
|
</Row>
|
|
);
|
|
let body;
|
|
if (modalBody) {
|
|
body = modalBody;
|
|
if (isString(modalBody)) body = <div dangerouslySetInnerHTML={{__html: modalBody}}></div>
|
|
}
|
|
|
|
return (
|
|
<Modal
|
|
wrapClassName={`extend-dialog ${this.props.className}`}
|
|
zIndex={this.props.zIndex}
|
|
title={titleEle}
|
|
width={style.width}
|
|
closable={false}
|
|
maskClosable={maskClosable}
|
|
visible={visible}
|
|
onCancel={this.onCancel}
|
|
footer={this.getFooterButtons()}
|
|
>
|
|
<div className="extend-dialog-body" style={{height: style.height}}>
|
|
{children ? children : ''}
|
|
{body}
|
|
{url?
|
|
<iframe src={url} height={style.height - 20} width={style.width}>
|
|
</iframe>
|
|
: ''
|
|
}
|
|
</div>
|
|
</Modal>
|
|
)
|
|
}
|
|
}
|
|
export default Main; |