@king-design/intact 3.3.3 → 3.4.0-beta.1

package/components/table/index.spec.ts

@@ -15,6 +15,7 @@ import ScrollToRowDemo from '~/components/table/demos/scrollToRow';
 import {mount, unmount, dispatchEvent, getElement, wait} from '../../test/utils';
 import {Component} from 'intact';
 import {Table, TableColumn} from './';
+import { bind } from '../utils';
 import DraggableTable from '~/components/table/demos/draggable';
 import MergeCellDemo from '~/components/table/demos/mergeCell';
 import {Dropdown, DropdownMenu, DropdownItem} from '../dropdown';
@@ -186,6 +187,68 @@ describe('Table', () => {
         expect(table2.outerHTML).to.matchSnapshot();
     });
 
+    it('append a row in merged table', async () => {
+        let uniqueId = 0;
+        class Demo extends Component<{data: any[]}> {
+            static template = `
+                const {Table, TableColumn} = this;
+                const { data } = this.get();
+                <Table data={data} merge={this.merge} rowKey={data => data.uniqueId} animation={false}>
+                    <TableColumn title="名称" key="Name" />
+                    <TableColumn title="头衔" key="Title" />
+                    <TableColumn title="uniqueId" key="uniqueId" />
+                </Table>
+            `
+
+            private Table = Table;
+            private TableColumn = TableColumn;
+
+            static defaults() {
+                return {
+                    data: [
+                        {
+                            Name: '刘备',
+                            Title: '大哥',
+                            uniqueId: 0, 
+                        },
+                    ]
+                }
+            }
+
+            @bind
+            merge(row: any, column: any, rowIndex: number, columnIndex: number) {
+                const { data } = this.get();
+                for (let i = 0; i < data.length; i++) {
+                    const mergeIndex = data.findIndex((item: any, index: number) => {
+                        return index > i && item.Name !== data[i]?.Name;
+                    });
+                    const allSame = data.every((item: any, index: number) => {
+                        if (index > i) {
+                            return item.Name === data[i].Name;
+                        }
+                        return true;
+                    });
+                    if ([0, 1, 2].includes(columnIndex) && rowIndex === i) {
+                        if (mergeIndex === -1 && allSame) {
+                            return { rowspan: data.length - i };
+                        }
+                        if (mergeIndex > -1) {
+                            return { rowspan: mergeIndex - i };
+                        }
+                    }
+                }
+            }
+        }
+
+        const [instance, element] = mount(Demo);
+
+        const { data } = instance.get();
+        instance.set('data', [...data, { ...data[data.length - 1], uniqueId: ++uniqueId }]);
+
+        await wait();
+        expect(element.innerHTML).to.matchSnapshot();
+    });
+
     it('sort', async () => {
         const [instance, element] = mount(SortDemo);
 

package/components/table/useChecked.ts

@@ -210,7 +210,8 @@ export function useChecked(
         instance.trigger(isChecked ? 'checkRow' : 'uncheckRow', data.value![rowIndex], rowIndex, key);
     }
 
-    instance.on('$receive:children', updateAllCheckedStatus);
+    // instance.on('$receive:children', updateAllCheckedStatus);
+    useReceive(['children'], updateAllCheckedStatus);
     instance.on('$change:checkedKeys', updateAllCheckedStatus);
     // for draggable
     watchState(data, updateAllCheckedStatus);

package/components/table/useDisableRow.ts

@@ -2,6 +2,7 @@ import {useInstance} from 'intact';
 import type {Table, TableRowKey, TableCheckType} from './table';
 import type {useTree} from './useTree';
 import { State, watchState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
 
 export function useDisableRow(
     loopData: ReturnType<typeof useTree>['loopData'],
@@ -48,7 +49,8 @@ export function useDisableRow(
         return allKeys;
     }
 
-    instance.on('$receive:children', setDisabledKeys);
+    // instance.on('$receive:children', setDisabledKeys);
+    useReceive(['children'], setDisabledKeys);
     watchState(data, setDisabledKeys);
 
     return {isDisabled, getEnableKeys, isDisabledKey, getAllKeys};

package/components/table/useMerge.ts

@@ -2,6 +2,7 @@ import {useInstance, Props} from 'intact';
 import type {Table, TableRowKey, TableCheckType} from './table';
 import type {TableColumnProps} from './column';
 import { State, watchState } from '../../hooks/useState';
+import { useReceive } from '../../hooks/useReceive';
 
 export type TableMerge<T = any, CheckType = 'checkbox'> = (
     row: T,
@@ -100,7 +101,11 @@ export function useMerge(
         return grid;
     }
 
-    instance.on('$receive:children', handleSpans);
+    /**
+     * https://github.com/ksc-fe/kpc/issues/1008
+     */
+    // instance.on('$receive:children', handleSpans);
+    useReceive(['children'], handleSpans);
     watchState(data, handleSpans);
 
     return {getGrid};