@@ -118,6 +118,7 @@ export interface Props {
118118 resizeGrid ?: Grid ;
119119 bounds ?: string ;
120120 onMouseDown ?: ( e : MouseEvent ) => void ;
121+ onMouseUp ?: ( e : MouseEvent ) => void ;
121122 onResizeStart ?: RndResizeStartCallback ;
122123 onResize ?: RndResizeCallback ;
123124 onResizeStop ?: RndResizeCallback ;
@@ -169,7 +170,7 @@ interface DefaultProps {
169170 scale : number ;
170171}
171172
172- export class Rnd extends React . Component < Props , State > {
173+ export class Rnd extends React . PureComponent < Props , State > {
173174 public static defaultProps : DefaultProps = {
174175 maxWidth : Number . MAX_SAFE_INTEGER ,
175176 maxHeight : Number . MAX_SAFE_INTEGER ,
@@ -183,7 +184,8 @@ export class Rnd extends React.Component<Props, State> {
183184 } ;
184185 resizable ! : Resizable ;
185186 draggable ! : $TODO ; // Draggable;
186- isResizing = false ;
187+ resizing = false ;
188+ resizingPosition = { x : 0 , y : 0 } ;
187189
188190 constructor ( props : Props ) {
189191 super ( props ) ;
@@ -346,7 +348,8 @@ export class Rnd extends React.Component<Props, State> {
346348 elementRef : HTMLDivElement ,
347349 ) {
348350 e . stopPropagation ( ) ;
349- this . isResizing = true ;
351+ this . resizing = true ;
352+
350353 const scale = this . props . scale as number ;
351354 this . setState ( {
352355 original : this . getDraggablePosition ( ) ,
@@ -445,32 +448,28 @@ export class Rnd extends React.Component<Props, State> {
445448 const offset = this . getOffsetFromParent ( ) ;
446449 if ( / l e f t / i. test ( direction ) ) {
447450 x = this . state . original . x - delta . width ;
448- // INFO: If uncontrolled component, apply x position by resize to draggable.
449- if ( ! this . props . position ) {
450- this . draggable . setState ( { x } ) ;
451- }
451+ // INFO: Apply x position by resize to draggable.
452+ this . draggable . setState ( { x } ) ;
452453 x += offset . left ;
453454 }
454455 if ( / t o p / i. test ( direction ) ) {
455456 y = this . state . original . y - delta . height ;
456- // INFO: If uncontrolled component, apply y position by resize to draggable.
457- if ( ! this . props . position ) {
458- this . draggable . setState ( { y } ) ;
459- }
457+ // INFO: Apply x position by resize to draggable.
458+ this . draggable . setState ( { y } ) ;
460459 y += offset . top ;
461460 }
462- if ( this . props . onResize ) {
463- if ( typeof x === "undefined" ) {
464- x = this . getDraggablePosition ( ) . x + offset . left ;
465- }
466- if ( typeof y === "undefined" ) {
467- y = this . getDraggablePosition ( ) . y + offset . top ;
468- }
469- this . props . onResize ( e , direction , elementRef , delta , {
470- x,
471- y,
472- } ) ;
461+ if ( typeof x === "undefined" ) {
462+ x = this . getDraggablePosition ( ) . x + offset . left ;
473463 }
464+ if ( typeof y === "undefined" ) {
465+ y = this . getDraggablePosition ( ) . y + offset . top ;
466+ }
467+ this . resizingPosition = { x, y } ;
468+ if ( ! this . props . onResize ) return ;
469+ this . props . onResize ( e , direction , elementRef , delta , {
470+ x,
471+ y,
472+ } ) ;
474473 }
475474
476475 onResizeStop (
@@ -479,12 +478,11 @@ export class Rnd extends React.Component<Props, State> {
479478 elementRef : HTMLDivElement ,
480479 delta : { height : number ; width : number } ,
481480 ) {
482- this . isResizing = false ;
481+ this . resizing = false ;
483482 const { maxWidth, maxHeight } = this . getMaxSizesFromProps ( ) ;
484483 this . setState ( { maxWidth, maxHeight } ) ;
485484 if ( this . props . onResizeStop ) {
486- const position : Position = this . getDraggablePosition ( ) ;
487- this . props . onResizeStop ( e , direction , elementRef , delta , position ) ;
485+ this . props . onResizeStop ( e , direction , elementRef , delta , this . resizingPosition ) ;
488486 }
489487 }
490488
@@ -518,13 +516,24 @@ export class Rnd extends React.Component<Props, State> {
518516 } ;
519517 }
520518
519+ refDraggable = ( c : $TODO ) => {
520+ if ( ! c ) return ;
521+ this . draggable = c ;
522+ } ;
523+
524+ refResizable = ( c : Resizable | null ) => {
525+ if ( ! c ) return ;
526+ this . resizable = c ;
527+ } ;
528+
521529 render ( ) {
522530 const {
523531 disableDragging,
524532 style,
525533 dragHandleClassName,
526534 position,
527535 onMouseDown,
536+ onMouseUp,
528537 dragAxis,
529538 dragGrid,
530539 bounds,
@@ -564,34 +573,30 @@ export class Rnd extends React.Component<Props, State> {
564573 y : position . y - top ,
565574 } ;
566575 }
576+ // INFO: Make uncontorolled component when resizing to control position by setPostion.
577+ const pos = this . resizing ? undefined : draggablePosition
567578 return (
568579 < Draggable
569- ref = { ( c : $TODO ) => {
570- if ( ! c ) return ;
571- this . draggable = c ;
572- } }
580+ ref = { this . refDraggable }
573581 handle = { dragHandleClassName ? `.${ dragHandleClassName } : undefined }
574582 defaultPosition = { defaultValue }
575583 onMouseDown = { onMouseDown }
584+ onMouseUp = { onMouseUp }
576585 onStart = { this . onDragStart }
577586 onDrag = { this . onDrag }
578587 onStop = { this . onDragStop }
579588 axis = { dragAxis }
580589 disabled = { disableDragging }
581590 grid = { dragGrid }
582591 bounds = { bounds ? this . state . bounds : undefined }
583- position = { draggablePosition }
592+ position = { pos }
584593 enableUserSelectHack = { enableUserSelectHack }
585594 cancel = { cancel }
586595 scale = { scale }
587596 >
588597 < Resizable
589598 { ...resizableProps }
590- ref = { c => {
591- if ( c ) {
592- this . resizable = c ;
593- }
594- } }
599+ ref = { this . refResizable }
595600 defaultSize = { defaultValue }
596601 size = { this . props . size }
597602 enable = { enableResizing }
@@ -601,8 +606,8 @@ export class Rnd extends React.Component<Props, State> {
601606 style = { innerStyle }
602607 minWidth = { this . props . minWidth }
603608 minHeight = { this . props . minHeight }
604- maxWidth = { this . isResizing ? this . state . maxWidth : this . props . maxWidth }
605- maxHeight = { this . isResizing ? this . state . maxHeight : this . props . maxHeight }
609+ maxWidth = { this . resizing ? this . state . maxWidth : this . props . maxWidth }
610+ maxHeight = { this . resizing ? this . state . maxHeight : this . props . maxHeight }
606611 grid = { resizeGrid }
607612 handleWrapperClass = { resizeHandleWrapperClass }
608613 handleWrapperStyle = { resizeHandleWrapperStyle }
0 commit comments