react-native-system-ui 0.0.1-beta0 → 0.0.2

package/dist/es/calendar/Calendar.js

@@ -0,0 +1,432 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { Pressable, Text, View } from 'react-native';
+import { useControllableValue } from '../../hooks';
+import { isText } from '../../utils/validate';
+import Popup from '../popup';
+import { useCalendarTokens } from './tokens';
+const DAY_MS = 24 * 60 * 60 * 1000;
+const isSameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+const startOfDay = date => {
+  const next = new Date(date);
+  next.setHours(0, 0, 0, 0);
+  return next;
+};
+const daysBetween = (a, b) => Math.round(Math.abs(startOfDay(a).getTime() - startOfDay(b).getTime()) / DAY_MS);
+const toArrayValue = value => {
+  if (!value) return [];
+  return Array.isArray(value) ? value.filter(Boolean).map(date => new Date(date)) : [new Date(value)];
+};
+const DEFAULT_MIN = new Date(new Date().getFullYear() - 10, 0, 1);
+const DEFAULT_MAX = new Date(new Date().getFullYear() + 10, 11, 31);
+const Calendar = props => {
+  const {
+    tokensOverride,
+    value: _value,
+    defaultValue: _defaultValue,
+    minDate = DEFAULT_MIN,
+    maxDate = DEFAULT_MAX,
+    type: typeProp,
+    title: titleProp,
+    showSubtitle: showSubtitleProp,
+    showHeader: showHeaderProp,
+    showConfirm: showConfirmProp,
+    confirmText: confirmTextProp,
+    weekStartsOn: weekStartsOnProp,
+    weekdays,
+    formatMonthTitle,
+    allowSameDay: allowSameDayProp,
+    maxRange,
+    onOverRange,
+    poppable: poppableProp,
+    visible: _visible,
+    defaultVisible: _defaultVisible,
+    onVisibleChange: _onVisibleChange,
+    closeOnClickOverlay: closeOnClickOverlayProp,
+    closeOnConfirm: closeOnConfirmProp,
+    popupPlacement: popupPlacementProp,
+    popupRound: popupRoundProp,
+    popupProps: popupPropsOverrides,
+    onOpen,
+    onOpened,
+    onClose,
+    onClosed,
+    color,
+    onConfirm,
+    onSelect: _onSelect,
+    style,
+    ...rest
+  } = props;
+  const tokens = useCalendarTokens(tokensOverride);
+  const title = titleProp ?? tokens.defaults.title;
+  const showSubtitle = showSubtitleProp ?? tokens.defaults.showSubtitle;
+  const showHeader = showHeaderProp ?? tokens.defaults.showHeader;
+  const confirmText = confirmTextProp ?? tokens.defaults.confirmText;
+  const weekStartsOn = weekStartsOnProp ?? tokens.defaults.weekStartsOn;
+  const allowSameDay = allowSameDayProp ?? tokens.defaults.allowSameDay;
+  const poppable = poppableProp ?? tokens.defaults.poppable;
+  const closeOnClickOverlay = closeOnClickOverlayProp ?? tokens.defaults.closeOnClickOverlay;
+  const closeOnConfirm = closeOnConfirmProp ?? tokens.defaults.closeOnConfirm;
+  const popupPlacement = popupPlacementProp ?? tokens.defaults.popupPlacement;
+  const popupRound = popupRoundProp ?? tokens.defaults.popupRound;
+  const type = typeProp ?? tokens.defaults.type;
+  const showConfirm = showConfirmProp ?? tokens.defaults.showConfirm[type];
+  const [popupVisible, setPopupVisible] = useControllableValue(props, {
+    defaultValue: false,
+    valuePropName: 'visible',
+    defaultValuePropName: 'defaultVisible',
+    trigger: 'onVisibleChange'
+  });
+  const {
+    onClose: popupOnClose,
+    onClosed: popupOnClosed,
+    onOpen: popupOnOpen,
+    onOpened: popupOnOpened,
+    closeOnOverlayPress: overrideCloseOnOverlayPress,
+    overlay: popupOverlay,
+    ...popupRestProps
+  } = popupPropsOverrides ?? {};
+  const closePopup = useCallback(() => {
+    if (!poppable) return;
+    setPopupVisible(false);
+  }, [poppable, setPopupVisible]);
+  const handlePopupOpen = useCallback(() => {
+    popupOnOpen?.();
+    onOpen?.();
+  }, [popupOnOpen, onOpen]);
+  const handlePopupOpened = useCallback(() => {
+    popupOnOpened?.();
+    onOpened?.();
+  }, [popupOnOpened, onOpened]);
+  const handlePopupClose = useCallback(() => {
+    closePopup();
+    popupOnClose?.();
+    onClose?.();
+  }, [closePopup, popupOnClose, onClose]);
+  const handlePopupClosed = useCallback(() => {
+    popupOnClosed?.();
+    onClosed?.();
+  }, [popupOnClosed, onClosed]);
+  const resolvedCloseOnOverlayPress = overrideCloseOnOverlayPress ?? closeOnClickOverlay;
+  const resolvedOverlay = popupOverlay ?? true;
+  const [selectedValue, setSelectedValue] = useControllableValue(props, {
+    defaultValue: null,
+    valuePropName: 'value',
+    defaultValuePropName: 'defaultValue',
+    trigger: 'onSelect'
+  });
+  const value = useMemo(() => normalizeValue(toArrayValue(selectedValue), type), [selectedValue, type]);
+  const [currentMonth, setCurrentMonth] = useState(() => {
+    const initial = value.length ? value[0] : new Date();
+    return clampMonth(initial, minDate, maxDate);
+  });
+  const firstValueTime = value.length ? value[0].getTime() : null;
+  const minDateTime = minDate.getTime();
+  const maxDateTime = maxDate.getTime();
+  useEffect(() => {
+    if (!value.length) {
+      return;
+    }
+    const first = clampMonth(value[0], minDate, maxDate);
+    setCurrentMonth(prev => isSameMonth(first, prev) ? prev : first);
+  }, [firstValueTime, minDateTime, maxDateTime]);
+  const monthDays = useMemo(() => buildMonth(currentMonth, weekStartsOn), [currentMonth, weekStartsOn]);
+  const minDay = useMemo(() => startOfDay(minDate).getTime(), [minDate]);
+  const maxDay = useMemo(() => startOfDay(maxDate).getTime(), [maxDate]);
+  const weekLabels = useMemo(() => reorderWeekdays(weekdays ?? tokens.defaults.weekdays, weekStartsOn, tokens.defaults.weekdays), [tokens.defaults.weekdays, weekdays, weekStartsOn]);
+  const monthLabel = useMemo(() => formatMonthTitle ? formatMonthTitle(currentMonth) : formatMonth(currentMonth), [formatMonthTitle, currentMonth]);
+  const minMonthStart = useMemo(() => startOfMonth(minDate), [minDate]);
+  const maxMonthStart = useMemo(() => startOfMonth(maxDate), [maxDate]);
+  const canGoPrev = currentMonth.getTime() > minMonthStart.getTime();
+  const canGoNext = currentMonth.getTime() < maxMonthStart.getTime();
+  const goToMonth = useCallback(delta => {
+    setCurrentMonth(prev => clampMonth(new Date(prev.getFullYear(), prev.getMonth() + delta, 1), minDate, maxDate));
+  }, [minDate, maxDate]);
+  const confirmDisabled = type === 'range' ? value.length < 2 : value.length === 0;
+  const columnPadding = tokens.spacing.column / 2;
+  const maybeAutoConfirm = useCallback(next => {
+    if (showConfirm) return;
+    if (type === 'range' && next.length < 2) return;
+    if (type === 'multiple' && next.length === 0) return;
+    if (!next.length) return;
+    onConfirm?.(mapValue(next, type));
+    if (poppable && closeOnConfirm) {
+      closePopup();
+    }
+  }, [showConfirm, type, onConfirm, poppable, closeOnConfirm, closePopup]);
+  const handleConfirm = useCallback(() => {
+    if (showConfirm && confirmDisabled) {
+      return;
+    }
+    onConfirm?.(mapValue(value, type));
+    if (poppable && closeOnConfirm) {
+      closePopup();
+    }
+  }, [showConfirm, confirmDisabled, onConfirm, value, type, poppable, closeOnConfirm, closePopup]);
+  const isSelectionAllowed = useCallback(next => {
+    if (type === 'range' && next.length === 2) {
+      const [start, end] = next;
+      if (!allowSameDay && isSameDay(start, end)) {
+        return false;
+      }
+      if (maxRange && daysBetween(start, end) + 1 > maxRange) {
+        onOverRange?.(maxRange);
+        return false;
+      }
+    }
+    if (type === 'multiple' && maxRange && next.length > maxRange) {
+      onOverRange?.(maxRange);
+      return false;
+    }
+    return true;
+  }, [type, allowSameDay, maxRange, onOverRange]);
+  const handleSelectDay = useCallback(day => {
+    const dayTime = startOfDay(day).getTime();
+    if (dayTime < minDay || dayTime > maxDay) {
+      return;
+    }
+    let next = [];
+    const normalized = value;
+    switch (type) {
+      case 'single':
+        {
+          next = [day];
+          break;
+        }
+      case 'multiple':
+        {
+          const exists = normalized.find(item => isSameDay(item, day));
+          next = exists ? normalized.filter(item => !isSameDay(item, day)) : [...normalized, day];
+          break;
+        }
+      case 'range':
+        {
+          if (normalized.length < 1 || normalized.length > 1) {
+            next = [day];
+          } else {
+            const first = normalized[0];
+            if (isSameDay(first, day)) {
+              next = allowSameDay ? [first, day] : [day];
+            } else {
+              next = [first, day].sort((a, b) => a.getTime() - b.getTime());
+            }
+          }
+          break;
+        }
+      default:
+        next = [day];
+    }
+    const normalizedNext = normalizeValue(next, type);
+    if (!isSelectionAllowed(normalizedNext)) {
+      return;
+    }
+    setSelectedValue(mapValue(normalizedNext, type));
+    if (!showConfirm) {
+      maybeAutoConfirm(normalizedNext);
+    }
+  }, [value, type, minDay, maxDay, allowSameDay, isSelectionAllowed, setSelectedValue, showConfirm, maybeAutoConfirm]);
+  const valueTimes = useMemo(() => value.map(item => startOfDay(item).getTime()), [value]);
+  const selectedSet = useMemo(() => new Set(valueTimes), [valueTimes]);
+  const rangeBounds = type === 'range' && valueTimes.length === 2 ? [valueTimes[0], valueTimes[1]] : null;
+  const renderDay = useCallback((day, index) => {
+    if (!day) {
+      return /*#__PURE__*/React.createElement(View, {
+        key: `placeholder-${index}`,
+        style: [tokens.layout.dayPlaceholder, {
+          paddingVertical: tokens.spacing.dayPaddingVertical,
+          paddingHorizontal: columnPadding
+        }]
+      });
+    }
+    const timeValue = startOfDay(day).getTime();
+    const isDisabled = timeValue < minDay || timeValue > maxDay;
+    const isSelected = selectedSet.has(timeValue);
+    const inRange = type === 'range' && rangeBounds && timeValue > rangeBounds[0] && timeValue < rangeBounds[1];
+    const dayStyle = [tokens.layout.dayText, {
+      borderRadius: tokens.radii.day,
+      color: tokens.colors.text,
+      minWidth: tokens.sizing.dayMinWidth
+    }];
+    if (isDisabled) {
+      dayStyle.push({
+        color: tokens.colors.disabled
+      });
+    } else if (inRange) {
+      dayStyle.push({
+        backgroundColor: tokens.colors.rangeBackground
+      });
+    } else if (isSelected) {
+      dayStyle.push({
+        backgroundColor: color ?? tokens.colors.selectedBackground,
+        color: tokens.colors.selectedText
+      });
+    }
+    return /*#__PURE__*/React.createElement(Pressable, {
+      key: day.toISOString(),
+      style: [tokens.layout.dayButton, {
+        paddingVertical: tokens.spacing.dayPaddingVertical,
+        paddingHorizontal: columnPadding
+      }],
+      disabled: isDisabled,
+      onPress: () => handleSelectDay(day),
+      testID: getCalendarDayTestId(day)
+    }, /*#__PURE__*/React.createElement(Text, {
+      style: dayStyle
+    }, day.getDate()));
+  }, [selectedSet, type, rangeBounds, minDay, maxDay, tokens, color, handleSelectDay, columnPadding]);
+  const content = /*#__PURE__*/React.createElement(View, _extends({
+    style: [{
+      backgroundColor: tokens.colors.background,
+      padding: tokens.spacing.containerPadding,
+      borderRadius: tokens.radii.container
+    }, style]
+  }, rest), showHeader ? /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.header, {
+      marginBottom: tokens.spacing.headerMarginBottom
+    }]
+  }, /*#__PURE__*/React.createElement(Pressable, {
+    testID: "calendar-nav-prev",
+    onPress: () => canGoPrev && goToMonth(-1),
+    disabled: !canGoPrev
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.navText, {
+      fontSize: tokens.sizing.navButtonSize,
+      paddingHorizontal: tokens.spacing.navPaddingHorizontal
+    }, !canGoPrev && {
+      opacity: 0.3
+    }]
+  }, '<')), /*#__PURE__*/React.createElement(View, {
+    style: tokens.layout.headerCenter
+  }, title !== undefined && title !== null && title !== false ? isText(title) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.headerTitle, {
+      color: tokens.colors.text,
+      fontSize: tokens.typography.headerTitleSize,
+      fontWeight: tokens.typography.headerTitleWeight
+    }]
+  }, title) : title : null, showSubtitle ? isText(monthLabel) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.headerSubtitle, {
+      color: tokens.colors.headerSubtitle,
+      fontSize: tokens.typography.headerSubtitleSize
+    }]
+  }, monthLabel) : monthLabel : null), /*#__PURE__*/React.createElement(Pressable, {
+    testID: "calendar-nav-next",
+    onPress: () => canGoNext && goToMonth(1),
+    disabled: !canGoNext
+  }, /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.navText, {
+      fontSize: tokens.sizing.navButtonSize,
+      paddingHorizontal: tokens.spacing.navPaddingHorizontal
+    }, !canGoNext && {
+      opacity: 0.3
+    }]
+  }, '>'))) : null, /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.weekRow, {
+      marginBottom: tokens.spacing.weekRowMarginBottom
+    }]
+  }, weekLabels.map((label, index) => /*#__PURE__*/React.createElement(View, {
+    key: `weekday-${index}`,
+    style: [tokens.layout.weekLabelItem, {
+      paddingHorizontal: columnPadding
+    }]
+  }, isText(label) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.weekLabel, {
+      color: tokens.colors.text
+    }]
+  }, label) : label))), /*#__PURE__*/React.createElement(View, {
+    style: [tokens.layout.days, {
+      rowGap: tokens.spacing.row
+    }]
+  }, monthDays.map((day, index) => renderDay(day, index))), showConfirm ? /*#__PURE__*/React.createElement(Pressable, {
+    style: [tokens.layout.confirmButton, {
+      backgroundColor: color ?? tokens.colors.selectedBackground,
+      opacity: confirmDisabled ? 0.5 : 1,
+      marginTop: tokens.spacing.confirmMarginTop,
+      paddingVertical: tokens.spacing.confirmPaddingVertical,
+      borderRadius: tokens.radii.confirmButton
+    }],
+    onPress: handleConfirm,
+    disabled: confirmDisabled
+  }, isText(confirmText) ? /*#__PURE__*/React.createElement(Text, {
+    style: [tokens.layout.confirmText, {
+      color: tokens.colors.confirmText,
+      fontWeight: tokens.typography.confirmTextWeight
+    }]
+  }, confirmText) : confirmText) : null);
+  if (!poppable) {
+    return content;
+  }
+  return /*#__PURE__*/React.createElement(Popup, _extends({
+    visible: popupVisible,
+    placement: popupPlacement,
+    round: popupRound,
+    closeOnOverlayPress: resolvedCloseOnOverlayPress,
+    overlay: resolvedOverlay,
+    safeAreaInsetTop: popupRestProps?.safeAreaInsetTop !== undefined ? popupRestProps.safeAreaInsetTop : showHeader,
+    safeAreaInsetBottom: popupRestProps?.safeAreaInsetBottom !== undefined ? popupRestProps.safeAreaInsetBottom : popupPlacement === 'bottom',
+    onOpen: handlePopupOpen,
+    onOpened: handlePopupOpened,
+    onClose: handlePopupClose,
+    onClosed: handlePopupClosed
+  }, popupRestProps), content);
+};
+function mapValue(value, type) {
+  if (type === 'single') {
+    return value[0] ?? new Date();
+  }
+  if (type === 'range' && value.length === 2) {
+    return value;
+  }
+  return value;
+}
+function normalizeValue(value, type) {
+  if (type === 'single') {
+    return value.slice(0, 1);
+  }
+  if (type === 'range') {
+    return value.slice(0, 2).sort((a, b) => a.getTime() - b.getTime());
+  }
+  return value;
+}
+function formatMonth(date) {
+  return `${date.getFullYear()}年${date.getMonth() + 1}月`;
+}
+function reorderWeekdays(labels, start, fallback) {
+  const normalizedStart = (start % 7 + 7) % 7;
+  const source = labels.length === 7 ? [...labels] : fallback;
+  return [...source.slice(normalizedStart), ...source.slice(0, normalizedStart)];
+}
+function buildMonth(month, weekStartsOn) {
+  const normalizedStart = (weekStartsOn % 7 + 7) % 7;
+  const firstDay = startOfMonth(month);
+  const startOffset = (firstDay.getDay() - normalizedStart + 7) % 7;
+  const daysInMonth = new Date(month.getFullYear(), month.getMonth() + 1, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < startOffset; i += 1) {
+    cells.push(null);
+  }
+  for (let day = 1; day <= daysInMonth; day += 1) {
+    cells.push(new Date(month.getFullYear(), month.getMonth(), day));
+  }
+  while (cells.length < 42) {
+    cells.push(null);
+  }
+  return cells;
+}
+function getCalendarDayTestId(day) {
+  return `calendar-day-${day.getFullYear()}-${`${day.getMonth() + 1}`.padStart(2, '0')}-${`${day.getDate()}`.padStart(2, '0')}`;
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function clampMonth(date, min, max) {
+  const month = startOfMonth(date);
+  const minMonth = startOfMonth(min);
+  const maxMonth = startOfMonth(max);
+  if (month.getTime() < minMonth.getTime()) return minMonth;
+  if (month.getTime() > maxMonth.getTime()) return maxMonth;
+  return month;
+}
+function isSameMonth(a, b) {
+  return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+}
+export default Calendar;

package/dist/es/calendar/index.js

@@ -0,0 +1,2 @@
+import Calendar from './Calendar';
+export default Calendar;

package/dist/es/calendar/tokens.js

@@ -0,0 +1,122 @@
+import { createComponentTokensHook } from "../../design-system";
+export const createCalendarTokens = foundations => {
+  const {
+    palette,
+    spacing,
+    radii,
+    fontSize,
+    typography
+  } = foundations;
+  const onPrimary = palette.primary.foreground ?? "#ffffff";
+  return {
+    defaults: {
+      type: "single",
+      title: "选择日期",
+      showSubtitle: true,
+      showHeader: true,
+      showConfirm: {
+        single: false,
+        range: true,
+        multiple: true
+      },
+      confirmText: "确定",
+      weekStartsOn: 0,
+      weekdays: ["日", "一", "二", "三", "四", "五", "六"],
+      allowSameDay: false,
+      poppable: false,
+      closeOnClickOverlay: true,
+      closeOnConfirm: true,
+      popupPlacement: "bottom",
+      popupRound: true
+    },
+    layout: {
+      header: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between"
+      },
+      headerCenter: {
+        alignItems: "center",
+        flex: 1
+      },
+      navText: {
+        textAlign: "center"
+      },
+      headerTitle: {
+        textAlign: "center"
+      },
+      headerSubtitle: {
+        textAlign: "center"
+      },
+      weekRow: {
+        flexDirection: "row",
+        justifyContent: "space-between"
+      },
+      weekLabelItem: {
+        width: `${100 / 7}%`,
+        alignItems: "center"
+      },
+      weekLabel: {
+        textAlign: "center"
+      },
+      days: {
+        flexDirection: "row",
+        flexWrap: "wrap"
+      },
+      dayButton: {
+        width: `${100 / 7}%`,
+        alignItems: "center"
+      },
+      dayText: {
+        textAlign: "center"
+      },
+      dayPlaceholder: {
+        width: `${100 / 7}%`
+      },
+      confirmButton: {
+        alignItems: "center"
+      },
+      confirmText: {
+        textAlign: "center"
+      }
+    },
+    colors: {
+      text: palette.default[800],
+      weekend: palette.danger[500],
+      disabled: palette.default[300],
+      background: "#ffffff",
+      selectedBackground: palette.primary[500],
+      selectedText: onPrimary,
+      rangeBackground: palette.primary[100],
+      headerSubtitle: palette.default[600],
+      confirmText: onPrimary
+    },
+    typography: {
+      headerTitleSize: fontSize.md,
+      headerTitleWeight: typography.weight.semiBold,
+      headerSubtitleSize: fontSize.sm,
+      confirmTextWeight: typography.weight.semiBold
+    },
+    sizing: {
+      dayMinWidth: 32,
+      navButtonSize: fontSize.md
+    },
+    radii: {
+      day: radii.sm,
+      container: radii.lg,
+      confirmButton: 20
+    },
+    spacing: {
+      row: spacing.xs,
+      column: spacing.xs,
+      containerPadding: spacing.lg,
+      headerMarginBottom: spacing.md,
+      weekRowMarginBottom: spacing.sm,
+      navPaddingHorizontal: spacing.sm,
+      dayPaddingVertical: 6,
+      confirmMarginTop: spacing.lg,
+      confirmPaddingVertical: 10
+    }
+  };
+};
+export const useCalendarTokens = createComponentTokensHook("calendar", createCalendarTokens);