v1.1.0

Author: flamecommit

package/CHANGE.md

@@ -0,0 +1,6 @@
+## 1.1.0
+
+### What's New?
+
+- Add Props - initValue : Datepicker component allows you to declare the initial value.
+- Add Props - onChange : Triggered whenever the value of the Datepicker changes.

package/devops/copyStyles.js

@@ -1,27 +1,27 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-const fs = require("fs-extra");
-const chokidar = require("chokidar");
+const fs = require('fs-extra');
+const chokidar = require('chokidar');
 
-const srcDir = "src"; // 소스 디렉토리
-const distDir = "dist"; // 목적지 디렉토리
+const srcDir = 'src'; // 소스 디렉토리
+const distDir = 'dist'; // 목적지 디렉토리
 
 // srcDir 내의 모든 CSS 파일 감시
 const watcher = chokidar.watch(`${srcDir}/**/*.css`, {
   persistent: true,
 });
 
 // 파일이 추가, 변경 또는 삭제될 때 호출되는 콜백 함수
-watcher.on("all", (event, path) => {
+watcher.on('all', (event, path) => {
   console.log(`File ${event}: ${path}`);
 
   // 파일을 목적지로 복사
-  const relativePath = path.replace(srcDir, ""); // 상대 경로 추출
+  const relativePath = path.replace(srcDir, ''); // 상대 경로 추출
 
   console.log(relativePath);
   const destPath = `${distDir}${relativePath}`; // 목적지 경로 생성
   fs.copyFile(path, destPath, (err) => {
     if (err) {
-      console.error("Error copying file:", err);
+      console.error('Error copying file:', err);
     } else {
       console.log(`File ${path} copied to ${destPath}`);
     }
@@ -31,7 +31,7 @@ watcher.on("all", (event, path) => {
 console.log(`Watching CSS files in ${srcDir} and copying to ${distDir}`);
 
 // 프로그램 종료 시 감시 중지
-process.on("SIGINT", () => {
+process.on('SIGINT', () => {
   watcher.close();
   process.exit(0);
 });

package/package.json

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

package/src/components/Container.tsx

@@ -4,12 +4,7 @@ import '../../assets/ReactDatepicker.css';
 import * as React from 'react';
 import { useState, useMemo, useRef, useEffect } from 'react';
 import { getFormatDatetime } from '../utils/datetime';
-import {
-  setCenturyPage,
-  setDecadePage,
-  setYearPage,
-  setMonthPage,
-} from '../utils/page';
+import { setCenturyPage, setDecadePage, setMonthPage } from '../utils/page';
 import ViewCentury from './view/Century';
 import { NAME_SPACE } from './constants/core';
 import Controller from './Controller';
@@ -19,12 +14,16 @@ import ViewMonth from './view/Month';
 import { addLeadingZero } from '../utils/string';
 import useOutsideClick from '../hooks/useOutsideClick';
 
-function Container() {
+interface Iprops {
+  initValue?: Date;
+  onChange?: (activeDate: Date) => void;
+}
+
+function Container({ initValue = new Date(), onChange }: Iprops) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
-  const NEW_DATE = new Date();
-  const [activeDate, setActiveDate] = useState<Date>(NEW_DATE);
+  const [activeDate, setActiveDate] = useState<Date>(initValue);
   const [viewDate, setViewDate] = useState<string>(
-    getFormatDatetime(NEW_DATE, 'YYYY-MM-DD')
+    getFormatDatetime(initValue, 'YYYY-MM-DD')
   );
   const [viewType, setViewType] = useState<
     'century' | 'decade' | 'year' | 'month'
@@ -33,7 +32,7 @@ function Container() {
 
   const centuryPage = useMemo(() => setCenturyPage(viewDate), [viewDate]);
   const decadePage = useMemo(() => setDecadePage(viewDate), [viewDate]);
-  const yearPage = useMemo(() => setYearPage(viewDate), [viewDate]);
+  // const yearPage = useMemo(() => setYearPage(viewDate), [viewDate]);
   const monthPage = useMemo(() => setMonthPage(viewDate), [viewDate]);
   const container = useRef(null);
 
@@ -76,13 +75,15 @@ function Container() {
   };
 
   const handleFocus = () => {
-    console.log('handleFocus');
     setIsVisible(true);
   };
 
   useEffect(() => {
     setIsVisible(false);
-  }, [activeDate]);
+    if (onChange) {
+      onChange(activeDate);
+    }
+  }, [activeDate, onChange]);
 
   // const [centuryPage, setCenturyPage] = useState<number>(0);
   // const [decadePage, setDecadePage] = useState<number>(0);

package/src/hooks/useOutsideClick.ts

@@ -8,7 +8,6 @@ const useOutsideClick = (
     const handleClickOutside = (e: MouseEvent) => {
       const target = e.target as HTMLDivElement;
       if (targetRef.current && !targetRef.current.contains(target)) {
-        console.log('click outside');
         callback();
       }
     };

test/src/App.tsx

@@ -1,10 +1,18 @@
 import * as React from 'react';
 import { Datepicker } from '@shinyongjun/react-datepicker';
+import { useState } from 'react';
 
 function App() {
+  const [dateValue, setDateValue] = useState<Date>(new Date('2001-11-11'));
+
   return (
     <div>
-      <Datepicker />
+      <Datepicker
+        initValue={dateValue}
+        onChange={(activeDate) => {
+          console.log('activeDate', activeDate);
+        }}
+      />
     </div>
   );
 }