Merge pull request #546 from namespace-ee/497

fix height calculation of stacked items is off. Done by @Felix-N
namespace-ee · Apr 4, 2019 · e369381 · e369381
2 parents 48546c6 + e88de29
commit e369381
Show file tree

Hide file tree

Showing 6 changed files with 96 additions and 96 deletions.
diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # React Calendar Timeline
 
-A modern and responsive react timeline component.
+A modern and responsive React timeline component.
 
 ![calendar demo](https://raw.githubusercontent.com/namespace-ee/react-calendar-timeline/master/demo.gif)
 
@@ -16,7 +16,7 @@ yarn add react-calendar-timeline
 npm install --save react-calendar-timeline
 ```
 
-`react-calendar-timeline` has `react`, `react-dom`, [`moment`](http://momentjs.com/) and [`interactjs`](http://interactjs.io/docs/) as peer dependencies.
+`react-calendar-timeline` has [react](https://reactjs.org/), [react-dom](https://reactjs.org/docs/react-dom.html), [`moment`](http://momentjs.com/) and [`interactjs`](http://interactjs.io/docs/) as peer dependencies.
 
 # Usage
 
@@ -88,7 +88,7 @@ Expects either a vanilla JS array or an immutableJS array, consisting of objects
 }
 ```
 
-If you use right sidebar, you can pass optional `rightTitle` property here.
+If you use the right sidebar, you can pass optional `rightTitle` property here.
 If you want to overwrite the calculated height with a custom height, you can pass a `height` property as an int in pixels here. This can be very useful for categorized groups.
 
 ## items
@@ -118,15 +118,15 @@ Expects either a vanilla JS array or an immutableJS array, consisting of objects
 }
 ```
 
-The preferred (fastest) option is to give unix timestamps in milliseconds for `start_time` and `end_time`. Objects that convert to them (JavaScript Date or moment()) will also work, but will be a lot slower.
+The preferred (fastest) option is to give Unix timestamps in milliseconds for `start_time` and `end_time`. Objects that convert to them (JavaScript `Date` or `moment()`) will also work, but will be a lot slower.
 
 ## defaultTimeStart and defaultTimeEnd
 
 Unless overridden by `visibleTimeStart` and `visibleTimeEnd`, specify where the calendar begins and where it ends. This parameter expects a Date or moment object.
 
 ## visibleTimeStart and visibleTimeEnd
 
-The exact viewport of the calendar. When these are specified, scrolling in the calendar must be orchestrated by the `onTimeChange` function. This parameter expects a unix timestamp in milliseconds.
+The exact viewport of the calendar. When these are specified, scrolling in the calendar must be orchestrated by the `onTimeChange` function. This parameter expects a Unix timestamp in milliseconds.
 
 **Note that you need to provide either `defaultTimeStart/End` or `visibleTimeStart/End` for the timeline to function**
 
@@ -179,8 +179,7 @@ The minimum width, in pixels, of a timeline entry when it's possible to resize.
 
 ## stickyOffset
 
-At what height from the top of the screen should we start "sticking" the header (i.e. position: sticky)? This is useful if for example you already have
-a sticky navbar and want to push the timeline header down further. Defaults `0`.
+At what height from the top of the screen should we start "sticking" the header (i.e. position: sticky)? This is useful if for example you already have a sticky navbar and want to push the timeline header down further. Defaults `0`.
 
 ## stickyHeader
 
@@ -216,7 +215,7 @@ Largest time the calendar can zoom to in milliseconds. Default `5 * 365.24 * 864
 
 ## clickTolerance
 
-How many pixels we can drag the background for it to be counted as a click on the background. Defualt: `3`
+How many pixels we can drag the background for it to be counted as a click on the background. Default `3`
 
 ## canMove
 
@@ -435,9 +434,9 @@ Called when the bounds in the calendar's canvas change. Use it for example to lo
 
 ## itemRenderer
 
-Render prop function used to render a customized item. The function provides multiple paramerters that can be used to render each item.
+Render prop function used to render a customized item. The function provides multiple parameters that can be used to render each item.
 
-Paramters provided to the function has two types: context params which have the state of the item and timeline, and prop getters functions
+Parameters provided to the function has two types: context params which have the state of the item and timeline, and prop getters functions
 
 #### Render props params
 
@@ -490,7 +489,7 @@ Rather than applying props on the element yourself and to avoid your props being
 * `getItemProps` returns the props you should apply to the root item element. The returned props are:
 
   * key: item id
-  * ref: function to get item referance
+  * ref: function to get item reference
   * className: classnames to be applied to the item
   * onMouseDown: event handler
   * onMouseUp: event handler
@@ -500,9 +499,9 @@ Rather than applying props on the element yourself and to avoid your props being
   * onContextMenu: event handler
   * style: inline object style
 
-  \*\* _the given styles will only override the styles that are not a requirement for postioning the item. Other styles like `color`, `radius` and others_
+  \*\* _the given styles will only override the styles that are not a requirement for positioning the item. Other styles like `color`, `radius` and others_
 
-  These properties can be override using the prop argument with proprties:
+  These properties can be override using the prop argument with properties:
 
   * className: class names to be added
   * onMouseDown: event handler will be called after the component's event handler
@@ -711,10 +710,10 @@ const twoSeconds = 2000
 
 <TodayMarker>
   {({ styles, date }) =>
-  // date is value of current date. Use this to render special styles for the marker
-  // or any other custom logic based on date:
-  // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'}
-  return <div style={styles} />
+    // date is value of current date. Use this to render special styles for the marker
+    // or any other custom logic based on date:
+    // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'}
+    <div style={styles} />
   }
 </TodayMarker>
 ```
@@ -737,9 +736,7 @@ const today = Date.now()
 
 //custom renderer
 <CustomMarker date={today}>
-  {({ styles, date }) =>
-  return <div style={styles} />
-  }
+  {({ styles, date }) => <div style={styles} />}
 </CustomMarker>
 
 // multiple CustomMarkers
@@ -769,10 +766,10 @@ Custom renderer for this marker. Ensure that you always pass `styles` to the roo
 //custom renderer
 <CursorMarker>
   {({ styles, date }) =>
-  // date is value of current date. Use this to render special styles for the marker
-  // or any other custom logic based on date:
-  // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'}
-  return <div style={styles} />
+    // date is value of current date. Use this to render special styles for the marker
+    // or any other custom logic based on date:
+    // e.g. styles = {...styles, backgroundColor: isDateInAfternoon(date) ? 'red' : 'limegreen'}
+    <div style={styles} />
   }
 </CursorMarker>
 ```
@@ -785,7 +782,7 @@ You need to include the `Timeline.css` file, either via static file reference or
 
 ## How can I have items with different colors?
 
-Now you can use item renderer for rendering items with different colors [itemRenderer](https://github.com/namespace-ee/react-calendar-timeline#itemrenderer). 
+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?
@@ -917,3 +914,6 @@ npm version patch
 ```
 
 -->
+
+## License
+[MIT licensed](/LICENSE.md).
diff --git a/__tests__/utils/calendar/__snapshots__/calculate-scroll-canvas.js.snap b/__tests__/utils/calendar/__snapshots__/calculate-scroll-canvas.js.snap
@@ -18,7 +18,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 7.5,
+        "top": 3.75,
         "width": 78.74857638888886,
       },
       "id": "0",
@@ -36,7 +36,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 37.5,
+        "top": 33.75,
         "width": 245.4152430555556,
       },
       "id": "5",
@@ -54,7 +54,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 7.5,
+        "top": 3.75,
         "width": 287.08190972222224,
       },
       "id": "6",
@@ -72,7 +72,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 37.5,
+        "top": 33.75,
         "width": 172.1749884259259,
       },
       "id": "1",
@@ -90,7 +90,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 7.5,
+        "top": 3.75,
         "width": 236.08273148148123,
       },
       "id": "2",
@@ -108,23 +108,23 @@ Object {
           "index": 2,
         },
         "stack": true,
-        "top": 105,
+        "top": 93.75,
         "width": 236.08273148148146,
       },
       "id": "3",
     },
   ],
   "groupHeights": Array [
-    67.5,
+    60,
+    30,
     30,
-    37.5,
   ],
   "groupTops": Array [
     0,
-    67.5,
-    97.5,
+    60,
+    90,
   ],
-  "height": 135,
+  "height": 120,
   "visibleTimeEnd": 1540634400000,
   "visibleTimeStart": 1540548000000,
 }
@@ -148,7 +148,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 7.5,
+        "top": 3.75,
         "width": 75.59863333333351,
       },
       "id": "0",
@@ -166,7 +166,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 37.5,
+        "top": 33.75,
         "width": 235.5986333333335,
       },
       "id": "5",
@@ -184,7 +184,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 7.5,
+        "top": 3.75,
         "width": 275.5986333333335,
       },
       "id": "6",
@@ -202,7 +202,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 37.5,
+        "top": 33.75,
         "width": 165.28798888888878,
       },
       "id": "1",
@@ -220,7 +220,7 @@ Object {
           "index": 0,
         },
         "stack": true,
-        "top": 7.5,
+        "top": 3.75,
         "width": 226.6394222222225,
       },
       "id": "2",
@@ -238,23 +238,23 @@ Object {
           "index": 2,
         },
         "stack": true,
-        "top": 105,
+        "top": 93.75,
         "width": 226.6394222222225,
       },
       "id": "3",
     },
   ],
   "groupHeights": Array [
-    67.5,
+    60,
+    30,
     30,
-    37.5,
   ],
   "groupTops": Array [
     0,
-    67.5,
-    97.5,
+    60,
+    90,
   ],
-  "height": 135,
+  "height": 120,
   "visibleTimeEnd": 1540591200000,
   "visibleTimeStart": 1540501200000,
 }

diff --git a/__tests__/utils/calendar/__snapshots__/group-stack.js.snap b/__tests__/utils/calendar/__snapshots__/group-stack.js.snap
@@ -4,6 +4,6 @@ exports[`groupStack works as expected 1`] = `
 Object {
   "groupHeight": 0,
   "itemTop": 7.5,
-  "verticalMargin": 37.5,
+  "verticalMargin": 18.75,
 }
 `;
diff --git a/__tests__/utils/calendar/__snapshots__/stack-group.js.snap b/__tests__/utils/calendar/__snapshots__/stack-group.js.snap
@@ -10,6 +10,6 @@ Object {
 exports[`stackGroup should stack list of items 1`] = `
 Object {
   "groupHeight": 0,
-  "verticalMargin": 7.5,
+  "verticalMargin": 3.75,
 }
 `;