Add close icon for DatePicker

.changeset/blue-houses-refuse.md

@@ -0,0 +1,5 @@
+---
+"ingred-ui": patch
+---
+
+add calendar close icon

src/components/Calendar/Calendar/Calendar.tsx

@@ -1,5 +1,5 @@
 import dayjs, { Dayjs } from "dayjs";
-import { Card, ScrollArea, Typography } from "../..";
+import { Card, Icon, ScrollArea, Typography } from "../..";
 import React, { forwardRef, memo, useRef } from "react";
 import { Day } from "./internal/Day";
 import { weekList, HEIGHT } from "../constants";
@@ -9,18 +9,24 @@ import {
   DatePickerContainer,
   DayStyle,
   CalendarMonth,
+  IconContainer,
 } from "../styled";
 import { useScroll } from "../hooks/useScroll";
 import { Action, Actions } from "../internal/Actions";
 
 export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
   date: Dayjs;
   actions?: Action[];
+  /**
+   * 閉じるボタンを押したときの振る舞い
+   * この関数が渡されてないときは、閉じるボタンが表示されない
+   */
+  onClickCloseButton?: () => void;
   onDateChange: (value: Dayjs) => void;
 };
 
 const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
-  { date, actions, onDateChange, ...rest },
+  { date, actions, onClickCloseButton, onDateChange, ...rest },
   ref,
 ) {
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -88,6 +94,11 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
           </>
         </ScrollArea>
       </Container>
+      {onClickCloseButton && (
+        <IconContainer onClick={onClickCloseButton}>
+          <Icon name="close" />
+        </IconContainer>
+      )}
     </Card>
   );
 });

src/components/Calendar/CalendarRange/CalendarRange.tsx

@@ -1,5 +1,5 @@
 import dayjs, { Dayjs } from "dayjs";
-import { Card, ScrollArea, Typography } from "../..";
+import { Card, Icon, ScrollArea, Typography } from "../..";
 import React, { forwardRef, memo, useCallback, useRef, useState } from "react";
 import { Day } from "./internal/Day";
 import { HEIGHT, weekList } from "../constants";
@@ -9,6 +9,7 @@ import {
   Container,
   DatePickerContainer,
   DayStyle,
+  IconContainer,
 } from "../styled";
 import { useScroll } from "../hooks/useScroll";
 import { getDayState } from "./utils";
@@ -22,6 +23,11 @@ export type CalendarRangeProps = {
    * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
    */
   onClose?: (clickState: "start" | "end") => void;
+  /**
+   * 閉じるボタンを押したときの振る舞い
+   * この関数が渡されてないときは、閉じるボタンが表示されない
+   */
+  onClickCloseButton?: () => void;
   onDatesChange: ({
     startDate,
     endDate,
@@ -37,7 +43,10 @@ export type CalendarRangeProps = {
  * Currently, one year from the currently selected date is displayed.
  */
 export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
-  function ({ startDate, endDate, actions, onClose, onDatesChange }, ref) {
+  function (
+    { startDate, endDate, actions, onClose, onClickCloseButton, onDatesChange },
+    ref,
+  ) {
     const scrollRef = useRef<HTMLDivElement>(null);
     const { monthList } = useScroll(startDate ?? dayjs(), scrollRef);
     const [clickState, setClickState] = useState<"start" | "end">("start");
@@ -123,6 +132,11 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
             </>
           </ScrollArea>
         </Container>
+        {onClickCloseButton && (
+          <IconContainer onClick={onClickCloseButton}>
+            <Icon name="close" />
+          </IconContainer>
+        )}
       </Card>
     );
   },

src/components/Calendar/styled.ts

@@ -43,3 +43,12 @@ export const CalendarMonth = styled.div`
   justify-content: center;
   padding: ${({ theme }) => theme.spacing * 2}px 0;
 `;
+
+export const IconContainer = styled.button`
+  cursor: pointer;
+  position: absolute;
+  top: ${({ theme }) => theme.spacing}px;
+  right: ${({ theme }) => theme.spacing}px;
+  border: none;
+  background: none;
+`;

src/components/NewDatePicker/NewDatePicker.tsx

@@ -62,6 +62,10 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
       [onDateChange],
     );
 
+    const handleClose = useCallback(() => {
+      setOpen(false);
+    }, []);
+
     return (
       <Flex ref={ref} style={{ width: "fit-content" }}>
         <div ref={refs.setReference} {...getReferenceProps()}>
@@ -83,6 +87,7 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
               left: x ?? 0,
               zIndex: 100,
             }}
+            onClickCloseButton={handleClose}
             onDateChange={handleClickDate}
             {...getFloatingProps()}
           />

src/components/NewDatePicker/styled.ts

@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+export const IconContainer = styled.button`
+  cursor: pointer;
+  position: absolute;
+  top: ${({ theme }) => theme.spacing}px;
+  right: ${({ theme }) => theme.spacing}px;
+  border: none;
+  background: none;
+`;

src/components/NewDateRangePicker/NewDateRangePicker.tsx

@@ -49,6 +49,10 @@ export const DateRangePicker = forwardRef<
     }
   };
 
+  const handleClickCloseButton = React.useCallback(() => {
+    setOpen(false);
+  }, []);
+
   return (
     <Flex ref={ref}>
       <div
@@ -82,6 +86,7 @@ export const DateRangePicker = forwardRef<
             startDate={startDate}
             endDate={endDate}
             onClose={handleClose}
+            onClickCloseButton={handleClickCloseButton}
             onDatesChange={onDatesChange}
           />
         </Card>