[MISC][WL] extend the hiding date range input action buttons to mobil…

…e if withButton=false
LifeSG · Sep 12, 2024 · f1c18e7 · f1c18e7
1 parent f7d9c7f
commit f1c18e7
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 12 deletions.
diff --git a/src/date-range-input/date-range-input.tsx b/src/date-range-input/date-range-input.tsx
@@ -1,7 +1,5 @@
 import dayjs from "dayjs";
 import { useEffect, useRef, useState } from "react";
-import { useMediaQuery } from "react-responsive";
-import { MediaWidths } from "../media";
 import {
     DropdownRenderProps,
     ElementWithDropdown,
@@ -63,7 +61,7 @@ export const DateRangeInput = ({
     onFocus,
     onBlur,
     onYearMonthDisplayChange,
-    withButton: _withButton = true,
+    withButton = true,
     variant = "range",
     numberOfDays = 7,
     readOnly,
@@ -188,17 +186,11 @@ export const DateRangeInput = ({
     const calendarRef = useRef<InternalCalendarRef>();
     const startInputRef = useRef<StandaloneDateInputRef>();
     const endInputRef = useRef<StandaloneDateInputRef>();
-    const isMobile = useMediaQuery({
-        maxWidth: MediaWidths.mobileL,
-    });
     const shouldWrap = useContainerQuery({
         maxWidth: MOBILE_WRAP_WIDTH,
         targetRef: nodeRef,
     });
 
-    // show button if it is mobile view
-    const withButton = _withButton || isMobile;
-
     // =============================================================================
     // EFFECTS
     // =============================================================================

diff --git a/stories/form/form-date-range-input/form-date-range-input.stories.tsx b/stories/form/form-date-range-input/form-date-range-input.stories.tsx
@@ -38,7 +38,7 @@ export const Default: StoryObj<Component> = {
                     hideInputKeyboard
                 />
                 <Form.DateRangeInput
-                    label="This has no action buttons on desktop viewports"
+                    label="This has no action buttons"
                     withButton={false}
                 />
                 <Form.DateRangeInput
@@ -100,7 +100,7 @@ export const WeekInput: StoryObj<Component> = {
                     }}
                 />
                 <Form.DateRangeInput
-                    label="This has no action buttons on desktop viewports"
+                    label="This has no action buttons"
                     variant="week"
                     withButton={false}
                 />
@@ -136,7 +136,7 @@ export const FixedRangeInput: StoryObj<Component> = {
                     numberOfDays={14}
                 />
                 <Form.DateRangeInput
-                    label="This has no action buttons on desktop viewports"
+                    label="This has no action buttons"
                     variant="fixed-range"
                     withButton={false}
                 />