react-grid-layout
Advanced tools
Comparing version 1.4.0 to 1.4.1
@@ -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 { |
@@ -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> |
@@ -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"), |
@@ -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 { |
@@ -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 |
{ | ||
"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", |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
6596
490626
33
+ Addedfast-equals@4.0.3(transitive)
- Removedfast-equals@5.0.1(transitive)
Updatedfast-equals@^4.0.3