mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-27 20:49:53 +08:00
Code Issues Actions 39 Packages Projects Releases Wiki Activity

Merge branch "1.x-stable"

Browse Source
This commit is contained in:
afc163 2016-08-31 15:00:13 +08:00
commit 497ff0cabb
16 changed files with 165 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/calendar/Header.tsx
View File

@ -38,6 +38,7 @@ export default class Header extends React.Component<HeaderProps, any> {
prefixCls: PropTypes.string,
selectPrefixCls: PropTypes.string,
type: PropTypes.string,
fullscreen: PropTypes.bool,
};
getYearSelectElement(year) {
@ -52,10 +53,8 @@ export default class Header extends React.Component<HeaderProps, any> {
}
return (
<Select
style={{ width: 75 }}
size={fullscreen ? null : 'small'}
dropdownMatchSelectWidth={false}
dropdownMenuStyle={{ minWidth: 103 }}
className={`${prefixCls}-year-select`}
onChange={this.onYearChange}
value={String(year)}
@ -77,8 +76,6 @@ export default class Header extends React.Component<HeaderProps, any> {
return (
<Select
style={{ minWidth: 70 }}
dropdownMenuStyle={{ minWidth: 125 }}
size={fullscreen ? null : 'small'}
dropdownMatchSelectWidth={false}
className={`${prefixCls}-month-select`}
@ -107,11 +104,12 @@ export default class Header extends React.Component<HeaderProps, any> {
}
render() {
const { type, value, prefixCls, locale } = this.props;
const { type, value, prefixCls, locale, fullscreen } = this.props;
const yearSelect = this.getYearSelectElement(value.getYear());
const monthSelect = type === 'date' ? this.getMonthSelectElement(value.getMonth()) : null;
const size = (fullscreen ? 'default' : 'small') as any;
const typeSwitch = (
<Group onChange={this.onTypeChange} value={type}>
<Group onChange={this.onTypeChange} value={type} size={size}>
<Button value="date">{locale.month}</Button>
<Button value="month">{locale.year}</Button>
</Group>

4
components/popconfirm/demo/placement.md
View File

@ -7,11 +7,11 @@ title:
## zh-CN
位置有十二个方向。
位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrowPointAtCenter`。
## en-US
There are 12 `placement` options available.
There are 12 `placement` options available. Use `arrowPointAtCenter` if you want arrow point at the center of target.
````jsx
import { Popconfirm, message, Button } from 'antd';

25
components/popconfirm/index.tsx
View File

@ -4,8 +4,7 @@ import Icon from '../icon';
import Button from '../button';
import getPlacements from '../popover/placements';
import splitObject from '../_util/splitObject';
const placements = getPlacements();
const prefixCls = 'ant-popover';
const noop = () => {};
export interface PopconfirmProps {
@ -41,10 +40,10 @@ export interface PopconfirmContext {
export default class Popconfirm extends React.Component<PopconfirmProps, any> {
static defaultProps = {
prefixCls: 'ant-popover',
transitionName: 'zoom-big',
placement: 'top',
trigger: 'click',
overlayStyle: {},
onConfirm: noop,
onCancel: noop,
onVisibleChange: noop,
@ -91,8 +90,10 @@ export default class Popconfirm extends React.Component<PopconfirmProps, any> {
}
render() {
const [{ title, placement, overlayStyle, trigger }, restProps] = splitObject(this.props,
['title', 'placement', 'overlayStyle', 'trigger']);
const [{ prefixCls, title, placement, arrowPointAtCenter }, restProps] = splitObject(
this.props,
['prefixCls', 'title', 'placement', 'arrowPointAtCenter']
);
let { okText, cancelText } = this.props;
if (this.context.antLocale && this.context.antLocale.Popconfirm) {
okText = okText || this.context.antLocale.Popconfirm.okText;
@ -114,19 +115,15 @@ export default class Popconfirm extends React.Component<PopconfirmProps, any> {
);
return (
<Tooltip {...restProps}
placement={placement}
builtinPlacements={placements}
overlayStyle={overlayStyle}
<Tooltip
{...restProps}
builtinPlacements={getPlacements({ arrowPointAtCenter })}
prefixCls={prefixCls}
placement={placement}
onVisibleChange={this.onVisibleChange}
transitionName={this.props.transitionName}
visible={this.state.visible}
trigger={trigger}
overlay={overlay}
>
{this.props.children}
</Tooltip>
/>
);
}
}

1
components/popconfirm/index.zh-CN.md
View File

@ -26,3 +26,4 @@ english: Popconfirm
| okText | 确认按钮文字 | String | 确定 |
| cancelText| 取消按钮文字 | String | 取消 |
| openClassName | 气泡框展现时触发器添加的类名，可用于打开浮层时高亮触发器 | string | ant-popover-open |
| arrowPointAtCenter | 箭头是否指向目标元素中心，`antd@1.11+` 支持 | Boolean | `false` |

29
components/popover/demo/arrow-point-at-center.md Normal file
View File

@ -0,0 +1,29 @@
---
order: 4
title: 箭头指向
---
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
````jsx
import { Popover, Button } from 'antd';
const text = <span>标题</span>;
const content = (
<div>
<p>内容</p>
<p>内容</p>
</div>
);
ReactDOM.render(
<div>
<Popover placement="topLeft" title={text} content={content}>
<Button>默认对齐元素边缘</Button>
</Popover>
<Popover placement="topLeft" title={text} content={content} arrowPointAtCenter>
<Button>箭头指向目标元素的中心</Button>
</Popover>
</div>
, mountNode);
````

40
components/popover/index.jsx Normal file
View File

@ -0,0 +1,40 @@
import * as React from 'react';
import Tooltip from '../tooltip';
import getPlacements from './placements';
import warning from 'warning';
const placements = getPlacements();
export default class Popover extends React.Component {
render() {
return (<Tooltip transitionName={this.props.transitionName} builtinPlacements={placements} ref="tooltip" {...this.props} overlay={this.getOverlay()}>
{this.props.children}
</Tooltip>);
}
getPopupDomNode() {
return this.refs.tooltip.getPopupDomNode();
}
componentDidMount() {
if ('overlay' in this.props) {
warning(false, '`overlay` prop of Popover is deprecated, use `content` instead.');
}
}
getOverlay() {
// use content replace overlay
// keep overlay for compatibility
const { title, prefixCls, overlay, content } = this.props;
return (<div>
{title && <div className={`${prefixCls}-title`}>{title}</div>}
<div className={`${prefixCls}-inner-content`}>
{content || overlay}
</div>
</div>);
}
}
Popover.defaultProps = {
prefixCls: 'ant-popover',
placement: 'top',
transitionName: 'zoom-big',
trigger: 'hover',
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
overlayStyle: {},
};

1
components/popover/index.zh-CN.md
View File

@ -27,3 +27,4 @@ english: Popover
| onVisibleChange | 显示隐藏改变的回调 | function | 无 |
| getTooltipContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](http://codepen.io/anon/pen/xVBOVQ?editors=001) | Function(triggerNode) | () => document.body |
| openClassName | 气泡框展现时触发器添加的类名，可用于打开浮层时高亮触发器 | string | ant-popover-open |
| arrowPointAtCenter | 箭头是否指向目标元素中心，`antd@1.11+` 支持 | Boolean | `false` |

12
components/popover/placements.tsx
View File

@ -1,3 +1,5 @@
import { placements } from 'rc-tooltip/lib/placements';
const autoAdjustOverflow = {
adjustX: 1,
adjustY: 1,
@ -6,12 +8,16 @@ const autoAdjustOverflow = {
const targetOffset = [0, 0];
export interface GetPlacementsProps {
arrowWidth?: number;
horizontalArrowShift?: number;
verticalArrowShift?: number;
arrowWidth?: number;
horizontalArrowShift?: number;
verticalArrowShift?: number;
arrowPointAtCenter?: boolean;
}
export default function getPlacements(config: GetPlacementsProps = {}) {
if (!config.arrowPointAtCenter) {
return placements;
}
const { arrowWidth = 5, horizontalArrowShift = 16, verticalArrowShift = 12 } = config;
return {
left: {

1
components/radio/group.tsx
View File

@ -4,6 +4,7 @@ import Radio from './radio';
import RadioButton from './radioButton';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import assign from 'object-assign';
function getCheckedValue(children) {
let value = null;
let matched = false;

28
components/table/Table.tsx
View File

@ -778,7 +778,7 @@ export default class Table extends React.Component<TableProps, any> {
{},
item, {
[childrenColumnName]: this.recursiveSort(item[childrenColumnName], sorterFn),
},
}
) : item));
}
@ -813,9 +813,9 @@ export default class Table extends React.Component<TableProps, any> {
render() {
const [{
style, className, rowKey,
}, restProps] = splitObject(this.props, ['style', 'className', 'rowKey']);
let data = this.getCurrentPageData();
style, className,
}, restProps] = splitObject(this.props, ['style', 'className']);
const data = this.getCurrentPageData();
let columns = this.renderRowSelection();
const expandIconAsCell = this.props.expandedRowRender && this.props.expandIconAsCell !== false;
const locale = this.getLocale();
@ -823,6 +823,7 @@ export default class Table extends React.Component<TableProps, any> {
const classString = classNames({
[`ant-table-${this.props.size}`]: true,
'ant-table-bordered': this.props.bordered,
'ant-table-empty': !data.length,
});
columns = this.renderColumnsDropdown(columns);
@ -832,23 +833,6 @@ export default class Table extends React.Component<TableProps, any> {
return newColumn;
});
// Empty Data
let emptyRowKey;
if (!data || data.length === 0) {
columns.forEach((column, index) => {
column.render = () => ({
children: !index ? <div className="ant-table-placeholder">{locale.emptyText}</div> : null,
props: {
colSpan: !index ? columns.length : 0,
},
});
});
emptyRowKey = 'key';
data = [{
[emptyRowKey]: 'empty',
}];
}
let table = (
<RcTable {...restProps}
data={data}
@ -856,7 +840,7 @@ export default class Table extends React.Component<TableProps, any> {
className={classString}
expandIconColumnIndex={(columns[0] && columns[0].key === 'selection-column') ? 1 : 0}
expandIconAsCell={expandIconAsCell}
rowKey={emptyRowKey || rowKey}
emptyText={() => locale.emptyText}
/>
);
// if there is no pagination or no data,

15
components/table/style/index.less
View File

@ -68,6 +68,7 @@
padding: 16px 8px;
background: @table-head-background-color;
position: relative;
z-index: 2;
top: -1px;
border-radius: 0 0 @border-radius-base @border-radius-base;
}
@ -245,12 +246,19 @@
.@{table-prefix-cls}-fixed-right {
border-left: 1px solid @border-color-split;
}
.@{table-prefix-cls}-placeholder {
border-bottom: 0;
}
}
.@{table-prefix-cls}-thead > tr > th {
border-bottom: 1px solid @border-color-split;
}
&.@{table-prefix-cls}-empty .@{table-prefix-cls}-thead > tr > th {
border-bottom: 0;
}
.@{table-prefix-cls}-tbody tr:last-child {
> th,
> td {
@ -268,9 +276,12 @@
}
&-placeholder {
height: 65px;
line-height: 65px;
padding: 16px 8px;
background: #fff;
border-bottom: 1px solid @border-color-split;;
text-align: center;
position: relative;
z-index: 2;
font-size: 12px;
color: #999;
.anticon {

28
components/tooltip/demo/arrow-point-at-center.md Normal file
View File

@ -0,0 +1,28 @@
---
order: 2
title: 箭头指向
---
设置了 `arrowPointAtCenter` 后，箭头将指向目标元素的中心。
````jsx
import { Tooltip, Button } from 'antd';
ReactDOM.render(
<div>
<Tooltip placement="topLeft" title="提示文字 提示文字">
<Button>默认对齐元素边缘</Button>
</Tooltip>
<Tooltip placement="topLeft" title="提示文字 提示文字" arrowPointAtCenter>
<Button>箭头指向目标元素的中心</Button>
</Tooltip>
</div>
, mountNode);
````
<style>
.code-box-demo .ant-btn {
margin-right: 1em;
margin-bottom: 1em;
}
</style>

22
components/tooltip/index.tsx
View File

@ -4,10 +4,6 @@ import RcTooltip from 'rc-tooltip';
import getPlacements from '../popover/placements';
import classNames from 'classnames';
const placements = getPlacements({
verticalArrowShift: 8,
});
type PopoverPlacement =
'top' | 'left' | 'right' | 'bottom' | 'topLeft' |
'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' |
@ -34,6 +30,7 @@ export interface TooltipProps {
trigger?: 'hover' | 'focus' | 'click';
overlay?: React.ReactNode;
openClassName?: string;
arrowPointAtCenter?: boolean;
}
export default class Tooltip extends React.Component<TooltipProps, any> {
@ -44,6 +41,7 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
mouseEnterDelay: 0.1,
mouseLeaveDelay: 0.1,
onVisibleChange() {},
arrowPointAtCenter: false,
};
refs: {
@ -67,8 +65,17 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
return this.refs.tooltip.getPopupDomNode();
}
getPlacements() {
const { builtinPlacements, arrowPointAtCenter } = this.props;
return builtinPlacements || getPlacements({
arrowPointAtCenter,
verticalArrowShift: 8,
});
}
// 动态设置动画点
onPopupAlign = (domNode, align) => {
const placements = this.getPlacements();
// 当前返回的位置
const placement = Object.keys(placements).filter(
key => (
@ -99,7 +106,7 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
}
render() {
const { prefixCls, title, overlay, children, transitionName } = this.props;
const { prefixCls, title, overlay, children } = this.props;
// Hide tooltip when there is no title
let visible = this.state.visible;
if (!title && !overlay) {
@ -117,15 +124,14 @@ export default class Tooltip extends React.Component<TooltipProps, any> {
return (
<RcTooltip
transitionName={transitionName}
builtinPlacements={placements}
overlay={title}
visible={visible}
onPopupAlign={this.onPopupAlign}
ref="tooltip"
{...this.props}
builtinPlacements={this.getPlacements()}
onVisibleChange={this.onVisibleChange}
>
>
{visible ? cloneElement((children as React.ReactElement<any>), { className: childrenCls }) : children}
</RcTooltip>
);

1
components/tooltip/index.zh-CN.md
View File

@ -20,5 +20,6 @@ english: Tooltip
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| title | 提示文字 | string/React.Element | 无 |
| getTooltipContainer | 浮层渲染父节点。默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| arrowPointAtCenter | 箭头是否指向目标元素中心，`antd@1.11+` 支持 | Boolean | `false` |
更多 API 可参考：https://github.com/react-component/tooltip

4
custom-typings.d.ts vendored
View File

@ -179,6 +179,10 @@ declare module 'rc-tooltip' {
export default function(): any;
}
declare module 'rc-tooltip/lib/placements' {
export const placements: any;
}
declare module 'rc-calendar' {
export default function(): any;
}

2
package.json
View File

@ -62,7 +62,7 @@
"rc-slider": "~4.0.0",
"rc-steps": "~2.1.5",
"rc-switch": "~1.4.2",
"rc-table": "~4.4.0",
"rc-table": "~4.6.0",
"rc-tabs": "~5.9.2",
"rc-time-picker": "~1.1.6",
"rc-tooltip": "~3.4.2",