(#0) npm publish (0.0.89)

thebbodek · Dec 7, 2023 · f5b3787 · f5b3787
1 parent 3a8057b
commit f5b3787
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bbodek-ui",
-  "version": "0.0.88",
+  "version": "0.0.89",
   "type": "module",
   "author": "Bbodek",
   "license": "MIT",

diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
@@ -1,4 +1,5 @@
 import clsx from "clsx";
+
 import { CalendarDateDto } from "@/core/components/Calendar/common/types/CalendarDateDto";
 import { PeriodDates } from "../types/CalendarComponentProps";
 
@@ -20,7 +21,6 @@ export const CalendarComponentDayText = ({
   const isStartDate = isPeriod && periodDates.startDate === currentDate;
   const isEndDate = isPeriod && periodDates.endDate === currentDate;
   const singleSelectedDate = (periodDates.startDate && !periodDates.endDate) && currentDate === periodDates.startDate;
-  console.log(isStartDate);
 
   return (
     <div

diff --git a/src/core/components/Input/InputDatePicker/DatePicker.tsx b/src/core/components/Input/InputDatePicker/DatePicker.tsx
@@ -1,4 +1,4 @@
-import { useId, useState } from "react";
+import { useEffect, useId, useState } from "react";
 
 import Button from "../../Button";
 import DatePickerCalendar from "../../Calendar/DatePickerCalendar";
@@ -15,6 +15,7 @@ const DatePicker = ({
   currentMonth,
   disabled,
   disabledDates,
+  externalDates,
   useTab = false,
 }: DatePickerProps) => {
   const id = useId();
@@ -23,6 +24,7 @@ const DatePicker = ({
     startDate: "",
     endDate: "",
   });
+
   const [ tabSelected, setTabSelected ] = useState("selectedDate");
   const tabData = [
     { key: "selectedDate", label: "선택한 기간만 적용" },
@@ -33,6 +35,10 @@ const DatePicker = ({
     close(periodDates);
   };
 
+  useEffect(() => {
+    externalDates && setPeriodDates(externalDates);
+  }, [externalDates]);
+
   const tabItems = tabData.map(item => (
     <GeneralTab.Item
       key = {item.key}

diff --git a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
@@ -1,6 +1,7 @@
 import { Meta } from "@storybook/react";
-
 import { OverlayProvider, useOverlay } from "@toss/use-overlay";
+import { useState } from "react";
+
 import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/CalendarComponentProps";
 import ModalPopUp from "../../Modal/ModalPopUp";
 import InputDatePicker from "./index";
@@ -17,12 +18,19 @@ export default meta;
 
 const DefaultLayout = () => {
   const overlay = useOverlay();
+  const [ myDates, setMyDates ] = useState({
+    startDate: "",
+    endDate: "",
+  });
   const getDate = (periodDates: PeriodDates) => console.log(periodDates);
 
+  const onDatesClick = () => setMyDates({ startDate: "22222", endDate: "1111" });
+
   return (
     <div className = "flex gap-2">
       <div className = "w-[500px]">
-        <InputDatePicker overlay = {overlay} useTab getPeriodDates = {getDate}/>
+        <button onClick = {onDatesClick}>날짜 변경</button>
+        <InputDatePicker overlay = {overlay} useTab getPeriodDates = {getDate} externalDates = {myDates} />
       </div>
     </div>
   );
@@ -46,7 +54,7 @@ const InputDatePickerInModalPopUpLayout = () => {
     overlay.open(({ isOpen }) => {
       return (
         <ModalPopUp isOpen = {isOpen}>
-          <InputDatePicker overlay = {inputDatePickerOverlay} useTab = {false} getPeriodDates = {getDate}/>
+          <InputDatePicker overlay = {inputDatePickerOverlay} useTab = {false} getPeriodDates = {getDate} />
         </ModalPopUp>
       );
     });

diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
@@ -1,6 +1,6 @@
 import { CalendarBlank } from "@phosphor-icons/react";
 import dayjs from "dayjs";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { PeriodDates } from "../../Calendar/DatePickerCalendar/types/CalendarComponentProps";
 import Typography from "../../Typography";
@@ -12,6 +12,7 @@ const InputDatePicker = ({
   disabledDates,
   getPeriodDates,
   currentMonth,
+  externalDates,
   useTab = false,
   disabled = false,
 }: InputDatePickerProps) => {
@@ -34,6 +35,7 @@ const InputDatePicker = ({
             getPeriodDates(periodDates);
             close();
           }}
+          externalDates = {periodDates}
           useTab = {useTab}
           disabledDates = {disabledDates}/>
       ));
@@ -46,6 +48,10 @@ const InputDatePicker = ({
     setPeriodDates(periodDates);
   };
 
+  useEffect(() => {
+    externalDates && setPeriodDates(externalDates);
+  }, [externalDates]);
+
   return (
     <div>
       <button

diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts
@@ -1,6 +1,7 @@
 import { CalendarComponentProps, PeriodDates } from "@/core/components/Calendar/DatePickerCalendar/types/CalendarComponentProps";
 
 export interface DatePickerProps extends Pick<CalendarComponentProps, "currentMonth" | "disabled" | "disabledDates"> {
+  externalDates?: PeriodDates;
   isOpen: boolean;
   close: (periodDates: PeriodDates) => void;
   useTab?: boolean;
@@ -12,7 +13,7 @@ type CreateOverlayElement = (props: {
   exit: () => void;
 }) => JSX.Element;
 
-export interface InputDatePickerProps extends Omit<DatePickerProps, "isOpen"| "close"> {
+export interface InputDatePickerProps extends Omit<DatePickerProps, "isOpen"| "close" | "periodDates" | "setPeriodDates"> {
   getPeriodDates: (periodDates: PeriodDates) => void;
   overlay: {
     open: (overlayElement: CreateOverlayElement) => void;