fix vc-table

components/_util/props-util.js

@@ -166,10 +166,6 @@ export function getComponentName (opts) {
   return opts && (opts.Ctor.options.name || opts.tag)
 }
 
-export function isValidElement (ele) {
-  return !!ele.tag
-}
-
 export function isEmptyElement (ele) {
   return !(ele.tag || ele.text.trim() !== '')
 }
@@ -206,6 +202,11 @@ export function mergeProps () {
   return props
 }
 
+function isValidElement (element) {
+  const name = element.constructor.name
+  return element.tag && (name === 'VNode' || name === 'VueComponent')
+}
+
 export {
   hasProp,
   filterProps,
@@ -219,5 +220,6 @@ export {
   getValueByProp,
   parseStyleText,
   initDefaultProps,
+  isValidElement,
 }
 export default hasProp

components/vc-table/demo/className.js

@@ -0,0 +1,45 @@
+/* eslint-disable no-console,func-names,react/no-multi-comp */
+import Table from '../index'
+import '../assets/index.less'
+
+const data = [
+  { a: '123', key: '1' },
+  { a: 'cdd', b: 'edd', key: '2' },
+  { a: '1333', c: 'eee', d: 2, key: '3' },
+]
+export default {
+  render () {
+    const columns = [
+      { title: 'title1', dataIndex: 'a',
+        className: 'a',
+        key: 'a', width: 100 },
+      { id: '123', title: 'title2', dataIndex: 'b',
+        className: 'b',
+        key: 'b', width: 100 },
+      { title: 'title3', dataIndex: 'c',
+        className: 'c',
+        key: 'c', width: 200 },
+      {
+        title: 'Operations', dataIndex: '',
+        className: 'd',
+        key: 'd', render (h) {
+          return <a href='#'>Operations</a>
+        },
+      },
+    ]
+    return (
+      <div>
+        <h2>rowClassName and className</h2>
+        <Table
+          columns={columns}
+          rowClassName={(record, i) => `row-${i}`}
+          expandedRowRender={record => <p>extra: {record.a}</p>}
+          expandedRowClassName={(record, i) => `ex-row-${i}`}
+          data={data}
+          class='table'
+        />
+      </div>
+    )
+  },
+}
+

components/vc-table/src/ExpandableRow.jsx

@@ -112,6 +112,7 @@ const ExpandableRow = {
         renderExpandIcon: this.renderExpandIcon,
         renderExpandIconCell: this.renderExpandIconCell,
       },
+
       on: {
         rowClick: this.handleRowClick,
       },

components/vc-table/src/ExpandableTable.jsx

@@ -154,12 +154,11 @@ const ExpandableTable = {
           cell: 'td',
         },
       }
-
       return (
         <TableRow
           key={rowKey}
           columns={columns}
-          className={className}
+          class={className}
           rowKey={rowKey}
           ancestorKeys={ancestorKeys}
           prefixCls={`${prefixCls}-expanded-row`}
@@ -168,6 +167,7 @@ const ExpandableTable = {
           fixed={fixed}
           components={components}
           expandedRow
+          hasExpandIcon={() => {}}
         />
       )
     },

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
+        tdProps.attrs = text.attrs || text.props || {}
-        colSpan = tdProps.colSpan
+        colSpan = tdProps.attrs.colSpan
-        rowSpan = tdProps.rowSpan
+        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 (
       <BodyCell
-        onClick={this.handleClick}
         {...tdProps}
       >
         {indentText}

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 = {
       <HeaderRow {...rowProps} style={style}>
         {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 (
             <HeaderCell
-              {...cellProps}
+              {...headerCellProps}
-              class={className}
-              {...customProps}
-              key={column.key || column.dataIndex || i}
             >
               {children}
             </HeaderCell>

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 (
       <BodyRow
-        onClick={this.onRowClick}
+        {...bodyRowProps}
-        onDoubleclick={this.onRowDoubleClick}
-        onMouseenter={this.onMouseEnter}
-        onMouseleave={this.onMouseLeave}
-        onContextmenu={this.onContextMenu}
-        class={rowClassName}
-        {...rowProps}
-        style={style}
       >
         {cells}
       </BodyRow>