github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update vc-table to 6.4.0

pull/309/head
tangjinzhou 2018-11-09 18:57:25 +08:00
parent 3ed9fc811d
commit 8f1ea64c35
16 changed files with 307 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/steps/__tests__/__snapshots__/demo.test.js.snap
View File

@ -51,7 +51,7 @@ exports[`renders ./components/steps/demo/error.md correctly 1`] = `
</div>
<div class="ant-steps-item ant-steps-item-error">
<div class="ant-steps-item-tail"></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-cross"></span></div>
<div class="ant-steps-item-icon"><span class="ant-steps-icon anticon anticon-close"></span></div>
<div class="ant-steps-item-content">
<div class="ant-steps-item-title">In Progress</div>
<div class="ant-steps-item-description">This is a description.</div>

8
components/table/__tests__/__snapshots__/Table.filter.test.js.snap
View File

@ -15,19 +15,19 @@ exports[`Table.filter renders filter correctly 1`] = `
</tr>
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Jack</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Lucy</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Tom</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
<td class="ant-table-column-has-filters"><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Jerry</td>
</tr>

4
components/table/__tests__/__snapshots__/Table.pagination.test.js.snap
View File

@ -5,11 +5,11 @@ exports[`Table.pagination renders pagination correctly 1`] = `
</tr>
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Jack</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Lucy</td>
</tr>

16
components/table/__tests__/__snapshots__/Table.rowSelection.test.js.snap
View File

@ -6,22 +6,22 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
</tr>
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<td class="ant-table-fixed-columns-in-body ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Jack</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td class="ant-table-fixed-columns-in-body ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Lucy</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<td class="ant-table-fixed-columns-in-body ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Tom</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
<td class="ant-table-fixed-columns-in-body ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Jerry</td>
@ -45,16 +45,16 @@ exports[`Table.rowSelection fix selection column on the left 1`] = `
</tr>
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="0">
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="3">
<td class="ant-table-selection-column"><span><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span></label></span></td>
</tr>
</tbody>

4
components/table/__tests__/__snapshots__/Table.test.js.snap
View File

@ -10,13 +10,13 @@ exports[`Table renders JSX correctly 1`] = `
</tr>
</thead>
<tbody class="ant-table-tbody">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="1">
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->John</td>
<td>Brown</td>
<td>32</td>
</tr>
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<tr class="ant-table-row ant-table-row-level-0" data-row-key="2">
<td><span class="ant-table-row-indent indent-level-0" style="padding-left: 0px;"></span>
<!---->Jim</td>
<td>Green</td>

384
components/table/__tests__/__snapshots__/demo.test.js.snap
View File

File diff suppressed because it is too large Load Diff

55
components/vc-table/demo/expandIcon.js Normal file
View File

@ -0,0 +1,55 @@
/* eslint-disable no-console,func-names,react/no-multi-comp */
import Table from '../index'
import '../assets/index.less'
const data = [
{ key: 0, a: '123' },
{ key: 1, a: 'cdd', b: 'edd' },
{ key: 2, a: '1333', c: 'eee', d: 2 },
]
const columns = [
{ title: 'title 1', dataIndex: 'a', key: 'a', width: 100 },
{ title: 'title 2', dataIndex: 'b', key: 'b', width: 100 },
{ title: 'title 3', dataIndex: 'c', key: 'c', width: 200 },
]
export default {
methods: {
CustomExpandIcon (props) {
let text
if (props.expanded) {
text = <span>&#8679; collapse</span>
} else {
text = <span>&#8681; expand</span>
}
return (
<a
class='expand-row-icon'
onClick={e => props.onExpand(props.record, e)}
style={{ color: 'blue', cursor: 'pointer' }}
>{text}</a>
)
},
onExpand (expanded, record) {
console.log('onExpand', expanded, record)
},
},
render () {
return (
<div>
<h2>expandIcon</h2>
<div>
<Table
columns={columns}
expandedRowRender={record => <p>extra: {record.a}</p>}
onExpand={this.onExpand}
expandIcon={this.CustomExpandIcon}
expandIconAsCell
data={data}
/>
</div>
</div>
)
},
}

4
components/vc-table/demo/rowAndCellClick.js
View File

@ -80,10 +80,10 @@ export default {
customRender: (text) => (
<span>{text} (Trigger Cell Click)</span>
),
customCell: (record) => ({
customCell: (record, index) => ({
on: {
click (e) {
console.log('Click cell', record, e.target)
console.log('Click cell', ` row ${index}`, record, e.target)
},
},
}),

2
components/vc-table/index.js
View File

@ -1,4 +1,4 @@
// base rc-table 6.2.9
// base rc-table 6.4.0
import T from './src/Table'
import Column from './src/Column'
import ColumnGroup from './src/ColumnGroup'

16
components/vc-table/src/ExpandableRow.jsx
View File

@ -25,6 +25,7 @@ const ExpandableRow = {
expandIconColumnIndex: PropTypes.number,
childrenColumnName: PropTypes.string,
expandedRowRender: PropTypes.func,
expandIcon: PropTypes.func,
// onExpandedChange: PropTypes.func.isRequired,
// onRowClick: PropTypes.func,
// children: PropTypes.func.isRequired,
@ -60,8 +61,17 @@ const ExpandableRow = {
},
renderExpandIcon () {
const { prefixCls, expanded, record, needIndentSpaced } = this
const { prefixCls, expanded, record, needIndentSpaced, expandIcon } = this
if (expandIcon) {
return expandIcon({
prefixCls,
expanded,
record,
needIndentSpaced,
expandable: this.expandable,
onExpand: this.handleExpandChange,
})
}
return (
<ExpandIcon
expandable={this.expandable}
@ -99,6 +109,7 @@ const ExpandableRow = {
record,
fixed,
$scopedSlots,
expanded,
} = this
this.tempExpandIconAsCell = fixed !== 'right' ? this.expandIconAsCell : false
@ -108,6 +119,7 @@ const ExpandableRow = {
const expandableRowProps = {
props: {
indentSize,
expanded, // not used in TableRow, but it's required to re-render TableRow when `expanded` changes
hasExpandIcon: this.hasExpandIcon,
renderExpandIcon: this.renderExpandIcon,
renderExpandIconCell: this.renderExpandIconCell,

1
components/vc-table/src/ExpandableTable.jsx
View File

@ -14,6 +14,7 @@ export const ExpandableTableProps = () => ({
defaultExpandedRowKeys: PropTypes.array,
expandIconColumnIndex: PropTypes.number,
expandedRowRender: PropTypes.func,
expandIcon: PropTypes.func,
childrenColumnName: PropTypes.string,
indentSize: PropTypes.number,
// onExpand: PropTypes.func,

8
components/vc-table/src/Table.jsx
View File

@ -63,6 +63,7 @@ export default {
childrenColumnName: PropTypes.string,
indentSize: PropTypes.number,
expandRowByClick: PropTypes.bool,
expandIcon: PropTypes.func,
}, {
data: [],
useFixedHeader: false,
@ -175,6 +176,13 @@ export default {
window, 'resize', this.debouncedWindowResize
)
}
// https://github.com/ant-design/ant-design/issues/11635
if (this.ref_headTable) {
this.ref_headTable.scrollLeft = 0
}
if (this.ref_bodyTable) {
this.ref_bodyTable.scrollLeft = 0
}
})
},

2
components/vc-table/src/TableCell.jsx
View File

@ -75,7 +75,7 @@ export default {
}
if (column.customCell) {
tdProps = mergeProps(tdProps, column.customCell(record))
tdProps = mergeProps(tdProps, column.customCell(record, index))
}
// Fix https://github.com/ant-design/ant-design/issues/1202

1
components/vc-table/src/TableHeader.jsx
View File

@ -64,6 +64,7 @@ export default {
{
rows.map((row, index) => (
<TableHeaderRow
prefixCls={prefixCls}
key={index}
index={index}
fixed={fixed}

7
components/vc-table/src/TableHeaderRow.jsx
View File

@ -1,3 +1,4 @@
import classNames from 'classnames'
import PropTypes from '../../_util/vue-types'
import { connect } from '../../_util/store'
import { mergeProps } from '../../_util/props-util'
@ -12,10 +13,11 @@ const TableHeaderRow = {
components: PropTypes.object,
height: PropTypes.any,
customHeaderRow: PropTypes.func,
prefixCls: PropTypes.prefixCls,
},
name: 'TableHeaderRow',
render (h) {
const { row, index, height, components, customHeaderRow } = this
const { row, index, height, components, customHeaderRow, prefixCls } = this
const HeaderRow = components.header.row
const HeaderCell = components.header.cell
const rowProps = customHeaderRow(row.map(cell => cell.column), index)
@ -43,6 +45,9 @@ const TableHeaderRow = {
if (column.align) {
headerCellProps.style = { ...customProps.style, textAlign: column.align }
headerCellProps.class = classNames(customProps.cls, column.class, column.className, {
[`${prefixCls}-align-${column.align}`]: !!column.align,
})
}
if (typeof HeaderCell === 'function') {

13
components/vc-table/src/TableRow.jsx
View File

@ -1,3 +1,4 @@
import classNames from 'classnames'
import PropTypes from '../../_util/vue-types'
import { connect } from '../../_util/store'
import TableCell from './TableCell'
@ -229,11 +230,8 @@ const TableRow = {
)
}
const rowClassName =
`${prefixCls} ${className} ${prefixCls}-level-${indent}`.trim()
const { class: customClass, className: customClassName, style: customStyle, ...rowProps } = customRow(record, index) || {}
const rowProps = customRow(record, index)
const customStyle = rowProps ? rowProps.style : {}
let style = { height: typeof height === 'number' ? `${height}px` : height }
if (!visible) {
@ -241,6 +239,13 @@ const TableRow = {
}
style = { ...style, ...customStyle }
const rowClassName = classNames(
prefixCls,
className,
`${prefixCls}-level-${indent}`,
customClassName,
customClass
)
const bodyRowProps = mergeProps({
on: {
click: this.onRowClick,