Title: {currentData.length} items
}
- footer={currentData => Footer: {currentData.length} items
}
- />
- ,
- document.getElementById('__react-content')
-);
diff --git a/components/vc-table/src/BaseTable.jsx b/components/vc-table/src/BaseTable.jsx
index c2d0811eb..93a624224 100644
--- a/components/vc-table/src/BaseTable.jsx
+++ b/components/vc-table/src/BaseTable.jsx
@@ -5,7 +5,8 @@ import TableHeader from './TableHeader'
import TableRow from './TableRow'
import ExpandableRow from './ExpandableRow'
import { mergeProps } from '../../_util/props-util'
-
+import { connect } from '../../_util/store'
+function noop () {}
const BaseTable = {
name: 'BaseTable',
props: {
@@ -34,18 +35,18 @@ const BaseTable = {
renderRows (renderData, indent, ancestorKeys = []) {
const {
- columnManager, components,
+ columnManager, sComponents: components,
prefixCls,
childrenColumnName,
rowClassName,
// rowRef,
$listeners: {
- rowClick: onRowClick,
- rowDoubleclick: onRowDoubleClick,
- rowContextmenu: onRowContextMenu,
- rowMouseenter: onRowMouseEnter,
- rowMouseleave: onRowMouseLeave,
- row: onRow,
+ rowClick: onRowClick = noop,
+ rowDoubleclick: onRowDoubleClick = noop,
+ rowContextmenu: onRowContextMenu = noop,
+ rowMouseenter: onRowMouseEnter = noop,
+ rowMouseleave: onRowMouseLeave = noop,
+ row: onRow = noop,
},
} = this.table
const { getRowKey, fixed, expander, isAnyColumnsFixed } = this
@@ -86,6 +87,7 @@ const BaseTable = {
},
key,
on: {
+ // ...expander.on,
rowClick: onRowClick,
expandedChange: expander.handleExpandChange,
},
@@ -148,7 +150,7 @@ const BaseTable = {
},
render () {
- const { components, prefixCls, scroll, data, getBodyWrapper } = this.table
+ const { sComponents: components, prefixCls, scroll, data, getBodyWrapper } = this.table
const { expander, tableClassName, hasHead, hasBody, fixed, columns } = this
const tableStyle = {}
@@ -186,4 +188,4 @@ const BaseTable = {
},
}
-export default BaseTable
+export default connect()(BaseTable)
diff --git a/components/vc-table/src/ColGroup.jsx b/components/vc-table/src/ColGroup.jsx
index 0df1afe27..9f169e57a 100644
--- a/components/vc-table/src/ColGroup.jsx
+++ b/components/vc-table/src/ColGroup.jsx
@@ -4,13 +4,14 @@ export default {
name: 'ColGroup',
props: {
fixed: PropTypes.string,
+ columns: PropTypes.array,
},
inject: {
table: { default: {}},
},
render () {
const { fixed, table } = this
- const { prefixCls, expandIconAsCell } = table
+ const { prefixCls, expandIconAsCell, columnManager } = table
let cols = []
@@ -26,18 +27,19 @@ export default {
let leafColumns
if (fixed === 'left') {
- leafColumns = table.columnManager.leftLeafColumns()
+ leafColumns = columnManager.leftLeafColumns()
} else if (fixed === 'right') {
- leafColumns = table.columnManager.rightLeafColumns()
+ leafColumns = columnManager.rightLeafColumns()
} else {
- leafColumns = table.columnManager.leafColumns()
+ leafColumns = columnManager.leafColumns()
}
cols = cols.concat(
leafColumns.map(c => {
+ const width = typeof c.width === 'number' ? `${c.width}px` : c.width
return (
)
})
diff --git a/components/vc-table/src/ColumnManager.js b/components/vc-table/src/ColumnManager.jsx
similarity index 99%
rename from components/vc-table/src/ColumnManager.js
rename to components/vc-table/src/ColumnManager.jsx
index a90756c14..b0696baaf 100644
--- a/components/vc-table/src/ColumnManager.js
+++ b/components/vc-table/src/ColumnManager.jsx
@@ -1,8 +1,7 @@
export default class ColumnManager {
- _cached = {}
-
constructor (columns, elements) {
this.columns = columns || this.normalize(elements)
+ this._cached = {}
}
isAnyColumnsFixed () {
diff --git a/components/vc-table/src/ExpandableRow.js b/components/vc-table/src/ExpandableRow.jsx
similarity index 56%
rename from components/vc-table/src/ExpandableRow.js
rename to components/vc-table/src/ExpandableRow.jsx
index 895cd886c..77d40a0b9 100644
--- a/components/vc-table/src/ExpandableRow.js
+++ b/components/vc-table/src/ExpandableRow.jsx
@@ -1,6 +1,7 @@
import PropTypes from '../../_util/vue-types'
import ExpandIcon from './ExpandIcon'
import BaseMixin from '../../_util/BaseMixin'
+import { connect } from '../../_util/store'
const ExpandableRow = {
mixins: [BaseMixin],
@@ -32,61 +33,62 @@ const ExpandableRow = {
beforeDestroy () {
this.handleDestroy()
},
+ methods: {
+ hasExpandIcon (columnIndex) {
+ const { expandRowByClick } = this
+ return !this.expandIconAsCell &&
+ !expandRowByClick &&
+ columnIndex === this.expandIconColumnIndex
+ },
- hasExpandIcon (columnIndex) {
- const { expandRowByClick } = this
- return !this.expandIconAsCell &&
- !expandRowByClick &&
- columnIndex === this.expandIconColumnIndex
- },
+ handleExpandChange (record, event) {
+ const { expanded, rowKey } = this
+ this.__emit('expandedChange', !expanded, record, event, rowKey)
+ },
- handleExpandChange (record, event) {
- const { expanded, rowKey } = this
- this.__emit('expandedChange', !expanded, record, event, rowKey)
- },
+ handleDestroy () {
+ const { rowKey, record } = this
+ this.__emit('expandedChange', false, record, null, rowKey, true)
+ },
- handleDestroy () {
- const { rowKey, record } = this
- this.__emit('expandedChange', false, record, null, rowKey, true)
- },
+ handleRowClick (record, index, event) {
+ const { expandRowByClick } = this
+ if (expandRowByClick) {
+ this.handleExpandChange(record, event)
+ }
+ this.__emit('rowClick', record, index, event)
+ },
- handleRowClick (record, index, event) {
- const { expandRowByClick } = this
- if (expandRowByClick) {
- this.handleExpandChange(record, event)
- }
- this.__emit('rowClick', record, index, event)
- },
+ renderExpandIcon () {
+ const { prefixCls, expanded, record, needIndentSpaced } = this
- renderExpandIcon () {
- const { prefixCls, expanded, record, needIndentSpaced } = this
+ return (
+
+ )
+ },
- return (
-
- )
- },
+ renderExpandIconCell (cells) {
+ if (!this.expandIconAsCell) {
+ return
+ }
+ const { prefixCls } = this
- renderExpandIconCell (cells) {
- if (!this.expandIconAsCell) {
- return
- }
- const { prefixCls } = this
-
- cells.push(
-
- {this.renderExpandIcon()}
- |
- )
+ cells.push(
+
+ {this.renderExpandIcon()}
+ |
+ )
+ },
},
render () {
@@ -103,7 +105,6 @@ const ExpandableRow = {
this.expandIconColumnIndex = fixed !== 'right' ? this.expandIconColumnIndex : -1
const childrenData = record[childrenColumnName]
this.expandable = !!(childrenData || expandedRowRender)
-
const expandableRowProps = {
props: {
indentSize,
diff --git a/components/vc-table/src/ExpandableTable.js b/components/vc-table/src/ExpandableTable.js
deleted file mode 100644
index 025a59872..000000000
--- a/components/vc-table/src/ExpandableTable.js
+++ /dev/null
@@ -1,223 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { connect } from 'mini-store'
-import TableRow from './TableRow'
-import { remove } from './utils'
-
-class ExpandableTable extends React.Component {
- static propTypes = {
- expandIconAsCell: PropTypes.bool,
- expandedRowKeys: PropTypes.array,
- expandedRowClassName: PropTypes.func,
- defaultExpandAllRows: PropTypes.bool,
- defaultExpandedRowKeys: PropTypes.array,
- expandIconColumnIndex: PropTypes.number,
- expandedRowRender: PropTypes.func,
- childrenColumnName: PropTypes.string,
- indentSize: PropTypes.number,
- onExpand: PropTypes.func,
- onExpandedRowsChange: PropTypes.func,
- columnManager: PropTypes.object.isRequired,
- store: PropTypes.object.isRequired,
- prefixCls: PropTypes.string.isRequired,
- data: PropTypes.array,
- children: PropTypes.func.isRequired,
- }
-
- static defaultProps = {
- expandIconAsCell: false,
- expandedRowClassName: () => '',
- expandIconColumnIndex: 0,
- defaultExpandAllRows: false,
- defaultExpandedRowKeys: [],
- childrenColumnName: 'children',
- indentSize: 15,
- onExpand () {},
- onExpandedRowsChange () {},
- }
-
- constructor (props) {
- super(props)
-
- const {
- data,
- childrenColumnName,
- defaultExpandAllRows,
- expandedRowKeys,
- defaultExpandedRowKeys,
- getRowKey,
- } = props
-
- let finnalExpandedRowKeys = []
- let rows = [...data]
-
- if (defaultExpandAllRows) {
- for (let i = 0; i < rows.length; i++) {
- const row = rows[i]
- finnalExpandedRowKeys.push(getRowKey(row, i))
- rows = rows.concat(row[childrenColumnName] || [])
- }
- } else {
- finnalExpandedRowKeys = expandedRowKeys || defaultExpandedRowKeys
- }
-
- this.columnManager = props.columnManager
- this.store = props.store
-
- this.store.setState({
- expandedRowsHeight: {},
- expandedRowKeys: finnalExpandedRowKeys,
- })
- }
-
- componentWillReceiveProps (nextProps) {
- if ('expandedRowKeys' in nextProps) {
- this.store.setState({
- expandedRowKeys: nextProps.expandedRowKeys,
- })
- }
- }
-
- handleExpandChange = (expanded, record, event, rowKey, destroy = false) => {
- if (event) {
- event.preventDefault()
- event.stopPropagation()
- }
-
- const { onExpandedRowsChange, onExpand } = this.props
- let { expandedRowKeys } = this.store.getState()
-
- if (expanded) {
- // row was expaned
- expandedRowKeys = [...expandedRowKeys, rowKey]
- } else {
- // row was collapse
- const expandedRowIndex = expandedRowKeys.indexOf(rowKey)
- if (expandedRowIndex !== -1) {
- expandedRowKeys = remove(expandedRowKeys, rowKey)
- }
- }
-
- if (!this.props.expandedRowKeys) {
- this.store.setState({ expandedRowKeys })
- }
-
- onExpandedRowsChange(expandedRowKeys)
- if (!destroy) {
- onExpand(expanded, record)
- }
- }
-
- renderExpandIndentCell = (rows, fixed) => {
- const { prefixCls, expandIconAsCell } = this.props
- if (!expandIconAsCell || fixed === 'right' || !rows.length) {
- return
- }
-
- const iconColumn = {
- key: 'rc-table-expand-icon-cell',
- className: `${prefixCls}-expand-icon-th`,
- title: '',
- rowSpan: rows.length,
- }
-
- rows[0].unshift({ ...iconColumn, column: iconColumn })
- }
-
- renderExpandedRow (record, index, render, className, ancestorKeys, indent, fixed) {
- const { prefixCls, expandIconAsCell, indentSize } = this.props
- let colCount
- if (fixed === 'left') {
- colCount = this.columnManager.leftLeafColumns().length
- } else if (fixed === 'right') {
- colCount = this.columnManager.rightLeafColumns().length
- } else {
- colCount = this.columnManager.leafColumns().length
- }
- const columns = [{
- key: 'extra-row',
- render: () => ({
- props: {
- colSpan: colCount,
- },
- children: fixed !== 'right' ? render(record, index, indent) : ' ',
- }),
- }]
- if (expandIconAsCell && fixed !== 'right') {
- columns.unshift({
- key: 'expand-icon-placeholder',
- render: () => null,
- })
- }
- const parentKey = ancestorKeys[ancestorKeys.length - 1]
- const rowKey = `${parentKey}-extra-row`
- const components = {
- body: {
- row: 'tr',
- cell: 'td',
- },
- }
-
- return (
-
- )
- }
-
- renderRows = (renderRows, rows, record, index, indent, fixed, parentKey, ancestorKeys) => {
- const { expandedRowClassName, expandedRowRender, childrenColumnName } = this.props
- const childrenData = record[childrenColumnName]
- const nextAncestorKeys = [...ancestorKeys, parentKey]
- const nextIndent = indent + 1
-
- if (expandedRowRender) {
- rows.push(
- this.renderExpandedRow(
- record,
- index,
- expandedRowRender,
- expandedRowClassName(record, index, indent),
- nextAncestorKeys,
- nextIndent,
- fixed,
- ),
- )
- }
-
- if (childrenData) {
- rows.push(
- ...renderRows(
- childrenData,
- nextIndent,
- nextAncestorKeys,
- )
- )
- }
- }
-
- render () {
- const { data, childrenColumnName, children } = this.props
- const needIndentSpaced = data.some(record => record[childrenColumnName])
-
- return children({
- props: this.props,
- needIndentSpaced,
- renderRows: this.renderRows,
- handleExpandChange: this.handleExpandChange,
- renderExpandIndentCell: this.renderExpandIndentCell,
- })
- }
-}
-
-export default connect()(ExpandableTable)
diff --git a/components/vc-table/src/ExpandableTable.jsx b/components/vc-table/src/ExpandableTable.jsx
new file mode 100644
index 000000000..8308699a8
--- /dev/null
+++ b/components/vc-table/src/ExpandableTable.jsx
@@ -0,0 +1,223 @@
+import PropTypes from '../../_util/vue-types'
+import BaseMixin from '../../_util/BaseMixin'
+import { connect } from '../../_util/store'
+import TableRow from './TableRow'
+import { remove } from './utils'
+import { initDefaultProps, getOptionProps } from '../../_util/props-util'
+
+export const ExpandableTableProps = () => ({
+ expandIconAsCell: PropTypes.bool,
+ expandedRowKeys: PropTypes.array,
+ expandedRowClassName: PropTypes.func,
+ defaultExpandAllRows: PropTypes.bool,
+ defaultExpandedRowKeys: PropTypes.array,
+ expandIconColumnIndex: PropTypes.number,
+ expandedRowRender: PropTypes.func,
+ childrenColumnName: PropTypes.string,
+ indentSize: PropTypes.number,
+ // onExpand: PropTypes.func,
+ // onExpandedRowsChange: PropTypes.func,
+ columnManager: PropTypes.object.isRequired,
+ store: PropTypes.object.isRequired,
+ prefixCls: PropTypes.string.isRequired,
+ data: PropTypes.array,
+ getRowKey: PropTypes.func,
+})
+
+const ExpandableTable = {
+ name: 'ExpandableTable',
+ mixins: [BaseMixin],
+ props: initDefaultProps(ExpandableTableProps(), {
+ expandIconAsCell: false,
+ expandedRowClassName: () => '',
+ expandIconColumnIndex: 0,
+ defaultExpandAllRows: false,
+ defaultExpandedRowKeys: [],
+ childrenColumnName: 'children',
+ indentSize: 15,
+ }),
+
+ data () {
+ const {
+ data,
+ childrenColumnName,
+ defaultExpandAllRows,
+ expandedRowKeys,
+ defaultExpandedRowKeys,
+ getRowKey,
+ } = this
+
+ let finnalExpandedRowKeys = []
+ let rows = [...data]
+
+ if (defaultExpandAllRows) {
+ for (let i = 0; i < rows.length; i++) {
+ const row = rows[i]
+ finnalExpandedRowKeys.push(getRowKey(row, i))
+ rows = rows.concat(row[childrenColumnName] || [])
+ }
+ } else {
+ finnalExpandedRowKeys = expandedRowKeys || defaultExpandedRowKeys
+ }
+
+ // this.columnManager = props.columnManager
+ // this.store = props.store
+
+ this.store.setState({
+ expandedRowsHeight: {},
+ expandedRowKeys: finnalExpandedRowKeys,
+ })
+ return {}
+ },
+ watch: {
+ expandedRowKeys (val) {
+ this.store.setState({
+ expandedRowKeys: val,
+ })
+ },
+ },
+ methods: {
+ handleExpandChange (expanded, record, event, rowKey, destroy = false) {
+ if (event) {
+ event.preventDefault()
+ event.stopPropagation()
+ }
+
+ let { expandedRowKeys } = this.store.getState()
+
+ if (expanded) {
+ // row was expaned
+ expandedRowKeys = [...expandedRowKeys, rowKey]
+ } else {
+ // row was collapse
+ const expandedRowIndex = expandedRowKeys.indexOf(rowKey)
+ if (expandedRowIndex !== -1) {
+ expandedRowKeys = remove(expandedRowKeys, rowKey)
+ }
+ }
+
+ if (!this.expandedRowKeys) {
+ this.store.setState({ expandedRowKeys })
+ }
+ this.__emit('expandedRowsChange', expandedRowKeys)
+ if (!destroy) {
+ this.__emit('expand', expanded, record)
+ }
+ },
+
+ renderExpandIndentCell (rows, fixed) {
+ const { prefixCls, expandIconAsCell } = this
+ if (!expandIconAsCell || fixed === 'right' || !rows.length) {
+ return
+ }
+
+ const iconColumn = {
+ key: 'rc-table-expand-icon-cell',
+ className: `${prefixCls}-expand-icon-th`,
+ title: '',
+ rowSpan: rows.length,
+ }
+
+ rows[0].unshift({ ...iconColumn, column: iconColumn })
+ },
+
+ renderExpandedRow (record, index, render, className, ancestorKeys, indent, fixed) {
+ const { prefixCls, expandIconAsCell, indentSize } = this
+ let colCount
+ if (fixed === 'left') {
+ colCount = this.columnManager.leftLeafColumns().length
+ } else if (fixed === 'right') {
+ colCount = this.columnManager.rightLeafColumns().length
+ } else {
+ colCount = this.columnManager.leafColumns().length
+ }
+ const columns = [{
+ key: 'extra-row',
+ render: () => ({
+ props: {
+ colSpan: colCount,
+ },
+ children: fixed !== 'right' ? render(record, index, indent) : ' ',
+ }),
+ }]
+ if (expandIconAsCell && fixed !== 'right') {
+ columns.unshift({
+ key: 'expand-icon-placeholder',
+ render: () => null,
+ })
+ }
+ const parentKey = ancestorKeys[ancestorKeys.length - 1]
+ const rowKey = `${parentKey}-extra-row`
+ const components = {
+ body: {
+ row: 'tr',
+ cell: 'td',
+ },
+ }
+
+ return (
+
+ )
+ },
+
+ renderRows (renderRows, rows, record, index, indent, fixed, parentKey, ancestorKeys) {
+ const { expandedRowClassName, expandedRowRender, childrenColumnName } = this
+ const childrenData = record[childrenColumnName]
+ const nextAncestorKeys = [...ancestorKeys, parentKey]
+ const nextIndent = indent + 1
+
+ if (expandedRowRender) {
+ rows.push(
+ this.renderExpandedRow(
+ record,
+ index,
+ expandedRowRender,
+ expandedRowClassName(record, index, indent),
+ nextAncestorKeys,
+ nextIndent,
+ fixed,
+ ),
+ )
+ }
+
+ if (childrenData) {
+ rows.push(
+ ...renderRows(
+ childrenData,
+ nextIndent,
+ nextAncestorKeys,
+ )
+ )
+ }
+ },
+ },
+
+ render () {
+ const { data, childrenColumnName, $scopedSlots, $listeners } = this
+ const props = getOptionProps(this)
+ const needIndentSpaced = data.some(record => record[childrenColumnName])
+
+ return $scopedSlots.default && $scopedSlots.default({
+ props,
+ on: $listeners,
+ needIndentSpaced,
+ renderRows: this.renderRows,
+ handleExpandChange: this.handleExpandChange,
+ renderExpandIndentCell: this.renderExpandIndentCell,
+ })
+ },
+}
+
+export default connect()(ExpandableTable)
diff --git a/components/vc-table/src/HeadTable.jsx b/components/vc-table/src/HeadTable.jsx
index e2095b364..99c6468f0 100644
--- a/components/vc-table/src/HeadTable.jsx
+++ b/components/vc-table/src/HeadTable.jsx
@@ -14,6 +14,9 @@ export default {
handleBodyScrollLeft: PropTypes.func.isRequired,
expander: PropTypes.object.isRequired,
},
+ inject: {
+ table: { default: {}},
+ },
render () {
const { columns, fixed, tableClassName, handleBodyScrollLeft, expander, table } = this
const { prefixCls, scroll, showHeader } = table
diff --git a/components/vc-table/src/Table.js b/components/vc-table/src/Table.js
deleted file mode 100644
index 566e522de..000000000
--- a/components/vc-table/src/Table.js
+++ /dev/null
@@ -1,475 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { debounce, warningOnce } from './utils'
-import shallowequal from 'shallowequal'
-import addEventListener from 'rc-util/lib/Dom/addEventListener'
-import { Provider, create } from 'mini-store'
-import merge from 'lodash/merge'
-import ColumnManager from './ColumnManager'
-import classes from 'component-classes'
-import HeadTable from './HeadTable'
-import BodyTable from './BodyTable'
-import ExpandableTable from './ExpandableTable'
-
-export default class Table extends React.Component {
- static propTypes = {
- data: PropTypes.array,
- useFixedHeader: PropTypes.bool,
- columns: PropTypes.array,
- prefixCls: PropTypes.string,
- bodyStyle: PropTypes.object,
- style: PropTypes.object,
- rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
- rowClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
- onRow: PropTypes.func,
- onHeaderRow: PropTypes.func,
- onRowClick: PropTypes.func,
- onRowDoubleClick: PropTypes.func,
- onRowContextMenu: PropTypes.func,
- onRowMouseEnter: PropTypes.func,
- onRowMouseLeave: PropTypes.func,
- showHeader: PropTypes.bool,
- title: PropTypes.func,
- id: PropTypes.string,
- footer: PropTypes.func,
- emptyText: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
- scroll: PropTypes.object,
- rowRef: PropTypes.func,
- getBodyWrapper: PropTypes.func,
- children: PropTypes.node,
- components: PropTypes.shape({
- table: PropTypes.any,
- header: PropTypes.shape({
- wrapper: PropTypes.any,
- row: PropTypes.any,
- cell: PropTypes.any,
- }),
- body: PropTypes.shape({
- wrapper: PropTypes.any,
- row: PropTypes.any,
- cell: PropTypes.any,
- }),
- }),
- ...ExpandableTable.PropTypes,
- }
-
- static childContextTypes = {
- table: PropTypes.any,
- components: PropTypes.any,
- }
-
- static defaultProps = {
- data: [],
- useFixedHeader: false,
- rowKey: 'key',
- rowClassName: () => '',
- onRow () {},
- onHeaderRow () {},
- prefixCls: 'rc-table',
- bodyStyle: {},
- style: {},
- showHeader: true,
- scroll: {},
- rowRef: () => null,
- emptyText: () => 'No Data',
- }
-
- constructor (props) {
- super(props);
-
- [
- 'onRowClick',
- 'onRowDoubleClick',
- 'onRowContextMenu',
- 'onRowMouseEnter',
- 'onRowMouseLeave',
- ].forEach(name => {
- warningOnce(
- props[name] === undefined,
- `${name} is deprecated, please use onRow instead.`,
- )
- })
-
- warningOnce(
- props.getBodyWrapper === undefined,
- 'getBodyWrapper is deprecated, please use custom components instead.',
- )
-
- this.columnManager = new ColumnManager(props.columns, props.children)
-
- this.store = create({
- currentHoverKey: null,
- fixedColumnsHeadRowsHeight: [],
- fixedColumnsBodyRowsHeight: [],
- })
-
- this.setScrollPosition('left')
-
- this.debouncedWindowResize = debounce(this.handleWindowResize, 150)
- }
-
- getChildContext () {
- return {
- table: {
- props: this.props,
- columnManager: this.columnManager,
- saveRef: this.saveRef,
- components: merge({
- table: 'table',
- header: {
- wrapper: 'thead',
- row: 'tr',
- cell: 'th',
- },
- body: {
- wrapper: 'tbody',
- row: 'tr',
- cell: 'td',
- },
- }, this.props.components),
- },
- }
- }
-
- componentDidMount () {
- if (this.columnManager.isAnyColumnsFixed()) {
- this.handleWindowResize()
- this.resizeEvent = addEventListener(
- window, 'resize', this.debouncedWindowResize
- )
- }
- }
-
- componentWillReceiveProps (nextProps) {
- if (nextProps.columns && nextProps.columns !== this.props.columns) {
- this.columnManager.reset(nextProps.columns)
- } else if (nextProps.children !== this.props.children) {
- this.columnManager.reset(null, nextProps.children)
- }
- }
-
- componentDidUpdate (prevProps) {
- if (this.columnManager.isAnyColumnsFixed()) {
- this.handleWindowResize()
- if (!this.resizeEvent) {
- this.resizeEvent = addEventListener(
- window, 'resize', this.debouncedWindowResize
- )
- }
- }
- // when table changes to empty, reset scrollLeft
- if (prevProps.data.length > 0 && this.props.data.length === 0 && this.hasScrollX()) {
- this.resetScrollX()
- }
- }
-
- componentWillUnmount () {
- if (this.resizeEvent) {
- this.resizeEvent.remove()
- }
- if (this.debouncedWindowResize) {
- this.debouncedWindowResize.cancel()
- }
- }
-
- getRowKey = (record, index) => {
- const rowKey = this.props.rowKey
- const key = (typeof rowKey === 'function')
- ? rowKey(record, index) : record[rowKey]
- warningOnce(
- key !== undefined,
- 'Each record in table should have a unique `key` prop,' +
- 'or set `rowKey` to an unique primary key.'
- )
- return key === undefined ? index : key
- }
-
- setScrollPosition (position) {
- this.scrollPosition = position
- if (this.tableNode) {
- const { prefixCls } = this.props
- if (position === 'both') {
- classes(this.tableNode)
- .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
- .add(`${prefixCls}-scroll-position-left`)
- .add(`${prefixCls}-scroll-position-right`)
- } else {
- classes(this.tableNode)
- .remove(new RegExp(`^${prefixCls}-scroll-position-.+$`))
- .add(`${prefixCls}-scroll-position-${position}`)
- }
- }
- }
-
- setScrollPositionClassName () {
- const node = this.bodyTable
- const scrollToLeft = node.scrollLeft === 0
- const scrollToRight = node.scrollLeft + 1 >=
- node.children[0].getBoundingClientRect().width -
- node.getBoundingClientRect().width
- if (scrollToLeft && scrollToRight) {
- this.setScrollPosition('both')
- } else if (scrollToLeft) {
- this.setScrollPosition('left')
- } else if (scrollToRight) {
- this.setScrollPosition('right')
- } else if (this.scrollPosition !== 'middle') {
- this.setScrollPosition('middle')
- }
- }
-
- handleWindowResize = () => {
- this.syncFixedTableRowHeight()
- this.setScrollPositionClassName()
- }
-
- syncFixedTableRowHeight = () => {
- const tableRect = this.tableNode.getBoundingClientRect()
- // If tableNode's height less than 0, suppose it is hidden and don't recalculate rowHeight.
- // see: https://github.com/ant-design/ant-design/issues/4836
- if (tableRect.height !== undefined && tableRect.height <= 0) {
- return
- }
- const { prefixCls } = this.props
- const headRows = this.headTable
- ? this.headTable.querySelectorAll('thead')
- : this.bodyTable.querySelectorAll('thead')
- const bodyRows = this.bodyTable.querySelectorAll(`.${prefixCls}-row`) || []
- const fixedColumnsHeadRowsHeight = [].map.call(
- headRows, row => row.getBoundingClientRect().height || 'auto'
- )
- const fixedColumnsBodyRowsHeight = [].map.call(
- bodyRows, row => row.getBoundingClientRect().height || 'auto'
- )
- const state = this.store.getState()
- if (shallowequal(state.fixedColumnsHeadRowsHeight, fixedColumnsHeadRowsHeight) &&
- shallowequal(state.fixedColumnsBodyRowsHeight, fixedColumnsBodyRowsHeight)) {
- return
- }
-
- this.store.setState({
- fixedColumnsHeadRowsHeight,
- fixedColumnsBodyRowsHeight,
- })
- }
-
- resetScrollX () {
- if (this.headTable) {
- this.headTable.scrollLeft = 0
- }
- if (this.bodyTable) {
- this.bodyTable.scrollLeft = 0
- }
- }
-
- hasScrollX () {
- const { scroll = {}} = this.props
- return 'x' in scroll
- }
-
- handleBodyScrollLeft = (e) => {
- // Fix https://github.com/ant-design/ant-design/issues/7635
- if (e.currentTarget !== e.target) {
- return
- }
- const target = e.target
- const { scroll = {}} = this.props
- const { headTable, bodyTable } = this
- if (target.scrollLeft !== this.lastScrollLeft && scroll.x) {
- if (target === bodyTable && headTable) {
- headTable.scrollLeft = target.scrollLeft
- } else if (target === headTable && bodyTable) {
- bodyTable.scrollLeft = target.scrollLeft
- }
- this.setScrollPositionClassName()
- }
- // Remember last scrollLeft for scroll direction detecting.
- this.lastScrollLeft = target.scrollLeft
- }
-
- handleBodyScrollTop = (e) => {
- const target = e.target
- const { scroll = {}} = this.props
- const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this
- if (target.scrollTop !== this.lastScrollTop && scroll.y && target !== headTable) {
- const scrollTop = target.scrollTop
- if (fixedColumnsBodyLeft && target !== fixedColumnsBodyLeft) {
- fixedColumnsBodyLeft.scrollTop = scrollTop
- }
- if (fixedColumnsBodyRight && target !== fixedColumnsBodyRight) {
- fixedColumnsBodyRight.scrollTop = scrollTop
- }
- if (bodyTable && target !== bodyTable) {
- bodyTable.scrollTop = scrollTop
- }
- }
- // Remember last scrollTop for scroll direction detecting.
- this.lastScrollTop = target.scrollTop
- }
-
- handleBodyScroll = (e) => {
- this.handleBodyScrollLeft(e)
- this.handleBodyScrollTop(e)
- }
-
- saveRef = (name) => (node) => {
- this[name] = node
- }
-
- renderMainTable () {
- const { scroll, prefixCls } = this.props
- const isAnyColumnsFixed = this.columnManager.isAnyColumnsFixed()
- const scrollable = isAnyColumnsFixed || scroll.x || scroll.y
-
- const table = [
- this.renderTable({
- columns: this.columnManager.groupedColumns(),
- isAnyColumnsFixed,
- }),
- this.renderEmptyText(),
- this.renderFooter(),
- ]
-
- return scrollable ? (
- {table}
- ) : table
- }
-
- renderLeftFixedTable () {
- const { prefixCls } = this.props
-
- return (
-
- {this.renderTable({
- columns: this.columnManager.leftColumns(),
- fixed: 'left',
- })}
-
- )
- }
-
- renderRightFixedTable () {
- const { prefixCls } = this.props
-
- return (
-
- {this.renderTable({
- columns: this.columnManager.rightColumns(),
- fixed: 'right',
- })}
-
- )
- }
-
- renderTable (options) {
- const { columns, fixed, isAnyColumnsFixed } = options
- const { prefixCls, scroll = {}} = this.props
- const tableClassName = (scroll.x || fixed) ? `${prefixCls}-fixed` : ''
-
- const headTable = (
-
- )
-
- const bodyTable = (
-
- )
-
- return [headTable, bodyTable]
- }
-
- renderTitle () {
- const { title, prefixCls } = this.props
- return title ? (
-
- {title(this.props.data)}
-
- ) : null
- }
-
- renderFooter () {
- const { footer, prefixCls } = this.props
- return footer ? (
-
- {footer(this.props.data)}
-
- ) : null
- }
-
- renderEmptyText () {
- const { emptyText, prefixCls, data } = this.props
- if (data.length) {
- return null
- }
- const emptyClassName = `${prefixCls}-placeholder`
- return (
-
- {(typeof emptyText === 'function') ? emptyText() : emptyText}
-
- )
- }
-
- render () {
- const props = this.props
- const prefixCls = props.prefixCls
-
- let className = props.prefixCls
- if (props.className) {
- className += ` ${props.className}`
- }
- if (props.useFixedHeader || (props.scroll && props.scroll.y)) {
- className += ` ${prefixCls}-fixed-header`
- }
- if (this.scrollPosition === 'both') {
- className += ` ${prefixCls}-scroll-position-left ${prefixCls}-scroll-position-right`
- } else {
- className += ` ${prefixCls}-scroll-position-${this.scrollPosition}`
- }
- const hasLeftFixed = this.columnManager.isAnyColumnsLeftFixed()
- const hasRightFixed = this.columnManager.isAnyColumnsRightFixed()
-
- return (
-
-
- {(expander) => {
- this.expander = expander
- return (
-
- {this.renderTitle()}
-
- {this.renderMainTable()}
- {hasLeftFixed && this.renderLeftFixedTable()}
- {hasRightFixed && this.renderRightFixedTable()}
-
-
{table}
+ ) : table
+ },
+
+ renderLeftFixedTable () {
+ const { prefixCls } = this
+
+ return (
+
+ {this.renderTable({
+ columns: this.columnManager.leftColumns(),
+ fixed: 'left',
+ })}
+
+ )
+ },
+ renderRightFixedTable () {
+ const { prefixCls } = this
+
+ return (
+
+ {this.renderTable({
+ columns: this.columnManager.rightColumns(),
+ fixed: 'right',
+ })}
+
+ )
+ },
+
+ renderTable (options) {
+ const { columns, fixed, isAnyColumnsFixed } = options
+ const { prefixCls, scroll = {}} = this
+ const tableClassName = (scroll.x || fixed) ? `${prefixCls}-fixed` : ''
+
+ const headTable = (
+
+ )
+
+ const bodyTable = (
+
+ )
+
+ return [headTable, bodyTable]
+ },
+
+ renderTitle () {
+ const { title, prefixCls } = this
+ return title ? (
+
+ {title(this.props.data)}
+
+ ) : null
+ },
+
+ renderFooter () {
+ const { footer, prefixCls } = this
+ return footer ? (
+
+ ) : null
+ },
+
+ renderEmptyText () {
+ const { emptyText, prefixCls, data } = this
+ if (data.length) {
+ return null
+ }
+ const emptyClassName = `${prefixCls}-placeholder`
+ return (
+
+ {(typeof emptyText === 'function') ? emptyText() : emptyText}
+
+ )
+ },
+ },
+
+ render () {
+ const props = getOptionProps(this)
+ const { $listeners, columnManager, getRowKey } = this
+ const prefixCls = props.prefixCls
+
+ let className = props.prefixCls
+ if (props.useFixedHeader || (props.scroll && props.scroll.y)) {
+ className += ` ${prefixCls}-fixed-header`
+ }
+ if (this.scrollPosition === 'both') {
+ className += ` ${prefixCls}-scroll-position-left ${prefixCls}-scroll-position-right`
+ } else {
+ className += ` ${prefixCls}-scroll-position-${this.scrollPosition}`
+ }
+ const hasLeftFixed = columnManager.isAnyColumnsLeftFixed()
+ const hasRightFixed = columnManager.isAnyColumnsRightFixed()
+
+ const expandableTableProps = {
+ props: {
+ ...props,
+ columnManager,
+ getRowKey,
+ },
+ on: { ...$listeners },
+ scopedSlots: {
+ default: (expander) => {
+ this.expander = expander
+ return (
+
+ {this.renderTitle()}
+
+ {this.renderMainTable()}
+ {hasLeftFixed && this.renderLeftFixedTable()}
+ {hasRightFixed && this.renderRightFixedTable()}
+
+