feat: Popconfirm should support i18n

pull/582/head
Benjy Cui 9 years ago
parent fdd9ef7d18
commit 51a2798eb5

@ -0,0 +1,17 @@
# 国际化
- 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 Tooltip from 'rc-tooltip';
import Icon from '../icon'; import Icon from '../icon';
import Button from '../button'; import Button from '../button';
const prefixCls = 'ant-popover'; 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({ export default React.createClass({
getInitialState() { getInitialState() {
@ -16,10 +32,10 @@ export default React.createClass({
placement: 'top', placement: 'top',
trigger: 'click', trigger: 'click',
overlayStyle: {}, overlayStyle: {},
onConfirm: function () { onConfirm: noop,
}, onCancel: noop,
onCancel: function () { okText: '确定',
} cancelText: '取消'
}; };
}, },
confirm() { confirm() {
@ -40,43 +56,31 @@ export default React.createClass({
}); });
}, },
render() { render() {
const {title, okText, cancelText, placement, overlayStyle, trigger} = this.props;
const overlay = <div> const overlay = <div>
<div className={prefixCls + '-content'}> <div className={prefixCls + '-content'}>
<p className={prefixCls + '-message'}> <p className={prefixCls + '-message'}>
<Icon type="exclamation-circle" /> <Icon type="exclamation-circle" />
{this.props.title} {title}
</p> </p>
<div className={prefixCls + '-buttons'}> <div className={prefixCls + '-buttons'}>
<Button onClick={this.cancel} type="ghost" size="small">取消</Button> <Button onClick={this.cancel} type="ghost" size="small">{cancelText}</Button>
<Button onClick={this.confirm} type="primary" size="small">确定</Button> <Button onClick={this.confirm} type="primary" size="small">{okText}</Button>
</div> </div>
</div> </div>
</div>; </div>;
const transitionName = ({ const transitionName = transitionNames[placement];
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];
return ( return (
<Tooltip placement={this.props.placement} <Tooltip placement={placement}
overlayStyle={this.props.overlayStyle} overlayStyle={overlayStyle}
prefixCls={prefixCls} prefixCls={prefixCls}
onVisibleChange={this.onVisibleChange} onVisibleChange={this.onVisibleChange}
transitionName={transitionName} transitionName={transitionName}
visible={this.state.visible} visible={this.state.visible}
trigger={this.props.trigger} trigger={trigger}
overlay={overlay}> overlay={overlay}>
{this.props.children} {this.props.children}
</Tooltip> </Tooltip>

@ -23,3 +23,5 @@
| title | 确认框的描述 | string | 无 | | title | 确认框的描述 | string | 无 |
| onConfirm | 点击确认的回调 | function | 无 | | onConfirm | 点击确认的回调 | function | 无 |
| onCancel | 卡片内容 | function | 无 | | onCancel | 卡片内容 | function | 无 |
| okText | 确认按钮文字 | String | 确定 |
| cancelText| 取消按钮文字 | String | 取消 |

Loading…
Cancel
Save