diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx index 9715e1dad..8ebf545a3 100644 --- a/components/calendar/Header.tsx +++ b/components/calendar/Header.tsx @@ -38,6 +38,7 @@ export default class Header extends React.Component { 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 { } return ( { } 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 = ( - + diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md index 50a5467b9..bd6a7e371 100755 --- a/components/popconfirm/demo/placement.md +++ b/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'; diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index 5edc44f27..8a1b2c400 100644 --- a/components/popconfirm/index.tsx +++ b/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 { 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 { } 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 { ); return ( - - {this.props.children} - + /> ); } } diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 2e2fe8fac..33ce98c51 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/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` | diff --git a/components/popover/demo/arrow-point-at-center.md b/components/popover/demo/arrow-point-at-center.md new file mode 100644 index 000000000..fb21607a6 --- /dev/null +++ b/components/popover/demo/arrow-point-at-center.md @@ -0,0 +1,29 @@ +--- +order: 4 +title: 箭头指向 +--- + +设置了 `arrowPointAtCenter` 后,箭头将指向目标元素的中心。 + +````jsx +import { Popover, Button } from 'antd'; + +const text = 标题; +const content = ( +
+

内容

+

内容

+
+); + +ReactDOM.render( +
+ + + + + + +
+, mountNode); +```` diff --git a/components/popover/index.jsx b/components/popover/index.jsx new file mode 100644 index 000000000..7767a4c07 --- /dev/null +++ b/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 ( + {this.props.children} + ); + } + 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 (
+ {title &&
{title}
} +
+ {content || overlay} +
+
); + } +} +Popover.defaultProps = { + prefixCls: 'ant-popover', + placement: 'top', + transitionName: 'zoom-big', + trigger: 'hover', + mouseEnterDelay: 0.1, + mouseLeaveDelay: 0.1, + overlayStyle: {}, +}; diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 589bb04e0..cd4ecca51 100644 --- a/components/popover/index.zh-CN.md +++ b/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` | diff --git a/components/popover/placements.tsx b/components/popover/placements.tsx index dbf458028..66b615a7e 100644 --- a/components/popover/placements.tsx +++ b/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; - 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: { diff --git a/components/radio/group.tsx b/components/radio/group.tsx index a93058141..445ead256 100644 --- a/components/radio/group.tsx +++ b/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; diff --git a/components/table/Table.tsx b/components/table/Table.tsx index e8d04a4c9..c317b0ee2 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -778,7 +778,7 @@ export default class Table extends React.Component { {}, item, { [childrenColumnName]: this.recursiveSort(item[childrenColumnName], sorterFn), - }, + } ) : item)); } @@ -813,9 +813,9 @@ export default class Table extends React.Component { 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 { 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 { return newColumn; }); - // Empty Data - let emptyRowKey; - if (!data || data.length === 0) { - columns.forEach((column, index) => { - column.render = () => ({ - children: !index ?
{locale.emptyText}
: null, - props: { - colSpan: !index ? columns.length : 0, - }, - }); - }); - emptyRowKey = 'key'; - data = [{ - [emptyRowKey]: 'empty', - }]; - } - let table = ( { 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, diff --git a/components/table/style/index.less b/components/table/style/index.less index 28a214906..9dbd9dcf0 100644 --- a/components/table/style/index.less +++ b/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; - 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 { diff --git a/components/tooltip/demo/arrow-point-at-center.md b/components/tooltip/demo/arrow-point-at-center.md new file mode 100644 index 000000000..3eb7aa37b --- /dev/null +++ b/components/tooltip/demo/arrow-point-at-center.md @@ -0,0 +1,28 @@ +--- +order: 2 +title: 箭头指向 +--- + +设置了 `arrowPointAtCenter` 后,箭头将指向目标元素的中心。 + +````jsx +import { Tooltip, Button } from 'antd'; + +ReactDOM.render( +
+ + + + + + +
+, mountNode); +```` + + diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 4049179d6..3e282d7c8 100644 --- a/components/tooltip/index.tsx +++ b/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 { @@ -44,6 +41,7 @@ export default class Tooltip extends React.Component { mouseEnterDelay: 0.1, mouseLeaveDelay: 0.1, onVisibleChange() {}, + arrowPointAtCenter: false, }; refs: { @@ -67,8 +65,17 @@ export default class Tooltip extends React.Component { 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 { } 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 { return ( + > {visible ? cloneElement((children as React.ReactElement), { className: childrenCls }) : children} ); diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index 488d316a8..f34df3716 100644 --- a/components/tooltip/index.zh-CN.md +++ b/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 diff --git a/custom-typings.d.ts b/custom-typings.d.ts index 609f79d50..c0350d859 100644 --- a/custom-typings.d.ts +++ b/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; } diff --git a/package.json b/package.json index 39a471766..caf2de8a6 100644 --- a/package.json +++ b/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",