v1.6.0 : closesAfterChange 옵션 추가

Author: flamecommit

package/CHANGE.md

@@ -1,3 +1,10 @@
+## 1.6.0
+
+### What's New?
+
+- add props - closesAfterChange
+- rangepicker default value
+
 ## 1.5.0
 
 ### What's New?

package/package.json

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

package/src/components/Datepicker.tsx

@@ -20,6 +20,7 @@ interface IProps {
   showsMultipleCalendar?: boolean;
   valueFormat?: string;
   labelFormat?: string;
+  closesAfterChange?: boolean;
   onChange?: (activeDate: Date | null) => void;
 }
 
@@ -29,6 +30,7 @@ function Datepicker({
   showsMultipleCalendar = false,
   valueFormat = 'YYYY-MM-DD',
   labelFormat = 'YYYY / MM',
+  closesAfterChange = true,
   onChange,
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
@@ -50,8 +52,10 @@ function Datepicker({
   });
 
   useEffect(() => {
-    setIsVisible(false);
-    setViewDate(formatDate(value || NEW_DATE, 'YYYY-MM-DD'));
+    // setViewDate(formatDate(value || NEW_DATE, 'YYYY-MM-DD'));
+    if (closesAfterChange) {
+      setIsVisible(false);
+    }
     if (onChange) {
       onChange(value);
     }

package/src/components/Rangepicker.tsx

@@ -20,6 +20,7 @@ interface IProps {
   showsMultipleCalendar?: boolean;
   valueFormat?: string;
   labelFormat?: string;
+  closesAfterChange?: boolean;
   onChange?: (activeDate: Date | null) => void;
 }
 
@@ -29,6 +30,7 @@ function Rangepicker({
   showsMultipleCalendar = false,
   valueFormat = 'YYYY-MM-DD',
   labelFormat = 'YYYY / MM',
+  closesAfterChange = true,
   onChange,
 }: IProps) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
@@ -52,9 +54,10 @@ function Rangepicker({
   });
 
   useEffect(() => {
-    if (endValue !== null) {
+    if (closesAfterChange && endValue !== null) {
+      setIsVisible(false);
       // setIsVisible(false);
-      setViewDate(formatDate(startValue || NEW_DATE, 'YYYY-MM-DD'));
+      // setViewDate(formatDate(startValue || NEW_DATE, 'YYYY-MM-DD'));
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [endValue, onChange, setViewDate]);

package/src/components/input/Range.tsx

@@ -27,11 +27,16 @@ function InputRange({
     setIsVisible(true);
   };
 
-  const setRangeValue = () =>
-    `${formatDate(startValue, valueFormat)} - ${formatDate(
-      endValue,
-      valueFormat
-    )}`;
+  const setRangeValue = () => {
+    if (startValue === null && endValue === null) {
+      return '';
+    } else {
+      return `${formatDate(startValue, valueFormat)} - ${formatDate(
+        endValue,
+        valueFormat
+      )}`;
+    }
+  };
 
   const clearValue = () => {
     setStartValue(null);

test/src/App.tsx

@@ -20,6 +20,7 @@ function App() {
       <Datepicker labelFormat="YYYY년 MM월" />
       <Rangepicker />
       <Rangepicker showsMultipleCalendar />
+      <Rangepicker closesAfterChange={false} />
     </div>
   );
 }