taro-uno-ui 1.0.1 → 1.0.2

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

@@ -1,298 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import { View, Text } from '@tarojs/components';
-import { TransferStyles } from '../Transfer.styles';
-import { TransferItem } from './TransferItem';
-import { TransferSearch } from './TransferSearch';
-import { TransferPagination } from './TransferPagination';
-import type {
-  TransferOption,
-  TransferValue,
-  TransferDirection,
-  TransferDataSource,
-  TransferPaginationConfig,
-  TransferProps,
-} from '../Transfer.types';
-
-interface TransferListProps {
-  /** 方向 */
-  direction: TransferDirection;
-  /** 数据源 */
-  dataSource: TransferDataSource;
-  /** 目标键 */
-  targetKeys: TransferValue;
-  /** 选中键 */
-  selectedKeys: TransferValue;
-  /** 是否显示搜索框 */
-  showSearch: boolean;
-  /** 是否显示全选 */
-  showSelectAll: boolean;
-  /** 分页配置 */
-  pagination?: boolean | TransferPaginationConfig;
-  /** 标题 */
-  title: React.ReactNode;
-  /** 无数据文本 */
-  notFoundContent: React.ReactNode;
-  /** 搜索占位符 */
-  searchPlaceholder: string;
-  /** 搜索值 */
-  searchValue: string;
-  /** 当前页码 */
-  currentPage: number;
-  /** 是否禁用 */
-  disabled: boolean;
-  /** 点击选项回调 */
-  onItemClick: (item: TransferOption, direction: TransferDirection) => void;
-  /** 全选回调 */
-  onSelectAll: (direction: TransferDirection) => void;
-  /** 搜索回调 */
-  onSearch: (direction: TransferDirection, value: string) => void;
-  /** 页码变化回调 */
-  onPageChange: (page: number) => void;
-  /** 自定义渲染函数 */
-  render?: TransferProps['render'];
-  /** 自定义选项渲染 */
-  optionRender?: TransferProps['optionRender'];
-  /** 自定义行渲染 */
-  rowRender?: TransferProps['rowRender'];
-  /** 自定义搜索渲染 */
-  searchRender?: TransferProps['searchRender'];
-  /** 自定义空状态渲染 */
-  emptyRender?: TransferProps['emptyRender'];
-  /** 自定义底部渲染 */
-  footer?: TransferProps['footer'];
-  /** 过滤函数 */
-  filterOption?: TransferProps['filterOption'];
-}
-
-/** 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);
-          }
-
-          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);
-      }
-    }, [disabled, onSelectAll, direction]);
-
-    // 渲染全选框
-    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}
-        >
-          <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],
-    );
-
-    // 渲染空状态
-    const renderEmpty = useCallback(
-      () => (
-        <View style={TransferStyles['getEmptyStyle']()} accessibilityRole="status" accessibilityLiveRegion="polite">
-          <Text>{emptyRender ? emptyRender(direction) : notFoundContent}</Text>
-        </View>
-      ),
-      [emptyRender, notFoundContent, direction],
-    );
-
-    // 渲染底部
-    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]);
-
-    // 计算列表标题
-    const listTitle = direction === 'left' ? title : Array.isArray(title) ? title[1] : title;
-    const listCount = direction === 'left' ? currentData.length : targetKeys.length;
-
-    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>
-        </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';

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

@@ -1,81 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import { View, Text } from '@tarojs/components';
-import { TransferStyles } from '../Transfer.styles';
-import type { TransferDirection } from '../Transfer.types';
-
-interface TransferOperationsProps {
-  /** 是否显示操作按钮 */
-  showOperations: boolean;
-  /** 操作按钮文本 */
-  operations: (string | React.ReactNode)[];
-  /** 左侧选中键 */
-  leftSelectedKeys: (string | number)[];
-  /** 右侧选中键 */
-  rightSelectedKeys: (string | number)[];
-  /** 是否禁用 */
-  disabled: boolean;
-  /** 移动回调 */
-  onMove: (direction: TransferDirection) => void;
-  /** 自定义操作渲染 */
-  operationRender?: (direction: TransferDirection) => React.ReactNode;
-}
-
-/** 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);
-        }
-      },
-      [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}
-              style={buttonStyle}
-              onClick={() => handleMove(direction)}
-              aria-disabled={isDisabled}
-              role="button"
-              aria-label={`移动到${direction === 'right' ? '右侧' : '左侧'}`}
-            >
-              <Text>{operation}</Text>
-            </View>
-          );
-        })}
-      </View>
-    );
-  },
-);
-
-TransferOperations.displayName = 'TransferOperations';

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

@@ -1,139 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import { View, Text } from '@tarojs/components';
-import { Input } from '../../../form/Input';
-import { TransferStyles } from '../Transfer.styles';
-import type { TransferDirection, TransferPaginationConfig } from '../Transfer.types';
-
-interface TransferPaginationProps {
-  /** 方向 */
-  direction: TransferDirection;
-  /** 分页配置 */
-  pagination?: boolean | TransferPaginationConfig;
-  /** 当前页码 */
-  currentPage: number;
-  /** 数据总数 */
-  total: number;
-  /** 页码变化回调 */
-  onPageChange: (page: number) => void;
-  /** 是否禁用 */
-  disabled: boolean;
-}
-
-/** 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],
-    );
-
-    // 处理快速跳转输入
-    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

@@ -1,85 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import { View } from '@tarojs/components';
-import { Input } from '../../../form/Input';
-import { TransferStyles } from '../Transfer.styles';
-import type { SearchRenderProps, TransferDirection } from '../Transfer.types';
-
-interface TransferSearchProps {
-  /** 方向 */
-  direction: TransferDirection;
-  /** 是否显示搜索框 */
-  showSearch: boolean;
-  /** 搜索值 */
-  searchValue: string;
-  /** 搜索占位符 */
-  searchPlaceholder: string;
-  /** 搜索回调 */
-  onSearch: (direction: TransferDirection, value: string) => void;
-  /** 自定义搜索渲染 */
-  searchRender?: (props: SearchRenderProps) => React.ReactNode;
-  /** 是否禁用 */
-  disabled: boolean;
-}
-
-/** 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],
-    );
-
-    // 处理输入框聚焦
-    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
-    }, []);
-
-    // 如果不显示搜索框，返回null
-    if (!showSearch) {
-      return null;
-    }
-
-    // 使用自定义搜索渲染
-    if (searchRender) {
-      return (
-        <View style={TransferStyles['getSearchStyle']()}>
-          {searchRender({
-            placeholder: searchPlaceholder,
-            value: searchValue,
-            onChange: handleSearchInput,
-            direction,
-          })}
-        </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';

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

@@ -1,6 +0,0 @@
-/** Transfer子组件导出文件 */
-export { TransferItem } from './TransferItem';
-export { TransferSearch } from './TransferSearch';
-export { TransferPagination } from './TransferPagination';
-export { TransferOperations } from './TransferOperations';
-export { TransferList } from './TransferList';

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

@@ -1,3 +0,0 @@
-/** Transfer Hooks导出文件 */
-export { useTransferState } from './useTransferState';
-export { useTransferData } from './useTransferData';