0.26.0 (#620)

0.26.0

Author: Ilaiwi

.babelrc

@@ -1,27 +1,20 @@
 {
-  "presets": [
-    "env",
-    "react"
-  ],
+  "presets": ["@babel/preset-env", "@babel/preset-react"],
   "plugins": [
-    "transform-class-properties",
-    "transform-object-rest-spread"
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread"
   ],
   "env": {
     "production": {
       "plugins": [
         [
           "react-remove-properties",
           {
-            "properties": [
-              "data-testid"
-            ]
+            "properties": ["data-testid"]
           }
         ]
       ],
-      "ignore": [
-        "src/lib/__tests__/**"
-      ]
+      "ignore": ["src/lib/__tests__/**"]
     }
   }
 }

CHANGELOG.md

@@ -7,30 +7,41 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+## 0.26.0
+
+#### Added
+
+* Add `onItemDrag` prop to `<Timeline />` #517 @bettymakes
+* Upgrade to Babel 7.5.0, Jest 24.8.0, Enzyme 3.10.0 @trevdor
+
+#### Breaking
+
+* Removed `<InfoLabel />` in favour of allowing for custom component to be rendered on move or resize. Check out the demo in `demo/app/demo-custom-info-label` for an example on how to display your own custom info label or [this example](https://codesandbox.io/s/timeline-demo-info-label-neec9). 
+
+
 ## 0.25.4
 
-- Move `classnames` to a production dependency
+* Move `classnames` to a production dependency
 
 ## 0.25.3
 
-- Fixed the `undefined` classnames in TimelineHeaders #566 @trevdor
+* Fixed the `undefined` classnames in TimelineHeaders #566 @trevdor
 
 ## 0.25.2
 
-- Fixed the auto-scroll right bug in a scaled browser. #528 @cw196
+* Fixed the auto-scroll right bug in a scaled browser. #528 @cw196
 
 ## 0.25.1
 
-- fix error when using `week` unit causing format error in `DateHeader` #562 @dkarnutsch
-- fix Wheel/Mousewheel Event errors on chrome 73 #541 @ilaiwi
+* fix error when using `week` unit causing format error in `DateHeader` #562 @dkarnutsch
+* fix Wheel/Mousewheel Event errors on chrome 73 #541 @ilaiwi
 
 ## 0.25.0
 
 ### Custom Headers
 
 This new feature gives more control to dev to create customizable headers to provide better UI. Now user have more control through a set of new components to render headers. This new feature came with a breaking change though.
 
-
 ```jsx
 import Timeline, {
   TimelineHeaders,
@@ -93,23 +104,23 @@ import Timeline, {
 Check out the new docs before please [here](https://github.com/namespace-ee/react-calendar-timeline/tree/custom-headers#timeline-headers)
 
 #### removed props
-- `stickyOffset` and `stickyHeader` now you can make your header sticky by following this [examples](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples#custom-item-rendering)
-- `headerRef` to get the headerRef you need to pass ref callback to `TimelineHeader` component
-- `headerLabelGroupHeight` and `headerLabelHeight` now you can pass a `height` prop to both `CustomHeader` and `DateHeader`
-- `headerLabelFormats` and `subHeaderLabelFormats` not you can pass `formatLabel` function to `DateHeader` with label width and start and end time of intervals
 
+* `stickyOffset` and `stickyHeader` now you can make your header sticky by following this [examples](https://github.com/namespace-ee/react-calendar-timeline/tree/master/examples#custom-item-rendering)
+* `headerRef` to get the headerRef you need to pass ref callback to `TimelineHeader` component
+* `headerLabelGroupHeight` and `headerLabelHeight` now you can pass a `height` prop to both `CustomHeader` and `DateHeader`
+* `headerLabelFormats` and `subHeaderLabelFormats` not you can pass `formatLabel` function to `DateHeader` with label width and start and end time of intervals
 
 ## 0.23.1
 
-- fix height calculation of stacked items is off if no item is visible in a line @Felix-N
-- fix Unsubscribing markers correctly when unmounted @gaston-niglia
+* fix height calculation of stacked items is off if no item is visible in a line @Felix-N
+* fix Unsubscribing markers correctly when unmounted @gaston-niglia
 
 ## 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
+* 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
 
@@ -156,7 +167,6 @@ ReactDOM.render(
 )
 ```
 
-
 ## 0.22.0
 
 ### Fixed
@@ -181,9 +191,11 @@ ReactDOM.render(
 ### 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)
 
@@ -192,8 +204,6 @@ ReactDOM.render(
 * update to `react-testing-library` version 5
 * remove deprecated `toBeInDom`
 
-
-
 ### 0.19.0
 
 ### Added
@@ -232,7 +242,7 @@ ReactDOM.render(
 
 ### Breaking
 
-* Removed support for React 15 and lower.  This is due to the fact that 16+ supports returning arrays from render, something that the TimelineMarker feature relies on.
+* Removed support for React 15 and lower. This is due to the fact that 16+ supports returning arrays from render, something that the TimelineMarker feature relies on.
 * removed `showCursorLine` prop in favor of using the `CursorMarker` component. See `TimelineMarkers` section of README for documentation.
 
 ```diff
@@ -256,6 +266,7 @@ from 'react-calendar-timeline'
 ### 0.17.3
 
 ### Added
+
 * fix issue with single row header - #359
 
 ### 0.17.2

README.md

@@ -153,7 +153,6 @@ An array specifying keys in the `items` and `groups` objects. Defaults to
   groupIdKey: 'id',
   groupTitleKey: 'title',
   groupRightTitleKey: 'rightTitle',
-  groupLabelKey: 'title', // key for what to show in `InfoLabel`
   itemIdKey: 'id',
   itemTitleKey: 'title',    // key for item div content
   itemDivTitleKey: 'title', // key for item div title (<div title="text"/>)
@@ -256,6 +255,19 @@ Default:
 
 Ref callback that gets a DOM reference to the scroll body element. Can be useful to programmatically scroll.
 
+## onItemDrag(itemDragObject)
+
+Called when an item is moving or resizing. Returns an object with the following properties:
+
+| property           | type     | description                                                            |
+| ------------------ | -------- | ---------------------------------------------------------------------- |
+| `eventType`        | `string` | retuns either `move` or `resize`                                       |
+| `itemId`           | `number` | ID of the item being moved or resized                                  |
+| `time`             | `number` | UNIX timestamp in milliseconds                                         |
+| `edge`             | `string` | on `resize`, returns a value of either `left` or `right`               |
+| `newGroupOrder`    | `number` | on `move`, index position of the new group that the item is moving to  |
+
+
 ## onItemMove(itemId, dragTime, newGroupOrder)
 
 Callback when an item is moved. Returns 1) the item's ID, 2) the new start time and 3) the index of the new group in the `groups` array.

config/jest-setup.js

@@ -1,3 +1,4 @@
+import 'regenerator-runtime/runtime'
 const Enzyme = require('enzyme')
 const Adapter = require('enzyme-adapter-react-16')
 

demo/app/demo-custom-info-label/CustomInfoLabel.js

@@ -0,0 +1,43 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function CustomInfoLabel(props) {
+  const { time, groupTitle, heading } = props
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        bottom: '100px',
+        left: '100px',
+        backgroundColor: '#E3F1DF',
+        color: '#212B36',
+        padding: '6px 12px',
+        fontSize: '16px',
+        borderRadius: '8px',
+        boxShadow:
+          '0 1px 3px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.05)'
+      }}
+    >
+      <div
+        style={{
+          fontWeight: 'bold',
+          borderBottom: '1px solid #ccc',
+          paddingBottom: '3px',
+          marginBottom: '3px'
+        }}
+      >
+        <span>
+          {heading} {groupTitle}
+        </span>
+      </div>
+      {time}
+    </div>
+  )
+}
+
+CustomInfoLabel.propTypes = {
+  time: PropTypes.string,
+  groupTitle: PropTypes.string,
+  heading: PropTypes.string
+}

demo/app/demo-custom-info-label/index.js

@@ -0,0 +1,155 @@
+import React, { Component } from 'react'
+import moment from 'moment'
+
+import Timeline from 'react-calendar-timeline'
+import CustomInfoLabel from './CustomInfoLabel'
+
+import generateFakeData from '../generate-fake-data'
+
+var keys = {
+  groupIdKey: 'id',
+  groupTitleKey: 'title',
+  groupRightTitleKey: 'rightTitle',
+  itemIdKey: 'id',
+  itemTitleKey: 'title',
+  itemDivTitleKey: 'title',
+  itemGroupKey: 'group',
+  itemTimeStartKey: 'start',
+  itemTimeEndKey: 'end',
+  groupLabelKey: 'title'
+}
+
+export default class App extends Component {
+  constructor(props) {
+    super(props)
+
+    const { groups, items } = generateFakeData(5, 20)
+    const defaultTimeStart = moment()
+      .startOf('day')
+      .toDate()
+    const defaultTimeEnd = moment()
+      .startOf('day')
+      .add(1, 'day')
+      .toDate()
+
+    this.state = {
+      groups,
+      items,
+      defaultTimeStart,
+      defaultTimeEnd,
+      showInfoLabel: false,
+      infoLabelTime: '',
+      infoLabelGroupTitle: '',
+      infoLabelHeading: ''
+    }
+  }
+
+  handleItemMove = (itemId, dragTime, newGroupOrder) => {
+    const { items, groups } = this.state
+
+    const group = groups[newGroupOrder]
+
+    this.setState({
+      items: items.map(
+        item =>
+          item.id === itemId
+            ? Object.assign({}, item, {
+                start: dragTime,
+                end: dragTime + (item.end - item.start),
+                group: group.id
+              })
+            : item
+      ),
+      showInfoLabel: false,
+      infoLabelTime: ''
+    })
+  }
+
+  handleItemResize = (itemId, time, edge) => {
+    const { items } = this.state
+
+    this.setState({
+      items: items.map(
+        item =>
+          item.id === itemId
+            ? Object.assign({}, item, {
+                start: edge === 'left' ? time : item.start,
+                end: edge === 'left' ? item.end : time
+              })
+            : item
+      ),
+      showInfoLabel: false,
+      infoLabelTime: ''
+    })
+  }
+
+  handleItemDrag = ({ eventType, itemId, time, edge, newGroupOrder }) => {
+    const group = this.state.groups[newGroupOrder]
+    const infoLabelGroupTitle = group ? group.title : ''
+    const infoLabelTime = moment(time).format('dddd, MMMM Do YYYY')
+    let heading = ''
+    switch (eventType) {
+      case 'move':
+        heading = '🚚 Moving'
+        break
+      case 'resize':
+        heading = '📅 Resizing'
+        break
+    }
+
+    if (
+      this.state.infoLabelTime !== infoLabelTime ||
+      this.state.infoLabelGroupTitle !== infoLabelGroupTitle
+    ) {
+      this.setState({
+        showInfoLabel: true,
+        infoLabelTime,
+        infoLabelGroupTitle,
+        infoLabelHeading: heading
+      })
+    }
+  }
+
+  render() {
+    const {
+      groups,
+      items,
+      defaultTimeStart,
+      defaultTimeEnd,
+      showInfoLabel,
+      infoLabelTime,
+      infoLabelGroupTitle,
+      infoLabelHeading
+    } = this.state
+
+    const customInfoLabelMarkup = showInfoLabel ? (
+      <CustomInfoLabel
+        time={infoLabelTime}
+        groupTitle={infoLabelGroupTitle}
+        heading={infoLabelHeading}
+      />
+    ) : null
+
+    return (
+      <div>
+        {customInfoLabelMarkup}
+        <Timeline
+          groups={groups}
+          items={items}
+          keys={keys}
+          fullUpdate
+          itemTouchSendsClick={false}
+          stackItems
+          itemHeightRatio={0.75}
+          canMove={true}
+          canResize={'both'}
+          defaultTimeStart={defaultTimeStart}
+          defaultTimeEnd={defaultTimeEnd}
+          onItemMove={this.handleItemMove}
+          onItemResize={this.handleItemResize}
+          onItemDrag={this.handleItemDrag}
+        />
+      </div>
+    )
+  }
+}