@seakoi/native-ui 1.0.0

package/dist/module/components/base/calendar/calendar.js

@@ -0,0 +1,330 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+import React, { useMemo, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { Text } from "./../index.js";
+import { useTheme } from "../../../native-provider/index.js";
+import { useRangeSelection } from "./hooks/use-range-selection.js";
+import { useCalendarStyles } from "./style/index.js";
+import { getDateCellSubText } from "./utils/lunar.js";
+import { dateToTimestamp, formatDateForAccessibility, getMonthDates, groupDatesByWeek, isSameDate, isToday, isValidDate, timestampToDate } from "./utils/utils.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+
+/** 星期标题组件 */
+const WeekHeader = /*#__PURE__*/React.memo(({
+  styles,
+  color
+}) => /*#__PURE__*/_jsx(View, {
+  style: styles.weekRow,
+  children: weekDays.map(day => /*#__PURE__*/_jsx(View, {
+    style: styles.weekCell,
+    children: /*#__PURE__*/_jsx(Text, {
+      font: "regular",
+      size: 14,
+      color: color,
+      children: day
+    })
+  }, day))
+}));
+
+/** 日期单元格组件 */
+const DateCell = /*#__PURE__*/React.memo(({
+  date,
+  selected,
+  isRangeStart,
+  isRangeEnd,
+  inRange,
+  hasCompleteRange,
+  isCurrentMonth,
+  isToday,
+  disabled,
+  isFirstInRow: _isFirstInRow,
+  isLastInRow: _isLastInRow,
+  showLunar,
+  onPress
+}) => {
+  const styles = useCalendarStyles();
+
+  // 获取农历信息
+  const lunarText = useMemo(() => {
+    if (!showLunar) return null;
+    return getDateCellSubText(date);
+  }, [showLunar, date]);
+
+  // 判断是否需要显示范围背景
+  // 只有在有完整范围时才显示背景
+  const showRangeBackground = hasCompleteRange && (isRangeStart || isRangeEnd || inRange);
+
+  // 判断范围背景的扩展方向（简单计算，无需 useMemo）
+  const rangeBackgroundStyle = (() => {
+    if (!showRangeBackground) return null;
+
+    // 起始日期：向右扩展（使用深色）
+    if (isRangeStart && !isRangeEnd) {
+      return [styles.rangeBackgroundHighlight, styles.rangeBackgroundExtendRight];
+    }
+
+    // 结束日期：向左扩展（使用深色）
+    if (isRangeEnd && !isRangeStart) {
+      return [styles.rangeBackgroundHighlight, styles.rangeBackgroundExtendLeft];
+    }
+
+    // 中间日期：两边都扩展（使用浅色）
+    if (inRange) {
+      return styles.rangeBackgroundExtendBoth;
+    }
+
+    // 起始和结束是同一天：不扩展
+    return null;
+  })();
+
+  // 判断圆形样式（简单计算，无需 useMemo）
+  const circleStyle = (() => {
+    if (selected) return styles.dateCellSelected;
+    if (isRangeStart && isRangeEnd) return styles.dateCellRangeBoth;
+    if (isRangeStart) return styles.dateCellRangeStart;
+    if (isRangeEnd) return styles.dateCellRangeEnd;
+    return null;
+  })();
+
+  // 判断文本样式（简单计算，无需 useMemo）
+  const textStyle = (() => {
+    const baseStyles = [];
+    if (selected || isRangeStart || isRangeEnd) {
+      baseStyles.push(styles.dateTextSelected);
+    } else if (inRange) {
+      baseStyles.push(styles.dateTextInRange);
+    } else if (!isCurrentMonth) {
+      baseStyles.push(styles.dateTextOtherMonth);
+    } else {
+      baseStyles.push(styles.dateText);
+    }
+    if (isToday) {
+      baseStyles.push(styles.dateTextToday);
+    }
+    return baseStyles;
+  })();
+
+  // 农历文本样式（简单计算，无需 useMemo）
+  const lunarTextStyle = (() => {
+    const baseStyles = [styles.lunarText];
+    if (selected || isRangeStart || isRangeEnd) {
+      baseStyles.push(styles.lunarTextSelected);
+    } else if (inRange) {
+      baseStyles.push(styles.lunarTextInRange);
+    } else if (!isCurrentMonth) {
+      baseStyles.push(styles.lunarTextOtherMonth);
+    }
+    return baseStyles;
+  })();
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.dateCellWrapper,
+    children: [showRangeBackground && /*#__PURE__*/_jsx(View, {
+      style: [styles.rangeBackground, rangeBackgroundStyle]
+    }), /*#__PURE__*/_jsx(Pressable, {
+      style: styles.dateCell,
+      onPress: () => !disabled && onPress?.(date),
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: `${formatDateForAccessibility(date)}${isToday ? '，今天' : ''}${selected ? '，已选中' : ''}${isRangeStart ? '，范围起始' : ''}${isRangeEnd ? '，范围结束' : ''}`,
+      accessibilityState: {
+        selected,
+        disabled
+      },
+      accessibilityHint: disabled ? '此日期不可选' : '点击选择此日期',
+      children: /*#__PURE__*/_jsxs(View, {
+        style: [styles.dateCelContainer, circleStyle, disabled && styles.dateCellDisabled],
+        children: [/*#__PURE__*/_jsx(Text, {
+          font: "regular",
+          style: textStyle,
+          children: date.getDate()
+        }), showLunar && lunarText && /*#__PURE__*/_jsx(Text, {
+          font: "regular",
+          size: 10,
+          style: lunarTextStyle,
+          children: lunarText
+        })]
+      })
+    })]
+  });
+});
+
+/** 日历组件 */
+export const Calendar = ({
+  mode = 'single',
+  value,
+  onChange,
+  rangeValue,
+  onRangeChange,
+  minDate,
+  maxDate,
+  containerStyle,
+  disabled = false,
+  showLunar = false
+}) => {
+  const styles = useCalendarStyles();
+
+  // 将时间戳转换为 Date 对象用于内部状态
+  const [currentDate, setCurrentDate] = useState(() => timestampToDate(value) || new Date());
+
+  // 转换范围值为 Date 对象（使用 useMemo 避免依赖变化）
+  const internalRangeValue = useMemo(() => [timestampToDate(rangeValue?.[0]), timestampToDate(rangeValue?.[1])], [rangeValue]);
+
+  // 转换最小/最大日期
+  const internalMinDate = useMemo(() => timestampToDate(minDate), [minDate]);
+  const internalMaxDate = useMemo(() => timestampToDate(maxDate), [maxDate]);
+
+  // 包装 onRangeChange，将 Date 转换为时间戳
+  const handleRangeChangeWrapper = useMemoizedFn(range => {
+    const timestampRange = [dateToTimestamp(range[0]), dateToTimestamp(range[1])];
+    onRangeChange?.(timestampRange);
+  });
+
+  // 使用范围选择 Hook
+  const {
+    handleRangeSelect
+  } = useRangeSelection(internalRangeValue, handleRangeChangeWrapper);
+  const theme = useTheme();
+  // 获取当前月份的所有日期（包括前后月份填充）
+  const dates = useMemo(() => getMonthDates(currentDate), [currentDate]);
+
+  // 按周分组
+  const weeks = useMemo(() => groupDatesByWeek(dates), [dates]);
+
+  // 判断日期是否禁用
+  const isDateDisabled = useMemoizedFn(date => {
+    if (disabled) return true;
+    if (!isValidDate(date)) return true;
+    if (internalMinDate && date < internalMinDate) return true;
+    if (internalMaxDate && date > internalMaxDate) return true;
+    return false;
+  });
+
+  // 单选模式：判断是否选中
+  const isSelected = useMemoizedFn(date => {
+    if (mode !== 'single' || !value) return false;
+    const selectedDate = timestampToDate(value);
+    return isSameDate(date, selectedDate);
+  });
+
+  // 范围模式：判断是否是起始日期
+  const isRangeStart = useMemoizedFn(date => {
+    if (mode !== 'range') return false;
+    const start = internalRangeValue[0];
+    return isSameDate(date, start);
+  });
+
+  // 范围模式：判断是否是结束日期
+  const isRangeEnd = useMemoizedFn(date => {
+    if (mode !== 'range') return false;
+    const end = internalRangeValue[1];
+    return isSameDate(date, end);
+  });
+
+  // 范围模式：判断是否在范围内
+  const inRange = useMemoizedFn(date => {
+    if (mode !== 'range') return false;
+    const start = internalRangeValue[0];
+    const end = internalRangeValue[1];
+    if (!start || !end) return false;
+    const time = date.getTime();
+    const startTime = start.getTime();
+    const endTime = end.getTime();
+    return time > startTime && time < endTime;
+  });
+
+  // 判断是否有完整的范围选择
+  const hasCompleteRange = useMemo(() => {
+    if (mode !== 'range') return false;
+    const start = internalRangeValue[0];
+    const end = internalRangeValue[1];
+    return !!(start && end);
+  }, [mode, internalRangeValue]);
+
+  // 判断是否是当前月份
+  const isCurrentMonth = useMemoizedFn(date => {
+    return date.getMonth() === currentDate.getMonth();
+  });
+
+  // 切换月份
+  const changeMonth = useMemoizedFn(offset => {
+    setCurrentDate(prev => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() + offset);
+      return newDate;
+    });
+  });
+
+  // 处理日期选择
+  const handleDatePress = useMemoizedFn(date => {
+    if (mode === 'single') {
+      // 单选模式：返回时间戳
+      const timestamp = dateToTimestamp(date);
+      if (timestamp !== undefined) {
+        onChange?.(timestamp);
+      }
+    } else {
+      // 范围模式：通过 handleRangeSelect 处理（已在 wrapper 中转换为时间戳）
+      handleRangeSelect(date);
+    }
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: [styles.container, containerStyle],
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        onPress: () => changeMonth(-1),
+        disabled: disabled,
+        accessibilityRole: "button",
+        accessibilityLabel: "\u4E0A\u4E2A\u6708",
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "semiBold",
+          size: 16,
+          color: theme.palette.fontGray1,
+          children: '<'
+        })
+      }), /*#__PURE__*/_jsxs(Text, {
+        font: "semiBold",
+        size: 16,
+        color: theme.palette.fontGray1,
+        children: [currentDate.getFullYear(), "\u5E74", currentDate.getMonth() + 1, "\u6708"]
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: () => changeMonth(1),
+        disabled: disabled,
+        accessibilityRole: "button",
+        accessibilityLabel: "\u4E0B\u4E2A\u6708",
+        children: /*#__PURE__*/_jsx(Text, {
+          font: "semiBold",
+          size: 16,
+          color: theme.palette.fontGray1,
+          children: '>'
+        })
+      })]
+    }), /*#__PURE__*/_jsx(WeekHeader, {
+      styles: styles,
+      color: theme.palette.fontGray3
+    }), /*#__PURE__*/_jsx(View, {
+      style: styles.datesContainer,
+      children: weeks.map((week, weekIndex) => /*#__PURE__*/_jsx(View, {
+        style: styles.dateRow,
+        children: week.map((date, dateIndex) => /*#__PURE__*/_jsx(DateCell, {
+          date: date,
+          selected: isSelected(date),
+          isRangeStart: isRangeStart(date),
+          isRangeEnd: isRangeEnd(date),
+          inRange: inRange(date),
+          hasCompleteRange: hasCompleteRange,
+          isCurrentMonth: isCurrentMonth(date),
+          isToday: isToday(date),
+          disabled: isDateDisabled(date),
+          isFirstInRow: dateIndex === 0,
+          isLastInRow: dateIndex === week.length - 1,
+          showLunar: showLunar,
+          onPress: handleDatePress
+        }, dateIndex))
+      }, weekIndex))
+    })]
+  });
+};

package/dist/module/components/base/calendar/hooks/use-range-selection.js

@@ -0,0 +1,28 @@
+"use strict";
+
+import { useMemoizedFn } from 'ahooks';
+
+/**
+ * 范围选择逻辑的自定义 Hook
+ */
+export const useRangeSelection = (rangeValue, onRangeChange) => {
+  const handleRangeSelect = useMemoizedFn(date => {
+    const start = rangeValue?.[0];
+    const end = rangeValue?.[1];
+    if (!start || start && end) {
+      // 选择起始日期
+      onRangeChange?.([date, undefined]);
+    } else {
+      // 选择结束日期
+      if (date < start) {
+        // 如果选择的日期早于起始日期，交换
+        onRangeChange?.([date, start]);
+      } else {
+        onRangeChange?.([start, date]);
+      }
+    }
+  });
+  return {
+    handleRangeSelect
+  };
+};

package/dist/module/components/base/calendar/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./calendar.js";
+export { dateToTimestamp, timestampToDate } from "./utils/utils.js";

package/dist/module/components/base/calendar/style/index.js

@@ -0,0 +1,143 @@
+"use strict";
+
+import { createThemedStyles } from "../../../../native-provider/index.js";
+export const useCalendarStyles = createThemedStyles(theme => {
+  return {
+    container: {
+      backgroundColor: theme.palette.white,
+      borderRadius: theme.roundness.lg,
+      padding: 16,
+      minWidth: 320
+    },
+    header: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: theme.spacing.md
+    },
+    weekRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      marginBottom: theme.spacing.md
+    },
+    weekCell: {
+      flex: 1,
+      minWidth: 40,
+      justifyContent: 'center',
+      alignItems: 'center'
+    },
+    datesContainer: {
+      gap: theme.spacing.md
+    },
+    dateRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between'
+    },
+    // 外层包装，用于容纳背景层
+    dateCellWrapper: {
+      flex: 1,
+      aspectRatio: 1,
+      minWidth: 40,
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative' // 作为绝对定位的参考点
+    },
+    // 范围背景层 - 高度与圆形容器相等
+    rangeBackground: {
+      position: 'absolute',
+      height: 36,
+      backgroundColor: theme.palette.brand1,
+      zIndex: 0
+    },
+    // 起始/结束日期的背景层 - 使用深色
+    rangeBackgroundHighlight: {
+      backgroundColor: theme.palette.brand7
+    },
+    // 向右扩展（起始日期）- 宽度 50%，从中心向右
+    rangeBackgroundExtendRight: {
+      left: '50%',
+      width: '50%'
+    },
+    // 向左扩展（结束日期）- 宽度 50%，从左到中心
+    rangeBackgroundExtendLeft: {
+      left: 0,
+      width: '50%'
+    },
+    // 两边都扩展（中间日期）- 宽度 100%
+    rangeBackgroundExtendBoth: {
+      left: 0,
+      width: '100%'
+    },
+    dateCell: {
+      width: '100%',
+      height: '100%',
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 1
+    },
+    dateCelContainer: {
+      width: 36,
+      height: 36,
+      justifyContent: 'center',
+      alignItems: 'center',
+      zIndex: 1,
+      // 确保在背景层之上
+      position: 'relative',
+      // 确保不受背景层影响
+      gap: 2 // 日期和农历之间的间距
+    },
+    dateCellSelected: {
+      backgroundColor: theme.palette.brand7,
+      borderRadius: theme.roundness.full
+    },
+    dateCellRangeStart: {
+      backgroundColor: theme.palette.brand7,
+      borderRadius: theme.roundness.full
+    },
+    dateCellRangeEnd: {
+      backgroundColor: theme.palette.brand7,
+      borderRadius: theme.roundness.full
+    },
+    dateCellRangeBoth: {
+      backgroundColor: theme.palette.brand7,
+      borderRadius: theme.roundness.full
+    },
+    dateCellDisabled: {
+      opacity: 0.3
+    },
+    dateText: {
+      fontSize: 14,
+      color: theme.palette.fontGray1
+    },
+    dateTextSelected: {
+      color: theme.palette.white
+    },
+    dateTextInRange: {
+      color: theme.palette.brand7
+    },
+    dateTextOtherMonth: {
+      color: theme.palette.fontGray4
+    },
+    dateTextToday: {
+      fontWeight: '700'
+    },
+    // 农历文本样式
+    lunarText: {
+      fontSize: 10,
+      color: theme.palette.fontGray3,
+      marginTop: -2
+    },
+    lunarTextSelected: {
+      color: theme.palette.white,
+      opacity: 0.8
+    },
+    lunarTextInRange: {
+      color: theme.palette.brand7,
+      opacity: 0.8
+    },
+    lunarTextOtherMonth: {
+      color: theme.palette.fontGray4,
+      opacity: 0.6
+    }
+  };
+});

package/dist/module/components/base/calendar/types.js

@@ -0,0 +1,3 @@
+"use strict";
+
+export {};