support DateRangePicker

voyagegroup · Aug 31, 2023 · da3dbea · da3dbea
1 parent 0de5aa7
commit da3dbea
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 16 deletions.
diff --git a/src/components/Calendar/CalendarRange/CalendarRange.tsx b/src/components/Calendar/CalendarRange/CalendarRange.tsx
@@ -25,6 +25,15 @@ export type CalendarRangeProps = React.HTMLAttributes<HTMLDivElement> & {
    * @default dayjs()
    */
   endDate: Dayjs;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * カレンダーの左に表示するアクション
    */
@@ -60,6 +69,8 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
     {
       startDate,
       endDate,
+      monthFormat,
+      weekList,
       actions,
       onClose,
       isOutsideRange = () => false,
@@ -131,6 +142,8 @@ export const CalendarRange = forwardRef<HTMLDivElement, CalendarRangeProps>(
             <InnerCalendarRange
               startDate={startDate}
               endDate={endDate}
+              monthFormat={monthFormat}
+              weekList={weekList}
               current={current}
               yearIsOpen={yearIsOpen}
               isOutsideRange={isOutsideRange}

diff --git a/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx b/src/components/Calendar/internal/InnerCalendarRange/InnerCalendarRange.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from "react";
-import { HEIGHT, weekList } from "../../constants";
+import { HEIGHT } from "../../constants";
 import { useTheme } from "../../../../themes";
 import { useScrollCalendar } from "../../hooks/useScrollCalendar";
 import { Icon, ScrollArea } from "../../../";
@@ -18,6 +18,8 @@ import { Day } from "../../CalendarRange/internal/Day";
 type Props = {
   startDate: Dayjs;
   endDate: Dayjs;
+  monthFormat?: string;
+  weekList?: string[];
   current: Dayjs;
   yearIsOpen: boolean;
   onYearIsOpen: (yearIsOpen: boolean) => void;
@@ -28,6 +30,8 @@ type Props = {
 export const InnerCalendarRange: React.FC<Props> = ({
   startDate,
   endDate,
+  monthFormat,
+  weekList,
   current,
   yearIsOpen,
   onYearIsOpen,
@@ -54,7 +58,7 @@ export const InnerCalendarRange: React.FC<Props> = ({
           >
             <CalendarMonth expanded={yearIsOpen}>
               <TitleContainer expanded={yearIsOpen} weight="bold" size="xl">
-                {m.format("YYYY年MM月")}
+                {m.format(monthFormat)}
               </TitleContainer>
               <IconButton
                 expanded={yearIsOpen}
@@ -68,11 +72,7 @@ export const InnerCalendarRange: React.FC<Props> = ({
               </IconButton>
             </CalendarMonth>
             <CalendarContainer>
-              {weekList.map((week) => (
-                <DayStyle key={week.format("ddd")}>
-                  {week.format("ddd")}
-                </DayStyle>
-              ))}
+              {weekList?.map((week) => <DayStyle key={week}>{week}</DayStyle>)}
               {Array.from(new Array(m.startOf("month").day()), (_, i) => (
                 <DayStyle key={i} />
               ))}

diff --git a/src/components/NewDateRangePicker/NewDateRangePicker.tsx b/src/components/NewDateRangePicker/NewDateRangePicker.tsx
@@ -16,6 +16,7 @@ import {
   ClickStateType,
 } from "../Calendar/CalendarRange/constants";
 import { useMergeRefs } from "../../hooks/useMergeRefs";
+import { useLocaleProps } from "../../hooks/useLocaleProps";
 
 export type DateRange = {
   startDate: Dayjs;
@@ -46,6 +47,15 @@ export type NewDateRangePickerProps = {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * カレンダーに表示する年月のフォーマット
+   */
+  monthFormat?: string;
+  /**
+   * カレンダーに表示する曜日のリスト
+   * @memo dayjs().format("ddd") で対応したいが、階層が深くなったりするので一旦静的な値で対処
+   */
+  weekList?: string[];
   /**
    * 選択可能なカレンダーの領域を制限する
    * true が返る場合は、選択不可となる
@@ -64,18 +74,23 @@ export type NewDateRangePickerProps = {
 export const DateRangePicker = forwardRef<
   HTMLDivElement,
   NewDateRangePickerProps
->(function DateRangePicker(
-  {
+>(function DateRangePicker(inProps, propRef) {
+  const props = useLocaleProps({
+    props: inProps,
+    name: "NewDateRangePicker",
+  });
+  const {
     startDate,
     endDate,
     errorText,
     disabled = false,
+    monthFormat = "MMM YYYY",
+    weekList = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
     isOutsideRange = () => false,
     actions,
     onDatesChange,
-  },
-  propRef,
-) {
+  } = props;
+
   const [open, setOpen] = useState(false);
   const { context, refs, strategy, x, y } = useFloating({
     placement: "right-start",
@@ -133,6 +148,8 @@ export const DateRangePicker = forwardRef<
           startDate={startDate}
           endDate={endDate}
           actions={actions}
+          monthFormat={monthFormat}
+          weekList={weekList}
           style={{
             position: strategy,
             top: y ?? 0,

diff --git a/src/constants/locale.ts b/src/constants/locale.ts
@@ -76,10 +76,10 @@ export interface Localization {
       defaultProps: Pick<DateRangePickerProps, "displayFormat" | "monthFormat">;
     };
     NewDatePicker?: {
-      defaultProps: Pick<
-        NewDatePickerProps,
-        "format" | "monthFormat" | "weekList"
-      >;
+      defaultProps: Pick<NewDatePickerProps, "monthFormat" | "weekList">;
+    };
+    NewDateRangePicker?: {
+      defaultProps: Pick<NewDatePickerProps, "monthFormat" | "weekList">;
     };
   };
 }
@@ -136,6 +136,12 @@ export const jaJP: Localization = {
         weekList: ["日", "月", "火", "水", "木", "金", "土"],
       },
     },
+    NewDateRangePicker: {
+      defaultProps: {
+        monthFormat: "YYYY年MM月",
+        weekList: ["日", "月", "火", "水", "木", "金", "土"],
+      },
+    },
   },
 };