fix: prevent triggering onClick when editing

When you resize or move an event (update) then the onClick is triggered as well.
skedify · May 20, 2019 · 783ab3a · 783ab3a
1 parent 2ac566c
commit 783ab3a
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 16 deletions.
diff --git a/src/components/Calendar/Calendar.js b/src/components/Calendar/Calendar.js
@@ -62,6 +62,10 @@ const DAY_MAP = {
 const DEFAULT_SLOT_HEIGHT = 20;
 const ONE_WEEK = 7;
 
+function hasTimeChanged(start1, end1, start2, end2) {
+  return `${start1}` !== `${start2}` || `${end1}` !== `${end2}`;
+}
+
 class Calendar extends Component {
   static MONDAY = MONDAY;
   static TUESDAY = TUESDAY;
@@ -293,7 +297,10 @@ class Calendar extends Component {
     } else if (isFunction(onEventClick) && !isDirty) {
       // It is the same start & end, so we probably wanted a click...
       onEventClick(event);
-    } else if (canUpdateEvent({ event, start, end })) {
+    } else if (
+      hasTimeChanged(event.start, event.end, start, end) &&
+      canUpdateEvent({ event, start, end })
+    ) {
       // We do have an existing event
       // Let's update it
       onEventUpdate({
@@ -371,7 +378,6 @@ class Calendar extends Component {
       renderGutterItem,
       renderEvent,
       renderPlaceholder,
-      onEventClick,
       daysToRender,
       minTime,
       locale,
@@ -567,7 +573,6 @@ class Calendar extends Component {
                               <Event
                                 key={event.id || eventIndex} // assuming an id exist on the event, if not, use the index
                                 event={event}
-                                onEventClick={onEventClick}
                                 interactionInfo={
                                   event === pseudoEvent &&
                                   event.isPlaceholderEvent

diff --git a/src/components/Calendar/Event.js b/src/components/Calendar/Event.js
@@ -4,15 +4,14 @@ import { isFunction } from '../../utils/isFunction';
 
 import { DragHandle } from './DragHandle';
 
-function EventWrapper({ children, positionTop, height, onEventClick }) {
+function EventWrapper({ children, positionTop, height }) {
   return (
     <div
       className="SkedifyCalendar__EventWrapper"
       style={{
         transform: `translateY(${positionTop}px)`,
         height,
       }}
-      onClick={onEventClick}
     >
       {children}
     </div>
@@ -25,29 +24,20 @@ function EventComponent({
   render,
   positionTop,
   height,
-  onEventClick,
   interactionInfo,
 }) {
   const shouldBeInteractable = isFunction(onActivate);
 
   if (!shouldBeInteractable) {
     return (
-      <EventWrapper
-        onEventClick={() => onEventClick(event)}
-        positionTop={positionTop}
-        height={height}
-      >
+      <EventWrapper positionTop={positionTop} height={height}>
         {render(event, interactionInfo)}
       </EventWrapper>
     );
   }
 
   return (
-    <EventWrapper
-      onEventClick={() => onEventClick(event)}
-      positionTop={positionTop}
-      height={height}
-    >
+    <EventWrapper positionTop={positionTop} height={height}>
       <DragHandle
         placement={DragHandle.PLACEMENT_TOP}
         onActivate={onActivate(event, DragHandle.PLACEMENT_TOP)}