Undefined classnames in TimelineHeaders (#586)

Undefined classnames in TimelineHeaders

Author: Ilaiwi

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+## 0.25.3
+
+- Fixed the `undefined` classnames in TimelineHeaders #566 @trevdor
+
 ## 0.25.2
 
 - Fixed the auto-scroll right bug in a scaled browser. #528 @cw196

__tests__/components/Headers/TimelineHeader.test.js

@@ -68,13 +68,27 @@ describe('TimelineHeader', () => {
     expect(getByTestId('headerContainer')).toHaveClass('testClassName')
   })
 
+  it('Given TimelineHeader When no calendarHeaderClassName specified Then undefined should not be applied to the date header container', () => {
+    const { getByTestId } = renderTimelineWithLeftAndRightSidebar({
+      calendarHeaderClassName: undefined
+    })
+    expect(getByTestId('headerContainer')).not.toHaveClass('undefined')
+  })
+
   it('Given TimelineHeader When pass className Then it should be applied to the root header container', () => {
     const { getByTestId } = renderTimelineWithLeftAndRightSidebar({
       className: 'testClassName'
     })
     expect(getByTestId('headerRootDiv')).toHaveClass('testClassName')
   })
 
+  it('Given TimelineHeader When no className specified Then undefined should not be applied to the root header container', () => {
+    const { getByTestId } = renderTimelineWithLeftAndRightSidebar({
+      className: undefined
+    })
+    expect(getByTestId('headerRootDiv')).not.toHaveClass('undefined')
+  })
+
   it('Given TimelineHeader When rendered Then it should render the default styles of the date header container', () => {
     const { getByTestId } = renderTimelineWithLeftAndRightSidebar()
     const headerContainer = getByTestId('headerContainer')
@@ -116,15 +130,16 @@ describe('TimelineHeader', () => {
     expect(getAllByTestId('sidebarHeader')).toHaveLength(1)
   })
   it('Given SidebarHeader When passing variant prop with right value Then it should rendered above the right sidebar', () => {
-    const { getByTestId, getAllByTestId, debug } = renderSidebarHeaderWithCustomValues(
-      { variant: 'right' }
-    )
+    const {
+      getByTestId,
+      getAllByTestId,
+      debug
+    } = renderSidebarHeaderWithCustomValues({ variant: 'right' })
     expect(getByTestId('sidebarHeader')).toBeInTheDocument()
     expect(getAllByTestId('sidebarHeader')).toHaveLength(2)
-    expect(getAllByTestId('sidebarHeader')[1].previousElementSibling).toHaveAttribute(
-      'data-testid',
-      'headerContainer'
-    )
+    expect(
+      getAllByTestId('sidebarHeader')[1].previousElementSibling
+    ).toHaveAttribute('data-testid', 'headerContainer')
   })
 
   it('Given SidebarHeader When passing variant prop with unusual value Then it should rendered above the left sidebar by default', () => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-timeline",
-  "version": "0.25.1",
+  "version": "0.25.2",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "scripts": {
@@ -112,6 +112,7 @@
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "1.7.0",
     "babel-preset-react": "^6.5.0",
+    "classnames": "^2.2.6",
     "cross-env": "^5.1.4",
     "css-loader": "~0.26.0",
     "enzyme": "^3.3.0",

src/lib/headers/TimelineHeaders.js

@@ -1,18 +1,20 @@
 import React from 'react'
+import classNames from 'classnames'
 import { TimelineHeadersConsumer } from './HeadersContext'
 import PropTypes from 'prop-types'
 import SidebarHeader from './SidebarHeader'
-import { RIGHT_VARIANT, LEFT_VARIANT } from './constants'
+import { RIGHT_VARIANT } from './constants'
 class TimelineHeaders extends React.Component {
   static propTypes = {
     registerScroll: PropTypes.func.isRequired,
     leftSidebarWidth: PropTypes.number.isRequired,
     rightSidebarWidth: PropTypes.number.isRequired,
     style: PropTypes.object,
+    children: PropTypes.node,
     className: PropTypes.string,
     calendarHeaderStyle: PropTypes.object,
     calendarHeaderClassName: PropTypes.string,
-    headerRef: PropTypes.func,
+    headerRef: PropTypes.func
   }
 
   constructor(props) {
@@ -40,8 +42,8 @@ class TimelineHeaders extends React.Component {
     }
   }
 
-  handleRootRef = (element) => {
-    if(this.props.headerRef){
+  handleRootRef = element => {
+    if (this.props.headerRef) {
       this.props.headerRef(element)
     }
   }
@@ -64,24 +66,27 @@ class TimelineHeaders extends React.Component {
         calendarHeaders.push(child)
       }
     })
-    if(!leftSidebarHeader){
-      leftSidebarHeader= <SidebarHeader/>
+    if (!leftSidebarHeader) {
+      leftSidebarHeader = <SidebarHeader />
     }
-    if(!rightSidebarHeader && this.props.rightSidebarWidth){
-      rightSidebarHeader = <SidebarHeader variant="right"/>
+    if (!rightSidebarHeader && this.props.rightSidebarWidth) {
+      rightSidebarHeader = <SidebarHeader variant="right" />
     }
     return (
       <div
         ref={this.handleRootRef}
         data-testid="headerRootDiv"
         style={this.getRootStyle()}
-        className={`rct-header-root ${this.props.className}`}
+        className={classNames('rct-header-root', this.props.className)}
       >
         {leftSidebarHeader}
         <div
           ref={this.props.registerScroll}
           style={this.getCalendarHeaderStyle()}
-          className={`rct-calendar-header ${this.props.calendarHeaderClassName}`}
+          className={classNames(
+            'rct-calendar-header',
+            this.props.calendarHeaderClassName
+          )}
           data-testid="headerContainer"
         >
           {calendarHeaders}
@@ -106,23 +111,24 @@ const TimelineHeadersWrapper = ({
           leftSidebarWidth={leftSidebarWidth}
           rightSidebarWidth={rightSidebarWidth}
           registerScroll={registerScroll}
-          children={children}
           style={style}
           className={className}
           calendarHeaderStyle={calendarHeaderStyle}
           calendarHeaderClassName={calendarHeaderClassName}
-        />
+        >
+          {children}
+        </TimelineHeaders>
       )
     }}
   </TimelineHeadersConsumer>
 )
 
 TimelineHeadersWrapper.propTypes = {
   style: PropTypes.object,
+  children: PropTypes.node,
   className: PropTypes.string,
   calendarHeaderStyle: PropTypes.object,
-  calendarHeaderClassName: PropTypes.string,
-  headerRef: PropTypes.func,
+  calendarHeaderClassName: PropTypes.string
 }
 
 export default TimelineHeadersWrapper