Pr/959 (#985)

* Now adding a new class to the dragged event

( rbc-addons-dnd-drag-dragged-event )

* Renamed the dragging style to rbc-addons-dnd-dragged-event

* Removed touch-action: manipulation

* Fixed lint errors

* tweak

examples/App.js

@@ -117,13 +117,18 @@ class Example extends React.Component {
                     </strong>
                   </a>
                 </div>
-                <Dropdown className="examples--dropdown" pullRight>
+                <Dropdown
+                  pullRight
+                  id="examples-dropdown"
+                  className="examples--dropdown"
+                >
                   <Dropdown.Toggle bsStyle="link" className="dropdown--toggle ">
                     {EXAMPLES[selected]}
                   </Dropdown.Toggle>
                   <Dropdown.Menu>
                     {Object.entries(EXAMPLES).map(([key, title]) => (
                       <MenuItem
+                        key={key}
                         href={`#${key}`}
                         onClick={() => this.select(key)}
                       >

src/DayColumn.js

@@ -160,7 +160,7 @@ class DayColumn extends React.Component {
       events,
       accessors,
       slotMetrics,
-      minimumStartDifference: Math.ceil((step * timeslots) / 2),
+      minimumStartDifference: Math.ceil(step * timeslots / 2),
     })
 
     return styledEvents.map(({ event, style }, idx) => {

src/EventEndingRow.js

@@ -20,10 +20,7 @@ class EventEndingRow extends React.Component {
   }
 
   render() {
-    let {
-      segments,
-      slotMetrics: { slots },
-    } = this.props
+    let { segments, slotMetrics: { slots } } = this.props
     let rowSegments = eventLevels(segments).levels[0]
 
     let current = 1,

src/EventRow.js

@@ -12,11 +12,7 @@ class EventRow extends React.Component {
     ...EventRowMixin.defaultProps,
   }
   render() {
-    let {
-      segments,
-      slotMetrics: { slots },
-      className,
-    } = this.props
+    let { segments, slotMetrics: { slots }, className } = this.props
 
     let lastEnd = 1
 

src/EventRowMixin.js

@@ -58,7 +58,7 @@ export default {
   },
 
   renderSpan(slots, len, key, content = ' ') {
-    let per = (Math.abs(len) / slots) * 100 + '%'
+    let per = Math.abs(len) / slots * 100 + '%'
 
     return (
       <div

src/TimeGridEvent.js

@@ -38,8 +38,8 @@ function TimeGridEvent(props) {
   return (
     <EventWrapper type="time" {...props}>
       <div
-        onClick={props.onClick}
-        onDoubleClick={props.onDoubleClick}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
         style={{
           ...userProps.style,
           top: `${top}%`,

src/Toolbar.js

@@ -14,10 +14,7 @@ class Toolbar extends React.Component {
   }
 
   render() {
-    let {
-      localizer: { messages },
-      label,
-    } = this.props
+    let { localizer: { messages }, label } = this.props
 
     return (
       <div className="rbc-toolbar">

src/addons/dragAndDrop/EventWrapper.js

@@ -68,46 +68,51 @@ class EventWrapper extends React.Component {
   }
 
   render() {
-    let { children, event, type, continuesPrior, continuesAfter } = this.props
+    const { event, type, continuesPrior, continuesAfter } = this.props
+
+    let { children } = this.props
 
     if (event.__isPreview)
       return React.cloneElement(children, {
         className: cn(children.props.className, 'rbc-addons-dnd-drag-preview'),
       })
 
-    let { draggableAccessor, resizableAccessor } = this.context
+    const { draggableAccessor, resizableAccessor, draggable } = this.context
 
-    let isDraggable = draggableAccessor ? !!get(event, draggableAccessor) : true
+    const isDraggable = draggableAccessor
+      ? !!get(event, draggableAccessor)
+      : true
 
     /* Event is not draggable, no need to wrap it */
     if (!isDraggable) {
       return children
     }
 
-    let StartAnchor = null,
-      EndAnchor = null
+    let StartAnchor = null
+    let EndAnchor = null
 
     /*
-     * The resizability of events depends on whether they are
-     * allDay events and how they are displayed.
-     *
-     * 1. If the event is being shown in an event row (because
-     * it is an allDay event shown in the header row or because as
-     * in month view the view is showing all events as rows) then we
-     * allow east-west resizing.
-     *
-     * 2. Otherwise the event is being displayed
-     * normally, we can drag it north-south to resize the times.
-     *
-     * See `DropWrappers` for handling of the drop of such events.
-     *
-     * Notwithstanding the above, we never show drag anchors for
-     * events which continue beyond current component. This happens
-     * in the middle of events when showMultiDay is true, and to
-     * events at the edges of the calendar's min/max location.
-     */
-
-    let isResizable = resizableAccessor ? !!get(event, resizableAccessor) : true
+ * The resizability of events depends on whether they are
+ * allDay events and how they are displayed.
+ *
+ * 1. If the event is being shown in an event row (because
+ * it is an allDay event shown in the header row or because as
+ * in month view the view is showing all events as rows) then we
+ * allow east-west resizing.
+ *
+ * 2. Otherwise the event is being displayed
+ * normally, we can drag it north-south to resize the times.
+ *
+ * See `DropWrappers` for handling of the drop of such events.
+ *
+ * Notwithstanding the above, we never show drag anchors for
+ * events which continue beyond current component. This happens
+ * in the middle of events when showMultiDay is true, and to
+ * events at the edges of the calendar's min/max location.
+ */
+    const isResizable = resizableAccessor
+      ? !!get(event, resizableAccessor)
+      : true
 
     if (isResizable) {
       if (type === 'date') {
@@ -119,25 +124,39 @@ class EventWrapper extends React.Component {
       }
 
       /*
-      * props.children is the singular <Event> component.
-      * BigCalendar positions the Event abolutely and we
-      * need the anchors to be part of that positioning.
-      * So we insert the anchors inside the Event's children
-      * rather than wrap the Event here as the latter approach
-      * would lose the positioning.
-      */
-      children = React.cloneElement(children, {
+  * props.children is the singular <Event> component.
+  * BigCalendar positions the Event abolutely and we
+  * need the anchors to be part of that positioning.
+  * So we insert the anchors inside the Event's children
+  * rather than wrap the Event here as the latter approach
+  * would lose the positioning.
+  */
+      const newProps = {
         onMouseDown: this.handleStartDragging,
         onTouchStart: this.handleStartDragging,
         // replace original event child with anchor-embellished child
+
         children: (
           <div className="rbc-addons-dnd-resizable">
             {StartAnchor}
             {children.props.children}
             {EndAnchor}
           </div>
         ),
-      })
+      }
+
+      if (
+        draggable.dragAndDropAction.interacting && // if an event is being dragged right now
+        draggable.dragAndDropAction.event === event // and it's the current event
+      ) {
+        // add a new class to it
+        newProps.className = cn(
+          children.props.className,
+          'rbc-addons-dnd-dragged-event'
+        )
+      }
+
+      children = React.cloneElement(children, newProps)
     }
 
     return children

src/addons/dragAndDrop/styles.less

@@ -11,11 +11,6 @@
     right: 0;
   }
 
-  .rbc-addons-dnd-dragging {
-    opacity: .25;
-    touch-action: manipulation;
-  }
-
 
   .rbc-addons-dnd-over {
     background-color: rgba(
@@ -34,7 +29,11 @@
     }
   }
 
-  &.rbc-addons-dnd-is-dragging .rbc-event:not(.rbc-addons-dnd-dragging):not(.rbc-addons-dnd-drag-preview) {
+  .rbc-addons-dnd-dragged-event {
+    opacity: 0;
+  }
+
+  &.rbc-addons-dnd-is-dragging .rbc-event:not(.rbc-addons-dnd-dragged-event):not(.rbc-addons-dnd-drag-preview) {
     opacity: .50;
   }
 

src/utils/TimeSlots.js

@@ -104,7 +104,7 @@ export function getSlotMetrics({ min: start, max: end, step, timeslots }) {
       if (dates.lt(date, start, 'minutes')) return slots[0]
 
       const diffMins = dates.diff(start, date, 'minutes')
-      return slots[(diffMins - (diffMins % step)) / step + offset]
+      return slots[(diffMins - diffMins % step) / step + offset]
     },
 
     startsBeforeDay(date) {
@@ -129,11 +129,11 @@ export function getSlotMetrics({ min: start, max: end, step, timeslots }) {
 
       const rangeStartMin = positionFromDate(rangeStart)
       const rangeEndMin = positionFromDate(rangeEnd)
-      const top = (rangeStartMin / totalMin) * 100
+      const top = rangeStartMin / totalMin * 100
 
       return {
         top,
-        height: (rangeEndMin / totalMin) * 100 - top,
+        height: rangeEndMin / totalMin * 100 - top,
         start: positionFromDate(rangeStart),
         startDate: rangeStart,
         end: positionFromDate(rangeEnd),