Merge pull request #470 from namespace-ee/develop

0.22.0

Author: Ilaiwi

.gitignore

@@ -15,3 +15,4 @@ gh-pages
 # code coverage
 coverage
 
+*.orig

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+### 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
+* fix scroll left/right causes item move/edit to be at incorrect time #401 @acemac 
+* now `getResizeProps` take `leftClassName` and `rightClassName` and returns className for left and right props @acemac 
+* fix functionality of `itemTitle` and `itemDivTitle` [issue](https://github.com/namespace-ee/react-calendar-timeline/issues/429#issuecomment-426456693) @acemac 
+
 ### 0.21.0
 
 #### fixes

README.md

@@ -141,12 +141,13 @@ 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"/>)
   itemGroupKey: 'group',
   itemTimeStartKey: 'start_time',
-  itemTimeEndKey: 'end_time'
+  itemTimeEndKey: 'end_time',
 }
 ```
 
@@ -511,16 +512,20 @@ Rather than applying props on the element yourself and to avoid your props being
 * `getResizeProps` returns the props you should apply to the left and right resize handlers only if `useResizeHandle` set to true. The returned object has the props for the left element under property `left` and the props to be applied to the right element under `right` :
 
   * left
-    * ref: function to get element referance
+    * ref: function to get element reference
     * style: style to be applied to the left element
+    * className: class names to be applied to left className
   * right
-    * ref: function to get element referance
+    * ref: function to get element reference
     * style: style to be applied to the right element
+    * className: class names to be applied to left className
 
-These properties can be override using the prop argument with proprties:
+These properties can be override using the prop argument with properties:
 
 * leftStyle: style to be added to left style
 * rightStyle: style to be added to right style
+* leftClassName: classes to be added to left handler
+* rightClassName: classes to be added to right handler
 
 example
 

demo/app/demo-tree-groups/index.js

@@ -9,6 +9,7 @@ var keys = {
   groupIdKey: 'id',
   groupTitleKey: 'title',
   groupRightTitleKey: 'rightTitle',
+  groupLabelKey: 'label',
   itemIdKey: 'id',
   itemTitleKey: 'title',
   itemDivTitleKey: 'title',
@@ -105,7 +106,7 @@ export default class App extends Component {
         sidebarContent={<div>Above The Left</div>}
         rightSidebarWidth={150}
         rightSidebarContent={<div>Above The Right</div>}
-        canMove
+        canMove={true}
         canResize="right"
         canSelect
         itemsSorted

demo/app/generate-fake-data.js

@@ -10,6 +10,7 @@ export default function (groupCount = 30, itemCount = 1000, daysInPast = 30) {
       id: `${i + 1}`,
       title: faker.name.firstName(),
       rightTitle: faker.name.lastName(),
+      label: `Label ${faker.name.firstName()}`,
       bgColor: randomColor({ luminosity: 'light', seed: randomSeed + i })
     })
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-calendar-timeline",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "react calendar timeline",
   "main": "lib/index.js",
   "scripts": {
@@ -49,7 +49,7 @@
       "url": "https://github.com/dkarnutsch"
     },
     {
-      "name":"Alex Maclean",
+      "name": "Alex Maclean",
       "url": "https://github.com/acemac"
     },
     {

src/lib/Timeline.js

@@ -88,6 +88,7 @@ export default class ReactCalendarTimeline extends Component {
     keys: PropTypes.shape({
       groupIdKey: PropTypes.string,
       groupTitleKey: PropTypes.string,
+      groupLabelKey: PropTypes.string,
       groupRightTitleKey: PropTypes.string,
       itemIdKey: PropTypes.string,
       itemTitleKey: PropTypes.string,
@@ -297,7 +298,6 @@ export default class ReactCalendarTimeline extends Component {
       dragTime: null,
       dragGroupTitle: null,
       resizeTime: null,
-      topOffset: 0,
       resizingItem: null,
       resizingEdge: null
     }
@@ -415,12 +415,9 @@ export default class ReactCalendarTimeline extends Component {
   resize = (props = this.props) => {
     const {
       width: containerWidth,
-      top: containerTop
     } = this.container.getBoundingClientRect()
 
     let width = containerWidth - props.sidebarWidth - props.rightSidebarWidth
-    const { headerLabelGroupHeight, headerLabelHeight } = props
-    const headerHeight = headerLabelGroupHeight + headerLabelHeight
 
     const { dimensionItems, height, groupHeights, groupTops } = stackItems(
       props.items,
@@ -435,11 +432,9 @@ export default class ReactCalendarTimeline extends Component {
 
     // this is needed by dragItem since it uses pageY from the drag events
     // if this was in the context of the scrollElement, this would not be necessary
-    const topOffset = containerTop + window.pageYOffset + headerHeight
 
     this.setState({
       width,
-      topOffset,
       dimensionItems,
       height,
       groupHeights,
@@ -648,7 +643,7 @@ export default class ReactCalendarTimeline extends Component {
       draggingItem: item,
       dragTime: dragTime,
       newGroupOrder: newGroupOrder,
-      dragGroupTitle: newGroup ? _get(newGroup, keys.groupTitleKey) : ''
+      dragGroupTitle: newGroup ? _get(newGroup, keys.groupLabelKey) : ''
     })
   }
 
@@ -784,7 +779,6 @@ export default class ReactCalendarTimeline extends Component {
         useResizeHandle={this.props.useResizeHandle}
         canSelect={this.props.canSelect}
         moveResizeValidator={this.props.moveResizeValidator}
-        topOffset={this.state.topOffset}
         itemSelect={this.selectItem}
         itemDrag={this.dragItem}
         itemDrop={this.dropItem}
@@ -794,6 +788,7 @@ export default class ReactCalendarTimeline extends Component {
         itemResized={this.resizedItem}
         itemRenderer={this.props.itemRenderer}
         selected={this.props.selected}
+        scrollRef={this.scrollComponent}
       />
     )
   }

src/lib/Timeline.scss

@@ -51,7 +51,7 @@ $weekend: rgba(250, 246, 225, 0.5);
     .rct-item-content {
       position: sticky;
       position: -webkit-sticky;
-      left: 0;
+      left: 0px;
       overflow: hidden;
       display: inline-block;
       border-radius: 2px;

src/lib/default-config.js

@@ -2,6 +2,7 @@ export const defaultKeys = {
   groupIdKey: 'id',
   groupTitleKey: 'title',
   groupRightTitleKey: 'rightTitle',
+  groupLabelKey: 'title',
   itemIdKey: 'id',
   itemTitleKey: 'title',
   itemDivTitleKey: 'title',

src/lib/items/Item.js

@@ -7,6 +7,7 @@ import { _get, deepObjectCompare } from '../utility/generic'
 import { composeEvents } from '../utility/events'
 import { defaultItemRenderer } from './defaultItemRenderer'
 import { coordinateToTimeRatio } from '../utility/calendar'
+import { getSumScroll, getSumOffset } from '../utility/dom-helpers'
 import {
   overridableStyles,
   selectedStyle,
@@ -50,12 +51,13 @@ export default class Item extends Component {
 
     itemProps: PropTypes.object,
     canSelect: PropTypes.bool,
-    topOffset: PropTypes.number,
     dimensions: PropTypes.object,
     groupTops: PropTypes.array,
     useResizeHandle: PropTypes.bool,
     moveResizeValidator: PropTypes.func,
-    onItemDoubleClick: PropTypes.func
+    onItemDoubleClick: PropTypes.func,
+
+    scrollRef: PropTypes.object
   }
 
   static defaultProps = {
@@ -107,7 +109,6 @@ export default class Item extends Component {
       nextProps.minResizeWidth !== this.props.minResizeWidth ||
       nextProps.canChangeGroup !== this.props.canChangeGroup ||
       nextProps.canSelect !== this.props.canSelect ||
-      nextProps.topOffset !== this.props.topOffset ||
       nextProps.canMove !== this.props.canMove ||
       nextProps.canResizeLeft !== this.props.canResizeLeft ||
       nextProps.canResizeRight !== this.props.canResizeRight ||
@@ -154,26 +155,35 @@ export default class Item extends Component {
     const startTime = moment(this.itemTimeStart)
 
     if (this.state.dragging) {
-      const deltaX = e.pageX - this.state.dragStart.x
-      const timeDelta = deltaX * this.getTimeRatio()
-
-      return this.dragTimeSnap(startTime.valueOf() + timeDelta, true)
+      return this.dragTimeSnap(this.timeFor(e) + this.state.dragStart.offset, true)
     } else {
       return startTime
     }
   }
 
+  timeFor(e) {
+    const ratio = coordinateToTimeRatio(this.props.canvasTimeStart, this.props.canvasTimeEnd, this.props.canvasWidth)
+
+    const offset = getSumOffset(this.props.scrollRef).offsetLeft
+    const scrolls = getSumScroll(this.props.scrollRef)
+      
+    return (e.pageX - offset + scrolls.scrollLeft) * ratio + this.props.canvasTimeStart;
+  }
+
   dragGroupDelta(e) {
-    const { groupTops, order, topOffset } = this.props
+    const { groupTops, order } = this.props
     if (this.state.dragging) {
       if (!this.props.canChangeGroup) {
         return 0
       }
       let groupDelta = 0
 
+      const offset = getSumOffset(this.props.scrollRef).offsetTop
+      const scrolls = getSumScroll(this.props.scrollRef)
+      
       for (var key of Object.keys(groupTops)) {
-        var item = groupTops[key]
-        if (e.pageY - topOffset > item) {
+        var groupTop = groupTops[key]
+        if (e.pageY - offset + scrolls.scrollTop > groupTop) {
           groupDelta = parseInt(key, 10) - order
         } else {
           break
@@ -211,8 +221,8 @@ export default class Item extends Component {
   }
 
   mountInteract() {
-    const leftResize = this.props.useResizeHandle ? this.dragLeft : true
-    const rightResize = this.props.useResizeHandle ? this.dragRight : true
+    const leftResize = this.props.useResizeHandle ? ".rct-item-handler-resize-left" : true
+    const rightResize = this.props.useResizeHandle ? ".rct-item-handler-resize-right" : true
 
     interact(this.item)
       .resizable({
@@ -231,9 +241,13 @@ export default class Item extends Component {
       .styleCursor(false)
       .on('dragstart', e => {
         if (this.props.selected) {
+          const clickTime = this.timeFor(e);
           this.setState({
             dragging: true,
-            dragStart: { x: e.pageX, y: e.pageY },
+            dragStart: { 
+              x: e.pageX,
+              y: e.pageY,
+            offset: this.itemTimeStart - clickTime },
             preDragPosition: { x: e.target.offsetLeft, y: e.target.offsetTop },
             dragTime: this.itemTimeStart,
             dragGroupDelta: 0
@@ -318,12 +332,7 @@ export default class Item extends Component {
             resizeEdge = e.deltaRect.left !== 0 ? 'left' : 'right'
             this.setState({ resizeEdge })
           }
-          const time =
-            resizeEdge === 'left' ? this.itemTimeStart : this.itemTimeEnd
-
-          let resizeTime = this.resizeTimeSnap(
-            time + this.resizeTimeDelta(e, resizeEdge)
-          )
+          let resizeTime = this.resizeTimeSnap(this.timeFor(e))
 
           if (this.props.moveResizeValidator) {
             resizeTime = this.props.moveResizeValidator(
@@ -346,11 +355,7 @@ export default class Item extends Component {
       .on('resizeend', e => {
         if (this.state.resizing) {
           const { resizeEdge } = this.state
-          const time =
-            resizeEdge === 'left' ? this.itemTimeStart : this.itemTimeEnd
-          let resizeTime = this.resizeTimeSnap(
-            time + this.resizeTimeDelta(e, resizeEdge)
-          )
+          let resizeTime = this.resizeTimeSnap(this.timeFor(e))
 
           if (this.props.moveResizeValidator) {
             resizeTime = this.props.moveResizeValidator(
@@ -406,22 +411,22 @@ export default class Item extends Component {
     return !!props.canMove
   }
 
-  componentWillReceiveProps(nextProps) {
-    this.cacheDataFromProps(nextProps)
+  componentDidUpdate(prevProps) {
+    this.cacheDataFromProps(this.props)
 
     let { interactMounted } = this.state
     const couldDrag = this.props.selected && this.canMove(this.props)
     const couldResizeLeft =
       this.props.selected && this.canResizeLeft(this.props)
     const couldResizeRight =
       this.props.selected && this.canResizeRight(this.props)
-    const willBeAbleToDrag = nextProps.selected && this.canMove(nextProps)
+    const willBeAbleToDrag = this.props.selected && this.canMove(this.props)
     const willBeAbleToResizeLeft =
-      nextProps.selected && this.canResizeLeft(nextProps)
+      this.props.selected && this.canResizeLeft(this.props)
     const willBeAbleToResizeRight =
-      nextProps.selected && this.canResizeRight(nextProps)
+      this.props.selected && this.canResizeRight(this.props)
 
-    if (nextProps.selected && !interactMounted) {
+    if (this.props.selected && !interactMounted) {
       this.mountInteract()
       interactMounted = true
     }
@@ -511,6 +516,7 @@ export default class Item extends Component {
     return {
       key: this.itemId,
       ref: this.getItemRef,
+      title: this.itemDivTitle,
       className: classNames + ` ${props.className ? props.className : ''}`,
       onMouseDown: composeEvents(this.onMouseDown, props.onMouseDown),
       onMouseUp: composeEvents(this.onMouseUp, props.onMouseUp),
@@ -523,13 +529,24 @@ export default class Item extends Component {
   }
 
   getResizeProps = (props = {}) => {
+    let leftName = "rct-item-handler rct-item-handler-left rct-item-handler-resize-left"
+    if (props.leftClassName) {
+      leftName += ` ${props.leftClassName}`
+    }
+
+    let rightName = "rct-item-handler rct-item-handler-right rct-item-handler-resize-right"
+    if (props.rightClassName) {
+      rightName += ` ${props.rightClassName}`
+    }
     return {
       left: {
         ref: this.getDragLeftRef,
+        className: leftName,
         style: Object.assign({}, leftResizeStyle, props.leftStyle)
       },
       right: {
         ref: this.getDragRightRef,
+        className: rightName,
         style: Object.assign({}, rightResizeStyle, props.rightStyle)
       }
     }
@@ -582,7 +599,7 @@ export default class Item extends Component {
     const itemContext = {
       dimensions: this.props.dimensions,
       useResizeHandle: this.props.useResizeHandle,
-      title: this.itemDivTitle,
+      title: this.itemTitle,
       canMove: this.canMove(this.props),
       canResizeLeft: this.canResizeLeft(this.props),
       canResizeRight: this.canResizeRight(this.props),