Socket
Socket
Sign inDemoInstall

react-rnd

Package Overview
Dependencies
Maintainers
1
Versions
96
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-rnd - npm Package Compare versions

Comparing version 9.0.4 to 9.1.0

39

lib/index.d.ts
import * as React from "react";
import Draggable from "react-draggable";
import { DraggableEventHandler } from "react-draggable";
import Resizable, { ResizableDirection } from "re-resizable";
declare type $TODO = any;
export declare type Grid = [number, number];

@@ -16,3 +17,4 @@ export declare type Position = {

} & Position;
export declare type RndDragCallback = (e: Event, data: DraggableData) => void | false;
export declare type RndDragCallback = DraggableEventHandler;
export declare type RndDragEvent = React.MouseEvent<HTMLElement | SVGElement> | React.TouchEvent<HTMLElement | SVGElement> | MouseEvent | TouchEvent;
export declare type RndResizeStartCallback = (e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, dir: ResizableDirection, elementRef: HTMLDivElement) => void;

@@ -113,17 +115,20 @@ export declare type ResizableDelta = {

enableUserSelectHack?: boolean;
scale?: number;
[key: string]: any;
}
interface DefaultProps {
maxWidth: number;
maxHeight: number;
onResizeStart: RndResizeStartCallback;
onResize: RndResizeCallback;
onResizeStop: RndResizeCallback;
onDragStart: RndDragCallback;
onDrag: RndDragCallback;
onDragStop: RndDragCallback;
scale: number;
}
export declare class Rnd extends React.Component<Props, State> {
static defaultProps: {
maxWidth: number;
maxHeight: number;
onResizeStart: () => void;
onResize: () => void;
onResizeStop: () => void;
onDragStart: () => void;
onDrag: () => void;
onDragStop: () => void;
};
static defaultProps: DefaultProps;
resizable: Resizable;
draggable: Draggable;
draggable: $TODO;
isResizing: boolean;

@@ -143,5 +148,7 @@ constructor(props: Props);

getSelfElement(): Element;
onDragStart(e: Event, data: DraggableData): void;
onDrag(e: Event, data: DraggableData): void;
onDragStop(e: Event, data: DraggableData): void;
getOffsetHeight(boundary: HTMLElement): number;
getOffsetWidth(boundary: HTMLElement): number;
onDragStart(e: RndDragEvent, data: DraggableData): void;
onDrag(e: RndDragEvent, data: DraggableData): void;
onDragStop(e: RndDragEvent, data: DraggableData): void;
onResizeStart(e: React.MouseEvent<HTMLDivElement> | React.TouchEvent<HTMLDivElement>, dir: ResizableDirection, elementRef: HTMLDivElement): void;

@@ -148,0 +155,0 @@ onResize(e: MouseEvent | TouchEvent, direction: ResizableDirection, elementRef: HTMLDivElement, delta: {

92

lib/index.es5.js

@@ -8,3 +8,2 @@ 'use strict';

var React = require('react');
var Draggable = _interopDefault(require('react-draggable'));
var Resizable = _interopDefault(require('re-resizable'));

@@ -56,2 +55,3 @@

var Draggable = require("react-draggable");
var resizableStyle = {

@@ -122,2 +122,24 @@ width: "auto",

};
Rnd.prototype.getOffsetHeight = function (boundary) {
var scale = this.props.scale;
switch (this.props.bounds) {
case "window":
return window.innerHeight / scale;
case "body":
return document.body.offsetHeight / scale;
default:
return boundary.offsetHeight;
}
};
Rnd.prototype.getOffsetWidth = function (boundary) {
var scale = this.props.scale;
switch (this.props.bounds) {
case "window":
return window.innerWidth / scale;
case "body":
return document.body.offsetWidth / scale;
default:
return boundary.offsetWidth;
}
};
Rnd.prototype.onDragStart = function (e, data) {

@@ -130,2 +152,3 @@ if (this.props.onDragStart) {

var parent = this.getParent();
var scale = this.props.scale;
var boundary;

@@ -136,3 +159,11 @@ if (this.props.bounds === "parent") {

else if (this.props.bounds === "body") {
boundary = document.body;
var parentRect_1 = parent.getBoundingClientRect();
var parentLeft_1 = parentRect_1.left;
var parentTop_1 = parentRect_1.top;
var bodyRect = document.body.getBoundingClientRect();
var left_1 = -(parentLeft_1 - parent.offsetLeft * scale - bodyRect.left) / scale;
var top_1 = -(parentTop_1 - parent.offsetTop * scale - bodyRect.top) / scale;
var right = (document.body.offsetWidth - this.resizable.size.width * scale) / scale + left_1;
var bottom = (document.body.offsetHeight - this.resizable.size.height * scale) / scale + top_1;
return this.setState({ bounds: { top: top_1, right: right, bottom: bottom, left: left_1 } });
}

@@ -142,10 +173,10 @@ else if (this.props.bounds === "window") {

return;
return this.setState({
bounds: {
top: 0,
right: window.innerWidth - this.resizable.size.width,
bottom: window.innerHeight - this.resizable.size.height,
left: 0,
},
});
var parentRect_2 = parent.getBoundingClientRect();
var parentLeft_2 = parentRect_2.left;
var parentTop_2 = parentRect_2.top;
var left_2 = -(parentLeft_2 - parent.offsetLeft * scale) / scale;
var top_2 = -(parentTop_2 - parent.offsetTop * scale) / scale;
var right = (window.innerWidth - this.resizable.size.width * scale) / scale + left_2;
var bottom = (window.innerHeight - this.resizable.size.height * scale) / scale + top_2;
return this.setState({ bounds: { top: top_2, right: right, bottom: bottom, left: left_2 } });
}

@@ -164,3 +195,3 @@ else {

var parentTop = parentRect.top;
var left = boundaryLeft - parentLeft;
var left = (boundaryLeft - parentLeft) / scale;
var top = boundaryTop - parentTop;

@@ -173,5 +204,5 @@ if (!this.resizable)

top: top - offset.top,
right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left,
right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left / scale,
bottom: top + (boundary.offsetHeight - this.resizable.size.height) - offset.top,
left: left - offset.left,
left: left - offset.left / scale,
},

@@ -188,4 +219,4 @@ });

if (this.props.onDragStop) {
var _a = this.getOffsetFromParent(), left = _a.left, top_1 = _a.top;
this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_1 }));
var _a = this.getOffsetFromParent(), left = _a.left, top_3 = _a.top;
this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_3 }));
}

@@ -196,2 +227,3 @@ };

this.isResizing = true;
var scale = this.props.scale;
this.setState({

@@ -245,4 +277,4 @@ original: this.getDraggablePosition(),

var boundaryTop = boundaryRect.top;
var offsetWidth = this.props.bounds === "window" ? window.innerWidth : boundary.offsetWidth;
var offsetHeight = this.props.bounds === "window" ? window.innerHeight : boundary.offsetHeight;
var offsetWidth = this.getOffsetWidth(boundary);
var offsetHeight = this.getOffsetHeight(boundary);
var hasLeft = dir.toLowerCase().endsWith("left");

@@ -253,3 +285,3 @@ var hasRight = dir.toLowerCase().endsWith("right");

if (hasLeft && this.resizable) {
var max = selfLeft - boundaryLeft + this.resizable.size.width;
var max = (selfLeft - boundaryLeft) / scale + this.resizable.size.width;
this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });

@@ -259,7 +291,7 @@ }

if (hasRight || (this.props.lockAspectRatio && !hasLeft)) {
var max = offsetWidth + (boundaryLeft - selfLeft);
var max = offsetWidth + (boundaryLeft - selfLeft) / scale;
this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
}
if (hasTop && this.resizable) {
var max = selfTop - boundaryTop + this.resizable.size.height;
var max = (selfTop - boundaryTop) / scale + this.resizable.size.height;
this.setState({

@@ -271,3 +303,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,

if (hasBottom || (this.props.lockAspectRatio && !hasTop)) {
var max = offsetHeight + (boundaryTop - selfTop);
var max = offsetHeight + (boundaryTop - selfTop) / scale;
this.setState({

@@ -340,2 +372,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,

Rnd.prototype.getOffsetFromParent = function () {
var scale = this.props.scale;
var parent = this.getParent();

@@ -354,4 +387,4 @@ if (!parent) {

return {
left: selfRect.left - parentLeft - position.x,
top: selfRect.top - parentTop - position.y,
left: selfRect.left - parentLeft - position.x * scale,
top: selfRect.top - parentTop - position.y * scale,
};

@@ -361,3 +394,3 @@ };

var _this = this;
var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, dragAxis = _a.dragAxis, dragGrid = _a.dragGrid, bounds = _a.bounds, enableUserSelectHack = _a.enableUserSelectHack, cancel = _a.cancel, children = _a.children, onResizeStart = _a.onResizeStart, onResize = _a.onResize, onResizeStop = _a.onResizeStop, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragStop = _a.onDragStop, resizeHandleStyles = _a.resizeHandleStyles, resizeHandleClasses = _a.resizeHandleClasses, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle"]);
var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, dragAxis = _a.dragAxis, dragGrid = _a.dragGrid, bounds = _a.bounds, enableUserSelectHack = _a.enableUserSelectHack, cancel = _a.cancel, children = _a.children, onResizeStart = _a.onResizeStart, onResize = _a.onResize, onResizeStop = _a.onResizeStop, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragStop = _a.onDragStop, resizeHandleStyles = _a.resizeHandleStyles, resizeHandleClasses = _a.resizeHandleClasses, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, scale = _a.scale, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle", "scale"]);
var defaultValue = this.props.default ? __assign({}, this.props.default) : undefined;

@@ -377,6 +410,6 @@ // Remove unknown props, see also https://reactjs.org/warnings/unknown-prop.html

return (React.createElement(Draggable, { ref: function (c) {
if (c) {
_this.draggable = c;
}
}, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: draggablePosition, enableUserSelectHack: enableUserSelectHack, cancel: cancel },
if (!c)
return;
_this.draggable = c;
}, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: draggablePosition, enableUserSelectHack: enableUserSelectHack, cancel: cancel, scale: scale },
React.createElement(Resizable, __assign({}, resizableProps, { ref: function (c) {

@@ -386,3 +419,3 @@ if (c) {

}
}, defaultSize: defaultValue, size: this.props.size, enable: enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.isResizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.isResizing ? this.state.maxHeight : this.props.maxHeight, grid: resizeGrid, handleWrapperClass: resizeHandleWrapperClass, handleWrapperStyle: resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: resizeHandleStyles, handleClasses: resizeHandleClasses }), children)));
}, defaultSize: defaultValue, size: this.props.size, enable: enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.isResizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.isResizing ? this.state.maxHeight : this.props.maxHeight, grid: resizeGrid, handleWrapperClass: resizeHandleWrapperClass, handleWrapperStyle: resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: resizeHandleStyles, handleClasses: resizeHandleClasses, scale: this.props.scale }), children)));
};

@@ -392,2 +425,3 @@ Rnd.defaultProps = {

maxHeight: Number.MAX_SAFE_INTEGER,
scale: 1,
onResizeStart: function () { },

@@ -394,0 +428,0 @@ onResize: function () { },

92

lib/index.js
import { createElement, Component } from 'react';
import Draggable from 'react-draggable';
import Resizable from 're-resizable';

@@ -49,2 +48,3 @@

var Draggable = require("react-draggable");
var resizableStyle = {

@@ -115,2 +115,24 @@ width: "auto",

};
Rnd.prototype.getOffsetHeight = function (boundary) {
var scale = this.props.scale;
switch (this.props.bounds) {
case "window":
return window.innerHeight / scale;
case "body":
return document.body.offsetHeight / scale;
default:
return boundary.offsetHeight;
}
};
Rnd.prototype.getOffsetWidth = function (boundary) {
var scale = this.props.scale;
switch (this.props.bounds) {
case "window":
return window.innerWidth / scale;
case "body":
return document.body.offsetWidth / scale;
default:
return boundary.offsetWidth;
}
};
Rnd.prototype.onDragStart = function (e, data) {

@@ -123,2 +145,3 @@ if (this.props.onDragStart) {

var parent = this.getParent();
var scale = this.props.scale;
var boundary;

@@ -129,3 +152,11 @@ if (this.props.bounds === "parent") {

else if (this.props.bounds === "body") {
boundary = document.body;
var parentRect_1 = parent.getBoundingClientRect();
var parentLeft_1 = parentRect_1.left;
var parentTop_1 = parentRect_1.top;
var bodyRect = document.body.getBoundingClientRect();
var left_1 = -(parentLeft_1 - parent.offsetLeft * scale - bodyRect.left) / scale;
var top_1 = -(parentTop_1 - parent.offsetTop * scale - bodyRect.top) / scale;
var right = (document.body.offsetWidth - this.resizable.size.width * scale) / scale + left_1;
var bottom = (document.body.offsetHeight - this.resizable.size.height * scale) / scale + top_1;
return this.setState({ bounds: { top: top_1, right: right, bottom: bottom, left: left_1 } });
}

@@ -135,10 +166,10 @@ else if (this.props.bounds === "window") {

return;
return this.setState({
bounds: {
top: 0,
right: window.innerWidth - this.resizable.size.width,
bottom: window.innerHeight - this.resizable.size.height,
left: 0,
},
});
var parentRect_2 = parent.getBoundingClientRect();
var parentLeft_2 = parentRect_2.left;
var parentTop_2 = parentRect_2.top;
var left_2 = -(parentLeft_2 - parent.offsetLeft * scale) / scale;
var top_2 = -(parentTop_2 - parent.offsetTop * scale) / scale;
var right = (window.innerWidth - this.resizable.size.width * scale) / scale + left_2;
var bottom = (window.innerHeight - this.resizable.size.height * scale) / scale + top_2;
return this.setState({ bounds: { top: top_2, right: right, bottom: bottom, left: left_2 } });
}

@@ -157,3 +188,3 @@ else {

var parentTop = parentRect.top;
var left = boundaryLeft - parentLeft;
var left = (boundaryLeft - parentLeft) / scale;
var top = boundaryTop - parentTop;

@@ -166,5 +197,5 @@ if (!this.resizable)

top: top - offset.top,
right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left,
right: left + (boundary.offsetWidth - this.resizable.size.width) - offset.left / scale,
bottom: top + (boundary.offsetHeight - this.resizable.size.height) - offset.top,
left: left - offset.left,
left: left - offset.left / scale,
},

@@ -181,4 +212,4 @@ });

if (this.props.onDragStop) {
var _a = this.getOffsetFromParent(), left = _a.left, top_1 = _a.top;
this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_1 }));
var _a = this.getOffsetFromParent(), left = _a.left, top_3 = _a.top;
this.props.onDragStop(e, __assign({}, data, { x: data.x + left, y: data.y + top_3 }));
}

@@ -189,2 +220,3 @@ };

this.isResizing = true;
var scale = this.props.scale;
this.setState({

@@ -238,4 +270,4 @@ original: this.getDraggablePosition(),

var boundaryTop = boundaryRect.top;
var offsetWidth = this.props.bounds === "window" ? window.innerWidth : boundary.offsetWidth;
var offsetHeight = this.props.bounds === "window" ? window.innerHeight : boundary.offsetHeight;
var offsetWidth = this.getOffsetWidth(boundary);
var offsetHeight = this.getOffsetHeight(boundary);
var hasLeft = dir.toLowerCase().endsWith("left");

@@ -246,3 +278,3 @@ var hasRight = dir.toLowerCase().endsWith("right");

if (hasLeft && this.resizable) {
var max = selfLeft - boundaryLeft + this.resizable.size.width;
var max = (selfLeft - boundaryLeft) / scale + this.resizable.size.width;
this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });

@@ -252,7 +284,7 @@ }

if (hasRight || (this.props.lockAspectRatio && !hasLeft)) {
var max = offsetWidth + (boundaryLeft - selfLeft);
var max = offsetWidth + (boundaryLeft - selfLeft) / scale;
this.setState({ maxWidth: max > Number(maxWidth) ? maxWidth : max });
}
if (hasTop && this.resizable) {
var max = selfTop - boundaryTop + this.resizable.size.height;
var max = (selfTop - boundaryTop) / scale + this.resizable.size.height;
this.setState({

@@ -264,3 +296,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,

if (hasBottom || (this.props.lockAspectRatio && !hasTop)) {
var max = offsetHeight + (boundaryTop - selfTop);
var max = offsetHeight + (boundaryTop - selfTop) / scale;
this.setState({

@@ -333,2 +365,3 @@ maxHeight: max > Number(maxHeight) ? maxHeight : max,

Rnd.prototype.getOffsetFromParent = function () {
var scale = this.props.scale;
var parent = this.getParent();

@@ -347,4 +380,4 @@ if (!parent) {

return {
left: selfRect.left - parentLeft - position.x,
top: selfRect.top - parentTop - position.y,
left: selfRect.left - parentLeft - position.x * scale,
top: selfRect.top - parentTop - position.y * scale,
};

@@ -354,3 +387,3 @@ };

var _this = this;
var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, dragAxis = _a.dragAxis, dragGrid = _a.dragGrid, bounds = _a.bounds, enableUserSelectHack = _a.enableUserSelectHack, cancel = _a.cancel, children = _a.children, onResizeStart = _a.onResizeStart, onResize = _a.onResize, onResizeStop = _a.onResizeStop, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragStop = _a.onDragStop, resizeHandleStyles = _a.resizeHandleStyles, resizeHandleClasses = _a.resizeHandleClasses, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle"]);
var _a = this.props, disableDragging = _a.disableDragging, style = _a.style, dragHandleClassName = _a.dragHandleClassName, position = _a.position, onMouseDown = _a.onMouseDown, dragAxis = _a.dragAxis, dragGrid = _a.dragGrid, bounds = _a.bounds, enableUserSelectHack = _a.enableUserSelectHack, cancel = _a.cancel, children = _a.children, onResizeStart = _a.onResizeStart, onResize = _a.onResize, onResizeStop = _a.onResizeStop, onDragStart = _a.onDragStart, onDrag = _a.onDrag, onDragStop = _a.onDragStop, resizeHandleStyles = _a.resizeHandleStyles, resizeHandleClasses = _a.resizeHandleClasses, enableResizing = _a.enableResizing, resizeGrid = _a.resizeGrid, resizeHandleWrapperClass = _a.resizeHandleWrapperClass, resizeHandleWrapperStyle = _a.resizeHandleWrapperStyle, scale = _a.scale, resizableProps = __rest(_a, ["disableDragging", "style", "dragHandleClassName", "position", "onMouseDown", "dragAxis", "dragGrid", "bounds", "enableUserSelectHack", "cancel", "children", "onResizeStart", "onResize", "onResizeStop", "onDragStart", "onDrag", "onDragStop", "resizeHandleStyles", "resizeHandleClasses", "enableResizing", "resizeGrid", "resizeHandleWrapperClass", "resizeHandleWrapperStyle", "scale"]);
var defaultValue = this.props.default ? __assign({}, this.props.default) : undefined;

@@ -370,6 +403,6 @@ // Remove unknown props, see also https://reactjs.org/warnings/unknown-prop.html

return (createElement(Draggable, { ref: function (c) {
if (c) {
_this.draggable = c;
}
}, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: draggablePosition, enableUserSelectHack: enableUserSelectHack, cancel: cancel },
if (!c)
return;
_this.draggable = c;
}, handle: dragHandleClassName ? "." + dragHandleClassName : undefined, defaultPosition: defaultValue, onMouseDown: onMouseDown, onStart: this.onDragStart, onDrag: this.onDrag, onStop: this.onDragStop, axis: dragAxis, disabled: disableDragging, grid: dragGrid, bounds: bounds ? this.state.bounds : undefined, position: draggablePosition, enableUserSelectHack: enableUserSelectHack, cancel: cancel, scale: scale },
createElement(Resizable, __assign({}, resizableProps, { ref: function (c) {

@@ -379,3 +412,3 @@ if (c) {

}
}, defaultSize: defaultValue, size: this.props.size, enable: enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.isResizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.isResizing ? this.state.maxHeight : this.props.maxHeight, grid: resizeGrid, handleWrapperClass: resizeHandleWrapperClass, handleWrapperStyle: resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: resizeHandleStyles, handleClasses: resizeHandleClasses }), children)));
}, defaultSize: defaultValue, size: this.props.size, enable: enableResizing, onResizeStart: this.onResizeStart, onResize: this.onResize, onResizeStop: this.onResizeStop, style: innerStyle, minWidth: this.props.minWidth, minHeight: this.props.minHeight, maxWidth: this.isResizing ? this.state.maxWidth : this.props.maxWidth, maxHeight: this.isResizing ? this.state.maxHeight : this.props.maxHeight, grid: resizeGrid, handleWrapperClass: resizeHandleWrapperClass, handleWrapperStyle: resizeHandleWrapperStyle, lockAspectRatio: this.props.lockAspectRatio, lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth, lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight, handleStyles: resizeHandleStyles, handleClasses: resizeHandleClasses, scale: this.props.scale }), children)));
};

@@ -385,2 +418,3 @@ Rnd.defaultProps = {

maxHeight: Number.MAX_SAFE_INTEGER,
scale: 1,
onResizeStart: function () { },

@@ -387,0 +421,0 @@ onResize: function () { },

84

lib/index.test.js

@@ -51,7 +51,7 @@ "use strict";

var ava_1 = __importDefault(require("ava"));
var react_1 = __importDefault(require("react"));
var React = __importStar(require("react"));
var sinon_1 = require("sinon");
var enzyme_1 = __importStar(require("enzyme"));
var enzyme_adapter_react_16_1 = __importDefault(require("enzyme-adapter-react-16"));
var _1 = __importDefault(require("./"));
var _1 = require("./");
enzyme_1.default.configure({ adapter: new enzyme_adapter_react_16_1.default() });

@@ -81,3 +81,3 @@ var mouseMove = function (x, y) {

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 } }));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 } }));
t.truthy(!!rnd);

@@ -90,3 +90,3 @@ return [2 /*return*/];

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { className: "custom-class-name", default: { x: 100, y: 100, width: 100, height: 100 } }));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { className: "custom-class-name", default: { x: 100, y: 100, width: 100, height: 100 } }));
t.truthy(rnd.getDOMNode().classList.contains("custom-class-name"));

@@ -99,3 +99,3 @@ return [2 /*return*/];

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -121,3 +121,3 @@ right: "handler",

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, enableResizing: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, enableResizing: {
top: false,

@@ -150,3 +150,3 @@ right: false,

onMouseDown = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, onMouseDown: onMouseDown }));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, onMouseDown: onMouseDown }));
rnd

@@ -165,3 +165,3 @@ .find("div")

onDragStart = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, onDragStart: onDragStart }));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, onDragStart: onDragStart }));
rnd

@@ -182,3 +182,3 @@ .find("div")

onDrag = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, onDrag: onDrag }));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, onDrag: onDrag }));
rnd

@@ -200,3 +200,3 @@ .find("div")

onDragStop = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, onDragStop: onDragStop }));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, onDragStop: onDragStop }));
rnd

@@ -218,3 +218,3 @@ .find("div")

onDrag = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { onDrag: onDrag, dragAxis: "none", default: { x: 100, y: 100, width: 100, height: 100 } }), {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { onDrag: onDrag, dragAxis: "none", default: { x: 100, y: 100, width: 100, height: 100 } }), {
attachTo: document.querySelector("div"),

@@ -236,3 +236,3 @@ });

onDrag = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { onDrag: onDrag, dragAxis: "x", default: { x: 100, y: 100, width: 100, height: 100 } }), {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { onDrag: onDrag, dragAxis: "x", default: { x: 100, y: 100, width: 100, height: 100 } }), {
attachTo: document.querySelector("div"),

@@ -254,3 +254,3 @@ });

onDrag = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { onDrag: onDrag, dragAxis: "y", default: { x: 100, y: 100, width: 100, height: 100 } }), {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { onDrag: onDrag, dragAxis: "y", default: { x: 100, y: 100, width: 100, height: 100 } }), {
attachTo: document.querySelector("div"),

@@ -272,3 +272,3 @@ });

onDrag = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { onDrag: onDrag, dragAxis: "both", default: { x: 100, y: 100, width: 100, height: 100 } }), {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { onDrag: onDrag, dragAxis: "both", default: { x: 100, y: 100, width: 100, height: 100 } }), {
attachTo: document.querySelector("div"),

@@ -289,3 +289,3 @@ });

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { dragGrid: [30, 100], default: { x: 100, y: 100, width: 100, height: 100 } }), {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { dragGrid: [30, 100], default: { x: 100, y: 100, width: 100, height: 100 } }), {
attachTo: document.querySelector("div"),

@@ -305,3 +305,3 @@ });

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { dragGrid: [30, 100], default: { x: 100, y: 100, width: 100, height: 100 } }), {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { dragGrid: [30, 100], default: { x: 100, y: 100, width: 100, height: 100 } }), {
attachTo: document.querySelector("div"),

@@ -321,4 +321,4 @@ });

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement("div", { style: { width: "800px", height: "600px" } },
react_1.default.createElement(_1.default, { bounds: "parent", default: { x: 0, y: 0, width: 100, height: 100 } })), { attachTo: document.querySelector("div") });
rnd = enzyme_1.mount(React.createElement("div", { style: { width: "800px", height: "600px" } },
React.createElement(_1.Rnd, { bounds: "parent", default: { x: 0, y: 0, width: 100, height: 100 } })), { attachTo: document.querySelector("div") });
rnd

@@ -342,5 +342,5 @@ .find("div")

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement("div", { className: "target", style: { width: "1000px", height: "800px" } },
react_1.default.createElement("div", { style: { width: "800px", height: "600px" } },
react_1.default.createElement(_1.default, { className: "rnd", bounds: ".target", default: { x: 100, y: 100, width: 100, height: 100 } }))), { attachTo: document.querySelector("div") });
rnd = enzyme_1.mount(React.createElement("div", { className: "target", style: { width: "1000px", height: "800px" } },
React.createElement("div", { style: { width: "800px", height: "600px" } },
React.createElement(_1.Rnd, { className: "rnd", bounds: ".target", default: { x: 100, y: 100, width: 100, height: 100 } }))), { attachTo: document.querySelector("div") });
rnd

@@ -366,3 +366,3 @@ .find("div")

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -386,3 +386,3 @@ right: "handler",

onResizeStart = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -420,3 +420,3 @@ right: "handler",

onResizeStart = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -459,3 +459,3 @@ right: "handler",

onResizeStop = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -499,3 +499,3 @@ right: "handler",

onResizeStart = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -538,3 +538,3 @@ right: "handler",

onResizeStart = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -576,3 +576,3 @@ right: "handler",

onResize = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -609,3 +609,3 @@ right: "handler",

onResize = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -642,3 +642,3 @@ right: "handler",

onResize = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -675,3 +675,3 @@ right: "handler",

onResize = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -708,3 +708,3 @@ right: "handler",

onResize = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -742,4 +742,4 @@ right: "handler",

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement("div", { style: { width: "800px", height: "600px" } },
react_1.default.createElement(_1.default, { default: { x: 0, y: 0, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement("div", { style: { width: "800px", height: "600px" } },
React.createElement(_1.Rnd, { default: { x: 0, y: 0, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -776,5 +776,5 @@ right: "handler",

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement("div", { className: "target", style: { width: "1000px", height: "800px" } },
react_1.default.createElement("div", { style: { width: "800px", height: "600px" } },
react_1.default.createElement(_1.default, { default: { x: 0, y: 0, width: 100, height: 100 }, resizeHandleClasses: {
rnd = enzyme_1.mount(React.createElement("div", { className: "target", style: { width: "1000px", height: "800px" } },
React.createElement("div", { style: { width: "800px", height: "600px" } },
React.createElement(_1.Rnd, { default: { x: 0, y: 0, width: 100, height: 100 }, resizeHandleClasses: {
top: "handler",

@@ -817,3 +817,3 @@ right: "handler",

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 } }));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 } }));
rnd.instance().updatePosition({ x: 200, y: 300 });

@@ -827,3 +827,3 @@ t.not((rnd.getDOMNode().getAttribute("style") || "").indexOf("transform: translate(200px, 300px)"), -1);

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { default: { x: 100, y: 100, width: 100, height: 100 } }));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { default: { x: 100, y: 100, width: 100, height: 100 } }));
rnd.instance().updateSize({ width: 200, height: 300 });

@@ -839,4 +839,4 @@ t.is(rnd.getDOMNode().style.width, "200px");

onDrag = sinon_1.spy();
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { dragHandleClassName: "handle", onDrag: onDrag, default: { x: 100, y: 100, width: 100, height: 100 } },
react_1.default.createElement("div", { className: "handle" }, "Test")));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { dragHandleClassName: "handle", onDrag: onDrag, default: { x: 100, y: 100, width: 100, height: 100 } },
React.createElement("div", { className: "handle" }, "Test")));
rnd.find("div.handle").simulate("mousedown", { clientX: 0, clientY: 0 });

@@ -851,3 +851,3 @@ mouseMove(200, 220);

return __generator(this, function (_a) {
rnd = enzyme_1.mount(react_1.default.createElement(_1.default, { "data-foo": "42" }, "Test"));
rnd = enzyme_1.mount(React.createElement(_1.Rnd, { "data-foo": "42" }, "Test"));
t.is(!!rnd.find("[data-foo]"), true);

@@ -854,0 +854,0 @@ return [2 /*return*/];

43

package.json
{
"name": "react-rnd",
"version": "9.0.4",
"version": "9.1.0",
"description": "",

@@ -49,31 +49,32 @@ "title": "react-rnd",

"@types/react": "16.4.1",
"@types/react-dom": "16.0.7",
"@types/sinon": "5.0.1",
"@types/node": "^10.12.19",
"@types/react-dom": "16.0.11",
"@types/sinon": "7.0.5",
"@types/storybook__addon-actions": "3.4.1",
"@types/storybook__react": "3.0.9",
"@types/storybook__react": "4.0.0",
"avaron": "0.2.0",
"cpy-cli": "2.0.0",
"enzyme": "3.5.0",
"enzyme-adapter-react-16": "1.2.0",
"gh-pages": "2.0.0",
"enzyme": "3.8.0",
"enzyme-adapter-react-16": "1.8.0",
"gh-pages": "2.0.1",
"light-ts-loader": "1.1.2",
"npm-run-all": "4.1.3",
"prettier": "1.15.1",
"react": "16.4.2",
"react-dom": "16.4.2",
"react-test-renderer": "16.4.2",
"npm-run-all": "4.1.5",
"prettier": "1.16.1",
"react": "16.7.0",
"react-dom": "16.7.0",
"react-test-renderer": "16.7.0",
"rollup": "0.61.1",
"rollup-plugin-babel": "3.0.5",
"rollup-plugin-commonjs": "9.1.8",
"rollup-plugin-node-globals": "1.2.1",
"rollup-plugin-commonjs": "9.2.0",
"rollup-plugin-node-globals": "1.4.0",
"rollup-plugin-node-resolve": "3.3.0",
"rollup-plugin-replace": "2.0.0",
"rollup-plugin-replace": "2.1.0",
"rollup-plugin-typescript2": "0.15.0",
"rollup-watch": "4.3.1",
"sinon": "7.1.1",
"tslint": "5.11.0",
"sinon": "7.2.3",
"tslint": "5.12.1",
"tslint-eslint-rules": "5.4.0",
"tslint-plugin-prettier": "2.0.0",
"tslint-plugin-prettier": "2.0.1",
"tslint-react": "3.6.0",
"typescript": "3.0.1"
"typescript": "3.2.4"
},

@@ -87,6 +88,6 @@ "files": [

"dependencies": {
"re-resizable": "4.9.3",
"react-draggable": "3.0.5",
"re-resizable": "4.11.0",
"react-draggable": "3.1.1",
"tslib": "1.9.3"
}
}

5

README.md

@@ -481,2 +481,7 @@ <p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>

#### v9.1.0
- Feat: Add `scale` props. #482
- Feat: Upgrade deps.
#### v9.0.4

@@ -483,0 +488,0 @@

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc