Feat defaultClickAction prop (#1420)

voyagegroup · Sep 20, 2023 · fe0c31e · fe0c31e
1 parent 8394543
commit fe0c31e
Show file tree

Hide file tree

Showing 8 changed files with 171 additions and 4 deletions.
diff --git a/.changeset/long-bears-occur.md b/.changeset/long-bears-occur.md
@@ -0,0 +1,5 @@
+---
+"ingred-ui": minor
+---
+
+feat action state and handler
diff --git a/src/components/Calendar/Calendar/Calendar.tsx b/src/components/Calendar/Calendar/Calendar.tsx
@@ -22,10 +22,18 @@ export type CalendarProps = React.HTMLAttributes<HTMLDivElement> & {
    * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
    */
   weekList?: string[];
+  /**
+   * デフォルトで選択されているアクション
+   */
+  defaultClickAction?: string;
   /**
    * カレンダーの左に表示するアクション
    */
   actions?: Action[];
+  /**
+   * アクションをクリックしたときの挙動
+   */
+  onClickAction?: (action: Action) => void;
   /**
    * 閉じるボタンを押したときの振る舞い
    * この関数が渡されてないときは、閉じるボタンが表示されない
@@ -48,7 +56,9 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
     date,
     monthFormat = "YYYY年M月",
     weekList = ["日", "月", "火", "水", "木", "金", "土"],
+    defaultClickAction,
     actions,
+    onClickAction,
     onClickCloseButton,
     isOutsideRange = () => false,
     onDateChange,
@@ -71,7 +81,11 @@ const Calendar = forwardRef<HTMLDivElement, CalendarProps>(function Calendar(
 
   return (
     <Card ref={ref} {...rest}>
-      <Actions actions={actions} />
+      <Actions
+        defaultClickAction={defaultClickAction}
+        actions={actions}
+        onClickAction={onClickAction}
+      />
       <Container>
         <Slide unmountOnExit in={yearIsOpen} direction="up">
           <YearMonths

diff --git a/src/components/Calendar/CalendarRange/CalendarRange.tsx b/src/components/Calendar/CalendarRange/CalendarRange.tsx
@@ -34,10 +34,18 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
    * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
    */
   weekList?: string[];
+  /**
+   * デフォルトで選択されているアクション
+   */
+  defaultClickAction?: string;
   /**
    * カレンダーの左に表示するアクション
    */
   actions?: Action[];
+  /**
+   * アクションをクリックしたときの挙動
+   */
+  onClickAction?: (action: Action) => void;
   /**
    * 親コンポーネントで calendar を任意のタイミングで閉じたい場合に使用する
    */
@@ -71,7 +79,9 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
       endDate,
       monthFormat = "YYYY年M月",
       weekList = ["日", "月", "火", "水", "木", "金", "土"],
+      defaultClickAction,
       actions,
+      onClickAction,
       onClose,
       isOutsideRange = () => false,
       onClickCloseButton,
@@ -125,7 +135,11 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
 
     return (
       <Card ref={ref} {...rest}>
-        <Actions actions={actions} />
+        <Actions
+          defaultClickAction={defaultClickAction}
+          actions={actions}
+          onClickAction={onClickAction}
+        />
         <Container>
           <div style={{ position: "relative", zIndex: 1 }}>
             <Slide unmountOnExit in={yearIsOpen} direction="up">

diff --git a/src/components/Calendar/internal/Actions/Actions.tsx b/src/components/Calendar/internal/Actions/Actions.tsx
@@ -9,16 +9,23 @@ export type Action = {
 };
 
 export const Actions = memo(function Actions({
+  defaultClickAction,
   actions,
+  onClickAction,
 }: {
+  defaultClickAction?: string;
   actions?: Action[];
+  onClickAction?: (action: Action) => void;
 }) {
   const theme = useTheme();
-  const [clickedAction, setClickedAction] = useState<string | null>(null);
+  const [clickedAction, setClickedAction] = useState<string | undefined>(
+    defaultClickAction,
+  );
 
   const handleClick = (action: Action) => () => {
     setClickedAction(action.text);
     action.onClick();
+    onClickAction?.(action);
   };
 
   return actions ? (

diff --git a/src/components/NewDatePicker/NewDatePicker.stories.tsx b/src/components/NewDatePicker/NewDatePicker.stories.tsx
@@ -1,6 +1,6 @@
 import { StoryObj } from "@storybook/react";
 import NewDatePicker, { NewDatePickerProps } from "./NewDatePicker";
-import dayjs from "dayjs";
+import dayjs, { Dayjs } from "dayjs";
 import React, { useState } from "react";
 
 export default {
@@ -53,6 +53,49 @@ export const WithActions: StoryObj<NewDatePickerProps> = {
   },
 };
 
+export const WithActionsWithDefaultClickAction: StoryObj<NewDatePickerProps> = {
+  render: (args) => {
+    const [date, setDate] = useState(dayjs());
+    const [clickAction, setClickAction] = useState("今日");
+    const actions = [
+      {
+        text: "今日",
+        onClick: () => {
+          setDate(dayjs());
+        },
+      },
+      {
+        text: "明日",
+        onClick: () => {
+          setDate(dayjs().add(1, "day"));
+        },
+      },
+      {
+        text: "来週",
+        onClick: () => {
+          setDate(dayjs().add(1, "week"));
+        },
+      },
+    ];
+
+    const handleDateChange = (date: Dayjs) => {
+      setDate(date);
+      setClickAction("");
+    };
+
+    return (
+      <NewDatePicker
+        {...args}
+        date={date}
+        defaultClickAction={clickAction}
+        actions={actions}
+        onClickAction={(action) => setClickAction(action.text)}
+        onDateChange={handleDateChange}
+      />
+    );
+  },
+};
+
 export const Error: StoryObj<NewDatePickerProps> = {
   ...Example,
   args: {

diff --git a/src/components/NewDatePicker/NewDatePicker.tsx b/src/components/NewDatePicker/NewDatePicker.tsx
@@ -18,10 +18,18 @@ export type NewDatePickerProps = {
    * @default dayjs()
    */
   date: Dayjs;
+  /**
+   * デフォルトで選択されているアクション
+   */
+  defaultClickAction?: string;
   /**
    * カレンダーの左に表示するアクション
    */
   actions?: Action[];
+  /**
+   * アクションをクリックしたときの挙動
+   */
+  onClickAction?: (action: Action) => void;
   /**
    * 指定したい format
    * @default YYYY-MM-DD
@@ -71,7 +79,9 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
       weekList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
       isOutsideRange,
       errorText,
+      defaultClickAction,
       actions,
+      onClickAction,
       onDateChange,
     } = props;
 
@@ -126,6 +136,7 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
             date={date}
             monthFormat={monthFormat}
             weekList={weekList}
+            defaultClickAction={defaultClickAction}
             actions={actions}
             isOutsideRange={isOutsideRange}
             style={{
@@ -135,6 +146,7 @@ export const NewDatePicker = forwardRef<HTMLDivElement, NewDatePickerProps>(
               zIndex: 100,
               overflow: "hidden",
             }}
+            onClickAction={onClickAction}
             onClickCloseButton={handleClose}
             onDateChange={handleClickDate}
             {...getFloatingProps()}

diff --git a/src/components/NewDateRangePicker/NewDateRangePicker.stories.tsx b/src/components/NewDateRangePicker/NewDateRangePicker.stories.tsx
@@ -79,6 +79,66 @@ export const WithActions: StoryObj<NewDateRangePickerProps> = {
   },
 };
 
+export const WithActionsWithDefaultClickAction: StoryObj<NewDateRangePickerProps> =
+  {
+    render: (args) => {
+      const [date, setDate] = useState({
+        startDate: dayjs(),
+        endDate: dayjs().add(1, "week"),
+      });
+      const [clickAction, setClickAction] = useState("来週");
+      const actions = [
+        {
+          text: "明日",
+          onClick: () => {
+            setDate({
+              startDate: dayjs(),
+              endDate: dayjs().add(1, "day"),
+            });
+          },
+        },
+        {
+          text: "来週",
+          onClick: () => {
+            setDate({
+              startDate: dayjs(),
+              endDate: dayjs().add(1, "week"),
+            });
+          },
+        },
+        {
+          text: "先月",
+          onClick: () => {
+            setDate({
+              startDate: dayjs().subtract(1, "month"),
+              endDate: dayjs(),
+            });
+          },
+        },
+      ];
+
+      const handleDateChange = (dates: {
+        startDate: dayjs.Dayjs;
+        endDate: dayjs.Dayjs;
+      }) => {
+        setDate(dates);
+        setClickAction("");
+      };
+
+      return (
+        <NewDateRangePicker
+          {...args}
+          actions={actions}
+          startDate={date.startDate}
+          endDate={date.endDate}
+          defaultClickAction={clickAction}
+          onClickAction={(action) => setClickAction(action.text)}
+          onDatesChange={handleDateChange}
+        />
+      );
+    },
+  };
+
 export const Error: StoryObj<NewDateRangePickerProps> = {
   ...Example,
   args: {

diff --git a/src/components/NewDateRangePicker/NewDateRangePicker.tsx b/src/components/NewDateRangePicker/NewDateRangePicker.tsx
@@ -38,10 +38,18 @@ export type NewDateRangePickerProps = {
    * エラーメッセージのテキスト
    */
   errorText?: string;
+  /**
+   * デフォルトで選択されているアクション
+   */
+  defaultClickAction?: string;
   /**
    * カレンダーの左に表示するアクション
    */
   actions?: Action[];
+  /**
+   * アクションをクリックしたときの挙動
+   */
+  onClickAction?: (action: Action) => void;
   /**
    * 入力を無効にする
    * @default false
@@ -87,7 +95,9 @@ export const DateRangePicker = forwardRef<
     monthFormat = "MMM YYYY",
     weekList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     isOutsideRange = () => false,
+    defaultClickAction,
     actions,
+    onClickAction,
     onDatesChange,
   } = props;
 
@@ -147,6 +157,7 @@ export const DateRangePicker = forwardRef<
           ref={refs.setFloating}
           startDate={startDate}
           endDate={endDate}
+          defaultClickAction={defaultClickAction}
           actions={actions}
           monthFormat={monthFormat}
           weekList={weekList}
@@ -158,6 +169,7 @@ export const DateRangePicker = forwardRef<
             overflow: "hidden",
           }}
           isOutsideRange={isOutsideRange}
+          onClickAction={onClickAction}
           onClose={handleClose}
           onClickCloseButton={handleClickCloseButton}
           onDatesChange={onDatesChange}