mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
add confirm
This commit is contained in:
yiminghe
parent
1d7c3af0f9
commit
c634b4d14c
40
components/confirm/demo/basic.md
Normal file
40
components/confirm/demo/basic.md
Normal file
@ -0,0 +1,40 @@
|
||||
# 基本
|
||||
|
||||
- order: 0
|
||||
|
||||
使用很简单。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var confirm = antd.confirm;
|
||||
|
||||
var Test = React.createClass({
|
||||
getInitialState(){
|
||||
return {
|
||||
visible:false
|
||||
};
|
||||
},
|
||||
showConfirm(){
|
||||
confirm({
|
||||
title:"第一个 confirm",
|
||||
content:"confirm 内容",
|
||||
onOk:this.handleOk,
|
||||
onCancel:this.handleCancel
|
||||
})
|
||||
},
|
||||
handleOk(close){
|
||||
close();
|
||||
},
|
||||
handleCancel(close){
|
||||
close();
|
||||
},
|
||||
render(){
|
||||
return <div>
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.showConfirm}>显示确认框</button>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(<Test/> , document.getElementById('components-confirm-demo-basic'));
|
||||
````
|
||||
56
components/confirm/index.jsx
Normal file
56
components/confirm/index.jsx
Normal file
@ -0,0 +1,56 @@
|
||||
var React = require('react');
|
||||
var Dialog = require('rc-dialog');
|
||||
var div;
|
||||
|
||||
module.exports = function (props) {
|
||||
var d;
|
||||
props = props || {};
|
||||
props.iconClassName = props.iconClassName || 'anticon-exclamation-circle';
|
||||
props.animation = 'zoom';
|
||||
props.maskAnimation = 'fade';
|
||||
var width = props.width || 375;
|
||||
|
||||
function close() {
|
||||
d.setState({
|
||||
visible: false
|
||||
});
|
||||
}
|
||||
|
||||
function onCancel() {
|
||||
if (props.onCancel) {
|
||||
props.onCancel(close);
|
||||
} else {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
function onOk() {
|
||||
if (props.onOk) {
|
||||
props.onOk(close);
|
||||
} else {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
var body = <div className="ant-confirm-body">
|
||||
<i className={"anticon " + props.iconClassName}></i>
|
||||
<span className="ant-confirm-title">{props.title}</span>
|
||||
<div className="ant-confirm-content">{props.content}</div>
|
||||
</div>
|
||||
var footer = <div className="ant-confirm-btns">
|
||||
<button type="button" className="ant-btn-default ant-btn ant-btn-lg" onClick={onCancel}>取 消</button>
|
||||
<button type="button" className="ant-btn-primary ant-btn ant-btn-lg" onClick={onOk}>确 定</button>
|
||||
</div>;
|
||||
|
||||
if (!div) {
|
||||
div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
|
||||
React.render(<Dialog className="ant-confirm" renderToBody={false} visible={true} closable={false} title="" animation="zoom" maskAnimation="fade" width={width}>
|
||||
<div style={{zoom:1,overflow:'hidden'}}>{body} {footer}</div>
|
||||
|
||||
</Dialog>, div, function () {
|
||||
d = this;
|
||||
});
|
||||
};
|
||||
@ -7,27 +7,18 @@
|
||||
|
||||
## 何时使用
|
||||
|
||||
当你再次和我说起 青春时的故事
|
||||
我正在下着雨的无锡 乞讨着生活的权利
|
||||
前一天早晨 我睁开眼已是江南
|
||||
他们说柔软的地方 总会发生柔软的事
|
||||
那年的舞台上 说谎的人一直歌唱
|
||||
大不列颠的广场上 有没有鸽子飞翔
|
||||
青春和瞎子一起 变成了哑巴
|
||||
今天扯平了我们的当年 分食了理想
|
||||
当需要用户确认时使用
|
||||
|
||||
|
||||
## 为什么使用
|
||||
## api
|
||||
|
||||
你可知道你的名字解释了我的一生
|
||||
碎了满天的往事如烟 与世无争
|
||||
当你装满行李 回到故乡
|
||||
我的余生 却再也没有北方
|
||||
为一个方法，参数为 object，具体属性如下
|
||||
|
||||
有一天我又梦见 那个装满乐器的教室
|
||||
你还站在门口 一脸羞涩的表情
|
||||
你说这么多年你还没找到 让你心动的男人
|
||||
我说去他妈的爱情 都是过眼云烟的东西
|
||||
|
||||
我的余生 都用来寻找北方
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| title | 标题 | React.Element|String | 无 |
|
||||
| onOk | 点击确定回调，参数为关闭函数 | function | 无 |
|
||||
| onCancel | 取消回调，参数为关闭函数 | function | 无 |
|
||||
| width | 宽度 | String or Number | 375 |
|
||||
| iconClassName | 图标央样式名 | String | anticon-exclamation-circle |
|
||||
|
||||
|
||||
@ -7,16 +7,44 @@
|
||||
---
|
||||
|
||||
````jsx
|
||||
var modal = antd.modal;
|
||||
var Modal = antd.Modal;
|
||||
|
||||
function showModal() {
|
||||
modal({
|
||||
title: '第一个 Modal',
|
||||
content: <p>对话框的内容</p>
|
||||
});
|
||||
}
|
||||
var Test = React.createClass({
|
||||
getInitialState(){
|
||||
return {
|
||||
visible:false
|
||||
};
|
||||
},
|
||||
showModal(){
|
||||
this.setState({
|
||||
visible:true
|
||||
});
|
||||
},
|
||||
handleOk(){
|
||||
alert('ok');
|
||||
var self = this;
|
||||
setTimeout(function(){
|
||||
self.setState({
|
||||
visible:false
|
||||
});
|
||||
},200);
|
||||
},
|
||||
handleCancel(){
|
||||
var self = this;
|
||||
alert('cancel');
|
||||
setTimeout(function(){
|
||||
self.setState({
|
||||
visible:false
|
||||
});
|
||||
},200);
|
||||
},
|
||||
render(){
|
||||
return <div>
|
||||
<button className="ant-btn ant-btn-primary" onClick={this.showModal}>显示对话框</button>
|
||||
<Modal title="第一个 Modal" visible={this.state.visible} onOk={this.handleOk} onBeforeClose={this.handleCancel}><p>对话框的内容</p></Modal>
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
|
||||
React.render(
|
||||
<button className="ant-btn ant-btn-primary" onClick={showModal}>显示对话框</button>
|
||||
, document.getElementById('components-modal-demo-basic'));
|
||||
React.render(<Test/> , document.getElementById('components-modal-demo-basic'));
|
||||
````
|
||||
|
||||
@ -1,35 +0,0 @@
|
||||
# 确定取消
|
||||
|
||||
- order: 1
|
||||
|
||||
可以通过 `onOk` 和 `onCancel` 触发下一步的操作。
|
||||
|
||||
---
|
||||
|
||||
````jsx
|
||||
var modal = antd.modal;
|
||||
|
||||
function showModal() {
|
||||
var ref;
|
||||
|
||||
function saveRef(c){
|
||||
ref = c;
|
||||
}
|
||||
|
||||
modal({
|
||||
title: '点击确定取消',
|
||||
content: <p>name: <input ref={saveRef}/></p>,
|
||||
onCancel: function() {
|
||||
alert('cancel');
|
||||
},
|
||||
onOk: function(close) {
|
||||
alert('name: ' + React.findDOMNode(ref).value);
|
||||
close();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
React.render(
|
||||
<button className="ant-btn ant-btn-default" onClick={showModal}>显示对话框</button>
|
||||
, document.getElementById('components-modal-demo-next'));
|
||||
````
|
||||
@ -2,56 +2,33 @@
|
||||
|
||||
var React = require('react');
|
||||
var Dialog = require('rc-dialog');
|
||||
function noop(){}
|
||||
|
||||
function noop() {
|
||||
}
|
||||
var Modal = React.createClass({
|
||||
handleCancel() {
|
||||
this.refs.d.requestClose();
|
||||
},
|
||||
|
||||
var div;
|
||||
getDefaultProps(){
|
||||
return {
|
||||
onOk:noop,
|
||||
onCancel:noop,
|
||||
onBeforeClose:noop
|
||||
};
|
||||
},
|
||||
|
||||
module.exports = function (props) {
|
||||
var d;
|
||||
props = props || {};
|
||||
handleOk() {
|
||||
this.props.onOk();
|
||||
},
|
||||
|
||||
props.animation = 'zoom';
|
||||
props.maskAnimation = 'fade';
|
||||
props.width = props.width || 500;
|
||||
|
||||
props.onClose = props.onCancel || noop;
|
||||
|
||||
function close() {
|
||||
d.setState({
|
||||
visible: false
|
||||
});
|
||||
render() {
|
||||
var props = this.props;
|
||||
var footer = [
|
||||
<button type="button" className="ant-btn-default ant-btn" onClick={this.handleCancel}>取 消</button>,
|
||||
<button type="button" className="ant-btn-primary ant-btn" onClick={this.handleOk}>确 定</button>
|
||||
];
|
||||
return <Dialog animation="zoom" maskAnimation="fade" width="500" footer={footer} {...props} ref="d"/>
|
||||
}
|
||||
});
|
||||
|
||||
function onCancel() {
|
||||
if (props.onCancel) {
|
||||
props.onCancel();
|
||||
}
|
||||
close();
|
||||
}
|
||||
|
||||
function onOk() {
|
||||
if (props.onOk) {
|
||||
props.onOk(close);
|
||||
} else {
|
||||
close();
|
||||
}
|
||||
}
|
||||
|
||||
var footer = [
|
||||
<button type="button" className="ant-btn-default ant-btn" onClick={onCancel}>取 消</button>,
|
||||
<button type="button" className="ant-btn-primary ant-btn" onClick={onOk}>确 定</button>
|
||||
];
|
||||
if (!div) {
|
||||
div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
}
|
||||
props.visible = true;
|
||||
props.children = props.content;
|
||||
props.footer = props.footer || footer;
|
||||
props.renderToBody = false;
|
||||
React.render(<Dialog {...props}/>, div, function () {
|
||||
d = this;
|
||||
});
|
||||
};
|
||||
module.exports = Modal;
|
||||
@ -13,13 +13,13 @@
|
||||
|
||||
## API
|
||||
|
||||
是个方法，参数只有一个 object ，具体成员如下
|
||||
属性列表
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|------------|----------------|------------------|--------------|
|
||||
| title | 标题 | React.Element | 无 |
|
||||
| content | 面板内容 | React.Element | 无 |
|
||||
| onOk | 确定回调 | function | 无 |
|
||||
| onCancel | 取消回调 | function | 无 |
|
||||
| width | 宽度 | String or Number | 无 |
|
||||
| onOk | 点击确定回调 | function | 无 |
|
||||
| onBeforeClose | 点击遮罩层或右上角叉或取消按钮关闭前回调 | function | 无 |
|
||||
| width | 宽度 | String or Number | 500 |
|
||||
| visible | 是否显示 | Boolean | false |
|
||||
| footer | 底部内容 | React.Element | 确定取消按钮 |
|
||||
|
||||
5
index.js
5
index.js
@ -4,11 +4,12 @@ var antd = {
|
||||
Datepicker: require('./components/datepicker'),
|
||||
Tooltip: require('./components/tooltip'),
|
||||
Tab: require('./components/tab'),
|
||||
modal: require('./components/modal'),
|
||||
Modal: require('./components/modal'),
|
||||
Menu: require('rc-menu'),
|
||||
Dropdown: require('./components/dropdown'),
|
||||
Progress: require('./components/progress'),
|
||||
Select: require('./components/select')
|
||||
Select: require('./components/select'),
|
||||
confirm:require('./components/confirm')
|
||||
};
|
||||
|
||||
module.exports = window.antd = antd;
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
"gregorian-calendar": "~3.0.0",
|
||||
"gregorian-calendar-format": "~3.0.1",
|
||||
"rc-calendar": "~3.8.0",
|
||||
"rc-dialog": "~4.2.0",
|
||||
"rc-dialog": "~4.3.0",
|
||||
"rc-dropdown": "~1.0.0",
|
||||
"rc-menu": "~3.3.0",
|
||||
"rc-progress": "~1.0.0",
|
||||
|
||||
@ -1,47 +1,41 @@
|
||||
@prefixConfirmCls: rc-dialog-confirm;
|
||||
@prefixConfirmCls: ant-confirm;
|
||||
|
||||
.@{prefixConfirmCls}-body {
|
||||
.ant-icon {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
line-height: inherit;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-stroke-width: 0px;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-family: sans-serif;
|
||||
.@{prefixConfirmCls} {
|
||||
|
||||
.ant-icon-warn-circle:before {
|
||||
content: "\e613";
|
||||
display: block;
|
||||
font-family: "iconfont" !important;
|
||||
.rc-dialog-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.rc-dialog-body {
|
||||
padding: 30px 40px;
|
||||
}
|
||||
|
||||
.@{prefixConfirmCls}-body {
|
||||
.@{prefixConfirmCls}-content {
|
||||
margin-left: 33px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.ant-icon-warn-circle {
|
||||
.anticon {
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.anticon-exclamation-circle {
|
||||
color: #fac450;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixConfirmCls}-description {
|
||||
margin-left: 33px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
.@{prefixConfirmCls}-btns {
|
||||
margin-top: 30px;
|
||||
float: right;
|
||||
|
||||
.@{prefixConfirmCls}-btns {
|
||||
margin-top: 30px;
|
||||
float: right;
|
||||
|
||||
[btn] + [btn] {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 0;
|
||||
button + button {
|
||||
margin-left: 10px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user