@ -24,6 +24,7 @@ import {
getAllProps ,
} from '../_util/props-util' ;
import BaseMixin from '../_util/BaseMixin' ;
import { ConfigConsumerProps } from '../config-provider' ;
import { TableProps } from './interface' ;
function noop ( ) { }
@ -44,6 +45,8 @@ const defaultPagination = {
onShowSizeChange : noop ,
} ;
const ROW _SELECTION _COLUMN _WIDTH = '62px' ;
/ * *
* Avoid creating new object , so that parent component ' s shouldComponentUpdate
* can works appropriately 。
@ -57,7 +60,6 @@ export default {
mixins : [ BaseMixin ] ,
props : initDefaultProps ( TableProps , {
dataSource : [ ] ,
prefixCls : 'ant-table' ,
useFixedHeader : false ,
/ / r o w S e l e c t i o n : n u l l ,
size : 'default' ,
@ -67,8 +69,12 @@ export default {
locale : { } ,
rowKey : 'key' ,
showHeader : true ,
sortDirections : [ 'ascend' , 'descend' ] ,
} ) ,
inject : {
configProvider : { default : ( ) => ( { } ) } ,
} ,
/ / C h e c k b o x P r o p s C a c h e : {
/ / [ k e y : s t r i n g ] : a n y ;
/ / } ;
@ -86,6 +92,7 @@ export default {
selectedRowKeys : getRowSelection ( this . $props ) . selectedRowKeys || [ ] ,
selectionDirty : false ,
} ) ;
this . prevRowSelection = this . rowSelection ? { ... this . rowSelection } : this . rowSelection ;
return {
... this . getDefaultSortOrder ( this . columns ) ,
/ / 减 少 状 态
@ -120,7 +127,12 @@ export default {
if ( rowSelection && val . getCheckboxProps !== rowSelection . getCheckboxProps ) {
this . CheckboxPropsCache = { } ;
}
} else if ( val && ! this . prevRowSelection ) {
this . store . setState ( {
selectedRowKeys : [ ] ,
} ) ;
}
this . prevRowSelection = val ? { ... val } : val ;
} ,
deep : true ,
} ,
@ -185,19 +197,31 @@ export default {
} ,
getDefaultPagination ( props ) {
const pagination = props . pagination || { } ;
const pagination = typeof props . pagination === 'object' ? props . pagination : { } ;
let current ;
if ( 'current' in pagination ) {
current = pagination . current ;
} else if ( 'defaultCurrent' in pagination ) {
current = pagination . defaultCurrent ;
}
let pageSize ;
if ( 'pageSize' in pagination ) {
pageSize = pagination . pageSize ;
} else if ( 'defaultPageSize' in pagination ) {
pageSize = pagination . defaultPageSize ;
}
return this . hasPagination ( props )
? {
... defaultPagination ,
... pagination ,
current : pagination . defaultCurrent || pagination . current || 1 ,
pageSize : pagination . defaultPageSize || pagination . pageSize || 10 ,
current : || 1 ,
pageSize : pag eSize || 10 ,
}
: { } ;
} ,
onRow ( record , index ) {
const { prefixCls , customRow } = this ;
onRow ( prefixCls, record, index ) {
const { } = this ;
const custom = customRow ? customRow ( record , index ) : { } ;
return mergeProps ( custom , {
props : {
@ -346,18 +370,18 @@ export default {
if ( ! column . sorter ) {
return ;
}
const sortDirections = column . sortDirections || this . sortDirections ;
const { sSortOrder : sortOrder , sSortColumn : sortColumn } = this ;
/ / 只 同 时 允 许 一 列 进 行 排 序 ， 否 则 会 导 致 排 序 顺 序 的 逻 辑 问 题
let newSortOrder ;
/ / 切 换 另 一 列 时 ， 丢 弃 s o r t O r d e r 的 状 态
const oldSortOrder = this . isSameColumn ( sortColumn , column ) ? sortOrder : undefined ;
/ / 切 换 排 序 状 态 ， 按 照 降 序 / 升 序 / 不 排 序 的 顺 序
if ( ! oldSortOrder ) {
newSortOrder = 'ascend' ;
} else if ( oldSortOrder === 'ascend' ) {
newSortOrder = 'descend' ;
if ( this . isSameColumn ( sortColumn , column ) && sortOrder !== undefined ) {
/ / 按 照 s o r t D i r e c t i o n s 的 内 容 依 次 切 换 排 序 状 态
const methodIndex = sortDirections . indexOf ( sortOrder ) + 1 ;
newSortOrder =
methodIndex === sortDirections . length ? undefined : sortDirections [ methodIndex ] ;
} else {
newSortOrder = undefined ;
newSortOrder = sortDirections [ 0 ] ;
}
const newState = {
sSortOrder : newSortOrder ,
@ -683,8 +707,15 @@ export default {
return this . $el ;
} ,
renderRowSelection ( locale ) {
const { prefixCls , rowSelection , childrenColumnName } = this ;
generatePopupContainerFunc ( ) {
const { scroll } = this . $props ;
/ / U s e u n d e f i n e d t o l e t r c c o m p o n e n t u s e d e f a u l t l o g i c .
return scroll ? this . getPopupContainer : undefined ;
} ,
renderRowSelection ( prefixCls , locale ) {
const { rowSelection , childrenColumnName } = this ;
const columns = this . columns . concat ( ) ;
if ( rowSelection ) {
const data = this . getFlatCurrentPageData ( childrenColumnName ) . filter ( ( item , index ) => {
@ -701,7 +732,7 @@ export default {
customRender : this . renderSelectionBox ( rowSelection . type ) ,
className : selectionColumnClass ,
fixed : rowSelection . fixed ,
width : rowSelection . columnWidth ,
width : rowSelection . columnWidth || ROW _SELECTION _COLUMN _WIDTH ,
title : rowSelection . columnTitle ,
} ;
if ( rowSelection . type !== 'radio' ) {
@ -720,7 +751,7 @@ export default {
onSelect = { this . handleSelectRow }
selections = { rowSelection . selections }
hideDefaultSelections = { rowSelection . hideDefaultSelections }
getPopupContainer = { this . ge tPopupContainer}
getPopupContainer = { this . ge nera te PopupContainerFunc( ) }
/ >
) ;
}
@ -758,15 +789,14 @@ export default {
return this . getColumnKey ( sortColumn ) === this . getColumnKey ( column ) ;
} ,
renderColumnsDropdown ( columns , locale ) {
const { prefixCls , dropdownPrefixCls } = this ;
renderColumnsDropdown ( prefixCls , dropdownPrefixCls , columns , locale ) {
const { sSortOrder : sortOrder , sFilters : filters } = this ;
return treeMap ( columns , ( column , i ) => {
const key = this . getColumnKey ( column , i ) ;
let filterDropdown ;
let sortButton ;
let customHeaderCell = column . customHeaderCell ;
const sortTitle = this . getColumnTitle ( column . title , { } ) || locale . sortTitle
/ / c o n s t s o r t T i t l e = t h i s . g e t C o l u m n T i t l e ( c o l u m n . t i t l e , { } ) | | l o c a l e . s o r t T i t l e
const isSortColumn = this . isSortColumn ( column ) ;
if ( ( column . filters && column . filters . length > 0 ) || column . filterDropdown ) {
const colFilters = key in filters ? filters [ key ] : [ ] ;
@ -779,26 +809,34 @@ export default {
confirmFilter = { this . handleFilter }
prefixCls = { ` ${ prefixCls } -filter ` }
dropdownPrefixCls = { dropdownPrefixCls || 'ant-dropdown' }
getPopupContainer = { this . ge tPopupContainer}
getPopupContainer = { this . ge nera te PopupContainerFunc( ) }
key = "filter-dropdown"
/ >
) ;
}
if ( column . sorter ) {
const sortDirections = column . sortDirections || this . sortDirections ;
const isAscend = isSortColumn && sortOrder === 'ascend' ;
const isDescend = isSortColumn && sortOrder === 'descend' ;
const ascend = sortDirections . indexOf ( 'ascend' ) !== - 1 && (
< Icon
class = { ` ${ prefixCls } -column-sorter-up ${ isAscend ? 'on' : 'off' } ` }
type = "caret-up"
theme = "filled"
/ >
) ;
const descend = sortDirections . indexOf ( 'descend' ) !== - 1 && (
< Icon
class = { ` ${ prefixCls } -column-sorter-down ${ isDescend ? 'on' : 'off' } ` }
type = "caret-down"
theme = "filled"
/ >
) ;
sortButton = (
< div class = { ` ${ prefixCls } -column-sorter ` } key = "sorter" >
< Icon
class = { ` ${ prefixCls } -column-sorter-up ${ isAscend ? 'on' : 'off' } ` }
type = "caret-up"
theme = "filled"
/ >
< Icon
class = { ` ${ prefixCls } -column-sorter-down ${ isDescend ? 'on' : 'off' } ` }
type = "caret-down"
theme = "filled"
/ >
< div title = { locale . sortTitle } class = { ` ${ prefixCls } -column-sorter ` } key = "sorter" >
{ ascend }
{ descend }
< / div >
) ;
customHeaderCell = col => {
@ -821,7 +859,7 @@ export default {
return colProps ;
} ;
}
const sortTitleString = sortButton && typeof sortTitle === 'string' ? sortTitle : undefined
/ / c o n s t s o r t T i t l e S t r i n g = s o r t B u t t o n & & t y p e o f s o r t T i t l e = = = ' s t r i n g ' ? s o r t T i t l e : u n d e f i n e d
return {
... column ,
className : classNames ( column . className , {
@ -833,7 +871,6 @@ export default {
title : [
< div
key = "title"
title = { sortTitleString }
class = { sortButton ? ` ${ prefixCls } -column-sorters ` : undefined }
>
{ this . renderColumnTitle ( column . title ) }
@ -857,33 +894,33 @@ export default {
return title ;
} ,
getColumnTitle ( title , parentNode )
if ( ! title ) {
return ;
}
if ( isValidElement ( title ) ) {
const props = title . componentOptions ;
let children = null ;
if ( props && props . children ) {
/ / f o r c o m p o n e n t
children = filterEmpty ( props . children ) ;
} else if ( title . children ) {
/ / f o r d o m
children = filterEmpty ( title . children ) ;
}
if ( children && children . length === 1 ) {
children = children [ 0 ] ;
const attrs = getAllProps ( title ) ;
if ( ! children . tag && children . text ) {
/ / f o r t e x t N o d e
children = children . text ;
}
return this . getColumnTitle ( children , attrs ) ;
}
} else {
return parentNode . title || title ;
}
}
/ / g e t C o l u m n T i t l e ( t i t l e , p a r e n t N o d e )
/ / i f ( ! t i t l e )
/ / r e t u r n
/ /
/ / i f ( i s V a l i d E l e m e n t ( t i t l e ) )
/ / c o n s t p r o p s = t i t l e . c o m p o n e n t O p t i o n s
/ / l e t c h i l d r e n = n u l l
/ / i f ( p r o p s & & p r o p s . c h i l d r e n )
/ / / / f o r c o m p o n e n t
/ / c h i l d r e n = f i l t e r E m p t y ( p r o p s . c h i l d r e n )
/ / } e l s e i f ( t i t l e . c h i l d r e n )
/ / / / f o r d o m
/ / c h i l d r e n = f i l t e r E m p t y ( t i t l e . c h i l d r e n )
/ /
/ / i f ( c h i l d r e n & & c h i l d r e n . l e n g t h = = = 1 )
/ / c h i l d r e n = c h i l d r e n [ 0 ]
/ / c o n s t a t t r s = g e t A l l P r o p s ( t i t l e )
/ / i f ( ! c h i l d r e n . t a g & & c h i l d r e n . t e x t )
/ / / / f o r t e x t N o d e
/ / c h i l d r e n = c h i l d r e n . t e x t
/ /
/ / r e t u r n t h i s . g e t C o l u m n T i t l e ( c h i l d r e n , a t t r s )
/ /
/ / } e l s e
/ / r e t u r n p a r e n t N o d e . t i t l e | | t i t l e
/ /
/ / }
handleShowSizeChange ( current , pageSize ) {
const pagination = this . sPagination ;
@ -903,7 +940,7 @@ export default {
) ;
} ,
renderPagination ( p aginationPosition) {
renderPagination ( p refixCls, p aginationPosition) {
/ / 强 制 不 需 要 分 页
if ( ! this . hasPagination ( ) ) {
return null ;
@ -920,7 +957,7 @@ export default {
const { class : cls , style , onChange , onShowSizeChange , ... restProps } = pagination ; / / e s l i n t - d i s a b l e - l i n e
const paginationProps = mergeProps ( {
key : ` pagination- ${ paginationPosition } ` ,
class : classNames ( cls , ` ${ this . prefixCls } -pagination ` ) ,
class : classNames ( cls , ` ${ prefixCls } -pagination ` ) ,
props : {
... restProps ,
total ,
@ -1063,12 +1100,17 @@ export default {
} ;
} ,
renderTable ( , loading ) {
renderTable ( prefixCls, renderEmpty , dropdownPrefixCls , contextLocale, loading ) {
const locale = { ... contextLocale , ... this . locale } ;
const { prefixCls, showHeader, ... restProps } = getOptionProps ( this ) ;
const { , ... restProps } = getOptionProps ( this ) ;
const data = this . getCurrentPageData ( ) ;
const expandIconAsCell = this . expandedRowRender && this . expandIconAsCell !== false ;
const mergedLocale = { ... contextLocale , ... locale } ;
if ( ! locale || ! locale . emptyText ) {
mergedLocale . emptyText = renderEmpty ( h , 'Table' ) ;
}
const classString = classNames ( {
[ ` ${ prefixCls } - ${ this . size } ` ] : true ,
[ ` ${ prefixCls } -bordered ` ] : this . bordered ,
@ -1076,8 +1118,8 @@ export default {
[ ` ${ prefixCls } -without-column-header ` ] : ! showHeader ,
} ) ;
let columns = this . renderRowSelection ( ) ;
columns = this . renderColumnsDropdown ( columns, l ocale) ;
let columns = this . renderRowSelection ( prefixC ls, mergedL ocale) ;
columns = this . renderColumnsDropdown ( prefixCls, dropdownPrefixCls , columns , mergedL ocale) ;
columns = columns . map ( ( column , i ) => {
const newColumn = { ... column } ;
newColumn . key = this . getColumnKey ( newColumn , i ) ;
@ -1091,7 +1133,7 @@ export default {
key : 'table' ,
props : {
... restProps ,
customRow : this . onRow ,
customRow : ( record , index ) => this . onRow ( prefixCls , record , index ) ,
components : this . customComponents ,
prefixCls ,
data ,
@ -1099,7 +1141,7 @@ export default {
showHeader ,
expandIconColumnIndex ,
expandIconAsCell ,
emptyText : ! ( loading . props && loading . props . spinning ) && l ocale. emptyText ,
emptyText : ! ( loading . props && loading . props . spinning ) && mergedL ocale. emptyText ,
} ,
on : this . $listeners ,
class : classString ,
@ -1109,7 +1151,10 @@ export default {
} ,
render ( ) {
const { prefixCls } = this ;
const {
prefixCls : customizePrefixCls ,
dropdownPrefixCls : customizeDropdownPrefixCls ,
} = this ;
const data = this . getCurrentPageData ( ) ;
let loading = this . loading ;
@ -1124,12 +1169,20 @@ export default {
props : { ... loading } ,
} ;
}
const getPrefixCls = this . configProvider . getPrefixCls || ConfigConsumerProps . getPrefixCls ;
const renderEmpty = (
this . configProvider . renderEmpty &&
this . configProvider . renderEmpty ( )
) || ConfigConsumerProps . renderEmpty ;
const prefixCls = getPrefixCls ( 'table' , customizePrefixCls ) ;
const dropdownPrefixCls = getPrefixCls ( 'dropdown' , customizeDropdownPrefixCls ) ;
const table = (
< LocaleReceiver
componentName = "Table"
defaultLocale = { defaultLocale . Table }
children = { locale => this . renderTable ( locale , loading ) }
children = { locale => this . renderTable ( prefixCls, renderEmpty , dropdownPrefixCls , locale, loading ) }
/ >
) ;
@ -1149,9 +1202,9 @@ export default {
return (
< div class = { classNames ( ` ${ prefixCls } -wrapper ` ) } >
< Spin { ...spinProps } >
{ this . renderPagination ( 'top' ) }
{ this . renderPagination ( prefixCls , 'top' ) }
{ table }
{ this . renderPagination ( 'bottom' ) }
{ this . renderPagination ( prefixCls , 'bottom' ) }
< / Spin >
< / div >
) ;
wangxueliang
6 years ago