focus items

src/components/PlanningTool.jsx

@@ -74,6 +74,8 @@ class PlanningTool extends Component {
       milestones = props.milestones
     }
 
+    this.timeline = React.createRef()
+
     this.state = {
       groups,
       items,
@@ -243,19 +245,6 @@ class PlanningTool extends Component {
     return moment.duration(end.diff(start)).asMinutes() < item.minimumDuration
   }
 
-  closeChildren = (groups, id) => {
-    groups.filter(g => g.parent === id).forEach((g) => {
-      g.show = false
-
-      if (g.hasChildren) {
-        g.open = false
-        groups = this.closeChildren(groups, g.id)
-      }
-    })
-
-    return groups
-  }
-
   toggleGroup = (id) => {
     let {groups} = this.state
 
@@ -276,6 +265,19 @@ class PlanningTool extends Component {
     })
   }
 
+  closeChildren = (groups, id) => {
+    groups.filter(g => g.parent === id).forEach((g) => {
+      g.show = false
+
+      if (g.hasChildren) {
+        g.open = false
+        groups = this.closeChildren(groups, g.id)
+      }
+    })
+
+    return groups
+  }
+
   highlightChildren = (item) => {
     const items = this.state.items.filter(i => i.parent === item.id)
     for (const item of items) {
@@ -391,6 +393,37 @@ class PlanningTool extends Component {
     })
   }
 
+  onTimeChange(visibleTimeStart, visibleTimeEnd, updateScrollCanvas, unit){
+    updateScrollCanvas(visibleTimeStart, visibleTimeEnd)
+  }
+
+  focusItems = (items) => {
+    if (!items || !Array.isArray(items) || items.length <= 0) {
+      return
+    }
+
+    this.removeHighlight()
+    let dateStart = items[0].start.clone()
+    let dateEnd = items[0].end.clone()
+    items[0].highlight = true
+    items.shift()
+
+    for (const item of items) {
+      if(dateStart.diff(item.start) > 0){
+        dateStart = item.start.clone()
+      }
+
+      if(dateEnd.diff(item.end) < 0){
+        dateEnd = item.end.clone()
+      }
+      item.highlight = true
+    }
+
+    dateStart.subtract(1, 'hour')
+    dateEnd.add(2, 'hour')
+    this.timeline.current.updateScrollCanvas(dateStart.valueOf(), dateEnd.valueOf())
+  }
+
   itemRenderer = ({item, timelineContext, itemContext, getItemProps, getResizeProps}) => {
     const {left: leftResizeProps, right: rightResizeProps} = getResizeProps()
     let backgroundColor = item.bgColor
@@ -490,18 +523,24 @@ class PlanningTool extends Component {
       return Object.assign({}, group, {
         title: group.hasChildren ? (
           <div onClick={() => this.toggleGroup(group.id)}
-               style={{cursor: 'pointer', paddingLeft: group.level * 20}}>
+               style={{
+                 cursor: 'pointer',
+                 paddingLeft: group.level * 20
+               }}>
             {group.open ? '[-]' : '[+]'} {group.title}
           </div>
         ) : (
-          <div style={{paddingLeft: group.level * 20}}>{group.title}</div>
+          <div style={{paddingLeft: group.level * 20}}>
+            {group.title}
+          </div>
         )
       })
     })
 
     return (
       <div>
         <Timeline
+          ref={this.timeline}
           groups={newGroups}
           items={items}
           keys={keys}
@@ -514,6 +553,7 @@ class PlanningTool extends Component {
           sidebarWidth={sidebarWidth}
           defaultTimeStart={defaultTimeStart}
           defaultTimeEnd={defaultTimeEnd}
+          onTimeChange={this.onTimeChange}
           itemRenderer={this.itemRenderer}
           onItemMove={this.handleItemMove}
           onItemResize={this.handleItemResize}
@@ -560,6 +600,10 @@ class PlanningTool extends Component {
           Undo
         </div>
 
+        {/*<div onClick={() => this.focusItems(items.filter(item => (item.id === 8 || item.id === 10)))}>
+          focus
+        </div>*/}
+
         {popup.open && (
           popup.custom ?
             popup.custom({