joywok-material-components
Version:
<h1 align="center"> Joywok Material Components </h1>
219 lines (213 loc) • 6.92 kB
JavaScript
/**
*
* @api {} 自定义模态框
* @apiName 自定义弹框，搭配 DialogFD 使用，可以通过 children 在内容区放入自己的 想要展示的组件
* @apiGroup 组件使用
* @apiParam {String} className 自定义样式名，用于自定义样式时使用
* @apiParam {String} colorSystem 色系，gray 灰色按钮； 默认为绿色
* @apiParam {Bool} saveBtnDisabled 保存按钮是否禁用，true 禁用；false 不禁用（可点击）
* @apiParam {React Component} children react组件，你的弹框主要内容。 比如 <SubscribeCreate />
*
* @apiSuccessExample {json} 使用案例:
* 以创建订阅号为例
import { DialogFD, CustomModal } from 'joywok-material-components';
import SubscribeCreate from '../../components/subscribe/subscribeCreat/Create';
Create(){ // 自己页面中的某个方法
let a = DialogFD({
app: window.dvaApp,
data: {
dialogType: 'custom',
open: true,
title: i18n("label.list.setting"),
hasclose: true,
className: "custom-dialog",
manualCloase: true,
colorSystem: 'gray', // 色系，gray 灰色按钮； 默认为绿色
children: <SubscribeCreate></SubscribeCreate>
},
manualCloase: true,
component: CustomModal,
})
a.events.on('save', function (components) {
// todo 保存数据请求
console.log('save:')
// 保存数据请求回来之后，调用关闭方法
a.close()
})
a.events.on('close', function (components,) {
console.log('close')
a.close()
})
}
*
*
*/
import React , {Component,Fragment} from 'react';
import {withStyles} from "@material-ui/core";
import Slide from '@material-ui/core/Slide';
import Fade from '@material-ui/core/Fade';
import Button from '@material-ui/core/Button';
import { COMPONENT_DICT } from '../constants';
const styles = theme => ({
buttonItem:{
minWidth:window.unit * 7.8,
height:window.unit * 3,
lineHeight:window.unit * 3+'px',
padding:0,
minHeight:0
},
// 绿色按钮 默认是绿色
agreeBtn:Underscore.extend({
minWidth:window.unit*(7.8)+'px ',
background:"#00C78B",
color:'#ffffff',
"&:hover":{
background:"#00C78B",
},
borderRadius:3,
marginRight:0,
marginLeft:window.unit*(1.2)+'px ',
}),
cancelBtn:{
minWidth:window.unit*(7.8)+'px ',
background:"#ffffff",
color:'#00C78B',
"&:hover":{
background:"#ffffff",
},
border:'1px solid #00C78B',
borderRadius:3,
marginRight:0,
marginLeft:window.unit*(1.2)+'px ',
},
// 灰色按钮
agreeBtnGray:Underscore.extend({
minWidth:window.unit*(7.8)+'px ',
background:"#404A53",
color:'#ffffff',
"&:hover":{
background:"#404A53",
},
"&[disabled]":{
background:"#EEEEEE",
color:"#B0B0B0"
},
borderRadius:3,
marginRight:0,
marginLeft:window.unit*(1.2)+'px ',
}),
cancelBtnGray:{
minWidth:window.unit*(7.8)+'px ',
background:"#ffffff",
color:'#404A53',
"&:hover":{
background:"#ffffff",
},
"&[disabled]":{
border:"1px solid #E0E0E0",
color:"#B0B0B0"
},
border:'1px solid #404A53',
borderRadius:3,
marginRight:0,
marginLeft:window.unit*(1.2)+'px ',
}
})
require('./style/CustomModal.css');
class CustomModal extends React.Component {
constructor(props) {
super(props);
this.state = {
open:true,
colorSystem: props.colorSystem || 'green',
saveBtnDisabled: typeof(props.saveBtnDisabled)=="boolean" ? props.saveBtnDisabled : false,
saveBtnText: props.saveBtnText || COMPONENT_DICT('label.business.save'),
savingBtnText: props.savingBtnText || COMPONENT_DICT('label.business.saving')
}
}
removeCustomDialog(){
let self = this;
setTimeout(function(){
$('#root-'+self.props.containerId).remove();
$('body').removeClass('overflowhidden');
},350)
}
handleClose(e){
this.setState({ open: false });
this.props.onClose && this.props.onClose();
if(typeof(this.props.dialogType)!='undefined'){
this.props.events.emit('close',this);
}
this.removeCustomDialog()
}
handleDialogClose(){
this.setState({ open: false });
this.removeCustomDialog()
}
agreeClick(){
this.props.onSave && this.props.onSave();
if(typeof(this.props.dialogType)!='undefined'){
this.props.events.emit('save',this);
}
}
render(){
console.log('custommodal::',this.state)
const { classes } = this.props;
let data = this.props;
let self = this;
let cancelBtn = this.state.colorSystem=='gray' ? classes.cancelBtnGray : classes.cancelBtn;
let agreeBtn = this.state.colorSystem=='gray' ? classes.agreeBtnGray : classes.agreeBtn;
return (
<div ref="asdasdasd" className={"zzzzzzzz " + this.props.className}>
<div className="jw-custom-modal">
<Fade in={this.state.open}>
<div className="jw-custom-modal-bg"></div>
</Fade>
<Slide direction="up" in={this.state.open}>
<div className={"jw-custom-modal-w"} onClick={(e)=>{e.nativeEvent.stopImmediatePropagation();e.stopPropagation();}}>
<div className={"jw-custom-modal-c"}>
<div className="jw-custom-modal-h">
<i className="icon-dialog-close" onClick={(e)=>self.handleClose(e)}></i>
<span>{this.props.title || ""}</span>
</div>
<div className="jw-custom-modal-main">
{
this.props.children
}
</div>
{
this.props.btns?this.props.btns:<div className="jw-custom-modal-btn">
<Button onClick={(e)=>this.handleClose(e)} className={classes.buttonItem+' '+ cancelBtn}>{i18n("btn.cancel")}</Button>
{
this.state.saveBtnDisabled==true|| this.state.saveBtnDisabled=='saving'?
// 禁用
<Button disabled className={classes.buttonItem+' '+ agreeBtn}>{this.state.saveBtnDisabled=='saving'?this.state.savingBtnText:this.state.saveBtnText}</Button> :
// 不禁用
<Button onClick={(e)=>this.agreeClick(e)} className={classes.buttonItem+' '+ agreeBtn}>{i18n("btn.save")}</Button>
}
</div>
}
</div>
</div>
</Slide>
</div>
</div>
);
}
componentDidMount(){
let self = this;
$('body').addClass('overflowhidden');
let fdEvents = this.props.events;
// true 或 false 或 'saving'
fdEvents.on('saveBtnDisabled',(value)=>{
if(self.state.saveBtnDisabled != value){
self.setState({
saveBtnDisabled: value
})
}
})
}
componentDidUpdate(){
}
}
export default withStyles(styles)(CustomModal);