taro-uno-ui 0.9.0 → 1.0.0

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

@@ -20,116 +20,120 @@ interface TransferPaginationProps {
 }
 
 /** Transfer分页组件 */
-export const TransferPagination: React.FC<TransferPaginationProps> = memo(({
-  pagination,
-  currentPage,
-  total,
-  onPageChange,
-  disabled,
-}) => {
-  // 获取分页配置
-  const getPaginationConfig = useCallback(() => {
-    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,
-    };
-  }, [pagination]);
-
-  const config = getPaginationConfig();
-  if (!config) return null;
-
-  const { pageSize, simple, showQuickJumper } = config;
-  const totalPages = Math.ceil(total / pageSize);
-
-  // 如果只有一页，不显示分页
-  if (totalPages <= 1) {
-    return null;
-  }
-
-  // 处理页码变化
-  const handlePageChange = useCallback((newPage: number) => {
-    if (newPage >= 1 && newPage <= totalPages && !disabled) {
-      onPageChange(newPage);
-    }
-  }, [totalPages, disabled, onPageChange]);
+export const TransferPagination: React.FC<TransferPaginationProps> = memo(
+  ({ pagination, currentPage, total, onPageChange, disabled }) => {
+    // 获取分页配置
+    const getPaginationConfig = useCallback(() => {
+      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,
+      };
+    }, [pagination]);
 
-  // 处理快速跳转输入
-  const handleQuickJumperChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-    const newPage = parseInt(e.target.value);
-    if (!isNaN(newPage) && newPage >= 1 && newPage <= totalPages) {
-      handlePageChange(newPage);
+    const config = getPaginationConfig();
+    if (!config) return null;
+
+    const { pageSize, simple, showQuickJumper } = config;
+    const totalPages = Math.ceil(total / pageSize);
+
+    // 如果只有一页，不显示分页
+    if (totalPages <= 1) {
+      return null;
     }
-  }, [totalPages, handlePageChange]);
-
-  // 分页按钮
-  const PaginationButton: React.FC<{
-    onClick: () => void;
-    disabled: boolean;
-    children: React.ReactNode;
-    ariaLabel: string;
-  }> = memo(({ onClick, disabled, children, ariaLabel }) => (
-    <View
-      style={{
-        ...TransferStyles['getPaginationButtonStyle'](disabled),
-        ...(disabled ? {} : TransferStyles['getPaginationButtonHoverStyle']()),
-      }}
-      onClick={onClick}
-      aria-disabled={disabled}
-      aria-label={ariaLabel}
-      role="button"
-    >
-      <Text>{children}</Text>
-    </View>
-  ));
-
-  PaginationButton.displayName = 'PaginationButton';
-
-  return (
-    <View style={TransferStyles['getPaginationStyle']()} role="navigation" aria-label="分页导航">
-      <Text style={TransferStyles['getPaginationInfoStyle']()}>
-        {simple ? `${currentPage} / ${totalPages}` : `${(currentPage - 1) * pageSize + 1}-${Math.min(currentPage * pageSize, total)} / ${total}`}
-      </Text>
-      
-      {!simple && (
-        <View style={{ display: 'flex', gap: '4px' }} role="group" aria-label="分页按钮组">
-          <PaginationButton
-            onClick={() => handlePageChange(currentPage - 1)}
-            disabled={currentPage === 1 || disabled}
-            ariaLabel="上一页"
-          >
-            ‹
-          </PaginationButton>
-          
-          {showQuickJumper && (
-            <Input
-              type="number"
-              style={TransferStyles['getPaginationSelectStyle']()}
-              value={currentPage.toString()}
-              onInput={handleQuickJumperChange as any}
-              accessibilityLabel="跳转到指定页"
-              disabled={disabled}
-            />
-          )}
-          
-          <PaginationButton
-            onClick={() => handlePageChange(currentPage + 1)}
-            disabled={currentPage === totalPages || disabled}
-            ariaLabel="下一页"
-          >
-            ›
-          </PaginationButton>
-        </View>
-      )}
-    </View>
-  );
-});
-
-TransferPagination.displayName = 'TransferPagination';
+
+    // 处理页码变化
+    const handlePageChange = useCallback(
+      (newPage: number) => {
+        if (newPage >= 1 && newPage <= totalPages && !disabled) {
+          onPageChange(newPage);
+        }
+      },
+      [totalPages, disabled, onPageChange],
+    );
+
+    // 处理快速跳转输入
+    const handleQuickJumperChange = useCallback(
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        const newPage = parseInt(e.target.value);
+        if (!isNaN(newPage) && newPage >= 1 && newPage <= totalPages) {
+          handlePageChange(newPage);
+        }
+      },
+      [totalPages, handlePageChange],
+    );
+
+    // 分页按钮
+    const PaginationButton: React.FC<{
+      onClick: () => void;
+      disabled: boolean;
+      children: React.ReactNode;
+      ariaLabel: string;
+    }> = memo(({ onClick, disabled, children, ariaLabel }) => (
+      <View
+        style={{
+          ...TransferStyles['getPaginationButtonStyle'](disabled),
+          ...(disabled ? {} : TransferStyles['getPaginationButtonHoverStyle']()),
+        }}
+        onClick={onClick}
+        aria-disabled={disabled}
+        aria-label={ariaLabel}
+        role="button"
+      >
+        <Text>{children}</Text>
+      </View>
+    ));
+
+    PaginationButton.displayName = 'PaginationButton';
+
+    return (
+      <View style={TransferStyles['getPaginationStyle']()} role="navigation" aria-label="分页导航">
+        <Text style={TransferStyles['getPaginationInfoStyle']()}>
+          {simple
+            ? `${currentPage} / ${totalPages}`
+            : `${(currentPage - 1) * pageSize + 1}-${Math.min(currentPage * pageSize, total)} / ${total}`}
+        </Text>
+
+        {!simple && (
+          <View style={{ display: 'flex', gap: '4px' }} role="group" aria-label="分页按钮组">
+            <PaginationButton
+              onClick={() => handlePageChange(currentPage - 1)}
+              disabled={currentPage === 1 || disabled}
+              ariaLabel="上一页"
+            >
+              ‹
+            </PaginationButton>
+
+            {showQuickJumper && (
+              <Input
+                type="number"
+                style={TransferStyles['getPaginationSelectStyle']()}
+                value={currentPage.toString()}
+                onInput={handleQuickJumperChange as any}
+                accessibilityLabel="跳转到指定页"
+                disabled={disabled}
+              />
+            )}
+
+            <PaginationButton
+              onClick={() => handlePageChange(currentPage + 1)}
+              disabled={currentPage === totalPages || disabled}
+              ariaLabel="下一页"
+            >
+              ›
+            </PaginationButton>
+          </View>
+        )}
+      </View>
+    );
+  },
+);
+
+TransferPagination.displayName = 'TransferPagination';

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

@@ -22,67 +22,64 @@ interface TransferSearchProps {
 }
 
 /** Transfer搜索组件 */
-export const TransferSearch: React.FC<TransferSearchProps> = memo(({
-  direction,
-  showSearch,
-  searchValue,
-  searchPlaceholder,
-  onSearch,
-  searchRender,
-  disabled,
-}) => {
-  // 处理搜索输入
-  const handleSearchInput = useCallback((value: string) => {
-    onSearch(direction, value);
-  }, [direction, onSearch]);
+export const TransferSearch: React.FC<TransferSearchProps> = memo(
+  ({ direction, showSearch, searchValue, searchPlaceholder, onSearch, searchRender, disabled }) => {
+    // 处理搜索输入
+    const handleSearchInput = useCallback(
+      (value: string) => {
+        onSearch(direction, value);
+      },
+      [direction, onSearch],
+    );
+
+    // 处理输入框聚焦
+    const handleFocus = useCallback(() => {
+      // Taro doesn't provide direct access to input element styling
+      // Focus handling is handled by the native component
+    }, []);
 
-  // 处理输入框聚焦
-  const handleFocus = useCallback(() => {
-    // Taro doesn't provide direct access to input element styling
-    // Focus handling is handled by the native component
-  }, []);
+    // 处理输入框失焦
+    const handleBlur = useCallback(() => {
+      // Taro doesn't provide direct access to input element styling
+      // Blur handling is handled by the native component
+    }, []);
 
-  // 处理输入框失焦
-  const handleBlur = useCallback(() => {
-    // Taro doesn't provide direct access to input element styling
-    // Blur handling is handled by the native component
-  }, []);
+    // 如果不显示搜索框，返回null
+    if (!showSearch) {
+      return null;
+    }
 
-  // 如果不显示搜索框，返回null
-  if (!showSearch) {
-    return null;
-  }
+    // 使用自定义搜索渲染
+    if (searchRender) {
+      return (
+        <View style={TransferStyles['getSearchStyle']()}>
+          {searchRender({
+            placeholder: searchPlaceholder,
+            value: searchValue,
+            onChange: handleSearchInput,
+            direction,
+          })}
+        </View>
+      );
+    }
 
-  // 使用自定义搜索渲染
-  if (searchRender) {
+    // 默认搜索渲染
     return (
       <View style={TransferStyles['getSearchStyle']()}>
-        {searchRender({
-          placeholder: searchPlaceholder,
-          value: searchValue,
-          onChange: handleSearchInput,
-          direction,
-        })}
+        <Input
+          style={TransferStyles['getSearchInputStyle']()}
+          value={searchValue}
+          placeholder={searchPlaceholder}
+          onInput={(e: any) => handleSearchInput(e.detail.value)}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          disabled={disabled}
+          aria-label={searchPlaceholder}
+          role="searchbox"
+        />
       </View>
     );
-  }
-
-  // 默认搜索渲染
-  return (
-    <View style={TransferStyles['getSearchStyle']()}>
-      <Input
-        style={TransferStyles['getSearchInputStyle']()}
-        value={searchValue}
-        placeholder={searchPlaceholder}
-        onInput={(e: any) => handleSearchInput(e.detail.value)}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        disabled={disabled}
-        aria-label={searchPlaceholder}
-        role="searchbox"
-      />
-    </View>
-  );
-});
+  },
+);
 
-TransferSearch.displayName = 'TransferSearch';
+TransferSearch.displayName = 'TransferSearch';

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

@@ -4,21 +4,21 @@ import type {
   TransferDataSource,
   TransferValue,
   TransferPaginationConfig,
-  TransferProps
+  TransferProps,
 } from '../Transfer.types';
 
 /** Transfer数据处理Hook */
 export function useTransferData(
   dataSource: TransferDataSource,
   targetKeys: TransferValue,
-  filterOption?: TransferProps['filterOption']
+  filterOption?: TransferProps['filterOption'],
 ) {
   // 分割数据源
   const splitDataSource = useMemo(() => {
     const leftDataSource: TransferOption[] = [];
     const rightDataSource: TransferOption[] = [];
 
-    dataSource.forEach(item => {
+    dataSource.forEach((item) => {
       if (targetKeys.includes(item.key)) {
         rightDataSource.push(item);
       } else {
@@ -30,30 +30,33 @@ export function useTransferData(
   }, [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 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,
@@ -63,61 +66,69 @@ export function useTransferData(
   }, []);
 
   // 获取分页数据
-  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 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 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 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 getSelectedOptions = useCallback(
+    (selectedKeys: TransferValue) => {
+      return dataSource.filter((item) => selectedKeys.includes(item.key));
+    },
+    [dataSource],
+  );
 
   // 获取目标选项
   const getTargetOptions = useCallback(() => {
-    return dataSource.filter(item => targetKeys.includes(item.key));
+    return dataSource.filter((item) => targetKeys.includes(item.key));
   }, [dataSource, targetKeys]);
 
   // 获取源选项
   const getSourceOptions = useCallback(() => {
-    return dataSource.filter(item => !targetKeys.includes(item.key));
+    return dataSource.filter((item) => !targetKeys.includes(item.key));
   }, [dataSource, targetKeys]);
 
   // 获取禁用的选项
   const getDisabledOptions = useCallback(() => {
-    return dataSource.filter(item => item.disabled);
+    return dataSource.filter((item) => item.disabled);
   }, [dataSource]);
 
   // 计算选中状态
   const calculateSelectionState = useCallback((data: TransferDataSource, selectedKeys: TransferValue) => {
-    const enabledData = data.filter(item => !item.disabled);
+    const enabledData = data.filter((item) => !item.disabled);
     const totalCount = enabledData.length;
-    const selectedCount = enabledData.filter(item => selectedKeys.includes(item.key)).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;
@@ -132,23 +143,23 @@ export function useTransferData(
   }, []);
 
   // 批量更新选项状态
-  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 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 => {
+    return options.filter((option) => {
       if (seen.has(option.key)) {
         return false;
       }
@@ -158,20 +169,19 @@ export function useTransferData(
   }, []);
 
   // 排序选项
-  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;
-    });
-  }, []);
+  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,
@@ -189,4 +199,4 @@ export function useTransferData(
     uniqueOptions,
     sortOptions,
   };
-}
+}