0.26.3 (#647)

0.26.3

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres (more or less) to [Semantic Versioning](http://semver.o
 
 ## Unreleased
 
+## 0.26.3
+
+* add documentation for `onItemDeselect` #350 @ilaiwi
+* solve a bug where `onItemDeselect` is not triggered as expected for several item clicks #350 @ilaiwi
+* fix row height on browser scaling #615 @gaston-niglia 
+
+### Packages
+
+update to `[email protected]` for newer versions of node. 
+
 ## 0.26.2
 
 * render the items layer after columns and rows for layring @ilaiwi

README.md

@@ -142,7 +142,7 @@ The exact viewport of the calendar. When these are specified, scrolling in the c
 
 ## selected
 
-An array with id's corresponding to id's in items (`item.id`). If this prop is set you have to manage the selected items yourself within the `onItemSelect` handler to update the property with new id's. This overwrites the default behaviour of selecting one item on click.
+An array with id's corresponding to id's in items (`item.id`). If this prop is set you have to manage the selected items yourself within the `onItemSelect` handler to update the property with new id's and use `onItemDeselect` handler to clear selection. This overwrites the default behaviour of selecting one item on click.
 
 ## keys
 
@@ -280,6 +280,10 @@ Callback when an item is resized. Returns 1) the item's ID, 2) the new start or
 
 Called when an item is selected. This is sent on the first click on an item. `time` is the time that corresponds to where you click/select on the item in the timeline.
 
+## onItemDeselect(e)
+
+Called when deselecting an item. Used to clear controlled selected prop.
+
 ## onItemClick(itemId, e, time)
 
 Called when an item is clicked. Note: the item must be selected before it's clicked... except if it's a touch event and `itemTouchSendsClick` is enabled. `time` is the time that corresponds to where you click on the item in the timeline.

__tests__/components/GroupRow/GroupRows.test.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import { noop } from 'test-utility'
+import GroupRows from 'lib/row/GroupRows'
+
+const defaultProps = {
+  groups: [
+    {
+        bgColor: '#e8ccff',
+        id: '2998',
+        label: 'Label Dustin"',
+        rightTitle: 'Wolff',
+        title: 'Carlotta',
+    },
+    {
+        bgColor: '#e8ccff',
+        id: '2999',
+        label: 'Label Myrtle"',
+        rightTitle: '"Sauer"',
+        title: 'Elmer',
+    }
+  ],
+  canvasWidth: 10,
+  lineCount: 2,
+  groupHeights: [30, 27],
+  onRowClick: noop,
+  onRowDoubleClick: noop,
+  clickTolerance: 0,
+  onRowContextClick: noop,
+}
+
+describe('GroupRows', () => {
+  it('passes props and get right height for first group', () => {
+    const wrapper = mount(<GroupRows {...defaultProps} />);
+
+    const component = wrapper.find('GroupRow').first();
+    expect(component.prop('style').height).toBe('30px');
+  })
+})

__tests__/components/Sidebar/Sidebar.test.js

@@ -0,0 +1,45 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Sidebar from 'lib/layout/Sidebar'
+
+const defaultProps = {
+  groups: [
+    {
+        bgColor: '#e8ccff',
+        id: '2998',
+        label: 'Label Dustin"',
+        rightTitle: 'Wolff',
+        title: 'Carlotta',
+    },
+    {
+        bgColor: '#e8ccff',
+        id: '2999',
+        label: 'Label Myrtle"',
+        rightTitle: '"Sauer"',
+        title: 'Elmer',
+    }
+  ],
+  width: 10,
+  height: 10,
+  groupHeights: [30, 27],
+  keys: {
+    groupIdKey: 'id',
+    groupRightTitleKey: 'rightTitle',
+    groupTitleKey: 'title',
+    itemDivTitleKey: 'title',
+    itemGroupKey: 'group',
+    itemIdKey: 'id',
+    itemTimeEndKey: 'end',
+    itemTimeStartKey: 'start',
+    itemTitleKey: 'title'
+  }
+}
+
+describe('GroupRows', () => {
+  it('passes props and get right height for first group', () => {
+    const wrapper = mount(<Sidebar {...defaultProps} />);
+
+    const component = wrapper.find('div.rct-sidebar-row').first();
+    expect(component.prop('style').height).toBe('30px');
+  })
+})

demo/app/demo-controlled-select/index.js

@@ -0,0 +1,214 @@
+/* eslint-disable no-console */
+import React, { Component } from 'react'
+import moment from 'moment'
+
+import Timeline, {
+  TimelineMarkers,
+  TimelineHeaders,
+  TodayMarker,
+  CustomMarker,
+  CursorMarker,
+  CustomHeader,
+  SidebarHeader,
+  DateHeader
+} from 'react-calendar-timeline'
+
+import generateFakeData from '../generate-fake-data'
+
+var minTime = moment()
+  .add(-6, 'months')
+  .valueOf()
+var maxTime = moment()
+  .add(6, 'months')
+  .valueOf()
+
+var keys = {
+  groupIdKey: 'id',
+  groupTitleKey: 'title',
+  groupRightTitleKey: 'rightTitle',
+  itemIdKey: 'id',
+  itemTitleKey: 'title',
+  itemDivTitleKey: 'title',
+  itemGroupKey: 'group',
+  itemTimeStartKey: 'start',
+  itemTimeEndKey: 'end'
+}
+
+export default class App extends Component {
+  constructor(props) {
+    super(props)
+
+    const { groups, items } = generateFakeData()
+    const defaultTimeStart = moment()
+      .startOf('day')
+      .toDate()
+    const defaultTimeEnd = moment()
+      .startOf('day')
+      .add(1, 'day')
+      .toDate()
+
+    this.state = {
+      groups,
+      items,
+      defaultTimeStart,
+      defaultTimeEnd,
+      selected: undefined,
+    }
+  }
+
+  handleCanvasClick = (groupId, time) => {
+    console.log('Canvas clicked', groupId, moment(time).format())
+  }
+
+  handleCanvasDoubleClick = (groupId, time) => {
+    console.log('Canvas double clicked', groupId, moment(time).format())
+  }
+
+  handleCanvasContextMenu = (group, time) => {
+    console.log('Canvas context menu', group, moment(time).format())
+  }
+
+  handleItemClick = (itemId, _, time) => {
+    console.log('Clicked: ' + itemId, moment(time).format())
+  }
+
+  handleItemSelect = (itemId, _, time) => {
+    this.setState({
+      selected: [itemId]
+    })
+    console.log('Selected: ' + itemId, moment(time).format())
+  }
+
+  handleItemDeselect = () => {
+    this.setState({selected: undefined})
+  }
+
+  handleItemDoubleClick = (itemId, _, time) => {
+    console.log('Double Click: ' + itemId, moment(time).format())
+  }
+
+  handleItemContextMenu = (itemId, _, time) => {
+    console.log('Context Menu: ' + itemId, moment(time).format())
+  }
+
+  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
+      )
+    })
+
+    console.log('Moved', itemId, dragTime, newGroupOrder)
+  }
+
+  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
+      )
+    })
+
+    console.log('Resized', itemId, time, edge)
+  }
+
+  // this limits the timeline to -6 months ... +6 months
+  handleTimeChange = (visibleTimeStart, visibleTimeEnd, updateScrollCanvas) => {
+    if (visibleTimeStart < minTime && visibleTimeEnd > maxTime) {
+      updateScrollCanvas(minTime, maxTime)
+    } else if (visibleTimeStart < minTime) {
+      updateScrollCanvas(minTime, minTime + (visibleTimeEnd - visibleTimeStart))
+    } else if (visibleTimeEnd > maxTime) {
+      updateScrollCanvas(maxTime - (visibleTimeEnd - visibleTimeStart), maxTime)
+    } else {
+      updateScrollCanvas(visibleTimeStart, visibleTimeEnd)
+    }
+  }
+
+  moveResizeValidator = (action, item, time) => {
+    if (time < new Date().getTime()) {
+      var newTime =
+        Math.ceil(new Date().getTime() / (15 * 60 * 1000)) * (15 * 60 * 1000)
+      return newTime
+    }
+
+    return time
+  }
+
+  render() {
+    const { groups, items, defaultTimeStart, defaultTimeEnd } = this.state
+
+    return (
+      <Timeline
+        groups={groups}
+        items={items}
+        keys={keys}
+        sidebarWidth={150}
+        sidebarContent={<div>Above The Left</div>}
+        canMove
+        canResize="right"
+        canSelect
+        itemsSorted
+        itemTouchSendsClick={false}
+        stackItems
+        itemHeightRatio={0.75}
+        defaultTimeStart={defaultTimeStart}
+        defaultTimeEnd={defaultTimeEnd}
+        onCanvasClick={this.handleCanvasClick}
+        onCanvasDoubleClick={this.handleCanvasDoubleClick}
+        onCanvasContextMenu={this.handleCanvasContextMenu}
+        onItemClick={this.handleItemClick}
+        onItemSelect={this.handleItemSelect}
+        onItemContextMenu={this.handleItemContextMenu}
+        onItemMove={this.handleItemMove}
+        onItemResize={this.handleItemResize}
+        onItemDoubleClick={this.handleItemDoubleClick}
+        onTimeChange={this.handleTimeChange}
+        moveResizeValidator={this.moveResizeValidator}
+        selected={this.state.selected}
+        onItemDeselect={this.handleItemDeselect}
+      >
+        <TimelineMarkers>
+          <TodayMarker />
+          <CustomMarker
+            date={
+              moment()
+                .startOf('day')
+                .valueOf() +
+              1000 * 60 * 60 * 2
+            }
+          />
+          <CustomMarker
+            date={moment()
+              .add(3, 'day')
+              .valueOf()}
+          >
+            {({ styles }) => {
+              const newStyles = { ...styles, backgroundColor: 'blue' }
+              return <div style={newStyles} />
+            }}
+          </CustomMarker>
+          <CursorMarker />
+        </TimelineMarkers>
+      </Timeline>
+    )
+  }
+}

demo/app/index.js

@@ -15,7 +15,8 @@ const demos = {
   verticalClasses: require('./demo-vertical-classes').default,
   customItems: require('./demo-custom-items').default,
   customHeaders: require('./demo-headers').default,
-  customInfoLabel: require('./demo-custom-info-label').default
+  customInfoLabel: require('./demo-custom-info-label').default,
+  controledSelect: require('./demo-controlled-select').default
 }
 
 // A simple component that shows the pathname of the current location