@os-design/core 1.0.280 → 1.0.281

package/src/DateCalendar/index.tsx

@@ -0,0 +1,135 @@
+import { useForwardedState } from '@os-design/utils';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import Calendar from './Calendar.js';
+import { defaultLocale, type DateCalendarLocale } from './locale.js';
+import MonthPicker from './MonthPicker.js';
+import type { Day, Month } from './utils/calendarDays.js';
+
+type JsxDivProps = Omit<
+  JSX.IntrinsicElements['div'],
+  'defaultValue' | 'onChange' | 'ref'
+>;
+export interface DateCalendarProps extends JsxDivProps {
+  /**
+   * First day of week (0 - Sunday).
+   * @default 0
+   */
+  firstDayOfWeek?: number;
+  /**
+   * What days are not allowed to choose in the selected month.
+   * @default undefined
+   */
+  disabledDays?: (month: Month) => number[] | Promise<number[]>;
+  /**
+   * The locale.
+   * @default undefined
+   */
+  locale?: DateCalendarLocale;
+  /**
+   * The selected date.
+   * @default undefined
+   */
+  value?: Day | null;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: Day | null;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: Day | null) => void;
+}
+
+/**
+ * The component to choose a date in a calendar.
+ */
+const DateCalendar = forwardRef<HTMLDivElement, DateCalendarProps>(
+  (
+    {
+      firstDayOfWeek = 0,
+      disabledDays,
+      locale = defaultLocale,
+      value,
+      defaultValue,
+      onChange = () => {},
+      ...rest
+    },
+    ref
+  ) => {
+    const [forwardedValue, setForwardedValue] = useForwardedState({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    const [showMonthPicker, setShowMonthPicker] = useState(false);
+
+    const today = useMemo(() => new Date(), []);
+
+    const [displayedMonth, setDisplayedMonth] = useState(() => {
+      if (forwardedValue) {
+        return {
+          year: forwardedValue.year,
+          month: forwardedValue.month,
+        };
+      }
+      return {
+        year: today.getFullYear(),
+        month: today.getMonth(),
+      };
+    });
+
+    const displayedMonthRef = useRef(displayedMonth);
+    useEffect(() => {
+      displayedMonthRef.current = displayedMonth;
+    }, [displayedMonth]);
+
+    // Update the displayed month if the value has been changed
+    useEffect(() => {
+      if (
+        forwardedValue &&
+        (forwardedValue.year !== displayedMonthRef.current.year ||
+          forwardedValue.month !== displayedMonthRef.current.month)
+      ) {
+        setDisplayedMonth({
+          year: forwardedValue.year,
+          month: forwardedValue.month,
+        });
+      }
+    }, [forwardedValue]);
+
+    return (
+      <div {...rest} ref={ref}>
+        {showMonthPicker ? (
+          <MonthPicker
+            locale={locale}
+            month={displayedMonth}
+            onChangeMonth={(month) => {
+              setDisplayedMonth(month);
+              setShowMonthPicker(false);
+            }}
+            today={today}
+          />
+        ) : (
+          <Calendar
+            firstDayOfWeek={firstDayOfWeek}
+            disabledDays={disabledDays}
+            locale={locale}
+            value={forwardedValue}
+            onChange={setForwardedValue}
+            month={displayedMonth}
+            onChangeMonth={setDisplayedMonth}
+            onSelectMonth={() => setShowMonthPicker(true)}
+            today={today}
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+DateCalendar.displayName = 'DateCalendar';
+
+export default DateCalendar;

package/src/DateCalendar/locale.ts

@@ -0,0 +1,22 @@
+export interface DateCalendarLocale {
+  months: string[];
+  shortDaysOfWeek: string[];
+}
+
+export const defaultLocale: DateCalendarLocale = {
+  months: [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ],
+  shortDaysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
+};

package/src/DateCalendar/utils/calendarDays.ts

@@ -0,0 +1,61 @@
+import dayOfWeek from './dayOfWeek.js';
+import daysInMonth from './daysInMonth.js';
+import { nextMonth, prevMonth } from './month.js';
+
+export interface Month {
+  year: number;
+  month: number;
+}
+
+export interface Day extends Month {
+  day: number;
+}
+
+const calendarDays = (month: Month, firstDayOfWeek: number = 0): Day[] => {
+  const days: Day[] = [];
+
+  // Previous month
+  const firstDayOfWeekInMonth = dayOfWeek({
+    year: month.year,
+    month: month.month,
+    day: 1,
+  });
+  const daysBeforeFirstDay =
+    firstDayOfWeekInMonth >= firstDayOfWeek
+      ? firstDayOfWeekInMonth - firstDayOfWeek
+      : 7 - (firstDayOfWeek - firstDayOfWeekInMonth);
+  const pMonth = prevMonth(month);
+  const daysInPreviousMonth = daysInMonth(pMonth);
+  for (let i = 0; i < daysBeforeFirstDay; i++) {
+    days.push({
+      year: pMonth.year,
+      month: pMonth.month,
+      day: daysInPreviousMonth - daysBeforeFirstDay + i + 1,
+    });
+  }
+
+  // Current month
+  const daysInCurrentMonth = daysInMonth(month);
+  for (let i = 1; i <= daysInCurrentMonth; i++) {
+    days.push({
+      year: month.year,
+      month: month.month,
+      day: i,
+    });
+  }
+
+  // Next month
+  const daysAfterLastDay = 42 - days.length;
+  const nMonth = nextMonth(month);
+  for (let i = 1; i <= daysAfterLastDay; i++) {
+    days.push({
+      year: nMonth.year,
+      month: nMonth.month,
+      day: i,
+    });
+  }
+
+  return days;
+};
+
+export default calendarDays;

package/src/DateCalendar/utils/dayOfWeek.ts

@@ -0,0 +1,14 @@
+interface Day {
+  year: number;
+  month: number;
+  day: number;
+}
+
+const date = new Date();
+
+const dayOfWeek = (day: Day) => {
+  date.setFullYear(day.year, day.month, day.day);
+  return date.getDay();
+};
+
+export default dayOfWeek;

package/src/DateCalendar/utils/daysInMonth.ts

@@ -0,0 +1,22 @@
+interface Month {
+  year: number;
+  month: number;
+}
+
+const daysInMonth = (month: Month) => {
+  switch (month.month) {
+    case 1:
+      return (month.year % 4 == 0 && month.year % 100) || month.year % 400 == 0
+        ? 29
+        : 28;
+    case 3:
+    case 5:
+    case 8:
+    case 10:
+      return 30;
+    default:
+      return 31;
+  }
+};
+
+export default daysInMonth;

package/src/DateCalendar/utils/month.ts

@@ -0,0 +1,30 @@
+interface Month {
+  year: number;
+  month: number;
+}
+
+export const nextMonth = (month: Month) => {
+  if (month.month === 11) {
+    return {
+      month: 0,
+      year: month.year + 1,
+    };
+  }
+  return {
+    month: month.month + 1,
+    year: month.year,
+  };
+};
+
+export const prevMonth = (month: Month) => {
+  if (month.month === 0) {
+    return {
+      month: 11,
+      year: month.year - 1,
+    };
+  }
+  return {
+    month: month.month - 1,
+    year: month.year,
+  };
+};

package/src/DateCalendar/utils/shift.ts

@@ -0,0 +1,14 @@
+const shift = <T>(arr: T[], n: number): T[] => {
+  if (n % arr.length === 0) {
+    return arr;
+  }
+
+  const res: T[] = [];
+  for (let i = 0; i < arr.length; i++) {
+    const index = (n + i) % arr.length;
+    res.push(arr[index]);
+  }
+  return res;
+};
+
+export default shift;