taro-uno-ui 0.9.0-beta

package/src/components/form/Transfer/hooks/useTransferData.ts

@@ -0,0 +1,192 @@
+import { useMemo, useCallback } from 'react';
+import type {
+  TransferOption,
+  TransferDataSource,
+  TransferValue,
+  TransferPaginationConfig,
+  TransferProps
+} from '../Transfer.types';
+
+/** Transfer数据处理Hook */
+export function useTransferData(
+  dataSource: TransferDataSource,
+  targetKeys: TransferValue,
+  filterOption?: TransferProps['filterOption']
+) {
+  // 分割数据源
+  const splitDataSource = useMemo(() => {
+    const leftDataSource: TransferOption[] = [];
+    const rightDataSource: TransferOption[] = [];
+
+    dataSource.forEach(item => {
+      if (targetKeys.includes(item.key)) {
+        rightDataSource.push(item);
+      } else {
+        leftDataSource.push(item);
+      }
+    });
+
+    return { leftDataSource, rightDataSource };
+  }, [dataSource, targetKeys]);
+
+  // 过滤数据源
+  const filterDataSource = useCallback((data: TransferDataSource, searchValue: string) => {
+    if (!searchValue) return data;
+    
+    return data.filter(item => {
+      if (filterOption) {
+        return filterOption(searchValue, item);
+      }
+      
+      const searchText = searchValue.toLowerCase();
+      const title = String(item.title).toLowerCase();
+      const description = item.description ? String(item.description).toLowerCase() : '';
+      
+      return title.includes(searchText) || description.includes(searchText);
+    });
+  }, [filterOption]);
+
+  // 获取分页配置
+  const getPaginationConfig = useCallback((pagination?: boolean | TransferPaginationConfig) => {
+    if (pagination === false) return null;
+    
+    if (pagination === true) {
+      return { pageSize: 10, simple: false, showSizeChanger: false, showQuickJumper: false };
+    }
+    
+    return {
+      pageSize: pagination?.pageSize || 10,
+      simple: pagination?.simple || false,
+      showSizeChanger: pagination?.showSizeChanger || false,
+      showQuickJumper: pagination?.showQuickJumper || false,
+    };
+  }, []);
+
+  // 获取分页数据
+  const getPaginatedData = useCallback((
+    data: TransferDataSource, 
+    page: number, 
+    pagination?: boolean | TransferPaginationConfig
+  ) => {
+    const config = getPaginationConfig(pagination);
+    if (!config) return { data, total: data.length, page, totalPages: 1 };
+    
+    const { pageSize } = config;
+    const total = data.length;
+    const totalPages = Math.ceil(total / pageSize);
+    const startIndex = (page - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    const paginatedData = data.slice(startIndex, endIndex);
+    
+    return { data: paginatedData, total, page, totalPages };
+  }, [getPaginationConfig]);
+
+  // 查找选项
+  const findOptions = useCallback((keys: TransferValue) => {
+    return dataSource.filter(item => keys.includes(item.key));
+  }, [dataSource]);
+
+  // 验证值
+  const validateValue = useCallback((value: TransferValue) => {
+    const validKeys = dataSource.map(option => option.key);
+    return value.every(key => validKeys.includes(key));
+  }, [dataSource]);
+
+  // 获取选中的选项
+  const getSelectedOptions = useCallback((selectedKeys: TransferValue) => {
+    return dataSource.filter(item => selectedKeys.includes(item.key));
+  }, [dataSource]);
+
+  // 获取目标选项
+  const getTargetOptions = useCallback(() => {
+    return dataSource.filter(item => targetKeys.includes(item.key));
+  }, [dataSource, targetKeys]);
+
+  // 获取源选项
+  const getSourceOptions = useCallback(() => {
+    return dataSource.filter(item => !targetKeys.includes(item.key));
+  }, [dataSource, targetKeys]);
+
+  // 获取禁用的选项
+  const getDisabledOptions = useCallback(() => {
+    return dataSource.filter(item => item.disabled);
+  }, [dataSource]);
+
+  // 计算选中状态
+  const calculateSelectionState = useCallback((data: TransferDataSource, selectedKeys: TransferValue) => {
+    const enabledData = data.filter(item => !item.disabled);
+    const totalCount = enabledData.length;
+    const selectedCount = enabledData.filter(item => selectedKeys.includes(item.key)).length;
+    
+    const allSelected = totalCount > 0 && selectedCount === totalCount;
+    const noneSelected = selectedCount === 0;
+    const partiallySelected = !allSelected && !noneSelected;
+
+    return {
+      allSelected,
+      partiallySelected,
+      noneSelected,
+      selectedCount,
+      totalCount,
+    };
+  }, []);
+
+  // 批量更新选项状态
+  const updateOptionsStatus = useCallback((
+    options: TransferDataSource,
+    updates: { key: string | number; disabled?: boolean; selected?: boolean }[]
+  ) => {
+    return options.map(option => {
+      const update = updates.find(u => u.key === option.key);
+      if (update) {
+        return { ...option, ...update };
+      }
+      return option;
+    });
+  }, []);
+
+  // 去重选项
+  const uniqueOptions = useCallback((options: TransferDataSource) => {
+    const seen = new Set();
+    return options.filter(option => {
+      if (seen.has(option.key)) {
+        return false;
+      }
+      seen.add(option.key);
+      return true;
+    });
+  }, []);
+
+  // 排序选项
+  const sortOptions = useCallback((
+    options: TransferDataSource,
+    sortBy: keyof TransferOption,
+    order: 'asc' | 'desc' = 'asc'
+  ) => {
+    return [...options].sort((a, b) => {
+      const aValue = a[sortBy];
+      const bValue = b[sortBy];
+      
+      if (aValue < bValue) return order === 'asc' ? -1 : 1;
+      if (aValue > bValue) return order === 'asc' ? 1 : -1;
+      return 0;
+    });
+  }, []);
+
+  return {
+    splitDataSource,
+    filterDataSource,
+    getPaginationConfig,
+    getPaginatedData,
+    findOptions,
+    validateValue,
+    getSelectedOptions,
+    getTargetOptions,
+    getSourceOptions,
+    getDisabledOptions,
+    calculateSelectionState,
+    updateOptionsStatus,
+    uniqueOptions,
+    sortOptions,
+  };
+}

package/src/components/form/Transfer/hooks/useTransferState.ts

@@ -0,0 +1,114 @@
+import { useState, useEffect, useCallback } from 'react';
+import type { TransferValue, TransferDirection } from '../Transfer.types';
+
+/** Transfer状态管理Hook */
+export function useTransferState(
+  controlledTargetKeys?: TransferValue,
+  defaultTargetKeys: TransferValue = [],
+  controlledSelectedKeys?: TransferValue,
+  defaultSelectedKeys: TransferValue = [],
+  disabled: boolean = false
+) {
+  // 内部状态
+  const [internalTargetKeys, setInternalTargetKeys] = useState<TransferValue>(defaultTargetKeys);
+  const [internalSelectedKeys, setInternalSelectedKeys] = useState<TransferValue>(defaultSelectedKeys);
+  const [leftSelectedKeys, setLeftSelectedKeys] = useState<TransferValue>([]);
+  const [rightSelectedKeys, setRightSelectedKeys] = useState<TransferValue>([]);
+  const [leftSearchValue, setLeftSearchValue] = useState('');
+  const [rightSearchValue, setRightSearchValue] = useState('');
+  const [internalDisabled, setInternalDisabled] = useState(disabled);
+  const [leftPage, setLeftPage] = useState(1);
+  const [rightPage, setRightPage] = useState(1);
+
+  // 受控状态判断
+  const isTargetKeysControlled = controlledTargetKeys !== undefined;
+  const isSelectedKeysControlled = controlledSelectedKeys !== undefined;
+
+  // 当前值
+  const targetKeys = isTargetKeysControlled ? controlledTargetKeys : internalTargetKeys;
+  const selectedKeys = isSelectedKeysControlled ? controlledSelectedKeys : internalSelectedKeys;
+
+  // 更新禁用状态
+  useEffect(() => {
+    setInternalDisabled(disabled);
+  }, [disabled]);
+
+  // 更新目标键
+  const updateTargetKeys = useCallback((newKeys: TransferValue) => {
+    if (!isTargetKeysControlled) {
+      setInternalTargetKeys(newKeys);
+    }
+  }, [isTargetKeysControlled]);
+
+  // 更新选中键
+  const updateSelectedKeys = useCallback((newKeys: TransferValue) => {
+    if (!isSelectedKeysControlled) {
+      setInternalSelectedKeys(newKeys);
+    }
+  }, [isSelectedKeysControlled]);
+
+  // 更新左右选中键
+  const updateLeftRightSelectedKeys = useCallback((newKeys: TransferValue, currentTargetKeys: TransferValue) => {
+    setLeftSelectedKeys(newKeys.filter(key => !currentTargetKeys.includes(key)));
+    setRightSelectedKeys(newKeys.filter(key => currentTargetKeys.includes(key)));
+  }, []);
+
+  // 设置搜索值
+  const setSearchValue = useCallback((direction: TransferDirection, value: string) => {
+    if (direction === 'left') {
+      setLeftSearchValue(value);
+    } else {
+      setRightSearchValue(value);
+    }
+  }, []);
+
+  // 设置页码
+  const setPage = useCallback((direction: TransferDirection, page: number) => {
+    if (direction === 'left') {
+      setLeftPage(page);
+    } else {
+      setRightPage(page);
+    }
+  }, []);
+
+  // 重置状态
+  const reset = useCallback(() => {
+    if (!isTargetKeysControlled) {
+      setInternalTargetKeys(defaultTargetKeys);
+    }
+    if (!isSelectedKeysControlled) {
+      setInternalSelectedKeys(defaultSelectedKeys);
+    }
+    setLeftSelectedKeys([]);
+    setRightSelectedKeys([]);
+    setLeftSearchValue('');
+    setRightSearchValue('');
+    setLeftPage(1);
+    setRightPage(1);
+  }, [isTargetKeysControlled, isSelectedKeysControlled, defaultTargetKeys, defaultSelectedKeys]);
+
+  return {
+    // 状态值
+    targetKeys,
+    selectedKeys,
+    leftSelectedKeys,
+    rightSelectedKeys,
+    leftSearchValue,
+    rightSearchValue,
+    internalDisabled,
+    leftPage,
+    rightPage,
+    
+    // 受控状态
+    isTargetKeysControlled,
+    isSelectedKeysControlled,
+    
+    // 更新函数
+    updateTargetKeys,
+    updateSelectedKeys,
+    updateLeftRightSelectedKeys,
+    setSearchValue,
+    setPage,
+    reset,
+  };
+}

package/src/components/form/Transfer/index.ts

@@ -0,0 +1,33 @@
+/** Transfer 穿梭框组件导出文件 */
+export { Transfer } from './Transfer';
+export type {
+  TransferProps,
+  TransferRef,
+  TransferOption,
+  TransferDataSource,
+  TransferValue,
+  TransferDirection,
+  TransferSize,
+  TransferStatus,
+  TransferLayout,
+  TransferRenderPosition,
+  TransferNativeProps,
+  TransferConfig,
+  TransferUtils,
+  TransferEvents,
+  TransferPaginationConfig,
+  SearchRenderProps,
+  ListRenderProps,
+} from './Transfer.types';
+export { TransferStyles } from './Transfer.styles';
+export { TransferTools } from './Transfer.types';
+export { useTransferState, useTransferData } from './hooks';
+export {
+  TransferItem,
+  TransferSearch,
+  TransferPagination,
+  TransferOperations,
+  TransferList,
+} from './components';
+import { Transfer } from './Transfer';
+export default Transfer;

package/src/components/form/Upload/Upload.styles.ts

@@ -0,0 +1,145 @@
+import type { CSSProperties } from 'react';
+
+export const uploadStyles: Record<string, CSSProperties> = {
+  container: {
+    width: '100%',
+  },
+  
+  uploadArea: {
+    marginBottom: '16px',
+  },
+  
+  dragArea: {
+    border: '2px dashed #d1d5db',
+    borderRadius: '8px',
+    padding: '32px',
+    textAlign: 'center',
+    backgroundColor: '#f9fafb',
+    transition: 'border-color 0.2s ease-in-out',
+    cursor: 'pointer',
+  },
+  
+  dragDisabled: {
+    opacity: 0.5,
+    cursor: 'not-allowed',
+  },
+  
+  dragContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '16px',
+  },
+  
+  dragText: {
+    color: '#6b7280',
+    fontSize: '14px',
+    marginBottom: '8px',
+  },
+  
+  fileList: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+  },
+  
+  fileItem: {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: '12px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    backgroundColor: '#ffffff',
+  },
+  
+  fileInfo: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    flex: 1,
+  },
+  
+  fileName: {
+    fontSize: '14px',
+    fontWeight: '500',
+    color: '#1f2937',
+  },
+  
+  fileSize: {
+    fontSize: '12px',
+    color: '#6b7280',
+  },
+  
+  fileStatus: {
+    fontSize: '12px',
+    color: '#0ea5e9',
+  },
+  
+  fileError: {
+    color: '#ef4444',
+  },
+  
+  fileActions: {
+    display: 'flex',
+    gap: '8px',
+  },
+  
+  // Picture card style
+  pictureCard: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))',
+    gap: '8px',
+  },
+  
+  pictureCardItem: {
+    position: 'relative',
+    width: '100px',
+    height: '100px',
+    border: '1px solid #e5e7eb',
+    borderRadius: '6px',
+    overflow: 'hidden',
+  },
+  
+  pictureCardImage: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+  
+  pictureCardOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    opacity: 0,
+    transition: 'opacity 0.2s ease-in-out',
+  },
+  
+  // Disabled state
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+  
+  // Progress bar
+  progress: {
+    width: '100%',
+    height: '4px',
+    backgroundColor: '#e5e7eb',
+    borderRadius: '2px',
+    overflow: 'hidden',
+    marginTop: '8px',
+  },
+  
+  progressBar: {
+    height: '100%',
+    backgroundColor: '#0ea5e9',
+    transition: 'width 0.2s ease-in-out',
+  },
+};

package/src/components/form/Upload/Upload.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { Upload } from './Upload'
+
+describe('Upload', () => {
+  it.skip('renders upload button', () => {
+    render(<Upload />)
+    expect(screen.getByText(/上传文件|选择文件/)).toBeInTheDocument()
+  })
+})