taro-uno-ui 0.9.0 → 1.0.0

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

@@ -64,136 +64,145 @@ export const TransferComponent = forwardRef<TransferRef, TransferProps>((props,
     setSearchValue,
     setPage,
     reset,
-  } = useTransferState(
-    controlledTargetKeys,
-    defaultTargetKeys,
-    controlledSelectedKeys,
-    defaultSelectedKeys,
-    disabled
-  );
+  } = useTransferState(controlledTargetKeys, defaultTargetKeys, controlledSelectedKeys, defaultSelectedKeys, disabled);
 
   // 处理选项点击
-  const handleItemClick = useCallback((item: TransferOption, _direction: TransferDirection) => {
-    if (item.disabled || internalDisabled) return;
-    
-    const itemKey = item.key;
-    const newSelectedKeys = selectedKeys.includes(itemKey)
-      ? selectedKeys.filter(key => key !== itemKey)
-      : [...selectedKeys, itemKey];
-    
-    updateSelectedKeys(newSelectedKeys);
-    updateLeftRightSelectedKeys(newSelectedKeys, targetKeys);
-    
-    onSelectChange?.(
-      newSelectedKeys.filter(key => !targetKeys.includes(key)),
-      newSelectedKeys.filter(key => targetKeys.includes(key))
-    );
-  }, [selectedKeys, targetKeys, internalDisabled, updateSelectedKeys, updateLeftRightSelectedKeys, onSelectChange]);
+  const handleItemClick = useCallback(
+    (item: TransferOption, _direction: TransferDirection) => {
+      if (item.disabled || internalDisabled) return;
+
+      const itemKey = item.key;
+      const newSelectedKeys = selectedKeys.includes(itemKey)
+        ? selectedKeys.filter((key) => key !== itemKey)
+        : [...selectedKeys, itemKey];
+
+      updateSelectedKeys(newSelectedKeys);
+      updateLeftRightSelectedKeys(newSelectedKeys, targetKeys);
+
+      onSelectChange?.(
+        newSelectedKeys.filter((key) => !targetKeys.includes(key)),
+        newSelectedKeys.filter((key) => targetKeys.includes(key)),
+      );
+    },
+    [selectedKeys, targetKeys, internalDisabled, updateSelectedKeys, updateLeftRightSelectedKeys, onSelectChange],
+  );
 
   // 处理全选
-  const handleSelectAll = useCallback((direction: TransferDirection) => {
-    if (internalDisabled) return;
-    
-    const sourceData = direction === 'left'
-      ? dataSource.filter((item: TransferOption) => !targetKeys.includes(item.key))
-      : dataSource.filter((item: TransferOption) => targetKeys.includes(item.key));
-
-    const searchValue = direction === 'left' ? leftSearchValue : rightSearchValue;
-
-    // 过滤数据
-    const filteredData = searchValue
-      ? sourceData.filter((item: TransferOption) => {
-          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);
-        })
-      : sourceData;
-    
-    const enabledData = filteredData.filter((item: TransferOption) => !item.disabled);
-    const currentSelectedKeys = direction === 'left' ? leftSelectedKeys : rightSelectedKeys;
-
-    const allSelected = enabledData.every((item: TransferOption) => currentSelectedKeys.includes(item.key));
-    const newSelectedKeys = allSelected
-      ? selectedKeys.filter(key => !enabledData.some((item: TransferOption) => item.key === key))
-      : [...selectedKeys, ...enabledData.map((item: TransferOption) => item.key)];
-    
-    updateSelectedKeys(newSelectedKeys);
-    updateLeftRightSelectedKeys(newSelectedKeys, targetKeys);
-    
-    onSelectChange?.(
-      newSelectedKeys.filter(key => !targetKeys.includes(key)),
-      newSelectedKeys.filter(key => targetKeys.includes(key))
-    );
-  }, [
-    dataSource,
-    targetKeys,
-    leftSearchValue,
-    rightSearchValue,
-    leftSelectedKeys,
-    rightSelectedKeys,
-    selectedKeys,
-    internalDisabled,
-    filterOption,
-    updateSelectedKeys,
-    updateLeftRightSelectedKeys,
-    onSelectChange
-  ]);
+  const handleSelectAll = useCallback(
+    (direction: TransferDirection) => {
+      if (internalDisabled) return;
+
+      const sourceData =
+        direction === 'left'
+          ? dataSource.filter((item: TransferOption) => !targetKeys.includes(item.key))
+          : dataSource.filter((item: TransferOption) => targetKeys.includes(item.key));
+
+      const searchValue = direction === 'left' ? leftSearchValue : rightSearchValue;
+
+      // 过滤数据
+      const filteredData = searchValue
+        ? sourceData.filter((item: TransferOption) => {
+            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);
+          })
+        : sourceData;
+
+      const enabledData = filteredData.filter((item: TransferOption) => !item.disabled);
+      const currentSelectedKeys = direction === 'left' ? leftSelectedKeys : rightSelectedKeys;
+
+      const allSelected = enabledData.every((item: TransferOption) => currentSelectedKeys.includes(item.key));
+      const newSelectedKeys = allSelected
+        ? selectedKeys.filter((key) => !enabledData.some((item: TransferOption) => item.key === key))
+        : [...selectedKeys, ...enabledData.map((item: TransferOption) => item.key)];
+
+      updateSelectedKeys(newSelectedKeys);
+      updateLeftRightSelectedKeys(newSelectedKeys, targetKeys);
+
+      onSelectChange?.(
+        newSelectedKeys.filter((key) => !targetKeys.includes(key)),
+        newSelectedKeys.filter((key) => targetKeys.includes(key)),
+      );
+    },
+    [
+      dataSource,
+      targetKeys,
+      leftSearchValue,
+      rightSearchValue,
+      leftSelectedKeys,
+      rightSelectedKeys,
+      selectedKeys,
+      internalDisabled,
+      filterOption,
+      updateSelectedKeys,
+      updateLeftRightSelectedKeys,
+      onSelectChange,
+    ],
+  );
 
   // 处理移动
-  const handleMove = useCallback((direction: TransferDirection) => {
-    if (internalDisabled) return;
-    
-    const moveKeys = direction === 'right' ? leftSelectedKeys : rightSelectedKeys;
-    if (moveKeys.length === 0) return;
-    
-    const newTargetKeys = direction === 'right'
-      ? [...targetKeys, ...moveKeys]
-      : targetKeys.filter(key => !moveKeys.includes(key));
-    
-    updateTargetKeys(newTargetKeys);
-    
-    // 清空移动方向的选中状态
-    const newSelectedKeys = selectedKeys.filter(key => !moveKeys.includes(key));
-    updateSelectedKeys(newSelectedKeys);
-    
-    if (direction === 'right') {
-      updateLeftRightSelectedKeys(newSelectedKeys, newTargetKeys);
-    } else {
-      updateLeftRightSelectedKeys(newSelectedKeys, newTargetKeys);
-    }
-    
-    onChange?.(newTargetKeys, direction, moveKeys);
-    onSelectChange?.(
-      newSelectedKeys.filter(key => !newTargetKeys.includes(key)),
-      newSelectedKeys.filter(key => newTargetKeys.includes(key))
-    );
-  }, [
-    targetKeys,
-    leftSelectedKeys,
-    rightSelectedKeys,
-    selectedKeys,
-    internalDisabled,
-    updateTargetKeys,
-    updateSelectedKeys,
-    updateLeftRightSelectedKeys,
-    onChange,
-    onSelectChange
-  ]);
+  const handleMove = useCallback(
+    (direction: TransferDirection) => {
+      if (internalDisabled) return;
+
+      const moveKeys = direction === 'right' ? leftSelectedKeys : rightSelectedKeys;
+      if (moveKeys.length === 0) return;
+
+      const newTargetKeys =
+        direction === 'right' ? [...targetKeys, ...moveKeys] : targetKeys.filter((key) => !moveKeys.includes(key));
+
+      updateTargetKeys(newTargetKeys);
+
+      // 清空移动方向的选中状态
+      const newSelectedKeys = selectedKeys.filter((key) => !moveKeys.includes(key));
+      updateSelectedKeys(newSelectedKeys);
+
+      if (direction === 'right') {
+        updateLeftRightSelectedKeys(newSelectedKeys, newTargetKeys);
+      } else {
+        updateLeftRightSelectedKeys(newSelectedKeys, newTargetKeys);
+      }
+
+      onChange?.(newTargetKeys, direction, moveKeys);
+      onSelectChange?.(
+        newSelectedKeys.filter((key) => !newTargetKeys.includes(key)),
+        newSelectedKeys.filter((key) => newTargetKeys.includes(key)),
+      );
+    },
+    [
+      targetKeys,
+      leftSelectedKeys,
+      rightSelectedKeys,
+      selectedKeys,
+      internalDisabled,
+      updateTargetKeys,
+      updateSelectedKeys,
+      updateLeftRightSelectedKeys,
+      onChange,
+      onSelectChange,
+    ],
+  );
 
   // 处理搜索
-  const handleSearch = useCallback((direction: TransferDirection, value: string) => {
-    setSearchValue(direction, value);
-    onSearch?.(direction, value);
-  }, [setSearchValue, onSearch]);
+  const handleSearch = useCallback(
+    (direction: TransferDirection, value: string) => {
+      setSearchValue(direction, value);
+      onSearch?.(direction, value);
+    },
+    [setSearchValue, onSearch],
+  );
 
   // 处理页码变化
-  const handlePageChange = useCallback((direction: TransferDirection, page: number) => {
-    setPage(direction, page);
-  }, [setPage]);
+  const handlePageChange = useCallback(
+    (direction: TransferDirection, page: number) => {
+      setPage(direction, page);
+    },
+    [setPage],
+  );
 
   // 暴露给外部的引用方法
   React.useImperativeHandle(
@@ -202,15 +211,19 @@ export const TransferComponent = forwardRef<TransferRef, TransferProps>((props,
       getTargetKeys: () => targetKeys,
       setTargetKeys: (keys: TransferValue) => {
         updateTargetKeys(keys);
-        onChange?.(keys, 'right', keys.filter(key => !targetKeys.includes(key)));
+        onChange?.(
+          keys,
+          'right',
+          keys.filter((key) => !targetKeys.includes(key)),
+        );
       },
       getSelectedKeys: () => selectedKeys,
       setSelectedKeys: (keys: TransferValue) => {
         updateSelectedKeys(keys);
         updateLeftRightSelectedKeys(keys, targetKeys);
         onSelectChange?.(
-          keys.filter(key => !targetKeys.includes(key)),
-          keys.filter(key => targetKeys.includes(key))
+          keys.filter((key) => !targetKeys.includes(key)),
+          keys.filter((key) => targetKeys.includes(key)),
         );
       },
       getDataSource: () => dataSource,
@@ -220,10 +233,9 @@ export const TransferComponent = forwardRef<TransferRef, TransferProps>((props,
         console.warn('setDataSource should be updated through props');
       },
       moveTo: (direction: TransferDirection, keys: TransferValue) => {
-        const newTargetKeys = direction === 'right'
-          ? [...targetKeys, ...keys]
-          : targetKeys.filter(key => !keys.includes(key));
-        
+        const newTargetKeys =
+          direction === 'right' ? [...targetKeys, ...keys] : targetKeys.filter((key) => !keys.includes(key));
+
         updateTargetKeys(newTargetKeys);
         onChange?.(newTargetKeys, direction, keys);
       },
@@ -231,20 +243,20 @@ export const TransferComponent = forwardRef<TransferRef, TransferProps>((props,
         handleSelectAll(direction);
       },
       clearSelect: (direction: TransferDirection) => {
-        const newSelectedKeys = selectedKeys.filter(key => {
+        const newSelectedKeys = selectedKeys.filter((key) => {
           if (direction === 'left') {
             return targetKeys.includes(key);
           } else {
             return !targetKeys.includes(key);
           }
         });
-        
+
         updateSelectedKeys(newSelectedKeys);
         updateLeftRightSelectedKeys(newSelectedKeys, targetKeys);
-        
+
         onSelectChange?.(
-          newSelectedKeys.filter(key => !targetKeys.includes(key)),
-          newSelectedKeys.filter(key => targetKeys.includes(key))
+          newSelectedKeys.filter((key) => !targetKeys.includes(key)),
+          newSelectedKeys.filter((key) => targetKeys.includes(key)),
         );
       },
       search: (direction: TransferDirection, value: string) => {
@@ -286,7 +298,7 @@ export const TransferComponent = forwardRef<TransferRef, TransferProps>((props,
       handleSelectAll,
       handleSearch,
       reset,
-    ]
+    ],
   );
 
   // 生成容器样式
@@ -399,4 +411,4 @@ TransferComponent.displayName = 'Transfer';
 
 /** 导出Transfer组件 */
 export const Transfer = TransferComponent;
-export default Transfer;
+export default Transfer;

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

@@ -262,18 +262,29 @@ export interface TransferConfig {
 /** 穿梭框工具函数接口 */
 export interface TransferUtils {
   /** 过滤选项 */
-  filterOptions: (options: TransferDataSource, inputValue: string, filterOption?: TransferProps['filterOption']) => TransferDataSource;
+  filterOptions: (
+    options: TransferDataSource,
+    inputValue: string,
+    filterOption?: TransferProps['filterOption'],
+  ) => TransferDataSource;
   /** 查找选项 */
   findOptions: (options: TransferDataSource, keys: TransferValue) => TransferOption[];
   /** 验证值 */
   validateValue: (value: TransferValue, options: TransferDataSource) => boolean;
   /** 分割数据源 */
-  splitDataSource: (dataSource: TransferDataSource, targetKeys: TransferValue) => {
+  splitDataSource: (
+    dataSource: TransferDataSource,
+    targetKeys: TransferValue,
+  ) => {
     leftDataSource: TransferDataSource;
     rightDataSource: TransferDataSource;
   };
   /** 生成分页数据 */
-  generatePaginationData: (data: TransferDataSource, currentPage: number, pageSize: number) => {
+  generatePaginationData: (
+    data: TransferDataSource,
+    currentPage: number,
+    pageSize: number,
+  ) => {
     data: TransferDataSource;
     total: number;
     currentPage: number;
@@ -348,11 +359,11 @@ export class TransferTools {
   static filterOptions(
     options: TransferDataSource,
     inputValue: string,
-    filterOption?: TransferProps['filterOption']
+    filterOption?: TransferProps['filterOption'],
   ): TransferDataSource {
     if (!inputValue) return options;
 
-    return options.filter(option => {
+    return options.filter((option) => {
       if (filterOption) {
         return filterOption(inputValue, option);
       }
@@ -367,19 +378,19 @@ export class TransferTools {
 
   /** 查找选项 */
   static findOptions(options: TransferDataSource, keys: TransferValue): TransferOption[] {
-    return options.filter(option => keys.includes(option.key));
+    return options.filter((option) => keys.includes(option.key));
   }
 
   /** 验证值 */
   static validateValue(value: TransferValue, options: TransferDataSource): boolean {
-    const validKeys = options.map(option => option.key);
-    return value.every(key => validKeys.includes(key));
+    const validKeys = options.map((option) => option.key);
+    return value.every((key) => validKeys.includes(key));
   }
 
   /** 分割数据源 */
   static splitDataSource(
     dataSource: TransferDataSource,
-    targetKeys: TransferValue
+    targetKeys: TransferValue,
   ): {
     leftDataSource: TransferDataSource;
     rightDataSource: TransferDataSource;
@@ -387,7 +398,7 @@ export class TransferTools {
     const leftDataSource: TransferDataSource = [];
     const rightDataSource: TransferDataSource = [];
 
-    dataSource.forEach(option => {
+    dataSource.forEach((option) => {
       if (targetKeys.includes(option.key)) {
         rightDataSource.push(option);
       } else {
@@ -402,7 +413,7 @@ export class TransferTools {
   static generatePaginationData(
     data: TransferDataSource,
     currentPage: number,
-    pageSize: number
+    pageSize: number,
   ): {
     data: TransferDataSource;
     total: number;
@@ -426,23 +437,20 @@ export class TransferTools {
   }
 
   /** 获取选中的选项 */
-  static getSelectedOptions(
-    options: TransferDataSource,
-    selectedKeys: TransferValue
-  ): TransferOption[] {
-    return options.filter(option => selectedKeys.includes(option.key));
+  static getSelectedOptions(options: TransferDataSource, selectedKeys: TransferValue): TransferOption[] {
+    return options.filter((option) => selectedKeys.includes(option.key));
   }
 
   /** 获取禁用的选项 */
   static getDisabledOptions(options: TransferDataSource): TransferOption[] {
-    return options.filter(option => option.disabled);
+    return options.filter((option) => option.disabled);
   }
 
   /** 排序选项 */
   static sortOptions(
     options: TransferDataSource,
     sortBy: keyof TransferOption,
-    order: 'asc' | 'desc' = 'asc'
+    order: 'asc' | 'desc' = 'asc',
   ): TransferDataSource {
     return [...options].sort((a, b) => {
       const aValue = a[sortBy];
@@ -457,7 +465,7 @@ export class TransferTools {
   /** 去重选项 */
   static uniqueOptions(options: TransferDataSource): TransferDataSource {
     const seen = new Set();
-    return options.filter(option => {
+    return options.filter((option) => {
       if (seen.has(option.key)) {
         return false;
       }
@@ -469,10 +477,10 @@ export class TransferTools {
   /** 批量更新选项状态 */
   static updateOptionsStatus(
     options: TransferDataSource,
-    updates: { key: string | number; disabled?: boolean; selected?: boolean }[]
+    updates: { key: string | number; disabled?: boolean; selected?: boolean }[],
   ): TransferDataSource {
-    return options.map(option => {
-      const update = updates.find(u => u.key === option.key);
+    return options.map((option) => {
+      const update = updates.find((u) => u.key === option.key);
       if (update) {
         return { ...option, ...update };
       }
@@ -483,7 +491,7 @@ export class TransferTools {
   /** 计算选中状态 */
   static calculateSelectionState(
     options: TransferDataSource,
-    selectedKeys: TransferValue
+    selectedKeys: TransferValue,
   ): {
     allSelected: boolean;
     partiallySelected: boolean;
@@ -491,9 +499,9 @@ export class TransferTools {
     selectedCount: number;
     totalCount: number;
   } {
-    const enabledOptions = options.filter(option => !option.disabled);
+    const enabledOptions = options.filter((option) => !option.disabled);
     const totalCount = enabledOptions.length;
-    const selectedCount = enabledOptions.filter(option => selectedKeys.includes(option.key)).length;
+    const selectedCount = enabledOptions.filter((option) => selectedKeys.includes(option.key)).length;
 
     const allSelected = totalCount > 0 && selectedCount === totalCount;
     const noneSelected = selectedCount === 0;
@@ -554,4 +562,4 @@ export class TransferTools {
       showQuickJumper: pagination.showQuickJumper || false,
     };
   }
-}
+}

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

@@ -23,79 +23,72 @@ interface TransferItemProps {
 }
 
 /** Transfer选项组件 */
-export const TransferItem: React.FC<TransferItemProps> = memo(({
-  item,
-  direction,
-  isSelected,
-  disabled,
-  onClick,
-  optionRender,
-  rowRender,
-  index = 0,
-}) => {
-  // 处理点击事件
-  const handleClick = useCallback(() => {
-    if (!disabled) {
-      onClick(item, direction);
+export const TransferItem: React.FC<TransferItemProps> = memo(
+  ({ item, direction, isSelected, disabled, onClick, optionRender, rowRender, index = 0 }) => {
+    // 处理点击事件
+    const handleClick = useCallback(() => {
+      if (!disabled) {
+        onClick(item, direction);
+      }
+    }, [item, direction, disabled, onClick]);
+
+    // 移除了鼠标事件处理函数，因为在Taro环境中可能不支持
+
+    // 使用自定义行渲染
+    if (rowRender) {
+      return (
+        <View
+          key={String(item.key)}
+          style={TransferStyles['getListItemStyle'](disabled, isSelected)}
+          className={item.className}
+          onClick={handleClick}
+          accessibilityState={{ selected: isSelected, disabled: disabled }}
+          role="option"
+        >
+          {rowRender(item, index, direction)}
+        </View>
+      );
     }
-  }, [item, direction, disabled, onClick]);
 
-  // 移除了鼠标事件处理函数，因为在Taro环境中可能不支持
+    // 默认渲染
+    const itemStyle = {
+      ...TransferStyles['getListItemStyle'](disabled, isSelected),
+      ...(item.style || {}),
+    };
+
+    const checkboxStyle = {
+      ...TransferStyles['getListItemCheckboxStyle'](),
+      ...(isSelected ? TransferStyles['getListItemCheckboxSelectedStyle']() : {}),
+      ...(disabled ? TransferStyles['getListItemCheckboxDisabledStyle']() : {}),
+    };
 
-  // 使用自定义行渲染
-  if (rowRender) {
     return (
       <View
         key={String(item.key)}
-        style={TransferStyles['getListItemStyle'](disabled, isSelected)}
+        style={itemStyle}
         className={item.className}
         onClick={handleClick}
-          accessibilityState={{ selected: isSelected, disabled: disabled }}
+        accessibilityState={{ selected: isSelected, disabled: disabled }}
         role="option"
       >
-        {rowRender(item, index, direction)}
+        <View style={checkboxStyle} hidden={true}>
+          {isSelected && <Text accessibilityLabel="已选中">✓</Text>}
+        </View>
+        <View style={TransferStyles['getListItemContentStyle']()}>
+          {optionRender ? (
+            optionRender(item)
+          ) : (
+            <View>
+              <Text>{item.title}</Text>
+              {item.description && (
+                <Text style={TransferStyles['getListItemDescriptionStyle']()}>{item.description}</Text>
+              )}
+            </View>
+          )}
+        </View>
       </View>
     );
-  }
-
-  // 默认渲染
-  const itemStyle = {
-    ...TransferStyles['getListItemStyle'](disabled, isSelected),
-    ...(item.style || {}),
-  };
-
-  const checkboxStyle = {
-    ...TransferStyles['getListItemCheckboxStyle'](),
-    ...(isSelected ? TransferStyles['getListItemCheckboxSelectedStyle']() : {}),
-    ...(disabled ? TransferStyles['getListItemCheckboxDisabledStyle']() : {}),
-  };
-
-  return (
-    <View
-      key={String(item.key)}
-      style={itemStyle}
-      className={item.className}
-      onClick={handleClick}
-      accessibilityState={{ selected: isSelected, disabled: disabled }}
-      role="option"
-    >
-      <View style={checkboxStyle} hidden={true}>
-        {isSelected && <Text accessibilityLabel="已选中">✓</Text>}
-      </View>
-      <View style={TransferStyles['getListItemContentStyle']()}>
-        {optionRender ? optionRender(item) : (
-          <View>
-            <Text>{item.title}</Text>
-            {item.description && (
-              <Text style={TransferStyles['getListItemDescriptionStyle']()}>
-                {item.description}
-              </Text>
-            )}
-          </View>
-        )}
-      </View>
-    </View>
-  );
-});
+  },
+);
 
 TransferItem.displayName = 'TransferItem';