feat: table sortTitle opt

Author: tangjinzhou

components/_util/props-util.js

@@ -252,7 +252,7 @@ export function mergeProps () {
 }
 
 function isValidElement (element) {
-  return element && element.context && element.context._isVue
+  return element && typeof element === 'object' && ('componentOptions' in element && 'context' in element)
 }
 
 export {

components/table/Table.jsx

@@ -16,7 +16,7 @@ import Column from './Column'
 import ColumnGroup from './ColumnGroup'
 import createBodyRow from './createBodyRow'
 import { flatArray, treeMap, flatFilter } from './util'
-import { initDefaultProps, mergeProps, getOptionProps, getComponentFromProp, isValidElement } from '../_util/props-util'
+import { initDefaultProps, mergeProps, getOptionProps, isValidElement, filterEmpty, getAllProps } from '../_util/props-util'
 import BaseMixin from '../_util/BaseMixin'
 import {
   TableProps,
@@ -740,13 +740,7 @@ export default {
         let filterDropdown
         let sortButton
         let customHeaderCell = column.customHeaderCell
-        const { slots } = column
-        let title = column.title
-        if (title === undefined && slots && slots.title) {
-          title = this.$slots[slots.title]
-          title = title && title[0]
-        }
-        const sortTitle = this.getColumnTitle(title, {}) || locale.sortTitle
+        const sortTitle = this.getColumnTitle(column.title, {}) || locale.sortTitle
         const isSortColumn = this.isSortColumn(column)
         if ((column.filters && column.filters.length > 0) || column.filterDropdown) {
           const colFilters = key in filters ? filters[key] : []
@@ -842,11 +836,20 @@ export default {
         return
       }
       if (isValidElement(title)) {
-        debugger
-        const props = title.props
-        if (props && props.children) {
-          const { children } = props
-          return this.getColumnTitle(children, props)
+        const props = title.componentOptions
+        let children = null
+        if (props && props.children) { // for component
+          children = filterEmpty(props.children)
+        } else if (title.children) { // for dom
+          children = filterEmpty(title.children)
+        }
+        if (children && children.length === 1) {
+          children = children[0]
+          const attrs = getAllProps(title)
+          if (!children.tag && children.text) { // for textNode
+            children = children.text
+          }
+          return this.getColumnTitle(children, attrs)
         }
       } else {
         return parentNode.title || title

components/table/__tests__/Table.rowSelection.test.js

@@ -479,4 +479,149 @@ describe('Table.rowSelection', () => {
       expect(wrapper.findAll('thead tr div').at(0).text()).toBe('单选')
     })
   })
+
+  // https://github.com/ant-design/ant-design/issues/11384
+  it('should keep item even if in filter', async () => {
+    const filterColumns = [
+      {
+        title: 'Name',
+        dataIndex: 'name',
+        filters: [
+          {
+            text: 'Jack',
+            value: 'Jack',
+          },
+          {
+            text: 'Lucy',
+            value: 'Lucy',
+          },
+        ],
+        filterDropdownVisible: true,
+        onFilter: (value, record) => record.name.indexOf(value) === 0,
+      },
+    ]
+
+    const onChange = jest.fn()
+    const rowSelection = {
+      onChange,
+    }
+
+    const wrapper = mount(Table, {
+      propsData: {
+        columns: filterColumns, dataSource: data, rowSelection: rowSelection,
+      },
+      sync: false,
+    })
+
+    const dropdownWrapper = mount({
+      render () {
+        return wrapper.find({ name: 'Trigger' }).vm.getComponent()
+      },
+    }, { sync: false })
+
+    function clickItem () {
+      wrapper
+        .findAll('tbody .ant-table-selection-column .ant-checkbox-input')
+        .at(0)
+        .element.checked = true
+      wrapper
+        .findAll('tbody .ant-table-selection-column .ant-checkbox-input')
+        .at(0)
+        .trigger('change')
+    }
+
+    // Check Jack
+    dropdownWrapper
+      .findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
+      .at(0)
+      .trigger('click')
+    dropdownWrapper
+      .find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
+      .trigger('click')
+    await asyncExpect(() => {
+      expect(wrapper.findAll('tbody tr').length).toBe(1)
+    })
+    await asyncExpect(() => {
+      clickItem()
+    })
+    await asyncExpect(() => {
+      expect(onChange.mock.calls[0][0].length).toBe(1)
+      expect(onChange.mock.calls[0][1].length).toBe(1)
+    })
+
+    await asyncExpect(() => {
+      dropdownWrapper
+        .findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
+        .at(0)
+        .trigger('click')
+    })
+
+    await asyncExpect(() => {
+      // Check Lucy
+      dropdownWrapper
+        .findAll('.ant-dropdown-menu-item .ant-checkbox-wrapper')
+        .at(1)
+        .trigger('click')
+    })
+    await asyncExpect(() => {
+      dropdownWrapper
+        .find('.ant-table-filter-dropdown-btns .ant-table-filter-dropdown-link.confirm')
+        .trigger('click')
+    })
+    await asyncExpect(() => {
+      expect(wrapper.findAll('tbody tr').length).toBe(1)
+    })
+    await asyncExpect(() => {
+      clickItem()
+    })
+    await asyncExpect(() => {
+      expect(onChange.mock.calls[1][0].length).toBe(2)
+      expect(onChange.mock.calls[1][1].length).toBe(2)
+    })
+  })
+
+  it('render correctly when set childrenColumnName', async () => {
+    const newDatas = [
+      {
+        key: 1,
+        name: 'Jack',
+        children: [
+          {
+            key: 11,
+            name: 'John Brown',
+          },
+        ],
+      },
+      {
+        key: 2,
+        name: 'Lucy',
+        children: [
+          {
+            key: 21,
+            name: 'Lucy Brown',
+          },
+        ],
+      },
+    ]
+
+    const wrapper = mount(Table, {
+      propsData: {
+        columns: columns, dataSource: newDatas, rowSelection: {}, childrenColumnName: 'test',
+      },
+      sync: false,
+    })
+
+    const checkboxes = wrapper.findAll('input')
+    const checkboxAll = wrapper.find({ name: 'SelectionCheckboxAll' })
+
+    checkboxes.at(1).element.checked = true
+    checkboxes.at(1).trigger('change')
+    expect(checkboxAll.vm.$data).toEqual({ indeterminate: true, checked: false })
+
+    checkboxes.at(2).element.checked = true
+    checkboxes.at(2).trigger('change')
+    await asyncExpect(() => {
+      expect(checkboxAll.vm.$data).toEqual({ indeterminate: false, checked: true })
+    })
+  })
 })

components/table/__tests__/__snapshots__/Table.sorter.test.js.snap

@@ -4,7 +4,7 @@ exports[`Table.sorter renders sorter icon correctly 1`] = `
 <thead class="ant-table-thead">
   <tr>
     <th key="name" class="ant-table-column-has-actions ant-table-column-has-sorters">
-      <div title="Sort" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
+      <div title="Name" class="ant-table-column-sorters">Name<div class="ant-table-column-sorter"><i class="ant-table-column-sorter-up off anticon anticon-caret-up"><svg viewBox="0 0 1024 1024" data-icon="caret-up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
               <path d="M858.9 689L530.5 308.2c-9.4-10.9-27.5-10.9-37 0L165.1 689c-12.2 14.2-1.2 35 18.5 35h656.8c19.7 0 30.7-20.8 18.5-35z"></path>
             </svg></i><i class="ant-table-column-sorter-down off anticon anticon-caret-down"><svg viewBox="0 0 1024 1024" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
               <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>