feat(Calendar): hover range

packages/react/src/components/Calendar/Calendar.stories.tsx

@@ -10,29 +10,44 @@ import { useDateAdapterContext } from '../DateAdapter';
 
 const useRangeDatePicker = () => {
   const [selection, setSelection] = useState<[Date, Date | null] | null>(null);
-  const [hover, setHover] = useState<Date | null>(null);
+  const [hover, setHover] = useState<[Date, Date] | null>(null);
 
   const onSelectionChange = useCallback(
     (date: Date) => {
-      if (!selection || !selection[0] || selection[1]) {
-        setSelection([date, null]);
-      } else {
-        const s = new Date(selection[0]);
-        setHover(null);
+      if (selection) {
+        if (selection[0] < date) {
+          setSelection([selection[0], date]);
+        }
 
-        if (s < date) {
-          setSelection([s, date]);
-        } else {
-          setSelection([date, s]);
+        if (selection[0] > date) {
+          if (selection[1]) {
+            setSelection([date, selection[1]]);
+          } else {
+            setSelection([date, selection[0]]);
+          }
         }
+      } else {
+        setSelection([date, null]);
       }
     },
     [selection]
   );
 
   const onHover = (hover: Date | null) => {
-    if (selection && selection[0] && !selection[1]) {
-      setHover(hover);
+    if (selection && (selection[0] || selection[1])) {
+      if (hover) {
+        if (selection[0] < hover) {
+          setHover([selection[0], hover]);
+        }
+
+        if (selection[0] > hover) {
+          if (selection[1]) {
+            setHover([hover, selection[1]]);
+          } else {
+            setHover([hover, selection[0]]);
+          }
+        }
+      }
     }
   };
 
@@ -221,7 +236,7 @@ export const DisabledAndTooltips: Story = {
               };
             }
 
-            if (selection && selection[0] && !selection[1] && hover && adapter?.isSameDay(date, hover)) {
+            if (selection && selection[0] && !selection[1] && hover && adapter?.isSameDay(hover[0], hover[1])) {
               return {
                 title: locale === 'ru' ? 'N суток' : 'N days'
               };

packages/react/src/components/Calendar/Calendar.tsx

@@ -95,25 +95,25 @@ export const Calendar = (inProps: CalendarProps) => {
       const end = selection[1] ? new Date(selection[1]) : null;
 
       let range = [start, end] as [Date, Date | null];
-      let rangeHover = [start, end || hover] as [Date, Date | null];
+      let rangeHover = hover;
 
       if (range[0] && range[1] && range[0] > range[1]) {
         range = range.reverse() as [Date, Date];
       }
 
-      if (rangeHover[0] && rangeHover[1] && rangeHover[0] > rangeHover[1]) {
+      if (rangeHover && rangeHover[0] && rangeHover[1] && rangeHover[0] > rangeHover[1]) {
         rangeHover = rangeHover.reverse() as [Date, Date];
       }
 
-      if (rangeHover[1] && adapter.isWithinRange(current, rangeHover as [Date, Date])) {
+      if (rangeHover && rangeHover[1] && adapter.isWithinRange(current, rangeHover as [Date, Date])) {
         position = 'between';
       }
 
-      if (adapter.isSameDay(rangeHover[0], current)) {
+      if (rangeHover && adapter.isSameDay(rangeHover[0], current)) {
         position = 'start';
       }
 
-      if (rangeHover[1] && adapter.isSameDay(rangeHover[1], current)) {
+      if (rangeHover && rangeHover[1] && adapter.isSameDay(rangeHover[1], current)) {
         position = 'end';
       }
 
@@ -124,7 +124,7 @@ export const Calendar = (inProps: CalendarProps) => {
         selected = true;
       }
 
-      if (hover && rangeHover[1] && !adapter.isSameDay(rangeHover[0], rangeHover[1])) {
+      if (hover && rangeHover && rangeHover[1] && !adapter.isSameDay(rangeHover[0], rangeHover[1])) {
         hovered = adapter.isWithinRange(current, rangeHover as [Date, Date]);
       }
     }

packages/react/src/components/Calendar/Calendar.types.ts

@@ -30,7 +30,7 @@ export interface CalendarProps {
   onSelectionChange?: (value: Date) => void;
 
   /** The current hovered date. */
-  hover?: Date | null;
+  hover?: [Date, Date] | null;
   /** Callback fired when the date button is hovered or focused. */
   onHover?: (date: Date | null) => void;