react-yearly-calendar-grid 0.5.13 → 0.6.0

package/dist/index.js

@@ -506,6 +506,11 @@ function YearlyCalendar({
   const [hoveredResizeHandle, setHoveredResizeHandle] = react.useState(null);
   const [hoveredCancelButton, setHoveredCancelButton] = react.useState(false);
   const [hoveredConfirmButton, setHoveredConfirmButton] = react.useState(false);
+  const [touchSelectedEvent, setTouchSelectedEvent] = react.useState(null);
+  const touchLongPressTimer = react.useRef(
+    null
+  );
+  const touchStartPos = react.useRef(null);
   const [rangeSelectionStart, setRangeSelectionStart] = react.useState(null);
   const [rangeSelectionEnd, setRangeSelectionEnd] = react.useState(null);
   const isRangeSelecting = rangeSelectionStart !== null;
@@ -736,7 +741,14 @@ function YearlyCalendar({
           const duration = draggingEvent.endDate.getTime() - draggingEvent.date.getTime();
           newEndDate = new Date(newStartDate.getTime() + duration);
         }
-        onEventMove(draggingEvent, newStartDate, newEndDate);
+        if (newStartDate.getTime() !== draggingEvent.date.getTime()) {
+          setPendingMove({
+            event: draggingEvent,
+            newStartDate,
+            newEndDate,
+            isResize: false
+          });
+        }
       }
       setDragOverCell(null);
       setDragPosition(null);
@@ -765,6 +777,65 @@ function YearlyCalendar({
   const handleCancelMove = react.useCallback(() => {
     setPendingMove(null);
   }, []);
+  const handleTouchStart = react.useCallback(
+    (e, event) => {
+      if (!onEventMove) return;
+      const touch = e.touches[0];
+      touchStartPos.current = { x: touch.clientX, y: touch.clientY };
+      touchLongPressTimer.current = setTimeout(() => {
+        setTouchSelectedEvent(event);
+        touchLongPressTimer.current = null;
+        if (navigator.vibrate) {
+          navigator.vibrate(50);
+        }
+      }, 500);
+    },
+    [onEventMove]
+  );
+  const handleTouchMove = react.useCallback(
+    (e) => {
+      if (touchLongPressTimer.current && touchStartPos.current) {
+        const touch = e.touches[0];
+        const dx = touch.clientX - touchStartPos.current.x;
+        const dy = touch.clientY - touchStartPos.current.y;
+        if (Math.abs(dx) > 10 || Math.abs(dy) > 10) {
+          clearTimeout(touchLongPressTimer.current);
+          touchLongPressTimer.current = null;
+        }
+      }
+    },
+    []
+  );
+  const handleTouchEnd = react.useCallback(() => {
+    if (touchLongPressTimer.current) {
+      clearTimeout(touchLongPressTimer.current);
+      touchLongPressTimer.current = null;
+    }
+  }, []);
+  const handleTouchCellTap = react.useCallback(
+    (month, day) => {
+      if (!touchSelectedEvent || !onEventMove) return;
+      const newStartDate = new Date(year, month, day);
+      let newEndDate;
+      if (touchSelectedEvent.endDate) {
+        const duration = touchSelectedEvent.endDate.getTime() - touchSelectedEvent.date.getTime();
+        newEndDate = new Date(newStartDate.getTime() + duration);
+      }
+      if (newStartDate.getTime() !== touchSelectedEvent.date.getTime()) {
+        setPendingMove({
+          event: touchSelectedEvent,
+          newStartDate,
+          newEndDate,
+          isResize: false
+        });
+      }
+      setTouchSelectedEvent(null);
+    },
+    [touchSelectedEvent, year, onEventMove]
+  );
+  const handleCancelTouchSelect = react.useCallback(() => {
+    setTouchSelectedEvent(null);
+  }, []);
   const handleResizeStart = react.useCallback(
     (e, event, edge) => {
       e.stopPropagation();
@@ -778,6 +849,7 @@ function YearlyCalendar({
   );
   const handleResizeDrop = react.useCallback(
     (month, day) => {
+      var _a;
       if (!resizingEvent || !onEventMove) return;
       const { event, edge } = resizingEvent;
       const dropDate = new Date(year, month, day);
@@ -793,7 +865,16 @@ function YearlyCalendar({
         }
       }
       const finalEndDate = newStartDate.getTime() === newEndDate.getTime() ? void 0 : newEndDate;
-      onEventMove(event, newStartDate, finalEndDate);
+      const startChanged = newStartDate.getTime() !== event.date.getTime();
+      const endChanged = (finalEndDate == null ? void 0 : finalEndDate.getTime()) !== ((_a = event.endDate) == null ? void 0 : _a.getTime());
+      if (startChanged || endChanged) {
+        setPendingMove({
+          event,
+          newStartDate,
+          newEndDate: finalEndDate,
+          isResize: true
+        });
+      }
       setResizingEvent(null);
       setDragOverCell(null);
       setDragPosition(null);
@@ -830,6 +911,50 @@ function YearlyCalendar({
     return WEEKDAYS[date.getDay()];
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, style: styles.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        @keyframes touchSelectedPulse {
+          0%, 100% { box-shadow: 0 0 4px rgba(59, 130, 246, 0.6); }
+          50% { box-shadow: 0 0 12px rgba(59, 130, 246, 1); }
+        }
+      ` }),
+    touchSelectedEvent && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          zIndex: 100,
+          backgroundColor: theme.buttonPrimary,
+          color: "#fff",
+          padding: "6px 12px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          fontSize: 13
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: isJa ? `\u300C${touchSelectedEvent.title}\u300D\u3092\u79FB\u52D5\u5148\u306E\u65E5\u4ED8\u3092\u30BF\u30C3\u30D7` : `Tap a date to move "${touchSelectedEvent.title}"` }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: handleCancelTouchSelect,
+              style: {
+                background: "rgba(255,255,255,0.2)",
+                border: "none",
+                color: "#fff",
+                padding: "4px 12px",
+                borderRadius: 4,
+                fontSize: 12,
+                cursor: "pointer"
+              },
+              children: isJa ? "\u30AD\u30E3\u30F3\u30BB\u30EB" : "Cancel"
+            }
+          )
+        ]
+      }
+    ),
     draggingEvent && dragOverCell && dragPosition && (() => {
       const cardTop = dragPosition.y - dragGrabOffsetY;
       const cardBottom = cardTop + dragCardHeight;
@@ -898,7 +1023,16 @@ function YearlyCalendar({
                   cursor: isValidDay ? "pointer" : "default",
                   userSelect: "none"
                 }),
-                onClick: () => isValidDay && !isRangeSelecting && handleCellClick(monthIndex, day),
+                onClick: () => {
+                  if (!isValidDay) return;
+                  if (touchSelectedEvent) {
+                    handleTouchCellTap(monthIndex, day);
+                    return;
+                  }
+                  if (!isRangeSelecting) {
+                    handleCellClick(monthIndex, day);
+                  }
+                },
                 onDoubleClick: () => isValidDay && handleCellDoubleClick(monthIndex, day),
                 onMouseDown: () => isValidDay && handleRangeSelectStart(monthIndex, day),
                 onMouseEnter: () => {
@@ -958,6 +1092,7 @@ function YearlyCalendar({
               const spanDays = displayEndDay - displayStartDay + 1;
               const isInteractive = !draggingEvent && !resizingEvent;
               const isHovered = hoveredEventBar === span.event.id;
+              const isTouchSelected = (touchSelectedEvent == null ? void 0 : touchSelectedEvent.id) === span.event.id;
               return /* @__PURE__ */ jsxRuntime.jsxs(
                 "div",
                 {
@@ -969,10 +1104,12 @@ function YearlyCalendar({
                     backgroundColor: getEventColor(span.event),
                     borderRadius: `${span.isStart ? 4 : 0}px ${span.isStart ? 4 : 0}px ${span.isEnd ? 4 : 0}px ${span.isEnd ? 4 : 0}px`,
                     opacity: isDraggingThis ? 0.3 : 1,
-                    border: isResizingThis ? "2px dashed rgba(255, 255, 255, 0.8)" : "none",
-                    zIndex: isResizingThis ? 30 : isHovered ? 50 : 10,
+                    border: isTouchSelected ? "2px solid rgba(255, 255, 255, 0.9)" : isResizingThis ? "2px dashed rgba(255, 255, 255, 0.8)" : "none",
+                    boxShadow: isTouchSelected ? "0 0 8px rgba(59, 130, 246, 0.8)" : "none",
+                    zIndex: isTouchSelected ? 60 : isResizingThis ? 30 : isHovered ? 50 : 10,
                     filter: isHovered ? "brightness(1.1)" : "none",
-                    pointerEvents: isInteractive ? "auto" : "none"
+                    pointerEvents: isInteractive ? "auto" : "none",
+                    animation: isTouchSelected ? "touchSelectedPulse 1.5s ease-in-out infinite" : "none"
                   }),
                   draggable: true,
                   onDragStart: (e) => handleDragStart(
@@ -982,6 +1119,9 @@ function YearlyCalendar({
                     span.startDay
                   ),
                   onDragEnd: handleDragEnd,
+                  onTouchStart: (e) => handleTouchStart(e, span.event),
+                  onTouchMove: handleTouchMove,
+                  onTouchEnd: handleTouchEnd,
                   onMouseEnter: (e) => {
                     setHoveredEventBar(span.event.id);
                     const rect = e.currentTarget.getBoundingClientRect();
@@ -997,6 +1137,7 @@ function YearlyCalendar({
                   },
                   onClick: (e) => {
                     e.stopPropagation();
+                    if (touchSelectedEvent) return;
                     onEventClick == null ? void 0 : onEventClick(span.event);
                   },
                   children: [