feat: table props treeCheckAll support 'half'

site/pages/components/Table/cn.md

@@ -36,7 +36,7 @@
 | hover | boolean | true | 数据行鼠标悬浮高亮效果 |
 | onTreeExpand | (openKeys: string[], data: object, expand: boolean) => void | 无 |  展开行，keys为展开的行 |
 | treeEmptyExpand | boolean | false | 树形表格子数据为空时依然展示展开按钮 |
-| treeCheckAll | boolean | false | 全选时是否将子孙数据选中 |
+| treeCheckAll | boolean \| 'half' | false | 全选时是否将子孙数据选中, 传'half'返回选中和半选的数据|
 | onSortCancel | () => void | 无 | 排序取消事件 |
 | radio | boolean | false | 是否单选 |
 | rowEvents | object | 无 | tr 事件监听器集合 |

site/pages/components/Table/en.md

@@ -36,7 +36,7 @@
 | onTreeExpand | (openKeys: string[], data: object, expand: boolean) => void | none | expand row change, keys is expanded row keys |
 | hover | boolean | true | row hover highlight |
 | treeEmptyExpand | boolean | false | show expand button while children data is empty |
-| treeCheckAll | boolean | false | check children data while select all |
+| treeCheckAll | boolean \| 'half' | false | check children data while select all |
 | onSortCancel | () => void | none | sort cancel event |
 | radio | boolean | false | is Radio |
 | rowEvents | object | none | tr events |

site/pages/components/Table/example-26-tree0.js

@@ -5,7 +5,7 @@
  *    -- Set treeCheckAll to deep check children
  */
 import React from 'react'
-import { Table } from 'shineout'
+import { Table, Radio } from 'shineout'
 
 const data = [
   {
@@ -40,6 +40,14 @@ const data = [
                 country: 'Deini',
                 office: 'Conty',
               },
+              {
+                id: 13,
+                firstName: 'Blus',
+                lastName: 'Li',
+                position: 'NanJin',
+                country: 'China',
+                office: 'JiangNing',
+              },
             ],
           },
         ],
@@ -107,17 +115,25 @@ const columns = [
   { title: 'Office', render: 'office' },
 ]
 
+const treeMode = ['true', 'half']
+
 export default function() {
+  const [mode, setMode] = React.useState('true')
   return (
-    <Table
-      onRowSelect={selected => console.log(selected)}
-      bordered
-      fixed="y"
-      keygen="id"
-      format="id"
-      columns={columns}
-      data={data}
-      treeCheckAll
-    />
+    <React.Fragment>
+      <Radio.Group data={treeMode} value={mode} onChange={setMode} renderItem={d => `treeCheckAll = ${d}`} />
+      <Table
+        key={mode}
+        onRowSelect={selected => console.log(selected)}
+        bordered
+        fixed="y"
+        keygen="id"
+        format="id"
+        defaultTreeExpandKeys={[1, 6]}
+        columns={columns}
+        data={data}
+        treeCheckAll={mode === 'true' ? true : mode}
+      />
+    </React.Fragment>
   )
 }

src/Datum/List.js

@@ -1,4 +1,5 @@
 import deepEqual from 'deep-eql'
+import { getKey } from 'shineout/utils/uid'
 import shallowEqual from '../utils/shallowEqual'
 import { CHANGE_TOPIC, WITH_OUT_DISPATCH } from './types'
 
@@ -84,12 +85,17 @@ export default class {
     return flatten
   }
 
-  add(data, _, childrenKey, unshift) {
+  add(data, _, childrenKey, unshift, { parentMap, keygen, treeMode } = {}) {
     if (data === undefined || data === null) return
 
     // clear value
     if (this.limit === 1) this.$values = []
 
+    if (parentMap && treeMode === 'half') {
+      const parentSelData = this.getParentSelData(data, { childrenKey, parentMap, keygen, treeMode })
+      this.add(parentSelData, _, childrenKey, unshift)
+    }
+
     let raws = Array.isArray(data) ? data : [data]
     if (childrenKey && this.limit !== 1) {
       raws = this.flattenTreeData(raws, childrenKey)
@@ -110,6 +116,42 @@ export default class {
     this.handleChange(unshift ? values.concat(this.values) : this.values.concat(values), data, true)
   }
 
+  getCheckStatus(data, { childrenKey, treeMode }) {
+    const c = this.check(data)
+    if (treeMode === 'half' && c) {
+      const children = this.flattenTreeData([data], childrenKey)
+      if (children && children.length > 1) {
+        if (children.find(item => !this.check(item))) return 'indeterminate'
+      }
+    }
+    return c
+  }
+
+  getParentSelData(data, { childrenKey, parentMap, keygen, remove, treeMode }) {
+    const key = getKey(data, keygen)
+    const parent = parentMap.get(key)
+    if (parent === undefined) return data
+    const children = parent[childrenKey] || []
+    const noCheckChild = children.filter(item => !this.check(item))
+    if (remove) {
+      if (treeMode === 'half' && noCheckChild.length === children.length - 1) {
+        return this.getParentSelData(parent, { childrenKey, parentMap, keygen, remove, treeMode })
+      }
+    } else if (treeMode === 'half') {
+      if (noCheckChild.length === 1) {
+        return this.getParentSelData(parent, { childrenKey, parentMap, keygen, remove, treeMode })
+      }
+      let parents = [parent]
+      let pp = parentMap.get(getKey(parent, keygen))
+      while (pp !== undefined) {
+        parents = [pp, ...parents]
+        pp = parentMap.get(getKey(pp, keygen))
+      }
+      return [...parents.map(i => ({ ...i, [childrenKey]: undefined })), data]
+    }
+    return data
+  }
+
   set(value) {
     this.$values = []
     this.add(value)
@@ -163,9 +205,15 @@ export default class {
     return value === this.format(data)
   }
 
-  remove(value, _, childrenKey) {
+  remove(value, _, childrenKey, { parentMap, keygen, treeMode } = {}) {
     if (value === undefined || value === null) return
 
+    if (parentMap && treeMode === 'half') {
+      const delParentData = this.getParentSelData(value, { childrenKey, parentMap, keygen, remove: true, treeMode })
+      this.remove(delParentData, _, childrenKey)
+      return
+    }
+
     let raws = Array.isArray(value) ? value : [value]
     if (childrenKey) {
       raws = this.flattenTreeData(raws, childrenKey)

src/Table/Checkbox.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
+import { getProps } from '../utils/proptypes'
 import { PureComponent } from '../component'
 import { CHANGE_TOPIC } from '../Datum/types'
 import Checkbox from '../Checkbox/Checkbox'
@@ -11,6 +12,8 @@ export default class extends PureComponent {
     datum: PropTypes.object.isRequired,
     treeColumnsName: PropTypes.string,
     checked: PropTypes.bool,
+    ...getProps(PropTypes, 'keygen'),
+    parentMap: PropTypes.object,
   }
 
   constructor(props) {
@@ -30,18 +33,18 @@ export default class extends PureComponent {
   }
 
   handleChange(_, checked, index) {
-    const { data, datum, treeColumnsName } = this.props
+    const { data, datum, treeColumnsName, parentMap, keygen, treeCheckAll } = this.props
     if (checked) {
-      datum.add(data, index, treeColumnsName)
+      datum.add(data, index, treeColumnsName, undefined, { parentMap, keygen, treeMode: treeCheckAll })
     } else {
-      datum.remove(data, index, treeColumnsName)
+      datum.remove(data, index, treeColumnsName, { parentMap, keygen, treeMode: treeCheckAll })
     }
   }
 
   render() {
-    const { data, datum } = this.props
+    const { data, datum, treeColumnsName, treeCheckAll } = this.props
     const disabled = datum.disabled(data)
-    const checked = datum.check(data)
+    const checked = datum.getCheckStatus(data, { childrenKey: treeColumnsName, treeMode: treeCheckAll })
     const CheckItem = datum.limit === 1 ? Radio : Checkbox
     return <CheckItem {...this.props} checked={checked} disabled={disabled} onChange={this.handleChange} />
   }

src/Table/Tbody.js

@@ -147,6 +147,7 @@ class Tbody extends PureComponent {
         {...other}
         index={i + index}
         key={key}
+        keygen={keygen}
         originKey={originKey}
         data={row}
         rowData={data[i]}

src/Table/Td.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import { getProps } from '../utils/proptypes'
 import { tableClass } from './styles'
 import Checkbox from './Checkbox'
 
@@ -30,7 +31,7 @@ class Td extends PureComponent {
   }
 
   renderCheckbox() {
-    const { index, data, datum, treeColumnsName, treeCheckAll, disabled } = this.props
+    const { index, data, datum, treeColumnsName, treeCheckAll, parentMap, keygen, disabled } = this.props
     return (
       <Checkbox
         force={datum.check(data)}
@@ -39,6 +40,9 @@ class Td extends PureComponent {
         datum={datum}
         disabled={disabled}
         treeColumnsName={treeCheckAll && treeColumnsName}
+        treeCheckAll={treeCheckAll}
+        keygen={keygen}
+        parentMap={parentMap}
       />
     )
   }
@@ -167,8 +171,10 @@ Td.propTypes = {
   treeIndent: PropTypes.number,
   treeRoot: PropTypes.bool,
   treeEmptyExpand: PropTypes.bool,
-  treeCheckAll: PropTypes.bool,
+  treeCheckAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   resetFixAuto: PropTypes.func,
+  ...getProps(PropTypes, 'keygen'),
+  parentMap: PropTypes.object,
   disabled: PropTypes.func,
 }
 

src/Table/Thead.js

@@ -220,7 +220,7 @@ Thead.propTypes = {
   onColChange: PropTypes.func,
   columnResizable: PropTypes.bool,
   treeColumnsName: PropTypes.string,
-  treeCheckAll: PropTypes.bool,
+  treeCheckAll: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
   colgroup: PropTypes.array,
 }
 

src/Table/Tr.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import { getProps } from '../utils/proptypes'
 import { setTranslate } from '../utils/dom/translate'
 import { tableClass } from './styles'
 import { inputClass } from '../Input/styles'
@@ -158,6 +159,7 @@ class Tr extends Component {
     const {
       columns,
       data,
+      keygen,
       rowData,
       striped,
       index,
@@ -198,6 +200,7 @@ class Tr extends Component {
             {...other}
             expanded={typeof expandRender === 'function'}
             key={key}
+            keygen={keygen}
             treeExpand={treeExpand}
             treeExpandShow={!!treeColumnsName}
             type={type}
@@ -267,6 +270,7 @@ Tr.propTypes = {
   externalExpandClick: PropTypes.func,
   expandKeys: PropTypes.array,
   originKey: PropTypes.any,
+  ...getProps(PropTypes, 'keygen'),
 }
 
 Tr.defaultProps = {

src/Table/TreeExpand.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import immer from 'immer'
+import immer, { original } from 'immer'
 import { getKey } from '../utils/uid'
 import { getProps } from '../utils/proptypes'
 import { keysToArray } from '../utils/transform'
@@ -63,6 +63,7 @@ export default WrappedComponent => {
       const { data, keygen, treeColumnsName } = this.props
       const expandKeys = this.getExpandKeys()
       this.expandLevel = new Map()
+      this.parentMap = new Map()
       if (expandKeys.size === 0) return data
 
       const storeExpandKeys = new Map()
@@ -78,6 +79,7 @@ export default WrappedComponent => {
           if (storeExpandKeys.get(key) && item[treeColumnsName]) {
             item[treeColumnsName].forEach(child => {
               this.expandLevel.set(getKey(child, keygen), parentLevel + 1)
+              this.parentMap.set(getKey(child, keygen), original(item))
             })
             draft.splice(i + 1, 0, ...item[treeColumnsName])
             dataCo = draft
@@ -119,6 +121,7 @@ export default WrappedComponent => {
           onTreeExpand={this.handleTreeExpand}
           treeExpandKeys={expandKeys}
           treeExpandLevel={this.expandLevel}
+          parentMap={this.parentMap}
           treeRoot={rootTree}
           treeIndent={treeIndent}
         />

src/Table/index.d.ts

@@ -397,7 +397,7 @@ export interface TableProps<Value, TRD> extends StandardProps, ListItemStandardP
    *
    * default: false
    */
-  treeCheckAll?: boolean;
+  treeCheckAll?: boolean | 'half';
 
   /**
    * sort cancel event