diff --git a/components/table/Table.tsx b/components/table/Table.tsx index abf7146801..579f2a61c4 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -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 { 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 extends React.Component, 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 extends React.Component, 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 (
- + {table} {this.renderPagination()} diff --git a/components/table/__tests__/Table.test.js b/components/table/__tests__/Table.test.js index 5efeeb19f1..33e5f68582 100644 --- a/components/table/__tests__/Table.test.js +++ b/components/table/__tests__/Table.test.js @@ -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(); + 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); + }); });