dialog.react
Some scenarios can encapsulate the command of dialog,But don't abuse command dialog.
When the popup window content has a complex interaction, don't use the command dialog.
var React = require('react')
var Dialog = require('dialog.react').default
var ReactDOM = require('react-dom')
var commandDialog = function (type, settings, callback) {
var TempCompoenent = React.createClass({
getInitialState: function () {
return {
show: true
}
},
render: function () {
var self = this
var tool
if (type === 'confirm') {
tool = (
<div style={{textAlign: 'center'}} >
<button onClick={function () {
self.setState({
show: false
})
settings.onConfirm()
}} className="r-dialog-btn r-dialog-btn--primary">
确认
</button>
<button data-r-dialog-close="true" className="r-dialog-btn r-dialog-btn--primary">
取消
</button>
</div>
)
}
return (
<Dialog
style={{width: 400, textAlign: 'center'}}
show={self.state.show}
tool={tool}
title={(<strong>{settings.title}</strong>)}
onClose={function () {
self.setState({
show: false
})
if (settings.onClose) {
settings.onClose()
}
}}
>
{
type !== 'confirm'?
(
<div className={"iconfont icon-" + type}></div>
):null
}
{settings.content}
</Dialog>
)
}
})
ReactDOM.render((
<TempCompoenent />
),
document.createElement('div'))
}
var App = React.createClass({
render: function () {
var self = this
return (
<div>
<button onClick={function () {
commandDialog('success', {
title: '操作成功',
content: '数据删除成功',
onClose: function () {
console.log('success 关闭')
}
})
}} className="r-dialog-btn r-dialog-btn--primary"> success </button>
<hr />
<button onClick={function () {
commandDialog('info', {
title: '提示',
content: '提示消息',
onClose: function () {
console.log('info 关闭')
}
})
}} className="r-dialog-btn r-dialog-btn--info"> info </button>
<hr />
<button onClick={function () {
commandDialog('danger', {
title: '密码错误',
content: '您输入的密码错误',
onClose: function () {
console.log('danger 关闭')
}
})
}} className="r-dialog-btn r-dialog-btn--danger"> danger </button>
<hr />
<button onClick={function () {
commandDialog('warning', {
title: '到期提醒',
content: '您的账户将于 2017年02月07日 到期',
onClose: function () {
console.log('warning 关闭')
}
})
}} className="r-dialog-btn r-dialog-btn--warning"> warning </button>
<hr />
<button className="r-dialog-btn" onClick={function () {
commandDialog('confirm', {
title: 'confirm delete',
content: 'delete user someone',
onConfirm: function () {
console.log('confirm delete someone')
},
onClose: function () {
console.log('someone cancel')
}
})
}} >confirm</button>
</div>
)
}
})
module.exports = App
.iconfont {
font-family:"iconfont" !important;
font-size:16px;
font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.icon-info:before { content: "\e605"; }
.icon-wait:before { content: "\e606"; }
.icon-help:before { content: "\e600"; }
.icon-danger:before { content: "\e601"; }
.icon-warning:before { content: "\e602"; }
.icon-success:before { content: "\e603"; }
.icon-stop:before { content: "\e604"; }
@font-face {font-family: "iconfont";
src: url('//at.alicdn.com/t/font_1468304477_6775875.eot'); /* IE9*/
src: url('//at.alicdn.com/t/font_1468304477_6775875.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), /* chrome,firefox */
url('//at.alicdn.com/t/font_1468304477_6775875.ttf') format('truetype'), /* chrome,firefox,opera,Safari, Android, iOS 4.2+*/
url('//at.alicdn.com/t/font_1468304477_6775875.svg#iconfont') format('svg'); /* iOS 4.1- */
src: url('//at.alicdn.com/t/font_1468304477_6775875.eot')\0; /* ie8 fix */
}