@kne/react-calendar 1.0.0 → 1.0.1

package/dist/index.js

@@ -909,18 +909,44 @@ const ViewPanel = ({
   });
 };
 
-const LONG_PRESS_DELAY = 360;
-const MOVE_THRESHOLD = 18;
+const LONG_PRESS_DELAY = 400;
+const SCROLL_CANCEL_THRESHOLD = 12;
+const TAP_MOVE_THRESHOLD = 8;
 const getPopoverKey = slot => slot ? `form:${slot.key}` : null;
-const getSlotElementFromTouch = (container, touch) => {
-  const element = document.elementFromPoint(touch.clientX, touch.clientY);
-  const slotElement = element?.closest?.('[data-slot-index]');
-  if (!slotElement || !container?.contains(slotElement)) {
+const getSlotIndexFromPoint = (container, clientX, clientY) => {
+  const slotElements = container?.querySelectorAll?.('[data-slot-index]');
+  if (!slotElements?.length) {
     return null;
   }
-  return slotElement;
+  let closestIndex = null;
+  let closestDistance = Infinity;
+  for (const candidate of slotElements) {
+    const rect = candidate.getBoundingClientRect();
+    const index = Number(candidate.getAttribute('data-slot-index'));
+    if (Number.isNaN(index)) {
+      continue;
+    }
+    if (clientY >= rect.top && clientY <= rect.bottom && clientX >= rect.left && clientX <= rect.right) {
+      return index;
+    }
+    if (clientX < rect.left || clientX > rect.right) {
+      continue;
+    }
+    const centerY = (rect.top + rect.bottom) / 2;
+    const distance = Math.abs(clientY - centerY);
+    if (distance < closestDistance) {
+      closestDistance = distance;
+      closestIndex = index;
+    }
+  }
+  return closestIndex;
+};
+const clearDocumentTextSelection = () => {
+  const selection = document.getSelection?.();
+  if (selection && !selection.isCollapsed) {
+    selection.removeAllRanges();
+  }
 };
-const getTouchPoint = event => event.changedTouches?.[0] || event.touches?.[0];
 const useScheduleSelectionGesture = ({
   slots,
   selectedSlots,
@@ -938,9 +964,14 @@ const useScheduleSelectionGesture = ({
   const touchStateRef = react.useRef(null);
   const slotsDataRef = react.useRef(slots);
   const selectedSlotsRef = react.useRef(selectedSlots);
+  const allowMultiSelectRef = react.useRef(allowMultiSelect);
   const suppressTriggerUntilRef = react.useRef(0);
+  const suppressMouseUntilRef = react.useRef(0);
+  const scrollLockRef = react.useRef(null);
+  const handlersRef = react.useRef({});
   slotsDataRef.current = slots;
   selectedSlotsRef.current = selectedSlots;
+  allowMultiSelectRef.current = allowMultiSelect;
   const selectedKeys = react.useMemo(() => new Set(selectedSlots.map(slot => slot.key)), [selectedSlots]);
   const selectedAnchorKey = selectedSlots[selectedSlots.length - 1]?.key;
   const formPopoverKey = selectedAnchorKey ? `form:${selectedAnchorKey}` : null;
@@ -950,16 +981,55 @@ const useScheduleSelectionGesture = ({
       longPressTimerRef.current = null;
     }
   }, []);
+  const unlockContainerScroll = react.useCallback(() => {
+    const container = slotsRef.current;
+    if (!container || scrollLockRef.current == null) {
+      return;
+    }
+    const scrollTop = scrollLockRef.current;
+    container.style.overflow = '';
+    container.style.touchAction = '';
+    container.scrollTop = scrollTop;
+    scrollLockRef.current = null;
+  }, []);
+  const lockContainerScroll = react.useCallback(() => {
+    const container = slotsRef.current;
+    if (!container || scrollLockRef.current != null) {
+      return;
+    }
+    scrollLockRef.current = container.scrollTop;
+    container.style.overflow = 'hidden';
+    container.style.touchAction = 'none';
+  }, []);
+  const resetGestureState = react.useCallback(() => {
+    clearLongPress();
+    const container = slotsRef.current;
+    const touchState = touchStateRef.current;
+    if (container && touchState?.pointerId != null && container.hasPointerCapture?.(touchState.pointerId)) {
+      try {
+        container.releasePointerCapture(touchState.pointerId);
+      } catch {
+        // Ignore capture release errors on stale pointers.
+      }
+    }
+    draggingRef.current = false;
+    dragStartIndexRef.current = null;
+    touchStateRef.current = null;
+    container?.classList.remove('schedule-calendar-touch-dragging');
+    unlockContainerScroll();
+    setDragging(false);
+  }, [clearLongPress, unlockContainerScroll]);
   const selectSlots = react.useCallback(nextSlots => {
     selectedSlotsRef.current = nextSlots;
     if (!nextSlots.length) {
       setActivePopoverKey(null);
+      resetGestureState();
     }
     setSelectedSlots(nextSlots);
     onSlotRangeChange?.(nextSlots, {
       action: nextSlots.length ? 'select' : 'clear'
     });
-  }, [onSlotRangeChange, setSelectedSlots]);
+  }, [onSlotRangeChange, resetGestureState, setSelectedSlots]);
   const getSelectableRange = react.useCallback((startIndex, endIndex) => {
     const [start, end] = [Math.min(startIndex, endIndex), Math.max(startIndex, endIndex)];
     return slotsDataRef.current.slice(start, end + 1).filter(slot => slot.status === 'free');
@@ -971,12 +1041,17 @@ const useScheduleSelectionGesture = ({
     }
   }, []);
   const startSlotSelection = react.useCallback((slot, index, {
-    showPopover = true
+    showPopover = true,
+    lockScroll = false
   } = {}) => {
+    clearDocumentTextSelection();
     setActivePopoverKey(getPopoverKey(slot));
     draggingRef.current = true;
     dragStartIndexRef.current = index;
     slotsRef.current?.classList.add('schedule-calendar-touch-dragging');
+    if (lockScroll) {
+      lockContainerScroll();
+    }
     setDragging(true);
     selectSlots([slot]);
     if (!showPopover) {
@@ -984,43 +1059,58 @@ const useScheduleSelectionGesture = ({
       setActivePopoverKey(null);
     }
     onFreeSlotClick?.(slot);
-  }, [onFreeSlotClick, selectSlots]);
+  }, [lockContainerScroll, onFreeSlotClick, selectSlots]);
   const finishSelection = react.useCallback(({
     fromTouch = false
   } = {}) => {
-    clearLongPress();
-    draggingRef.current = false;
-    dragStartIndexRef.current = null;
-    slotsRef.current?.classList.remove('schedule-calendar-touch-dragging');
-    setDragging(false);
-    if (selectedSlotsRef.current.length) {
+    const hadSelection = selectedSlotsRef.current.length > 0;
+    resetGestureState();
+    if (hadSelection) {
       if (fromTouch) {
         suppressTriggerUntilRef.current = Date.now() + 500;
       }
       showFormPopoverForSlots(selectedSlotsRef.current);
     }
-  }, [clearLongPress, showFormPopoverForSlots]);
+  }, [resetGestureState, showFormPopoverForSlots]);
   const updateSelectionRange = react.useCallback(index => {
     const startIndex = dragStartIndexRef.current;
-    if (startIndex === null || !allowMultiSelect) {
+    if (startIndex === null || !allowMultiSelectRef.current) {
       return;
     }
     const nextSlots = getSelectableRange(startIndex, index);
     selectSlots(nextSlots);
-  }, [allowMultiSelect, getSelectableRange, selectSlots]);
+  }, [getSelectableRange, selectSlots]);
+  const shouldIgnoreMouseSelectionEvent = react.useCallback(() => {
+    return !!touchStateRef.current || Date.now() < suppressMouseUntilRef.current;
+  }, []);
   const handleMouseDown = react.useCallback((event, slot, index) => {
+    if (shouldIgnoreMouseSelectionEvent()) {
+      return;
+    }
     if (slot.status !== 'free') {
       return;
     }
     event.preventDefault();
     startSlotSelection(slot, index);
-  }, [startSlotSelection]);
+  }, [shouldIgnoreMouseSelectionEvent, startSlotSelection]);
   const handleMouseEnter = react.useCallback(index => {
-    if (!draggingRef.current) {
+    if (shouldIgnoreMouseSelectionEvent() || !draggingRef.current) {
       return;
     }
     updateSelectionRange(index);
-  }, [updateSelectionRange]);
+  }, [shouldIgnoreMouseSelectionEvent, updateSelectionRange]);
+  const handleMouseUp = react.useCallback(() => {
+    if (shouldIgnoreMouseSelectionEvent()) {
+      return;
+    }
+    finishSelection();
+  }, [finishSelection, shouldIgnoreMouseSelectionEvent]);
+  const handleMouseLeave = react.useCallback(() => {
+    if (shouldIgnoreMouseSelectionEvent()) {
+      return;
+    }
+    finishSelection();
+  }, [finishSelection, shouldIgnoreMouseSelectionEvent]);
   const handlePopoverOpenChange = react.useCallback((open, currentPopoverKey, {
     isForm = false
   } = {}) => {
@@ -1038,25 +1128,77 @@ const useScheduleSelectionGesture = ({
       return prevKey === currentPopoverKey ? null : prevKey;
     });
   }, [selectSlots]);
+  handlersRef.current = {
+    clearLongPress,
+    finishSelection,
+    onFreeSlotClick,
+    resetGestureState,
+    selectSlots,
+    showFormPopoverForSlots,
+    startSlotSelection,
+    updateSelectionRange
+  };
   react.useEffect(() => {
     const container = slotsRef.current;
     if (!container) {
       return undefined;
     }
-    const clearTouchState = () => {
-      clearLongPress();
-      if (!draggingRef.current) {
-        slotsRef.current?.classList.remove('schedule-calendar-touch-dragging');
+    const releasePointerCapture = pointerId => {
+      if (pointerId == null || !container.hasPointerCapture?.(pointerId)) {
+        return;
+      }
+      try {
+        container.releasePointerCapture(pointerId);
+      } catch {
+        // Ignore capture release errors on stale pointers.
       }
+    };
+    const clearPendingTouch = () => {
+      handlersRef.current.clearLongPress();
       touchStateRef.current = null;
     };
-    const handleTouchStart = event => {
-      if (event.touches.length !== 1) {
+    const isStillOnSameSlot = (touchState, clientX, clientY) => {
+      const currentIndex = getSlotIndexFromPoint(container, clientX, clientY);
+      return currentIndex === touchState.index;
+    };
+    const shouldCancelPendingGesture = (touchState, clientX, clientY) => {
+      const moveX = Math.abs(clientX - touchState.x);
+      const moveY = Math.abs(clientY - touchState.y);
+      if (moveY > SCROLL_CANCEL_THRESHOLD) {
+        return true;
+      }
+      if (!isStillOnSameSlot(touchState, clientX, clientY)) {
+        return true;
+      }
+      if (!allowMultiSelectRef.current && (moveX > TAP_MOVE_THRESHOLD || moveY > TAP_MOVE_THRESHOLD)) {
+        return true;
+      }
+      return false;
+    };
+    const activateLongPress = touchState => {
+      if (!isStillOnSameSlot(touchState, touchState.lastX, touchState.lastY)) {
+        return;
+      }
+      touchState.longPressed = true;
+      touchState.active = true;
+      clearDocumentTextSelection();
+      try {
+        container.setPointerCapture(touchState.pointerId);
+      } catch {
+        // Continue when capture is unavailable.
+      }
+      slotsRef.current?.classList.add('schedule-calendar-touch-dragging');
+      handlersRef.current.startSlotSelection(touchState.slot, touchState.index, {
+        showPopover: false,
+        lockScroll: true
+      });
+    };
+    const handlePointerDown = event => {
+      if (event.pointerType === 'mouse' || event.isPrimary === false) {
         return;
       }
-      const touch = event.touches[0];
-      const slotElement = getSlotElementFromTouch(container, touch);
-      if (!slotElement) {
+      const slotElement = event.target?.closest?.('[data-slot-index]');
+      if (!slotElement || !container.contains(slotElement)) {
         return;
       }
       const index = Number(slotElement.getAttribute('data-slot-index'));
@@ -1064,114 +1206,134 @@ const useScheduleSelectionGesture = ({
       if (Number.isNaN(index) || slot?.status !== 'free') {
         return;
       }
-      clearTouchState();
+      handlersRef.current.resetGestureState();
       touchStateRef.current = {
-        identifier: touch.identifier,
-        x: touch.clientX,
-        y: touch.clientY,
+        pointerId: event.pointerId,
+        x: event.clientX,
+        y: event.clientY,
+        lastX: event.clientX,
+        lastY: event.clientY,
         slot,
         index,
         moved: false,
         longPressed: false,
-        active: false
+        active: false,
+        selectionTriggered: false
       };
+      if (!allowMultiSelectRef.current) {
+        return;
+      }
       longPressTimerRef.current = window.setTimeout(() => {
         const touchState = touchStateRef.current;
-        if (!touchState) {
+        if (!touchState || touchState.pointerId !== event.pointerId || touchState.moved) {
           return;
         }
-        touchState.longPressed = true;
-        touchState.active = true;
-        slotsRef.current?.classList.add('schedule-calendar-touch-dragging');
-        startSlotSelection(slot, index, {
-          showPopover: false
-        });
+        activateLongPress(touchState);
         longPressTimerRef.current = null;
       }, LONG_PRESS_DELAY);
     };
-    const handleTouchMove = event => {
+    const handlePointerMove = event => {
       const touchState = touchStateRef.current;
-      if (!touchState) {
-        return;
-      }
-      const touch = Array.from(event.touches).find(item => item.identifier === touchState.identifier) || event.touches[0];
-      if (!touch) {
+      if (!touchState || event.pointerId !== touchState.pointerId) {
         return;
       }
+      touchState.lastX = event.clientX;
+      touchState.lastY = event.clientY;
       if (!touchState.active) {
-        const moveX = Math.abs(touch.clientX - touchState.x);
-        const moveY = Math.abs(touch.clientY - touchState.y);
-        if (moveX > MOVE_THRESHOLD || moveY > MOVE_THRESHOLD) {
+        if (shouldCancelPendingGesture(touchState, event.clientX, event.clientY)) {
           touchState.moved = true;
-          clearTouchState();
+          clearPendingTouch();
         }
         return;
       }
       event.preventDefault();
-      const slotElement = getSlotElementFromTouch(container, touch);
-      if (!slotElement) {
-        return;
-      }
-      const index = Number(slotElement.getAttribute('data-slot-index'));
-      if (!Number.isNaN(index)) {
-        updateSelectionRange(index);
+      event.stopPropagation();
+      clearDocumentTextSelection();
+      const index = getSlotIndexFromPoint(container, event.clientX, event.clientY);
+      if (index !== null) {
+        handlersRef.current.updateSelectionRange(index);
       }
     };
-    const handleTouchEnd = event => {
+    const handlePointerUp = event => {
       const touchState = touchStateRef.current;
-      if (!touchState) {
-        return;
-      }
-      const touch = Array.from(event.changedTouches || []).find(item => item.identifier === touchState.identifier) || getTouchPoint(event);
-      if (!touch) {
-        clearTouchState();
+      if (!touchState || event.pointerId !== touchState.pointerId) {
         return;
       }
+      releasePointerCapture(event.pointerId);
+      suppressMouseUntilRef.current = Date.now() + 700;
       if (touchState.active) {
         event.preventDefault();
+        touchState.selectionTriggered = true;
+        const index = getSlotIndexFromPoint(container, event.clientX, event.clientY);
+        if (index !== null) {
+          handlersRef.current.updateSelectionRange(index);
+        }
         suppressTriggerUntilRef.current = Date.now() + 500;
-        finishSelection({
+        handlersRef.current.finishSelection({
           fromTouch: true
         });
-        touchStateRef.current = null;
         return;
       }
-      const quickTap = !touchState.longPressed && !touchState.moved;
-      clearTouchState();
+      handlersRef.current.clearLongPress();
+      const quickTap = !touchState.moved && !touchState.longPressed && Math.abs(event.clientX - touchState.x) <= TAP_MOVE_THRESHOLD && Math.abs(event.clientY - touchState.y) <= TAP_MOVE_THRESHOLD && isStillOnSameSlot(touchState, event.clientX, event.clientY);
+      const {
+        slot
+      } = touchState;
+      touchStateRef.current = null;
       if (quickTap) {
+        touchState.selectionTriggered = true;
         suppressTriggerUntilRef.current = Date.now() + 500;
-        selectSlots([touchState.slot]);
-        showFormPopoverForSlots([touchState.slot]);
-        onFreeSlotClick?.(touchState.slot);
+        handlersRef.current.selectSlots([slot]);
+        handlersRef.current.showFormPopoverForSlots([slot]);
+        handlersRef.current.onFreeSlotClick?.(slot);
+        return;
       }
+      handlersRef.current.resetGestureState();
     };
     const handleContextMenu = event => {
-      if (touchStateRef.current || draggingRef.current) {
+      if (touchStateRef.current?.active || draggingRef.current) {
         event.preventDefault();
       }
     };
-    container.addEventListener('touchstart', handleTouchStart, {
+    const handleSelectStart = event => {
+      if (!touchStateRef.current?.active && !draggingRef.current) {
+        return;
+      }
+      event.preventDefault();
+    };
+    const handleTouchMove = event => {
+      if (!draggingRef.current && !touchStateRef.current?.active) {
+        return;
+      }
+      event.preventDefault();
+    };
+    const touchOptions = {
+      passive: false,
+      capture: true
+    };
+    container.addEventListener('pointerdown', handlePointerDown, {
       passive: true
     });
-    container.addEventListener('touchmove', handleTouchMove, {
+    container.addEventListener('pointermove', handlePointerMove, {
       passive: false
     });
-    container.addEventListener('touchend', handleTouchEnd, {
+    container.addEventListener('pointerup', handlePointerUp, {
       passive: false
     });
-    container.addEventListener('touchcancel', handleTouchEnd, {
+    container.addEventListener('pointercancel', handlePointerUp, {
       passive: false
     });
+    container.addEventListener('touchmove', handleTouchMove, touchOptions);
     container.addEventListener('contextmenu', handleContextMenu);
+    container.addEventListener('selectstart', handleSelectStart);
     return () => {
-      clearTouchState();
-      container.removeEventListener('touchstart', handleTouchStart);
-      container.removeEventListener('touchmove', handleTouchMove);
-      container.removeEventListener('touchend', handleTouchEnd);
-      container.removeEventListener('touchcancel', handleTouchEnd);
-      container.removeEventListener('contextmenu', handleContextMenu);
+      releasePointerCapture(touchStateRef.current?.pointerId);
+      handlersRef.current.clearLongPress();
+      handlersRef.current.resetGestureState();
+      longPressTimerRef.current = null;
+      container.removeEventListener('touchmove', handleTouchMove, touchOptions);
     };
-  }, [clearLongPress, finishSelection, onFreeSlotClick, selectSlots, showFormPopoverForSlots, startSlotSelection, updateSelectionRange]);
+  }, []);
   return {
     activePopoverKey,
     dragging,
@@ -1184,6 +1346,8 @@ const useScheduleSelectionGesture = ({
     finishSelection,
     handleMouseDown,
     handleMouseEnter,
+    handleMouseUp,
+    handleMouseLeave,
     handlePopoverOpenChange
   };
 };
@@ -1263,6 +1427,7 @@ const SlotItem = ({
   if (content) {
     const customNode = /*#__PURE__*/jsxRuntime.jsx("div", {
       "data-slot-index": slot.index,
+      "data-slot-status": slot.status,
       onContextMenu: onContextMenu,
       onMouseDown: onMouseDown,
       onPointerDown: onPointerDown,
@@ -1322,19 +1487,10 @@ const SlotItem = ({
     }
     return node;
   };
-  const inner = /*#__PURE__*/jsxRuntime.jsxs("button", {
-    type: "button",
-    className: classNames(style$1['slot-item'], style$1[`slot-${slot.status}`], {
-      [style$1['slot-selected']]: selected
-    }),
-    "data-slot-index": slot.index,
-    disabled: slot.status === 'disabled',
-    onContextMenu: onContextMenu,
-    onMouseDown: onMouseDown,
-    onPointerDown: onPointerDown,
-    onMouseEnter: onMouseEnter,
-    onMouseUp: onMouseUp,
-    onClick: onClick,
+  const slotClassName = classNames(style$1['slot-item'], style$1[`slot-${slot.status}`], {
+    [style$1['slot-selected']]: selected
+  });
+  const slotChildren = /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
       className: style$1['slot-dot']
     }), /*#__PURE__*/jsxRuntime.jsx("span", {
@@ -1358,6 +1514,36 @@ const SlotItem = ({
       children: slot.events.map(event => event.title).join('、')
     }) : null]
   });
+  const slotHandlers = {
+    onContextMenu,
+    onMouseDown,
+    onPointerDown,
+    onMouseEnter,
+    onMouseUp,
+    onClick
+  };
+  const inner = slot.status === 'disabled' ? /*#__PURE__*/jsxRuntime.jsx("button", {
+    type: "button",
+    className: slotClassName,
+    "data-slot-index": slot.index,
+    "data-slot-status": slot.status,
+    disabled: true,
+    onContextMenu: onContextMenu,
+    onMouseDown: onMouseDown,
+    onPointerDown: onPointerDown,
+    onMouseEnter: onMouseEnter,
+    onMouseUp: onMouseUp,
+    onClick: onClick,
+    children: slotChildren
+  }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+    role: "button",
+    tabIndex: 0,
+    className: slotClassName,
+    "data-slot-index": slot.index,
+    "data-slot-status": slot.status,
+    ...slotHandlers,
+    children: slotChildren
+  });
   return wrapWithPopover(inner);
 };
 
@@ -1407,9 +1593,10 @@ const SchedulePanel = ({
     selectedKeys,
     selectSlots,
     slotsRef,
-    finishSelection,
     handleMouseDown,
     handleMouseEnter,
+    handleMouseUp,
+    handleMouseLeave,
     handlePopoverOpenChange
   } = useScheduleSelectionGesture({
     slots,
@@ -1487,8 +1674,8 @@ const SchedulePanel = ({
           [style$1['slots-dragging']]: dragging
         }),
         onScroll: onScroll,
-        onMouseUp: () => finishSelection(),
-        onMouseLeave: () => finishSelection(),
+        onMouseUp: handleMouseUp,
+        onMouseLeave: handleMouseLeave,
         children: [/*#__PURE__*/jsxRuntime.jsx(PanelScrollShadow, {
           visible: scrolled
         }), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -1519,7 +1706,7 @@ const SchedulePanel = ({
               },
               onMouseDown: event => handleMouseDown(event, slot, index),
               onMouseEnter: () => handleMouseEnter(index),
-              onMouseUp: () => finishSelection(),
+              onMouseUp: handleMouseUp,
               onClick: undefined
             }, slot.key);
           })