taro-uno-ui 1.0.0 → 1.0.2

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

@@ -1,255 +0,0 @@
-import type { CSSProperties } from 'react';
-
-export const calendarStyles: Record<string, CSSProperties> = {
-  base: {
-    backgroundColor: '#ffffff',
-    border: '1px solid #d9d9d9',
-    borderRadius: '6px',
-    padding: '16px',
-    width: '100%',
-    maxWidth: '400px',
-  },
-
-  // 头部
-  header: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    marginBottom: '16px',
-    padding: '0 8px',
-  },
-
-  headerTitle: {
-    fontSize: '16px',
-    fontWeight: '500',
-    color: '#262626',
-    cursor: 'pointer',
-    padding: '4px 8px',
-    borderRadius: '4px',
-    transition: 'background-color 0.3s ease',
-  },
-
-  headerTitleHover: {
-    backgroundColor: '#f5f5f5',
-  },
-
-  headerButton: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    width: '24px',
-    height: '24px',
-    border: 'none',
-    backgroundColor: 'transparent',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '14px',
-    color: '#8c8c8c',
-    transition: 'all 0.3s ease',
-  },
-
-  headerButtonHover: {
-    backgroundColor: '#f5f5f5',
-    color: '#262626',
-  },
-
-  headerButtonDisabled: {
-    color: '#d9d9d9',
-    cursor: 'not-allowed',
-  },
-
-  // 操作按钮组
-  actions: {
-    display: 'flex',
-    alignItems: 'center',
-    gap: '8px',
-  },
-
-  todayButton: {
-    padding: '4px 8px',
-    fontSize: '12px',
-    border: '1px solid #d9d9d9',
-    backgroundColor: '#ffffff',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    color: '#1890ff',
-    transition: 'all 0.3s ease',
-  },
-
-  todayButtonHover: {
-    borderColor: '#1890ff',
-    backgroundColor: '#f0f8ff',
-  },
-
-  // 星期头部
-  weekHeader: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(7, 1fr)',
-    marginBottom: '8px',
-  },
-
-  weekHeaderCell: {
-    textAlign: 'center',
-    fontSize: '12px',
-    color: '#8c8c8c',
-    fontWeight: '500',
-    padding: '8px 4px',
-  },
-
-  // 日期网格
-  dateGrid: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(7, 1fr)',
-    gap: '2px',
-  },
-
-  // 月份网格
-  monthGrid: {
-    display: 'grid',
-    gridTemplateColumns: 'repeat(3, 1fr)',
-    gap: '8px',
-  },
-
-  // 日期单元格
-  dateCell: {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    minHeight: '32px',
-    padding: '4px',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '14px',
-    color: '#262626',
-    transition: 'all 0.3s ease',
-    border: '1px solid transparent',
-  },
-
-  dateCellHover: {
-    backgroundColor: '#f5f5f5',
-  },
-
-  dateCellToday: {
-    backgroundColor: '#e6f7ff',
-    borderColor: '#1890ff',
-    fontWeight: '500',
-  },
-
-  dateCellSelected: {
-    backgroundColor: '#1890ff',
-    color: '#ffffff',
-    fontWeight: '500',
-  },
-
-  dateCellDisabled: {
-    color: '#d9d9d9',
-    cursor: 'not-allowed',
-    backgroundColor: 'transparent',
-  },
-
-  dateCellOtherMonth: {
-    color: '#d9d9d9',
-  },
-
-  // 月份单元格
-  monthCell: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    height: '60px',
-    borderRadius: '4px',
-    cursor: 'pointer',
-    fontSize: '14px',
-    color: '#262626',
-    transition: 'all 0.3s ease',
-    border: '1px solid transparent',
-  },
-
-  monthCellHover: {
-    backgroundColor: '#f5f5f5',
-  },
-
-  monthCellCurrent: {
-    backgroundColor: '#e6f7ff',
-    borderColor: '#1890ff',
-    fontWeight: '500',
-  },
-
-  monthCellSelected: {
-    backgroundColor: '#1890ff',
-    color: '#ffffff',
-    fontWeight: '500',
-  },
-
-  // 事件指示器
-  eventIndicator: {
-    position: 'absolute',
-    bottom: '2px',
-    left: '50%',
-    transform: 'translateX(-50%)',
-    display: 'flex',
-    gap: '2px',
-  },
-
-  eventDot: {
-    width: '4px',
-    height: '4px',
-    borderRadius: '50%',
-    backgroundColor: '#1890ff',
-  },
-
-  eventDotDefault: {
-    backgroundColor: '#d9d9d9',
-  },
-
-  eventDotPrimary: {
-    backgroundColor: '#1890ff',
-  },
-
-  eventDotSuccess: {
-    backgroundColor: '#52c41a',
-  },
-
-  eventDotWarning: {
-    backgroundColor: '#faad14',
-  },
-
-  eventDotDanger: {
-    backgroundColor: '#ff4d4f',
-  },
-
-  // 事件列表
-  eventList: {
-    marginTop: '16px',
-    borderTop: '1px solid #f0f0f0',
-    paddingTop: '16px',
-  },
-
-  eventItem: {
-    padding: '8px 12px',
-    backgroundColor: '#f5f5f5',
-    borderRadius: '4px',
-    marginBottom: '8px',
-  },
-
-  eventTitle: {
-    fontSize: '14px',
-    fontWeight: '500',
-    color: '#262626',
-    marginBottom: '4px',
-  },
-
-  eventDescription: {
-    fontSize: '12px',
-    color: '#8c8c8c',
-    lineHeight: '1.4',
-  },
-
-  eventTime: {
-    fontSize: '12px',
-    color: '#8c8c8c',
-    marginTop: '4px',
-  },
-};

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

@@ -1,42 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, it, expect, vi } from 'vitest'
-import '@testing-library/jest-dom'
-import Calendar from './Calendar'
-import { ThemeProvider } from '../../common/ThemeProvider'
-
-describe('Calendar Component', () => {
-  it('renders calendar', () => {
-    render(
-      <ThemeProvider defaultTheme="light">
-        <Calendar />
-      </ThemeProvider>
-    )
-    expect(screen.getByText(/年/)).toBeInTheDocument()
-  })
-
-  it('renders with ariaLabel and role', () => {
-    render(
-      <ThemeProvider defaultTheme="light">
-        <Calendar ariaLabel="Test calendar" role="navigation" data-testid="calendar" />
-      </ThemeProvider>
-    )
-    const calendar = screen.getByTestId('calendar')
-    expect(calendar).toHaveAttribute('aria-label', 'Test calendar')
-    expect(calendar).toHaveAttribute('role', 'navigation')
-  })
-
-  it('handles date selection when date is clicked', () => {
-    const onSelect = vi.fn()
-    render(
-      <ThemeProvider defaultTheme="light">
-        <Calendar onSelect={onSelect} />
-      </ThemeProvider>
-    )
-    // Click on the first date cell
-    const dateCells = screen.getAllByText(/^\d+$/)
-    if (dateCells.length > 0) {
-      dateCells[0].click()
-      expect(onSelect).toHaveBeenCalled()
-    }
-  })
-})

package/src/components/display/Calendar/Calendar.tsx

@@ -1,358 +0,0 @@
-import { forwardRef, useImperativeHandle, useRef, useState, useEffect, useMemo, useCallback } from 'react';
-import { View, Text } from '@tarojs/components';
-import { calendarStyles } from './Calendar.styles';
-import type { CalendarProps, CalendarRef, CalendarDate } from './Calendar.types';
-import { useTheme } from '../../common/ThemeProvider';
-
-/** 日历组件 */
-export const CalendarComponent = forwardRef<CalendarRef, CalendarProps>((props, ref) => {
-  const {
-    value,
-    defaultValue,
-    mode = 'month',
-    showToday = true,
-    showEvents = false,
-    events = [],
-    disabledDate,
-    dateRender,
-    monthRender,
-    onSelect,
-    onChange,
-    onModeChange,
-    style,
-    className,
-    ariaLabel,
-    role = 'grid',
-    ...rest
-  } = props;
-
-  const { isDark } = useTheme();
-
-  const [currentDate, setCurrentDate] = useState(value || defaultValue || new Date());
-  const [currentMode, setCurrentMode] = useState(mode);
-  const [selectedDate, setSelectedDate] = useState<Date | null>(value || null);
-  const elementRef = useRef<any>(null);
-
-  useImperativeHandle(ref, () => ({
-    element: elementRef.current,
-    getCurrentDate: () => currentDate,
-    setDate: (date: Date) => {
-      setCurrentDate(date);
-      onChange?.(date);
-    },
-    getMode: () => currentMode,
-    setMode: (mode: 'month' | 'year') => {
-      setCurrentMode(mode);
-      onModeChange?.(mode);
-    },
-    goToToday: () => {
-      const today = new Date();
-      setCurrentDate(today);
-      setSelectedDate(today);
-      onChange?.(today);
-    },
-    goPrev: () => {
-      const newDate = new Date(currentDate);
-      if (currentMode === 'month') {
-        newDate.setMonth(newDate.getMonth() - 1);
-      } else {
-        newDate.setFullYear(newDate.getFullYear() - 1);
-      }
-      setCurrentDate(newDate);
-      onChange?.(newDate);
-    },
-    goNext: () => {
-      const newDate = new Date(currentDate);
-      if (currentMode === 'month') {
-        newDate.setMonth(newDate.getMonth() + 1);
-      } else {
-        newDate.setFullYear(newDate.getFullYear() + 1);
-      }
-      setCurrentDate(newDate);
-      onChange?.(newDate);
-    },
-  }));
-
-  useEffect(() => {
-    if (value) {
-      setCurrentDate(value);
-      setSelectedDate(value);
-    }
-  }, [value]);
-
-  // 固定的星期和月份名称，提取到组件外部避免重复创建
-  const WEEK_DAYS = ['日', '一', '二', '三', '四', '五', '六'];
-  const MONTH_NAMES = [
-    '一月',
-    '二月',
-    '三月',
-    '四月',
-    '五月',
-    '六月',
-    '七月',
-    '八月',
-    '九月',
-    '十月',
-    '十一月',
-    '十二月',
-  ];
-
-  const getWeekDays = () => WEEK_DAYS;
-  const getMonthNames = () => MONTH_NAMES;
-
-  // 使用 useMemo 优化 getDatesInMonth 函数，只在依赖项变化时重新计算
-  const datesInMonth = useMemo(() => {
-    const year = currentDate.getFullYear();
-    const month = currentDate.getMonth();
-    const today = new Date();
-
-    // 获取当月第一天和最后一天
-    const firstDay = new Date(year, month, 1);
-    const lastDay = new Date(year, month + 1, 0);
-
-    // 获取日历开始日期（包含上月末尾日期）
-    const startDate = new Date(firstDay);
-    startDate.setDate(startDate.getDate() - firstDay.getDay());
-
-    // 获取日历结束日期（包含下月开始日期）
-    const endDate = new Date(lastDay);
-    endDate.setDate(endDate.getDate() + (6 - lastDay.getDay()));
-
-    const dates: CalendarDate[] = [];
-    const current = new Date(startDate);
-
-    while (current <= endDate) {
-      const isCurrentMonth = current.getMonth() === month;
-      const isToday =
-        current.getFullYear() === today.getFullYear() &&
-        current.getMonth() === today.getMonth() &&
-        current.getDate() === today.getDate();
-      const isSelected =
-        selectedDate &&
-        current.getFullYear() === selectedDate.getFullYear() &&
-        current.getMonth() === selectedDate.getMonth() &&
-        current.getDate() === selectedDate.getDate();
-
-      const dateEvents = events.filter((event) => {
-        const eventDate = new Date(event.startTime || '');
-        return (
-          eventDate.getFullYear() === current.getFullYear() &&
-          eventDate.getMonth() === current.getMonth() &&
-          eventDate.getDate() === current.getDate()
-        );
-      });
-
-      dates.push({
-        year: current.getFullYear(),
-        month: current.getMonth() + 1,
-        day: current.getDate(),
-        isCurrentMonth,
-        isToday,
-        isSelected: Boolean(isSelected),
-        disabled: disabledDate?.(new Date(current)) || false,
-        events: dateEvents,
-      });
-
-      current.setDate(current.getDate() + 1);
-    }
-
-    return dates;
-  }, [currentDate, selectedDate, events, disabledDate]);
-
-  // 使用 useCallback 优化事件处理函数
-  const handleDateClick = useCallback(
-    (date: CalendarDate) => {
-      if (date.disabled) return;
-
-      const newDate = new Date(date.year, date.month - 1, date.day);
-      setSelectedDate(newDate);
-      onSelect?.(newDate);
-      onChange?.(newDate);
-    },
-    [onSelect, onChange],
-  );
-
-  const handleMonthClick = useCallback(
-    (monthIndex: number) => {
-      const newDate = new Date(currentDate.getFullYear(), monthIndex, 1);
-      setCurrentDate(newDate);
-      setCurrentMode('month');
-      onChange?.(newDate);
-      onModeChange?.('month');
-    },
-    [currentDate, onChange, onModeChange],
-  );
-
-  const handleHeaderTitleClick = useCallback(() => {
-    setCurrentMode(currentMode === 'month' ? 'year' : 'month');
-    onModeChange?.(currentMode === 'month' ? 'year' : 'month');
-  }, [currentMode, onModeChange]);
-
-  const handlePrevClick = useCallback(() => {
-    const newDate = new Date(currentDate);
-    if (currentMode === 'month') {
-      newDate.setMonth(newDate.getMonth() - 1);
-    } else {
-      newDate.setFullYear(newDate.getFullYear() - 1);
-    }
-    setCurrentDate(newDate);
-    onChange?.(newDate);
-  }, [currentDate, currentMode, onChange]);
-
-  const handleNextClick = useCallback(() => {
-    const newDate = new Date(currentDate);
-    if (currentMode === 'month') {
-      newDate.setMonth(newDate.getMonth() + 1);
-    } else {
-      newDate.setFullYear(newDate.getFullYear() + 1);
-    }
-    setCurrentDate(newDate);
-    onChange?.(newDate);
-  }, [currentDate, currentMode, onChange]);
-
-  const handleTodayClick = useCallback(() => {
-    const today = new Date();
-    setCurrentDate(today);
-    setSelectedDate(today);
-    setCurrentMode('month');
-    onChange?.(today);
-  }, [onChange]);
-
-  const renderDateCell = (date: CalendarDate) => {
-    if (dateRender) {
-      return dateRender(date);
-    }
-
-    let cellStyle = { ...calendarStyles['dateCell'] };
-
-    if (!date.isCurrentMonth) {
-      cellStyle = { ...cellStyle, ...calendarStyles['dateCellOtherMonth'] };
-    }
-
-    if (date.isToday) {
-      cellStyle = { ...cellStyle, ...calendarStyles['dateCellToday'] };
-    }
-
-    if (date.isSelected) {
-      cellStyle = { ...cellStyle, ...calendarStyles['dateCellSelected'] };
-    }
-
-    if (date.disabled) {
-      cellStyle = { ...cellStyle, ...calendarStyles['dateCellDisabled'] };
-    }
-
-    return (
-      <View key={`${date.year}-${date.month}-${date.day}`} style={cellStyle} onClick={() => handleDateClick(date)}>
-        <Text>{date.day}</Text>
-        {showEvents && date.events && date.events.length > 0 && (
-          <View style={calendarStyles['eventIndicator'] ?? {}}>
-            {date.events.slice(0, 3).map((event) => (
-              <View
-                key={event.id}
-                style={{
-                  ...calendarStyles['eventDot'],
-                  backgroundColor: event.color || calendarStyles['eventDotDefault']?.backgroundColor || '#007bff',
-                }}
-              />
-            ))}
-          </View>
-        )}
-      </View>
-    );
-  };
-
-  const renderMonthView = () => {
-    const weekDays = getWeekDays();
-
-    return (
-      <>
-        <View style={calendarStyles['weekHeader'] ?? {}}>
-          {weekDays.map((day) => (
-            <View key={day} style={calendarStyles['weekHeaderCell'] ?? {}}>
-              <Text>{day}</Text>
-            </View>
-          ))}
-        </View>
-        <View style={calendarStyles['dateGrid'] ?? {}}>
-          {datesInMonth.map((date: CalendarDate) => renderDateCell(date))}
-        </View>
-      </>
-    );
-  };
-
-  const renderYearView = () => {
-    const months = getMonthNames();
-    const currentMonth = currentDate.getMonth();
-
-    return (
-      <View style={calendarStyles['monthGrid'] ?? {}}>
-        {months.map((month, index) => {
-          if (monthRender) {
-            return monthRender(index, currentDate.getFullYear());
-          }
-
-          let cellStyle = { ...calendarStyles['monthCell'] };
-
-          if (index === currentMonth) {
-            cellStyle = { ...cellStyle, ...calendarStyles['monthCellCurrent'] };
-          }
-
-          return (
-            <View key={month} style={cellStyle} onClick={() => handleMonthClick(index)}>
-              <Text>{month}</Text>
-            </View>
-          );
-        })}
-      </View>
-    );
-  };
-
-  const getHeaderTitle = () => {
-    if (currentMode === 'month') {
-      return `${currentDate.getFullYear()}年 ${currentDate.getMonth() + 1}月`;
-    } else {
-      return `${currentDate.getFullYear()}年`;
-    }
-  };
-
-  return (
-    <View
-      ref={elementRef}
-      style={{ ...calendarStyles['base'], ...style }}
-      className={`${className ?? ''} ${isDark ? 'dark' : 'light'}`}
-      aria-label={ariaLabel}
-      role={role}
-      {...rest}
-    >
-      {/* 头部 */}
-      <View style={calendarStyles['header'] ?? {}}>
-        <Text style={calendarStyles['headerButton'] ?? {}} onClick={handlePrevClick}>
-          ‹
-        </Text>
-
-        <Text style={calendarStyles['headerTitle'] ?? {}} onClick={handleHeaderTitleClick}>
-          {getHeaderTitle()}
-        </Text>
-
-        <View style={calendarStyles['actions'] ?? {}}>
-          {showToday && (
-            <Text style={calendarStyles['todayButton'] ?? {}} onClick={handleTodayClick}>
-              今天
-            </Text>
-          )}
-          <Text style={calendarStyles['headerButton'] ?? {}} onClick={handleNextClick}>
-            ›
-          </Text>
-        </View>
-      </View>
-
-      {/* 内容 */}
-      {currentMode === 'month' ? renderMonthView() : renderYearView()}
-    </View>
-  );
-});
-
-CalendarComponent.displayName = 'Calendar';
-
-export const Calendar = CalendarComponent;
-export default Calendar;