Created
April 23, 2018 18:24
-
-
Save samuelstevens9/70c520f4dc7eb25dd797daabc0acfd66 to your computer and use it in GitHub Desktop.
React Drag and Resize Component
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from "react" | |
import { DragDropContainer } from 'react-drag-drop-container'; | |
import { Resizable, ResizableBox } from 'react-resizable'; | |
export default class DragAndResize extends React.Component { | |
constructor(props) { | |
super(props) | |
this.state = { | |
noDragging:false, | |
clipperWidth:100, | |
maxWidth:-1, | |
}; | |
this.startX = null; | |
} | |
componentDidMount() {} | |
componentWillReceiveProps(np) {} | |
onDragStart(dragData){ | |
console.log("onDragStart"); | |
this.setState({noDragging:false}) | |
} | |
onDrag(dragData, currentTarget, x, y){ | |
if(this.startX === null){ | |
this.startX = x; | |
} | |
//this.refs.dc => clipper Box | |
//this.refs.dc.parentElement => ResizableBox | |
//this.refs.dc.parentElement.parentElement => DragDropContainer | |
//this.refs.dc.parentElement.parentElement.parentElement => True Parent from other component | |
var parentComponent = this.refs.dc.parentElement.parentElement.parentElement; | |
var dragContainer = this.refs.dc.parentElement.parentElement; | |
var clientWidth= parentComponent.clientWidth;//860;//672 | |
var maxLeft = clientWidth-this.refs.dc.parentElement.clientWidth; | |
var offsetLeft = this.refs.dc.parentElement.parentElement.offsetLeft; | |
//console.log("onDrag",dragData,currentTarget,x,y); | |
//console.log("this.refs.dc.parentElement.offsetLeft",this.refs.dc.parentElement.offsetLeft,this.refs.dc.parentElement.clientWidth); | |
//console.log("this.refs.dc.parentElement.parentElement",this.refs.dc.parentElement.parentElement.clientWidth); | |
//console.log("dragContainer.style.left",dragContainer.style.left,offsetLeft); | |
var maxWidth = clientWidth-offsetLeft; | |
this.setState({maxWidth}); | |
if(offsetLeft < 0){ | |
if(this.startX - x > 0){ //moving <- left so stop it, else continue so we don't get stuck | |
this.setState({noDragging:true}) | |
} | |
} | |
if(offsetLeft > maxLeft){ | |
if(this.startX - x < 0){ //moving -> right so stop it, else continue so we don't get stuck | |
this.setState({noDragging:true}) | |
} | |
} | |
} | |
onDragEnd(dragData, currentTarget, x, y){ | |
console.log("onDragEnd"); | |
this.startX = null; | |
this.setState({noDragging:false}) | |
} | |
onResize(event, {element, size}) { | |
this.setState({clipperWidth: size.width}); | |
} | |
onResizeStart(event, data){ | |
console.log("onResizeStart"); | |
this.setState({noDragging:true}); | |
} | |
onResizeStop(event,data){ | |
console.log("onResizeStop"); | |
this.setState({noDragging:false}); | |
} | |
render() { | |
let maxWidth = this.state.maxWidth; | |
if(maxWidth == -1 && this.refs.dc && this.refs.dc.parentElement.parentElement.parentElement.clientWidth){ | |
maxWidth = this.refs.dc.parentElement.parentElement.parentElement.clientWidth; | |
} | |
return ( | |
<DragDropContainer xOnly={true} noDragging={this.state.noDragging} | |
onDrag={this.onDrag.bind(this)} | |
onDragStart={this.onDragStart.bind(this)} | |
onDragEnd={this.onDragEnd.bind(this)} | |
> | |
<ResizableBox width={this.state.clipperWidth} height={30} axis={"x"} | |
maxConstraints={[maxWidth, 30]} | |
onResize={this.onResize.bind(this)} | |
onResizeStart={this.onResizeStart.bind(this)} | |
onResizeStop={this.onResizeStop.bind(this)} | |
> | |
<div ref="dc" id={this.props.id?this.props.id:""} className={"tl-drag-and-resize "+(this.props.className?this.props.className:"")} | |
style={{width:this.state.clipperWidth+"px"}}> | |
</div> | |
</ResizableBox> | |
</DragDropContainer> | |
) | |
} | |
} | |
module.exports = DragAndResize |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.tl-drag-and-resize{ | |
background: rgba(255,0,0,0.3); | |
height: 30px; | |
width: 100%; | |
} | |
/***** https://github.com/STRML/react-resizable ******/ | |
.react-resizable { | |
position: relative; | |
} | |
.react-resizable-handle { | |
position: absolute; | |
width: 20px; | |
height: 100%; | |
bottom: 0; | |
right: 0; | |
border-right: 4px solid #F00; | |
background-repeat: no-repeat; | |
background-origin: content-box; | |
box-sizing: border-box; | |
cursor: e-resize; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment