Socket
Socket
Sign inDemoInstall

react-grid-layout

Package Overview
Dependencies
13
Maintainers
1
Versions
104
Alerts
File Explorer

Advanced tools

npm Scripts

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 1.4.0 to 1.4.1

171

build/GridItem.js

@@ -25,10 +25,7 @@ "use strict";

DroppingPosition,
Position
Position,
ResizeHandleAxis
} from "./utils";*/
/*:: import type { PositionParams } from "./calculateUtils";*/
/*:: import type {
ResizeHandleAxis,
ResizeHandle,
ReactRef
} from "./ReactGridLayoutPropTypes";*/
/*:: import type { ResizeHandle, ReactRef } from "./ReactGridLayoutPropTypes";*/
/*:: type PartialPosition = { top: number, left: number };*/

@@ -41,2 +38,7 @@ /*:: type GridItemCallback<Data: GridDragEvent | GridResizeEvent> = (

) => void;*/
/*:: type ResizeCallbackData = {
node: HTMLElement,
size: Position,
handle: ResizeHandleAxis
};*/
/*:: type GridItemResizeCallback = (

@@ -47,7 +49,2 @@ e: Event,

) => void;*/
/*:: type ResizeCallbackData = {
node: HTMLElement,
size: Position,
handle: string
};*/
/*:: type State = {

@@ -407,4 +404,4 @@ resizing: ?{ top: number, left: number, width: number, height: number },

*/
curryResizeHandler(position /*: Position*/, handler /*: function*/) /*: function*/{
return (e /*: Event*/, data /*: ResizeCallbackData*/) => /*: function*/handler(e, data, position);
curryResizeHandler(position /*: Position*/, handler /*: Function*/) /*: Function*/{
return (e /*: Event*/, data /*: ResizeCallbackData*/) => /*: Function*/handler(e, data, position);
}

@@ -421,3 +418,2 @@

cols,
x,
minW,

@@ -461,7 +457,9 @@ minH,

/**
* Wrapper around drag events to provide more useful data.
* All drag events call the function with the given handler name,
* with the signature (index, x, y).
* Wrapper around resize events to provide more useful data.
*/
onResizeHandler(e /*: Event*/, _ref4 /*:: */, position /*: Position*/, handlerName /*: string*/) /*: void*/{
onResizeHandler(e /*: Event*/, _ref4 /*:: */,
// 'size' is updated position
position /*: Position*/,
// existing position
handlerName /*: string*/) /*: void*/{
let {

@@ -479,5 +477,6 @@ node,

maxH,
minH
minH,
containerWidth
} = this.props;
let {
const {
minW,

@@ -487,111 +486,21 @@ maxW

// Get new XY
// Clamping of dimensions based on resize direction
let updatedSize = size;
if (node) {
updatedSize = (0, _utils.resizeItemInDirection)(handle, position, size, containerWidth);
this.setState({
resizing: handlerName === "onResizeStop" ? null : updatedSize
});
}
// Get new XY based on pixel size
let {
w,
h
} = (0, _calculateUtils.calcWH)(this.getPositionParams(), size.width, size.height, x, y, handle);
} = (0, _calculateUtils.calcWH)(this.getPositionParams(), updatedSize.width, updatedSize.height, x, y, handle);
// Min/max capping.
// minW should be at least 1 (TODO propTypes validation?)
minW = Math.max(minW, 1);
// Min/max capping
w = (0, _calculateUtils.clamp)(w, minW, maxW);
w = (0, _calculateUtils.clamp)(w, Math.max(minW, 1), maxW);
h = (0, _calculateUtils.clamp)(h, minH, maxH);
let updatedSize = size;
if (node) {
const currentLeft = position.left;
const currentTop = position.top;
const currentWidth = position.width;
const currentHeight = position.height;
const resizeNorth = _ref5 => {
let {
left,
height,
width
} = _ref5;
const top = currentTop - (height - currentHeight);
return {
top,
left,
width,
height: this.constrainHeight(top, currentHeight, height),
top: this.constrainTop(top)
};
};
const resizeEast = _ref6 => {
let {
top,
left,
height,
width
} = _ref6;
return {
top,
height,
width: this.constrainWidth(currentLeft, currentWidth, width),
left: this.constrainLeft(left)
};
};
const resizeWest = _ref7 => {
let {
top,
height,
width
} = _ref7;
const left = currentLeft - (width - currentWidth);
return {
height,
width: left <= 0 ? currentWidth : this.constrainWidth(currentLeft, currentWidth, width),
top: this.constrainTop(top),
left: this.constrainLeft(left)
};
};
const resizeSouth = _ref8 => {
let {
top,
left,
height,
width
} = _ref8;
return {
width,
left,
height: this.constrainHeight(top, currentHeight, height),
top: this.constrainTop(top)
};
};
const resizeNorthEast = function () {
return resizeNorth(resizeEast(...arguments));
};
const resizeNorthWest = function () {
return resizeNorth(resizeWest(...arguments));
};
const resizeSouthEast = function () {
return resizeSouth(resizeEast(...arguments));
};
const resizeSouthWest = function () {
return resizeSouth(resizeWest(...arguments));
};
const ordinalResizeHandlerMap = {
n: resizeNorth,
ne: resizeNorthEast,
e: resizeEast,
se: resizeSouthEast,
s: resizeSouth,
sw: resizeSouthWest,
w: resizeWest,
nw: resizeNorthWest
};
const resizeHandler = ordinalResizeHandlerMap[handle];
updatedSize = resizeHandler ? resizeHandler({
top: currentTop,
left: currentLeft,
height: currentHeight,
width: currentWidth,
...size
}) : size;
this.setState({
resizing: handlerName === "onResizeStop" ? null : updatedSize
});
}
handler.call(this, i, w, h, {

@@ -604,18 +513,2 @@ e,

}
/**
* Helper functions to constrain dimensions of a GridItem
*/
constrainWidth(left /*: number*/, currentWidth /*: number*/, newWidth /*: number*/) /*: number*/{
return left + newWidth > this.props.containerWidth ? currentWidth : newWidth;
}
constrainHeight(top /*: number*/, currentHeight /*: number*/, newHeight /*: number*/) /*: number*/{
return top <= 0 ? currentHeight : newHeight;
}
constrainLeft(left /*: number*/) /*: number*/{
return Math.max(0, left);
}
constrainTop(top /*: number*/) /*: number*/{
return Math.max(0, top);
}
render() /*: ReactNode*/{

@@ -622,0 +515,0 @@ const {

12

build/ReactGridLayoutPropTypes.js

@@ -20,3 +20,4 @@ "use strict";

Layout,
LayoutItem
LayoutItem,
ResizeHandleAxis
} from "./utils";*/

@@ -27,11 +28,2 @@ /*:: export type ReactRef<T: HTMLElement> = {|

// util
/*:: export type ResizeHandleAxis =
| "s"
| "w"
| "e"
| "n"
| "sw"
| "nw"
| "se"
| "ne";*/
/*:: export type ResizeHandle =

@@ -38,0 +30,0 @@ | ReactElement<any>

123

build/utils.js

@@ -26,2 +26,3 @@ "use strict";

exports.perc = perc;
exports.resizeItemInDirection = resizeItemInDirection;
exports.setTopLeft = setTopLeft;

@@ -42,2 +43,11 @@ exports.setTransform = setTransform;

} from "react";*/
/*:: export type ResizeHandleAxis =
| "s"
| "w"
| "e"
| "n"
| "sw"
| "nw"
| "se"
| "ne";*/
/*:: export type LayoutItem = {

@@ -57,3 +67,3 @@ w: number,

isResizable?: ?boolean,
resizeHandles?: Array<"s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne">,
resizeHandles?: Array<ResizeHandleAxis>,
isBounded?: ?boolean

@@ -549,9 +559,112 @@ };*/

}
function setTransform(_ref /*:: */) /*: Object*/{
/**
* Helper functions to constrain dimensions of a GridItem
*/
const constrainWidth = (left /*: number*/, currentWidth /*: number*/, newWidth /*: number*/, containerWidth /*: number*/) => {
return left + newWidth > containerWidth ? currentWidth : newWidth;
};
const constrainHeight = (top /*: number*/, currentHeight /*: number*/, newHeight /*: number*/) => {
return top < 0 ? currentHeight : newHeight;
};
const constrainLeft = (left /*: number*/) => Math.max(0, left);
const constrainTop = (top /*: number*/) => Math.max(0, top);
const resizeNorth = (currentSize, _ref, _containerWidth) => {
let {
left,
height,
width
} = _ref;
const top = currentSize.top - (height - currentSize.height);
return {
left,
width,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
const resizeEast = (currentSize, _ref2, containerWidth) => {
let {
top,
left,
height,
width
} = _ref2;
return {
top,
height,
width: constrainWidth(currentSize.left, currentSize.width, width, containerWidth),
left: constrainLeft(left)
};
};
const resizeWest = (currentSize, _ref3, containerWidth) => {
let {
top,
height,
width
} = _ref3;
const left = currentSize.left - (width - currentSize.width);
return {
height,
width: left < 0 ? currentSize.width : constrainWidth(currentSize.left, currentSize.width, width, containerWidth),
top: constrainTop(top),
left: constrainLeft(left)
};
};
const resizeSouth = (currentSize, _ref4, containerWidth) => {
let {
top,
left,
height,
width
} = _ref4;
return {
width,
left,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
const resizeNorthEast = function () {
return resizeNorth(arguments.length <= 0 ? undefined : arguments[0], resizeEast(...arguments), arguments.length <= 2 ? undefined : arguments[2]);
};
const resizeNorthWest = function () {
return resizeNorth(arguments.length <= 0 ? undefined : arguments[0], resizeWest(...arguments), arguments.length <= 2 ? undefined : arguments[2]);
};
const resizeSouthEast = function () {
return resizeSouth(arguments.length <= 0 ? undefined : arguments[0], resizeEast(...arguments), arguments.length <= 2 ? undefined : arguments[2]);
};
const resizeSouthWest = function () {
return resizeSouth(arguments.length <= 0 ? undefined : arguments[0], resizeWest(...arguments), arguments.length <= 2 ? undefined : arguments[2]);
};
const ordinalResizeHandlerMap = {
n: resizeNorth,
ne: resizeNorthEast,
e: resizeEast,
se: resizeSouthEast,
s: resizeSouth,
sw: resizeSouthWest,
w: resizeWest,
nw: resizeNorthWest
};
/**
* Helper for clamping width and position when resizing an item.
*/
function resizeItemInDirection(direction /*: ResizeHandleAxis*/, currentSize /*: Position*/, newSize /*: Position*/, containerWidth /*: number*/) /*: Position*/{
const ordinalHandler = ordinalResizeHandlerMap[direction];
// Shouldn't be possible given types; that said, don't fail hard
if (!ordinalHandler) return newSize;
return ordinalHandler(currentSize, {
...currentSize,
...newSize
}, containerWidth);
}
function setTransform(_ref5 /*:: */) /*: Object*/{
let {
top,
left,
width,
height
} /*: Position*/ = _ref /*: Position*/;
} /*: Position*/ = _ref5 /*: Position*/;
// Replace unitless items with px

@@ -570,3 +683,3 @@ const translate = "translate(".concat(left, "px,").concat(top, "px)");

}
function setTopLeft(_ref2 /*:: */) /*: Object*/{
function setTopLeft(_ref6 /*:: */) /*: Object*/{
let {

@@ -577,3 +690,3 @@ top,

height
} /*: Position*/ = _ref2 /*: Position*/;
} /*: Position*/ = _ref6 /*: Position*/;
return {

@@ -580,0 +693,0 @@ top: "".concat(top, "px"),

175

lib/GridItem.jsx

@@ -6,4 +6,10 @@ // @flow

import { Resizable } from "react-resizable";
import { fastPositionEqual, perc, setTopLeft, setTransform } from "./utils";
import {
fastPositionEqual,
perc,
resizeItemInDirection,
setTopLeft,
setTransform
} from "./utils";
import {
calcGridItemPosition,

@@ -28,11 +34,8 @@ calcGridItemWHPx,

DroppingPosition,
Position
Position,
ResizeHandleAxis
} from "./utils";
import type { PositionParams } from "./calculateUtils";
import type {
ResizeHandleAxis,
ResizeHandle,
ReactRef
} from "./ReactGridLayoutPropTypes";
import type { ResizeHandle, ReactRef } from "./ReactGridLayoutPropTypes";

@@ -46,2 +49,9 @@ type PartialPosition = { top: number, left: number };

) => void;
type ResizeCallbackData = {
node: HTMLElement,
size: Position,
handle: ResizeHandleAxis
};
type GridItemResizeCallback = (

@@ -52,7 +62,2 @@ e: Event,

) => void;
type ResizeCallbackData = {
node: HTMLElement,
size: Position,
handle: string
};

@@ -377,4 +382,4 @@ type State = {

*/
curryResizeHandler(position: Position, handler: function): function {
return (e: Event, data: ResizeCallbackData): function =>
curryResizeHandler(position: Position, handler: Function): Function {
return (e: Event, data: ResizeCallbackData): Function =>
handler(e, data, position);

@@ -396,3 +401,2 @@ }

cols,
x,
minW,

@@ -575,10 +579,8 @@ minH,

/**
* Wrapper around drag events to provide more useful data.
* All drag events call the function with the given handler name,
* with the signature (index, x, y).
* Wrapper around resize events to provide more useful data.
*/
onResizeHandler(
e: Event,
{ node, size, handle }: ResizeCallbackData,
position: Position,
{ node, size, handle }: ResizeCallbackData, // 'size' is updated position
position: Position, // existing position
handlerName: string

@@ -588,10 +590,24 @@ ): void {

if (!handler) return;
const { x, y, i, maxH, minH } = this.props;
let { minW, maxW } = this.props;
const { x, y, i, maxH, minH, containerWidth } = this.props;
const { minW, maxW } = this.props;
// Get new XY
// Clamping of dimensions based on resize direction
let updatedSize = size;
if (node) {
updatedSize = resizeItemInDirection(
handle,
position,
size,
containerWidth
);
this.setState({
resizing: handlerName === "onResizeStop" ? null : updatedSize
});
}
// Get new XY based on pixel size
let { w, h } = calcWH(
this.getPositionParams(),
size.width,
size.height,
updatedSize.width,
updatedSize.height,
x,

@@ -602,115 +618,10 @@ y,

// Min/max capping.
// minW should be at least 1 (TODO propTypes validation?)
minW = Math.max(minW, 1);
// Min/max capping
w = clamp(w, minW, maxW);
w = clamp(w, Math.max(minW, 1), maxW);
h = clamp(h, minH, maxH);
let updatedSize = size;
if (node) {
const currentLeft = position.left;
const currentTop = position.top;
const currentWidth = position.width;
const currentHeight = position.height;
const resizeNorth = ({ left, height, width }) => {
const top = currentTop - (height - currentHeight);
return {
top,
left,
width,
height: this.constrainHeight(top, currentHeight, height),
top: this.constrainTop(top)
};
};
const resizeEast = ({ top, left, height, width }) => ({
top,
height,
width: this.constrainWidth(currentLeft, currentWidth, width),
left: this.constrainLeft(left)
});
const resizeWest = ({ top, height, width }) => {
const left = currentLeft - (width - currentWidth);
return {
height,
width:
left <= 0
? currentWidth
: this.constrainWidth(currentLeft, currentWidth, width),
top: this.constrainTop(top),
left: this.constrainLeft(left)
};
};
const resizeSouth = ({ top, left, height, width }) => ({
width,
left,
height: this.constrainHeight(top, currentHeight, height),
top: this.constrainTop(top)
});
const resizeNorthEast = (...args) => resizeNorth(resizeEast(...args));
const resizeNorthWest = (...args) => resizeNorth(resizeWest(...args));
const resizeSouthEast = (...args) => resizeSouth(resizeEast(...args));
const resizeSouthWest = (...args) => resizeSouth(resizeWest(...args));
const ordinalResizeHandlerMap = {
n: resizeNorth,
ne: resizeNorthEast,
e: resizeEast,
se: resizeSouthEast,
s: resizeSouth,
sw: resizeSouthWest,
w: resizeWest,
nw: resizeNorthWest
};
const resizeHandler = ordinalResizeHandlerMap[handle];
updatedSize = resizeHandler
? resizeHandler({
top: currentTop,
left: currentLeft,
height: currentHeight,
width: currentWidth,
...size
})
: size;
this.setState({
resizing: handlerName === "onResizeStop" ? null : updatedSize
});
}
handler.call(this, i, w, h, { e, node, size: updatedSize, handle });
}
/**
* Helper functions to constrain dimensions of a GridItem
*/
constrainWidth(left: number, currentWidth: number, newWidth: number): number {
return left + newWidth > this.props.containerWidth
? currentWidth
: newWidth;
}
constrainHeight(
top: number,
currentHeight: number,
newHeight: number
): number {
return top <= 0 ? currentHeight : newHeight;
}
constrainLeft(left: number): number {
return Math.max(0, left);
}
constrainTop(top: number): number {
return Math.max(0, top);
}
render(): ReactNode {

@@ -717,0 +628,0 @@ const {

12

lib/ReactGridLayoutPropTypes.js

@@ -14,3 +14,4 @@ // @flow

Layout,
LayoutItem
LayoutItem,
ResizeHandleAxis
} from "./utils";

@@ -23,11 +24,2 @@

export type ResizeHandleAxis =
| "s"
| "w"
| "e"
| "n"
| "sw"
| "nw"
| "se"
| "ne";
export type ResizeHandle =

@@ -34,0 +26,0 @@ | ReactElement<any>

133

lib/utils.js

@@ -8,2 +8,13 @@ // @flow

} from "react";
export type ResizeHandleAxis =
| "s"
| "w"
| "e"
| "n"
| "sw"
| "nw"
| "se"
| "ne";
export type LayoutItem = {

@@ -23,3 +34,3 @@ w: number,

isResizable?: ?boolean,
resizeHandles?: Array<"s" | "w" | "e" | "n" | "sw" | "nw" | "se" | "ne">,
resizeHandles?: Array<ResizeHandleAxis>,
isBounded?: ?boolean

@@ -666,2 +677,122 @@ };

/**
* Helper functions to constrain dimensions of a GridItem
*/
const constrainWidth = (
left: number,
currentWidth: number,
newWidth: number,
containerWidth: number
) => {
return left + newWidth > containerWidth ? currentWidth : newWidth;
};
const constrainHeight = (
top: number,
currentHeight: number,
newHeight: number
) => {
return top < 0 ? currentHeight : newHeight;
};
const constrainLeft = (left: number) => Math.max(0, left);
const constrainTop = (top: number) => Math.max(0, top);
const resizeNorth = (currentSize, { left, height, width }, _containerWidth) => {
const top = currentSize.top - (height - currentSize.height);
return {
left,
width,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
};
};
const resizeEast = (
currentSize,
{ top, left, height, width },
containerWidth
) => ({
top,
height,
width: constrainWidth(
currentSize.left,
currentSize.width,
width,
containerWidth
),
left: constrainLeft(left)
});
const resizeWest = (currentSize, { top, height, width }, containerWidth) => {
const left = currentSize.left - (width - currentSize.width);
return {
height,
width:
left < 0
? currentSize.width
: constrainWidth(
currentSize.left,
currentSize.width,
width,
containerWidth
),
top: constrainTop(top),
left: constrainLeft(left)
};
};
const resizeSouth = (
currentSize,
{ top, left, height, width },
containerWidth
) => ({
width,
left,
height: constrainHeight(top, currentSize.height, height),
top: constrainTop(top)
});
const resizeNorthEast = (...args) =>
resizeNorth(args[0], resizeEast(...args), args[2]);
const resizeNorthWest = (...args) =>
resizeNorth(args[0], resizeWest(...args), args[2]);
const resizeSouthEast = (...args) =>
resizeSouth(args[0], resizeEast(...args), args[2]);
const resizeSouthWest = (...args) =>
resizeSouth(args[0], resizeWest(...args), args[2]);
const ordinalResizeHandlerMap = {
n: resizeNorth,
ne: resizeNorthEast,
e: resizeEast,
se: resizeSouthEast,
s: resizeSouth,
sw: resizeSouthWest,
w: resizeWest,
nw: resizeNorthWest
};
/**
* Helper for clamping width and position when resizing an item.
*/
export function resizeItemInDirection(
direction: ResizeHandleAxis,
currentSize: Position,
newSize: Position,
containerWidth: number
): Position {
const ordinalHandler = ordinalResizeHandlerMap[direction];
// Shouldn't be possible given types; that said, don't fail hard
if (!ordinalHandler) return newSize;
return ordinalHandler(
currentSize,
{ ...currentSize, ...newSize },
containerWidth
);
}
export function setTransform({ top, left, width, height }: Position): Object {

@@ -668,0 +799,0 @@ // Replace unitless items with px

7

package.json
{
"name": "react-grid-layout",
"version": "1.4.0",
"version": "1.4.1",
"description": "A draggable and resizable grid layout with responsive breakpoints, for React.",

@@ -41,3 +41,3 @@ "main": "index.js",

"clsx": "^2.0.0",
"fast-equals": "^5.0.1",
"fast-equals": "^4.0.3",
"prop-types": "^15.8.1",

@@ -48,2 +48,5 @@ "react-draggable": "^4.4.5",

},
"_dependencyNotes": {
"fast-equals": "Bug in CRA5 causes fast-equals@5 to fail to import due to .cjs file. See https://github.com/react-grid-layout/react-grid-layout/issues/1904"
},
"devDependencies": {

@@ -50,0 +53,0 @@ "@babel/cli": "^7.22.15",

.packj.yaml
margin.png
dist/react-grid-layout.min.js

Sorry, the diff of this file is too big to display

dist/react-grid-layout.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

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

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc