mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-28 13:09:40 +08:00
feat: Popconfirm should support i18n
This commit is contained in:
parent
fdd9ef7d18
commit
51a2798eb5
17
components/popconfirm/demo/locale.md
Normal file
17
components/popconfirm/demo/locale.md
Normal file
@ -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 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 | 取消 |
|
||||
|
Loading…
Reference in New Issue
Block a user