0.20.0

0.20.0

Author: Ilaiwi

CHANGELOG.md

@@ -7,6 +7,22 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+### 0.20.0
+
+### improvements
+* eliminate extra renders on every scroll - #357 [acemac](https://github.com/acemac)
+
+### Fixed
+* When the `date` prop on a `CustomMarker` changes the marker will now move on the timeline - #421 [kevinmanncito](https://github.com/kevinmanncito) [ilaiwi](https://github.com/ilaiwi)
+* Header has a bounce effect - #311 [acemac](https://github.com/acemac)
+
+####dev
+
+* update to `react-testing-library` version 5
+* remove deprecated `toBeInDom`
+
+
+
 ### 0.19.0
 
 ### Added

README.md

@@ -540,37 +540,26 @@ let items = [
 
 itemRenderer: ({
   item,
-  timelineContext,
   itemContext,
   getItemProps,
-  getResizeProps,
+  getResizeProps
 }) => {
   const { left: leftResizeProps, right: rightResizeProps } = getResizeProps()
   return (
-    <div
-      {...getItemProps(item.itemProps) }
-    >
-      {itemContext.useResizeHandle && itemContext.showInnerContentsRender ? (
-        <div {...leftResizeProps} />
-      ) : (
-          ''
-        )}
-
-      {itemContext.showInnerContentsRender && <div
+    <div {...getItemProps(item.itemProps)}>
+      {itemContext.useResizeHandle ? <div {...leftResizeProps} /> : ''}
+
+      <div
         className="rct-item-content"
-        style={{maxHeight: `${itemContext.dimensions.height}`}}
+        style={{ maxHeight: `${itemContext.dimensions.height}` }}
       >
         {itemContext.title}
-      </div>}
-
+      </div>
 
-      {itemContext.useResizeHandle && itemContext.showInnerContentsRender ? (
-        <div {...rightResizeProps} />
-      ) : (
-          ''
-        )}
+      {itemContext.useResizeHandle ? <div {...rightResizeProps} /> : ''}
     </div>
-  )
+  )}
+
 }
 ```
 
@@ -787,15 +776,8 @@ You need to include the `Timeline.css` file, either via static file reference or
 
 ## How can I have items with different colors?
 
-[Items](https://github.com/namespace-ee/react-calendar-timeline#items) have a "className" parameter. For example if you have "standard" items and "analysis" items, then you can just add an "analysis" class for your analysis items and then change the css backgroundColor property for them.
-
-You will then need to override the default CSS rule:
-
-```css
-.react-calendar-timeline .rct-items .rct-item.analysis {
-  background-color: #68efad;
-}
-```
+Now you can use item renderer for rendering items with different colors [itemRenderer](https://github.com/namespace-ee/react-calendar-timeline#itemrenderer). 
+Please refer to [examples](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples#custom-item-rendering) for a sandbox example
 
 ## How can I add a sidebar on the right?
 

__tests__/components/Header/Header.test.js

@@ -22,7 +22,7 @@ const defaultProps = {
   stickyHeader: true,
   headerLabelGroupHeight: 15,
   headerLabelHeight: 15,
-  registerScroll: () => {},
+  scrollHeaderRef: () => {},
   headerRef: () => {}
 }
 
@@ -33,6 +33,23 @@ const selectors = {
 
 describe('Header', () => {
   describe('timeline-elements-header', () => {
+    it('accepts scrollHeaderRef callback', () => {
+      const scrollHeaderRef = jest.fn()
+
+      const props = {
+        ...defaultProps,
+        scrollHeaderRef: scrollHeaderRef
+      }
+
+      mount(<Header {...props} />)
+
+      expect(scrollHeaderRef).toHaveBeenCalledTimes(1)
+
+      const mockCallParam = scrollHeaderRef.mock.calls[0][0]
+
+      expect(mockCallParam.dataset.testid).toBe('header')
+    })
+
     it('accepts headerRef callback', () => {
       const headerRefMock = jest.fn()
 

__tests__/components/Header/TimelineElementsHeader.test.js

@@ -16,7 +16,7 @@ const defaultProps = {
   subHeaderLabelFormats: {},
   headerLabelGroupHeight: 0,
   headerLabelHeight: 0,
-  registerScroll: () => {}
+  scrollHeaderRef: () => {}
 }
 
 describe('Header', () => {
@@ -37,42 +37,20 @@ describe('Header', () => {
     expect(mouseDownMock).not.toHaveBeenCalled()
   })
 
-  describe('scroll sync', () => {
-    it('call to registerScroll listener updates scrollLeft of root element', () => {
-      const registerScrollMock = jest.fn()
-      const props = {
-        ...defaultProps,
-        registerScroll: registerScrollMock
-      }
+  it('accepts scrollHeaderRef callback', () => {
+    const scrollHeaderRef = jest.fn()
 
-      const wrapper = mount(<TimelineElementsHeader {...props} />)
+    const props = {
+      ...defaultProps,
+      scrollHeaderRef: scrollHeaderRef
+    }
 
-      expect(wrapper.getDOMNode().scrollLeft).toBe(0)
+    mount(<TimelineElementsHeader {...props} />)
 
-      const scrollListener = registerScrollMock.mock.calls[0][0]
+    expect(scrollHeaderRef).toHaveBeenCalledTimes(1)
 
-      const scrollX = 100
+    const mockCallParam = scrollHeaderRef.mock.calls[0][0]
 
-      scrollListener(scrollX)
-
-      expect(wrapper.getDOMNode().scrollLeft).toBe(scrollX)
-    })
-    it('scrollLeft is not set if scrollX is null', () => {
-      const registerScrollMock = jest.fn()
-      const props = {
-        ...defaultProps,
-        registerScroll: registerScrollMock
-      }
-
-      const wrapper = mount(<TimelineElementsHeader {...props} />)
-
-      expect(wrapper.getDOMNode().scrollLeft).toBe(0)
-
-      const scrollListener = registerScrollMock.mock.calls[0][0]
-
-      scrollListener(undefined)
-
-      expect(wrapper.getDOMNode().scrollLeft).toBe(0)
-    })
+    expect(mockCallParam.dataset.testid).toBe('header')
   })
 })

__tests__/components/Markers/CursorMarker.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, Simulate } from 'react-testing-library'
+import { render, fireEvent, cleanup } from 'react-testing-library'
 import 'jest-dom/extend-expect'
 import TimelineMarkers from 'lib/markers/public/TimelineMarkers'
 import CursorMarker from 'lib/markers/public/CursorMarker'
@@ -14,6 +14,7 @@ import { MarkerCanvasProvider } from 'lib/markers/MarkerCanvasContext'
  */
 
 describe('CursorMarker', () => {
+  afterEach(cleanup)
   const defaultCursorMarkerTestId = 'default-cursor-marker'
   it('renders one', () => {
     const subscribeToMouseOverMock = jest.fn()
@@ -34,7 +35,7 @@ describe('CursorMarker', () => {
       isCursorOverCanvas: true
     })
 
-    expect(getByTestId(defaultCursorMarkerTestId)).toBeInTheDOM()
+    expect(getByTestId(defaultCursorMarkerTestId)).toBeInTheDocument()
   })
 
   it('renders with custom renderer', () => {
@@ -58,7 +59,7 @@ describe('CursorMarker', () => {
       isCursorOverCanvas: true
     })
 
-    expect(getByTestId(customDataIdSelector)).toBeInTheDOM()
+    expect(getByTestId(customDataIdSelector)).toBeInTheDocument()
   })
 
   it('styles.left based on callback leftOffset', () => {
@@ -150,10 +151,10 @@ describe('CursorMarker', () => {
       isCursorOverCanvas: true
     })
 
-    expect(queryByTestId(defaultCursorMarkerTestId)).toBeInTheDOM()
+    expect(queryByTestId(defaultCursorMarkerTestId)).toBeInTheDocument()
 
-    Simulate.click(getByText('Hide Cursor Marker'))
+    fireEvent.click(getByText('Hide Cursor Marker'))
 
-    expect(queryByTestId(defaultCursorMarkerTestId)).not.toBeInTheDOM()
+    expect(queryByTestId(defaultCursorMarkerTestId)).not.toBeInTheDocument()
   })
 })

__tests__/components/Markers/CustomMarker.test.js

@@ -1,11 +1,12 @@
 import React from 'react'
-import { render, Simulate } from 'react-testing-library'
+import { render, fireEvent, cleanup } from 'react-testing-library'
 import 'jest-dom/extend-expect'
 import TimelineMarkers from 'lib/markers/public/TimelineMarkers'
 import CustomMarker from 'lib/markers/public/CustomMarker'
 import { RenderWrapper } from 'test-utility/marker-renderer'
 
 describe('CustomMarker', () => {
+  afterEach(cleanup)
   const defaultCustomMarkerTestId = 'default-customer-marker-id'
   it('renders one', () => {
     const { getByTestId } = render(
@@ -16,7 +17,7 @@ describe('CustomMarker', () => {
       </RenderWrapper>
     )
 
-    expect(getByTestId(defaultCustomMarkerTestId)).toBeInTheDOM()
+    expect(getByTestId(defaultCustomMarkerTestId)).toBeInTheDocument()
   })
   it('render multiple', () => {
     const { queryAllByTestId } = render(
@@ -43,7 +44,7 @@ describe('CustomMarker', () => {
       </RenderWrapper>
     )
 
-    expect(getByTestId(customDataIdSelector)).toBeInTheDOM()
+    expect(getByTestId(customDataIdSelector)).toBeInTheDocument()
   })
 
   it('is passed styles with left corresponding to passed in date', () => {
@@ -110,10 +111,26 @@ describe('CustomMarker', () => {
 
     const { queryByTestId, getByText } = render(<RemoveCustomMarker />)
 
-    expect(queryByTestId(defaultCustomMarkerTestId)).toBeInTheDOM()
+    expect(queryByTestId(defaultCustomMarkerTestId)).toBeInTheDocument()
 
-    Simulate.click(getByText('Hide Custom Marker'))
+    fireEvent.click(getByText('Hide Custom Marker'))
 
-    expect(queryByTestId(defaultCustomMarkerTestId)).not.toBeInTheDOM()
+    expect(queryByTestId(defaultCustomMarkerTestId)).not.toBeInTheDocument()
+  })
+  it('updates marker location after passing new date', ()=>{
+    const { getByTestId, rerender } = render(
+      <RenderWrapper>
+        <TimelineMarkers>
+          <CustomMarker date={1000} />
+        </TimelineMarkers>
+      </RenderWrapper>)
+      const positionLeftBeforeChange = getByTestId(defaultCustomMarkerTestId).style.left
+      rerender(<RenderWrapper>
+        <TimelineMarkers>
+          <CustomMarker date={2000} />
+        </TimelineMarkers>
+      </RenderWrapper>)
+      const positionLeftAfterChange = getByTestId(defaultCustomMarkerTestId).style.left
+      expect(positionLeftBeforeChange).not.toEqual(positionLeftAfterChange)
   })
 })

__tests__/components/Markers/TodayMarker.test.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, Simulate } from 'react-testing-library'
+import { render, fireEvent, cleanup } from 'react-testing-library'
 import 'jest-dom/extend-expect'
 import { RenderWrapper } from 'test-utility/marker-renderer'
 import TimelineMarkers from 'lib/markers/public/TimelineMarkers'
@@ -8,6 +8,7 @@ import TodayMarker from 'lib/markers/public/TodayMarker'
 const defaultTestId = 'default-today-line'
 
 describe('TodayMarker', () => {
+  afterEach(cleanup)
   it('is present', () => {
     const { getByTestId } = render(
       <RenderWrapper>
@@ -17,7 +18,7 @@ describe('TodayMarker', () => {
       </RenderWrapper>
     )
 
-    expect(getByTestId(defaultTestId)).toBeInTheDOM()
+    expect(getByTestId(defaultTestId)).toBeInTheDocument()
   })
 
   it('is removed after initial render', () => {
@@ -44,11 +45,11 @@ describe('TodayMarker', () => {
 
     const { queryByTestId, getByText } = render(<RemoveTodayMarker />)
 
-    expect(queryByTestId(defaultTestId)).toBeInTheDOM()
+    expect(queryByTestId(defaultTestId)).toBeInTheDocument()
 
-    Simulate.click(getByText('Hide Today'))
+    fireEvent.click(getByText('Hide Today'))
 
-    expect(queryByTestId(defaultTestId)).not.toBeInTheDOM()
+    expect(queryByTestId(defaultTestId)).not.toBeInTheDocument()
   })
 
   it('allows for custom renderer', () => {
@@ -62,7 +63,7 @@ describe('TodayMarker', () => {
       </RenderWrapper>
     )
 
-    expect(getByTestId(dataTestId)).toBeInTheDOM()
+    expect(getByTestId(dataTestId)).toBeInTheDocument()
   })
 
   it('custom renderer is passed styles and date', () => {