@jk-core/components 1.1.15 → 1.1.17

package/src/Calendar/components/YearTile/index.tsx

@@ -1,65 +1,65 @@
-import { useEffect, useRef } from 'react';
-import { cn } from '@jk-core/utils';
-import { CalendarView } from '@/Calendar/type';
-import styles from './YearTile.module.scss';
-
-interface Props {
-  selectedDate?: Date;
-  onClick: (year: number) => void;
-  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
-  max: Date;
-  min: Date;
-}
-
-export default function YearTile({
-  selectedDate, onClick,
-  tileContent = () => false,
-  max, min,
-}: Props) {
-  const wrapperRef = useRef<HTMLDivElement>(null);
-  const selectedRef = useRef<HTMLButtonElement>(null);
-  const YEARS = Array.from(
-    { length: max.getFullYear() - min.getFullYear() + 1 },
-    (_, i) => min.getFullYear() + i,
-  );
-
-  useEffect(() => {
-    const selectedElement = selectedRef.current;
-    const wrapperElement = wrapperRef.current;
-    if (!selectedElement || !wrapperElement) return;
-
-    const { clientHeight } = wrapperElement;
-    const { offsetTop, clientHeight: selectedHeight } = selectedElement;
-
-    wrapperElement.scrollTo({
-      top: offsetTop - clientHeight / 2 + selectedHeight,
-    });
-  }, []);
-
-  return (
-    <div className={styles['year-tile']} ref={wrapperRef}>
-      <div className={styles['year-tile__blank']} />
-      {YEARS.map((year) => (
-        <button
-          className={cn({
-            [styles['year-tile__year']]: true,
-            [styles['year-tile__year--selected']]: !!selectedDate && selectedDate.getFullYear() === year,
-            [styles['year-tile__year--border']]: !!tileContent(new Date(year, 1, 1), 'year'),
-          })}
-          key={year}
-          type="button"
-          ref={!!selectedDate && selectedDate.getFullYear() === year ? selectedRef : null}
-          onClick={() => onClick(year)}
-        >
-          <span className={styles['yearTile__year--year']}>{year}</span>
-          {tileContent(new Date(year, 1, 1), 'year') && (
-            <div className={styles['yearTile__year--tile']}>
-              {tileContent(new Date(year, 1, 1), 'year')}
-            </div>
-          )}
-        </button>
-      ))}
-      <div className={styles['year-tile__blank']} />
-    </div>
-  );
-}
+import { useEffect, useRef } from 'react';
+import { cn } from '@jk-core/utils';
+import { CalendarView } from '@/Calendar/type';
+import styles from './YearTile.module.scss';
+
+interface Props {
+  selectedDate?: Date;
+  onClick: (year: number) => void;
+  tileContent?: (date: Date, view:CalendarView) => React.ReactNode;
+  max: Date;
+  min: Date;
+}
+
+export default function YearTile({
+  selectedDate, onClick,
+  tileContent = () => false,
+  max, min,
+}: Props) {
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const selectedRef = useRef<HTMLButtonElement>(null);
+  const YEARS = Array.from(
+    { length: max.getFullYear() - min.getFullYear() + 1 },
+    (_, i) => min.getFullYear() + i,
+  );
+
+  useEffect(() => {
+    const selectedElement = selectedRef.current;
+    const wrapperElement = wrapperRef.current;
+    if (!selectedElement || !wrapperElement) return;
+
+    const { clientHeight } = wrapperElement;
+    const { offsetTop, clientHeight: selectedHeight } = selectedElement;
+
+    wrapperElement.scrollTo({
+      top: offsetTop - clientHeight / 2 + selectedHeight,
+    });
+  }, []);
+
+  return (
+    <div className={styles['year-tile']} ref={wrapperRef}>
+      <div className={styles['year-tile__blank']} />
+      {YEARS.map((year) => (
+        <button
+          className={cn({
+            [styles['year-tile__year']]: true,
+            [styles['year-tile__year--selected']]: !!selectedDate && selectedDate.getFullYear() === year,
+            [styles['year-tile__year--border']]: !!tileContent(new Date(year, 1, 1), 'year'),
+          })}
+          key={year}
+          type="button"
+          ref={!!selectedDate && selectedDate.getFullYear() === year ? selectedRef : null}
+          onClick={() => onClick(year)}
+        >
+          <span className={styles['yearTile__year--year']}>{year}</span>
+          {tileContent(new Date(year, 1, 1), 'year') && (
+            <div className={styles['yearTile__year--tile']}>
+              {tileContent(new Date(year, 1, 1), 'year')}
+            </div>
+          )}
+        </button>
+      ))}
+      <div className={styles['year-tile__blank']} />
+    </div>
+  );
+}

package/src/Calendar/hooks/useCalendarNav.ts

@@ -1,83 +1,83 @@
-import { CalendarView } from '../type';
-
-interface Props {
-  method: CalendarView;
-  selectMode: CalendarView;
-  viewDate: Date;
-  setDate:(date: Date) => void;
-  min: Date;
-  max: Date;
-}
-const useCalendarNav = ({
-  method, selectMode, viewDate, setDate, min, max,
-}:Props) => {
-  const disabled = (direction: 'prev' | 'next') => {
-    if (selectMode === 'year' || method !== selectMode) return true;
-
-    if (method === 'day') {
-      if (direction === 'prev') {
-        const prevMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
-        const isPrevMonthBeforeMin = prevMonth.getFullYear() < min.getFullYear()
-          || (prevMonth.getFullYear() === min.getFullYear()
-            && prevMonth.getMonth() < min.getMonth());
-        return isPrevMonthBeforeMin;
-      }
-      const nextMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
-      return nextMonth > max;
-    }
-
-    if (method === 'month') {
-      if (direction === 'prev') {
-        const prevYear = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1);
-        return prevYear < min;
-      }
-      const nextYear = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1);
-      return nextYear > max;
-    }
-
-    if (method === 'year') {
-      if (direction === 'prev') {
-        const prevDecade = new Date(viewDate.getFullYear() - 10, viewDate.getMonth(), 1);
-        return prevDecade < min;
-      }
-      const nextDecade = new Date(viewDate.getFullYear() + 10, viewDate.getMonth(), 1);
-      return nextDecade > max;
-    }
-
-    return false;
-  };
-
-  const onArrowClick = (direction: 'prev' | 'next') => {
-    const offset = direction === 'prev' ? -1 : 1;
-    const minDate = new Date(2000, 0, 1);
-    const maxDate = new Date(2099, 11, 31);
-
-    if (method === 'day') {
-      const newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + offset, 1);
-
-      if (newDate >= minDate && newDate <= maxDate) {
-        setDate(newDate);
-      }
-    }
-
-    if (method === 'month') {
-      const newDate = new Date(viewDate.getFullYear() + offset, viewDate.getMonth(), 1);
-
-      if (newDate >= minDate && newDate <= maxDate) {
-        setDate(newDate);
-      }
-    }
-
-    if (method === 'year') {
-      const newDate = new Date(viewDate.getFullYear() + offset * 10, viewDate.getMonth(), 1);
-
-      if (newDate >= minDate && newDate <= maxDate) {
-        setDate(newDate);
-      }
-    }
-  };
-
-  return { disabled, onArrowClick };
-};
-
-export default useCalendarNav;
+import { CalendarView } from '../type';
+
+interface Props {
+  method: CalendarView;
+  selectMode: CalendarView;
+  viewDate: Date;
+  setDate:(date: Date) => void;
+  min: Date;
+  max: Date;
+}
+const useCalendarNav = ({
+  method, selectMode, viewDate, setDate, min, max,
+}:Props) => {
+  const disabled = (direction: 'prev' | 'next') => {
+    if (selectMode === 'year' || method !== selectMode) return true;
+
+    if (method === 'day') {
+      if (direction === 'prev') {
+        const prevMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1);
+        const isPrevMonthBeforeMin = prevMonth.getFullYear() < min.getFullYear()
+          || (prevMonth.getFullYear() === min.getFullYear()
+            && prevMonth.getMonth() < min.getMonth());
+        return isPrevMonthBeforeMin;
+      }
+      const nextMonth = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1);
+      return nextMonth > max;
+    }
+
+    if (method === 'month') {
+      if (direction === 'prev') {
+        const prevYear = new Date(viewDate.getFullYear() - 1, viewDate.getMonth(), 1);
+        return prevYear < min;
+      }
+      const nextYear = new Date(viewDate.getFullYear() + 1, viewDate.getMonth(), 1);
+      return nextYear > max;
+    }
+
+    if (method === 'year') {
+      if (direction === 'prev') {
+        const prevDecade = new Date(viewDate.getFullYear() - 10, viewDate.getMonth(), 1);
+        return prevDecade < min;
+      }
+      const nextDecade = new Date(viewDate.getFullYear() + 10, viewDate.getMonth(), 1);
+      return nextDecade > max;
+    }
+
+    return false;
+  };
+
+  const onArrowClick = (direction: 'prev' | 'next') => {
+    const offset = direction === 'prev' ? -1 : 1;
+    const minDate = new Date(2000, 0, 1);
+    const maxDate = new Date(2099, 11, 31);
+
+    if (method === 'day') {
+      const newDate = new Date(viewDate.getFullYear(), viewDate.getMonth() + offset, 1);
+
+      if (newDate >= minDate && newDate <= maxDate) {
+        setDate(newDate);
+      }
+    }
+
+    if (method === 'month') {
+      const newDate = new Date(viewDate.getFullYear() + offset, viewDate.getMonth(), 1);
+
+      if (newDate >= minDate && newDate <= maxDate) {
+        setDate(newDate);
+      }
+    }
+
+    if (method === 'year') {
+      const newDate = new Date(viewDate.getFullYear() + offset * 10, viewDate.getMonth(), 1);
+
+      if (newDate >= minDate && newDate <= maxDate) {
+        setDate(newDate);
+      }
+    }
+  };
+
+  return { disabled, onArrowClick };
+};
+
+export default useCalendarNav;

package/src/Calendar/hooks/useDateSelect.ts

@@ -1,54 +1,54 @@
-import { CalendarView } from '../type';
-
-interface UseDateSelectProps {
-  viewDate: Date;
-  setViewDate: (date: Date) => void;
-  method: CalendarView;
-  setSelectMode:(mode:CalendarView) => void;
-  onChange: (date: Date, method?: CalendarView) => void;
-  setView:(view:CalendarView)=>void;
-}
-
-const useDateSelect = ({
-  viewDate, setViewDate, onChange, setSelectMode, method, setView,
-}: UseDateSelectProps) => {
-  const min = new Date(2000, 0, 1);
-  const max = new Date(2099, 11, 31);
-
-  const onDayClick = (day: Date) => {
-    if (day < min || day > max) {
-      return;
-    }
-
-    setViewDate(day);
-    setView('day');
-    onChange(day, 'day');
-  };
-
-  const onMonthClick = (month:number) => {
-    const newDate = new Date(viewDate.getFullYear(), month, 1);
-
-    setViewDate(newDate);
-
-    if (method !== 'month') setSelectMode(method);
-    if (method === 'month') {
-      setView('month');
-      onChange(newDate, 'month');
-    }
-  };
-
-  const onYearClick = (year:number) => {
-    const newDate = new Date(year, 0, 1);
-
-    setViewDate(newDate);
-    if (method !== 'year') setSelectMode(method);
-    if (method === 'year') {
-      setView('year');
-      onChange(newDate, 'year');
-    }
-  };
-
-  return { onDayClick, onMonthClick, onYearClick };
-};
-
-export default useDateSelect;
+import { CalendarView } from '../type';
+
+interface UseDateSelectProps {
+  viewDate: Date;
+  setViewDate: (date: Date) => void;
+  method: CalendarView;
+  setSelectMode:(mode:CalendarView) => void;
+  onChange: (date: Date, method?: CalendarView) => void;
+  setView:(view:CalendarView)=>void;
+}
+
+const useDateSelect = ({
+  viewDate, setViewDate, onChange, setSelectMode, method, setView,
+}: UseDateSelectProps) => {
+  const min = new Date(2000, 0, 1);
+  const max = new Date(2099, 11, 31);
+
+  const onDayClick = (day: Date) => {
+    if (day < min || day > max) {
+      return;
+    }
+
+    setViewDate(day);
+    setView('day');
+    onChange(day, 'day');
+  };
+
+  const onMonthClick = (month:number) => {
+    const newDate = new Date(viewDate.getFullYear(), month, 1);
+
+    setViewDate(newDate);
+
+    if (method !== 'month') setSelectMode(method);
+    if (method === 'month') {
+      setView('month');
+      onChange(newDate, 'month');
+    }
+  };
+
+  const onYearClick = (year:number) => {
+    const newDate = new Date(year, 0, 1);
+
+    setViewDate(newDate);
+    if (method !== 'year') setSelectMode(method);
+    if (method === 'year') {
+      setView('year');
+      onChange(newDate, 'year');
+    }
+  };
+
+  return { onDayClick, onMonthClick, onYearClick };
+};
+
+export default useDateSelect;