mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-17 15:40:53 +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 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…
Reference in New Issue
Block a user