0.25.0 beta

.github/ISSUE_TEMPLATE/bug_report.md

@@ -10,7 +10,7 @@ A clear and concise description of what the bug is.
 
 _Please provide one or both of the following:_
 
-Code (If you have a branch somewhere that shows your issue) or link to codesandbox example. [Here's a base template for this library](https://codesandbox.io/s/lyjr9p0119):
+Code (If you have a branch somewhere that shows your issue) or link to codesandbox example. [Here's a base template for this library](https://codesandbox.io/s/w6xvqzno4w):
 
 OR
 

.gitignore

@@ -7,7 +7,8 @@ bower_components
 modules
 build
 gh-pages
-lib
+/lib
+package-lock.json
 # vscode stuff
 .vscode
 

CHANGELOG.md

@@ -7,6 +7,61 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+## 0.23.0
+
+- improve unit tests coverage #426 - @ilaiwi
+- stack items by group #384 - @acemac
+- fix bug where `canMove` prop gets ignored #484 - @acemac + @ilaiwi
+- fix sidebar re-render when groupHeights do not change #478 - @SDupZ
+
+### Stack per group
+
+now you can stack choose to stack items in individual groups by providing the property `stackItems` in group object. The property in group overrides the timeline prop `stackItems`.
+
+```
+const groups = [{ id: 1, title: 'group 1', stackItems: false }, { id: 2, title: 'group 2', stackItems: true }]
+
+const items = [
+  {
+    id: 1,
+    group: 1,
+    title: 'item 1',
+    start_time: moment(),
+    end_time: moment().add(1, 'hour')
+  },
+  {
+    id: 2,
+    group: 2,
+    title: 'item 2',
+    start_time: moment().add(-0.5, 'hour'),
+    end_time: moment().add(0.5, 'hour')
+  },
+  {
+    id: 3,
+    group: 1,
+    title: 'item 3',
+    start_time: moment().add(2, 'hour'),
+    end_time: moment().add(3, 'hour')
+  }
+]
+
+ReactDOM.render(
+  <div>
+    Rendered by react!
+    <Timeline
+      groups={groups}
+      items={items}
+      defaultTimeStart={moment().add(-12, 'hour')}
+      defaultTimeEnd={moment().add(12, 'hour')}
+    />
+  </div>,
+  document.getElementById('root')
+)
+```
+
+
+## 0.22.0
+
 ### Fixed
 
 * Provided a new key `groupLabelKey` to allow splitting of the key used to render the Sidebar and the InfoLabel visible during drag operations. `groupTitleKey` continues to be used to render the Sidebar. #442 @thiagosatoshi

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
 
@@ -83,12 +83,12 @@ Expects either a vanilla JS array or an immutableJS array, consisting of objects
   id: 1,
   title: 'group 1',
   rightTitle: 'title in the right sidebar',
-  stackItems?: true,
+  stackItems?: false or 'space' or  'line',
   height?: 30
 }
 ```
 
-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
 
@@ -238,6 +237,11 @@ Append a special `.rct-drag-right` handle to the elements and only resize if dra
 
 Stack items under each other, so there is no visual overlap when times collide.  Can be overridden in the `groups` array. Defaults to `false`.
 
+can be assigned to 
+- false
+- space (saves space in stacking)
+- line (stack each item in a line)
+
 ## traditionalZoom
 
 Zoom in when scrolling the mouse up/down. Defaults to `false`
@@ -332,6 +336,11 @@ function (action, item, time, resizeEdge) {
 }
 ```
 
+## onUpdateMove(itemId, time, newGroup, action,resizeEdge) 
+
+this function is called after moveResizeValidator on every drag update
+
+
 ## headerLabelFormats and subHeaderLabelFormats
 
 The formats passed to moment to render times in the header and subheader. Defaults to these:
@@ -435,9 +444,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
 
@@ -468,10 +477,12 @@ Paramters provided to the function has two types: context params which have the
 | `selected`        | `boolean`       | returns if the item is selected.                                                                                                                                          |
 | `dragging`        | `boolean`       | returns if the item is being dragged                                                                                                                                      |
 | `dragStart`       | `object`        | returns `x` and `y` of the start dragging point of the item.                                                                                                              |
+| `dragTime`       | `number`        |  current drag time.                                                                                                              |
 | `dragGroupDelta`  | `number`        | returns number of groups the item moved. if negative, moving was to top. If positive, moving was to down                                                                  |
 | `resizing`        | `boolean`       | returns if the item is being resized.                                                                                                                                     |
 | `resizeEdge`      | `left`, `right` | the side from which the component is being resized form                                                                                                                   |
 | `resizeStart`     | `number`        | returns the x value from where the component start moving                                                                                                                 |
+| `resizeTime`     | `number`        | current resize time                                                                                                                 |
 | `width`           | `boolean`       | returns the width of the item (same as in dimensions)                                                                                                                     |
 
 ##### prop getters functions
@@ -488,7 +499,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
@@ -498,9 +509,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
@@ -709,10 +720,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>
 ```
@@ -735,9 +746,7 @@ const today = Date.now()
 
 //custom renderer
 <CustomMarker date={today}>
-  {({ styles, date }) =>
-  return <div style={styles} />
-  }
+  {({ styles, date }) => <div style={styles} />}
 </CustomMarker>
 
 // multiple CustomMarkers
@@ -767,10 +776,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>
 ```
@@ -1318,7 +1327,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?
@@ -1450,3 +1459,6 @@ npm version patch
 ```
 
 -->
+
+## License
+[MIT licensed](/LICENSE.md).

__fixtures__/itemsAndGroups.js

@@ -1,54 +1,53 @@
-import moment from 'moment'
 
 export const items = [
   {
     id: '0',
     group: '1',
-    start_time: moment('2018-10-26T10:46:40.000').valueOf(),
-    end_time: moment('2018-10-26T12:40:03.877').valueOf(),
+    start_time: 1540540000000,
+    end_time: 1540546803877,
     canMove: false,
     canResize: false
   },
   {
     id: '5',
     group: '1',
-    start_time: moment('2018-10-26T08:46:40.000').valueOf(),
-    end_time: moment('2018-10-26T14:40:03.877').valueOf(),
+    start_time: 1540532800000,
+    end_time: 1540554003877,
     canMove: false,
     canResize: false,
     className: ''
   },
   {
     id: '6',
     group: '1',
-    start_time: moment('2018-10-26T13:46:40.000').valueOf(),
-    end_time: moment('2018-10-26T20:40:03.877').valueOf(),
+    start_time: 1540550800000,
+    end_time: 1540575603877,
     canMove: false,
     canResize: false,
     className: ''
   },
   {
     id: '1',
     group: '1',
-    start_time: moment('2018-10-26T19:06:40.000').valueOf(),
-    end_time: moment('2018-10-26T23:14:35.919').valueOf(),
+    start_time: 1540570000000,
+    end_time: 1540584875919,
     canMove: true,
     canResize: 'both'
   },
   {
     id: '2',
     group: '1',
-    start_time: moment('2018-10-27T08:00:00.000').valueOf(),
-    end_time: moment('2018-10-27T13:39:57.548').valueOf(),
+    start_time: 1540620000000,
+    end_time: 1540640397548,
     canMove: false,
     canResize: false,
     className: ''
   },
   {
     id: '3',
     group: '3',
-    start_time: moment('2018-10-27T18:00:00.000').valueOf(),
-    end_time: moment('2018-10-27T23:39:57.548').valueOf(),
+    start_time: 1540656000000,
+    end_time: 1540676397548,
     canMove: false,
     canResize: false,
     className: ''

__fixtures__/stateAndProps.js

@@ -1,10 +1,9 @@
 import { defaultKeys } from 'lib/default-config'
-import moment from 'moment'
 import {items} from './itemsAndGroups'
 export const props = {
   keys: defaultKeys,
   lineHeight: 30,
-  stackItems: true,
+  stackItems: 'space',
   itemHeightRatio: 0.75
 }
 
@@ -13,8 +12,8 @@ export const propsNoStack = {
   stackItems: false,
 }
 
-export const visibleTimeStart = moment('2018-10-26T00:00:00.000')
-export const visibleTimeEnd = moment('2018-10-27T00:00:00.000')
+export const visibleTimeStart = 1540501200000
+export const visibleTimeEnd = 1540587600000
 
 export const state = {
   draggingItem: undefined,
@@ -23,9 +22,9 @@ export const state = {
   resizingEdge: null,
   resizeTime: null,
   newGroupOrder: null,
-  canvasTimeStart: moment('2018-10-25T00:00:00.000').valueOf(),
-  visibleTimeEnd: visibleTimeEnd.valueOf(),
-  visibleTimeStart: visibleTimeStart.valueOf(),
+  canvasTimeStart: 1540414800000,
+  visibleTimeEnd: visibleTimeEnd,
+  visibleTimeStart: visibleTimeStart,
   canvasTimeEnd: 1540674000000,
   width: 1000,
 }