release 1.4.0

Author: 신용준

package/CHANGE.md

@@ -1,3 +1,10 @@
+## 1.4.0
+
+### What's New?
+
+- remove ExtraController
+- New Props = isMultipleCalendar
+
 ## 1.3.0
 
 ### What's New?

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shinyongjun/react-datepicker",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "source": "./src/index.tsx",

package/src/assets/ReactDatepicker.css

@@ -35,7 +35,6 @@
 }
 .react-datepicker__datepicker-container {
   position: absolute;
-  width: 252px;
   top: 50px;
   left: 0;
   z-index: 1000;
@@ -85,19 +84,25 @@
 .react-datepicker__controller-next {
   background-image: url(./next.svg);
 }
+.react-datepicker__datepicker {
+  display: flex;
+}
 .react-datepicker__century-view,
 .react-datepicker__decade-view,
 .react-datepicker__year-view {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
+  width: 252px;
 }
 .react-datepicker__month-view {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
+  width: 252px;
 }
 .react-datepicker__datepicker-button {
   border: none;
   background-color: transparent;
+  flex-basis: 100%;
   height: 36px;
   cursor: pointer;
 }

package/src/components/Controller.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { useMemo } from 'react';
 import { NAME_SPACE } from '../constants/core';
 import {
   setCenturyPage,
@@ -19,6 +18,7 @@ interface IProps {
   setViewType: (value: TviewType) => void;
   viewDate: string;
   labelFormat: string;
+  isMultipleCalendar: boolean;
   setViewDateByType: (
     value: string | number,
     type: 'year' | 'month' | 'date'
@@ -30,8 +30,17 @@ function Controller({
   viewType,
   labelFormat,
   setViewType,
+  isMultipleCalendar,
   setViewDateByType,
 }: IProps) {
+  const setMonthLabel = (date: string, addMonth = 0) => {
+    const monthPage = setMonthPage(date);
+    const year = Math.ceil((monthPage + addMonth) / 12);
+    const month = addLeadingZero((monthPage + addMonth) % 12 || 12);
+
+    return formatLabel(`${year}-${month}`, labelFormat);
+  };
+
   const setLabel = (date: string, type: TviewType): string => {
     if (type === 'century') {
       const centuryPage = setCenturyPage(date);
@@ -53,20 +62,11 @@ function Controller({
       return `${yearPage}`;
     }
     if (type === 'month') {
-      const monthPage = setMonthPage(date);
-      const year = Math.ceil(monthPage / 12);
-      const month = addLeadingZero(monthPage % 12 || 12);
-
-      return formatLabel(`${year}-${month}`, labelFormat);
+      return setMonthLabel(date);
     }
     return '';
   };
 
-  const label = useMemo(
-    () => setLabel(viewDate, viewType),
-    [viewDate, viewType]
-  );
-
   const handleLabelClick = () => {
     if (viewType === 'decade') {
       setViewType('century');
@@ -111,14 +111,14 @@ function Controller({
 
   return (
     <div className={`${NAME_SPACE}__controller`}>
-      {viewType !== 'century' && (
+      {/* {viewType !== 'century' && (
         <button
           className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-extra-prev`}
           onClick={() => handleControl('extraPrev')}
         >
           Extra Previous
         </button>
-      )}
+      )} */}
       <button
         className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-prev`}
         onClick={() => handleControl('prev')}
@@ -131,22 +131,31 @@ function Controller({
         onClick={handleLabelClick}
         disabled={viewType === 'century'}
       >
-        {label}
+        {setLabel(viewDate, viewType)}
       </button>
+      {isMultipleCalendar && viewType === 'month' && (
+        <button
+          type="button"
+          className={`${NAME_SPACE}__label`}
+          onClick={handleLabelClick}
+        >
+          {setMonthLabel(viewDate, 1)}
+        </button>
+      )}
       <button
         className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-next`}
         onClick={() => handleControl('next')}
       >
         Next
       </button>
-      {viewType !== 'century' && (
+      {/* {viewType !== 'century' && (
         <button
           className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-extra-next`}
           onClick={() => handleControl('extraNext')}
         >
           Extra Next
         </button>
-      )}
+      )} */}
     </div>
   );
 }

package/src/components/Datepicker.tsx

@@ -22,6 +22,7 @@ import useOutsideClick from '../hooks/useOutsideClick';
 interface Iprops {
   initValue?: Date | null;
   isClearButton?: boolean;
+  isMultipleCalendar?: boolean;
   valueFormat?: string;
   labelFormat?: string;
   onChange?: (activeDate: Date | null) => void;
@@ -30,6 +31,7 @@ interface Iprops {
 function Datepicker({
   initValue = null,
   isClearButton = false,
+  isMultipleCalendar = false,
   valueFormat = 'YYYY-MM-DD',
   labelFormat = 'YYYY / MM',
   onChange,
@@ -128,16 +130,27 @@ function Datepicker({
             setViewType={setViewType}
             viewDate={viewDate}
             labelFormat={labelFormat}
+            isMultipleCalendar={isMultipleCalendar}
             setViewDateByType={setViewDateByType}
           />
           <div className={`${NAME_SPACE}__datepicker`}>
             {viewType === 'month' && (
-              <ViewMonth
-                value={value}
-                valueFormat={valueFormat}
-                monthPage={monthPage}
-                setValue={setValue}
-              />
+              <>
+                <ViewMonth
+                  value={value}
+                  valueFormat={valueFormat}
+                  monthPage={monthPage}
+                  setValue={setValue}
+                />
+                {isMultipleCalendar && (
+                  <ViewMonth
+                    value={value}
+                    valueFormat={valueFormat}
+                    monthPage={monthPage + 1}
+                    setValue={setValue}
+                  />
+                )}
+              </>
             )}
             {viewType === 'year' && (
               <ViewYear

test/src/App.tsx

@@ -14,6 +14,7 @@ function App() {
         }}
       />
       <Datepicker />
+      <Datepicker isMultipleCalendar />
       <Datepicker isClearButton />
       <Datepicker valueFormat="MM/DD/YYYY" />
       <Datepicker labelFormat="YYYY년 MM월" />