Merge pull request #877 from XiaoMi/hotfix/#867

fix: #867
XiaoMi · Dec 31, 2019 · a3ff433 · a3ff433
2 parents 69ce6ba + cb66185
commit a3ff433
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 67 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # 更新日志
 
+## 2.6.4
+
+- 修复 `<Table />` 多级表头和多选同时使用的问题 [#867](https://github.com/XiaoMi/hiui/issues/867)
+- 修复 `<Tree />` onSave 入参不正确的问题 [#850](https://github.com/XiaoMi/hiui/issues/850)
+
 ## 2.6.3
 
 - 修复 `<Button />` target 属性不起作用的问题 [#837](https://github.com/XiaoMi/hiui/issues/837)

diff --git a/components/table/Body.js b/components/table/Body.js
@@ -42,15 +42,14 @@ class Row extends Component {
 
   render () {
     const {
-      selectedRowKeys,
       expand,
       k,
       parent,
       highlightRows
     } = this.props
     let classNames = {
       'table-row': true,
-      picked: selectedRowKeys.includes(k) || highlightRows.includes(k),
+      picked: highlightRows.includes(k),
       expand,
       test: 't'
     }
@@ -83,6 +82,7 @@ export default class Body extends Component {
 
   render () {
     let {columns, dataSource, cbs: {addExpand}, rowSelection = { }, highlightCols, advance, ...rest} = this.props
+
     columns = columns.filter(item => !item.hide)
     let selectedRowKeys = rowSelection.selectedRowKeys || []
     // 表头分组

diff --git a/components/table/Header.js b/components/table/Header.js
@@ -79,11 +79,10 @@ let HeaderCell = (props) => {
 
 let GroupCell = (props) => {
   let {item, index, contextMenu} = props
-
   return (
     <th colSpan={item.headColSpan} rowSpan={item.headRowSpan} key={'head-' + item.key || item.dataIndex || item.title} onContextMenu={(e) => contextMenu(e, item.key)}>
       <div style={{display: 'flex', alignItems: 'center'}}>&nbsp;
-        <div>{item.title}</div>
+        <div>{typeof item.title === 'function' ? item.title() : item.title}</div>
         {item.sorter && <Sorter {...props} col={item} index={index} kname={item.key} />}
         {item.serverSort && 'sirt'}
       </div>
@@ -132,6 +131,6 @@ export default class Header extends Component {
     if (origin && origin.url) {
       sc = false
     }
-    Menu.show(e, cbs, key, !!sc, size)
+    Menu.show(e, cbs, key, !!sc, size, this.props.headerColumns.length === 1)
   }
 }
diff --git a/components/table/index.js b/components/table/index.js
@@ -626,7 +626,7 @@ class Table extends Component {
     }
   }
 
-  getHeaderGroup (columns) {
+  getHeaderGroup (columns, rowSelection) {
     columns = columns.map((item) => {
       item.title = item.title || item.dataIndex
       item.key = item.key || item.dataIndex || item.title || item.id
@@ -635,6 +635,56 @@ class Table extends Component {
       }
       return item
     })
+    if (rowSelection) {
+      let {selectedRowKeys = [], dataName = 'key'} = rowSelection
+      columns.unshift({
+        width: '50px',
+        type: 'select',
+        key: 'hi-table-select-' + this.props.name,
+        title: () => {
+          let {getCheckboxProps = (record) => ({ disabled: false }), onChange} = rowSelection
+          return (
+            <Checkbox type='checkbox'
+              checked={selectedRowKeys.length === this.state.dataSource.filter(record => !getCheckboxProps(record).disabled).length && this.state.dataSource.filter(record => !getCheckboxProps(record).disabled).length > 0}
+              onChange={(e, checked) => {
+                let data = this.state.dataSource.filter(record => !getCheckboxProps(record).disabled)
+                let _selectedRowKeys = [...selectedRowKeys]
+                if (checked) {
+                  _selectedRowKeys.splice(0, selectedRowKeys.length)
+                  for (let i = 0; i < data.length; i++) {
+                    _selectedRowKeys.push(data[i][dataName])
+                  }
+                } else {
+                  _selectedRowKeys.splice(0, _selectedRowKeys.length)
+                }
+                onChange(_selectedRowKeys, data.filter(record => _selectedRowKeys.includes(record[dataName])))
+              }}
+            />
+          )
+        },
+        render: (text, record, index) => {
+          let {getCheckboxProps = (record) => ({ disabled: false }), onChange} = rowSelection
+          // todo dataName 是干嘛的不明白
+          return (
+            <Checkbox type='checkbox'
+              checked={selectedRowKeys.includes(record[dataName])}
+              disabled={getCheckboxProps(record).disabled}
+              onChange={(e, checked) => {
+                let data = this.state.dataSource.filter(record => !getCheckboxProps(record).disabled)
+                let _selectedRowKeys = [...selectedRowKeys]
+                if (checked) {
+                  _selectedRowKeys.push(record[dataName])
+                } else {
+                  _selectedRowKeys = _selectedRowKeys.filter(key => record[dataName] !== key)
+                }
+                onChange(_selectedRowKeys, data.filter(record => _selectedRowKeys.includes(record[dataName])))
+              }}
+              key={record[dataName]}
+            />
+          )
+        }
+      })
+    }
     let bodyColumns = []
     let headerColumns = []
 
@@ -698,60 +748,9 @@ class Table extends Component {
     let props = prop || this.props
     let leftFiexColumns = []
     let rightFixColumns = []
-    let [headerColumns, columns] = this.getHeaderGroup(c || props.columns)
-
-    let {rowSelection, scroll, name, scrollX} = props
+    let [headerColumns, columns] = this.getHeaderGroup(c || props.columns, props.rowSelection)
 
-    if (rowSelection) {
-      let {selectedRowKeys = [], dataName = 'key'} = rowSelection
-      columns.unshift({
-        width: '50px',
-        type: 'select',
-        key: 'hi-table-select-' + name,
-        title: () => {
-          let {getCheckboxProps = (record) => ({ disabled: false }), onChange} = rowSelection
-          return (
-            <Checkbox type='checkbox'
-              checked={selectedRowKeys.length === this.state.dataSource.filter(record => !getCheckboxProps(record).disabled).length && this.state.dataSource.filter(record => !getCheckboxProps(record).disabled).length > 0}
-              onChange={(e, checked) => {
-                let data = this.state.dataSource.filter(record => !getCheckboxProps(record).disabled)
-                if (checked) {
-                  selectedRowKeys.splice(0, selectedRowKeys.length)
-                  for (let i = 0; i < data.length; i++) {
-                    selectedRowKeys.push(data[i][dataName])
-                  }
-                } else {
-                  selectedRowKeys.splice(0, selectedRowKeys.length)
-                }
-                onChange(selectedRowKeys, data.filter(record => selectedRowKeys.includes(record[dataName])))
-              }}
-            />
-          )
-        },
-        render: (text, record, index) => {
-          let {getCheckboxProps = (record) => ({ disabled: false }), onChange} = rowSelection
-          // todo dataName 是干嘛的不明白
-
-          return (
-            <Checkbox type='checkbox'
-              che={selectedRowKeys.includes(record[dataName])}
-              checked={selectedRowKeys.includes(record[dataName])}
-              disabled={getCheckboxProps(record).disabled}
-              onChange={(e, checked) => {
-                let data = this.state.dataSource.filter(record => !getCheckboxProps(record).disabled)
-                if (checked) {
-                  selectedRowKeys.push(record[dataName])
-                } else {
-                  selectedRowKeys = selectedRowKeys.filter(key => record[dataName] !== key)
-                }
-                onChange(selectedRowKeys, data.filter(record => selectedRowKeys.includes(record[dataName])))
-              }}
-              key={record[dataName]}
-            />
-          )
-        }
-      })
-    }
+    let {scroll, scrollX} = props
 
     // TODO 这里的逻辑要优化
     if (scroll.x || scrollX || bool) {

diff --git a/components/table/menu/index.js b/components/table/menu/index.js
@@ -6,13 +6,13 @@ import prifix from '../prefix'
 
 class HeaderMenu extends Component {
   render () {
-    let {highlighCol, freezeCol, hideCol, index, freeze} = this.props
+    let {highlighCol, freezeCol, hideCol, index, freeze, canHideCol} = this.props
 
     return (
       <div className={prifix('table-header-menu')}>
         <p onClick={(e) => highlighCol(index)} >高亮</p>
         {freeze && <p onClick={(e) => freezeCol(index)} >冻结</p>}
-        <p onClick={(e) => hideCol(index)}>隐藏</p>
+        {canHideCol && <p onClick={(e) => hideCol(index)}>隐藏</p>}
       </div>
     )
   }
@@ -32,12 +32,12 @@ document.addEventListener('click', () => {
   setTimeout(hide, 0)
 })
 export default {
-  show (e, cbs, key, freeze, size = 'normal') {
+  show (e, cbs, key, freeze, size = 'normal', canHideCol) {
     div && hide()
     div = document.createElement('div')
     div.className = 'hi-table-header-menu-' + size
     div.style.zIndex = '99999'
-    ReactDOM.render(<HeaderMenu {...cbs} index={key} freeze={freeze} />, div)
+    ReactDOM.render(<HeaderMenu {...cbs} canHideCol={canHideCol} index={key} freeze={freeze} />, div)
     div.style.position = 'absolute'
     div.style.left = e.pageX + 'px'
     div.style.top = e.pageY + 'px'

diff --git a/components/tree/TreeNode.js b/components/tree/TreeNode.js
@@ -297,7 +297,7 @@ class TreeNode extends Component {
       editNodes: editNodes.filter(node => node.id !== itemId),
       editingNodes: editingNodes.filter(node => node.id !== itemId)
     })
-    const node = findNode(itemId, dataCache)
+    const node = findNode(itemId, _dataCache)
     this.props.onSave(node, _dataCache)
   }
   // 删除拖动的节点

diff --git a/docs/demo/table/section-group.jsx b/docs/demo/table/section-group.jsx
@@ -8,7 +8,10 @@ class Demo extends React.Component {
   constructor(props){
     super(props)
 
-
+    this.state =  {
+      selectedRowKeys: [], // Check here to configure the default column
+      data
+    }
     this.columns = [{
       title: 'Name',
       dataIndex: 'name',
@@ -92,8 +95,17 @@ class Demo extends React.Component {
     }
     this.data = data
   }
+
   render() {
-    return <Table columns={this.columns} data={this.data} fixTop={64} />
+    const { selectedRowKeys ,data} = this.state
+    const rowSelection = {
+      selectedRowKeys,
+      onChange: (selectedRowKeys,rows)=>{
+        this.setState({selectedRowKeys})
+      },
+      dataName:'age'
+    }
+    return <Table columns={this.columns} data={this.data} fixTop={64} rowSelection={rowSelection} />
   }
 }`
 

diff --git a/docs/zh-CN/components/changelog.mdx b/docs/zh-CN/components/changelog.mdx
@@ -1,5 +1,10 @@
 # 更新日志
 
+## 2.6.4
+
+- 修复 `<Table />` 多级表头和多选同时使用的问题 [#867](https://github.com/XiaoMi/hiui/issues/867)
+- 修复 `<Tree />` onSave 入参不正确的问题 [#850](https://github.com/XiaoMi/hiui/issues/850)
+
 ## 2.6.3
 
 - 修复 `<Button />` target 属性不起作用的问题 [#837](https://github.com/XiaoMi/hiui/issues/837)

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/hiui",
-  "version": "2.6.3",
+  "version": "2.6.4",
   "description": "HIUI for React",
   "scripts": {
     "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",