Merge pull request #20 from jason89521/test

Author: jason89521

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

@@ -20,3 +20,88 @@ This package is still under development, the API interface may change frequently
 
 - [Single Mode](./src/app/components/Examples/Single.tsx)
 - [Multiple Mode](./src/app/components/Examples/Multiple.tsx)
+
+## Install
+
+```sh
+npm install react-use-calendar-component
+```
+
+## API Reference
+
+```ts
+import useCalendarComponent from 'react-use-calendar-component';
+
+const {
+  selectedDates,
+  displayedYear,
+  displayedMonth,
+  changeDisplayedYear,
+  changeDisplayedMonth,
+  getDateCellInfos,
+} = useCalendarComponent({ initialDisplayedDate, selectType, value, onChange });
+```
+
+### Args
+
+#### `initialDisplayedDate`
+
+This value will be used to generate the date cells at beginning. Its default value is `new Date()`.
+
+#### `selectType`
+
+The selection type of the calendar, currently support `'single' | 'multiple'`. Its default value is `'single'`.
+
+> This option must be set if you don't want to use `single` type.
+
+#### `value`
+
+Set it up to get the full control of the calendar. For `'single'` selection type, the type of this value should be `Date`. For `'multiple'` selection type, the type of this value should be `Date[]`.
+
+#### `onChange`
+
+```ts
+type OnChange: (value: Date|Date[]) => void
+```
+
+For `single` selection type, the `value` is a `Date` instance. For `multiple` selection type, the `value` is an array of `Date` instances.
+
+### Returns
+
+#### `selectedDates`
+
+An array contains the `Date` instances of all selected date.
+
+#### `displayedYear`
+
+The year of the calendar which should be rendered.
+
+#### `displayedMonth`
+
+The month of the calendar which should be rendered.
+
+#### `changeDisplayedYear`
+
+Call this function to add a value to `displayedYear`.
+
+#### `changeDisplayedMonth`
+
+Call this function to add a value to `displayedMonth`.
+
+#### `getDateCellInfos`
+
+```ts
+interface DateCellInfo {
+  key: string;
+  year: number;
+  month: number;
+  dayOfMonth: number;
+  dayOfWeek: number;
+  isToday: boolean;
+  isSelected: boolean;
+  monthStatus: 'current' | 'next' | 'previous';
+  selectThisDate: (options?: SelectDateOptions) => void;
+}
+```
+
+This function returns an array of `DateCellInfo`. It can be used to render your calendar.

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

@@ -20,9 +20,7 @@ export default function CalendarCell({
       onClick={() => selectThisDate()}
       type='button'
       title={title}>
-      <div className='flex items-center justify-center'>
-        <span>{dayOfMonth}</span>
-      </div>
+      {dayOfMonth}
     </button>
   );
 }

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

@@ -2,11 +2,10 @@ import { useState } from 'react';
 
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
-import SelectedDates from '../SelectedDates';
+import StateInfo from '../StateInfo';
 
 export function Multiple() {
   const [value, setValue] = useState([new Date()]);
-  console.log(value);
   const calendarControl = useCalendarComponent({
     selectType: 'multiple',
     value,
@@ -17,7 +16,7 @@ export function Multiple() {
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      <SelectedDates selectedDates={selectedDates} />
+      <StateInfo value={value} selectedDates={selectedDates} />
     </div>
   );
 }

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

@@ -2,7 +2,7 @@ import { useState } from 'react';
 
 import useCalendarComponent from '../../../lib';
 import Calendar from '../Calendar';
-import SelectedDates from '../SelectedDates';
+import StateInfo from '../StateInfo';
 
 export function Single() {
   const [value, setValue] = useState(new Date());
@@ -12,7 +12,7 @@ export function Single() {
   return (
     <div>
       <Calendar calendarControl={calendarControl} />
-      <SelectedDates selectedDates={selectedDates} />
+      <StateInfo value={[value]} selectedDates={selectedDates} />
     </div>
   );
 }

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

@@ -4,10 +4,10 @@ interface Props {
 
 export default function SelectedDates({ selectedDates }: Props) {
   return (
-    <p className='text-center mt-10 text-white flex flex-col'>
+    <div className='flex flex-col'>
       {selectedDates.map(date => {
         return <span key={date.toString()}>{date.toLocaleDateString()}</span>;
       })}
-    </p>
+    </div>
   );
 }

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

@@ -0,0 +1,23 @@
+interface Props {
+  value: Date[];
+  selectedDates: Date[];
+}
+
+export default function StateInfo({ value, selectedDates }: Props) {
+  return (
+    <div className='text-white flex justify-between mt-5'>
+      <div className='flex flex-col' data-testid='value'>
+        <div className='text-lg text-rose-300'>value:</div>
+        {value.map((v, index) => (
+          <span key={index}>{v.toDateString()}</span>
+        ))}
+      </div>
+      <div className='flex flex-col' data-testid='selected-dates'>
+        <div className='text-lg text-rose-300'>selected dates:</div>
+        {selectedDates.map((date, index) => {
+          return <span key={index}>{date.toDateString()}</span>;
+        })}
+      </div>
+    </div>
+  );
+}

packages/react-use-calendar-component/src/test/single.test.tsx

@@ -4,9 +4,12 @@ import userEvent from '@testing-library/user-event';
 import { Single } from '../app/components/Examples';
 import { getLocaleMonth } from './utils';
 
+const dateInstance = new Date(2022, 9, 1);
+const idValue = 'value';
+const idSelectedDates = 'selected-dates';
+
 describe('common functionality', () => {
   it('should display correct year/month', async () => {
-    const dateInstance = new Date(2022, 9, 1);
     jest.useFakeTimers({ now: dateInstance });
     const user = userEvent.setup({ delay: null });
     render(<Single />);
@@ -49,4 +52,29 @@ describe('common functionality', () => {
     expect(screen.getByText(currentMonth)).toBeInTheDocument();
     expect(screen.getByTitle('today')).toHaveTextContent('1');
   });
+
+  it('should change value and selected dates correctly', async () => {
+    jest.useFakeTimers({ now: dateInstance });
+    const user = userEvent.setup({ delay: null });
+    render(<Single />);
+    const valueBlock = screen.getByTestId(idValue);
+    const datesBlock = screen.getByTestId(idSelectedDates);
+    let testString = dateInstance.toDateString();
+    expect(valueBlock).toHaveTextContent(testString);
+    expect(datesBlock).toHaveTextContent(testString);
+
+    const date10 = screen.getByRole('button', { name: '10' });
+    await user.click(date10);
+    testString = new Date(2022, 9, 10).toDateString();
+    expect(valueBlock).toHaveTextContent(testString);
+    expect(datesBlock).toHaveTextContent(testString);
+    expect(datesBlock.childElementCount).toBe(2);
+
+    const date20 = screen.getByRole('button', { name: '20' });
+    await user.click(date20);
+    testString = new Date(2022, 9, 20).toDateString();
+    expect(valueBlock).toHaveTextContent(testString);
+    expect(datesBlock).toHaveTextContent(testString);
+    expect(datesBlock.childElementCount).toBe(2);
+  });
 });