提交 51a2798e 编写于 作者: B Benjy Cui

feat: Popconfirm should support i18n

上级 fdd9ef7d
# 国际化
- order: 2
设置 `okText` `cancelText` 以自定义按钮文字。
---
````jsx
import { Popconfirm } from 'antd';
ReactDOM.render(
<Popconfirm title="Are you sure?" okText="Yes" cancelText="No">
<a href="javascript:;">Delete</a>
</Popconfirm>
, document.getElementById('components-popconfirm-demo-locale'));
````
......@@ -2,7 +2,23 @@ import React from 'react';
import Tooltip from 'rc-tooltip';
import Icon from '../icon';
import Button from '../button';
const prefixCls = 'ant-popover';
const noop = function() {};
const transitionNames = {
top: 'zoom-down',
bottom: 'zoom-up',
left: 'zoom-right',
right: 'zoom-left',
topLeft: 'zoom-down',
bottomLeft: 'zoom-up',
leftTop: 'zoom-right',
rightTop: 'zoom-left',
topRight: 'zoom-down',
bottomRight: 'zoom-up',
leftBottom: 'zoom-right',
rightBottom: 'zoom-left',
};
export default React.createClass({
getInitialState() {
......@@ -16,10 +32,10 @@ export default React.createClass({
placement: 'top',
trigger: 'click',
overlayStyle: {},
onConfirm: function () {
},
onCancel: function () {
}
onConfirm: noop,
onCancel: noop,
okText: '确定',
cancelText: '取消'
};
},
confirm() {
......@@ -40,43 +56,31 @@ export default React.createClass({
});
},
render() {
const {title, okText, cancelText, placement, overlayStyle, trigger} = this.props;
const overlay = <div>
<div className={prefixCls + '-content'}>
<p className={prefixCls + '-message'}>
<Icon type="exclamation-circle" />
{this.props.title}
{title}
</p>
<div className={prefixCls + '-buttons'}>
<Button onClick={this.cancel} type="ghost" size="small">取消</Button>
<Button onClick={this.confirm} type="primary" size="small">确定</Button>
<Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
<Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
</div>
</div>
</div>;
const transitionName = ({
top: 'zoom-down',
bottom: 'zoom-up',
left: 'zoom-right',
right: 'zoom-left',
topLeft: 'zoom-down',
bottomLeft: 'zoom-up',
leftTop: 'zoom-right',
rightTop: 'zoom-left',
topRight: 'zoom-down',
bottomRight: 'zoom-up',
leftBottom: 'zoom-right',
rightBottom: 'zoom-left',
})[this.props.placement];
const transitionName = transitionNames[placement];
return (
<Tooltip placement={this.props.placement}
overlayStyle={this.props.overlayStyle}
<Tooltip placement={placement}
overlayStyle={overlayStyle}
prefixCls={prefixCls}
onVisibleChange={this.onVisibleChange}
transitionName={transitionName}
visible={this.state.visible}
trigger={this.props.trigger}
trigger={trigger}
overlay={overlay}>
{this.props.children}
</Tooltip>
......
......@@ -23,3 +23,5 @@
| title | 确认框的描述 | string | 无 |
| onConfirm | 点击确认的回调 | function | 无 |
| onCancel | 卡片内容 | function | 无 |
| okText | 确认按钮文字 | String | 确定 |
| cancelText| 取消按钮文字 | String | 取消 |
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册