fix(calendar): prevent duplicate custom component ids (#396)

packages/calendar/src/__test__/custom-date-grid-event.spec.ts

@@ -1,4 +1,3 @@
-/* eslint-disable max-lines */
 import {
   describe,
   expect,
@@ -12,10 +11,6 @@ import CalendarApp from '../calendar.app'
 import { viewWeek } from '../views/week'
 import { spy } from 'sinon'
 import { getFirstEventElement } from './utils'
-import { assertIsDIV } from '../../../../libs/assertions/src'
-
-const getByCCID = (id: string) =>
-  document.querySelector(`[data-ccid="custom-date-grid-event-${id}"]`)
 
 describe('CalendarApp', () => {
   afterEach(() => {
@@ -84,7 +79,7 @@ describe('CalendarApp', () => {
         const callSecondArgument = event1.args[1]
         expect(callFirstArgument).toBeInstanceOf(HTMLDivElement)
         const elementCCID = callFirstArgument.dataset.ccid
-        expect(elementCCID).toBe('custom-date-grid-event-1')
+        expect(elementCCID).toMatch(/custom-date-grid-event-\w+$/)
         expect(callSecondArgument.calendarEvent.id).toBe(eventId1)
         expect(callSecondArgument.calendarEvent.title).toBe(eventTitle1)
         expect(callSecondArgument.calendarEvent.start).toBe(eventStart1)
@@ -98,7 +93,7 @@ describe('CalendarApp', () => {
         const callSecondArgument2 = event2.args[1]
         expect(callFirstArgument2).toBeInstanceOf(HTMLDivElement)
         const elementCCID2 = callFirstArgument2.dataset.ccid
-        expect(elementCCID2).toBe('custom-date-grid-event-2')
+        expect(elementCCID2).toMatch(/custom-date-grid-event-\w+$/)
         expect(callSecondArgument2.calendarEvent.id).toBe(eventId2)
         expect(callSecondArgument2.calendarEvent.title).toBe(eventTitle2)
         expect(callSecondArgument2.calendarEvent.start).toBe(eventStart2)
@@ -109,7 +104,7 @@ describe('CalendarApp', () => {
         const callSecondArgument3 = event3.args[1]
         expect(callFirstArgument3).toBeInstanceOf(HTMLDivElement)
         const elementCCID3 = callFirstArgument3.dataset.ccid
-        expect(elementCCID3).toBe('custom-date-grid-event-3')
+        expect(elementCCID3).toMatch(/custom-date-grid-event-\w+$/)
         expect(callSecondArgument3.calendarEvent.id).toBe(eventId3)
         expect(callSecondArgument3.calendarEvent.title).toBe(eventTitle3)
         expect(callSecondArgument3.calendarEvent.start).toBe(eventStart3)
@@ -135,47 +130,9 @@ describe('CalendarApp', () => {
       expect(eventEl.style.borderTopRightRadius).toBe('0px')
     })
 
-    it('should have a class for overflow right, signalling that the event extends beyond the week', () => {
-      const eventEl = getByCCID('3')
-      assertIsDIV(eventEl)
-
-      expect(
-        eventEl.classList.contains('sx__date-grid-event--overflow-right')
-      ).toBe(true)
-      expect(
-        eventEl.classList.contains('sx__date-grid-event--overflow-left')
-      ).toBe(false)
-    })
-
-    it('should have a class for overflow left, signalling that the event started before the current week', () => {
-      const eventEl = getByCCID('2')
-      assertIsDIV(eventEl)
-
-      expect(
-        eventEl.classList.contains('sx__date-grid-event--overflow-left')
-      ).toBe(true)
-      expect(
-        eventEl.classList.contains('sx__date-grid-event--overflow-right')
-      ).toBe(false)
-    })
-
     it('should have 0 padding', () => {
       const eventEl = getFirstEventElement(calendarEl)
       expect(eventEl.style.padding).toBe('0px')
     })
-
-    it('should not subtract any event width for overflow', () => {
-      const event1 = getByCCID('1')
-      assertIsDIV(event1)
-      expect(event1.style.width).toBe('calc(100% - 2px)')
-
-      const event2 = getByCCID('2')
-      assertIsDIV(event2)
-      expect(event2.style.width).toBe('calc(300% - 2px)')
-
-      const event3 = getByCCID('3')
-      assertIsDIV(event3)
-      expect(event3.style.width).toBe('calc(500% - 2px)')
-    })
   })
 })

packages/calendar/src/__test__/custom-time-grid-event.spec.ts

@@ -56,7 +56,7 @@ describe('CalendarApp', () => {
         const callSecondArgument = singleCall.args[1]
         expect(callFirstArgument).toBeInstanceOf(HTMLDivElement)
         const elementCCID = callFirstArgument.dataset.ccid
-        expect(elementCCID).toBe('custom-time-grid-event-1')
+        expect(elementCCID).toMatch(/^custom-time-grid-event-\w+$/)
         expect(callSecondArgument.calendarEvent.id).toBe(eventId)
         expect(callSecondArgument.calendarEvent.title).toBe(eventTitle)
         expect(callSecondArgument.calendarEvent.start).toBe(eventStart)

packages/calendar/src/components/week-grid/__test__/date-grid-event/style.spec.tsx

@@ -98,13 +98,25 @@ describe('styles of DateGridEvent', () => {
       const event = getEventByText(eventWithOverflowLeftTitle)
 
       expect(event.style.width).toBe('calc(200% - 12px)')
+      expect(
+        event.classList.contains('sx__date-grid-event--overflow-left')
+      ).toBe(true)
+      expect(
+        event.classList.contains('sx__date-grid-event--overflow-right')
+      ).toBe(false)
     })
 
     it('should subtract 20px extra from width to make room for overflow indicators', () => {
       renderComponent($app, eventWithOverflowBothId, 7)
       const event = getEventByText(eventWithOverflowBothTitle)
 
       expect(event.style.width).toBe('calc(700% - 22px)')
+      expect(
+        event.classList.contains('sx__date-grid-event--overflow-right')
+      ).toBe(true)
+      expect(
+        event.classList.contains('sx__date-grid-event--overflow-left')
+      ).toBe(true)
     })
 
     it('should have 0 border radius on left side', () => {

packages/calendar/src/components/week-grid/date-grid-event.tsx

@@ -18,6 +18,7 @@ import { getEventCoordinates } from '@schedule-x/shared/src/utils/stateless/dom/
 import { isUIEventTouchEvent } from '@schedule-x/shared/src/utils/stateless/dom/is-touch-event'
 import { getTimeStamp } from '@schedule-x/shared/src/utils/stateless/time/date-time-localization/get-time-stamp'
 import { ResizePlugin } from '@schedule-x/shared/src/interfaces/resize/resize-plugin.interface'
+import { randomStringId } from '@schedule-x/shared/src/utils/stateless/strings/random'
 
 type props = {
   calendarEvent: CalendarEventInternal
@@ -70,7 +71,7 @@ export default function DateGridEvent({
 
   const customComponent = $app.config._customComponentFns.dateGridEvent
   let customComponentId = customComponent
-    ? 'custom-date-grid-event-' + calendarEvent.id
+    ? 'custom-date-grid-event-' + randomStringId() // needs a unique string to support event recurrence
     : undefined
   if (isCopy && customComponentId) customComponentId += '-copy'
 
@@ -98,10 +99,9 @@ export default function DateGridEvent({
     'sx__date-grid-event',
     'sx__date-grid-cell',
   ]
-  if (isCopy) eventClasses.push(' sx__date-grid-event--copy')
-  if (hasOverflowLeft) eventClasses.push(' sx__date-grid-event--overflow-left')
-  if (hasOverflowRight)
-    eventClasses.push(' sx__date-grid-event--overflow-right')
+  if (isCopy) eventClasses.push('sx__date-grid-event--copy')
+  if (hasOverflowLeft) eventClasses.push('sx__date-grid-event--overflow-left')
+  if (hasOverflowRight) eventClasses.push('sx__date-grid-event--overflow-right')
 
   const borderLeftNonCustom = hasOverflowLeft
     ? 'none'

packages/calendar/src/components/week-grid/time-grid-event-utils.tsx

@@ -1,13 +1,12 @@
-import { CalendarEventInternal } from '@schedule-x/shared/src/interfaces/calendar/calendar-event.interface'
 import { CustomComponentFn } from '@schedule-x/shared/src/interfaces/calendar/calendar-config'
+import { randomStringId } from '@schedule-x/shared/src/utils/stateless/strings/random'
 
 export const getCCID = (
   customComponent: CustomComponentFn | undefined,
-  calendarEvent: CalendarEventInternal,
   isCopy: boolean | undefined
 ) => {
   let customComponentId = customComponent
-    ? 'custom-time-grid-event-' + calendarEvent.id
+    ? 'custom-time-grid-event-' + randomStringId() // needs a unique string to support event recurrence
     : undefined
   if (customComponentId && isCopy) customComponentId += '-' + 'copy'
   return customComponentId

packages/calendar/src/components/week-grid/time-grid-event.tsx

@@ -86,7 +86,7 @@ export default function TimeGridEvent({
   }
 
   const customComponent = $app.config._customComponentFns.timeGridEvent
-  const customComponentId = getCCID(customComponent, calendarEvent, isCopy)
+  const customComponentId = getCCID(customComponent, isCopy)
 
   useEffect(() => {
     if (!customComponent) return

packages/calendar/src/views/month-grid/components/month-grid-event.tsx

@@ -50,7 +50,7 @@ export default function MonthGridEvent({
 
   const customComponent = $app.config._customComponentFns.monthGridEvent
   const customComponentId = customComponent
-    ? 'custom-month-grid-event-' + randomStringId()
+    ? 'custom-month-grid-event-' + randomStringId() // needs a unique string to support event recurrence
     : undefined
 
   useEffect(() => {