feat: fix year options bug in Calendar component (#105)

Signed-off-by: Lukas.J.Han <[email protected]>
KRDS-community · Jan 12, 2025 · 06779f0 · 06779f0
1 parent 01819c8
commit 06779f0
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 5 deletions.
diff --git a/packages/core/lib/components/Calendar.tsx b/packages/core/lib/components/Calendar.tsx
@@ -4,6 +4,8 @@ import { Label } from './Label';
 interface CalendarProps {
   mode: 'single' | 'range';
   onSelect: (dates: string[]) => void;
+  minYear?: number;
+  maxYear?: number;
 }
 
 const today = new Date();
@@ -44,9 +46,35 @@ const TriangleIcon: React.FC<{ direction: 'left' | 'right' }> = ({
   </svg>
 );
 
-export const Calendar: React.FC<CalendarProps> = ({ mode, onSelect }) => {
+function getYearOptions(minYear: number, maxYear: number): number[] {
+  if (minYear >= maxYear) {
+    console.warn(
+      'minYear must be less than maxYear. Using default year range.',
+    );
+    const currentYear = new Date().getFullYear();
+    return Array.from({ length: 101 }, (_, i) => currentYear - 100 + i);
+  }
+
+  return Array.from(
+    {
+      length: maxYear - minYear + 1,
+    },
+    (_, i) => minYear + i,
+  );
+}
+
+export const Calendar: React.FC<CalendarProps> = ({
+  mode,
+  onSelect,
+  minYear,
+  maxYear,
+}) => {
   const [currentDate, setCurrentDate] = useState(new Date());
   const [selectedDates, setSelectedDates] = useState<Date[]>([]);
+  const YEARS = getYearOptions(
+    minYear || new Date().getFullYear() - 100,
+    maxYear || new Date().getFullYear(),
+  );
 
   const getDaysInMonth = (date: Date): Date[] => {
     const year = date.getFullYear();
@@ -164,10 +192,7 @@ export const Calendar: React.FC<CalendarProps> = ({ mode, onSelect }) => {
             }
             className="mr-2 p-1 border rounded"
           >
-            {Array.from(
-              { length: 100 },
-              (_, i) => currentDate.getFullYear() - 100 + i + 1,
-            ).map((year) => (
+            {YEARS.map((year) => (
               <option key={year} value={year}>
                 {year}
               </option>

diff --git a/stories/core/Calendar.stories.ts b/stories/core/Calendar.stories.ts
@@ -17,6 +17,14 @@ const meta = {
       },
     },
     onSelect: { action: 'clicked' },
+    minYear: {
+      control: 'number',
+      description: 'Minimum year to display (optional)',
+    },
+    maxYear: {
+      control: 'number',
+      description: 'Maximum year to display (optional)',
+    },
   },
 } satisfies Meta<typeof Calendar>;
 
@@ -37,3 +45,28 @@ export const Range: Story = {
       console.log(`Selected date: ${date[0]} ~ ${date[1]}`),
   },
 };
+
+export const MinYearRange: Story = {
+  args: {
+    mode: 'single',
+    onSelect: (date: string[]) => console.log(`Selected date: ${date[0]}`),
+    minYear: 2020,
+  },
+};
+
+export const MaxYearRange: Story = {
+  args: {
+    mode: 'single',
+    onSelect: (date: string[]) => console.log(`Selected date: ${date[0]}`),
+    maxYear: 2030,
+  },
+};
+
+export const CustomYearRange: Story = {
+  args: {
+    mode: 'single',
+    onSelect: (date: string[]) => console.log(`Selected date: ${date[0]}`),
+    minYear: 2020,
+    maxYear: 2030,
+  },
+};