test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 11:39:28 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

Add confirm button loading effect for modal

Browse Source
This commit is contained in:
afc163 2015-07-22 17:32:22 +08:00
parent ecb45c3538
commit 12b26137ea
3 changed files with 29 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/modal/demo/basic.md
View File

@ -36,7 +36,7 @@ var Test = React.createClass({
return <div>
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
<Modal title="第一个 Modal"
visible={this.state.visible}
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}>
<p>对话框的内容</p>

3
components/modal/demo/custom.md
View File

@ -41,8 +41,7 @@ var Test = React.createClass({
render() {
return <div>
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
<Modal ref="modal"
title="对话框标题"
<Modal title="对话框标题"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}>

45
components/modal/index.jsx
View File

@ -8,7 +8,8 @@ function noop() {
var Modal = React.createClass({
getInitialState() {
return {
visible: false
visible: false,
confirmLoading: false
};
},
@ -25,29 +26,37 @@ var Modal = React.createClass({
};
},
show() {
this.setState({
visible: true
});
},
hide() {
this.setState({
visible: false
});
},
handleOk() {
this.props.onOk();
this.setState({
confirmLoading: true
});
if (typeof this.props.onOk) {
this.props.onOk();
}
},
componentWillReceiveProps(nextProps) {
if ('visible' in nextProps) {
// 隐藏后去除按钮 loading 效果
if (!nextProps.visible) {
this.setState({
confirmLoading: false
});
}
}
},
render() {
var loadingIcon = this.state.confirmLoading ?
<i className="anticon anticon-loading"></i> : '';
var props = this.props;
var footer = props.footer || [
<button key="cancel" type="button" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>取 消</button>,
<button key="confirm" type="button" className="ant-btn ant-btn-primary ant-btn-lg" onClick={this.handleOk}>确 定</button>
];
return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>;
<button key="cancel" type="button" className="ant-btn ant-btn-lg" onClick={this.handleCancel}>取 消</button>,
<button key="confirm" type="button" className="ant-btn ant-btn-primary ant-btn-lg" onClick={this.handleOk}>
确 定 {loadingIcon}
</button>
];
return <Dialog transitionName="zoom" onBeforeClose={props.onCancel} visible={this.state.visible} maskAnimation="fade" width="500" footer={footer} {...props} ref="d" />;
}
});