From b2d2349c4b43f12f529016cfb51dcbe7f20bd3a4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20B=C3=BCschel?= Date: Tue, 12 Feb 2019 01:08:34 +0800 Subject: [PATCH 1/4] docs: adding link to LICENSE.md to README.md --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 52b50a5d5..261018504 100644 --- a/README.md +++ b/README.md @@ -785,7 +785,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 +917,6 @@ npm version patch ``` --> + +## License +[MIT licensed](/LICENSE.md). From f98c7381c4a3e6ae63d964802cbd59688e650870 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20B=C3=BCschel?= Date: Thu, 14 Feb 2019 02:35:54 +0800 Subject: [PATCH 2/4] docs: correct invalid JavaScript syntax in examples --- README.md | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 52b50a5d5..eccc0e3f9 100644 --- a/README.md +++ b/README.md @@ -711,10 +711,10 @@ const twoSeconds = 2000 {({ 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
+ // 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'} +
} ``` @@ -737,9 +737,7 @@ const today = Date.now() //custom renderer - {({ styles, date }) => - return
- } + {({ styles, date }) =>
} // multiple CustomMarkers @@ -769,10 +767,10 @@ Custom renderer for this marker. Ensure that you always pass `styles` to the roo //custom renderer {({ 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
+ // 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'} +
} ``` @@ -785,7 +783,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? From 6b193301c2e9fc82dcc8530d04fc2c9475a07693 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20B=C3=BCschel?= Date: Tue, 26 Feb 2019 11:37:38 +0800 Subject: [PATCH 3/4] docs: fix minor spelling mistakes + update links for react and react-native --- README.md | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 52b50a5d5..46a69fb58 100644 --- 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,7 +118,7 @@ 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 @@ -126,7 +126,7 @@ Unless overridden by `visibleTimeStart` and `visibleTimeEnd`, specify where the ## 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 @@ -785,7 +784,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? From e88de29352f8b9b0bebcb159d37e71d996d1c28a Mon Sep 17 00:00:00 2001 From: Ilaiwi Date: Mon, 18 Mar 2019 11:01:13 +0200 Subject: [PATCH 4/4] fix height calculation of stacked items inconsistant --- .../calculate-scroll-canvas.js.snap | 44 +++++----- .../__snapshots__/group-stack.js.snap | 2 +- .../__snapshots__/stack-group.js.snap | 2 +- .../__snapshots__/stack-items.js.snap | 88 +++++++++---------- src/lib/utility/calendar.js | 6 +- 5 files changed, 71 insertions(+), 71 deletions(-) diff --git a/__tests__/utils/calendar/__snapshots__/calculate-scroll-canvas.js.snap b/__tests__/utils/calendar/__snapshots__/calculate-scroll-canvas.js.snap index 0d4c752b1..757fcc868 100644 --- 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 index 6f22034d7..bf2b6c159 100644 --- 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 index bbe832509..759f9e9f0 100644 --- 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, } `; diff --git a/__tests__/utils/calendar/__snapshots__/stack-items.js.snap b/__tests__/utils/calendar/__snapshots__/stack-items.js.snap index 8d27dc42d..9d0000a46 100644 --- a/__tests__/utils/calendar/__snapshots__/stack-items.js.snap +++ b/__tests__/utils/calendar/__snapshots__/stack-items.js.snap @@ -16,7 +16,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 236.24572916666602, }, "id": "0", @@ -34,7 +34,7 @@ Object { "index": 0, }, "stack": true, - "top": 37.5, + "top": 33.75, "width": 736.245729166666, }, "id": "5", @@ -52,7 +52,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 861.245729166666, }, "id": "6", @@ -70,7 +70,7 @@ Object { "index": 0, }, "stack": true, - "top": 37.5, + "top": 33.75, "width": 516.5249652777784, }, "id": "1", @@ -88,7 +88,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 708.2481944444444, }, "id": "2", @@ -106,23 +106,23 @@ Object { "index": 2, }, "stack": true, - "top": 105, + "top": 93.75, "width": 625, }, "id": "3", }, ], "groupHeights": Array [ - 67.5, + 60, + 30, 30, - 37.5, ], "groupTops": Array [ 0, - 67.5, - 97.5, + 60, + 90, ], - "height": 135, + "height": 120, } `; @@ -142,7 +142,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 111.24572916666602, }, "id": "0", @@ -160,7 +160,7 @@ Object { "index": 0, }, "stack": true, - "top": 37.5, + "top": 33.75, "width": 736.245729166666, }, "id": "5", @@ -178,7 +178,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 861.245729166666, }, "id": "6", @@ -196,7 +196,7 @@ Object { "index": 0, }, "stack": true, - "top": 37.5, + "top": 33.75, "width": 516.5249652777784, }, "id": "1", @@ -214,7 +214,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 708.2481944444444, }, "id": "2", @@ -232,23 +232,23 @@ Object { "index": 2, }, "stack": true, - "top": 105, + "top": 93.75, "width": 625, }, "id": "3", }, ], "groupHeights": Array [ - 67.5, + 60, + 30, 30, - 37.5, ], "groupTops": Array [ 0, - 67.5, - 97.5, + 60, + 90, ], - "height": 135, + "height": 120, } `; @@ -268,7 +268,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 361.245729166666, }, "id": "0", @@ -286,7 +286,7 @@ Object { "index": 0, }, "stack": true, - "top": 37.5, + "top": 33.75, "width": 736.245729166666, }, "id": "5", @@ -304,7 +304,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 861.245729166666, }, "id": "6", @@ -322,7 +322,7 @@ Object { "index": 0, }, "stack": true, - "top": 37.5, + "top": 33.75, "width": 516.5249652777784, }, "id": "1", @@ -340,7 +340,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 708.2481944444444, }, "id": "2", @@ -358,23 +358,23 @@ Object { "index": 2, }, "stack": true, - "top": 105, + "top": 93.75, "width": 625, }, "id": "3", }, ], "groupHeights": Array [ - 67.5, + 60, + 30, 30, - 37.5, ], "groupTops": Array [ 0, - 67.5, - 97.5, + 60, + 90, ], - "height": 135, + "height": 120, } `; @@ -394,7 +394,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 236.24572916666602, }, "id": "0", @@ -412,7 +412,7 @@ Object { "index": 0, }, "stack": true, - "top": 37.5, + "top": 33.75, "width": 736.245729166666, }, "id": "5", @@ -430,7 +430,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 861.245729166666, }, "id": "6", @@ -448,7 +448,7 @@ Object { "index": 0, }, "stack": true, - "top": 37.5, + "top": 33.75, "width": 516.5249652777784, }, "id": "1", @@ -466,7 +466,7 @@ Object { "index": 0, }, "stack": true, - "top": 7.5, + "top": 3.75, "width": 708.2481944444444, }, "id": "2", @@ -484,23 +484,23 @@ Object { "index": 2, }, "stack": true, - "top": 105, + "top": 93.75, "width": 625, }, "id": "3", }, ], "groupHeights": Array [ - 67.5, + 60, + 30, 30, - 37.5, ], "groupTops": Array [ 0, - 67.5, - 97.5, + 60, + 90, ], - "height": 135, + "height": 120, } `; diff --git a/src/lib/utility/calendar.js b/src/lib/utility/calendar.js index 7d68cff41..7edf95708 100644 --- a/src/lib/utility/calendar.js +++ b/src/lib/utility/calendar.js @@ -310,7 +310,7 @@ export function groupStack( ) { // calculate non-overlapping positions let curHeight = groupHeight - let verticalMargin = lineHeight - item.dimensions.height + let verticalMargin = (lineHeight - item.dimensions.height) / 2 if (item.dimensions.stack && item.dimensions.top === null) { item.dimensions.top = groupTop + verticalMargin curHeight = Math.max(curHeight, lineHeight) @@ -336,7 +336,7 @@ export function groupStack( item.dimensions.top = collidingItem.dimensions.top + lineHeight curHeight = Math.max( curHeight, - item.dimensions.top + item.dimensions.height - groupTop + item.dimensions.top + item.dimensions.height + verticalMargin - groupTop ) } } while (collidingItem) @@ -396,7 +396,7 @@ export function stackAll(itemsDimensions, groupOrders, lineHeight, stackItems) { if (group.height) { groupHeights.push(group.height) } else { - groupHeights.push(Math.max(groupHeight + verticalMargin, lineHeight)) + groupHeights.push(Math.max(groupHeight, lineHeight)) } } return {