@r365/react-calendar-timeline - npm Package Compare versions

Comparing version 0.25.0-beta.9 to 0.25.0-beta.10

CHANGELOG.md

@@ -10,2 +10,57 @@ # Change Log
 
+## 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
@@ -12,0 +67,0 @@

lib/lib/items/Item.js

@@ -234,3 +234,3 @@ 'use strict';
       }).draggable({
-        enabled: this.props.selected
+        enabled: this.props.selected && this.canMove()
       }).styleCursor(false).on('dragstart', function (e) {
@@ -387,5 +387,5 @@ if (_this2.props.selected) {
 
-      var couldDrag = this.props.selected && this.canMove(this.props);
-      var couldResizeLeft = this.props.selected && this.canResizeLeft(this.props);
-      var couldResizeRight = this.props.selected && this.canResizeRight(this.props);
+      var couldDrag = prevProps.selected && this.canMove(prevProps);
+      var couldResizeLeft = prevProps.selected && this.canResizeLeft(prevProps);
+      var couldResizeRight = prevProps.selected && this.canResizeRight(prevProps);
       var willBeAbleToDrag = this.props.selected && this.canMove(this.props);
@@ -392,0 +392,0 @@ var willBeAbleToResizeLeft = this.props.selected && this.canResizeLeft(this.props);

lib/lib/layout/Sidebar.js

@@ -39,3 +39,3 @@ 'use strict';
     value: function shouldComponentUpdate(nextProps) {
-      return !((0, _generic.arraysEqual)(nextProps.groups, this.props.groups) && nextProps.keys === this.props.keys && nextProps.width === this.props.width && (0, _generic.arraysEqual)(nextProps.groupHeights, this.props.groupHeights) && nextProps.height === this.props.height);
+      return !(nextProps.keys === this.props.keys && nextProps.width === this.props.width && nextProps.height === this.props.height && (0, _generic.arraysEqual)(nextProps.groups, this.props.groups) && (0, _generic.arraysEqual)(nextProps.groupHeights, this.props.groupHeights));
     }
@@ -42,0 +42,0 @@ }, {

lib/lib/Timeline.js

@@ -110,2 +110,6 @@ 'use strict';
 
+    _this.getSelected = _this.getSelected.bind(_this);
+    _this.hasSelectedItem = _this.hasSelectedItem.bind(_this);
+    _this.isItemSelected = _this.isItemSelected.bind(_this);
+
     var visibleTimeStart = null;
@@ -355,3 +359,3 @@ var visibleTimeEnd = null;
         groupTops: groupTops,
-        selected: this.state.selectedItem && !this.props.selected ? [this.state.selectedItem] : this.props.selected || [],
+        selected: this.getSelected(),
         height: height,
@@ -372,2 +376,21 @@ headerHeight: headerHeight,
   }, {
+    key: 'getSelected',
+    value: function getSelected() {
+      return this.state.selectedItem && !this.props.selected ? [this.state.selectedItem] : this.props.selected || [];
+    }
+  }, {
+    key: 'hasSelectedItem',
+    value: function hasSelectedItem() {
+      if (!Array.isArray(this.props.selected)) return !!this.state.selectedItem;
+      return this.props.selected.length > 0;
+    }
+  }, {
+    key: 'isItemSelected',
+    value: function isItemSelected(itemId) {
+      var selectedItems = this.getSelected();
+      return selectedItems.some(function (i) {
+        return i === itemId;
+      });
+    }
+  }, {
     key: 'render',
@@ -844,3 +867,3 @@ value: function render() {
   this.selectItem = function (item, clickType, e) {
-    if (_this4.state.selectedItem === item || _this4.props.itemTouchSendsClick && clickType === 'touch') {
+    if (_this4.isItemSelected(item) || _this4.props.itemTouchSendsClick && clickType === 'touch') {
       if (item && _this4.props.onItemClick) {
@@ -954,3 +977,3 @@ var time = _this4.timeFromItemEvent(e);
     // shouldnt this be handled by the user, as far as when to deselect an item?
-    if (_this4.state.selectedItem) {
+    if (_this4.hasSelectedItem()) {
       _this4.selectItem(null);
@@ -957,0 +980,0 @@ }

package.json

 {
   "name": "@r365/react-calendar-timeline",
-  "version": "0.25.0-beta.9",
+  "version": "0.25.0-beta.10",
   "description": "react calendar timeline",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -471,2 +471,3 @@ # React Calendar Timeline
 | `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                                                                  |
@@ -476,2 +477,3 @@ | `resizing`        | `boolean`       | returns if the item is being resized.                                                                                                                                     |
 | `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)                                                                                                                     |
@@ -478,0 +480,0 @@

src/lib/items/Item.js

@@ -240,3 +240,3 @@ import { Component } from 'react'
       .draggable({
-        enabled: this.props.selected
+        enabled: this.props.selected && this.canMove()
       })
@@ -420,7 +420,7 @@ .styleCursor(false)
     let { interactMounted } = this.state
-    const couldDrag = this.props.selected && this.canMove(this.props)
+    const couldDrag = prevProps.selected && this.canMove(prevProps)
     const couldResizeLeft =
-      this.props.selected && this.canResizeLeft(this.props)
+      prevProps.selected && this.canResizeLeft(prevProps)
     const couldResizeRight =
-      this.props.selected && this.canResizeRight(this.props)
+      prevProps.selected && this.canResizeRight(prevProps)
     const willBeAbleToDrag = this.props.selected && this.canMove(this.props)
@@ -427,0 +427,0 @@ const willBeAbleToResizeLeft =

src/lib/layout/Sidebar.js

@@ -19,7 +19,7 @@ import PropTypes from 'prop-types'
     return !(
-      arraysEqual(nextProps.groups, this.props.groups) &&
       nextProps.keys === this.props.keys &&
       nextProps.width === this.props.width &&
-      arraysEqual(nextProps.groupHeights, this.props.groupHeights) &&
-      nextProps.height === this.props.height
+      nextProps.height === this.props.height &&
+      arraysEqual(nextProps.groups, this.props.groups) &&
+      arraysEqual(nextProps.groupHeights, this.props.groupHeights)
     )
@@ -26,0 +26,0 @@ }

src/lib/Timeline.js

@@ -277,2 +277,6 @@ import PropTypes from 'prop-types'
 
+    this.getSelected = this.getSelected.bind(this)
+    this.hasSelectedItem = this.hasSelectedItem.bind(this)
+    this.isItemSelected= this.isItemSelected.bind(this)
+
     let visibleTimeStart = null
@@ -594,3 +598,3 @@ let visibleTimeEnd = null
     if (
-      this.state.selectedItem === item ||
+      this.isItemSelected(item) ||
       (this.props.itemTouchSendsClick && clickType === 'touch')
@@ -729,3 +733,3 @@ ) {
     // shouldnt this be handled by the user, as far as when to deselect an item?
-    if (this.state.selectedItem) {
+    if (this.hasSelectedItem()) {
       this.selectItem(null)
@@ -919,6 +923,3 @@ }
       groupTops: groupTops,
-      selected:
-        this.state.selectedItem && !this.props.selected
-          ? [this.state.selectedItem]
-          : this.props.selected || [],
+      selected: this.getSelected(),
       height: height,
@@ -965,3 +966,18 @@ headerHeight: headerHeight,
   }
+  getSelected() {
+    return this.state.selectedItem && !this.props.selected
+      ? [this.state.selectedItem]
+      : this.props.selected || [];
+  }
 
+  hasSelectedItem(){
+    if(!Array.isArray(this.props.selected)) return !!this.state.selectedItem
+    return this.props.selected.length > 0
+  }
+
+  isItemSelected(itemId){
+    const selectedItems = this.getSelected()
+    return selectedItems.some(i => i === itemId)
+  }
+
   render() {
@@ -968,0 +984,0 @@ const {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

475978

increased by0.6%

Lines of code

9962

increased by0.35%

Number of lines in readme file

1455

increased by0.14%

No dependency changes