@king-design/intact 2.0.17-beta.0 → 2.1.0

package/components/table/demos/pagination.md

@@ -0,0 +1,53 @@
+---
+title: 表格分页
+order: 30
+---
+
+给组件添加`pagination`属性即可开启分页功能，`pagination`支持`Pagination`组件的全部属性，当分页信息改变时
+会触发`changePage`事件
+
+> 需要给Table设置rowKey属性，否则选择的行翻页后依然会保留选中状态，因为不设置key，则使用索引当key，
+> 只要当前选中的索引在下一页存在，则会依然选中
+
+```vdt
+import {Table, TableColumn, Switch} from 'kpc';
+
+<Table data={this.get('data')}
+    pagination
+    ref="table"
+    draggable
+    rowKey={item => item.name}
+>
+    <TableColumn title="Name" key="name" />
+    <TableColumn title="IP" key="ip" />
+</Table>
+```
+
+```ts
+import {range, bind} from 'kpc/components/utils';
+
+interface Props {
+    data: DataItem[]
+}
+
+type DataItem = {
+    name: string
+    ip: string
+}
+
+const data: DataItem[] = range(1, 20).map(item => {
+    return {
+        name: 'name ' + item,
+        ip: '127.0.0.' + item
+    };
+});
+
+export default class extends Component {
+    static template = template;
+    static defaults() {
+        return {
+            data, 
+        };
+    }
+}
+```

package/components/table/index.md

@@ -43,6 +43,8 @@ sidebar: doc
 | widthStoreKey | 如果要保存表格拖动后的列宽信息，可以通过该属性设置保存到`localStorage`中的`key` | `string` | `undefined` |
 | draggable | 表格行是否可拖动 | `boolean` | `false` |
 | animation | 是否开启动效，默认开启。可以通过`true` `false`全部设置，或者通过数组单独设置行和列的动效 | `boolean` &#124 `[boolean, boolean]` | `true` |
+| hideHeader | 是否隐藏表头 | `boolean` | `false` |
+| pagination | 是否支持分页 | `boolean` | `PaginationProps` | `false` |
 
 ```ts
 import {Props} from 'intact';
@@ -74,6 +76,22 @@ type Position = {
 type Collision = 'left' | 'top' | 'none'
 
 export type Container = string | ((parentDom: Element, anchor: Node | null) => Element)
+
+export interface PaginationProps {
+    size?: Sizes,
+    counts?: number | string,
+    total?: number,
+    value?: number,
+    limit?: number,
+    limits?: number[],
+    noBorder?: boolean,
+    simple?: boolean,
+    showTotal?: boolean,
+    showGoto?: boolean,
+    showLimits?: boolean,
+    disableBtn?: (page: number, limit: number) => boolean,
+    disablePage?: (page: number, limit: number) => boolean,
+}
 ```
 
 ## TableColumn
@@ -145,3 +163,7 @@ export type TableColumnGroupItem = {
 | clickRow | 点击某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
 | dragstart | 行拖动开始 | `(data: {key: TableRowKey, from: number}) => void` |
 | dragend | 行拖动结束 | `(data: {key: TableRowKey, from: number, to: number}) => void` |
+| checkRow | 手动选中某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
+| uncheckRow | 手动取消选中某行触发 | `(data: T, index: number, key: TableRowKey) => void` |
+| checkAll | 手动全选触发 | `() => void` |
+| uncheckAll | 手动取消全选触发 | `() => void` |

package/components/table/index.spec.ts

@@ -20,6 +20,7 @@ import MergeCellDemo from '~/components/table/demos/mergeCell';
 import {Dropdown, DropdownMenu, DropdownItem} from '../dropdown';
 import {Icon} from '../icon';
 import {useChecked, AllCheckedStatus} from './useChecked';
+import PaginationDemo from '~/components/table/demos/pagination';
 
 describe('Table', () => {
     afterEach(() => {
@@ -36,34 +37,49 @@ describe('Table', () => {
         const spy = sinon.spy((v: number[]) => console.log(v));
         table.on('$change:checkedKeys', spy);
 
+        const spyCheckRow = sinon.spy((data: any, index: number, key: string) => console.log('checkRow', data, index, key));
+        table.on('checkRow', spyCheckRow);
+        const spyUncheckRow = sinon.spy((data: any, index: number, key: string) => console.log('uncheckRow', data, index, key));
+        table.on('uncheckRow', spyUncheckRow);
+        const spyCheckAll = sinon.spy(() => console.log('checkAll'));
+        table.on('checkAll', spyCheckAll);
+        const spyUncheckAll = sinon.spy(() => console.log('uncheckAll'));
+        table.on('uncheckAll', spyUncheckAll);
+
         // click row
         const [tr1, tr2] = element.querySelectorAll<HTMLElement>('tbody tr');
         tr1.click();
         await wait();
         expect(table.get('checkedKeys')).to.eql([0]);
+        expect(spyCheckRow.callCount).to.eql(1);
         tr2.click();
         await wait();
         expect(table.get('checkedKeys')).to.eql([0, 1]);
         expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+        expect(spyCheckRow.callCount).to.eql(2);
+        expect(spyCheckAll.callCount).to.eq(0);
 
         tr1.click();
         await wait();
         expect(table.get('checkedKeys')).to.eql([1]);
         expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.Indeterminate);
+        expect(spyUncheckRow.callCount).to.eql(1);
 
         const all = element.querySelector('.k-checkbox') as HTMLElement;
         all.click();
         await wait();
         expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.All);
+        expect(spyCheckAll.callCount).to.eql(1);
         all.click();
         await wait();
         expect(checked.getAllCheckedStatus()).eql(AllCheckedStatus.None);
         expect(table.get('checkedKeys')).to.eql([]);
+        expect(spyUncheckAll.callCount).to.eql(1);
 
         expect(spy.callCount).to.eql(5);
         // clear data of table should only trigger $change:checked event once, #407
         all.click();
-        table.set('data', []);
+        instance.set<{data: any[]}>('data', []);
         await wait();
         expect(spy.callCount).to.eql(7);
     });
@@ -220,6 +236,13 @@ describe('Table', () => {
         await wait();
         expect(instance.get('multipleGroup')).to.eql({status: ['active', 'stopped']});
         expect(table2.innerHTML).to.matchSnapshot();
+
+        // update group
+        instance.set('statusGroup', [{label: 'label', value: 'value'}]);
+        dispatchEvent(icon, 'click');
+        await wait(500);
+        const newDropdown= getElement('.k-table-group-dropdown')!;
+        expect(newDropdown.innerHTML).to.matchSnapshot();
     });
 
     it('fix columns', async () => {
@@ -559,4 +582,53 @@ describe('Table', () => {
         await wait();
         expect(update.callCount).to.eql(1);
     });
+
+    it('pagination', async () => {
+        const [instance, element] = mount(PaginationDemo);
+        const table = instance.refs.table as Table;
+        const pagination = table.pagination.paginationRef;
+        const spy = sinon.spy();
+
+        table.on('changePage', spy);
+
+        // check all
+        table.checkAll(); 
+        expect(table.getCheckedData()).to.have.length(10);
+
+        // next page
+        table.set('pagination', { value: 2 });
+        (table as any).trigger('$receive:pagination');
+        await wait();
+        expect(table.getCheckedData()).to.have.length(0);
+
+        // check all again
+        table.checkAll(); 
+        expect(table.getCheckedData()).to.have.length(10);
+
+        // change limit
+        table.set('pagination', { value: 1, limit: 20 });
+        (table as any).trigger('$receive:pagination');
+        await wait();
+        expect(table.getCheckedData()).to.have.length(10);
+
+        // check all again
+        table.checkAll(); 
+        expect(table.getCheckedData()).to.have.length(20);
+
+        // change limit from pagination
+        pagination.value!.set('limit', 10);
+        await wait();
+        expect(table.getCheckedData()).to.have.length(10);
+        // FIXME: Pagination component should no trigger change event multiple times
+        // when we set value and limit at the same time
+        expect(spy.callCount).to.eql(4);
+        expect(spy.lastCall.lastArg).to.eql({value: 1, limit: 10});
+
+        // change page from pagination
+        await wait();
+        pagination.value!.changePage(2);
+        expect(table.getCheckedData()).to.have.length(0);
+        expect(spy.callCount).to.eql(5);
+        expect(spy.lastCall.lastArg).to.eql({value: 2, limit: 10});
+    });
 });

package/components/table/row.ts

@@ -25,7 +25,7 @@ export interface TableRowProps {
     index: number
     disabled: boolean
     allDisabled: boolean
-    onChangeChecked: (index: number, checked: boolean) => void
+    onChangeChecked: (index: number, checked: boolean, key: TableRowKey) => void
     grid: TableGrid
     selected: boolean
     // hidden: boolean
@@ -91,8 +91,8 @@ export class TableRow extends Component<TableRowProps> {
 
     @bind
     onChangeChecked(v: boolean) {
-        const {index, onChangeChecked} = this.get();
-        onChangeChecked(index, v);
+        const {index, key, onChangeChecked} = this.get();
+        onChangeChecked(index, v, key);
     }
 
     @bind

package/components/table/styles.ts

@@ -363,6 +363,11 @@ export function makeStyles() {
                 }
             `;
         })}
+
+        // pagination
+        > .k-pagination {
+            margin: 16px 0;
+        }
     `;
 }
 

package/components/table/table.ts

@@ -20,6 +20,8 @@ import {useStickyScrollbar} from './useStickyScrollbar';
 import {useWidth} from './useWidth';
 import {useScroll} from './useScroll';
 import type {Events} from '../types';
+import type {PaginationProps, PaginationChangeData} from '../pagination';
+import { usePagination } from './usePagination';
 
 export interface TableProps<
     T = any,
@@ -60,12 +62,19 @@ export interface TableProps<
     widthStoreKey?: string
     draggable?: boolean
     animation?: boolean | [boolean, boolean]
+    hideHeader?: boolean
+    pagination?: boolean | PaginationProps
 }
 
 export interface TableEvents<T = any, K extends TableRowKey = number> {
     clickRow: [T, number, K]
     dragstart: [{key: K, from: number}]
     dragend: [{key: K, from: number, to: number}]
+    checkRow: [T, number, K]
+    uncheckRow: [T, number, K]
+    checkAll: []
+    uncheckAll: []
+    changePage: [PaginationChangeData]
 }
 
 export interface TableBlocks<T = unknown> {
@@ -118,6 +127,8 @@ const typeDefs: Required<TypeDefs<TableProps<unknown>>> = {
     widthStoreKey: String,
     draggable: Boolean,
     animation: [Boolean, Array],
+    hideHeader: Boolean,
+    pagination: [Boolean, Object],
 };
 
 const defaults = (): Partial<TableProps> => ({
@@ -135,6 +146,11 @@ const events: Events<TableEvents> = {
     clickRow: true,
     dragstart: true,
     dragend: true,
+    checkRow: true,
+    uncheckRow: true,
+    checkAll: true,
+    uncheckAll: true,
+    changePage: true,
 };
 
 export class Table<
@@ -149,7 +165,9 @@ export class Table<
     static defaults = defaults;
     static events = events;
 
-    private tree = useTree();
+    // use public for unit test to get paginationRef
+    public pagination = usePagination();
+    private tree = useTree(this.pagination.data);
     private columns = useColumns();
     private scroll = useScroll();
     private stickyHeader = useStickyHeader(this.scroll.callbacks);
@@ -169,20 +187,27 @@ export class Table<
         this.scroll,
         this.width.widthMap,
     );
-    private disableRow = useDisableRow(this.tree.loopData);
-    private merge = useMerge(this.columns.getCols);
+    private disableRow = useDisableRow(
+        this.tree.loopData,
+        this.pagination.data,
+    );
+    private merge = useMerge(
+        this.columns.getCols,
+        this.pagination.data,
+    );
     private checked = useChecked(
         this.disableRow.getEnableKeys,
         this.disableRow.getAllKeys,
         this.disableRow.isDisabledKey,
         this.merge.getGrid,
         this.tree.loopData,
+        this.pagination.data,
     );
     private sortable = useSortable();
     private expandable = useExpandable();
     private selected = useSelected();
     private resetRowStatus = useRestRowStatus(this.disableRow.getAllKeys);
-    private draggable = useDraggable();
+    private draggable = useDraggable(this.pagination.data);
     private stickyScrollbar = useStickyScrollbar(
         this.stickyHeader.elementRef,
         this.scroll,

package/components/table/table.vdt

@@ -1,6 +1,6 @@
 import {eachChildren} from '../utils';
 import {makeStyles} from './styles';
-import {isStringOrNumber, isNull} from 'intact-shared';
+import {isStringOrNumber, isNull, isObject, EMPTY_OBJ} from 'intact-shared';
 import {getClassAndStyleForFixed} from './useFixedColumns';
 import {Affix} from '../affix';
 import {TableRow} from './row';
@@ -16,6 +16,7 @@ import {Tooltip} from '../tooltip';
 import {AllCheckedStatus} from './useChecked';
 import {context as ResizableContext} from './useResizable';
 import {context as FixedColumnsContext} from './useFixedColumns';
+import {Pagination} from '../pagination';
 
 const {
     data, children, className, fixHeader,
@@ -23,7 +24,8 @@ const {
     rowClassName, group, sort, loading,
     merge, childrenKey, indent, tooltipPosition,
     tooltipContainer, showIndeterminate, resizable,
-    draggable, animation: _animation,
+    draggable, animation: _animation, hideHeader,
+    pagination,
 } = this.get();
 const animation = !Array.isArray(_animation) ? [_animation, _animation] : _animation;
 const {columns, cols, maxRows, maxCols} = this.columns.getData();
@@ -64,7 +66,7 @@ const hasFixedLeft = getHasFixedLeft();
 const {getAllCheckedStatus, toggleCheckedAll, getAllStatus, onChangeChecked} = this.checked;
 const allCheckedStatus = getAllCheckedStatus(); 
 const offsetMap = getOffsetMap();
-const thead = (
+const thead = hideHeader ? null : (
     <TableContext.Provider value={checkType}>
         <GroupContext.Provider value={{group, onChange: this.onChangeGroup}}>
             <SortableContext.Provider value={{sort, onChange: this.sortable.onChange}}>
@@ -213,6 +215,13 @@ const {
     onScroll: onScrollbarScroll,
     tableActualWidth,
 } = this.stickyScrollbar;
+const {
+    value: pageValue,
+    limit: pageLimit,
+    onChange: onPageChange,
+    paginationRef,
+} = this.pagination;
+
 <div class={classNameObj} ref={elementRef}>
     <div class="k-table-wrapper" style={style} ref={scrollRef}>
         <Affix v-if={!isNull(stickHeader.value)}
@@ -231,6 +240,15 @@ const {
             <template>{tbody}</template>
         </table>
     </div>
+    <Pagination v-if={pagination}
+        ref={paginationRef}
+        total={data ? data.length : 0}
+        size="small"
+        {...(isObject(pagination) ? pagination : EMPTY_OBJ)}
+        value={pageValue.value}
+        limit={pageLimit.value}
+        ev-change={onPageChange}
+    />
     <Transition name="k-fade">
         <Spin v-if={loading} overlay size="small" class="k-table-spin" />
     </Transition>

package/components/table/useChecked.ts

@@ -1,5 +1,5 @@
 import {createRef, useInstance, onMounted, onBeforeUnmount} from 'intact';
-import {useState} from '../../hooks/useState';
+import {useState, State, watchState} from '../../hooks/useState';
 import type {Table, TableRowKey, TableCheckType} from './';
 import {toggleArray} from '../utils';
 import {useReceive} from '../../hooks/useReceive';
@@ -25,6 +25,7 @@ export function useChecked(
     isDisabledKey: (key: TableRowKey) => boolean,
     getGrid: () => TableGrid,
     loopData: ReturnType<typeof useTree>['loopData'],
+    data: State<any[] | undefined>,
 ) {
     const instance = useInstance() as Table<any, TableRowKey, TableCheckType>;
     let allStatus: RowStatus[] = [];
@@ -36,8 +37,13 @@ export function useChecked(
     function toggleChecked(key: TableRowKey, rowIndex: number) {
         if (instance.get('checkType') === 'checkbox') {
             instance.set('checkedKeys', toggleArray(instance.get('checkedKeys'), key));
+
+            // trigger check event for checkbox,
+            // radio check event trigger in onChangeChecked function
+            triggerEvent(isChecked(key), key, rowIndex);
         } else {
             if (isChecked(key)) return;
+
             const grid = getGrid();
             const gridRow = grid[rowIndex];
             if (gridRow) {
@@ -46,7 +52,7 @@ export function useChecked(
                     rowIndex--;
                 }
             }
-            onChangeChecked(rowIndex, true);
+            onChangeChecked(rowIndex, true, key);
         }
     }
 
@@ -66,6 +72,7 @@ export function useChecked(
 
     function toggleCheckedAll(v: boolean) {
         instance.set('checkedKeys', getCheckedAllOrUncheckedAllKeys(v));
+        instance.trigger(v ? 'checkAll' : 'uncheckAll');
     }
 
     /**
@@ -93,9 +100,9 @@ export function useChecked(
     function updateAllCheckedStatus() {
         allStatus = [];
 
-        const {data, rowKey, checkType, merge} = instance.get();
+        const {rowKey, checkType, merge} = instance.get();
 
-        if (!data || !data.length) return;
+        if (!data.value || !data.value.length) return;
 
         const allKeys = getAllKeys();
         allKeys.forEach((key) => {
@@ -152,7 +159,7 @@ export function useChecked(
         }
     }
 
-    function onChangeChecked(rowIndex: number, v: boolean) {
+    function onChangeChecked(rowIndex: number, v: boolean, key: TableRowKey) {
         // should check or uncheck all grouped rows
         const checkType = instance.get('checkType');
         const checkedKeys = (instance.get('checkedKeys') || []).slice();
@@ -190,16 +197,24 @@ export function useChecked(
         }
 
         instance.set('checkedKeys', checkedKeys);
+
+        // onChangeChecked will be called in clickRow and check in Row component
+        triggerEvent(v, key, rowIndex);
     }
 
     function getAllStatus() {
         return allStatus;
     }
 
+    function triggerEvent(isChecked: boolean, key: TableRowKey, rowIndex: number) {
+        instance.trigger(isChecked ? 'checkRow' : 'uncheckRow', data.value![rowIndex], rowIndex, key);
+    }
+
     instance.on('$receive:children', updateAllCheckedStatus);
     instance.on('$change:checkedKeys', updateAllCheckedStatus);
     // for draggable
-    instance.on('$change:data', updateAllCheckedStatus);
+    watchState(data, updateAllCheckedStatus);
+    // instance.on('$change:data', updateAllCheckedStatus);
 
     instance.on('clickRow', (data: any, index: number, key: TableRowKey) => {
         if (instance.get('rowCheckable') && instance.get('checkType') !== 'none') {

package/components/table/useDisableRow.ts

@@ -1,9 +1,11 @@
 import {useInstance} from 'intact';
 import type {Table, TableRowKey, TableCheckType} from './table';
 import type {useTree} from './useTree';
+import { State, watchState } from '../../hooks/useState';
 
 export function useDisableRow(
     loopData: ReturnType<typeof useTree>['loopData'],
+    data: State<any[] | undefined>,
 ) {
     const instance = useInstance() as Table<any, TableRowKey>;
     let enabledKeys: TableRowKey[] = [];
@@ -47,8 +49,7 @@ export function useDisableRow(
     }
 
     instance.on('$receive:children', setDisabledKeys);
-    // for draggable
-    instance.on('$change:data', setDisabledKeys);
+    watchState(data, setDisabledKeys);
 
     return {isDisabled, getEnableKeys, isDisabledKey, getAllKeys};
 }

package/components/table/useDraggable.ts

@@ -1,9 +1,9 @@
 import {useInstance, nextTick} from 'intact';
 import type {Table, TableRowKey} from './table';
-import {useState} from '../../hooks/useState';
+import {useState, State} from '../../hooks/useState';
 import type {TableRow} from './row';
 
-export function useDraggable() {
+export function useDraggable(data: State<unknown[] | undefined>) {
     const instance = useInstance() as Table<any, TableRowKey>;
     const draggingKey = useState<TableRowKey | null>(null);
 
@@ -17,7 +17,7 @@ export function useDraggable() {
         const key = tableRow.get('key');
         draggingKey.set(key);
 
-        originData = instance.get('data')!;
+        originData = data.value!;
 
         instance.trigger('dragstart', {
             key,
@@ -33,20 +33,23 @@ export function useDraggable() {
         if (newIndex === draggingIndex) return;
 
         // swap data
-        const data = instance.get('data')!.slice();
-        const item = data.splice(draggingIndex, 1)[0];
-        data.splice(newIndex, 0, item);
+        const newData = data.value!.slice();
+        const item = newData.splice(draggingIndex, 1)[0];
+        newData.splice(newIndex, 0, item);
 
         draggingIndex = newIndex;
 
-        instance.set('data', data);
+        data.set(newData);
     }
     
     function onRowDragEnd(e: MouseEvent, tableRow: TableRow) {
         e.preventDefault();
-        instance.set('data', originData);
+        // revert to origin data, then set to new data to trigger animation
+        const newData = data.value;
+        data.set(originData);
 
         nextTick(() => {
+            data.set(newData);
             draggingKey.set(null);
             instance.trigger('dragend', {
                 key: tableRow.get('key'),

package/components/table/useGroup.ts

@@ -17,6 +17,8 @@ export function useGroup() {
     const keywords = useState<string>('');
     const filteredGroup = useState<TableColumnGroupItem[] | undefined>(instance.get('group'));
 
+    instance.on('$receive:group', (group) => filteredGroup.set(group));
+
     function onSelect(value: any, groupValue: any, onChange: ContextValue['onChange']) {
         const {multiple, key} = instance.get();
 

package/components/table/useMerge.ts

@@ -1,6 +1,7 @@
 import {useInstance, Props} from 'intact';
 import type {Table, TableRowKey, TableCheckType} from './table';
 import type {TableColumnProps} from './column';
+import { State, watchState } from '../../hooks/useState';
 
 export type TableMerge<T = any, CheckType = 'checkbox'> = (
     row: T,
@@ -23,6 +24,7 @@ export type TableGrid = TableGridItem[][];
 
 export function useMerge(
     getCols: () => Props<TableColumnProps>[],
+    data: State<unknown[] | undefined>,
 ) {
     const instance = useInstance() as Table<any, TableRowKey, TableCheckType>;
     let grid: TableGrid = [];
@@ -30,11 +32,11 @@ export function useMerge(
     function handleSpans() {
         grid = [];
 
-        const {merge, data, checkType} = instance.get();
-        if (!data || !data.length || !merge) return;
+        const {merge, checkType} = instance.get();
+        if (!data.value || !data.value.length || !merge) return;
 
         const cols = getCols();
-        data.forEach((data, rowIndex) => {
+        data.value.forEach((data, rowIndex) => {
             const currentRow: TableGridItem[] = [];
             grid.push(currentRow);
 
@@ -99,6 +101,7 @@ export function useMerge(
     }
 
     instance.on('$receive:children', handleSpans);
+    watchState(data, handleSpans);
 
     return {getGrid};
 }