taro-uno-ui 1.0.0 → 1.0.2

package/src/components/display/Table/Table.styles.ts

@@ -1,269 +0,0 @@
-import type { TableSize } from './Table.types';
-
-/** 表格样式类 */
-export class TableStyles {
-  /** 尺寸映射 */
-  static readonly SIZE_MAP: Record<TableSize, any> = {
-    default: {
-      fontSize: 14,
-      padding: 12,
-      headerHeight: 40,
-      rowHeight: 40,
-      borderRadius: 6,
-    },
-    small: {
-      fontSize: 12,
-      padding: 8,
-      headerHeight: 32,
-      rowHeight: 32,
-      borderRadius: 4,
-    },
-    medium: {
-      fontSize: 14,
-      padding: 12,
-      headerHeight: 40,
-      rowHeight: 40,
-      borderRadius: 6,
-    },
-    large: {
-      fontSize: 16,
-      padding: 16,
-      headerHeight: 48,
-      rowHeight: 48,
-      borderRadius: 8,
-    },
-  };
-
-  /** 颜色映射 */
-  static readonly COLOR_MAP = {
-    background: '#ffffff',
-    headerBackground: '#fafafa',
-    borderColor: '#e5e7eb',
-    hoverBackground: '#f3f4f6',
-    selectedBackground: '#e0e7ff',
-    stripedBackground: '#f9fafb',
-    textColor: '#374151',
-    headerTextColor: '#6b7280',
-    borderColorLight: '#f3f4f6',
-    shadow: '0 1px 3px 0 rgba(0, 0, 0, 0.1)',
-  };
-
-  /** 生成表格样式 */
-  static getStyle(props: {
-    size?: TableSize;
-    bordered?: boolean;
-    striped?: boolean;
-    hoverable?: boolean;
-    scroll?: { x?: number | string; y?: number | string };
-    style?: React.CSSProperties;
-  }): React.CSSProperties {
-    const { size = 'medium', bordered = false, style = {} } = props;
-
-    const sizeStyles = this.SIZE_MAP[size];
-
-    return {
-      width: '100%',
-      backgroundColor: this.COLOR_MAP.background,
-      borderRadius: sizeStyles['borderRadius'],
-      border: bordered ? `1px solid ${this.COLOR_MAP.borderColor}` : 'none',
-      boxShadow: this.COLOR_MAP.shadow,
-      overflow: 'hidden',
-      position: 'relative',
-      ...style,
-    };
-  }
-
-  /** 生成表格类名 */
-  static getClassName(props: {
-    size?: TableSize;
-    bordered?: boolean;
-    striped?: boolean;
-    hoverable?: boolean;
-    loading?: boolean;
-    className?: string;
-  }): string {
-    const {
-      size = 'medium',
-      bordered = false,
-      striped = false,
-      hoverable = true,
-      loading = false,
-      className = '',
-    } = props;
-
-    const baseClass = 'taro-uno-table';
-    const sizeClass = `taro-uno-table--${size}`;
-    const borderedClass = bordered ? 'taro-uno-table--bordered' : '';
-    const stripedClass = striped ? 'taro-uno-table--striped' : '';
-    const hoverableClass = hoverable ? 'taro-uno-table--hoverable' : '';
-    const loadingClass = loading ? 'taro-uno-table--loading' : '';
-
-    return [baseClass, sizeClass, borderedClass, stripedClass, hoverableClass, loadingClass, className]
-      .filter(Boolean)
-      .join(' ');
-  }
-
-  /** 生成表格头部样式 */
-  static getHeaderStyle(props: { size?: TableSize }): React.CSSProperties {
-    const { size = 'medium' } = props;
-    const sizeStyles = this.SIZE_MAP[size];
-
-    return {
-      backgroundColor: this.COLOR_MAP.headerBackground,
-      borderBottom: `1px solid ${this.COLOR_MAP.borderColor}`,
-      minHeight: sizeStyles['headerHeight'],
-      position: 'sticky',
-      top: 0,
-      zIndex: 10,
-    };
-  }
-
-  /** 生成表格行样式 */
-  static getRowStyle(props: {
-    size?: TableSize;
-    selected?: boolean;
-    striped?: boolean;
-    index?: number;
-  }): React.CSSProperties {
-    const { size = 'medium', selected = false, striped = false, index = 0 } = props;
-    const sizeStyles = this.SIZE_MAP[size];
-
-    return {
-      minHeight: sizeStyles['rowHeight'],
-      borderBottom: `1px solid ${this.COLOR_MAP.borderColor}`,
-      backgroundColor: selected
-        ? this.COLOR_MAP.selectedBackground
-        : striped && index % 2 === 1
-          ? this.COLOR_MAP.stripedBackground
-          : 'transparent',
-      transition: 'background-color 0.2s ease',
-    };
-  }
-
-  /** 生成表格单元格样式 */
-  static getCellStyle(props: {
-    size?: TableSize;
-    align?: 'left' | 'center' | 'right';
-    width?: number | string;
-    isHeader?: boolean;
-  }): React.CSSProperties {
-    const { size = 'medium', align = 'left', width, isHeader = false } = props;
-
-    const sizeStyles = this.SIZE_MAP[size];
-
-    return {
-      padding: `${sizeStyles['padding']}px`,
-      textAlign: align,
-      width: width || 'auto',
-      minWidth: 80,
-      fontSize: sizeStyles['fontSize'],
-      color: isHeader ? this.COLOR_MAP.headerTextColor : this.COLOR_MAP.textColor,
-      fontWeight: isHeader ? 600 : 400,
-      borderRight: isHeader ? `1px solid ${this.COLOR_MAP.borderColor}` : 'none',
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-    };
-  }
-
-  /** 生成表格展开行样式 */
-  static getExpandedRowStyle(): React.CSSProperties {
-    return {
-      backgroundColor: this.COLOR_MAP.stripedBackground,
-      borderBottom: `1px solid ${this.COLOR_MAP.borderColor}`,
-    };
-  }
-
-  /** 生成表格分页样式 */
-  static getPaginationStyle(): React.CSSProperties {
-    return {
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      padding: '16px',
-      borderTop: `1px solid ${this.COLOR_MAP.borderColor}`,
-      backgroundColor: this.COLOR_MAP.background,
-    };
-  }
-
-  /** 生成表格空状态样式 */
-  static getEmptyStyle(): React.CSSProperties {
-    return {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      padding: '48px 16px',
-      color: this.COLOR_MAP.headerTextColor,
-      fontSize: 14,
-      textAlign: 'center' as const,
-    };
-  }
-
-  /** 生成表格加载状态样式 */
-  static getLoadingStyle(): React.CSSProperties {
-    return {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      right: 0,
-      bottom: 0,
-      backgroundColor: 'rgba(255, 255, 255, 0.8)',
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      zIndex: 100,
-    };
-  }
-
-  /** 生成表格排序器样式 */
-  static getSorterStyle(props: { active?: boolean; order?: 'ascend' | 'descend' }): React.CSSProperties {
-    const { active = false } = props;
-
-    return {
-      display: 'inline-flex',
-      flexDirection: 'column',
-      marginLeft: 8,
-      cursor: 'pointer',
-      opacity: active ? 1 : 0.45,
-      transition: 'opacity 0.2s ease',
-    };
-  }
-
-  /** 生成表格选择列样式 */
-  static getSelectionCellStyle(): React.CSSProperties {
-    return {
-      width: 48,
-      textAlign: 'center' as const,
-      padding: 0,
-    };
-  }
-
-  /** 生成表格展开列样式 */
-  static getExpandCellStyle(): React.CSSProperties {
-    return {
-      width: 48,
-      textAlign: 'center' as const,
-      padding: 0,
-    };
-  }
-
-  /** 生成表格滚动容器样式 */
-  static getScrollStyle(props: {
-    scrollX?: boolean;
-    scrollY?: boolean;
-    maxHeight?: number | string;
-    maxWidth?: number | string;
-  }): React.CSSProperties {
-    const { scrollX = false, scrollY = false, maxHeight, maxWidth } = props;
-
-    return {
-      overflowX: scrollX ? 'auto' : 'hidden',
-      overflowY: scrollY ? 'auto' : 'hidden',
-      maxHeight: maxHeight,
-      maxWidth: maxWidth,
-    };
-  }
-}
-
-/** 导出表格样式 */
-export const tableStyles = new TableStyles();

package/src/components/display/Table/Table.test.tsx

@@ -1,345 +0,0 @@
-
-import React from 'react'
-import { vi, describe, test, expect, beforeEach } from 'vitest'
-import { render, fireEvent, screen } from '@testing-library/react'
-import { Table } from './index'
-
-describe('Table Component', () => {
-  const mockColumns = [
-    {
-      title: '姓名',
-      dataIndex: 'name',
-      key: 'name',
-      width: 120,
-      align: 'left' as const
-    },
-    {
-      title: '年龄',
-      dataIndex: 'age',
-      key: 'age',
-      width: 80,
-      align: 'center' as const,
-      sortable: true
-    },
-    {
-      title: '地址',
-      dataIndex: 'address',
-      key: 'address',
-      width: 200,
-      align: 'left' as const
-    }
-  ]
-
-  const mockData = [
-    { key: '1', name: '张三', age: 32, address: '北京市朝阳区' },
-    { key: '2', name: '李四', age: 28, address: '上海市浦东新区' },
-    { key: '3', name: '王五', age: 45, address: '广州市天河区' }
-  ]
-
-  test('renders table with basic props', () => {
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-      />
-    )
-
-    expect(container.querySelector('.taro-uno-table')).toBeInTheDocument()
-    expect(container.querySelector('.taro-uno-table__header')).toBeInTheDocument()
-    expect(container.querySelector('.taro-uno-table__body')).toBeInTheDocument()
-  })
-
-  test('renders table header correctly', () => {
-    const { getByText } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-      />
-    )
-
-    expect(getByText('姓名')).toBeInTheDocument()
-    expect(getByText('年龄')).toBeInTheDocument()
-    expect(getByText('地址')).toBeInTheDocument()
-  })
-
-  test('renders table rows correctly', () => {
-    const { getByText } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-      />
-    )
-
-    expect(getByText('张三')).toBeInTheDocument()
-    expect(getByText('李四')).toBeInTheDocument()
-    expect(getByText('王五')).toBeInTheDocument()
-    expect(getByText('32')).toBeInTheDocument()
-    expect(getByText('28')).toBeInTheDocument()
-    expect(getByText('45')).toBeInTheDocument()
-  })
-
-  test('handles sorting', () => {
-    const handleChange = vi.fn()
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        onChange={handleChange}
-      />
-    )
-
-    const sorter = container.querySelector('.taro-uno-table__sorter')
-    if (sorter) {
-      fireEvent.click(sorter)
-      expect(handleChange).toHaveBeenCalled()
-    }
-  })
-
-  test('handles row selection', () => {
-    const handleSelectionChange = vi.fn()
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        rowSelection={{
-          onChange: handleSelectionChange
-        }}
-      />
-    )
-
-    const checkbox = container.querySelector('input[type="checkbox"]')
-    if (checkbox) {
-      fireEvent.click(checkbox)
-      expect(handleSelectionChange).toHaveBeenCalled()
-    }
-  })
-
-  test('handles pagination', () => {
-    const handleChange = vi.fn()
-    const largeData = Array.from({ length: 25 }, (_, i) => ({
-      key: String(i + 1),
-      name: `用户${i + 1}`,
-      age: 20 + (i % 30),
-      address: `地址${i + 1}`
-    }))
-
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={largeData}
-        pagination={true}
-        onChange={handleChange}
-      />
-    )
-
-    expect(container.querySelector('.taro-uno-table__pagination')).toBeInTheDocument()
-
-    const nextButton = container.querySelector('.taro-uno-table__pagination-btn:last-child')
-    if (nextButton) {
-      fireEvent.click(nextButton)
-      expect(handleChange).toHaveBeenCalled()
-    }
-  })
-
-  test('shows empty state when no data', () => {
-    const { getByText } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={[]}
-        emptyText="暂无数据"
-      />
-    )
-
-    expect(getByText('暂无数据')).toBeInTheDocument()
-  })
-
-  test('shows loading state', () => {
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        loading={true}
-      />
-    )
-
-    expect(container.querySelector('.taro-uno-table__loading')).toBeInTheDocument()
-  })
-
-  test('handles different table sizes', () => {
-    const { container, rerender } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        size="small"
-      />
-    )
-
-    expect(container.querySelector('.taro-uno-table--small')).toBeInTheDocument()
-
-    rerender(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        size="large"
-      />
-    )
-
-    expect(container.querySelector('.taro-uno-table--large')).toBeInTheDocument()
-  })
-
-  test('handles bordered table', () => {
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        bordered={true}
-      />
-    )
-
-    expect(container.querySelector('.taro-uno-table--bordered')).toBeInTheDocument()
-  })
-
-  test('handles striped table', () => {
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        striped={true}
-      />
-    )
-
-    expect(container.querySelector('.taro-uno-table--striped')).toBeInTheDocument()
-  })
-
-  test('handles expandable rows', () => {
-    const handleExpand = vi.fn()
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        expandable={{
-          expandedRowRender: (record) => <div>展开内容: {record.name}</div>,
-          rowExpandable: (record) => record.age > 30,
-          onExpand: handleExpand
-        }}
-      />
-    )
-
-    const expandIcon = container.querySelector('.taro-uno-table__expand-icon')
-    if (expandIcon) {
-      fireEvent.click(expandIcon)
-      expect(handleExpand).toHaveBeenCalled()
-    }
-  })
-
-  test('handles custom cell rendering', () => {
-    const customColumns = [
-      {
-        ...mockColumns[0],
-        render: (text: string, record: any) => <strong>{text} ({record.age}岁)</strong>
-      },
-      ...mockColumns.slice(1)
-    ]
-
-    const { getByText } = render(
-      <Table
-        columns={customColumns}
-        dataSource={mockData}
-      />
-    )
-
-    expect(getByText('张三 (32岁)')).toBeInTheDocument()
-  })
-
-  test('handles scroll functionality', () => {
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        scroll={{ x: 800, y: 400 }}
-      />
-    )
-
-    const scrollContainer = container.querySelector('.taro-uno-table__scroll')
-    expect(scrollContainer).toBeInTheDocument()
-  })
-
-  test('handles row hover effect', () => {
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        hoverable={true}
-      />
-    )
-
-    expect(container.querySelector('.taro-uno-table--hoverable')).toBeInTheDocument()
-  })
-
-  test('handles custom row className and style', () => {
-    const onRow = (record: any) => ({
-      className: 'custom-row',
-      style: { backgroundColor: '#f0f0f0' }
-    })
-
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        onRow={onRow}
-      />
-    )
-
-    const row = container.querySelector('.custom-row')
-    expect(row).toBeInTheDocument()
-  })
-
-  test('handles custom header row className and style', () => {
-    const onHeaderRow = (columns: any) => ({
-      className: 'custom-header',
-      style: { backgroundColor: '#e0e0e0' }
-    })
-
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        onHeaderRow={onHeaderRow}
-      />
-    )
-
-    const header = container.querySelector('.custom-header')
-    expect(header).toBeInTheDocument()
-  })
-
-  test('handles table ref methods', () => {
-    const ref = React.createRef<any>()
-    render(
-      <Table
-        ref={ref}
-        columns={mockColumns}
-        dataSource={mockData}
-      />
-    )
-
-    expect(ref.current).toBeTruthy()
-    expect(ref.current.getSelectedRowKeys).toBeDefined()
-    expect(ref.current.setSelectedRowKeys).toBeDefined()
-    expect(ref.current.refresh).toBeDefined()
-  })
-
-  test('handles accessibility features', () => {
-    const { container } = render(
-      <Table
-        columns={mockColumns}
-        dataSource={mockData}
-        accessible={true}
-        accessibilityLabel="用户数据表格"
-        accessibilityRole="table"
-      />
-    )
-
-    const table = container.querySelector('.taro-uno-table')
-    expect(table).toHaveAttribute('aria-label', '用户数据表格')
-  })
-})