Merge branch 'master' into feature-2.13

This commit is contained in:
afc163 2017-08-27 19:31:09 +08:00
commit 1e48ec0c6a
11 changed files with 657 additions and 32 deletions

View File

@ -17,6 +17,17 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
--- ---
## 2.12.8
`2017-08-27`
- 📖 Rewrite the [Use in create-react-app](/docs/react/use-with-create-react-app) documentation without ejecting. [#7276](https://github.com/ant-design/ant-design/pull/7276)
- 🌟 Better empty data style for fixed-columns Table. [#7298](https://github.com/ant-design/ant-design/issues/7298)
![](https://gw.alipayobjects.com/zos/rmsportal/kpxITHnXvsLlMTqEKgUm.gif)
- 🐞 Fix `disabled` logic of CheckboxGroup and Checkbox. [#7266](https://github.com/ant-design/ant-design/issues/7266) [@dilidili](https://github.com/dilidili)
- 🐞 Fix errors of rendering Spin and Carousel in react-snapshot or other jsdom environment. [#3308](https://github.com/ant-design/ant-design/issues/3308) [#7318](https://github.com/ant-design/ant-design/issues/7318)
- 🐞 Fix some details of Select, Tooltip and Menu.
## 2.12.7 ## 2.12.7
`2017-08-21` `2017-08-21`
@ -181,7 +192,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
- Fix Select overflow issue. [#6621](https://github.com/ant-design/ant-design/issues/6621) - Fix Select overflow issue. [#6621](https://github.com/ant-design/ant-design/issues/6621)
- Slider - Slider
- Improve styles. [#6665](https://github.com/ant-design/ant-design/issues/6665) - Improve styles. [#6665](https://github.com/ant-design/ant-design/issues/6665)
- Upgrade rc-slider to 8.2.0, add `dotStyle``activeDotStyle` props. [rc-slider/pull/292](https://github.com/react-component/slider/pull/292) - Upgrade rc-slider to 8.2.0, add `dotStyle`, `activeDotStyle` props. [rc-slider/pull/292](https://github.com/react-component/slider/pull/292)
- Fix Spin z-index issue. [#6759](https://github.com/ant-design/ant-design/issues/6759) - Fix Spin z-index issue. [#6759](https://github.com/ant-design/ant-design/issues/6759)
- Fix nested Steps style issue. [#6754](https://github.com/ant-design/ant-design/issues/6754) - Fix nested Steps style issue. [#6754](https://github.com/ant-design/ant-design/issues/6754)
- Table - Table
@ -190,7 +201,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
- Make supplement for `loading` docs. [pull/6763](https://github.com/ant-design/ant-design/pull/6763) [@hansnow](https://github.com/hansnow) - Make supplement for `loading` docs. [pull/6763](https://github.com/ant-design/ant-design/pull/6763) [@hansnow](https://github.com/hansnow)
- Upgrade rc-table to 5.4.0, support `onRowMouseEnter` and `onRowMouseLeave`. [rc-table/0db582](https://github.com/react-component/table/commit/0db582a75dfa119715eb4db8a59eacfca744c5a0) - Upgrade rc-table to 5.4.0, support `onRowMouseEnter` and `onRowMouseLeave`. [rc-table/0db582](https://github.com/react-component/table/commit/0db582a75dfa119715eb4db8a59eacfca744c5a0)
- Improve TimePicker format support. [950c32](https://github.com/ant-design/ant-design/commit/950c321b25091ef31b130b83674478974590d7f3) - Improve TimePicker format support. [950c32](https://github.com/ant-design/ant-design/commit/950c321b25091ef31b130b83674478974590d7f3)
- Make style improvement or tweaking for many components, includes [Checkbox](https://ant.design/components/checkbox/)[Radio](https://ant.design/components/radio/)[Tabs](https://ant.design/components/tabs/)[Card](https://ant.design/components/card/) and etc. - Make style improvement or tweaking for many components, includes [Checkbox](https://ant.design/components/checkbox/), [Radio](https://ant.design/components/radio/), [Tabs](https://ant.design/components/tabs/), [Card](https://ant.design/components/card/) and etc.
- Now you can open demo in codepen. [#5140](https://github.com/ant-design/ant-design/issues/5140) - Now you can open demo in codepen. [#5140](https://github.com/ant-design/ant-design/issues/5140)
## 2.11.2 ## 2.11.2
@ -706,7 +717,7 @@ If you want to read change logs before `2.0.0`, please visit [GitHub](https://gi
* Fixed Badge misplace issue when browser zoom above 100%. [#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290) * Fixed Badge misplace issue when browser zoom above 100%. [#4747](https://github.com/ant-design/ant-design/issues/4747) [#4290](https://github.com/ant-design/ant-design/issues/4290)
* Fixed a mis-align issue of fixed header Table. [#4750](https://github.com/ant-design/ant-design/issues/4750) * Fixed a mis-align issue of fixed header Table. [#4750](https://github.com/ant-design/ant-design/issues/4750)
* Fixed Table scrolling lag issue in IE. [#4522](https://github.com/ant-design/ant-design/issues/4522) * Fixed Table scrolling lag issue in IE. [#4522](https://github.com/ant-design/ant-design/issues/4522)
* Add icon aliases: `addfile` => `file-add``addfolder` => `folder-open`, and the old type names are still working. [#4758](https://github.com/ant-design/ant-design/issues/4758) * Add icon aliases: `addfile` => `file-add`, `addfolder` => `folder-open`, and the old type names are still working. [#4758](https://github.com/ant-design/ant-design/issues/4758)
## 2.6.4 ## 2.6.4

View File

@ -17,6 +17,17 @@ timeline: true
--- ---
## 2.12.8
`2017-08-27`
- 📖 重写了 [《在 create-react-app 中使用》](/docs/react/use-with-create-react-app) 文档,现在不再需要 eject。[#7276](https://github.com/ant-design/ant-design/pull/7276)
- 🌟 优化了固定列表格的空数据样式。[#7298](https://github.com/ant-design/ant-design/issues/7298)
![](https://gw.alipayobjects.com/zos/rmsportal/kpxITHnXvsLlMTqEKgUm.gif)
- 🐞 修复了 CheckboxGroup 和 Checkbox 的 `disabled` 属性逻辑。[#7266](https://github.com/ant-design/ant-design/issues/7266) [@dilidili](https://github.com/dilidili)
- 🐞 修复在 react-snapshot 或 jsdom 环境下测试 Spin 和 Carousel 时报错的问题。[#3308](https://github.com/ant-design/ant-design/issues/3308) [#7318](https://github.com/ant-design/ant-design/issues/7318)
- 🐞 修复 Select、Tooltip、Menu 的一些细节样式问题。
## 2.12.7 ## 2.12.7
`2017-08-21` `2017-08-21`

View File

@ -1,7 +1,8 @@
// matchMedia polyfill for import React from 'react';
// https://github.com/WickyNilliams/enquire.js/issues/82
import debounce from 'lodash.debounce'; import debounce from 'lodash.debounce';
// matchMedia polyfill for
// https://github.com/WickyNilliams/enquire.js/issues/82
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
const matchMediaPolyfill = (mediaQuery: string): MediaQueryList => { const matchMediaPolyfill = (mediaQuery: string): MediaQueryList => {
return { return {
@ -15,9 +16,11 @@ if (typeof window !== 'undefined') {
}; };
window.matchMedia = window.matchMedia || matchMediaPolyfill; window.matchMedia = window.matchMedia || matchMediaPolyfill;
} }
// Use require over import (will be lifted up)
import SlickCarousel from 'react-slick'; // make sure matchMedia polyfill run before require('react-slick')
import React from 'react'; // Fix https://github.com/ant-design/ant-design/issues/6560
// Fix https://github.com/ant-design/ant-design/issues/3308
const SlickCarousel = require('react-slick').default;
export type CarouselEffect = 'scrollx' | 'fade'; export type CarouselEffect = 'scrollx' | 'fade';
// Carousel // Carousel

View File

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { findDOMNode } from 'react-dom';
import classNames from 'classnames'; import classNames from 'classnames';
import Animate from 'rc-animate'; import Animate from 'rc-animate';
import isCssAnimationSupported from '../_util/isCssAnimationSupported'; import isCssAnimationSupported from '../_util/isCssAnimationSupported';
@ -50,7 +49,9 @@ export default class Spin extends React.Component<SpinProps, any> {
componentDidMount() { componentDidMount() {
if (!isCssAnimationSupported()) { if (!isCssAnimationSupported()) {
// Show text in IE8/9 // Show text in IE8/9
findDOMNode(this).className += ` ${this.props.prefixCls}-show-text`; this.setState({
notCssAnimationSupported: true,
});
} }
} }
@ -89,13 +90,13 @@ export default class Spin extends React.Component<SpinProps, any> {
} }
render() { render() {
const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props; const { className, size, prefixCls, tip, wrapperClassName, ...restProps } = this.props;
const { spinning } = this.state; const { spinning, notCssAnimationSupported } = this.state;
const spinClassName = classNames(prefixCls, { const spinClassName = classNames(prefixCls, {
[`${prefixCls}-sm`]: size === 'small', [`${prefixCls}-sm`]: size === 'small',
[`${prefixCls}-lg`]: size === 'large', [`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-spinning`]: spinning, [`${prefixCls}-spinning`]: spinning,
[`${prefixCls}-show-text`]: !!tip, [`${prefixCls}-show-text`]: !!tip || notCssAnimationSupported,
}, className); }, className);
// fix https://fb.me/react-unknown-prop // fix https://fb.me/react-unknown-prop

View File

@ -0,0 +1,529 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Table renders empty table 1`] = `
<div
class="ant-table-wrapper"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left"
>
<div
class="ant-table-content"
>
<div
class="ant-table-body"
>
<table
class=""
>
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead
class="ant-table-thead"
>
<tr>
<th
class=""
>
<span>
Column 1
</span>
</th>
<th
class=""
>
<span>
Column 2
</span>
</th>
<th
class=""
>
<span>
Column 3
</span>
</th>
<th
class=""
>
<span>
Column 4
</span>
</th>
<th
class=""
>
<span>
Column 5
</span>
</th>
<th
class=""
>
<span>
Column 6
</span>
</th>
<th
class=""
>
<span>
Column 7
</span>
</th>
<th
class=""
>
<span>
Column 8
</span>
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
/>
</table>
</div>
<div
class="ant-table-placeholder"
>
<span>
<i
class="anticon anticon-frown-o"
/>
暂无数据
</span>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Table renders empty table with custom emptyText 1`] = `
<div
class="ant-table-wrapper"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left"
>
<div
class="ant-table-content"
>
<div
class="ant-table-body"
>
<table
class=""
>
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead
class="ant-table-thead"
>
<tr>
<th
class=""
>
<span>
Column 1
</span>
</th>
<th
class=""
>
<span>
Column 2
</span>
</th>
<th
class=""
>
<span>
Column 3
</span>
</th>
<th
class=""
>
<span>
Column 4
</span>
</th>
<th
class=""
>
<span>
Column 5
</span>
</th>
<th
class=""
>
<span>
Column 6
</span>
</th>
<th
class=""
>
<span>
Column 7
</span>
</th>
<th
class=""
>
<span>
Column 8
</span>
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
/>
</table>
</div>
<div
class="ant-table-placeholder"
>
custom empty text
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Table renders empty table with fixed columns 1`] = `
<div
class="ant-table-wrapper"
>
<div
class="ant-spin-nested-loading"
>
<div
class="ant-spin-container"
>
<div
class="ant-table ant-table-large ant-table-empty ant-table-scroll-position-left"
>
<div
class="ant-table-content"
>
<div
class="ant-table-scroll"
>
<div
class="ant-table-body"
>
<table
class=""
>
<colgroup>
<col
style="width:100px;min-width:100px;"
/>
<col
style="width:100px;min-width:100px;"
/>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col
style="width:100px;min-width:100px;"
/>
</colgroup>
<thead
class="ant-table-thead"
>
<tr>
<th
class=""
>
<span>
Full Name
</span>
</th>
<th
class=""
>
<span>
Age
</span>
</th>
<th
class=""
>
<span>
Column 1
</span>
</th>
<th
class=""
>
<span>
Column 2
</span>
</th>
<th
class=""
>
<span>
Column 3
</span>
</th>
<th
class=""
>
<span>
Column 4
</span>
</th>
<th
class=""
>
<span>
Column 5
</span>
</th>
<th
class=""
>
<span>
Column 6
</span>
</th>
<th
class=""
>
<span>
Column 7
</span>
</th>
<th
class=""
>
<span>
Column 8
</span>
</th>
<th
class=""
>
<span>
Action
</span>
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left:0px;"
/>
</td>
<td
class=""
/>
<td
class=""
/>
<td
class=""
/>
<td
class=""
/>
<td
class=""
/>
<td
class=""
/>
<td
class=""
/>
<td
class=""
/>
<td
class=""
/>
<td
class=""
/>
</tr>
</tbody>
</table>
</div>
<div
class="ant-table-placeholder ant-table-placeholder-fixed-columns"
>
<span>
<i
class="anticon anticon-frown-o"
/>
暂无数据
</span>
</div>
</div>
<div
class="ant-table-fixed-left"
>
<div
class="ant-table-body-outer"
>
<div
class="ant-table-body-inner"
>
<table
class="ant-table-fixed"
>
<colgroup>
<col
style="width:100px;min-width:100px;"
/>
<col
style="width:100px;min-width:100px;"
/>
</colgroup>
<thead
class="ant-table-thead"
>
<tr>
<th
class=""
>
<span>
Full Name
</span>
</th>
<th
class=""
>
<span>
Age
</span>
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
>
<span
class="ant-table-row-indent indent-level-0"
style="padding-left:0px;"
/>
</td>
<td
class=""
/>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div
class="ant-table-fixed-right"
>
<div
class="ant-table-body-outer"
>
<div
class="ant-table-body-inner"
>
<table
class="ant-table-fixed"
>
<colgroup>
<col
style="width:100px;min-width:100px;"
/>
</colgroup>
<thead
class="ant-table-thead"
>
<tr>
<th
class=""
>
<span>
Action
</span>
</th>
</tr>
</thead>
<tbody
class="ant-table-tbody"
>
<tr
class="ant-table-row ant-table-row-level-0"
>
<td
class=""
/>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;

View File

@ -0,0 +1,61 @@
import React from 'react';
import { render } from 'enzyme';
import Table from '..';
const columns = [
{ title: 'Column 1', dataIndex: 'address', key: '1' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
{ title: 'Column 3', dataIndex: 'address', key: '3' },
{ title: 'Column 4', dataIndex: 'address', key: '4' },
{ title: 'Column 5', dataIndex: 'address', key: '5' },
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
];
const columnsFixed = [
{ title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
{ title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
{ title: 'Column 1', dataIndex: 'address', key: '1' },
{ title: 'Column 2', dataIndex: 'address', key: '2' },
{ title: 'Column 3', dataIndex: 'address', key: '3' },
{ title: 'Column 4', dataIndex: 'address', key: '4' },
{ title: 'Column 5', dataIndex: 'address', key: '5' },
{ title: 'Column 6', dataIndex: 'address', key: '6' },
{ title: 'Column 7', dataIndex: 'address', key: '7' },
{ title: 'Column 8', dataIndex: 'address', key: '8' },
{
title: 'Action',
key: 'address',
fixed: 'right',
width: 100,
},
];
describe('Table', () => {
it('renders empty table', () => {
const wrapper = render(
<Table dataSource={[]} columns={columns} pagination={false} />
);
expect(wrapper).toMatchSnapshot();
});
it('renders empty table with fixed columns', () => {
const wrapper = render(
<Table dataSource={[]} columns={columnsFixed} pagination={false} />
);
expect(wrapper).toMatchSnapshot();
});
it('renders empty table with custom emptyText', () => {
const wrapper = render(
<Table
dataSource={[]}
columns={columns}
pagination={false}
locale={{ emptyText: 'custom empty text ' }}
/>
);
expect(wrapper).toMatchSnapshot();
});
});

View File

@ -69,6 +69,11 @@
&-tbody > tr > td { &-tbody > tr > td {
border-bottom: @border-width-base @border-style-base @border-color-split; border-bottom: @border-width-base @border-style-base @border-color-split;
transition: all .3s; transition: all .3s;
// height placeholder for empty cell
&:empty:after {
content: '.';
visibility: hidden;
}
} }
&-thead > tr, &-thead > tr,
@ -438,6 +443,14 @@
.@{iconfont-css-prefix} { .@{iconfont-css-prefix} {
margin-right: 4px; margin-right: 4px;
} }
&-fixed-columns {
position: absolute;
bottom: 0;
width: 100%;
background: transparent;
pointer-events: none;
}
} }
&-pagination { &-pagination {
@ -625,12 +638,6 @@
margin-bottom: -20px; margin-bottom: -20px;
} }
// Ignore the scroll.x width
// https://github.com/ant-design/ant-design/issues/7142
&-empty &-scroll &-body &-fixed {
width: auto !important;
}
&-fixed-left, &-fixed-left,
&-fixed-right { &-fixed-right {
position: absolute; position: absolute;

View File

@ -1,6 +1,6 @@
{ {
"name": "antd", "name": "antd",
"version": "2.12.7", "version": "2.12.8",
"title": "Ant Design", "title": "Ant Design",
"description": "An enterprise-class UI design language and React-based implementation", "description": "An enterprise-class UI design language and React-based implementation",
"homepage": "http://ant.design/", "homepage": "http://ant.design/",
@ -64,7 +64,7 @@
"rc-slider": "~8.2.0", "rc-slider": "~8.2.0",
"rc-steps": "~2.5.1", "rc-steps": "~2.5.1",
"rc-switch": "~1.5.1", "rc-switch": "~1.5.1",
"rc-table": "~5.4.0", "rc-table": "~5.6.1",
"rc-tabs": "~9.1.2", "rc-tabs": "~9.1.2",
"rc-time-picker": "~2.4.1", "rc-time-picker": "~2.4.1",
"rc-tooltip": "~3.4.6", "rc-tooltip": "~3.4.6",

View File

@ -61,7 +61,18 @@ export default class MainContent extends React.Component {
if (!location.hash) { if (!location.hash) {
document.body.scrollTop = 0; document.body.scrollTop = 0;
document.documentElement.scrollTop = 0; document.documentElement.scrollTop = 0;
return;
} }
if (this.timer) {
clearTimeout(this.timer);
}
this.timer = setTimeout(() => {
location.hash = location.hash;
}, 10);
}
componentWillUnmount() {
clearTimeout(this.timer);
} }
handleMenuOpenChange = (openKeys) => { handleMenuOpenChange = (openKeys) => {

View File

@ -2,17 +2,6 @@ import { jsdom } from 'jsdom';
// fixed jsdom miss // fixed jsdom miss
if (typeof window !== 'undefined') { if (typeof window !== 'undefined') {
const matchMediaPolyfill = function matchMediaPolyfill() {
return {
matches: false,
addListener() {
},
removeListener() {
},
};
};
window.matchMedia = window.matchMedia || matchMediaPolyfill;
const documentHTML = '<!doctype html><html><body><div id="root"></div></body></html>'; const documentHTML = '<!doctype html><html><body><div id="root"></div></body></html>';
global.document = jsdom(documentHTML); global.document = jsdom(documentHTML);
global.window = document.parentWindow; global.window = document.parentWindow;

View File

@ -90,4 +90,6 @@ declare module "*.json" {
export default value; export default value;
} }
declare module "prop-types" declare module "prop-types"
declare function require(name: string): any;