taro-uno-ui 1.0.0 → 1.0.2

package/src/components/navigation/Pagination/Pagination.tsx

@@ -1,395 +0,0 @@
-import React, { forwardRef, useRef, useState, useEffect, useCallback } from 'react';
-import { View, Text, Picker } from '@tarojs/components';
-import { Input } from '../../form/Input';
-import { paginationStyles } from './Pagination.styles';
-import type { PaginationProps, PaginationRef } from './Pagination.types';
-
-/** Pagination组件 */
-export const PaginationComponent = forwardRef<PaginationRef, PaginationProps>((props, ref) => {
-  const {
-    current: controlledCurrent,
-    defaultCurrent = 1,
-    pageSize: controlledPageSize,
-    defaultPageSize = 10,
-    total,
-    size = 'default',
-    showTotal,
-    showQuickJumper = false,
-    showSizeChanger = false,
-    pageSizeOptions = [10, 20, 50, 100],
-    disabled = false,
-    simple = false,
-    showMore: _showMore = true,
-    showLessItems: _showLessItems = false,
-    position = 'bottom',
-    align = 'right',
-    itemRender,
-    onChange,
-    onShowSizeChange,
-    className,
-    style,
-    ...restProps
-  } = props;
-
-  const paginationRef = useRef<any>(null);
-  const [internalCurrent, setInternalCurrent] = useState(defaultCurrent);
-  const [internalPageSize, setInternalPageSize] = useState(defaultPageSize);
-  const [jumpInput, setJumpInput] = useState('');
-
-  // 计算总页数
-  const totalPages = Math.ceil(total / internalPageSize);
-
-  // 处理受控模式
-  useEffect(() => {
-    if (controlledCurrent !== undefined) {
-      setInternalCurrent(controlledCurrent);
-    }
-  }, [controlledCurrent]);
-
-  useEffect(() => {
-    if (controlledPageSize !== undefined) {
-      setInternalPageSize(controlledPageSize);
-    }
-  }, [controlledPageSize]);
-
-  // 处理页码改变
-  const handlePageChange = useCallback(
-    (page: number) => {
-      if (page < 1 || page > totalPages || disabled) return;
-
-      if (controlledCurrent === undefined) {
-        setInternalCurrent(page);
-      }
-      onChange?.(page, internalPageSize);
-    },
-    [controlledCurrent, disabled, internalPageSize, onChange, totalPages],
-  );
-
-  // 处理每页条数改变
-  const handlePageSizeChange = useCallback(
-    (pageSize: number) => {
-      if (disabled) return;
-
-      const newCurrent = Math.min(internalCurrent, Math.ceil(total / pageSize));
-
-      if (controlledPageSize === undefined) {
-        setInternalPageSize(pageSize);
-      }
-      if (controlledCurrent === undefined) {
-        setInternalCurrent(newCurrent);
-      }
-
-      onShowSizeChange?.(newCurrent, pageSize);
-      onChange?.(newCurrent, pageSize);
-    },
-    [controlledCurrent, controlledPageSize, disabled, internalCurrent, total, onChange, onShowSizeChange],
-  );
-
-  // 处理快速跳转
-  const handleJump = useCallback(() => {
-    const page = parseInt(jumpInput);
-    if (!isNaN(page) && page >= 1 && page <= totalPages) {
-      handlePageChange(page);
-      setJumpInput('');
-    }
-  }, [jumpInput, totalPages, handlePageChange]);
-
-  // 生成页码数组
-  const generatePages = useCallback(() => {
-    const pages: number[] = [];
-    const current = internalCurrent;
-    const total = totalPages;
-
-    if (total <= 7) {
-      for (let i = 1; i <= total; i++) {
-        pages.push(i);
-      }
-    } else {
-      if (current <= 4) {
-        for (let i = 1; i <= 5; i++) {
-          pages.push(i);
-        }
-        pages.push(0);
-        pages.push(total);
-      } else if (current >= total - 3) {
-        pages.push(1);
-        pages.push(0);
-        for (let i = total - 4; i <= total; i++) {
-          pages.push(i);
-        }
-      } else {
-        pages.push(1);
-        pages.push(0);
-        for (let i = current - 1; i <= current + 1; i++) {
-          pages.push(i);
-        }
-        pages.push(0);
-        pages.push(total);
-      }
-    }
-
-    return pages;
-  }, [internalCurrent, totalPages]);
-
-  // 渲染页码按钮
-  const renderPageButton = (page: number) => {
-    const isActive = page === internalCurrent;
-    const isDisabled = disabled || page === 0;
-
-    if (page === 0) {
-      // 跳转按钮
-      const jumpPrev = internalCurrent > 4;
-      const jumpNext = internalCurrent < totalPages - 3;
-
-      if (jumpPrev) {
-        return (
-          <View
-            key="jump-prev"
-            className="taro-uno-pagination__jump-prev"
-            style={paginationStyles['getJumpButtonStyle'](size)}
-            onClick={() => !disabled && handlePageChange(internalCurrent - 5)}
-          >
-            ...
-          </View>
-        );
-      }
-
-      if (jumpNext) {
-        return (
-          <View
-            key="jump-next"
-            className="taro-uno-pagination__jump-next"
-            style={paginationStyles['getJumpButtonStyle'](size)}
-            onClick={() => !disabled && handlePageChange(internalCurrent + 5)}
-          >
-            ...
-          </View>
-        );
-      }
-
-      return null;
-    }
-
-    const buttonContent = itemRender ? itemRender(page, 'page', page) : <Text>{page}</Text>;
-
-    return (
-      <View
-        key={page}
-        className={`taro-uno-pagination__page ${isActive ? 'taro-uno-pagination__page--active' : ''}`}
-        style={paginationStyles['getPageButtonStyle']({
-          active: isActive,
-          disabled: isDisabled,
-          size,
-        })}
-        onClick={() => !isDisabled && handlePageChange(page)}
-      >
-        {buttonContent}
-      </View>
-    );
-  };
-
-  // 渲染上一页按钮
-  const renderPrevButton = () => {
-    const isDisabled = disabled || internalCurrent <= 1;
-
-    const buttonContent = itemRender ? itemRender(internalCurrent - 1, 'prev', '上一页') : <Text>上一页</Text>;
-
-    return (
-      <View
-        className="taro-uno-pagination__prev"
-        style={paginationStyles['getButtonStyle']({
-          disabled: isDisabled,
-          size,
-        })}
-        onClick={() => !isDisabled && handlePageChange(internalCurrent - 1)}
-      >
-        {buttonContent}
-      </View>
-    );
-  };
-
-  // 渲染下一页按钮
-  const renderNextButton = () => {
-    const isDisabled = disabled || internalCurrent >= totalPages;
-
-    const buttonContent = itemRender ? itemRender(internalCurrent + 1, 'next', '下一页') : <Text>下一页</Text>;
-
-    return (
-      <View
-        className="taro-uno-pagination__next"
-        style={paginationStyles['getButtonStyle']({
-          disabled: isDisabled,
-          size,
-        })}
-        onClick={() => !isDisabled && handlePageChange(internalCurrent + 1)}
-      >
-        {buttonContent}
-      </View>
-    );
-  };
-
-  // 渲染总数
-  const renderTotal = () => {
-    if (!showTotal) return null;
-
-    const start = (internalCurrent - 1) * internalPageSize + 1;
-    const end = Math.min(internalCurrent * internalPageSize, total);
-
-    const totalContent = typeof showTotal === 'function' ? showTotal(total, [start, end]) : `共 ${total} 条`;
-
-    return (
-      <View className="taro-uno-pagination__total" style={paginationStyles['getTotalStyle']()}>
-        {totalContent}
-      </View>
-    );
-  };
-
-  // 渲染快速跳转
-  const renderQuickJumper = () => {
-    if (!showQuickJumper) return null;
-
-    return (
-      <View className="taro-uno-pagination__quick-jumper" style={paginationStyles['getQuickJumperStyle']()}>
-        <Text>跳至</Text>
-        <Input
-          type="number"
-          value={jumpInput}
-          onInput={(e: any) => setJumpInput(e.detail.value)}
-          style={paginationStyles['getInputStyle']()}
-          disabled={disabled}
-        />
-        <Text>页</Text>
-        <View
-          className="taro-uno-pagination__jump-button"
-          style={paginationStyles['getButtonStyle']({ size })}
-          onClick={handleJump}
-        >
-          确定
-        </View>
-      </View>
-    );
-  };
-
-  // 渲染页码选择器
-  const renderSizeChanger = () => {
-    if (!showSizeChanger) return null;
-
-    const sizeIndex = pageSizeOptions.findIndex((size) => size === internalPageSize);
-
-    return (
-      <View className="taro-uno-pagination__size-changer">
-        <Picker
-          mode="selector"
-          range={pageSizeOptions}
-          rangeKey="label"
-          value={sizeIndex >= 0 ? sizeIndex : 0}
-          onChange={(e) => {
-            const selectedIndex = e.detail.value;
-            const selectedSize = pageSizeOptions[selectedIndex as number];
-            if (selectedSize !== undefined) {
-              handlePageSizeChange(selectedSize);
-            }
-          }}
-          disabled={disabled}
-        >
-          <View style={paginationStyles['getSelectStyle']()}>
-            <Text>{internalPageSize} 条/页</Text>
-          </View>
-        </Picker>
-      </View>
-    );
-  };
-
-  // 简单模式渲染
-  if (simple) {
-    return (
-      <View
-        ref={paginationRef}
-        className={paginationStyles['getClassName']({
-          size,
-          position,
-          align,
-          disabled,
-          simple,
-          className,
-        } as any)}
-        style={paginationStyles['getBaseStyle']({
-          size,
-          position,
-          align,
-          style,
-        } as any)}
-        {...restProps}
-      >
-        {renderPrevButton()}
-        <Text className="taro-uno-pagination__simple-text">
-          {internalCurrent} / {totalPages}
-        </Text>
-        {renderNextButton()}
-      </View>
-    );
-  }
-
-  // 计算样式
-  const paginationStyle = paginationStyles['getBaseStyle']({
-    size,
-    position,
-    align,
-    style: style || {},
-  } as any);
-
-  // 计算类名
-  const paginationClassName = paginationStyles['getClassName']({
-    size,
-    position,
-    align,
-    disabled,
-    simple,
-    className,
-  } as any);
-
-  // 暴露给外部的引用方法
-  React.useImperativeHandle(
-    ref,
-    () => ({
-      element: paginationRef.current,
-      getCurrent: () => internalCurrent,
-      getPageSize: () => internalPageSize,
-      getTotalPages: () => totalPages,
-      getTotal: () => total,
-      setCurrent: (page) => {
-        if (controlledCurrent === undefined) {
-          setInternalCurrent(page);
-        }
-      },
-      setPageSize: (pageSize) => {
-        if (controlledPageSize === undefined) {
-          setInternalPageSize(pageSize);
-        }
-      },
-      goTo: handlePageChange,
-      prev: () => handlePageChange(internalCurrent - 1),
-      next: () => handlePageChange(internalCurrent + 1),
-      first: () => handlePageChange(1),
-      last: () => handlePageChange(totalPages),
-    }),
-    [internalCurrent, internalPageSize, totalPages, total, controlledCurrent, controlledPageSize, handlePageChange],
-  );
-
-  return (
-    <View ref={paginationRef} className={paginationClassName} style={paginationStyle} {...restProps}>
-      {renderTotal()}
-      {renderSizeChanger()}
-      {renderPrevButton()}
-      {generatePages().map(renderPageButton)}
-      {renderNextButton()}
-      {renderQuickJumper()}
-    </View>
-  );
-});
-
-/** Pagination组件显示名称 */
-PaginationComponent.displayName = 'Pagination';
-
-/** 导出Pagination组件 */
-export const Pagination = PaginationComponent;

package/src/components/navigation/Pagination/Pagination.types.ts

@@ -1,87 +0,0 @@
-import { ReactNode } from 'react';
-// import { View } from '@tarojs/components'; // Commented out - unused
-import { BaseComponentProps as StandardBaseComponentProps } from '../../../types/component-props';
-import { Size } from '../../../types';
-
-/** 分页尺寸 */
-export type PaginationSize = Size | 'small' | 'medium' | 'large';
-
-/** 分页位置 */
-export type PaginationPosition = 'top' | 'bottom' | 'both';
-
-/** 分页对齐方式 */
-export type PaginationAlign = 'left' | 'center' | 'right';
-
-/** 分页引用 */
-export interface PaginationRef {
-  /** 获取元素引用 */
-  element: any | null;
-  /** 获取当前页码 */
-  getCurrent: () => number;
-  /** 获取每页条数 */
-  getPageSize: () => number;
-  /** 获取总页数 */
-  getTotalPages: () => number;
-  /** 获取总条数 */
-  getTotal: () => number;
-  /** 设置当前页码 */
-  setCurrent: (_current: number) => void;
-  /** 设置每页条数 */
-  setPageSize: (_pageSize: number) => void;
-  /** 跳转到指定页 */
-  goTo: (_page: number) => void;
-  /** 上一页 */
-  prev: () => void;
-  /** 下一页 */
-  next: () => void;
-  /** 第一页 */
-  first: () => void;
-  /** 最后一页 */
-  last: () => void;
-}
-
-/** 分页组件属性 */
-export interface PaginationProps extends StandardBaseComponentProps {
-  /** 当前页码 */
-  current?: number;
-  /** 默认当前页码 */
-  defaultCurrent?: number;
-  /** 每页条数 */
-  pageSize?: number;
-  /** 默认每页条数 */
-  defaultPageSize?: number;
-  /** 总条数 */
-  total: number;
-  /** 分页尺寸 */
-  size?: PaginationSize;
-  /** 是否显示总数 */
-  showTotal?: boolean | ((_total: number, range: [number, number]) => ReactNode);
-  /** 是否显示快速跳转 */
-  showQuickJumper?: boolean;
-  /** 是否显示页码选择器 */
-  showSizeChanger?: boolean;
-  /** 页码选择器选项 */
-  pageSizeOptions?: number[];
-  /** 是否禁用 */
-  disabled?: boolean;
-  /** 是否简单模式 */
-  simple?: boolean;
-  /** 是否显示更多按钮 */
-  showMore?: boolean;
-  /** 页码显示范围 */
-  showLessItems?: boolean;
-  /** 分页位置 */
-  position?: PaginationPosition;
-  /** 分页对齐方式 */
-  align?: PaginationAlign;
-  /** 自定义页码渲染 */
-  itemRender?: (
-    page: number,
-    type: 'page' | 'prev' | 'next' | 'jump-prev' | 'jump-next',
-    element: ReactNode,
-  ) => ReactNode;
-  /** 页码改变事件 */
-  onChange?: (_page: number, pageSize: number) => void;
-  /** 每页条数改变事件 */
-  onShowSizeChange?: (_current: number, size: number) => void;
-}

package/src/components/navigation/Pagination/index.ts

@@ -1,24 +0,0 @@
-/**
- * Pagination 分页组件
- *
- * 企业级分页组件，支持：
- * - 多种尺寸和样式配置
- * - 简单模式和完整模式
- * - 快速跳转和页码选择
- * - 完全的键盘导航支持
- * - 无障碍访问优化
- * - 跨平台兼容性
- */
-
-export { Pagination, PaginationComponent } from './Pagination';
-export type {
-  PaginationProps,
-  PaginationRef,
-  PaginationSize,
-  PaginationPosition,
-  PaginationAlign,
-} from './Pagination.types';
-export { paginationStyles } from './Pagination.styles';
-
-// 默认导出
-export { Pagination as default } from './Pagination';

package/src/components/navigation/Pagination/index.tsx

@@ -1,9 +0,0 @@
-export { Pagination, PaginationComponent } from './Pagination';
-export type {
-  PaginationProps,
-  PaginationRef,
-  PaginationSize,
-  PaginationPosition,
-  PaginationAlign,
-} from './Pagination.types';
-export { paginationStyles } from './Pagination.styles';

package/src/components/navigation/Steps/Step.tsx

@@ -1,36 +0,0 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
-import { View, Text } from '@tarojs/components';
-import { StepProps, StepRef } from './Steps.types';
-import {
-  getStepItemStyle,
-  getStepIconStyle,
-  getStepContentStyle,
-  getStepTitleStyle,
-  getStepDescriptionStyle,
-} from './Steps.styles';
-
-export const Step = forwardRef<StepRef, StepProps>(
-  ({ className, style, title, description, status = 'wait', icon, disabled: _disabled, stepNumber, ...props }, ref) => {
-    const stepRef = React.useRef<any>(null);
-
-    useImperativeHandle(ref, () => ({
-      getStep: () => stepRef.current,
-    }));
-
-    return (
-      <View className={className} style={style} {...props}>
-        <View style={getStepItemStyle()}>
-          <View style={getStepIconStyle(status)}>{icon || stepNumber}</View>
-          <View style={getStepContentStyle()}>
-            <Text style={getStepTitleStyle(status)}>{title}</Text>
-            {description && <Text style={getStepDescriptionStyle()}>{description}</Text>}
-          </View>
-        </View>
-      </View>
-    );
-  },
-);
-
-Step.displayName = 'Step';
-
-export default Step;