react-gantt-timeline - npm Package Compare versions

Comparing version 0.2.4 to 0.2.5

package.json

 {
   "name": "react-gantt-timeline",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/lib/components/taskList/VerticalSpliter.spec.js

@@ -15,3 +15,3 @@ import React from 'react'
         const stopPropagation=jest.fn();
-        const wrapper =shallow(<VerticalSpliter onChangeSize={mockCallback}/>);
+        const wrapper =shallow(<VerticalSpliter onTaskListSizing={mockCallback}/>);
 
@@ -18,0 +18,0 @@ expect(wrapper.state().dragging).toBe(false);

src/lib/components/viewport/DataTask.js

 import React,{Component} from 'react'
 import DateHelper from 'libs/helpers/DateHelper'
+import {MODE_NONE,MODE_MOVE,MOVE_RESIZE_LEFT,MOVE_RESIZE_RIGHT} from 'libs/Const'
 
+
 export default class DataTask extends Component{
@@ -11,11 +13,17 @@ constructor(props){
         this.calculateStyle=this.calculateStyle.bind(this)
-        this.state={dragging:false,left:this.props.left}
+        this.state={dragging:false,
+                    left:this.props.left,
+                    width:this.props.width,
+                    mode:MODE_NONE}
     }
 
-    doMouseDown(e){
+    doMouseDown(e,mode){
         if (e.button === 0){
+            e.stopPropagation();
             this.props.onChildDrag(true)
             this.draggingPosition=e.clientX;
-            this.setState({dragging:true});
-            this.state.left=this.props.left;
+            this.setState({dragging:true,mode:mode,
+                            left:this.props.left,
+                            width:this.props.width});
+
         }
@@ -37,3 +45,14 @@ }
             let delta=this.draggingPosition-e.clientX;
-            this.setState({left:this.state.left-delta})
+            switch(this.state.mode){
+                case MODE_MOVE:
+                    this.setState({left:this.state.left-delta})
+                    break;
+                case MOVE_RESIZE_LEFT:
+                    this.setState({left:this.state.left-delta,width:this.state.width+delta})
+                    break;
+                case MOVE_RESIZE_RIGHT :
+                    this.setState({width:this.state.width-delta})
+                    break;
+            }
+            
             this.draggingPosition=e.clientX;
@@ -46,5 +65,5 @@ }
         let new_start_date=DateHelper.pixelToDate(this.state.left,this.props.nowposition,this.props.dayWidth);
-        let new_end_date=DateHelper.pixelToDate(this.state.left+this.props.width,this.props.nowposition,this.props.dayWidth);
+        let new_end_date=DateHelper.pixelToDate(this.state.left+this.state.width,this.props.nowposition,this.props.dayWidth);
         this.props.onUpdateItem(this.props.item,{start:new_start_date,end:new_end_date})
-        this.setState({dragging:false})
+        this.setState({dragging:false,mode:MODE_NONE})
     }
@@ -55,3 +74,3 @@
         if(this.state.dragging){
-            return {backgroundColor: this.props.color,left:this.state.left,width:this.props.width,height:this.props.height-2}
+            return {backgroundColor: this.props.color,left:this.state.left,width:this.state.width,height:this.props.height-2}
         }else{
@@ -63,9 +82,14 @@ return {backgroundColor: this.props.color,left:this.props.left,width:this.props.width,height:this.props.height-2}
     render(){
+        let style=this.calculateStyle()
         return (
         <div className="timeLine-main-data-task" 
-            onMouseDown={this.doMouseDown}
+            onMouseDown={(e)=>this.doMouseDown(e,MODE_MOVE)}
             onClick={(e)=>{this.props.onSelectItem(this.props.item)}}
-            style={this.calculateStyle()}>
-            <div>r</div>
-            <div>l</div>    
+            style={style}>
+            <div className="timeLine-main-data-task-side" 
+                 style={{left:-4,height:style.height}}
+                 onMouseDown={(e)=>this.doMouseDown(e,MOVE_RESIZE_LEFT)} ></div>
+            <div className="timeLine-main-data-task-side" 
+                 style={{left:style.width,height:style.height}}
+                 onMouseDown={(e)=>this.doMouseDown(e,MOVE_RESIZE_RIGHT)} ></div>  
         </div>)
@@ -72,0 +96,0 @@

src/lib/components/viewport/DataTask.spec.js

 import React from 'react'
 import DataTask from './DataTask'
 import DateHelper from 'libs/helpers/DateHelper'
+import {MODE_NONE,MODE_MOVE,MOVE_RESIZE_LEFT,MOVE_RESIZE_RIGHT} from 'libs/Const'
 import { shallow } from 'enzyme';
@@ -32,2 +33,3 @@
         let nowposition=0;
+        let stopPropagation=jest.fn();
         const wrapper =shallow(<DataTask 
@@ -43,5 +45,7 @@ nowposition={nowposition}
         expect(wrapper.state().dragging).toBe(false);    
-        wrapper.instance().doMouseDown({button:1,clientX:10})    
+        wrapper.instance().doMouseDown({button:1,clientX:10,stopPropagation:stopPropagation},MODE_MOVE)    
+        expect(wrapper.state().mode).toBe(MODE_NONE); 
         expect(wrapper.state().dragging).toBe(false); 
-        wrapper.instance().doMouseDown({button:0,clientX:10})    
+        wrapper.instance().doMouseDown({button:0,clientX:10,stopPropagation:stopPropagation},MODE_MOVE)    
+        expect(wrapper.state().mode).toBe(MODE_MOVE); 
         expect(wrapper.state().dragging).toBe(true);       
@@ -61,2 +65,3 @@ expect(wrapper.state().left).toBe(0);
         wrapper.instance().doMouseUp()
+        expect(wrapper.state().mode).toBe(MODE_NONE); 
         expect(onChildDrag.mock.calls.length).toBe(2);
@@ -73,3 +78,102 @@ expect(onChildDrag.mock.calls[1][0]).toBe(false)
 
-    })        
+    })
+    it('Resize Left and handle mouse event properly',()=>{
+        let onChildDrag=jest.fn();
+        let onUpdateItem=jest.fn();
+        let item={name:'this Item'}
+        let dayWidth=30;
+        let nowposition=0;
+        let stopPropagation=jest.fn();
+        const wrapper =shallow(<DataTask 
+                                    nowposition={nowposition}
+                                    dayWidth={dayWidth}
+                                    onChildDrag={onChildDrag}
+                                    onUpdateItem={onUpdateItem}
+                                    item={item}
+                                    left={0}
+                                    width={80}
+                                    color='red'/>);
+        expect(wrapper.state().dragging).toBe(false);    
+        wrapper.instance().doMouseDown({button:1,clientX:10,stopPropagation:stopPropagation},MOVE_RESIZE_LEFT)    
+        expect(wrapper.state().dragging).toBe(false); 
+        expect(wrapper.state().mode).toBe(MODE_NONE); 
+        wrapper.instance().doMouseDown({button:0,clientX:10,stopPropagation:stopPropagation},MOVE_RESIZE_LEFT)    
+        expect(wrapper.state().mode).toBe(MOVE_RESIZE_LEFT);
+        expect(wrapper.state().dragging).toBe(true);       
+        expect(wrapper.state().left).toBe(0);   
+        expect(wrapper.instance().draggingPosition).toBe(10);       
+        expect(onChildDrag.mock.calls.length).toBe(1);
+        expect(onChildDrag.mock.calls[0][0]).toBe(true)  
+
+        wrapper.instance().doMouseMove({button:0,clientX:20})      
+        expect(wrapper.state().left).toBe(10);   
+        expect(wrapper.instance().draggingPosition).toBe(20);
+        let style=wrapper.instance().calculateStyle();     
+        expect(style.left).toBe(10);
+        expect(style.width).toBe(70);
+        expect(style.backgroundColor).toBe('red');
+        wrapper.instance().doMouseUp()
+        expect(wrapper.state().mode).toBe(MODE_NONE); 
+        expect(onChildDrag.mock.calls.length).toBe(2);
+        expect(onChildDrag.mock.calls[1][0]).toBe(false) 
+        expect(onUpdateItem.mock.calls.length).toBe(1);
+        expect(onUpdateItem.mock.calls[0][0]).toBe(item)
+        let new_start_date=DateHelper.pixelToDate(10,nowposition,dayWidth);
+        let new_end_date=DateHelper.pixelToDate(70,nowposition,dayWidth);
+
+        expect(new_start_date.getTime()-onUpdateItem.mock.calls[0][1].start.getTime()<10).toBe(true)
+        expect(new_end_date.getTime()-onUpdateItem.mock.calls[0][1].end.getTime()<10).toBe(true)
+
+
+    })
+    it('Resize Right and handle mouse event properly',()=>{
+        let onChildDrag=jest.fn();
+        let onUpdateItem=jest.fn();
+        let item={name:'this Item'}
+        let dayWidth=30;
+        let nowposition=0;
+        let stopPropagation=jest.fn();
+        const wrapper =shallow(<DataTask 
+                                    nowposition={nowposition}
+                                    dayWidth={dayWidth}
+                                    onChildDrag={onChildDrag}
+                                    onUpdateItem={onUpdateItem}
+                                    item={item}
+                                    left={0}
+                                    width={80}
+                                    color='red'/>);
+        expect(wrapper.state().dragging).toBe(false);    
+        wrapper.instance().doMouseDown({button:1,clientX:10,stopPropagation:stopPropagation},MOVE_RESIZE_RIGHT)    
+        expect(wrapper.state().dragging).toBe(false); 
+        expect(wrapper.state().mode).toBe(MODE_NONE); 
+        wrapper.instance().doMouseDown({button:0,clientX:10,stopPropagation:stopPropagation},MOVE_RESIZE_RIGHT)    
+        expect(wrapper.state().mode).toBe(MOVE_RESIZE_RIGHT);
+        expect(wrapper.state().dragging).toBe(true);       
+        expect(wrapper.state().left).toBe(0);   
+        expect(wrapper.instance().draggingPosition).toBe(10);       
+        expect(onChildDrag.mock.calls.length).toBe(1);
+        expect(onChildDrag.mock.calls[0][0]).toBe(true)  
+
+        wrapper.instance().doMouseMove({button:0,clientX:20})      
+        expect(wrapper.state().left).toBe(0);   
+        expect(wrapper.instance().draggingPosition).toBe(20);
+        let style=wrapper.instance().calculateStyle();     
+        expect(style.left).toBe(0);
+        expect(style.width).toBe(90);
+        expect(style.backgroundColor).toBe('red');
+        wrapper.instance().doMouseUp()
+        expect(wrapper.state().mode).toBe(MODE_NONE); 
+        expect(onChildDrag.mock.calls.length).toBe(2);
+        expect(onChildDrag.mock.calls[1][0]).toBe(false) 
+        expect(onUpdateItem.mock.calls.length).toBe(1);
+        expect(onUpdateItem.mock.calls[0][0]).toBe(item)
+        let new_start_date=DateHelper.pixelToDate(0,nowposition,dayWidth);
+        let new_end_date=DateHelper.pixelToDate(90,nowposition,dayWidth);
+
+        expect(new_start_date.getTime()-onUpdateItem.mock.calls[0][1].start.getTime()<10).toBe(true)
+        expect(new_end_date.getTime()-onUpdateItem.mock.calls[0][1].end.getTime()<10).toBe(true)
+
+
+    })
+    
 })

src/lib/Const.js

@@ -1,2 +0,7 @@
-export const BUFFER_DAYS=2;
-export const DATA_CONTAINER_WIDTH=5000;
+
+export const MODE_NONE              =0;
+export const MODE_MOVE              =1;
+export const MOVE_RESIZE_LEFT       =2;
+export const MOVE_RESIZE_RIGHT      =3;
+export const BUFFER_DAYS            =2;
+export const DATA_CONTAINER_WIDTH   =5000;

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

139668

increased by5.13%

Lines of code

1591

increased by8.01%

No dependency changes