@seakoi/native-ui 1.0.0

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

@@ -0,0 +1,336 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Calendar = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _reactNative = require("react-native");
+var _index = require("./../index.js");
+var _index2 = require("../../../native-provider/index.js");
+var _useRangeSelection = require("./hooks/use-range-selection.js");
+var _index3 = require("./style/index.js");
+var _lunar = require("./utils/lunar.js");
+var _utils = require("./utils/utils.js");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
+
+/** 星期标题组件 */
+const WeekHeader = /*#__PURE__*/_react.default.memo(({
+  styles,
+  color
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  style: styles.weekRow,
+  children: weekDays.map(day => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: styles.weekCell,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+      font: "regular",
+      size: 14,
+      color: color,
+      children: day
+    })
+  }, day))
+}));
+
+/** 日期单元格组件 */
+const DateCell = /*#__PURE__*/_react.default.memo(({
+  date,
+  selected,
+  isRangeStart,
+  isRangeEnd,
+  inRange,
+  hasCompleteRange,
+  isCurrentMonth,
+  isToday,
+  disabled,
+  isFirstInRow: _isFirstInRow,
+  isLastInRow: _isLastInRow,
+  showLunar,
+  onPress
+}) => {
+  const styles = (0, _index3.useCalendarStyles)();
+
+  // 获取农历信息
+  const lunarText = (0, _react.useMemo)(() => {
+    if (!showLunar) return null;
+    return (0, _lunar.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__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: styles.dateCellWrapper,
+    children: [showRangeBackground && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: [styles.rangeBackground, rangeBackgroundStyle]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+      style: styles.dateCell,
+      onPress: () => !disabled && onPress?.(date),
+      disabled: disabled,
+      accessibilityRole: "button",
+      accessibilityLabel: `${(0, _utils.formatDateForAccessibility)(date)}${isToday ? '，今天' : ''}${selected ? '，已选中' : ''}${isRangeStart ? '，范围起始' : ''}${isRangeEnd ? '，范围结束' : ''}`,
+      accessibilityState: {
+        selected,
+        disabled
+      },
+      accessibilityHint: disabled ? '此日期不可选' : '点击选择此日期',
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+        style: [styles.dateCelContainer, circleStyle, disabled && styles.dateCellDisabled],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          font: "regular",
+          style: textStyle,
+          children: date.getDate()
+        }), showLunar && lunarText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          font: "regular",
+          size: 10,
+          style: lunarTextStyle,
+          children: lunarText
+        })]
+      })
+    })]
+  });
+});
+
+/** 日历组件 */
+const Calendar = ({
+  mode = 'single',
+  value,
+  onChange,
+  rangeValue,
+  onRangeChange,
+  minDate,
+  maxDate,
+  containerStyle,
+  disabled = false,
+  showLunar = false
+}) => {
+  const styles = (0, _index3.useCalendarStyles)();
+
+  // 将时间戳转换为 Date 对象用于内部状态
+  const [currentDate, setCurrentDate] = (0, _react.useState)(() => (0, _utils.timestampToDate)(value) || new Date());
+
+  // 转换范围值为 Date 对象（使用 useMemo 避免依赖变化）
+  const internalRangeValue = (0, _react.useMemo)(() => [(0, _utils.timestampToDate)(rangeValue?.[0]), (0, _utils.timestampToDate)(rangeValue?.[1])], [rangeValue]);
+
+  // 转换最小/最大日期
+  const internalMinDate = (0, _react.useMemo)(() => (0, _utils.timestampToDate)(minDate), [minDate]);
+  const internalMaxDate = (0, _react.useMemo)(() => (0, _utils.timestampToDate)(maxDate), [maxDate]);
+
+  // 包装 onRangeChange，将 Date 转换为时间戳
+  const handleRangeChangeWrapper = (0, _ahooks.useMemoizedFn)(range => {
+    const timestampRange = [(0, _utils.dateToTimestamp)(range[0]), (0, _utils.dateToTimestamp)(range[1])];
+    onRangeChange?.(timestampRange);
+  });
+
+  // 使用范围选择 Hook
+  const {
+    handleRangeSelect
+  } = (0, _useRangeSelection.useRangeSelection)(internalRangeValue, handleRangeChangeWrapper);
+  const theme = (0, _index2.useTheme)();
+  // 获取当前月份的所有日期（包括前后月份填充）
+  const dates = (0, _react.useMemo)(() => (0, _utils.getMonthDates)(currentDate), [currentDate]);
+
+  // 按周分组
+  const weeks = (0, _react.useMemo)(() => (0, _utils.groupDatesByWeek)(dates), [dates]);
+
+  // 判断日期是否禁用
+  const isDateDisabled = (0, _ahooks.useMemoizedFn)(date => {
+    if (disabled) return true;
+    if (!(0, _utils.isValidDate)(date)) return true;
+    if (internalMinDate && date < internalMinDate) return true;
+    if (internalMaxDate && date > internalMaxDate) return true;
+    return false;
+  });
+
+  // 单选模式：判断是否选中
+  const isSelected = (0, _ahooks.useMemoizedFn)(date => {
+    if (mode !== 'single' || !value) return false;
+    const selectedDate = (0, _utils.timestampToDate)(value);
+    return (0, _utils.isSameDate)(date, selectedDate);
+  });
+
+  // 范围模式：判断是否是起始日期
+  const isRangeStart = (0, _ahooks.useMemoizedFn)(date => {
+    if (mode !== 'range') return false;
+    const start = internalRangeValue[0];
+    return (0, _utils.isSameDate)(date, start);
+  });
+
+  // 范围模式：判断是否是结束日期
+  const isRangeEnd = (0, _ahooks.useMemoizedFn)(date => {
+    if (mode !== 'range') return false;
+    const end = internalRangeValue[1];
+    return (0, _utils.isSameDate)(date, end);
+  });
+
+  // 范围模式：判断是否在范围内
+  const inRange = (0, _ahooks.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 = (0, _react.useMemo)(() => {
+    if (mode !== 'range') return false;
+    const start = internalRangeValue[0];
+    const end = internalRangeValue[1];
+    return !!(start && end);
+  }, [mode, internalRangeValue]);
+
+  // 判断是否是当前月份
+  const isCurrentMonth = (0, _ahooks.useMemoizedFn)(date => {
+    return date.getMonth() === currentDate.getMonth();
+  });
+
+  // 切换月份
+  const changeMonth = (0, _ahooks.useMemoizedFn)(offset => {
+    setCurrentDate(prev => {
+      const newDate = new Date(prev);
+      newDate.setMonth(newDate.getMonth() + offset);
+      return newDate;
+    });
+  });
+
+  // 处理日期选择
+  const handleDatePress = (0, _ahooks.useMemoizedFn)(date => {
+    if (mode === 'single') {
+      // 单选模式：返回时间戳
+      const timestamp = (0, _utils.dateToTimestamp)(date);
+      if (timestamp !== undefined) {
+        onChange?.(timestamp);
+      }
+    } else {
+      // 范围模式：通过 handleRangeSelect 处理（已在 wrapper 中转换为时间戳）
+      handleRangeSelect(date);
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+    style: [styles.container, containerStyle],
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.header,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: () => changeMonth(-1),
+        disabled: disabled,
+        accessibilityRole: "button",
+        accessibilityLabel: "\u4E0A\u4E2A\u6708",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          font: "semiBold",
+          size: 16,
+          color: theme.palette.fontGray1,
+          children: '<'
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_index.Text, {
+        font: "semiBold",
+        size: 16,
+        color: theme.palette.fontGray1,
+        children: [currentDate.getFullYear(), "\u5E74", currentDate.getMonth() + 1, "\u6708"]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
+        onPress: () => changeMonth(1),
+        disabled: disabled,
+        accessibilityRole: "button",
+        accessibilityLabel: "\u4E0B\u4E2A\u6708",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Text, {
+          font: "semiBold",
+          size: 16,
+          color: theme.palette.fontGray1,
+          children: '>'
+        })
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(WeekHeader, {
+      styles: styles,
+      color: theme.palette.fontGray3
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+      style: styles.datesContainer,
+      children: weeks.map((week, weekIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: styles.dateRow,
+        children: week.map((date, dateIndex) => /*#__PURE__*/(0, _jsxRuntime.jsx)(DateCell, {
+          date: date,
+          selected: isSelected(date),
+          isRangeStart: isRangeStart(date),
+          isRangeEnd: isRangeEnd(date),
+          inRange: inRange(date),
+          hasCompleteRange: hasCompleteRange,
+          isCurrentMonth: isCurrentMonth(date),
+          isToday: (0, _utils.isToday)(date),
+          disabled: isDateDisabled(date),
+          isFirstInRow: dateIndex === 0,
+          isLastInRow: dateIndex === week.length - 1,
+          showLunar: showLunar,
+          onPress: handleDatePress
+        }, dateIndex))
+      }, weekIndex))
+    })]
+  });
+};
+exports.Calendar = Calendar;

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

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRangeSelection = void 0;
+var _ahooks = require("ahooks");
+/**
+ * 范围选择逻辑的自定义 Hook
+ */
+const useRangeSelection = (rangeValue, onRangeChange) => {
+  const handleRangeSelect = (0, _ahooks.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
+  };
+};
+exports.useRangeSelection = useRangeSelection;

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

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  dateToTimestamp: true,
+  timestampToDate: true
+};
+Object.defineProperty(exports, "dateToTimestamp", {
+  enumerable: true,
+  get: function () {
+    return _utils.dateToTimestamp;
+  }
+});
+Object.defineProperty(exports, "timestampToDate", {
+  enumerable: true,
+  get: function () {
+    return _utils.timestampToDate;
+  }
+});
+var _calendar = require("./calendar.js");
+Object.keys(_calendar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _calendar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _calendar[key];
+    }
+  });
+});
+var _utils = require("./utils/utils.js");

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

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCalendarStyles = void 0;
+var _index = require("../../../../native-provider/index.js");
+const useCalendarStyles = exports.useCalendarStyles = (0, _index.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/commonjs/components/base/calendar/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});