@king-design/intact 3.6.2-beta.1 → 3.7.0

package/components/transfer/index.ts

@@ -4,7 +4,9 @@ import {_$} from '../../i18n';
 import {useTransfer} from './useTransfer';
 import {useFilter, Model} from './useFilter';
 import {useCheck, CheckedKeys} from './useCheck';
+import {usePagination} from './usePagination';
 import type {Events} from '../types';
+import type {PaginationProps, PaginationChangeData} from '../pagination';
 import { useConfigContext } from '../config';
 
 // type KeysOfType<T, U> = {
@@ -32,6 +34,7 @@ export interface TransferProps<
     rightTitle?: string | VNode,
     enableAdd?: () => boolean,
     enableRemove?: () => boolean,
+    pagination?: boolean | PaginationProps,
 }
 
 export type TransferDataItem<
@@ -48,6 +51,7 @@ export type TransferDataItem<
 export interface TransferEvents {
     add: []
     remove: []
+    page: [Model, PaginationChangeData]
 }
 
 export interface TransferBlocks<T, V> {
@@ -73,6 +77,7 @@ const typeDefs: Required<TypeDefs<TransferProps>> = {
     rightTitle: [String, VNode],
     enableAdd: Function,
     enableRemove: Function,
+    pagination: [Boolean, Object],
 };
 
 const defaults = (): Partial<TransferProps> => ({
@@ -90,6 +95,7 @@ const defaults = (): Partial<TransferProps> => ({
 const events: Events<TransferEvents> = {
     add: true,
     remove: true,
+    page: true,
 };
 
 export class Transfer<
@@ -105,6 +111,7 @@ export class Transfer<
 
     private transfer = useTransfer();
     private filter = useFilter(this.transfer.rightData);
+    public paginationState = usePagination();
     private check = useCheck(this.filter);
     private config = useConfigContext();
 

package/components/transfer/index.vdt

@@ -6,14 +6,21 @@ import {Checkbox} from '../checkbox';
 import {Button} from '../button';
 import {Tree} from '../tree';
 import {Icon} from '../icon';
+import {Pagination} from '../pagination';
+import {isObject, EMPTY_OBJ} from 'intact-shared';
 
 const {
     data, className, keyName, labelName, 
-    filterable, filter, placeholder 
+    filterable, filter, placeholder, pagination
 } = this.get();
 const {getShowedData} = this.filter;
 const {enableAdd, enableRemove, add, remove} = this.transfer;
 const {isCheckAll, toggleCheckAll, onCheckboxChange, isIndeterminate} = this.check;
+const {
+    getPagedData,
+    leftValue, leftLimit, rightValue, rightLimit,
+    onChange: onPageChange
+} = this.paginationState;
 const { k } = this.config;
 
 const classNameObj = {
@@ -24,14 +31,19 @@ const classNameObj = {
 
 const Panel = (model) => {
     const title = this.get(`${model}Title`);
-    const data = getShowedData(model);
+
+    const allData = getShowedData(model) || [];
+    const hasPagination = !!pagination;
+    const displayData = hasPagination 
+        ? getPagedData(model, allData)
+        : allData;
 
     return <div class={`${k}-transfer-panel`}>
         <div class={`${k}-transfer-title`}>
             <b:header params={model}>
                 <div class={`${k}-transfer-count`}>
                     {this.get(`${model}CheckedKeys.length`)} /
-                    {data.length}
+                    {allData.length}
                 </div>
                 <Checkbox class="c-ellipsis" 
                     value={isCheckAll(model)}
@@ -54,7 +66,7 @@ const Panel = (model) => {
         <div class={`${k}-transfer-list`}>
             <b:list params={model}>
                 <TransitionGroup name="k-fade">
-                    <div v-for={data} 
+                    <div v-for={displayData} 
                         class={{[`${k}-transfer-item`]: true, [`${k}-disabled`]: $value.disabled}}
                         key={$value[keyName] || $value[labelName] || $value}
                     >
@@ -73,6 +85,20 @@ const Panel = (model) => {
                 </TransitionGroup>
             </b:list>
         </div>
+        <div class={`${k}-transfer-pagination-wrapper`} v-if={hasPagination}>
+            <Pagination
+                ref={model === 'left' ? this.paginationState.leftPaginationRef : this.paginationState.rightPaginationRef}
+                total={allData.length}
+                size="mini"
+                flat
+                showTotal={false}
+                showLimits={false}
+                {...(isObject(pagination) ? pagination : EMPTY_OBJ)}
+                value={model === 'left' ? leftValue.value : rightValue.value}
+                limit={model === 'left' ? leftLimit.value : rightLimit.value}
+                ev-change={onPageChange.bind(null, model)}
+            />
+        </div>
     </div>
 };
 

package/components/transfer/styles.ts

@@ -36,6 +36,10 @@ const defaults = {
 
     arrow: {
         gap: '16px 10px',
+    },
+
+    pagination: {
+        padding: '6px 0',
     }
 };
 
@@ -60,7 +64,7 @@ export const makeStyles = cache(function makeStyles(k: string) {
             height: ${transfer.panel.height};
             display: inline-flex;
             flex-direction: column;
-            overflow: auto;
+            overflow: hidden;
         }
 
         .${k}-transfer-title {
@@ -118,5 +122,11 @@ export const makeStyles = cache(function makeStyles(k: string) {
                 margin: ${transfer.arrow.gap};
             }
         }
+        .${k}-transfer-pagination-wrapper {
+            padding: ${transfer.pagination.padding};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
     `;
 });

package/components/transfer/useCheck.ts

@@ -34,10 +34,10 @@ export function useCheck({getEnabledData, getShowedData}: ReturnType<typeof useF
     }
 
     function isIndeterminate(model: Model) {
-      const checked = instance.get(`${model}CheckedKeys` as CheckedKeys)!;
-      const data = getEnabledData(model);
+        const checked = instance.get(`${model}CheckedKeys` as CheckedKeys)!;
+        const data = getEnabledData(model);
       
-      return checked.length > 0 && checked.length < data.length;
+        return checked.length > 0 && checked.length < data.length;
     }
 
     function onCheckboxChange(model: Model, index: number, e: MouseEvent) {
@@ -47,8 +47,8 @@ export function useCheck({getEnabledData, getShowedData}: ReturnType<typeof useF
             checked = (e.target as HTMLInputElement).checked;
         } else if (e.shiftKey) {
             e.preventDefault();
-
-            const values = getShowedData(model)!;
+            const allData = getShowedData(model)!;
+            const values = instance.get('pagination') ? instance.paginationState.getPagedData(model, allData) : allData;
             const checkedKeys = instance.get(`${model}CheckedKeys` as CheckedKeys)!.slice(0);
             const lastEndIndex = endIndex;
             const keyName = instance.get('keyName')!;

package/components/transfer/usePagination.ts

@@ -0,0 +1,92 @@
+import {useInstance, createRef} from 'intact';
+import type {Transfer} from './index';
+import type {Model} from './useFilter';
+import {useState} from '../../hooks/useState';
+import {Pagination, PaginationChangeData} from '../pagination';
+import {isObject} from 'intact-shared';
+import { useReceive } from '../../hooks/useReceive';
+
+const defaultPagination = Pagination.defaults();
+
+export function usePagination() {
+    const instance = useInstance() as Transfer;
+
+    const leftValue = useState<number>(defaultPagination.value!);
+    const leftLimit = useState<number>(defaultPagination.limit!);
+    const rightValue = useState<number>(defaultPagination.value!);
+    const rightLimit = useState<number>(defaultPagination.limit!);
+    
+    const leftPaginationRef = createRef<Pagination>();
+    const rightPaginationRef = createRef<Pagination>();
+
+    useReceive<Transfer>(['pagination'], () => {
+        const pagination = instance.get('pagination');
+        if (isObject(pagination)) {
+            if (pagination.value !== undefined) {
+                leftValue.set(pagination.value);
+                rightValue.set(pagination.value);
+            }
+            if (pagination.limit !== undefined) {
+                leftLimit.set(pagination.limit);
+                rightLimit.set(pagination.limit);
+            }
+        }
+    });
+
+    instance.watch('leftKeywords', () => {
+        leftValue.set(1);;
+    });
+    instance.watch('rightKeywords', () => {
+        rightValue.set(1);
+    });
+    
+    // 计算分页数据
+    function getPagedData(model: Model, allData: any[]) {
+        if (!instance.get('pagination')) {
+            return allData;
+        }
+        
+        const value = model === 'left' ? leftValue.value : rightValue.value;
+        const limit = model === 'left' ? leftLimit.value : rightLimit.value;
+        const totalPages = Math.ceil(allData.length / limit) || 1;
+        
+        // 如果当前页超出总页数，跳转到最后一页
+        let currentPage = value;
+        if (currentPage > totalPages && totalPages > 0) {
+            currentPage = totalPages;
+            if (model === 'left') {
+                leftValue.set(currentPage);
+            } else {
+                rightValue.set(currentPage);
+            }
+        }
+        
+        // 切片数据
+        const index = (currentPage - 1) * limit;
+        return allData.slice(index, index + limit);
+    }
+    
+    function onChange(model: Model, data: PaginationChangeData) {       
+        if (model === 'left') {
+            leftValue.set(data.value);
+            leftLimit.set(data.limit);
+        } else {
+            rightValue.set(data.value);
+            rightLimit.set(data.limit);
+        }
+        // 触发分页事件
+        instance.trigger('page', model, data);
+    }
+    
+    return {
+        getPagedData,
+        leftValue,
+        leftLimit,
+        rightValue,
+        rightLimit,
+        onChange,
+        leftPaginationRef,
+        rightPaginationRef,
+    };
+}
+