fix react-hot-loader not working with the package (#648)

fix react-hot-loader not working with the package

Author: Ilaiwi

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+# 0.26.4
+
+* fix `react-calendar-timeline` not working with `react-hot-loader` #607 @ilaiwi + @westn
+
 ## 0.26.3
 
 * add documentation for `onItemDeselect` #350 @ilaiwi

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-timeline",
-  "version": "0.26.3",
+  "version": "0.26.4",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "scripts": {

src/lib/Timeline.js

@@ -8,7 +8,6 @@ import Columns from './columns/Columns'
 import GroupRows from './row/GroupRows'
 import ScrollElement from './scroll/ScrollElement'
 import MarkerCanvas from './markers/MarkerCanvas'
-
 import windowResizeDetector from '../resize-detector/window'
 
 import {
@@ -876,7 +875,15 @@ export default class ReactCalendarTimeline extends Component {
     )
   }
 
-  groups
+  /**
+   * check if child of type TimelineHeader
+   * refer to for explanation https://github.com/gaearon/react-hot-loader#checking-element-types 
+   */
+  isTimelineHeader = (child) => {
+    if(child.type === undefined) return false
+    return child.type.secretKey ===TimelineHeaders.secretKey
+  }
+  
   childrenWithProps(
     canvasTimeStart,
     canvasTimeEnd,
@@ -918,7 +925,7 @@ export default class ReactCalendarTimeline extends Component {
     }
 
     return React.Children.map(childArray, child => {
-      if (child.type !== TimelineHeaders) {
+      if (!this.isTimelineHeader(child)) {
         return React.cloneElement(child, childProps)
       } else {
         return null
@@ -930,7 +937,7 @@ export default class ReactCalendarTimeline extends Component {
     if (this.props.children) {
       let headerRenderer
       React.Children.map(this.props.children, child => {
-        if (child.type === TimelineHeaders) {
+        if (this.isTimelineHeader(child)) {
           headerRenderer = child
         }
       })

src/lib/headers/SidebarHeader.js

@@ -67,4 +67,6 @@ SidebarWrapper.defaultProps = {
   children: ({ getRootProps }) => <div data-testid="sidebarHeader" {...getRootProps()} />
 }
 
+SidebarWrapper.secretKey = "SidebarHeader"
+
 export default SidebarWrapper

src/lib/headers/TimelineHeaders.js

@@ -48,6 +48,15 @@ class TimelineHeaders extends React.Component {
     }
   }
 
+  /**
+   * check if child of type SidebarHeader
+   * refer to for explanation https://github.com/gaearon/react-hot-loader#checking-element-types 
+   */
+  isSidebarHeader = (child) => {
+    if(child.type === undefined) return false
+    return child.type.secretKey ===SidebarHeader.secretKey
+  }
+
   render() {
     let rightSidebarHeader
     let leftSidebarHeader
@@ -56,7 +65,7 @@ class TimelineHeaders extends React.Component {
       ? this.props.children.filter(c => c)
       : [this.props.children]
     React.Children.map(children, child => {
-      if (child.type === SidebarHeader) {
+      if (this.isSidebarHeader(child)) {
         if (child.props.variant === RIGHT_VARIANT) {
           rightSidebarHeader = child
         } else {
@@ -131,4 +140,6 @@ TimelineHeadersWrapper.propTypes = {
   calendarHeaderClassName: PropTypes.string
 }
 
+TimelineHeadersWrapper.secretKey = "TimelineHeaders"
+
 export default TimelineHeadersWrapper