refactor: create calendar component

Author: jason89521

packages/react-use-calendar-component/README.md

@@ -10,3 +10,4 @@ This project is aimed to provide an easy-to-use API interface for those people w
 - [ ] Select multiple dates
 - [ ] Support disabled date
 - [ ] Support displaying two calendar
+- [ ] Support week, month, year selection

packages/react-use-calendar-component/src/app/App.tsx

@@ -1,74 +1,24 @@
-import { useEffect } from 'react';
+import { useState } from 'react';
 
-import useCalendarComponent from '../lib';
-import { getWeekDayList, getMonthList } from '../lib/utils/locale';
-import LeftArrow from './components/LeftArrow';
-import RightArrow from './components/RightArrow';
+import Single from './components/Examples/Single';
 
-const weekDayList = getWeekDayList();
-const monthList = getMonthList();
+type ExampleType = 'single';
 
-function App() {
-  const {
-    displayedYear,
-    displayedMonth,
-    selectedDate,
-    changeDisplayedMonth,
-    changeDisplayedYear,
-    getDateCellInfos,
-  } = useCalendarComponent();
+const exampleMap = {
+  single: <Single />,
+};
 
-  useEffect(() => {
-    const { year, month, dayOfMonth } = selectedDate;
-    console.log(new Date(year, month, dayOfMonth).toLocaleString());
-  }, [selectedDate]);
-
-  const dateCells = getDateCellInfos().map(
-    ({ key, monthStatus, dayOfMonth, isToday, isSelected, selectThisDate }) => {
-      let className = 'rounded-full';
-      if (monthStatus !== 'current') className = `${className} text-slate-300`;
-      if (isSelected) className = `${className} bg-green-200`;
-      if (isToday && !isSelected) className = `${className} bg-amber-200`;
-
-      return (
-        <button
-          key={key}
-          className={className}
-          onClick={() => {
-            selectThisDate({ changeDisplayedValues: true });
-          }}>
-          <div className='flex items-center justify-center'>
-            <span>{dayOfMonth}</span>
-          </div>
-        </button>
-      );
-    }
-  );
+export default function App() {
+  const [value, setValue] = useState<ExampleType>('single');
 
   return (
-    <div className='bg-white shadow-2xl rounded-3xl p-8 w-[500px]'>
-      <div className='flex justify-between items-center'>
-        <LeftArrow arrowAmount={2} onClick={() => changeDisplayedYear(-1)} />
-        <LeftArrow onClick={() => changeDisplayedMonth(-1)} />
-        <div className='flex flex-col justify-center items-center'>
-          <span className='text-lg'>{displayedYear}</span>
-          <span className='text-sm'>{monthList[displayedMonth]}</span>
-        </div>
-        <RightArrow onClick={() => changeDisplayedMonth(1)} />
-        <RightArrow arrowAmount={2} onClick={() => changeDisplayedYear(1)} />
-      </div>
-      <div className='mt-5'>
-        <div className='grid grid-cols-7 mb-4'>
-          {weekDayList.map((d, i) => (
-            <div key={i} className='flex items-center justify-center'>
-              {d}
-            </div>
-          ))}
-        </div>
-        <div className='grid grid-cols-7 gap-y-4'>{dateCells}</div>
-      </div>
+    <div className='flex flex-col items-center gap-10 pt-10 min-h-screen bg-slate-500'>
+      <select
+        value={value}
+        onChange={e => setValue(e.currentTarget.value as ExampleType)}>
+        <option value='single'>single</option>
+      </select>
+      {exampleMap[value]}
     </div>
   );
 }
-
-export default App;

packages/react-use-calendar-component/src/app/components/Calendar.tsx

@@ -0,0 +1,37 @@
+import { useEffect } from 'react';
+
+import useCalendarComponent from '../../lib';
+import CalendarBody from './CalendarBody';
+import CalendarHeader from './CalendarHeader';
+
+interface Props {
+  calendarControl: ReturnType<typeof useCalendarComponent>;
+}
+
+export default function Calendar({ calendarControl }: Props) {
+  const {
+    displayedYear,
+    displayedMonth,
+    selectedDate,
+    changeDisplayedMonth,
+    changeDisplayedYear,
+    getDateCellInfos,
+  } = calendarControl;
+
+  useEffect(() => {
+    const { year, month, dayOfMonth } = selectedDate;
+    console.log(new Date(year, month, dayOfMonth).toLocaleString());
+  }, [selectedDate]);
+
+  return (
+    <div className='bg-white shadow-2xl rounded-3xl p-8 w-[500px]'>
+      <CalendarHeader
+        onYearClick={changeDisplayedYear}
+        onMonthClick={changeDisplayedMonth}
+        year={displayedYear}
+        month={displayedMonth}
+      />
+      <CalendarBody dateCellInfos={getDateCellInfos()} />
+    </div>
+  );
+}

packages/react-use-calendar-component/src/app/components/CalendarBody.tsx

@@ -0,0 +1,28 @@
+import type { DateCellInfo } from '../../lib/types';
+import { getWeekDayList } from '../../lib/utils/locale';
+import CalendarCell from './CalendarCell';
+
+const weekDayList = getWeekDayList();
+
+interface Props {
+  dateCellInfos: DateCellInfo[];
+}
+
+export default function CalendarBody({ dateCellInfos }: Props) {
+  return (
+    <div className='mt-5'>
+      <div className='grid grid-cols-7 mb-4'>
+        {weekDayList.map((d, i) => (
+          <div key={i} className='flex items-center justify-center'>
+            {d}
+          </div>
+        ))}
+      </div>
+      <div className='grid grid-cols-7 gap-y-4'>
+        {dateCellInfos.map(info => (
+          <CalendarCell key={info.key} dateCellInfo={info} />
+        ))}
+      </div>
+    </div>
+  );
+}

packages/react-use-calendar-component/src/app/components/CalendarCell.tsx

@@ -0,0 +1,27 @@
+import type { DateCellInfo } from '../../lib/types';
+
+interface Props {
+  dateCellInfo: DateCellInfo;
+}
+
+export default function CalendarCell({ dateCellInfo }: Props) {
+  const { key, monthStatus, dayOfMonth, isToday, isSelected, selectThisDate } =
+    dateCellInfo;
+  let className = 'rounded-full hover:bg-stone-100';
+  if (monthStatus !== 'current') className = `${className} text-slate-300`;
+  if (isSelected) className = `${className} bg-green-200`;
+  if (isToday && !isSelected) className = `${className} bg-amber-200`;
+
+  return (
+    <button
+      key={key}
+      className={className}
+      onClick={() => {
+        selectThisDate({ changeDisplayedValues: true });
+      }}>
+      <div className='flex items-center justify-center'>
+        <span>{dayOfMonth}</span>
+      </div>
+    </button>
+  );
+}

packages/react-use-calendar-component/src/app/components/CalendarHeader.tsx

@@ -0,0 +1,32 @@
+import { getMonthList } from '../../lib/utils/locale';
+import LeftArrow from './LeftArrow';
+import RightArrow from './RightArrow';
+
+const monthList = getMonthList();
+
+interface Props {
+  year: number;
+  month: number;
+  onYearClick: (value: number) => void;
+  onMonthClick: (value: number) => void;
+}
+
+export default function CalendarHeader({
+  year,
+  month,
+  onYearClick,
+  onMonthClick,
+}: Props) {
+  return (
+    <div className='flex justify-between items-center'>
+      <LeftArrow arrowAmount={2} onClick={() => onYearClick(-1)} />
+      <LeftArrow onClick={() => onMonthClick(-1)} />
+      <div className='flex flex-col justify-center items-center'>
+        <span className='text-lg'>{year}</span>
+        <span className='text-sm'>{monthList[month]}</span>
+      </div>
+      <RightArrow onClick={() => onMonthClick(1)} />
+      <RightArrow arrowAmount={2} onClick={() => onYearClick(1)} />
+    </div>
+  );
+}

packages/react-use-calendar-component/src/app/components/Examples/Single.tsx

@@ -0,0 +1,8 @@
+import useCalendarComponent from '../../../lib';
+import Calendar from '../Calendar';
+
+export default function Single() {
+  const calendarControl = useCalendarComponent();
+
+  return <Calendar calendarControl={calendarControl} />;
+}

packages/react-use-calendar-component/src/app/index.css

@@ -2,9 +2,3 @@
 @tailwind components;
 @tailwind utilities;
 
-#root {
-  padding-top: 10rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}