test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-01 03:29:39 +08:00
Code Issues Actions 69 Packages Projects Releases Wiki Activity

feat: Table的loading可以使用Spin的属性 (#4824)

Browse Source 
* Table的loading可以使用Spin的属性

* Test

* Fix

* test
This commit is contained in:
lixiaoyang 2017-02-13 15:48:08 +08:00 committed by Benjy Cui
parent 28961856aa
commit d05a03fe00
2 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/table/Table.tsx
View File

@ -13,6 +13,7 @@ import SelectionBox from './SelectionBox';
import SelectionCheckboxAll from './SelectionCheckboxAll';
import Column, { ColumnProps } from './Column';
import ColumnGroup from './ColumnGroup';
import { SpinProps } from '../spin';
function noop() {
}
@ -63,7 +64,7 @@ export interface TableProps<T> {
expandIconAsCell?: boolean;
expandIconColumnIndex?: number;
onChange?: (pagination: PaginationProps | boolean, filters: string[], sorter: Object) => any;
loading?: boolean;
loading?: boolean | SpinProps ;
locale?: Object;
indentSize?: number;
onRowClick?: (record: T, index: number) => any;
@ -97,7 +98,10 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
rowSelection: React.PropTypes.object,
className: React.PropTypes.string,
size: React.PropTypes.string,
loading: React.PropTypes.bool,
loading: React.PropTypes.oneOfType([
React.PropTypes.bool,
React.PropTypes.object,
]),
bordered: React.PropTypes.bool,
onChange: React.PropTypes.func,
locale: React.PropTypes.object,
@ -872,10 +876,16 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
const paginationPatchClass = (this.hasPagination() && data && data.length !== 0)
? `${prefixCls}-with-pagination`
: `${prefixCls}-without-pagination`;
let loading = this.props.loading;
if (typeof (loading) === 'boolean') {
loading = {
spinning: loading,
};
}
const spinClassName = this.props.loading ? `${paginationPatchClass} ${prefixCls}-spin-holder` : '';
return (
<div className={`${className} clearfix`} style={style}>
<Spin className={spinClassName} spinning={this.props.loading}>
<Spin className={spinClassName} {...loading}>
{table}
{this.renderPagination()}
</Spin>

18
components/table/__tests__/Table.test.js
View File

@ -1,5 +1,5 @@
import React from 'react';
import { render, shallow } from 'enzyme';
import { render, shallow, mount } from 'enzyme';
import { renderToJson } from 'enzyme-to-json';
import Table from '..';
@ -60,4 +60,20 @@ describe('Table', () => {
expect(wrapper.instance().columns).toBe(newColumns);
});
it('loading with Spin', async () => {
const loading = {
spinning: false,
delay: 500,
};
const wrapper = mount(<Table loading={loading} />);
expect(wrapper.find('.ant-spin')).toHaveLength(0);
loading.spinning = true;
wrapper.setProps({ loading });
expect(wrapper.find('.ant-spin')).toHaveLength(0);
await new Promise(resolve => setTimeout(resolve, 500));
expect(wrapper.find('.ant-spin')).toHaveLength(1);
});
});