Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
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 7.3.0 to 7.3.1

160

lib/index.es5.js
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

@@ -10,119 +12,2 @@

var asyncGenerator = function () {
function AwaitValue(value) {
this.value = value;
}
function AsyncGenerator(gen) {
var front, back;
function send(key, arg) {
return new Promise(function (resolve, reject) {
var request = {
key: key,
arg: arg,
resolve: resolve,
reject: reject,
next: null
};
if (back) {
back = back.next = request;
} else {
front = back = request;
resume(key, arg);
}
});
}
function resume(key, arg) {
try {
var result = gen[key](arg);
var value = result.value;
if (value instanceof AwaitValue) {
Promise.resolve(value.value).then(function (arg) {
resume("next", arg);
}, function (arg) {
resume("throw", arg);
});
} else {
settle(result.done ? "return" : "normal", result.value);
}
} catch (err) {
settle("throw", err);
}
}
function settle(type, value) {
switch (type) {
case "return":
front.resolve({
value: value,
done: true
});
break;
case "throw":
front.reject(value);
break;
default:
front.resolve({
value: value,
done: false
});
break;
}
front = front.next;
if (front) {
resume(front.key, front.arg);
} else {
back = null;
}
}
this._invoke = send;
if (typeof gen.return !== "function") {
this.return = undefined;
}
}
if (typeof Symbol === "function" && Symbol.asyncIterator) {
AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
return this;
};
}
AsyncGenerator.prototype.next = function (arg) {
return this._invoke("next", arg);
};
AsyncGenerator.prototype.throw = function (arg) {
return this._invoke("throw", arg);
};
AsyncGenerator.prototype.return = function (arg) {
return this._invoke("return", arg);
};
return {
wrap: function (fn) {
return function () {
return new AsyncGenerator(fn.apply(this, arguments));
};
},
await: function (value) {
return new AwaitValue(value);
}
};
}();
var classCallCheck = function (instance, Constructor) {

@@ -152,8 +37,2 @@ if (!(instance instanceof Constructor)) {

var _extends = Object.assign || function (target) {

@@ -173,4 +52,2 @@ for (var i = 1; i < arguments.length; i++) {

var inherits = function (subClass, superClass) {

@@ -192,12 +69,2 @@ if (typeof superClass !== "function" && superClass !== null) {

var possibleConstructorReturn = function (self, call) {

@@ -229,3 +96,2 @@ if (!self) {

_this.state = {
disableDragging: false,
z: props.z,

@@ -311,3 +177,5 @@ original: {

var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) return;
if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
return;
}
var targetRect = target.getBoundingClientRect();

@@ -351,3 +219,2 @@ var targetLeft = targetRect.left;

this.setState({
disableDragging: true,
original: { x: this.draggable.state.x, y: this.draggable.state.y }

@@ -397,11 +264,18 @@ });

var _max2 = selfTop - targetTop + this.resizable.size.height;
this.setState({ maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 });
this.setState({
maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2
});
}
if (/bottom/i.test(dir)) {
var _max3 = target.offsetHeight + (targetTop - selfTop);
this.setState({ maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 });
this.setState({
maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3
});
}
}
} else {
this.setState({ maxWidth: this.props.maxWidth, maxHeight: this.props.maxHeight });
this.setState({
maxWidth: this.props.maxWidth,
maxHeight: this.props.maxHeight
});
}

@@ -439,3 +313,3 @@ if (this.props.onResizeStart) {

this.setState({ disableDragging: false, maxWidth: maxWidth, maxHeight: maxHeight });
this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
if (this.props.onResizeStop) {

@@ -542,3 +416,3 @@ var _position = {

module.exports = Rnd;
exports.default = Rnd;
//# sourceMappingURL=index.es5.js.map

158

lib/index.js

@@ -1,2 +0,2 @@

import { Component, createElement } from 'react';
import { createElement, Component } from 'react';
import { findDOMNode } from 'react-dom';

@@ -6,119 +6,2 @@ import Draggable from 'react-draggable';

var asyncGenerator = function () {
function AwaitValue(value) {
this.value = value;
}
function AsyncGenerator(gen) {
var front, back;
function send(key, arg) {
return new Promise(function (resolve, reject) {
var request = {
key: key,
arg: arg,
resolve: resolve,
reject: reject,
next: null
};
if (back) {
back = back.next = request;
} else {
front = back = request;
resume(key, arg);
}
});
}
function resume(key, arg) {
try {
var result = gen[key](arg);
var value = result.value;
if (value instanceof AwaitValue) {
Promise.resolve(value.value).then(function (arg) {
resume("next", arg);
}, function (arg) {
resume("throw", arg);
});
} else {
settle(result.done ? "return" : "normal", result.value);
}
} catch (err) {
settle("throw", err);
}
}
function settle(type, value) {
switch (type) {
case "return":
front.resolve({
value: value,
done: true
});
break;
case "throw":
front.reject(value);
break;
default:
front.resolve({
value: value,
done: false
});
break;
}
front = front.next;
if (front) {
resume(front.key, front.arg);
} else {
back = null;
}
}
this._invoke = send;
if (typeof gen.return !== "function") {
this.return = undefined;
}
}
if (typeof Symbol === "function" && Symbol.asyncIterator) {
AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
return this;
};
}
AsyncGenerator.prototype.next = function (arg) {
return this._invoke("next", arg);
};
AsyncGenerator.prototype.throw = function (arg) {
return this._invoke("throw", arg);
};
AsyncGenerator.prototype.return = function (arg) {
return this._invoke("return", arg);
};
return {
wrap: function (fn) {
return function () {
return new AsyncGenerator(fn.apply(this, arguments));
};
},
await: function (value) {
return new AwaitValue(value);
}
};
}();
var classCallCheck = function (instance, Constructor) {

@@ -148,8 +31,2 @@ if (!(instance instanceof Constructor)) {

var _extends = Object.assign || function (target) {

@@ -169,4 +46,2 @@ for (var i = 1; i < arguments.length; i++) {

var inherits = function (subClass, superClass) {

@@ -188,12 +63,2 @@ if (typeof superClass !== "function" && superClass !== null) {

var possibleConstructorReturn = function (self, call) {

@@ -225,3 +90,2 @@ if (!self) {

_this.state = {
disableDragging: false,
z: props.z,

@@ -307,3 +171,5 @@ original: {

var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) return;
if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
return;
}
var targetRect = target.getBoundingClientRect();

@@ -347,3 +213,2 @@ var targetLeft = targetRect.left;

this.setState({
disableDragging: true,
original: { x: this.draggable.state.x, y: this.draggable.state.y }

@@ -393,11 +258,18 @@ });

var _max2 = selfTop - targetTop + this.resizable.size.height;
this.setState({ maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 });
this.setState({
maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2
});
}
if (/bottom/i.test(dir)) {
var _max3 = target.offsetHeight + (targetTop - selfTop);
this.setState({ maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 });
this.setState({
maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3
});
}
}
} else {
this.setState({ maxWidth: this.props.maxWidth, maxHeight: this.props.maxHeight });
this.setState({
maxWidth: this.props.maxWidth,
maxHeight: this.props.maxHeight
});
}

@@ -435,3 +307,3 @@ if (this.props.onResizeStart) {

this.setState({ disableDragging: false, maxWidth: maxWidth, maxHeight: maxHeight });
this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
if (this.props.onResizeStop) {

@@ -438,0 +310,0 @@ var _position = {

834

lib/react-rnd.umd.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react-dom'), require('react-draggable'), require('re-resizable')) :
typeof define === 'function' && define.amd ? define(['react', 'react-dom', 'react-draggable', 're-resizable'], factory) :
(global['react-rnd'] = factory(global.React,global.ReactDOM,global.Draggable,global.Resizable));
}(this, (function (React,reactDom,Draggable,Resizable) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom'), require('react-draggable'), require('re-resizable')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom', 'react-draggable', 're-resizable'], factory) :
(factory((global['react-rnd'] = {}),global.React,global.ReactDOM,global.Draggable,global.Resizable));
}(this, (function (exports,React,reactDom,Draggable,Resizable) { 'use strict';
Draggable = Draggable && Draggable.hasOwnProperty('default') ? Draggable['default'] : Draggable;
Resizable = Resizable && Resizable.hasOwnProperty('default') ? Resizable['default'] : Resizable;
Draggable = Draggable && Draggable.hasOwnProperty('default') ? Draggable['default'] : Draggable;
Resizable = Resizable && Resizable.hasOwnProperty('default') ? Resizable['default'] : Resizable;
var asyncGenerator = function () {
function AwaitValue(value) {
this.value = value;
}
function AsyncGenerator(gen) {
var front, back;
function send(key, arg) {
return new Promise(function (resolve, reject) {
var request = {
key: key,
arg: arg,
resolve: resolve,
reject: reject,
next: null
};
if (back) {
back = back.next = request;
} else {
front = back = request;
resume(key, arg);
}
});
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
function resume(key, arg) {
try {
var result = gen[key](arg);
var value = result.value;
if (value instanceof AwaitValue) {
Promise.resolve(value.value).then(function (arg) {
resume("next", arg);
}, function (arg) {
resume("throw", arg);
});
} else {
settle(result.done ? "return" : "normal", result.value);
}
} catch (err) {
settle("throw", err);
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function settle(type, value) {
switch (type) {
case "return":
front.resolve({
value: value,
done: true
});
break;
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
case "throw":
front.reject(value);
break;
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
default:
front.resolve({
value: value,
done: false
});
break;
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
front = front.next;
if (front) {
resume(front.key, front.arg);
} else {
back = null;
}
}
this._invoke = send;
return target;
};
if (typeof gen.return !== "function") {
this.return = undefined;
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
}
if (typeof Symbol === "function" && Symbol.asyncIterator) {
AsyncGenerator.prototype[Symbol.asyncIterator] = function () {
return this;
};
}
AsyncGenerator.prototype.next = function (arg) {
return this._invoke("next", arg);
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
AsyncGenerator.prototype.throw = function (arg) {
return this._invoke("throw", arg);
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
AsyncGenerator.prototype.return = function (arg) {
return this._invoke("return", arg);
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
return {
wrap: function (fn) {
return function () {
return new AsyncGenerator(fn.apply(this, arguments));
};
},
await: function (value) {
return new AwaitValue(value);
}
var resizableStyle = {
width: 'auto',
height: 'auto',
display: 'inline-block',
position: 'absolute',
top: 0,
left: 0
};
}();
var Rnd = function (_React$Component) {
inherits(Rnd, _React$Component);
function Rnd(props) {
classCallCheck(this, Rnd);
var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
var classCallCheck = function (instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
var createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
_this.state = {
z: props.z,
original: {
x: 0,
y: 0
},
bounds: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
maxWidth: props.maxWidth,
maxHeight: props.maxHeight,
isMounted: false
};
_this.onResizeStart = _this.onResizeStart.bind(_this);
_this.onResize = _this.onResize.bind(_this);
_this.onResizeStop = _this.onResizeStop.bind(_this);
_this.onDragStart = _this.onDragStart.bind(_this);
_this.onDrag = _this.onDrag.bind(_this);
_this.onDragStop = _this.onDragStop.bind(_this);
_this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
return _this;
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
var _extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
createClass(Rnd, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.z !== nextProps.z) {
this.setState({ z: nextProps.z });
}
}
}
}
return target;
};
var inherits = function (subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
};
var possibleConstructorReturn = function (self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
};
var resizableStyle = {
width: 'auto',
height: 'auto',
display: 'inline-block',
position: 'absolute',
top: 0,
left: 0
};
var Rnd = function (_React$Component) {
inherits(Rnd, _React$Component);
function Rnd(props) {
classCallCheck(this, Rnd);
var _this = possibleConstructorReturn(this, (Rnd.__proto__ || Object.getPrototypeOf(Rnd)).call(this, props));
_this.state = {
disableDragging: false,
z: props.z,
original: {
x: 0,
y: 0
},
bounds: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
maxWidth: props.maxWidth,
maxHeight: props.maxHeight,
isMounted: false
};
_this.onResizeStart = _this.onResizeStart.bind(_this);
_this.onResize = _this.onResize.bind(_this);
_this.onResizeStop = _this.onResizeStop.bind(_this);
_this.onDragStart = _this.onDragStart.bind(_this);
_this.onDrag = _this.onDrag.bind(_this);
_this.onDragStop = _this.onDragStop.bind(_this);
_this.getMaxSizesFromProps = _this.getMaxSizesFromProps.bind(_this);
return _this;
}
createClass(Rnd, [{
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.z !== nextProps.z) {
this.setState({ z: nextProps.z });
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.setParentPosition();
}
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
this.setParentPosition();
}
}, {
key: 'getParentSize',
value: function getParentSize() {
return this.resizable.getParentSize();
}
}, {
key: 'getMaxSizesFromProps',
value: function getMaxSizesFromProps() {
var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
return { maxWidth: maxWidth, maxHeight: maxHeight };
}
}, {
key: 'getSelfElement',
value: function getSelfElement() {
if (!this) return null;
return reactDom.findDOMNode(this);
}
}, {
key: 'setParentPosition',
value: function setParentPosition() {
var element = this.getSelfElement();
if (element instanceof Element) {
var parent = element.parentNode;
if (!parent || typeof window === 'undefined') return;
if (!(parent instanceof HTMLElement)) return;
if (getComputedStyle(parent).position !== 'static') {
}, {
key: 'getParentSize',
value: function getParentSize() {
return this.resizable.getParentSize();
}
}, {
key: 'getMaxSizesFromProps',
value: function getMaxSizesFromProps() {
var maxWidth = typeof this.props.maxWidth === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxWidth;
var maxHeight = typeof this.props.maxHeight === 'undefined' ? Number.MAX_SAFE_INTEGER : this.props.maxHeight;
return { maxWidth: maxWidth, maxHeight: maxHeight };
}
}, {
key: 'getSelfElement',
value: function getSelfElement() {
if (!this) return null;
return reactDom.findDOMNode(this);
}
}, {
key: 'setParentPosition',
value: function setParentPosition() {
var element = this.getSelfElement();
if (element instanceof Element) {
var parent = element.parentNode;
if (!parent || typeof window === 'undefined') return;
if (!(parent instanceof HTMLElement)) return;
if (getComputedStyle(parent).position !== 'static') {
this.setState({ isMounted: true });
return;
}
parent.style.position = 'relative';
this.setState({ isMounted: true });
}
}
}, {
key: 'onDragStart',
value: function onDragStart(e, data) {
if (this.props.onDragStart) {
this.props.onDragStart(e, data);
}
if (!this.props.bounds) return;
var parent = this.resizable && this.resizable.parentNode;
var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) {
return;
}
parent.style.position = 'relative';
this.setState({ isMounted: true });
var targetRect = target.getBoundingClientRect();
var targetLeft = targetRect.left;
var targetTop = targetRect.top;
var parentRect = parent.getBoundingClientRect();
var parentLeft = parentRect.left;
var parentTop = parentRect.top;
var left = targetLeft - parentLeft;
var top = targetTop - parentTop;
if (!this.resizable) return;
this.setState({
bounds: {
top: top,
right: left + (target.offsetWidth - this.resizable.size.width),
bottom: this.props._freeBottomBounds // eslint-disable-line
? 2147483647 : top + (target.offsetHeight - this.resizable.size.height),
left: left
}
});
}
}
}, {
key: 'onDragStart',
value: function onDragStart(e, data) {
if (this.props.onDragStart) {
this.props.onDragStart(e, data);
}, {
key: 'onDrag',
value: function onDrag(e, data) {
if (this.props.onDrag) {
this.props.onDrag(e, data);
}
}
if (!this.props.bounds) return;
var parent = this.resizable && this.resizable.parentNode;
var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
if (!(target instanceof HTMLElement) || !(parent instanceof HTMLElement)) return;
var targetRect = target.getBoundingClientRect();
var targetLeft = targetRect.left;
var targetTop = targetRect.top;
var parentRect = parent.getBoundingClientRect();
var parentLeft = parentRect.left;
var parentTop = parentRect.top;
var left = targetLeft - parentLeft;
var top = targetTop - parentTop;
if (!this.resizable) return;
this.setState({
bounds: {
top: top,
right: left + (target.offsetWidth - this.resizable.size.width),
bottom: this.props._freeBottomBounds // eslint-disable-line
? 2147483647 : top + (target.offsetHeight - this.resizable.size.height),
left: left
}, {
key: 'onDragStop',
value: function onDragStop(e, data) {
if (this.props.onDragStop) {
this.props.onDragStop(e, data);
}
});
}
}, {
key: 'onDrag',
value: function onDrag(e, data) {
if (this.props.onDrag) {
this.props.onDrag(e, data);
}
}
}, {
key: 'onDragStop',
value: function onDragStop(e, data) {
if (this.props.onDragStop) {
this.props.onDragStop(e, data);
}
}
}, {
key: 'onResizeStart',
value: function onResizeStart(e, dir, refToElement) {
e.stopPropagation();
this.setState({
disableDragging: true,
original: { x: this.draggable.state.x, y: this.draggable.state.y }
});
if (this.props.bounds) {
var parent = this.resizable && this.resizable.parentNode;
var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
var self = this.getSelfElement();
if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {
var _getMaxSizesFromProps = this.getMaxSizesFromProps(),
_maxWidth = _getMaxSizesFromProps.maxWidth,
_maxHeight = _getMaxSizesFromProps.maxHeight;
}, {
key: 'onResizeStart',
value: function onResizeStart(e, dir, refToElement) {
e.stopPropagation();
this.setState({
original: { x: this.draggable.state.x, y: this.draggable.state.y }
});
if (this.props.bounds) {
var parent = this.resizable && this.resizable.parentNode;
var target = this.props.bounds === 'parent' ? parent : document.querySelector(this.props.bounds);
var self = this.getSelfElement();
if (self instanceof Element && target instanceof HTMLElement && parent instanceof HTMLElement) {
var _getMaxSizesFromProps = this.getMaxSizesFromProps(),
_maxWidth = _getMaxSizesFromProps.maxWidth,
_maxHeight = _getMaxSizesFromProps.maxHeight;
var parentSize = this.getParentSize();
if (_maxWidth && typeof _maxWidth === 'string') {
if (_maxWidth.endsWith('%')) {
var ratio = Number(_maxWidth.replace('%', '')) / 100;
_maxWidth = parentSize.width * ratio;
} else if (_maxWidth.endsWith('px')) {
_maxWidth = Number(_maxWidth.replace('px', ''));
var parentSize = this.getParentSize();
if (_maxWidth && typeof _maxWidth === 'string') {
if (_maxWidth.endsWith('%')) {
var ratio = Number(_maxWidth.replace('%', '')) / 100;
_maxWidth = parentSize.width * ratio;
} else if (_maxWidth.endsWith('px')) {
_maxWidth = Number(_maxWidth.replace('px', ''));
}
}
}
if (_maxHeight && typeof _maxHeight === 'string') {
if (_maxHeight.endsWith('%')) {
var _ratio = Number(_maxHeight.replace('%', '')) / 100;
_maxHeight = parentSize.width * _ratio;
} else if (_maxHeight.endsWith('px')) {
_maxHeight = Number(_maxHeight.replace('px', ''));
if (_maxHeight && typeof _maxHeight === 'string') {
if (_maxHeight.endsWith('%')) {
var _ratio = Number(_maxHeight.replace('%', '')) / 100;
_maxHeight = parentSize.width * _ratio;
} else if (_maxHeight.endsWith('px')) {
_maxHeight = Number(_maxHeight.replace('px', ''));
}
}
var selfRect = self.getBoundingClientRect();
var selfLeft = selfRect.left;
var selfTop = selfRect.top;
var targetRect = target.getBoundingClientRect();
var targetLeft = targetRect.left;
var targetTop = targetRect.top;
if (/left/i.test(dir) && this.resizable) {
var max = selfLeft - targetLeft + this.resizable.size.width;
this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max });
}
if (/right/i.test(dir)) {
var _max = target.offsetWidth + (targetLeft - selfLeft);
this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max });
}
if (/top/i.test(dir) && this.resizable) {
var _max2 = selfTop - targetTop + this.resizable.size.height;
this.setState({
maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2
});
}
if (/bottom/i.test(dir)) {
var _max3 = target.offsetHeight + (targetTop - selfTop);
this.setState({
maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3
});
}
}
var selfRect = self.getBoundingClientRect();
var selfLeft = selfRect.left;
var selfTop = selfRect.top;
var targetRect = target.getBoundingClientRect();
var targetLeft = targetRect.left;
var targetTop = targetRect.top;
if (/left/i.test(dir) && this.resizable) {
var max = selfLeft - targetLeft + this.resizable.size.width;
this.setState({ maxWidth: max > Number(_maxWidth) ? _maxWidth : max });
}
if (/right/i.test(dir)) {
var _max = target.offsetWidth + (targetLeft - selfLeft);
this.setState({ maxWidth: _max > Number(_maxWidth) ? _maxWidth : _max });
}
if (/top/i.test(dir) && this.resizable) {
var _max2 = selfTop - targetTop + this.resizable.size.height;
this.setState({ maxHeight: _max2 > Number(_maxHeight) ? _maxHeight : _max2 });
}
if (/bottom/i.test(dir)) {
var _max3 = target.offsetHeight + (targetTop - selfTop);
this.setState({ maxHeight: _max3 > Number(_maxHeight) ? _maxHeight : _max3 });
}
} else {
this.setState({
maxWidth: this.props.maxWidth,
maxHeight: this.props.maxHeight
});
}
} else {
this.setState({ maxWidth: this.props.maxWidth, maxHeight: this.props.maxHeight });
if (this.props.onResizeStart) {
this.props.onResizeStart(e, dir, refToElement);
}
}
if (this.props.onResizeStart) {
this.props.onResizeStart(e, dir, refToElement);
}, {
key: 'onResize',
value: function onResize(e, direction, refToResizableElement, delta) {
var x = void 0;
var y = void 0;
if (/left/i.test(direction)) {
x = this.state.original.x - delta.width;
this.draggable.setState({ x: x });
}
if (/top/i.test(direction)) {
y = this.state.original.y - delta.height;
this.draggable.setState({ y: y });
}
if (this.props.onResize) {
this.props.onResize(e, direction, refToResizableElement, delta, {
x: x || this.draggable.state.x,
y: y || this.draggable.state.y
});
}
}
}
}, {
key: 'onResize',
value: function onResize(e, direction, refToResizableElement, delta) {
var x = void 0;
var y = void 0;
if (/left/i.test(direction)) {
x = this.state.original.x - delta.width;
this.draggable.setState({ x: x });
}, {
key: 'onResizeStop',
value: function onResizeStop(e, direction, refToResizableElement, delta) {
var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(),
maxWidth = _getMaxSizesFromProps2.maxWidth,
maxHeight = _getMaxSizesFromProps2.maxHeight;
this.setState({ maxWidth: maxWidth, maxHeight: maxHeight });
if (this.props.onResizeStop) {
var _position = {
x: this.draggable.state.x,
y: this.draggable.state.y
};
this.props.onResizeStop(e, direction, refToResizableElement, delta, _position);
}
}
if (/top/i.test(direction)) {
y = this.state.original.y - delta.height;
this.draggable.setState({ y: y });
}, {
key: 'updateSize',
value: function updateSize(size) {
if (!this.resizable) return;
this.resizable.updateSize({ width: size.width, height: size.height });
}
if (this.props.onResize) {
this.props.onResize(e, direction, refToResizableElement, delta, {
x: x || this.draggable.state.x,
y: y || this.draggable.state.y
});
}, {
key: 'updatePosition',
value: function updatePosition(position) {
this.draggable.setState(position);
}
}
}, {
key: 'onResizeStop',
value: function onResizeStop(e, direction, refToResizableElement, delta) {
var _getMaxSizesFromProps2 = this.getMaxSizesFromProps(),
maxWidth = _getMaxSizesFromProps2.maxWidth,
maxHeight = _getMaxSizesFromProps2.maxHeight;
this.setState({ disableDragging: false, maxWidth: maxWidth, maxHeight: maxHeight });
if (this.props.onResizeStop) {
var _position = {
x: this.draggable.state.x,
y: this.draggable.state.y
};
this.props.onResizeStop(e, direction, refToResizableElement, delta, _position);
}, {
key: 'updateZIndex',
value: function updateZIndex(z) {
this.setState({ z: z });
}
}
}, {
key: 'updateSize',
value: function updateSize(size) {
if (!this.resizable) return;
this.resizable.updateSize({ width: size.width, height: size.height });
}
}, {
key: 'updatePosition',
value: function updatePosition(position) {
this.draggable.setState(position);
}
}, {
key: 'updateZIndex',
value: function updateZIndex(z) {
this.setState({ z: z });
}
}, {
key: 'render',
value: function render() {
var _this2 = this;
}, {
key: 'render',
value: function render() {
var _this2 = this;
var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
var innerStyle = _extends({}, resizableStyle, {
zIndex: this.state.z
}, cursorStyle, this.props.style);
// HACK: Wait for setting relative to parent element.
if (!this.state.isMounted) return React.createElement('div', null);
var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line
return React.createElement(
Draggable,
{
ref: function ref(c) {
_this2.draggable = c;
},
handle: this.props.dragHandleClassName,
defaultPosition: this.props.default,
onStart: this.onDragStart,
onDrag: this.onDrag,
onStop: this.onDragStop,
axis: this.props.dragAxis,
disabled: this.props.disableDragging,
grid: this.props.dragGrid,
bounds: this.props.bounds ? this.state.bounds : undefined,
position: this.props.position,
enableUserSelectHack: false,
cancel: this.props.cancel
},
React.createElement(
Resizable,
_extends({}, this.props.extendsProps, {
className: this.props.className,
var cursorStyle = this.props.disableDragging || this.props.dragHandleClassName ? { cursor: 'normal' } : { cursor: 'move' };
var innerStyle = _extends({}, resizableStyle, {
zIndex: this.state.z
}, cursorStyle, this.props.style);
// HACK: Wait for setting relative to parent element.
if (!this.state.isMounted) return React.createElement('div', null);
var maxHeight = this.props._freeBottomBounds ? 2147483647 : this.state.maxHeight; // eslint-disable-line
return React.createElement(
Draggable,
{
ref: function ref(c) {
_this2.resizable = c;
_this2.draggable = c;
},
defaultSize: this.props.default,
size: this.props.size,
enable: this.props.enableResizing,
onResizeStart: this.onResizeStart,
onResize: this.onResize,
onResizeStop: this.onResizeStop,
style: innerStyle,
minWidth: this.props.minWidth,
minHeight: this.props.minHeight,
maxWidth: this.state.maxWidth,
maxHeight: maxHeight,
grid: this.props.resizeGrid,
handleWrapperClass: this.props.resizeHandleWrapperClass,
handleWrapperStyle: this.props.resizeHandleWrapperStyle,
lockAspectRatio: this.props.lockAspectRatio,
lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
handleStyles: this.props.resizeHandleStyles,
handleClasses: this.props.resizeHandleClasses
}),
this.props.children
)
);
}
}]);
return Rnd;
}(React.Component);
handle: this.props.dragHandleClassName,
defaultPosition: this.props.default,
onStart: this.onDragStart,
onDrag: this.onDrag,
onStop: this.onDragStop,
axis: this.props.dragAxis,
disabled: this.props.disableDragging,
grid: this.props.dragGrid,
bounds: this.props.bounds ? this.state.bounds : undefined,
position: this.props.position,
enableUserSelectHack: false,
cancel: this.props.cancel
},
React.createElement(
Resizable,
_extends({}, this.props.extendsProps, {
className: this.props.className,
ref: function ref(c) {
_this2.resizable = c;
},
defaultSize: this.props.default,
size: this.props.size,
enable: this.props.enableResizing,
onResizeStart: this.onResizeStart,
onResize: this.onResize,
onResizeStop: this.onResizeStop,
style: innerStyle,
minWidth: this.props.minWidth,
minHeight: this.props.minHeight,
maxWidth: this.state.maxWidth,
maxHeight: maxHeight,
grid: this.props.resizeGrid,
handleWrapperClass: this.props.resizeHandleWrapperClass,
handleWrapperStyle: this.props.resizeHandleWrapperStyle,
lockAspectRatio: this.props.lockAspectRatio,
lockAspectRatioExtraWidth: this.props.lockAspectRatioExtraWidth,
lockAspectRatioExtraHeight: this.props.lockAspectRatioExtraHeight,
handleStyles: this.props.resizeHandleStyles,
handleClasses: this.props.resizeHandleClasses
}),
this.props.children
)
);
}
}]);
return Rnd;
}(React.Component);
Rnd.defaultProps = {
maxWidth: Number.MAX_SAFE_INTEGER,
maxHeight: Number.MAX_SAFE_INTEGER,
onResizeStart: function onResizeStart() {},
onResize: function onResize() {},
onResizeStop: function onResizeStop() {},
onDragStart: function onDragStart() {},
onDrag: function onDrag() {},
onDragStop: function onDragStop() {}
};
Rnd.defaultProps = {
maxWidth: Number.MAX_SAFE_INTEGER,
maxHeight: Number.MAX_SAFE_INTEGER,
onResizeStart: function onResizeStart() {},
onResize: function onResize() {},
onResizeStop: function onResizeStop() {},
onDragStart: function onDragStart() {},
onDrag: function onDrag() {},
onDragStop: function onDragStop() {}
};
return Rnd;
exports.default = Rnd;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=react-rnd.umd.js.map

85

package.json
{
"name": "react-rnd",
"version": "7.3.0",
"version": "7.3.1",
"description": "",

@@ -27,2 +27,3 @@ "title": "react-rnd",

"prepublish": "npm run build && npm run flow-copy",
"format": "prettier-eslint --write --single-quote --semi=true \"src/**/*.js\" ",
"storybook": "start-storybook -p 6016",

@@ -43,40 +44,44 @@ "build-storybook": "build-storybook",

"devDependencies": {
"@storybook/addon-actions": "^3.2.6",
"@storybook/addon-links": "^3.2.6",
"@storybook/react": "^3.2.8",
"avaron": "^0.0.14",
"babel-eslint": "^8.0.0",
"babel-plugin-external-helpers": "^6.22.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-flow": "^6.23.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"enzyme": "^2.9.1",
"eslint": "^4.2.0",
"eslint-config-airbnb": "^15.0.2",
"eslint-plugin-flowtype": "^2.34.1",
"eslint-plugin-import": "^2.7.0",
"eslint-plugin-jsx-a11y": "^6.0.2",
"eslint-plugin-react": "^7.1.0",
"flow-bin": "^0.54.1",
"flow-copy-source": "^1.2.0",
"flow-typed": "^2.1.5",
"gh-pages": "^1.0.0",
"npm-run-all": "^4.1.1",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-test-renderer": "^16.0.0",
"rollup": "^0.50.0",
"rollup-plugin-babel": "3.0.2",
"rollup-plugin-commonjs": "^8.2.0",
"rollup-plugin-node-globals": "1.1.0",
"rollup-plugin-node-resolve": "3.0.0",
"rollup-plugin-replace": "^2.0.0",
"@storybook/addon-actions": "3.3.15",
"@storybook/addon-links": "3.3.15",
"@storybook/react": "3.3.15",
"avaron": "0.0.14",
"babel-eslint": "8.2.2",
"babel-plugin-external-helpers": "6.22.0",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-assign": "6.22.0",
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-polyfill": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-es2015": "6.24.1",
"babel-preset-flow": "6.23.0",
"babel-preset-react": "6.24.1",
"babel-register": "6.26.0",
"enzyme": "3.3.0",
"enzyme-adapter-react-16": "^1.1.1",
"eslint": "4.19.0",
"eslint-config-airbnb": "16.1.0",
"eslint-plugin-flowtype": "2.46.1",
"eslint-plugin-import": "2.9.0",
"eslint-plugin-jsx-a11y": "6.0.3",
"eslint-plugin-react": "7.7.0",
"flow-bin": "0.68.0",
"flow-copy-source": "1.3.0",
"flow-typed": "2.4.0",
"gh-pages": "1.1.0",
"npm-run-all": "4.1.2",
"prettier": "^1.11.1",
"prettier-eslint": "^8.8.1",
"prettier-eslint-cli": "^4.7.1",
"react": "16.2.0",
"react-dom": "16.2.0",
"react-test-renderer": "16.2.0",
"rollup": "0.57.1",
"rollup-plugin-babel": "3.0.3",
"rollup-plugin-commonjs": "9.1.0",
"rollup-plugin-node-globals": "1.2.0",
"rollup-plugin-node-resolve": "3.2.0",
"rollup-plugin-replace": "2.0.0",
"rollup-watch": "4.3.1",
"sinon": "^3.2.1"
"sinon": "4.4.6"
},

@@ -95,5 +100,5 @@ "files": [

"dependencies": {
"re-resizable": "^4.1.0",
"react-draggable": "^3.0.3"
"re-resizable": "^4.4.5",
"react-draggable": "^3.0.5"
}
}

54

README.md
<p align="center"><img src ="https://github.com/bokuweb/react-rnd/blob/master/logo.png?raw=true" /></p>
<p align="center">Resizable and draggable component for React.</p>
<p align="center">A resizable and draggable component for React.</p>

@@ -13,2 +13,4 @@ <p align="center"><a href="https://circleci.com/gh/bokuweb/react-rnd/tree/master">

<img src="https://badges.greenkeeper.io/bokuweb/react-rnd.svg" /></a>
<a href="https://github.com/prettier/prettier">
<img src="https://img.shields.io/badge/styled_with-prettier-ff69b4.svg" /></a>
</p>

@@ -18,14 +20,20 @@

- [Demo](#Demo)
- [Install](#install)
- [Usage](#usage)
- [Props](#props)
- [Callback](#callback)
- [Method](#method)
- [Test](#test)
- [Changelog](#changelog)
- [License](#license)
* [Screenshot](#Screenshot)
* [Live Demo](#live-demo)
* [Storybook](#storybook)
* [CodeSandbox](#codesandbox)
* [Install](#install)
* [Usage](#usage)
* [Props](#props)
* [Instance API](#instance-api)
* [updateSize(size: { width: number | string, height: number | string }): void](#updateSize-void)
* [updatePosition({ x: number, y: number }): void](#updatePosition-void)
* [updateZIndex(z: number): void](#upgradeZIndex-void)
* [Test](#test)
* [Related](#related)
* [Changelog](#changelog)
* [License](#license)
## Demo
## Screnshot

@@ -36,2 +44,6 @@ <p align="center">

## Live Demo
TODO:
## Install

@@ -87,6 +99,2 @@

### Example
You can try it on [WebpackBin](https://www.webpackbin.com/bins/-KyeXupuBJyBPaIN0F_i) too.
## Props

@@ -404,3 +412,3 @@

## Method
## Instance API

@@ -435,3 +443,3 @@

#### `updatePosition({ x: number, y: number })`
#### `updatePosition({ x: number, y: number }): void`

@@ -464,3 +472,3 @@ Update component position.

#### `updateZIndex(z: number)`
#### `updateZIndex(z: number): void`

@@ -507,2 +515,12 @@ Update component z-index.

#### v7.3.1
- chore(deps): upgrade deps
- chore(deps): upgrade lint and remove unused state
- chore(deps): install prettier
#### v7.3.0
- chore(deps): upgrade re-resizable
#### v7.2.0

@@ -509,0 +527,0 @@ 

lib/index.es5.js.flow

Sorry, the diff of this file is not supported yet

lib/index.es5.js.map

Sorry, the diff of this file is not supported yet

lib/index.js.flow

Sorry, the diff of this file is not supported yet

lib/index.js.map

Sorry, the diff of this file is not supported yet

lib/index.test.js.flow

Sorry, the diff of this file is not supported yet

lib/react-rnd.umd.js.map

Sorry, the diff of this file is not supported yet

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