react-native-ll-calendar 0.15.1 → 0.16.0

package/src/calendar/resources-calendar/ResourcesCalendar.tsx

@@ -1,4 +1,10 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  type ReactNode,
+} from 'react';
 import type {
   CalendarEvent,
   CalendarResource,
@@ -8,6 +14,7 @@ import {
   type NativeSyntheticEvent,
   type TextStyle,
   type ViewStyle,
+  Platform,
   RefreshControl,
   ScrollView,
   StyleSheet,
@@ -43,11 +50,18 @@ type ResourcesCalendarProps = {
   bottomSpacing?: number;
   eventTextStyle?: (event: CalendarEvent) => TextStyle;
   eventEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  renderEventOverlay?: (event: CalendarEvent) => ReactNode;
   dateCellContainerStyle?: (date: Date) => ViewStyle;
   cellContainerStyle?: (resource: CalendarResource, date: Date) => ViewStyle;
   hiddenMonth?: boolean;
   allowFontScaling?: boolean;
   resourceNameLayout?: 'fixed-column' | 'inline-band';
+  /**
+   * When true, a transparent layer is placed above events in each cell so
+   * `onPressCell` / `onLongPressCell` receive touches for the full cell area.
+   * Event taps are disabled while this is on (overlay captures the gesture).
+   */
+  prioritizeCellInteraction?: boolean;
 };
 
 const DEFAULT_DATE_COLUMN_WIDTH = 60;
@@ -69,6 +83,7 @@ type ResourceRowProps = {
   eventHeight: number;
   eventTextStyle?: (event: CalendarEvent) => TextStyle;
   eventEllipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  renderEventOverlay?: (event: CalendarEvent) => ReactNode;
   cellContainerStyle?: (resource: CalendarResource, date: Date) => ViewStyle;
   allowFontScaling?: boolean;
   onLayout?: (height: number) => void;
@@ -76,6 +91,7 @@ type ResourceRowProps = {
     scrollOffset: number;
     renderResourceNameLabel?: (resource: CalendarResource) => React.JSX.Element;
   };
+  prioritizeCellInteraction?: boolean;
 };
 
 function ResourceRow({
@@ -92,10 +108,12 @@ function ResourceRow({
   eventHeight,
   eventTextStyle,
   eventEllipsizeMode,
+  renderEventOverlay,
   cellContainerStyle,
   allowFontScaling,
   onLayout,
   inlineBand,
+  prioritizeCellInteraction,
 }: ResourceRowProps) {
   const resourceEvents = eventsByResourceId.get(resource.id) ?? [];
   const eventPosition = new ResourcesCalendarEventPosition();
@@ -169,106 +187,152 @@ function ResourceRow({
             }
           }
 
-          return (
+          const showPrioritizedCellOverlay =
+            prioritizeCellInteraction === true &&
+            (onPressCell != null || onLongPressCell != null);
+
+          const cellWrapperStyle = [
+            styles.contentCellContainer,
+            { width: dateColumnWidth },
+            { zIndex: dates.length - dateIndex },
+          ];
+
+          const eventRows = cellEvents.map((event, rowIndex) => {
+            if (typeof event === 'number') {
+              return (
+                <View
+                  key={`spacer-${rowIndex}`}
+                  style={{
+                    height: eventHeight,
+                    marginBottom: EVENT_GAP,
+                  }}
+                />
+              );
+            }
+
+            const rawStartDjs = dayjs(event.start);
+            const startDjs = dateIndex === 0 ? djs : dayjs(event.start);
+            const endDjs = dayjs(event.end);
+            const diffDays = endDjs
+              .startOf('day')
+              .diff(startDjs.startOf('day'), 'day');
+            const isPrevDateEvent =
+              dateIndex === 0 && rawStartDjs.isBefore(djs);
+
+            // Calculate event width based on the number of days it spans
+            let width =
+              (diffDays + 1) * dateColumnWidth -
+              EVENT_GAP * 2 -
+              CELL_BORDER_WIDTH * 2;
+            if (isPrevDateEvent) {
+              width += EVENT_GAP + 1;
+            }
+
+            // Record position info
+            eventPosition.push({
+              resourceId: resource.id,
+              startDate: startDjs.toDate(),
+              days: diffDays + 1,
+              rowNum: rowIndex + 1,
+            });
+
+            const eventOverlayNode = renderEventOverlay?.(event);
+            const showEventOverlay =
+              renderEventOverlay != null &&
+              eventOverlayNode != null &&
+              eventOverlayNode !== false;
+
+            return (
+              <View
+                key={event.id}
+                pointerEvents={showPrioritizedCellOverlay ? 'none' : 'auto'}
+                style={[
+                  styles.eventOuter,
+                  { width, height: eventHeight },
+                  isPrevDateEvent ? styles.prevDateEvent : {},
+                ]}
+              >
+                <TouchableOpacity
+                  data-component-name="resources-calendar-event"
+                  style={[
+                    styles.event,
+                    {
+                      backgroundColor: event.backgroundColor,
+                      borderColor: event.borderColor,
+                      ...(event.borderStyle !== undefined && {
+                        borderStyle: event.borderStyle,
+                      }),
+                      ...(event.borderWidth !== undefined && {
+                        borderWidth: event.borderWidth,
+                      }),
+                      ...(event.borderRadius !== undefined && {
+                        borderRadius: event.borderRadius,
+                      }),
+                    },
+                  ]}
+                  onPress={() => onPressEvent?.(event)}
+                  onLongPress={() => onLongPressEvent?.(event)}
+                  delayLongPress={delayLongPressEvent}
+                >
+                  <Text
+                    numberOfLines={1}
+                    ellipsizeMode={eventEllipsizeMode ?? 'tail'}
+                    allowFontScaling={allowFontScaling}
+                    style={[
+                      styles.eventTitle,
+                      { color: event.color },
+                      eventTextStyle?.(event),
+                    ]}
+                  >
+                    {event.title}
+                  </Text>
+                </TouchableOpacity>
+                {showEventOverlay ? (
+                  <View
+                    style={styles.eventOverlayHost}
+                    pointerEvents="box-none"
+                  >
+                    {eventOverlayNode}
+                  </View>
+                ) : null}
+              </View>
+            );
+          });
+
+          const cellInner = (
+            <>
+              <View
+                style={[
+                  styles.contentCellContainerInner,
+                  cellContainerStyle?.(resource, date),
+                ]}
+              />
+              {eventRows}
+            </>
+          );
+
+          return showPrioritizedCellOverlay ? (
+            <View key={date.getTime()} style={cellWrapperStyle}>
+              {cellInner}
+              <TouchableOpacity
+                accessible={false}
+                style={styles.cellInteractionOverlay}
+                activeOpacity={1}
+                onPress={() => onPressCell?.(resource, date)}
+                onLongPress={() => onLongPressCell?.(resource, date)}
+                delayLongPress={delayLongPressCell}
+              />
+            </View>
+          ) : (
             <TouchableOpacity
               key={date.getTime()}
-              style={[
-                styles.contentCellContainer,
-                { width: dateColumnWidth },
-                { zIndex: dates.length - dateIndex },
-              ]}
+              style={cellWrapperStyle}
               onPress={() => onPressCell?.(resource, date)}
               onLongPress={() => onLongPressCell?.(resource, date)}
               delayLongPress={delayLongPressCell}
               activeOpacity={1}
             >
-              <View
-                style={[
-                  styles.contentCellContainerInner,
-                  cellContainerStyle?.(resource, date),
-                ]}
-              />
-              {cellEvents.map((event, rowIndex) => {
-                if (typeof event === 'number') {
-                  return (
-                    <View
-                      key={`spacer-${rowIndex}`}
-                      style={{
-                        height: eventHeight,
-                        marginBottom: EVENT_GAP,
-                      }}
-                    />
-                  );
-                }
-
-                const rawStartDjs = dayjs(event.start);
-                const startDjs = dateIndex === 0 ? djs : dayjs(event.start);
-                const endDjs = dayjs(event.end);
-                const diffDays = endDjs
-                  .startOf('day')
-                  .diff(startDjs.startOf('day'), 'day');
-                const isPrevDateEvent =
-                  dateIndex === 0 && rawStartDjs.isBefore(djs);
-
-                // Calculate event width based on the number of days it spans
-                let width =
-                  (diffDays + 1) * dateColumnWidth -
-                  EVENT_GAP * 2 -
-                  CELL_BORDER_WIDTH * 2;
-                if (isPrevDateEvent) {
-                  width += EVENT_GAP + 1;
-                }
-
-                // Record position info
-                eventPosition.push({
-                  resourceId: resource.id,
-                  startDate: startDjs.toDate(),
-                  days: diffDays + 1,
-                  rowNum: rowIndex + 1,
-                });
-
-                return (
-                  <TouchableOpacity
-                    data-component-name="resources-calendar-event"
-                    key={event.id}
-                    style={[
-                      styles.event,
-                      {
-                        backgroundColor: event.backgroundColor,
-                        borderColor: event.borderColor,
-                        width,
-                        height: eventHeight,
-                        ...(event.borderStyle !== undefined && {
-                          borderStyle: event.borderStyle,
-                        }),
-                        ...(event.borderWidth !== undefined && {
-                          borderWidth: event.borderWidth,
-                        }),
-                        ...(event.borderRadius !== undefined && {
-                          borderRadius: event.borderRadius,
-                        }),
-                      },
-                      isPrevDateEvent ? styles.prevDateEvent : {},
-                    ]}
-                    onPress={() => onPressEvent?.(event)}
-                    onLongPress={() => onLongPressEvent?.(event)}
-                    delayLongPress={delayLongPressEvent}
-                  >
-                    <Text
-                      numberOfLines={1}
-                      ellipsizeMode={eventEllipsizeMode ?? 'tail'}
-                      allowFontScaling={allowFontScaling}
-                      style={[
-                        styles.eventTitle,
-                        { color: event.color },
-                        eventTextStyle?.(event),
-                      ]}
-                    >
-                      {event.title}
-                    </Text>
-                  </TouchableOpacity>
-                );
-              })}
+              {cellInner}
             </TouchableOpacity>
           );
         })}
@@ -421,6 +485,7 @@ export function ResourcesCalendar(props: ResourcesCalendarProps) {
     eventHeight: props.eventHeight ?? DEFAULT_EVENT_HEIGHT,
     eventTextStyle: props.eventTextStyle,
     eventEllipsizeMode: props.eventEllipsizeMode,
+    renderEventOverlay: props.renderEventOverlay,
     cellContainerStyle: props.cellContainerStyle,
     allowFontScaling: props.allowFontScaling,
     inlineBand: isInlineBand
@@ -429,6 +494,7 @@ export function ResourcesCalendar(props: ResourcesCalendarProps) {
           renderResourceNameLabel: props.renderResourceNameLabel,
         }
       : undefined,
+    prioritizeCellInteraction: props.prioritizeCellInteraction,
   };
 
   const resourceNameColumn = !isInlineBand ? (
@@ -696,6 +762,15 @@ const styles = StyleSheet.create({
     right: 0,
     bottom: 0,
   },
+  cellInteractionOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 1000,
+    backgroundColor: 'transparent',
+    ...Platform.select({
+      android: { elevation: 12 },
+      default: {},
+    }),
+  },
   container: {
     flex: 1,
     flexDirection: 'row',
@@ -739,14 +814,24 @@ const styles = StyleSheet.create({
     fontSize: 12,
     color: 'black',
   },
+  eventOuter: {
+    position: 'relative',
+    marginTop: EVENT_GAP,
+    marginLeft: EVENT_GAP,
+  },
   event: {
+    flex: 1,
+    width: '100%',
+    height: '100%',
     borderWidth: 0.5,
     borderRadius: 4,
     paddingHorizontal: 4,
     flexDirection: 'row',
     alignItems: 'center',
-    marginTop: EVENT_GAP,
-    marginLeft: EVENT_GAP,
+  },
+  eventOverlayHost: {
+    ...StyleSheet.absoluteFillObject,
+    pointerEvents: 'box-none',
   },
   prevDateEvent: {
     marginLeft: -1,

package/src/index.tsx

@@ -1,6 +1,8 @@
 export { MonthCalendar } from './calendar/month-calendar/MonthCalendar';
+export { MonthCalendarEventOverlay } from './calendar/month-calendar/view/MonthCalendarEventOverlay';
 export type { CalendarEvent } from './types/month-calendar';
 export type { MonthCalendarRef } from './calendar/month-calendar/MonthCalendar';
+export type { MonthCalendarEventOverlayPosition } from './calendar/month-calendar/view/MonthCalendarEventOverlay';
 
 export { ResourcesCalendar } from './calendar/resources-calendar/ResourcesCalendar';
 export type {