feat(custom-date-range): refactor code in Custom Date Range component

gsi-chao · Sep 29, 2020 · ad7b41b · ad7b41b
1 parent eb78b6b
commit ad7b41b
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 67 deletions.
diff --git a/src/components/Form/Inputs/CustomDateRange/CustomDateTimePicker.tsx b/src/components/Form/Inputs/CustomDateRange/CustomDateTimePicker.tsx
@@ -8,9 +8,9 @@ import { DateRangeUtils } from './utils/DateRangeUtils';
 import { DateRange } from '@blueprintjs/datetime';
 import { DateRangeComponents } from './components/DateRangeComponents';
 import { Validators } from '../../Validators';
-import { Observer } from 'mobx-react';
+import moment from 'moment';
 
-export const CustomDateTimePicker = (props: ICustomDateTimePicker) => {
+export const VCustomDateTimePicker = (props: ICustomDateTimePicker) => {
   const {
     className,
     disabled,
@@ -44,12 +44,19 @@ export const CustomDateTimePicker = (props: ICustomDateTimePicker) => {
     dayPickerProps
   } = props;
 
-  const startValueTime = startTimeProps?.value;
-  const endValueTime = endTimeProps?.value;
+  const startValueTime = startTimeProps?.initValue;
+  const endValueTime = endTimeProps?.initValue;
 
-  const [state, setState] = useState<IStateCustomDateRange>(
-    DateRangeUtils.initialDate(fieldState, value, startValueTime, endValueTime)
-  );
+  const [state, setState] = useState<IStateCustomDateRange>({
+    start: {
+      date: null,
+      time: DateRangeUtils.includeTimeToDate(moment().toDate(), 24, 0)
+    },
+    end: {
+      date: null,
+      time: DateRangeUtils.includeTimeToDate(moment().toDate(), 23, 59)
+    }
+  });
 
   const {
     startDate,
@@ -62,6 +69,17 @@ export const CustomDateTimePicker = (props: ICustomDateTimePicker) => {
     initialState();
   }, []);
 
+  useEffect(() => {
+    setState(
+      DateRangeUtils.initialDate(
+        fieldState,
+        value,
+        startValueTime,
+        endValueTime
+      )
+    );
+  }, [fieldState, value, startValueTime, endValueTime]);
+
   const initialState = () => {
     const hasValidators = !!validators?.length;
     const newValidators: any[] = hasValidators ? validators ?? [] : [];
@@ -113,52 +131,48 @@ export const CustomDateTimePicker = (props: ICustomDateTimePicker) => {
   };
 
   return (
-    <Observer
-      render={() => (
-        <StyledDatePicker
-          className={className}
+    <StyledDatePicker
+      className={className}
+      disabled={disabled}
+      inline={inline}
+      intent={fieldState?.hasError ? Intent.DANGER : Intent.NONE}
+      labelFor={id}
+      labelInfo={labelInfo}
+      layer={layer}
+      fill={fill}
+      margin={margin}
+      noLabel={noLabel}
+    >
+      <FormFieldContainer
+        required={required || displayRequired}
+        noLabel={noLabel}
+        label={label}
+        fieldState={fieldState}
+        value={value}
+        tooltip={tooltip}
+      >
+        {tipLabel && <span className={'tipLabel'}>{tipLabel}</span>}
+        <DateRangeComponents
+          state={state}
+          onChangeDate={onChangeDate}
+          onChangeTime={onChangeTime}
+          dateType={dateType}
+          onChange={onChange}
+          format={format}
+          minTime={minTime}
+          maxTime={maxTime}
+          shortcuts={shortcuts}
+          selectedShortcutIndex={selectedShortcutIndex}
+          onShortcutChange={onShortcutChange}
           disabled={disabled}
-          inline={inline}
-          intent={fieldState?.hasError ? Intent.DANGER : Intent.NONE}
-          labelFor={id}
-          labelInfo={labelInfo}
-          layer={layer}
-          fill={fill}
-          margin={margin}
-          noLabel={noLabel}
-        >
-          <FormFieldContainer
-            required={required || displayRequired}
-            noLabel={noLabel}
-            label={label}
-            fieldState={fieldState}
-            value={value}
-            tooltip={tooltip}
-          >
-            {tipLabel && <span className={'tipLabel'}>{tipLabel}</span>}
-            <DateRangeComponents
-              state={state}
-              onChangeDate={onChangeDate}
-              onChangeTime={onChangeTime}
-              dateType={dateType}
-              onChange={onChange}
-              format={format}
-              minTime={minTime}
-              maxTime={maxTime}
-              shortcuts={shortcuts}
-              selectedShortcutIndex={selectedShortcutIndex}
-              onShortcutChange={onShortcutChange}
-              disabled={disabled}
-              startTimeProps={startTimeProps}
-              endTimeProps={endTimeProps}
-              fieldState={fieldState}
-              useAmPm={useAmPm}
-              precision={precision}
-              dayPickerProps={dayPickerProps}
-            />
-          </FormFieldContainer>
-        </StyledDatePicker>
-      )}
-    />
+          startTimeProps={startTimeProps}
+          endTimeProps={endTimeProps}
+          fieldState={fieldState}
+          useAmPm={useAmPm}
+          precision={precision}
+          dayPickerProps={dayPickerProps}
+        />
+      </FormFieldContainer>
+    </StyledDatePicker>
   );
 };
diff --git a/src/components/Form/Inputs/CustomDateRange/components/DateRangeInputSection.tsx b/src/components/Form/Inputs/CustomDateRange/components/DateRangeInputSection.tsx
@@ -3,8 +3,8 @@ import { DateRangeInputSectionStyled } from '../styled/styles';
 import { DateRangeInput } from './DateRangeInput';
 import { IDateRangeInputSection } from '../type/IDateRangeInputSection';
 import { DateRangeUtils } from '../utils/DateRangeUtils';
-import moment from 'moment';
 import { DEFAULT_FORMAT } from '../type/ITypes';
+import moment from 'moment';
 
 export const DateRangeInputSection = (props: IDateRangeInputSection) => {
   const { state, format, dateType } = props;

diff --git a/src/components/Form/Inputs/CustomDateRange/index.ts b/src/components/Form/Inputs/CustomDateRange/index.ts
@@ -1 +1 @@
-export { CustomDateTimePicker } from './CustomDateTimePicker';
+export { VCustomDateTimePicker } from './CustomDateTimePicker';
diff --git a/src/components/Form/Inputs/CustomDateRange/type/ICustomDateTimePicker.ts b/src/components/Form/Inputs/CustomDateRange/type/ICustomDateTimePicker.ts
@@ -1,6 +1,8 @@
-import { IDateRangeShortcut } from '@blueprintjs/datetime/src/shortcuts';
-import { DateRange } from '@blueprintjs/datetime';
-import { TimePrecision } from '@blueprintjs/datetime/src/timePicker';
+import {
+  DateRange,
+  IDateRangeShortcut,
+  TimePrecision
+} from '@blueprintjs/datetime';
 import { IFieldProps } from '../../IFieldProps';
 import { IDateType } from './ITypes';
 import { DayPickerProps } from 'react-day-picker';
@@ -24,7 +26,7 @@ export interface ICustomDateTimePicker extends IFieldProps {
 }
 
 export interface ITimeProps {
-  value?: Date;
+  initValue?: Date;
   useAmPm?: boolean;
   precision?: TimePrecision;
 }
diff --git a/src/components/Form/Inputs/CustomDateRange/type/IDateRange.ts b/src/components/Form/Inputs/CustomDateRange/type/IDateRange.ts
@@ -1,10 +1,12 @@
-import { DateRange } from '@blueprintjs/datetime';
-import { IDateRangeShortcut } from '@blueprintjs/datetime/src/shortcuts';
+import {
+  DateRange,
+  IDateRangeShortcut,
+  TimePrecision
+} from '@blueprintjs/datetime';
 import { IStateCustomDateRange } from './IStateCustomDateRange';
 import { IDateType } from './ITypes';
 import { ITimeProps } from './ICustomDateTimePicker';
 import { FieldState } from 'formstate';
-import { TimePrecision } from '@blueprintjs/datetime/src/timePicker';
 import { DayPickerProps } from 'react-day-picker';
 
 export interface IDateRange {

diff --git a/src/components/Form/Inputs/CustomDateRange/type/IDateRangeDateTimeSection.ts b/src/components/Form/Inputs/CustomDateRange/type/IDateRangeDateTimeSection.ts
@@ -1,9 +1,11 @@
-import { IDateRangeShortcut } from '@blueprintjs/datetime/src/shortcuts';
 import { IStateCustomDateRange } from './IStateCustomDateRange';
-import { DateRange } from '@blueprintjs/datetime';
+import {
+  DateRange,
+  IDateRangeShortcut,
+  TimePrecision
+} from '@blueprintjs/datetime';
 import { IDateType } from './ITypes';
 import { ITimeProps } from './ICustomDateTimePicker';
-import { TimePrecision } from '@blueprintjs/datetime/src/timePicker';
 import { DayPickerProps } from 'react-day-picker';
 
 export interface IDateRangeDateTimeSection {

diff --git a/src/components/Form/Inputs/CustomDateRange/type/IDateRangeTimeSection.ts b/src/components/Form/Inputs/CustomDateRange/type/IDateRangeTimeSection.ts
@@ -1,4 +1,4 @@
-import { TimePrecision } from '@blueprintjs/datetime/src/timePicker';
+import { TimePrecision } from '@blueprintjs/datetime';
 
 export interface IDateRangeTimeSection {
   startTime: {

diff --git a/src/components/Form/Inputs/CustomDateRange/utils/DateRangeUtils.ts b/src/components/Form/Inputs/CustomDateRange/utils/DateRangeUtils.ts
@@ -4,6 +4,7 @@ import { IDateType } from '../type/ITypes';
 import { DateRange } from '@blueprintjs/datetime';
 import { FieldState } from 'formstate';
 import { ITransformState } from '../type/ITransformState';
+import { isDate } from 'lodash';
 
 const includeTimeToDate = (date: Date, hour: number, minute: number) => {
   return moment(date)
@@ -75,7 +76,7 @@ const initialDate = (
   };
 
   const buildState = (range: any) =>
-    range.length === 2 && range.every((it: any) => !!it)
+    range.length === 2 && range.every((it: any) => !!it && isDate(it))
       ? {
           start: getTimeAndDate(range[0]),
           end: getTimeAndDate(range[1])