react-native-resource-calendar 1.0.18 → 1.0.20

package/README.md

@@ -42,8 +42,7 @@ react-native-gesture-handler \
 react-native-reanimated \
 react-native-svg \
 @shopify/flash-list \
-@shopify/react-native-skia \
-expo-haptics
+@shopify/react-native-skia 
 ```
 
 If you’re using bare React Native (not Expo), install them manually:
@@ -54,8 +53,18 @@ react-native-gesture-handler \
 react-native-reanimated \
 react-native-svg \
 @shopify/flash-list \
-@shopify/react-native-skia \
-expo-haptics
+@shopify/react-native-skia 
+```
+
+🟦 Optional: Haptics Support (Expo Only)
+
+Haptic feedback is optional.
+If you want to enable vibration feedback when interacting with components, install the Expo Haptics package and set enableHapticFeedback to true in your component config.
+
+📦 Install (Expo)
+
+```bash
+npx expo install expo-haptics
 ```
 
 ---
@@ -264,12 +273,14 @@ The `Calendar` component accepts a flexible set of props for customizing layout,
 | **`snapIntervalInMinutes`** | `number`                                                                                                         | `5`                     | Drag/resize snapping granularity (in minutes).                                                                                                          |
 | **`overLappingLayoutMode`** | `LayoutMode` (`'stacked' \| 'columns'`)                                                                          | `'stacked'`             | Strategy to lay out overlapping events inside a column.                                                                                                 |
 | **`theme`**                 | `CalendarTheme`                                                                                                  | —                       | Typography & palette overrides.                                                                                                                         |
+| **`enableHapticFeedback`**  | `boolean`                                                                                                        | `false`                 | Enable haptic feedback.                                                                                                                                 |
 | **`eventSlots`**            | `EventSlots`                                                                                                     | —                       | Slot renderers to customize event content (e.g. `{ Body, TopRight }`).                                                                                  |
 | **`eventStyleOverrides`**   | `StyleOverrides \| ((event: Event) => StyleOverrides \| undefined)`                                              | —                       | Per-event style override (object or function).                                                                                                          |
 | **`isEventSelected`**       | `(event: Event) => boolean`                                                                                      | `() => false`           | Marks which events are currently selected.                                                                                                              |
 | **`isEventDisabled`**       | `(event: Event) => boolean`                                                                                      | `() => false`           | Marks events as disabled (non-interactive).                                                                                                             |
 | **`onResourcePress`**       | `(resource: Resource) => void`                                                                                   | —                       | Invoked when a resource header is pressed.                                                                                                              |
 | **`onBlockLongPress`**      | `(resource: Resource, date: Date) => void`                                                                       | —                       | Long-press on an empty block (grid).                                                                                                                    |
+| **`onBlockTap`**            | `(resource: Resource, date: Date) => void`                                                                       | —                       | Tap on an empty block (grid).                                                                                                                           |
 | **`onDisabledBlockPress`**  | `(block: DisabledBlock) => void`                                                                                 | —                       | Tap on a disabled block (e.g., lunch).                                                                                                                  |
 | **`onEventPress`**          | `(event: Event) => void`                                                                                         | —                       | Tap on an event.                                                                                                                                        |
 | **`onEventLongPress`**      | `(event: Event) => void`                                                                                         | —                       | Long-press on an event. The calendar also preps internal drag state here.                                                                               |

package/dist/index.d.mts

@@ -86,9 +86,11 @@ interface CalendarProps {
     hourHeight?: number;
     onResourcePress?: (resource: Resource) => void;
     onBlockLongPress?: (resource: Resource, date: Date) => void;
+    onBlockTap?: (resource: Resource, date: Date) => void;
     onDisabledBlockPress?: (block: DisabledBlock) => void;
     onEventPress?: (event: Event) => void;
     onEventLongPress?: (event: Event) => void;
+    enableHapticFeedback?: boolean;
     eventSlots?: EventSlots;
     eventStyleOverrides?: StyleOverrides | ((event: Event) => StyleOverrides | undefined);
     isEventSelected?: FlagFn;

package/dist/index.d.ts

@@ -86,9 +86,11 @@ interface CalendarProps {
     hourHeight?: number;
     onResourcePress?: (resource: Resource) => void;
     onBlockLongPress?: (resource: Resource, date: Date) => void;
+    onBlockTap?: (resource: Resource, date: Date) => void;
     onDisabledBlockPress?: (block: DisabledBlock) => void;
     onEventPress?: (event: Event) => void;
     onEventLongPress?: (event: Event) => void;
+    enableHapticFeedback?: boolean;
     eventSlots?: EventSlots;
     eventStyleOverrides?: StyleOverrides | ((event: Event) => StyleOverrides | undefined);
     isEventSelected?: FlagFn;

package/dist/index.js

@@ -5,7 +5,6 @@ var reactNativeGestureHandler = require('react-native-gesture-handler');
 var Animated2 = require('react-native-reanimated');
 var reactNative = require('react-native');
 var flashList = require('@shopify/flash-list');
-var Haptics = require('expo-haptics');
 var dateFnsTz = require('date-fns-tz');
 var dateFns = require('date-fns');
 var lodash = require('lodash');
@@ -39,7 +38,6 @@ function _interopNamespace(e) {
 
 var React19__namespace = /*#__PURE__*/_interopNamespace(React19);
 var Animated2__default = /*#__PURE__*/_interopDefault(Animated2);
-var Haptics__namespace = /*#__PURE__*/_interopNamespace(Haptics);
 var Svg__default = /*#__PURE__*/_interopDefault(Svg);
 
 // src/components/Calendar.tsx
@@ -747,6 +745,7 @@ function StaffAvatar({
 }
 var EventGridBlocksSkia = ({
   handleBlockPress,
+  handleBlockLongPress,
   hourHeight,
   APPOINTMENT_BLOCK_WIDTH
 }) => {
@@ -788,6 +787,16 @@ var EventGridBlocksSkia = ({
     },
     [handleBlockPress, timeLabels]
   );
+  const onSlotLongPress = React19__namespace.useCallback(
+    (row) => {
+      setPressedRow(null);
+      const slot = timeLabels[row];
+      if (slot) {
+        handleBlockLongPress(slot);
+      }
+    },
+    [timeLabels, handleBlockLongPress]
+  );
   const onPressBegin = React19__namespace.useCallback((row) => {
     setPressedRow(row);
   }, []);
@@ -797,14 +806,31 @@ var EventGridBlocksSkia = ({
   const longPressGesture = reactNativeGestureHandler.Gesture.LongPress().onBegin((e) => {
     "worklet";
     Animated2.runOnJS(onPressBegin)(Math.floor(e.y / rowHeight));
+  }).onTouchesUp(() => {
+    "worklet";
+    Animated2.runOnJS(onTouchesUp)();
+  }).onEnd((e) => {
+    "worklet";
+    Animated2.runOnJS(onSlotLongPress)(Math.floor(e.y / rowHeight));
+  }).onFinalize(() => {
+    "worklet";
+    Animated2.runOnJS(onTouchesUp)();
+  });
+  const tapGesture = reactNativeGestureHandler.Gesture.Tap().onBegin((e) => {
+    "worklet";
+    Animated2.runOnJS(onPressBegin)(Math.floor(e.y / rowHeight));
   }).onEnd((e) => {
     "worklet";
     Animated2.runOnJS(onSlotPress)(Math.floor(e.y / rowHeight));
+  }).onTouchesUp(() => {
+    "worklet";
+    Animated2.runOnJS(onTouchesUp)();
   }).onFinalize(() => {
     "worklet";
     Animated2.runOnJS(onTouchesUp)();
   });
-  return /* @__PURE__ */ React19__namespace.createElement(reactNativeGestureHandler.GestureDetector, { gesture: longPressGesture }, /* @__PURE__ */ React19__namespace.createElement(reactNative.View, null, /* @__PURE__ */ React19__namespace.createElement(reactNativeSkia.Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, firstRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React19__namespace.createElement(React19__namespace.Fragment, { key: idx }, /* @__PURE__ */ React19__namespace.createElement(
+  const composedGesture = reactNativeGestureHandler.Gesture.Race(longPressGesture, tapGesture);
+  return /* @__PURE__ */ React19__namespace.createElement(reactNativeGestureHandler.GestureDetector, { gesture: composedGesture }, /* @__PURE__ */ React19__namespace.createElement(reactNative.View, null, /* @__PURE__ */ React19__namespace.createElement(reactNativeSkia.Canvas, { style: { width: APPOINTMENT_BLOCK_WIDTH, height: segmentHeight } }, firstRects.map(({ x, y, width: w, height: h, row }, idx) => /* @__PURE__ */ React19__namespace.createElement(React19__namespace.Fragment, { key: idx }, /* @__PURE__ */ React19__namespace.createElement(
     reactNativeSkia.Rect,
     {
       x,
@@ -1294,7 +1320,7 @@ var DaysComponent = ({ onResourcePress, activeResourceId, mode, date, APPOINTMEN
           width: APPOINTMENT_BLOCK_WIDTH
         },
         space: 4,
-        key: i
+        key: d.toString()
       },
       /* @__PURE__ */ React19__namespace.createElement(Center_default, { style: {
         backgroundColor: selected ? "#4d959c" : void 0,
@@ -1346,9 +1372,11 @@ var CalendarInner = (props) => {
     resources,
     onResourcePress,
     onBlockLongPress,
+    onBlockTap,
     onEventPress,
     onEventLongPress,
     onDisabledBlockPress,
+    enableHapticFeedback = false,
     eventSlots,
     eventStyleOverrides,
     overLappingLayoutMode = "stacked",
@@ -1437,8 +1465,9 @@ var CalendarInner = (props) => {
   React19.useEffect(() => {
     if (!selectedEvent) {
       setDraggedEventDraft(null);
+      setDragReady(false);
     }
-  }, [selectedEvent]);
+  }, [selectedEvent, setSelectedEvent, setDraggedEventDraft]);
   React19.useEffect(() => {
     scrollX.value = 0;
   }, [mode]);
@@ -1447,6 +1476,7 @@ var CalendarInner = (props) => {
   const flashListRef = React19.useRef(null);
   const prevResourceIdsRef = React19.useRef([]);
   const [layout, setLayout] = React19.useState(null);
+  const [dragReady, setDragReady] = React19.useState(false);
   const dateRef = React19.useRef(date);
   const eventStartedTop = Animated2.useSharedValue(0);
   const eventHeight = Animated2.useSharedValue(0);
@@ -1463,9 +1493,19 @@ var CalendarInner = (props) => {
   const startedX = Animated2.useSharedValue(0);
   const startedY = Animated2.useSharedValue(0);
   const touchY = Animated2.useSharedValue(0);
-  const triggerHaptic = React19.useCallback(() => {
-    Haptics__namespace.impactAsync(Haptics__namespace.ImpactFeedbackStyle.Light);
-  }, []);
+  const triggerHaptic = React19.useCallback(
+    async (style = "Light") => {
+      try {
+        const Haptics = await import('expo-haptics');
+        const feedbackStyle = Haptics.ImpactFeedbackStyle[style];
+        if (enableHapticFeedback)
+          await Haptics.impactAsync(feedbackStyle);
+      } catch (e) {
+        console.log("Haptics not available, skipping...");
+      }
+    },
+    [enableHapticFeedback]
+  );
   const resourceIds = React19.useMemo(() => {
     const ids = resources?.map((item) => item?.id) || [];
     if (JSON.stringify(prevResourceIdsRef.current) !== JSON.stringify(ids)) {
@@ -1626,7 +1666,7 @@ var CalendarInner = (props) => {
       const increment = APPOINTMENT_BLOCK_WIDTH * Math.sign(autoScrollXSpeed.value);
       const newScrollX = scrollX.value + increment;
       Animated2.runOnJS(scrollListTo)(newScrollX);
-      Animated2.runOnJS(Haptics__namespace.impactAsync)(Haptics__namespace.ImpactFeedbackStyle.Medium);
+      Animated2.runOnJS(triggerHaptic)("Medium");
     }
   });
   Animated2.useFrameCallback(() => {
@@ -1660,7 +1700,7 @@ var CalendarInner = (props) => {
     const scrollDiff = Math.abs(newScrollY - lastHapticScrollY.value);
     if (scrollDiff >= snapInterval) {
       lastHapticScrollY.value = newScrollY;
-      Animated2.runOnJS(Haptics__namespace.impactAsync)(Haptics__namespace.ImpactFeedbackStyle.Medium);
+      Animated2.runOnJS(triggerHaptic)("Medium");
     }
   });
   React19.useEffect(() => {
@@ -1693,7 +1733,8 @@ var CalendarInner = (props) => {
       lastHapticScrollY.value = scrollY.value;
       eventHeight.value = initialHeight;
       setSelectedEvent(event);
-      Haptics__namespace.impactAsync(Haptics__namespace.ImpactFeedbackStyle.Medium);
+      requestAnimationFrame(() => setDragReady(true));
+      Animated2.runOnJS(triggerHaptic)("Medium");
     };
   }, []);
   const internalStableOnLongPress = React19.useCallback((e) => {
@@ -1716,22 +1757,30 @@ var CalendarInner = (props) => {
       }
     }
   });
-  const handleBlockPress = React19.useCallback((resourceId, time) => {
-    Haptics__namespace.impactAsync(Haptics__namespace.ImpactFeedbackStyle.Medium);
+  const handleBlockLongPress = React19.useCallback((resourceId, time) => {
+    Animated2.runOnJS(triggerHaptic)("Medium");
     const resource = resources.find((r) => r.id === resourceId);
     if (onBlockLongPress)
       onBlockLongPress(resource, new Date(time));
   }, [resources, onBlockLongPress]);
+  const handleBlockPress = React19.useCallback((resourceId, time) => {
+    Animated2.runOnJS(triggerHaptic)("Medium");
+    const resource = resources.find((r) => r.id === resourceId);
+    if (onBlockTap)
+      onBlockTap(resource, new Date(time));
+  }, [resources, onBlockTap]);
   React19.useEffect(() => {
     const handleOrientationChange = () => {
-      if (selectedEvent)
+      if (selectedEvent) {
         setSelectedEvent(null);
+        setDragReady(false);
+      }
     };
     const subscription = reactNative.Dimensions.addEventListener("change", handleOrientationChange);
     return () => {
       subscription.remove();
     };
-  }, [setSelectedEvent, selectedEvent]);
+  }, [setSelectedEvent, selectedEvent, setDragReady]);
   React19.useEffect(() => {
     dateRef.current = date;
   }, [date]);
@@ -1743,7 +1792,8 @@ var CalendarInner = (props) => {
       {
         hourHeight,
         APPOINTMENT_BLOCK_WIDTH,
-        handleBlockPress: (time) => handleBlockPress(rid, combineDateAndTime(dayDate ?? dateRef.current, time))
+        handleBlockPress: (time) => handleBlockPress(rid, combineDateAndTime(dayDate ?? dateRef.current, time)),
+        handleBlockLongPress: (time) => handleBlockLongPress(rid, combineDateAndTime(dayDate ?? dateRef.current, time))
       }
     ), /* @__PURE__ */ React19__namespace.default.createElement(
       DisabledIntervals_default,
@@ -1890,7 +1940,7 @@ var CalendarInner = (props) => {
         }
       )
     ),
-    selectedEvent && /* @__PURE__ */ React19__namespace.default.createElement(
+    selectedEvent && dragReady && /* @__PURE__ */ React19__namespace.default.createElement(
       DraggableEvent,
       {
         selectedEvent,