Merge pull request #154 from the-deep/feature/add-modal-in-date-range…

…-input Add 'show in modal' option in date input
the-deep · Jul 2, 2022 · 4547d85 · 4547d85
2 parents 8b32fec + 48a9d4c
commit 4547d85
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 32 deletions.
diff --git a/src/components/Calendar/CalendarDate/styles.css b/src/components/Calendar/CalendarDate/styles.css
@@ -5,6 +5,7 @@
 
     &.today {
         color: var(--dui-color-accent);
+        border: var(--dui-width-separator-thin) solid var(--dui-color-separator);
         font-weight: var(--dui-font-weight-bold);
     }
 

diff --git a/src/components/Calendar/index.tsx b/src/components/Calendar/index.tsx
@@ -196,6 +196,34 @@ function Calendar<P extends CalendarDateProps>(props: Props<P>) {
                             optionsPopupContentClassName={styles.popupContent}
                         />
                     </div>
+                    <div className={styles.actions}>
+                        <Button
+                            name={undefined}
+                            variant="action"
+                            title="Go to current year / month"
+                            onClick={handleGotoCurrentButtonClick}
+                        >
+                            <IoTimeOutline />
+                        </Button>
+                        <Button
+                            name={undefined}
+                            variant="action"
+                            onClick={handlePreviousMonthButtonClick}
+                            title="Previous month"
+                            disabled={isNotDefined(year)}
+                        >
+                            <IoChevronBack />
+                        </Button>
+                        <Button
+                            name={undefined}
+                            variant="action"
+                            onClick={handleNextMonthButtonClick}
+                            title="Next month"
+                            disabled={isNotDefined(year)}
+                        >
+                            <IoChevronForward />
+                        </Button>
+                    </div>
                 </div>
                 <div className={styles.weekDays}>
                     {weekDayNames.map((wd) => (
@@ -260,34 +288,6 @@ function Calendar<P extends CalendarDateProps>(props: Props<P>) {
                     Please select a valid year and month to view the dates
                 </div>
             )}
-            <div className={styles.actions}>
-                <Button
-                    name={undefined}
-                    variant="action"
-                    title="Go to current year / month"
-                    onClick={handleGotoCurrentButtonClick}
-                >
-                    <IoTimeOutline />
-                </Button>
-                <Button
-                    name={undefined}
-                    variant="action"
-                    onClick={handlePreviousMonthButtonClick}
-                    title="Previous month"
-                    disabled={isNotDefined(year)}
-                >
-                    <IoChevronBack />
-                </Button>
-                <Button
-                    name={undefined}
-                    variant="action"
-                    onClick={handleNextMonthButtonClick}
-                    title="Next month"
-                    disabled={isNotDefined(year)}
-                >
-                    <IoChevronForward />
-                </Button>
-            </div>
         </div>
     );
 }

diff --git a/src/components/DateInput/index.tsx b/src/components/DateInput/index.tsx
@@ -11,10 +11,12 @@ import {
 import useUiModeClassName from '../../hooks/useUiModeClassName';
 import useBlurEffect from '../../hooks/useBlurEffect';
 import useBooleanState from '../../hooks/useBooleanState';
+import useModalState from '../../hooks/useModalState';
 import InputContainer, { Props as InputContainerProps } from '../InputContainer';
 import RawInput, { Props as RawInputProps } from '../RawInput';
 import Button from '../Button';
 import Popup from '../Popup';
+import Modal from '../Modal';
 import Calendar, { Props as CalendarProps } from '../Calendar';
 import { Props as CalendarDateProps } from '../Calendar/CalendarDate';
 import { genericMemo, ymdToDateString } from '../../utils';
@@ -28,6 +30,7 @@ type InheritedProps<T extends NameType> = (Omit<InputContainerProps, 'input'> &
 export interface Props<T extends NameType> extends InheritedProps<T> {
     inputElementRef?: React.RefObject<HTMLInputElement>;
     inputClassName?: string;
+    showInModal?: boolean;
 }
 
 function DateInput<T extends NameType>(props: Props<T>) {
@@ -55,6 +58,7 @@ function DateInput<T extends NameType>(props: Props<T>) {
         onChange,
         name,
         value,
+        showInModal,
         ...dateInputProps
     } = props;
 
@@ -72,6 +76,30 @@ function DateInput<T extends NameType>(props: Props<T>) {
         toggleShowCalendar,
     ] = useBooleanState(false);
 
+    const [
+        dateModalShown,
+        setDateModalVisible,
+        setDateModalHidden,
+    ] = useModalState(false);
+
+    const handleShowCalendar = React.useCallback(() => {
+        if (showInModal) {
+            setDateModalVisible();
+        }
+        toggleShowCalendar();
+    }, [
+        showInModal,
+        setDateModalVisible,
+        toggleShowCalendar,
+    ]);
+
+    const handleFocus = React.useCallback(() => {
+        if (showInModal) {
+            setDateModalVisible();
+        }
+        setShowCalendarTrue();
+    }, [showInModal, setShowCalendarTrue, setDateModalVisible]);
+
     const handlePopupBlur = React.useCallback(
         (isClickedOnPopup: boolean, isClickedOnParent: boolean, e: MouseEvent) => {
             const isClickedWithin = isClickedOnPopup || isClickedOnParent;
@@ -104,8 +132,17 @@ function DateInput<T extends NameType>(props: Props<T>) {
                 onChange(ymdToDateString(year, month, day), name);
             }
             setShowCalendarFalse();
+            if (showInModal) {
+                setDateModalHidden();
+            }
         },
-        [name, onChange, setShowCalendarFalse],
+        [
+            name,
+            onChange,
+            setShowCalendarFalse,
+            setDateModalHidden,
+            showInModal,
+        ],
     );
 
     const handleClearButtonClick = React.useCallback(() => {
@@ -138,7 +175,7 @@ function DateInput<T extends NameType>(props: Props<T>) {
                                 <Button
                                     name={undefined}
                                     variant="action"
-                                    onClick={toggleShowCalendar}
+                                    onClick={handleShowCalendar}
                                     title="Set current date"
                                     disabled={disabled}
                                 >
@@ -181,12 +218,12 @@ function DateInput<T extends NameType>(props: Props<T>) {
                         uiMode={uiMode}
                         disabled={disabled}
                         value={value}
-                        onFocus={setShowCalendarTrue}
+                        onFocus={handleFocus}
                         type="date"
                     />
                 )}
             />
-            {!readOnly && (
+            {!readOnly && !showInModal && (
                 <Popup
                     parentRef={containerRef}
                     elementRef={popupRef}
@@ -204,6 +241,23 @@ function DateInput<T extends NameType>(props: Props<T>) {
                     />
                 </Popup>
             )}
+            {!readOnly && showInModal && dateModalShown && (
+                <Modal
+                    onCloseButtonClick={setDateModalHidden}
+                    className={styles.calendarModal}
+                    spacing="compact"
+                    size="free"
+                    freeHeight
+                >
+                    <Calendar
+                        onDateClick={handleCalendarDateClick}
+                        className={styles.calendar}
+                        monthSelectionPopupClassName={calendarMonthSelectionPopupClassName}
+                        initialDate={value ?? undefined}
+                        activeDate={value ?? undefined}
+                    />
+                </Modal>
+            )}
         </>
     );
 }

diff --git a/src/components/DateInput/styles.css b/src/components/DateInput/styles.css
@@ -30,3 +30,8 @@
         }
     }
 }
+
+.calendar-modal {
+    --padding: var(--dui-spacing-medium);
+    width: calc(var(--dui-width-calendar-date) * 7 + 2 * var(--padding));
+}
diff --git a/storybook/stories/DateInput.stories.tsx b/storybook/stories/DateInput.stories.tsx
@@ -33,6 +33,11 @@ Default.args = {
     label: 'Birthdate',
 };
 
+export const ShowInModal = Template.bind({});
+ShowInModal.args = {
+    showInModal: true,
+};
+
 export const Disabled = Template.bind({});
 Disabled.args = {
     label: 'Birthdate',