fix(DataPicker): fixed visited date (#3850)

closes #3838
consta-design-system · Dec 9, 2024 · 71e1a1f · 71e1a1f
1 parent a1c40e6
commit 71e1a1f
Show file tree

Hide file tree

Showing 9 changed files with 88 additions and 74 deletions.
diff --git a/src/components/DatePicker/DatePickerTypeDateRange/DatePickerTypeDateRange.tsx b/src/components/DatePicker/DatePickerTypeDateRange/DatePickerTypeDateRange.tsx
@@ -61,12 +61,10 @@ export const DatePickerTypeDateRange: DatePickerTypeComponent<'date-range'> =
     const endFieldInputRef = useRef<HTMLInputElement>(null);
     const calendarRef = useRef<HTMLDivElement>(null);
 
-    const [fieldFocused, setFieldFocused] = useState<'start' | 'end' | false>(
-      false,
-    );
+    const [fieldFocused, setFieldFocused] = useState<0 | 1 | undefined>();
 
-    const startFocused = fieldFocused === 'start';
-    const endFocused = fieldFocused === 'end';
+    const startFocused = fieldFocused === 0;
+    const endFocused = fieldFocused === 1;
 
     const handleChange: DatePickerDropdownPropOnChange = (value, { e }) => {
       if (startFocused) {
@@ -99,6 +97,7 @@ export const DatePickerTypeDateRange: DatePickerTypeComponent<'date-range'> =
       startOfUnit: startOfMonth,
       onChangeCurrentVisibleDate,
       calendarVisible,
+      rangeIndex: fieldFocused,
     });
 
     const startFieldOnBlurHandler = (e: React.FocusEvent<HTMLElement>) =>
@@ -108,12 +107,12 @@ export const DatePickerTypeDateRange: DatePickerTypeComponent<'date-range'> =
       Array.isArray(onBlur) ? onBlur[1]?.(e) : onBlur?.(e);
 
     const startFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {
-      setFieldFocused('start');
+      setFieldFocused(0);
       Array.isArray(onFocus) ? onFocus[0]?.(e) : onFocus?.(e);
     };
 
     const endFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {
-      setFieldFocused('end');
+      setFieldFocused(1);
       Array.isArray(onFocus) ? onFocus[1]?.(e) : onFocus?.(e);
     };
 
@@ -167,7 +166,7 @@ export const DatePickerTypeDateRange: DatePickerTypeComponent<'date-range'> =
         ...(ignoreOutsideClicksRefs ?? []),
       ],
       handler: useCallback(() => {
-        setFieldFocused(false);
+        setFieldFocused(undefined);
         setCalendarVisible.off();
       }, []),
     });

diff --git a/src/components/DatePicker/DatePickerTypeDateTime/DatePickerTypeDateTime.tsx b/src/components/DatePicker/DatePickerTypeDateTime/DatePickerTypeDateTime.tsx
@@ -13,18 +13,15 @@ import {
   getDropdownZIndex,
   getMultiplicityTime,
 } from '../helpers';
-import {
-  datePickerPropDateTimeViewDefault,
-  DatePickerTypeComponent,
-} from '../types';
+import { DatePickerTypeComponent } from '../types';
 import { useCalendarVisible } from '../useCalendarVisible';
 import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
 
 export const DatePickerTypeDateTime: DatePickerTypeComponent<'date-time'> =
   forwardRef((props, ref) => {
     const {
       events,
-      dateTimeView = datePickerPropDateTimeViewDefault,
+      dateTimeView,
       locale,
       dropdownForm,
       dropdownClassName,
@@ -127,7 +124,7 @@ export const DatePickerTypeDateTime: DatePickerTypeComponent<'date-time'> =
           isOpen={calendarVisible}
           value={props.value || undefined}
           type="date-time"
-          view={dateTimeView}
+          view="classic"
           events={events}
           className={dropdownClassName}
           locale={locale}

diff --git a/src/components/DatePicker/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.tsx b/src/components/DatePicker/DatePickerTypeDateTimeRange/DatePickerTypeDateTimeRange.tsx
@@ -20,18 +20,16 @@ import {
   getFieldName,
   normalizeRangeValue,
 } from '../helpers';
-import {
-  datePickerPropDateTimeViewDefault,
-  DatePickerTypeComponent,
-} from '../types';
+import { getTimeFof } from '../timeForMap';
+import { DatePickerTypeComponent } from '../types';
 import { useCalendarVisible } from '../useCalendarVisible';
 import { useCurrentVisibleDate } from '../useCurrentVisibleDate';
 
 export const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-range'> =
   forwardRef((props, ref) => {
     const {
       events,
-      dateTimeView = datePickerPropDateTimeViewDefault,
+      dateTimeView,
       locale,
       dropdownForm,
       onFocus,
@@ -63,12 +61,10 @@ export const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-ran
     const endFieldInputRef = useRef<HTMLInputElement>(null);
     const calendarRef = useRef<HTMLDivElement>(null);
 
-    const [fieldFocused, setFieldFocused] = useState<'start' | 'end' | false>(
-      false,
-    );
+    const [fieldFocused, setFieldFocused] = useState<0 | 1 | undefined>();
 
-    const startFocused = fieldFocused === 'start';
-    const endFocused = fieldFocused === 'end';
+    const startFocused = fieldFocused === 0;
+    const endFocused = fieldFocused === 1;
 
     const handleChange: DatePickerDropdownPropOnChange = (value, { e }) => {
       if (startFocused) {
@@ -101,6 +97,7 @@ export const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-ran
       startOfUnit: startOfMonth,
       onChangeCurrentVisibleDate,
       calendarVisible,
+      rangeIndex: fieldFocused,
     });
 
     const startFieldOnBlurHandler = (e: React.FocusEvent<HTMLElement>) =>
@@ -110,12 +107,12 @@ export const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-ran
       Array.isArray(onBlur) ? onBlur[1]?.(e) : onBlur?.(e);
 
     const startFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {
-      setFieldFocused('start');
+      setFieldFocused(0);
       Array.isArray(onFocus) ? onFocus[0]?.(e) : onFocus?.(e);
     };
 
     const endFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {
-      setFieldFocused('end');
+      setFieldFocused(1);
       Array.isArray(onFocus) ? onFocus[1]?.(e) : onFocus?.(e);
     };
 
@@ -147,7 +144,7 @@ export const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-ran
         ...(ignoreOutsideClicksRefs ?? []),
       ],
       handler: useCallback(() => {
-        setFieldFocused(false);
+        setFieldFocused(undefined);
         setCalendarVisible.off();
       }, []),
     });
@@ -198,8 +195,8 @@ export const DatePickerTypeDateTimeRange: DatePickerTypeComponent<'date-time-ran
           onChangeCurrentVisibleDate={setCurrentVisibleDate}
           currentVisibleDate={currentVisibleDate}
           value={props.value || undefined}
-          timeFor={fieldFocused || undefined}
-          view={dateTimeView}
+          timeFor={getTimeFof(fieldFocused)}
+          view="classic"
           events={events}
           locale={locale}
           minDate={props.minDate}

diff --git a/src/components/DatePicker/DatePickerTypeMonthRange/DatePickerTypeMonthRange.tsx b/src/components/DatePicker/DatePickerTypeMonthRange/DatePickerTypeMonthRange.tsx
@@ -57,12 +57,10 @@ export const DatePickerTypeMonthRange: DatePickerTypeComponent<'month-range'> =
     const endFieldInputRef = useRef<HTMLInputElement>(null);
     const calendarRef = useRef<HTMLDivElement>(null);
 
-    const [fieldFocused, setFieldFocused] = useState<'start' | 'end' | false>(
-      false,
-    );
+    const [fieldFocused, setFieldFocused] = useState<0 | 1 | undefined>();
 
-    const startFocused = fieldFocused === 'start';
-    const endFocused = fieldFocused === 'end';
+    const startFocused = fieldFocused === 0;
+    const endFocused = fieldFocused === 1;
 
     const handleChange: DatePickerDropdownPropOnChange = (value, { e }) => {
       if (startFocused) {
@@ -95,6 +93,7 @@ export const DatePickerTypeMonthRange: DatePickerTypeComponent<'month-range'> =
       startOfUnit: startOfYear,
       onChangeCurrentVisibleDate,
       calendarVisible,
+      rangeIndex: fieldFocused,
     });
 
     const startFieldOnBlurHandler = (e: React.FocusEvent<HTMLElement>) =>
@@ -104,12 +103,12 @@ export const DatePickerTypeMonthRange: DatePickerTypeComponent<'month-range'> =
       Array.isArray(onBlur) ? onBlur[1]?.(e) : onBlur?.(e);
 
     const startFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {
-      setFieldFocused('start');
+      setFieldFocused(0);
       Array.isArray(onFocus) ? onFocus[0]?.(e) : onFocus?.(e);
     };
 
     const endFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {
-      setFieldFocused('end');
+      setFieldFocused(1);
       Array.isArray(onFocus) ? onFocus[1]?.(e) : onFocus?.(e);
     };
 
@@ -163,7 +162,7 @@ export const DatePickerTypeMonthRange: DatePickerTypeComponent<'month-range'> =
         ...(ignoreOutsideClicksRefs ?? []),
       ],
       handler: useCallback(() => {
-        setFieldFocused(false);
+        setFieldFocused(undefined);
         setCalendarVisible.off();
       }, []),
     });

diff --git a/src/components/DatePicker/DatePickerTypeYearRange/DatePickerTypeYearRange.tsx b/src/components/DatePicker/DatePickerTypeYearRange/DatePickerTypeYearRange.tsx
@@ -50,12 +50,10 @@ export const DatePickerTypeYearRange: DatePickerTypeComponent<'date-range'> =
     const endFieldInputRef = useRef<HTMLInputElement>(null);
     const calendarRef = useRef<HTMLDivElement>(null);
 
-    const [fieldFocused, setFieldFocused] = useState<'start' | 'end' | false>(
-      false,
-    );
+    const [fieldFocused, setFieldFocused] = useState<0 | 1 | undefined>();
 
-    const startFocused = fieldFocused === 'start';
-    const endFocused = fieldFocused === 'end';
+    const startFocused = fieldFocused === 0;
+    const endFocused = fieldFocused === 1;
 
     const handleChange: DatePickerDropdownPropOnChange = (value, { e }) => {
       if (startFocused) {
@@ -88,6 +86,7 @@ export const DatePickerTypeYearRange: DatePickerTypeComponent<'date-range'> =
       startOfUnit: startOfDecade,
       onChangeCurrentVisibleDate,
       calendarVisible,
+      rangeIndex: fieldFocused,
     });
 
     const startFieldOnBlurHandler = (e: React.FocusEvent<HTMLElement>) =>
@@ -97,12 +96,12 @@ export const DatePickerTypeYearRange: DatePickerTypeComponent<'date-range'> =
       Array.isArray(onBlur) ? onBlur[1]?.(e) : onBlur?.(e);
 
     const startFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {
-      setFieldFocused('start');
+      setFieldFocused(0);
       Array.isArray(onFocus) ? onFocus[0]?.(e) : onFocus?.(e);
     };
 
     const endFieldOnFocusHandler = (e: React.FocusEvent<HTMLElement>) => {
-      setFieldFocused('end');
+      setFieldFocused(1);
       Array.isArray(onFocus) ? onFocus[1]?.(e) : onFocus?.(e);
     };
 
@@ -156,7 +155,7 @@ export const DatePickerTypeYearRange: DatePickerTypeComponent<'date-range'> =
         ...(ignoreOutsideClicksRefs ?? []),
       ],
       handler: () => {
-        setFieldFocused(false);
+        setFieldFocused(undefined);
         setCalendarVisible.off();
       },
     });

diff --git a/src/components/DatePicker/__stand__/DatePicker.variants.css b/src/components/DatePicker/__stand__/DatePicker.variants.css
@@ -1,4 +1,4 @@
-.DatePickerVariants.TextField {
+.DatePickerVariants {
   position: absolute;
   top: var(--space-l);
   width: 100%;

diff --git a/src/components/DatePicker/__stand__/DatePicker.variants.tsx b/src/components/DatePicker/__stand__/DatePicker.variants.tsx
@@ -114,33 +114,34 @@ const Variants = () => {
   }, [type]);
 
   return (
-    <DatePicker
-      className={cnDatePickerVariants()}
-      type={type}
-      form={form}
-      label={label}
-      labelPosition={labelPosition}
-      caption={caption}
-      required={required}
-      labelIcon={withLabelIcon ? IconQuestion : undefined}
-      value={value}
-      status={status}
-      view={view}
-      disabled={disabled}
-      size={size}
-      onChange={setValue}
-      leftSide={icon}
-      events={events}
-      locale={getByMap(localeMap, locale)}
-      dateTimeView={dateTimeView}
-      dropdownForm={dropdownForm}
-      minDate={minDate}
-      maxDate={maxDate}
-      renderAdditionalControls={
-        withAdditionalControls ? additionalControls : undefined
-      }
-      withClearButton={withClearButton}
-    />
+    <div className={cnDatePickerVariants()}>
+      <DatePicker
+        type={type}
+        form={form}
+        label={label}
+        labelPosition={labelPosition}
+        caption={caption}
+        required={required}
+        labelIcon={withLabelIcon ? IconQuestion : undefined}
+        value={value}
+        status={status}
+        view={view}
+        disabled={disabled}
+        size={size}
+        onChange={setValue}
+        leftSide={icon}
+        events={events}
+        locale={getByMap(localeMap, locale)}
+        dateTimeView={dateTimeView}
+        dropdownForm={dropdownForm}
+        minDate={minDate}
+        maxDate={maxDate}
+        renderAdditionalControls={
+          withAdditionalControls ? additionalControls : undefined
+        }
+        withClearButton={withClearButton}
+      />
+    </div>
   );
 };
 

diff --git a/src/components/DatePicker/timeForMap.ts b/src/components/DatePicker/timeForMap.ts
@@ -0,0 +1,12 @@
+import { isNumber } from '##/utils/type-guards';
+
+export const timeForMap: Record<0 | 1, 'start' | 'end'> = {
+  0: 'start',
+  1: 'end',
+};
+
+export const getTimeFof = (focusedFieldIndex: 0 | 1 | undefined) => {
+  if (isNumber(focusedFieldIndex)) {
+    return timeForMap[focusedFieldIndex];
+  }
+};
diff --git a/src/components/DateTime/helpers/useCurrentVisibleDate.ts b/src/components/DateTime/helpers/useCurrentVisibleDate.ts
@@ -1,6 +1,7 @@
 import { useEffect, useMemo, useState } from 'react';
 
-import { DateRange } from '../../../utils/types/Date';
+import { isNumber } from '##/utils/type-guards';
+import { DateRange } from '##/utils/types/Date';
 
 type GetCurrentVisibleDateProps = {
   currentVisibleDate: Date | undefined;
@@ -9,6 +10,7 @@ type GetCurrentVisibleDateProps = {
   value: Date | DateRange | undefined | null;
   startOfUnit: (date: Date) => Date;
   onChangeCurrentVisibleDate?: (date: Date) => void;
+  rangeIndex?: number;
 };
 
 export type UseCurrentVisibleDateProps = GetCurrentVisibleDateProps & {
@@ -38,11 +40,19 @@ const calculateCurrentVisibleDate = ({
   minDate,
   maxDate,
   value,
+  rangeIndex,
 }: GetCurrentVisibleDateProps): Date => {
   if (currentVisibleDate) {
     return currentVisibleDate;
   }
 
+  if (Array.isArray(value) && isNumber(rangeIndex)) {
+    const date = value[rangeIndex];
+    if (date) {
+      return date;
+    }
+  }
+
   if (Array.isArray(value) && value[0]) {
     return value[0];
   }