Merge branch "1.x-stable"

components/calendar/Header.tsx

@@ -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>

components/popconfirm/demo/placement.md

@@ -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';

components/popconfirm/index.tsx

@@ -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,
+    const [{ prefixCls, title, placement, arrowPointAtCenter }, restProps] = splitObject(
-      ['title', 'placement', 'overlayStyle', 'trigger']);
+      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}
+      <Tooltip
-        placement={placement}
+        {...restProps}
-        builtinPlacements={placements}
+        builtinPlacements={getPlacements({ arrowPointAtCenter })}
-        overlayStyle={overlayStyle}
         prefixCls={prefixCls}
+        placement={placement}
         onVisibleChange={this.onVisibleChange}
-        transitionName={this.props.transitionName}
         visible={this.state.visible}
-        trigger={trigger}
         overlay={overlay}
-      >
+      />
-        {this.props.children}
-      </Tooltip>
     );
   }
 }

components/popconfirm/index.zh-CN.md

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

components/popover/demo/arrow-point-at-center.md

@@ -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);
+````

components/popover/index.jsx

@@ -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: {},
+};

components/popover/index.zh-CN.md

@@ -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` |

components/popover/placements.tsx

@@ -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;
+  arrowWidth?: number;
-   horizontalArrowShift?: number;
+  horizontalArrowShift?: number;
-   verticalArrowShift?: 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: {

components/radio/group.tsx

@@ -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;

components/table/Table.tsx

@@ -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,
+      style, className,
-    }, restProps] = splitObject(this.props, ['style', 'className', 'rowKey']);
+    }, restProps] = splitObject(this.props, ['style', 'className']);
-    let data = this.getCurrentPageData();
+    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,

components/table/style/index.less

@@ -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;
+    padding: 16px 8px;
-    line-height: 65px;
+    background: #fff;
+    border-bottom: 1px solid @border-color-split;;
     text-align: center;
+    position: relative;
+    z-index: 2;
     font-size: 12px;
     color: #999;
     .anticon {

components/tooltip/demo/arrow-point-at-center.md

@@ -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>

components/tooltip/index.tsx

@@ -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>
     );

components/tooltip/index.zh-CN.md

@@ -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

custom-typings.d.ts

@@ -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;
 }

package.json

@@ -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",