taro-uno-ui 0.9.0-beta → 1.0.0

package/src/components/form/Transfer/components/TransferList.tsx

@@ -10,7 +10,7 @@ import type {
   TransferDirection,
   TransferDataSource,
   TransferPaginationConfig,
-  TransferProps 
+  TransferProps,
 } from '../Transfer.types';
 
 interface TransferListProps {
@@ -65,221 +65,234 @@ interface TransferListProps {
 }
 
 /** Transfer列表组件 */
-export const TransferList: React.FC<TransferListProps> = memo(({
-  direction,
-  dataSource,
-  targetKeys,
-  selectedKeys,
-  showSearch,
-  showSelectAll,
-  pagination,
-  title,
-  notFoundContent,
-  searchPlaceholder,
-  searchValue,
-  currentPage,
-  disabled,
-  onItemClick,
-  onSelectAll,
-  onSearch,
-  onPageChange,
-  // render: removed - not used
-  optionRender,
-  rowRender,
-  searchRender,
-  emptyRender,
-  footer,
-  filterOption,
-}) => {
-  // 过滤数据源
-  const filterDataSource = useCallback((data: TransferDataSource, searchValue: string) => {
-    if (!searchValue) return data;
-    
-    return data.filter(item => {
-      if (filterOption) {
-        return filterOption(searchValue, item);
+export const TransferList: React.FC<TransferListProps> = memo(
+  ({
+    direction,
+    dataSource,
+    targetKeys,
+    selectedKeys,
+    showSearch,
+    showSelectAll,
+    pagination,
+    title,
+    notFoundContent,
+    searchPlaceholder,
+    searchValue,
+    currentPage,
+    disabled,
+    onItemClick,
+    onSelectAll,
+    onSearch,
+    onPageChange,
+    // render: removed - not used
+    optionRender,
+    rowRender,
+    searchRender,
+    emptyRender,
+    footer,
+    filterOption,
+  }) => {
+    // 过滤数据源
+    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 getPaginatedData = useCallback(
+      (data: TransferDataSource, page: number) => {
+        if (pagination === false) return { data, total: data.length, page, totalPages: 1 };
+
+        const pageSize = pagination === true ? 10 : pagination?.pageSize || 10;
+        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 };
+      },
+      [pagination],
+    );
+
+    // 计算全选状态
+    const calculateSelectAllState = useCallback(
+      (data: TransferDataSource) => {
+        const enabledData = data.filter((item) => !item.disabled);
+        const totalCount = enabledData.length;
+        const selectedCount = enabledData.filter((item) => selectedKeys.includes(item.key)).length;
+
+        return {
+          allSelected: totalCount > 0 && selectedCount === totalCount,
+          selectedCount,
+          totalCount,
+        };
+      },
+      [selectedKeys],
+    );
+
+    // 获取当前方向的数据源
+    const getCurrentDataSource = useCallback(() => {
+      return direction === 'left'
+        ? dataSource.filter((item) => !targetKeys.includes(item.key))
+        : dataSource.filter((item) => targetKeys.includes(item.key));
+    }, [dataSource, targetKeys, direction]);
+
+    // 获取当前数据
+    const currentData = getCurrentDataSource();
+    const filteredData = filterDataSource(currentData, searchValue);
+    const { data: paginatedData } = getPaginatedData(filteredData, currentPage);
+    const { allSelected, selectedCount, totalCount } = calculateSelectAllState(filteredData);
+
+    // 处理全选点击
+    const handleSelectAllClick = useCallback(() => {
+      if (!disabled) {
+        onSelectAll(direction);
       }
-      
-      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]);
+    }, [disabled, onSelectAll, direction]);
+
+    // 渲染全选框
+    const renderSelectAll = useCallback(() => {
+      if (!showSelectAll) return null;
 
-  // 获取分页数据
-  const getPaginatedData = useCallback((data: TransferDataSource, page: number) => {
-    if (pagination === false) return { data, total: data.length, page, totalPages: 1 };
+      const checkboxStyle = {
+        ...TransferStyles['getSelectAllCheckboxStyle'](),
+        ...(allSelected ? TransferStyles['getSelectAllCheckboxSelectedStyle']() : {}),
+      };
 
-    const pageSize = pagination === true ? 10 : pagination?.pageSize || 10;
-    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 (
+        <View
+          style={TransferStyles['getSelectAllStyle']()}
+          onClick={handleSelectAllClick}
+          role="button"
+          aria-label={allSelected ? '取消全选' : '全选'}
+          aria-checked={allSelected}
+        >
+          <View style={checkboxStyle} aria-hidden={true}>
+            {allSelected && <Text>✓</Text>}
+          </View>
+          <Text style={TransferStyles['getSelectAllLabelStyle']()}>
+            全选 ({selectedCount} / {totalCount})
+          </Text>
+        </View>
+      );
+    }, [showSelectAll, allSelected, selectedCount, totalCount, disabled, handleSelectAllClick]);
+
+    // 渲染列表项
+    const renderItem = useCallback(
+      (item: TransferOption, index: number) => (
+        <TransferItem
+          key={String(item.key)}
+          item={item}
+          direction={direction}
+          isSelected={selectedKeys.includes(item.key)}
+          disabled={item.disabled || disabled}
+          onClick={onItemClick}
+          optionRender={optionRender}
+          rowRender={rowRender}
+          index={index}
+        />
+      ),
+      [selectedKeys, disabled, onItemClick, optionRender, rowRender, direction],
+    );
 
-    return { data: paginatedData, total, page, totalPages };
-  }, [pagination]);
+    // 渲染空状态
+    const renderEmpty = useCallback(
+      () => (
+        <View style={TransferStyles['getEmptyStyle']()} accessibilityRole="status" accessibilityLiveRegion="polite">
+          <Text>{emptyRender ? emptyRender(direction) : notFoundContent}</Text>
+        </View>
+      ),
+      [emptyRender, notFoundContent, direction],
+    );
 
-  // 计算全选状态
-  const calculateSelectAllState = useCallback((data: TransferDataSource) => {
-    const enabledData = data.filter(item => !item.disabled);
-    const totalCount = enabledData.length;
-    const selectedCount = enabledData.filter(item => selectedKeys.includes(item.key)).length;
-    
-    return {
-      allSelected: totalCount > 0 && selectedCount === totalCount,
-      selectedCount,
-      totalCount,
-    };
-  }, [selectedKeys]);
+    // 渲染底部
+    const renderFooter = useCallback(() => {
+      if (!footer) return null;
 
-  // 获取当前方向的数据源
-  const getCurrentDataSource = useCallback(() => {
-    return direction === 'left' 
-      ? dataSource.filter(item => !targetKeys.includes(item.key))
-      : dataSource.filter(item => targetKeys.includes(item.key));
-  }, [dataSource, targetKeys, direction]);
+      const leftData = dataSource.filter((item) => !targetKeys.includes(item.key));
+      const rightData = dataSource.filter((item) => targetKeys.includes(item.key));
 
-  // 获取当前数据
-  const currentData = getCurrentDataSource();
-  const filteredData = filterDataSource(currentData, searchValue);
-  const { data: paginatedData } = getPaginatedData(filteredData, currentPage);
-  const { allSelected, selectedCount, totalCount } = calculateSelectAllState(filteredData);
+      return (
+        <View style={TransferStyles['getFooterStyle']()}>
+          {footer({
+            direction,
+            dataSource: [leftData, rightData],
+          })}
+        </View>
+      );
+    }, [footer, dataSource, targetKeys, direction]);
 
-  // 处理全选点击
-  const handleSelectAllClick = useCallback(() => {
-    if (!disabled) {
-      onSelectAll(direction);
-    }
-  }, [disabled, onSelectAll, direction]);
+    // 计算列表标题
+    const listTitle = direction === 'left' ? title : Array.isArray(title) ? title[1] : title;
+    const listCount = direction === 'left' ? currentData.length : targetKeys.length;
 
-  // 渲染全选框
-  const renderSelectAll = useCallback(() => {
-    if (!showSelectAll) return null;
-    
-    const checkboxStyle = {
-      ...TransferStyles['getSelectAllCheckboxStyle'](),
-      ...(allSelected ? TransferStyles['getSelectAllCheckboxSelectedStyle']() : {}),
-    };
-    
     return (
       <View
-        style={TransferStyles['getSelectAllStyle']()}
-        onClick={handleSelectAllClick}
-        role="button"
-        aria-label={allSelected ? '取消全选' : '全选'}
-        aria-checked={allSelected}
+        style={TransferStyles['getListStyle']()}
+        role="region"
+        accessibilityLabel={`${direction === 'left' ? '源' : '目标'}列表`}
       >
-        <View style={checkboxStyle} aria-hidden={true}>
-          {allSelected && <Text>✓</Text>}
+        {/* 列表头部 */}
+        <View style={TransferStyles['getListHeaderStyle']()}>
+          <Text style={TransferStyles['getListTitleStyle']()}>{listTitle}</Text>
+          <Text style={TransferStyles['getListCountStyle']()} accessibilityLiveRegion="polite">
+            {listCount} 项
+          </Text>
         </View>
-        <Text style={TransferStyles['getSelectAllLabelStyle']()}>
-          全选 ({selectedCount} / {totalCount})
-        </Text>
-      </View>
-    );
-  }, [showSelectAll, allSelected, selectedCount, totalCount, disabled, handleSelectAllClick]);
 
-  // 渲染列表项
-  const renderItem = useCallback((item: TransferOption, index: number) => (
-    <TransferItem
-      key={String(item.key)}
-      item={item}
-      direction={direction}
-      isSelected={selectedKeys.includes(item.key)}
-      disabled={item.disabled || disabled}
-      onClick={onItemClick}
-      optionRender={optionRender}
-      rowRender={rowRender}
-      index={index}
-    />
-  ), [selectedKeys, disabled, onItemClick, optionRender, rowRender, direction]);
+        {/* 搜索框 */}
+        <TransferSearch
+          direction={direction}
+          showSearch={showSearch}
+          searchValue={searchValue}
+          searchPlaceholder={searchPlaceholder}
+          onSearch={onSearch}
+          searchRender={searchRender}
+          disabled={disabled}
+        />
 
-  // 渲染空状态
-  const renderEmpty = useCallback(() => (
-    <View style={TransferStyles['getEmptyStyle']()} accessibilityRole="status" accessibilityLiveRegion="polite">
-      <Text>{emptyRender ? emptyRender(direction) : notFoundContent}</Text>
-    </View>
-  ), [emptyRender, notFoundContent, direction]);
+        {/* 全选框 */}
+        {renderSelectAll()}
 
-  // 渲染底部
-  const renderFooter = useCallback(() => {
-    if (!footer) return null;
-    
-    const leftData = dataSource.filter(item => !targetKeys.includes(item.key));
-    const rightData = dataSource.filter(item => targetKeys.includes(item.key));
-    
-    return (
-      <View style={TransferStyles['getFooterStyle']()}>
-        {footer({ 
-          direction, 
-          dataSource: [leftData, rightData] 
-        })}
-      </View>
-    );
-  }, [footer, dataSource, targetKeys, direction]);
+        {/* 列表内容 */}
+        <View
+          style={TransferStyles['getListContentStyle']()}
+          role="list"
+          accessibilityLabel={`${direction === 'left' ? '源' : '目标'}选项列表`}
+        >
+          {paginatedData.length > 0 ? paginatedData.map((item, index) => renderItem(item, index)) : renderEmpty()}
+        </View>
 
-  // 计算列表标题
-  const listTitle = direction === 'left' ? title : (Array.isArray(title) ? title[1] : title);
-  const listCount = direction === 'left' ? currentData.length : targetKeys.length;
+        {/* 分页 */}
+        <TransferPagination
+          direction={direction}
+          pagination={pagination}
+          currentPage={currentPage}
+          total={filteredData.length}
+          onPageChange={onPageChange}
+          disabled={disabled}
+        />
 
-  return (
-    <View 
-      style={TransferStyles['getListStyle']()}
-      role="region"
-      accessibilityLabel={`${direction === 'left' ? '源' : '目标'}列表`}
-    >
-      {/* 列表头部 */}
-      <View style={TransferStyles['getListHeaderStyle']()}>
-        <Text style={TransferStyles['getListTitleStyle']()}>{listTitle}</Text>
-        <Text style={TransferStyles['getListCountStyle']()} accessibilityLiveRegion="polite">
-          {listCount} 项
-        </Text>
+        {/* 底部 */}
+        {renderFooter()}
       </View>
-      
-      {/* 搜索框 */}
-      <TransferSearch
-        direction={direction}
-        showSearch={showSearch}
-        searchValue={searchValue}
-        searchPlaceholder={searchPlaceholder}
-        onSearch={onSearch}
-        searchRender={searchRender}
-        disabled={disabled}
-      />
-      
-      {/* 全选框 */}
-      {renderSelectAll()}
-      
-      {/* 列表内容 */}
-      <View 
-        style={TransferStyles['getListContentStyle']()}
-        role="list"
-        accessibilityLabel={`${direction === 'left' ? '源' : '目标'}选项列表`}
-      >
-        {paginatedData.length > 0 ? (
-          paginatedData.map((item, index) => renderItem(item, index))
-        ) : (
-          renderEmpty()
-        )}
-      </View>
-      
-      {/* 分页 */}
-      <TransferPagination
-        direction={direction}
-        pagination={pagination}
-        currentPage={currentPage}
-        total={filteredData.length}
-        onPageChange={onPageChange}
-        disabled={disabled}
-      />
-      
-      {/* 底部 */}
-      {renderFooter()}
-    </View>
-  );
-});
+    );
+  },
+);
 
-TransferList.displayName = 'TransferList';
+TransferList.displayName = 'TransferList';

package/src/components/form/Transfer/components/TransferOperations.tsx

@@ -21,64 +21,61 @@ interface TransferOperationsProps {
 }
 
 /** Transfer操作组件 */
-export const TransferOperations: React.FC<TransferOperationsProps> = memo(({
-  showOperations,
-  operations,
-  leftSelectedKeys,
-  rightSelectedKeys,
-  disabled,
-  onMove,
-  operationRender,
-}) => {
-  // 如果不显示操作按钮，返回null
-  if (!showOperations) {
-    return null;
-  }
-
-  // 处理移动操作
-  const handleMove = useCallback((direction: TransferDirection) => {
-    if (!disabled) {
-      onMove(direction);
+export const TransferOperations: React.FC<TransferOperationsProps> = memo(
+  ({ showOperations, operations, leftSelectedKeys, rightSelectedKeys, disabled, onMove, operationRender }) => {
+    // 如果不显示操作按钮，返回null
+    if (!showOperations) {
+      return null;
     }
-  }, [disabled, onMove]);
 
-  return (
-    <View style={TransferStyles['getOperationStyle']()} role="group" accessibilityLabel="穿梭操作按钮">
-      {operations.map((operation, index) => {
-        const direction = index === 0 ? 'right' : 'left';
-        const selectedKeys = direction === 'right' ? leftSelectedKeys : rightSelectedKeys;
-        const isDisabled = selectedKeys.length === 0 || disabled;
-        
-        // 使用自定义操作渲染
-        if (operationRender) {
+    // 处理移动操作
+    const handleMove = useCallback(
+      (direction: TransferDirection) => {
+        if (!disabled) {
+          onMove(direction);
+        }
+      },
+      [disabled, onMove],
+    );
+
+    return (
+      <View style={TransferStyles['getOperationStyle']()} role="group" accessibilityLabel="穿梭操作按钮">
+        {operations.map((operation, index) => {
+          const direction = index === 0 ? 'right' : 'left';
+          const selectedKeys = direction === 'right' ? leftSelectedKeys : rightSelectedKeys;
+          const isDisabled = selectedKeys.length === 0 || disabled;
+
+          // 使用自定义操作渲染
+          if (operationRender) {
+            return (
+              <View key={index} role="none">
+                {operationRender(direction)}
+              </View>
+            );
+          }
+
+          // 默认操作按钮
+          const buttonStyle = {
+            ...TransferStyles['getOperationButtonStyle'](isDisabled),
+            ...(isDisabled ? {} : TransferStyles['getOperationButtonHoverStyle']()),
+          };
+
           return (
-            <View key={index} role="none">
-              {operationRender(direction)}
+            <View
+              key={index}
+              style={buttonStyle}
+              onClick={() => handleMove(direction)}
+              aria-disabled={isDisabled}
+              role="button"
+              aria-label={`移动到${direction === 'right' ? '右侧' : '左侧'}`}
+            >
+              <Text>{operation}</Text>
             </View>
           );
-        }
-        
-        // 默认操作按钮
-        const buttonStyle = {
-          ...TransferStyles['getOperationButtonStyle'](isDisabled),
-          ...(isDisabled ? {} : TransferStyles['getOperationButtonHoverStyle']()),
-        };
-
-        return (
-          <View
-            key={index}
-            style={buttonStyle}
-            onClick={() => handleMove(direction)}
-            aria-disabled={isDisabled}
-            role="button"
-            aria-label={`移动到${direction === 'right' ? '右侧' : '左侧'}`}
-          >
-            <Text>{operation}</Text>
-          </View>
-        );
-      })}
-    </View>
-  );
-});
+        })}
+      </View>
+    );
+  },
+);
 
-TransferOperations.displayName = 'TransferOperations';
+TransferOperations.displayName = 'TransferOperations';