Merge pull request #463 from namespace-ee/develop

0.21.0

Author: Ilaiwi

CHANGELOG.md

@@ -7,6 +7,18 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+### 0.21.0
+
+#### fixes
+
+* fix item dimensions not being rendered on zoom in/out @ilaiwi + @acemac
+* correct `right_sidebar` to `rightTitle` in readme @maxlibin
+
+#### breaking changes
+
+* add `rct` to `.top-header` and `.bottom-header` to become `.rct-top-header` and `.rct-bottom-header` @Simek
+* upgrade dev dependance `[email protected]` @acemac
+
 ### 0.20.0
 
 ### improvements

__tests__/utils/calendar/calculate-scroll-canvas.js

@@ -0,0 +1,132 @@
+import { calculateScrollCanvas } from 'lib/utility/calendar'
+import moment from 'moment'
+
+const keys = {
+  groupIdKey: 'id',
+  groupTitleKey: 'title',
+  groupRightTitleKey: 'rightTitle',
+  itemIdKey: 'id',
+  itemTitleKey: 'title',
+  itemDivTitleKey: 'title',
+  itemGroupKey: 'group',
+  itemTimeStartKey: 'start',
+  itemTimeEndKey: 'end'
+}
+const props = {
+  keys,
+  lineHeight: 30,
+  stackItems: true,
+  itemHeightRatio: 0.75
+}
+
+const visibleTimeStart = moment('2018-10-26T00:00:00.000')
+const visibleTimeEnd = moment('2018-10-27T00:00:00.000')
+
+const state = {
+  draggingItem: undefined,
+  dragTime: null,
+  resizingItem: null,
+  resizingEdge: null,
+  resizeTime: null,
+  newGroupOrder: null,
+  canvasTimeStart: moment('2018-10-25T00:00:00.000').valueOf(),
+  visibleTimeEnd: visibleTimeEnd.valueOf(),
+  visibleTimeStart: visibleTimeStart.valueOf()
+}
+
+const items = [
+  {
+    id: '0',
+    group: '1',
+    start: moment('2018-10-26T10:46:40.000').valueOf(),
+    end: moment('2018-10-26T12:40:03.877').valueOf(),
+    canMove: false,
+    canResize: false
+  },
+  {
+    id: '1',
+    group: '1',
+    start: moment('2018-10-26T19:06:40.000').valueOf(),
+    end: moment('2018-10-26T23:14:35.919').valueOf(),
+    canMove: true,
+    canResize: 'both'
+  },
+  {
+    id: '2',
+    group: '1',
+    start: moment('2018-10-27T08:00:00.000').valueOf(),
+    end: moment('2018-10-27T13:39:57.548').valueOf(),
+    canMove: false,
+    canResize: false,
+    className: ''
+  }
+]
+
+const groups = [{ id: '1' }, { id: '2' }]
+
+describe('calculateScrollCanvas', () => {
+  it('should calculate new scroll state', () => {
+    const newStartTime = visibleTimeStart.clone().add(13, 'h')
+    const newEndTime = visibleTimeEnd.clone().add(13, 'h')
+    const result = calculateScrollCanvas(
+      newStartTime.valueOf(),
+      newEndTime.valueOf(),
+      false,
+      items,
+      groups,
+      props,
+      state
+    )
+    expect(result).toHaveProperty('visibleTimeStart')
+    expect(result).toHaveProperty('visibleTimeEnd')
+    expect(result).toHaveProperty('dimensionItems')
+  })
+  it('should skip new calculation if new visible start and visible end in canvas', () => {
+    const newStartTime = visibleTimeStart.clone().add(1, 'h')
+    const newEndTime = visibleTimeEnd.clone().add(1, 'h')
+    const result = calculateScrollCanvas(
+      newStartTime.valueOf(),
+      newEndTime.valueOf(),
+      false,
+      items,
+      groups,
+      props,
+      state
+    )
+    expect(result).toHaveProperty('visibleTimeStart')
+    expect(result).toHaveProperty('visibleTimeEnd')
+    expect(result).not.toHaveProperty('dimensionItems')
+  })
+  it('should force new calculation', () => {
+    const newStartTime = visibleTimeStart.clone().add(1, 'h')
+    const newEndTime = visibleTimeEnd.clone().add(1, 'h')
+    const result = calculateScrollCanvas(
+      newStartTime.valueOf(),
+      newEndTime.valueOf(),
+      true,
+      items,
+      groups,
+      props,
+      state
+    )
+    expect(result).toHaveProperty('visibleTimeStart')
+    expect(result).toHaveProperty('visibleTimeEnd')
+    expect(result).toHaveProperty('dimensionItems')
+  })
+  it('should calculate new state if zoom changed ', () => {
+    const newStartTime = visibleTimeStart.clone()
+    const newEndTime = visibleTimeEnd.clone().add(1, 'h')
+    const result = calculateScrollCanvas(
+      newStartTime.valueOf(),
+      newEndTime.valueOf(),
+      false,
+      items,
+      groups,
+      props,
+      state
+    )
+    expect(result).toHaveProperty('visibleTimeStart')
+    expect(result).toHaveProperty('visibleTimeEnd')
+    expect(result).toHaveProperty('dimensionItems')
+  })
+})

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-timeline",
-  "version": "0.20.0",
+  "version": "0.21.0",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "scripts": {
@@ -11,7 +11,8 @@
     "lint:fix": "prettier-eslint --parser babylon --write \"src/**/*.js\"",
     "prepublish": "npm run build:lib",
     "start": "webpack-dev-server --hot --host 0.0.0.0 --display-modules",
-    "test": "jest"
+    "test": "jest",
+    "test:watch": "jest --watch"
   },
   "files": [
     "lib",

src/lib/Timeline.scss

@@ -76,8 +76,8 @@ $weekend: rgba(250, 246, 225, 0.5);
     overflow-x: hidden;
     z-index: 90;
 
-    .top-header,
-    .bottom-header {
+    .rct-top-header,
+    .rct-bottom-header {
       position: relative;
     }
 
@@ -126,7 +126,7 @@ $weekend: rgba(250, 246, 225, 0.5);
       }
     }
   }
- 
+
   .rct-sidebar-header {
     margin: 0;
     color: $sidebar-color;

src/lib/layout/TimelineElementsHeader.js

@@ -232,13 +232,13 @@ export default class TimelineElementsHeader extends Component {
         ref={this.props.scrollHeaderRef}
       >
         <div
-          className="top-header"
+          className="rct-top-header"
           style={{ height: twoHeaders ? headerLabelGroupHeight : 0, width: canvasWidth }}
         >
           {topHeaderLabels}
         </div>
         <div
-          className="bottom-header"
+          className="rct-bottom-header"
           style={{ height: headerLabelHeight, width: canvasWidth }}
         >
           {bottomHeaderLabels}

src/lib/utility/calendar.js

@@ -64,7 +64,7 @@ export function iterateTimes(start, end, unit, timeSteps, callback) {
 
   if (timeSteps[unit] && timeSteps[unit] > 1) {
     let value = time.get(unit)
-    time.set(unit, value - value % timeSteps[unit])
+    time.set(unit, value - (value % timeSteps[unit]))
   }
 
   while (time.valueOf() < end) {
@@ -258,7 +258,7 @@ export function stack(items, groupOrders, lineHeight, groups) {
   var groupedItems = getGroupedItems(items, groupOrders)
 
   groupedItems.forEach(function(group) {
-    var groupVal = groups[k++];
+    var groupVal = groups[k++]
 
     // calculate new, non-overlapping positions
     groupTops.push(totalHeight)
@@ -317,7 +317,9 @@ export function stack(items, groupOrders, lineHeight, groups) {
 }
 
 export function nostack(items, groupOrders, lineHeight, groups) {
-  var i, j=0, iMax
+  var i,
+    j = 0,
+    iMax
 
   var totalHeight = 0
 
@@ -327,7 +329,7 @@ export function nostack(items, groupOrders, lineHeight, groups) {
   var groupedItems = getGroupedItems(items, groupOrders)
 
   groupedItems.forEach(function(group) {
-    var groupVal = groups[j++];
+    var groupVal = groups[j++]
 
     // calculate new, non-overlapping positions
     groupTops.push(totalHeight)
@@ -344,8 +346,8 @@ export function nostack(items, groupOrders, lineHeight, groups) {
     }
 
     if (groupVal.height) {
-      groupHeights.push(groupVal.height);
-      totalHeight += groupVal.height;
+      groupHeights.push(groupVal.height)
+      totalHeight += groupVal.height
     } else {
       groupHeights.push(Math.max(groupHeight, lineHeight))
       totalHeight += Math.max(groupHeight, lineHeight)
@@ -361,24 +363,24 @@ export function nostack(items, groupOrders, lineHeight, groups) {
 /**
  * Stack the items that will be visible
  * within the canvas area
- * @param {item[]} items 
- * @param {group[]} groups 
- * @param {number} canvasTimeStart 
- * @param {number} visibleTimeStart 
- * @param {number} visibleTimeEnd 
- * @param {number} width 
- * @param {*} props 
- * @param {*} state 
+ * @param {item[]} items
+ * @param {group[]} groups
+ * @param {number} canvasTimeStart
+ * @param {number} visibleTimeStart
+ * @param {number} visibleTimeEnd
+ * @param {number} width
+ * @param {*} props
+ * @param {*} state
  */
 export function stackItems(
-items,
-groups,
-canvasTimeStart,
-visibleTimeStart,
-visibleTimeEnd,
-width,
-props,
-state
+  items,
+  groups,
+  canvasTimeStart,
+  visibleTimeStart,
+  visibleTimeEnd,
+  width,
+  props,
+  state
 ) {
   // if there are no groups return an empty array of dimensions
   if (groups.length === 0) {
@@ -416,13 +418,11 @@ state
   // Get the order of groups based on their id key
   const groupOrders = getGroupOrders(groups, keys)
 
-
   let dimensionItems = visibleItems.reduce((memo, item) => {
     const itemId = _get(item, keys.itemIdKey)
     const isDragging = itemId === draggingItem
     const isResizing = itemId === resizingItem
 
-
     let dimension = calculateDimensions({
       itemTimeStart: _get(item, keys.itemTimeStartKey),
       itemTimeEnd: _get(item, keys.itemTimeEndKey),
@@ -471,47 +471,53 @@ state
  * Get the the canvas area for a given visible time
  * Will shift the start/end of the canvas if the visible time
  * does not fit within the existing
- * @param {number} visibleTimeStart 
- * @param {number} visibleTimeEnd 
- * @param {boolean} forceUpdateDimensions 
- * @param {*} items 
- * @param {*} groups 
- * @param {*} props 
- * @param {*} state 
+ * @param {number} visibleTimeStart
+ * @param {number} visibleTimeEnd
+ * @param {boolean} forceUpdateDimensions
+ * @param {*} items
+ * @param {*} groups
+ * @param {*} props
+ * @param {*} state
  */
 export function calculateScrollCanvas(
-visibleTimeStart,
-visibleTimeEnd,
-forceUpdateDimensions,
-items,
-groups,
-props,
-state) {
+  visibleTimeStart,
+  visibleTimeEnd,
+  forceUpdateDimensions,
+  items,
+  groups,
+  props,
+  state
+) {
   const oldCanvasTimeStart = state.canvasTimeStart
   const oldZoom = state.visibleTimeEnd - state.visibleTimeStart
-
+  const newZoom = visibleTimeEnd - visibleTimeStart
   const newState = { visibleTimeStart, visibleTimeEnd }
 
   // Check if the current canvas covers the new times
   const canKeepCanvas =
+    newZoom === oldZoom &&
     visibleTimeStart >= oldCanvasTimeStart + oldZoom * 0.5 &&
     visibleTimeStart <= oldCanvasTimeStart + oldZoom * 1.5 &&
     visibleTimeEnd >= oldCanvasTimeStart + oldZoom * 1.5 &&
     visibleTimeEnd <= oldCanvasTimeStart + oldZoom * 2.5
-  
+
   if (!canKeepCanvas || forceUpdateDimensions) {
-    newState.canvasTimeStart = visibleTimeStart - (visibleTimeEnd - visibleTimeStart)
+    newState.canvasTimeStart =
+      visibleTimeStart - (visibleTimeEnd - visibleTimeStart)
     // The canvas cannot be kept, so calculate the new items position
-    Object.assign(newState, stackItems(
-      items,
-      groups,
-      newState.canvasTimeStart,
-      visibleTimeStart,
-      visibleTimeEnd,
-      state.width,
-      props,
-      state
-    ))
+    Object.assign(
+      newState,
+      stackItems(
+        items,
+        groups,
+        newState.canvasTimeStart,
+        visibleTimeStart,
+        visibleTimeEnd,
+        state.width,
+        props,
+        state
+      )
+    )
   }
   return newState
 }