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()}
+
+
+
rowClassName and className
+
`row-${i}`}
+ expandedRowRender={record => extra: {record.a}
}
+ expandedRowClassName={(record, i) => `ex-row-${i}`}
+ data={data}
+ class='table'
+ />
+
+ )
+ },
+}
+
diff --git a/components/vc-table/src/ExpandableRow.jsx b/components/vc-table/src/ExpandableRow.jsx
index 77d40a0b9..cfd431197 100644
--- a/components/vc-table/src/ExpandableRow.jsx
+++ b/components/vc-table/src/ExpandableRow.jsx
@@ -112,6 +112,7 @@ const ExpandableRow = {
renderExpandIcon: this.renderExpandIcon,
renderExpandIconCell: this.renderExpandIconCell,
},
+
on: {
rowClick: this.handleRowClick,
},
diff --git a/components/vc-table/src/ExpandableTable.jsx b/components/vc-table/src/ExpandableTable.jsx
index 8308699a8..fc8402b3c 100644
--- a/components/vc-table/src/ExpandableTable.jsx
+++ b/components/vc-table/src/ExpandableTable.jsx
@@ -154,12 +154,11 @@ const ExpandableTable = {
cell: 'td',
},
}
-
return (
{}}
/>
)
},
diff --git a/components/vc-table/src/TableCell.jsx b/components/vc-table/src/TableCell.jsx
index 526f40ce9..8ae309633 100644
--- a/components/vc-table/src/TableCell.jsx
+++ b/components/vc-table/src/TableCell.jsx
@@ -1,5 +1,6 @@
import PropTypes from '../../_util/vue-types'
import get from 'lodash/get'
+import { isValidElement } from '../../_util/props-util'
export default {
name: 'TableCell',
@@ -16,7 +17,7 @@ export default {
methods: {
isInvalidRenderCellText (text) {
// debugger
- return text &&
+ return text && !isValidElement(text) &&
Object.prototype.toString.call(text) === '[object Object]'
},
@@ -28,7 +29,7 @@ export default {
},
},
- render () {
+ render (h) {
const {
record,
indentSize,
@@ -39,8 +40,8 @@ export default {
column,
component: BodyCell,
} = this
- const { dataIndex, render } = column
-
+ const { dataIndex, render, className = '' } = column
+ const cls = column.class || className
// We should return undefined if no dataIndex is specified, but in order to
// be compatible with object-path's behavior, we return the record object instead.
let text
@@ -51,22 +52,29 @@ export default {
} else {
text = get(record, dataIndex)
}
- let tdProps = {}
+ const tdProps = {
+ props: {},
+ attrs: {},
+ class: cls,
+ on: {
+ click: this.handleClick,
+ },
+ }
let colSpan
let rowSpan
if (render) {
- text = render(text, record, index)
+ text = render(h, text, record, index)
if (this.isInvalidRenderCellText(text)) {
- tdProps = text.props || tdProps
- colSpan = tdProps.colSpan
- rowSpan = tdProps.rowSpan
+ tdProps.attrs = text.attrs || text.props || {}
+ colSpan = tdProps.attrs.colSpan
+ rowSpan = tdProps.attrs.rowSpan
text = text.children
}
}
if (column.onCell) {
- tdProps = { ...tdProps, ...column.onCell(record) }
+ tdProps.attrs = { ...tdProps.attrs, ...column.onCell(record) }
}
// Fix https://github.com/ant-design/ant-design/issues/1202
@@ -88,11 +96,9 @@ export default {
if (column.align) {
tdProps.style = { textAlign: column.align }
}
- console.log('tdProps', tdProps)
return (
{indentText}
diff --git a/components/vc-table/src/TableHeaderRow.jsx b/components/vc-table/src/TableHeaderRow.jsx
index 6e23182a1..e87532b51 100644
--- a/components/vc-table/src/TableHeaderRow.jsx
+++ b/components/vc-table/src/TableHeaderRow.jsx
@@ -1,5 +1,6 @@
import PropTypes from '../../_util/vue-types'
import { connect } from '../../_util/store'
+import { mergeProps } from '../../_util/props-util'
const TableHeaderRow = {
props: {
@@ -25,17 +26,23 @@ const TableHeaderRow = {
{row.map((cell, i) => {
const { column, children, className, ...cellProps } = cell
+ const cls = cell.class || className
const customProps = column.onHeaderCell ? column.onHeaderCell(column) : {}
if (column.align) {
cellProps.style = { textAlign: column.align }
}
-
+ const headerCellProps = mergeProps({
+ attrs: {
+ ...cellProps,
+ },
+ class: cls,
+ }, {
+ ...customProps,
+ key: column.key || column.dataIndex || i,
+ })
return (
{children}
diff --git a/components/vc-table/src/TableRow.jsx b/components/vc-table/src/TableRow.jsx
index 1ea693648..a64570267 100644
--- a/components/vc-table/src/TableRow.jsx
+++ b/components/vc-table/src/TableRow.jsx
@@ -2,9 +2,9 @@ import PropTypes from '../../_util/vue-types'
import { connect } from '../../_util/store'
import TableCell from './TableCell'
import { warningOnce } from './utils'
-import { initDefaultProps } from '../../_util/props-util'
+import { initDefaultProps, mergeProps } from '../../_util/props-util'
import BaseMixin from '../../_util/BaseMixin'
-
+function noop () {}
const TableRow = {
name: 'TableRow',
mixins: [BaseMixin],
@@ -71,7 +71,11 @@ const TableRow = {
}
},
watch: {
-
+ visible (val) {
+ if (val) {
+ this.shouldRender = true
+ }
+ },
},
componentWillReceiveProps (nextProps) {
@@ -193,7 +197,7 @@ const TableRow = {
renderExpandIconCell,
$listeners,
} = this
- const { row: onRow } = $listeners
+ const { row: onRow = noop } = $listeners
const BodyRow = components.body.row
const BodyCell = components.body.cell
@@ -242,17 +246,19 @@ const TableRow = {
}
style = { ...style, ...customStyle }
- console.log('rowProps', rowProps)
+ const bodyRowProps = mergeProps({
+ on: {
+ click: this.onRowClick,
+ dblclick: this.onRowDoubleClick,
+ mouseenter: this.onMouseEnter,
+ mouseleave: this.onMouseLeave,
+ contextmenu: this.onContextMenu,
+ },
+ class: rowClassName,
+ }, { ...rowProps, style })
return (
{cells}
From 0cdf29011d2548f886eac9eaba6d321b1cb7a783 Mon Sep 17 00:00:00 2001
From: tjz <415800467@qq.com>
Date: Sun, 25 Mar 2018 22:24:57 +0800
Subject: [PATCH 8/8] update tooltip demo
---
components/tooltip/demo/placement.md | 48 ++++++++++++++--------------
1 file changed, 24 insertions(+), 24 deletions(-)
diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md
index 52e346684..dd248b3a6 100644
--- a/components/tooltip/demo/placement.md
+++ b/components/tooltip/demo/placement.md
@@ -12,84 +12,84 @@ The ToolTip has 12 placements choice.