feat(custom-date-range): include the interaction with times in custom…

… date range component
gsi-chao · Sep 29, 2020 · 41fc4b7 · 41fc4b7
1 parent d8f831b
commit 41fc4b7
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 10 deletions.
diff --git a/src/components/Form/Inputs/CustomDateRange/CustomDateTimePicker.tsx b/src/components/Form/Inputs/CustomDateRange/CustomDateTimePicker.tsx
@@ -124,12 +124,16 @@ export const VCustomDateTimePicker = (props: ICustomDateTimePicker) => {
     globalOnChange(newState);
   };
 
-  const globalOnChange = async (state: IStateCustomDateRange) => {
+  const globalOnChange = (state: IStateCustomDateRange) => {
     const newDates: DateRange = DateRangeUtils.buildRangeDate(state, dateType);
 
-    fieldState?.onChange?.(newDates);
+    onChangeState(newDates);
+  };
+
+  const onChangeState = async (dateRange: DateRange) => {
+    fieldState?.onChange?.(dateRange);
     await fieldState?.validate();
-    onChange?.(newDates);
+    onChange?.(dateRange);
   };
 
   return (
@@ -156,10 +160,10 @@ export const VCustomDateTimePicker = (props: ICustomDateTimePicker) => {
         {tipLabel && <span className={'tipLabel'}>{tipLabel}</span>}
         <DateRangeComponents
           state={state}
+          onChangeState={onChangeState}
           onChangeDate={onChangeDate}
           onChangeTime={onChangeTime}
           dateType={dateType}
-          onChange={onChange}
           format={format}
           minTime={minTime}
           maxTime={maxTime}

diff --git a/src/components/Form/Inputs/CustomDateRange/components/DateRangeComponents.tsx b/src/components/Form/Inputs/CustomDateRange/components/DateRangeComponents.tsx
@@ -1,12 +1,13 @@
-import React from 'react';
-import { Popover } from '@blueprintjs/core';
+import React, { useRef, useState } from 'react';
+import { Popover, PopoverInteractionKind } from '@blueprintjs/core';
 import { IDateRange } from '../type/IDateRange';
 import { DateRangeDateTimeSection } from './DateRangeDateTimeSection';
 import { DateRangeInputSection } from './DateRangeInputSection';
 import { DEFAULT_FORMAT } from '../type/ITypes';
 import { DateRangeTimeSection } from './DateRangeTimeSection';
 import { DateRangeTimeSectionWrapper } from '../styled/styles';
 import { DateRangeUtils } from '../utils/DateRangeUtils';
+import { IDateRangeShortcut } from '@blueprintjs/datetime';
 
 export const DateRangeComponents = (props: IDateRange) => {
   const {
@@ -28,15 +29,45 @@ export const DateRangeComponents = (props: IDateRange) => {
     useAmPm,
     precision,
     dayPickerProps,
-    modifiers
+    modifiers,
+    onChangeState
   } = props;
+  const [isOpen, setOpen] = useState(false);
 
   const { startTime, endTime } = DateRangeUtils.transformState(state);
 
   const onClosing = async () => await fieldState?.validate();
 
+  const isNullDateRangeRef = useRef(false);
+
+  const internalOnShortcutChange = (
+    shortcut: IDateRangeShortcut,
+    index: number
+  ) => {
+    const isNotNullRange = shortcut.dateRange.every(it => !!it);
+    if (isNotNullRange) {
+      onChangeState(shortcut.dateRange);
+    } else {
+      onChangeState([null, null]);
+      isNullDateRangeRef.current = true;
+    }
+
+    onShortcutChange?.(shortcut, index);
+  };
+
+  const onFocusInput = () => {
+    setOpen(!isOpen);
+  };
+
+  const onInteraction = (nextOpenState: boolean) => {
+    if (!nextOpenState && !isNullDateRangeRef.current) setOpen(false);
+    isNullDateRangeRef.current = false;
+  };
+
   return (
     <Popover
+      interactionKind={PopoverInteractionKind.HOVER}
+      isOpen={isOpen}
       content={
         <div>
           {dateType === 'DATE' || dateType === 'DATETIME' ? (
@@ -46,7 +77,7 @@ export const DateRangeComponents = (props: IDateRange) => {
               onChangeTime={onChangeTime}
               dateType={dateType}
               shortcuts={shortcuts ? shortcuts : false}
-              onShortcutChange={onShortcutChange}
+              onShortcutChange={internalOnShortcutChange}
               selectedShortcutIndex={selectedShortcutIndex}
               minTime={minTime}
               maxTime={maxTime}
@@ -85,11 +116,13 @@ export const DateRangeComponents = (props: IDateRange) => {
         preventOverflow: { boundariesElement: 'viewport' },
         ...modifiers
       }}
+      onInteraction={onInteraction}
     >
       <DateRangeInputSection
         format={format ?? DEFAULT_FORMAT}
         state={state}
         dateType={dateType}
+        onFocus={onFocusInput}
       />
     </Popover>
   );

diff --git a/src/components/Form/Inputs/CustomDateRange/components/DateRangeInputSection.tsx b/src/components/Form/Inputs/CustomDateRange/components/DateRangeInputSection.tsx
@@ -7,7 +7,7 @@ import { DEFAULT_FORMAT } from '../type/ITypes';
 import moment from 'moment';
 
 export const DateRangeInputSection = (props: IDateRangeInputSection) => {
-  const { state, format, dateType } = props;
+  const { state, format, dateType, onFocus } = props;
 
   const [startDate, endDate] = useMemo(() => {
     const [date1, date2] = DateRangeUtils.buildRangeDate(state, dateType);
@@ -28,6 +28,7 @@ export const DateRangeInputSection = (props: IDateRangeInputSection) => {
           id={'date-range-input-start-date'}
           placeholder={format}
           valueField={startDate}
+          onFocus={onFocus}
         />
       </div>
 
@@ -36,6 +37,7 @@ export const DateRangeInputSection = (props: IDateRangeInputSection) => {
           id={'date-range-input-end-date'}
           placeholder={format}
           valueField={endDate}
+          onFocus={onFocus}
         />
       </div>
     </DateRangeInputSectionStyled>

diff --git a/src/components/Form/Inputs/CustomDateRange/type/IDateRange.ts b/src/components/Form/Inputs/CustomDateRange/type/IDateRange.ts
@@ -14,11 +14,11 @@ export interface IDateRange {
   state: IStateCustomDateRange;
   onChangeDate: (selectedDates: DateRange) => void;
   onChangeTime: (type: 'START' | 'END') => (value: Date) => void;
+  onChangeState: (date: DateRange) => void;
   dateType: IDateType;
   format?: string;
   maxTime?: Date;
   minTime?: Date;
-  onChange?: (date: DateRange) => void;
   onShortcutChange?: (shortcut: IDateRangeShortcut, index: number) => void;
   shortcuts?: boolean | IDateRangeShortcut[];
   selectedShortcutIndex?: number;

diff --git a/src/components/Form/Inputs/CustomDateRange/type/IDateRangeInputSection.ts b/src/components/Form/Inputs/CustomDateRange/type/IDateRangeInputSection.ts
@@ -5,4 +5,5 @@ export interface IDateRangeInputSection {
   state: IStateCustomDateRange;
   format: string;
   dateType: IDateType;
+  onFocus?: () => void;
 }