Merge pull request #1192 from Wizleap-Inc/feat/1180_date_range_picker

[#1180] DisabledDate Property を追加

.changeset/twenty-cameras-juggle.md

@@ -0,0 +1,6 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+---
+
+[#1180] WizDateRangePicker: disabledDate props を追加

packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.stories.ts

@@ -96,10 +96,12 @@ const Template: StoryFn<typeof WizDateRangePicker> = (args) => ({
 });
 
 interface Props {
+  isOpen: boolean;
   disabled: boolean;
   expand: boolean;
   selectBoxOptions: boolean;
   isDirectionFixed: boolean;
+  disabledDate: (date: Date) => boolean;
 }
 
 const CODE_TEMPLATE = (props: Partial<Props>) => `
@@ -190,11 +192,12 @@ export const DisabledWithValue: StoryFn<typeof WizDateRangePicker> = (
     };
   },
   template: `
-    <div style="display: flex; gap: 20rem; flex-direction: column; height: 90rem"> 
-      <WizDateRangePicker v-bind="args" /> 
+    <div style="display: flex; gap: 20rem; flex-direction: column; height: 90rem">
+      <WizDateRangePicker v-bind="args" />
     </div>
   `,
 });
+
 DisabledWithValue.args = {
   modelValue: {
     start: new Date(2000, 0, 15),
@@ -203,6 +206,28 @@ DisabledWithValue.args = {
   disabled: true,
 };
 
+export const DisabledDate = Template.bind({});
+DisabledDate.args = {
+  modelValue: {
+    start: new Date(2020, 0, 15),
+    end: new Date(2020, 1, 15),
+  },
+  disabledDate: (date: Date) => date.getDate() >= 2 && date.getDate() < 7,
+};
+DisabledDate.parameters = {
+  docs: {
+    description: {
+      story: "disabledをtrueにすると、入力ができなくなります。",
+    },
+    source: {
+      code: CODE_TEMPLATE({
+        isOpen: true,
+        disabledDate: (date: Date) => date.getDate() >= 2 && date.getDate() < 7,
+      }),
+    },
+  },
+};
+
 export const Expand = Template.bind({});
 Expand.args = {
   modelValue: {

packages/wiz-ui-next/src/components/base/inputs/date-range-picker/date-range-picker.vue

@@ -139,6 +139,7 @@
                 :currentMonth="rightCalendarDate"
                 :activeDates="selectedDates"
                 @click="handleDayClick"
+                :disabledDate="disabledDate"
               />
             </div>
           </div>
@@ -224,6 +225,11 @@ const props = defineProps({
     required: false,
     default: false,
   },
+  disabledDate: {
+    type: Function as PropType<(date: Date) => boolean>,
+    required: false,
+    default: () => false,
+  },
 });
 
 const emit = defineEmits<Emit>();

packages/wiz-ui-react/src/components/base/inputs/date-range-picker/components/date-range-picker.tsx

@@ -42,6 +42,7 @@ type Props = BaseProps & {
   error?: boolean;
   onChangeDateRange: (dateRange: DateRange) => void;
   onChangeSelectBoxValue?: (value: string) => void;
+  disabledDate?: (date: Date) => boolean;
 };
 
 const DateRangePicker: FC<Props> = ({
@@ -56,6 +57,7 @@ const DateRangePicker: FC<Props> = ({
   error,
   onChangeDateRange,
   onChangeSelectBoxValue,
+  disabledDate = () => false,
 }: Props) => {
   const [isHover, setIsHover] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
@@ -335,6 +337,7 @@ const DateRangePicker: FC<Props> = ({
                   currentMonth={rightCalendarDate}
                   activeDates={selectedDates}
                   onClickDate={onClickDate}
+                  disabledDate={disabledDate}
                 />
               </div>
             </div>

packages/wiz-ui-react/src/components/base/inputs/date-range-picker/stories/date-range-picker.stories.tsx

@@ -58,6 +58,20 @@ export const DisabledWithValue: Story = {
   },
 };
 
+export const DisabledDate: Story = {
+  args: {
+    dateRange: {
+      start: new Date("2021-01-01"),
+      end: new Date("2021-01-31"),
+    },
+    disabledDate: (date: Date) => date.getDate() >= 10 && date.getDate() < 17,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    canvas.getByLabelText(ARIA_LABELS.RANGE_DATE_PICKER_INPUT).click();
+  },
+};
+
 export const Expand: Story = {
   args: {
     dateRange: {