Completely updated React, fixed #11, (hopefully)

This commit is contained in:
2018-03-04 19:11:49 -05:00
parent 6e0afd6e2a
commit 34e5f5139a
13674 changed files with 333464 additions and 473223 deletions

View File

@@ -1,6 +1,7 @@
'use strict';
"use strict";
exports.__esModule = true;
exports.noop = undefined;
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]; } } } return target; };
@@ -28,18 +29,19 @@ exports.synchronizeLayoutWithChildren = synchronizeLayoutWithChildren;
exports.validateLayout = validateLayout;
exports.autoBindHandlers = autoBindHandlers;
var _lodash = require('lodash.isequal');
var _lodash = require("lodash.isequal");
var _lodash2 = _interopRequireDefault(_lodash);
var _react = require('react');
var _react = require("react");
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
// All callbacks are of the signature (layout, oldItem, newItem, placeholder, e).
var isProduction = process.env.NODE_ENV === 'production';
var isProduction = process.env.NODE_ENV === "production";
var DEBUG = false;
/**
* Return the bottom coordinate of the layout.
@@ -68,11 +70,20 @@ function cloneLayout(layout) {
// Fast path to cloning, since this is monomorphic
function cloneLayoutItem(layoutItem) {
return {
w: layoutItem.w, h: layoutItem.h, x: layoutItem.x, y: layoutItem.y, i: layoutItem.i,
minW: layoutItem.minW, maxW: layoutItem.maxW, minH: layoutItem.minH, maxH: layoutItem.maxH,
moved: Boolean(layoutItem.moved), static: Boolean(layoutItem.static),
w: layoutItem.w,
h: layoutItem.h,
x: layoutItem.x,
y: layoutItem.y,
i: layoutItem.i,
minW: layoutItem.minW,
maxW: layoutItem.maxW,
minH: layoutItem.minH,
maxH: layoutItem.maxH,
moved: Boolean(layoutItem.moved),
static: Boolean(layoutItem.static),
// These can be null
isDraggable: layoutItem.isDraggable, isResizable: layoutItem.isResizable
isDraggable: layoutItem.isDraggable,
isResizable: layoutItem.isResizable
};
}
@@ -81,7 +92,6 @@ function cloneLayoutItem(layoutItem) {
* This will catch differences in keys, order, and length.
*/
function childrenEqual(a, b) {
// $FlowIgnore: Appears to think map calls back w/array
return (0, _lodash2.default)(_react2.default.Children.map(a, function (c) {
return c.key;
}), _react2.default.Children.map(b, function (c) {
@@ -123,7 +133,7 @@ function compact(layout, compactType, cols) {
// Don't move static elements
if (!l.static) {
l = compactItem(compareWith, l, compactType, cols);
l = compactItem(compareWith, l, compactType, cols, sorted);
// Add to comparison array. We only collide with items before this one.
// Statics are already in this array.
@@ -140,12 +150,36 @@ function compact(layout, compactType, cols) {
return out;
}
var heightWidth = { x: "w", y: "h" };
/**
* Before moving item down, it will check if the movement will cause collisions and move those items down before.
*/
function resolveCompactionCollision(layout, item, moveToCoord, axis) {
var sizeProp = heightWidth[axis];
item[axis] += 1;
var itemIndex = layout.indexOf(item);
// Go through each item we collide with.
for (var _i4 = itemIndex + 1; _i4 < layout.length; _i4++) {
var otherItem = layout[_i4];
// Ignore static items
if (otherItem.static) continue;
if (collides(item, otherItem)) {
resolveCompactionCollision(layout, otherItem, moveToCoord + item[sizeProp], axis);
}
}
item[axis] = moveToCoord;
}
/**
* Compact an item in the layout.
*/
function compactItem(compareWith, l, compactType, cols) {
var compactV = compactType === 'vertical';
var compactH = compactType === 'horizontal';
function compactItem(compareWith, l, compactType, cols, fullLayout) {
var compactV = compactType === "vertical";
var compactH = compactType === "horizontal";
if (compactV) {
// Bottom 'y' possible is the bottom of the layout.
// This allows you to do nice stuff like specify {y: Infinity}
@@ -167,9 +201,9 @@ function compactItem(compareWith, l, compactType, cols) {
var collides = void 0;
while (collides = getFirstCollision(compareWith, l)) {
if (compactH) {
l.x = collides.x + collides.w;
resolveCompactionCollision(fullLayout, l, collides.x + collides.w, "x");
} else {
l.y = collides.y + collides.h;
resolveCompactionCollision(fullLayout, l, collides.y + collides.h, "y");
}
// Since we can't grow without bounds horizontally, if we've overflown, let's move it down and try again.
if (compactH && l.x + l.w > cols) {
@@ -188,8 +222,8 @@ function compactItem(compareWith, l, compactType, cols) {
*/
function correctBounds(layout, bounds) {
var collidesWith = getStatics(layout);
for (var _i4 = 0, len = layout.length; _i4 < len; _i4++) {
var l = layout[_i4];
for (var _i5 = 0, len = layout.length; _i5 < len; _i5++) {
var l = layout[_i5];
// Overflows right
if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w;
// Overflows left
@@ -216,8 +250,8 @@ function correctBounds(layout, bounds) {
* @return {LayoutItem} Item at ID.
*/
function getLayoutItem(layout, id) {
for (var _i5 = 0, len = layout.length; _i5 < len; _i5++) {
if (layout[_i5].i === id) return layout[_i5];
for (var _i6 = 0, len = layout.length; _i6 < len; _i6++) {
if (layout[_i6].i === id) return layout[_i6];
}
}
@@ -230,8 +264,8 @@ function getLayoutItem(layout, id) {
* @return {Object|undefined} A colliding layout item, or undefined.
*/
function getFirstCollision(layout, layoutItem) {
for (var _i6 = 0, len = layout.length; _i6 < len; _i6++) {
if (collides(layout[_i6], layoutItem)) return layout[_i6];
for (var _i7 = 0, len = layout.length; _i7 < len; _i7++) {
if (collides(layout[_i7], layoutItem)) return layout[_i7];
}
}
@@ -259,11 +293,10 @@ function getStatics(layout) {
* @param {LayoutItem} l element to move.
* @param {Number} [x] X position in grid units.
* @param {Number} [y] Y position in grid units.
* @param {Boolean} [isUserAction] If true, designates that the item we're moving is
* being dragged/resized by the user.
*/
function moveElement(layout, l, x, y, isUserAction, preventCollision, compactType, cols) {
if (l.static) return layout;
log("Moving element " + l.i + " to [" + x + "," + y + "] from [" + l.x + "," + l.y + "]");
// Short-circuit if nothing to do.
if (l.y === y && l.x === x) return layout;
@@ -271,10 +304,9 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
var oldX = l.x;
var oldY = l.y;
var movingUp = y && l.y > y;
// This is quite a bit faster than extending the object
if (typeof x === 'number') l.x = x;
if (typeof y === 'number') l.y = y;
l.x = x;
l.y = y;
l.moved = true;
// If this collides with anything, move it.
@@ -282,11 +314,13 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
// to ensure, in the case of multiple collisions, that we're getting the
// nearest collision.
var sorted = sortLayoutItems(layout, compactType);
var movingUp = compactType === "vertical" ? oldY >= y : compactType === "horizontal" ? oldX >= x : false;
if (movingUp) sorted = sorted.reverse();
var collisions = getAllCollisions(sorted, l);
// There was a collision; abort
if (preventCollision && collisions.length) {
log("Collision prevented on " + l.i + ", reverting.");
l.x = oldX;
l.y = oldY;
l.moved = false;
@@ -294,17 +328,13 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
}
// Move each item that collides away from this element.
for (var _i7 = 0, len = collisions.length; _i7 < len; _i7++) {
var collision = collisions[_i7];
// console.log('resolving collision between', l.i, 'at', l.y, 'and', collision.i, 'at', collision.y);
for (var _i8 = 0, len = collisions.length; _i8 < len; _i8++) {
var collision = collisions[_i8];
log("Resolving collision between " + l.i + " at [" + l.x + "," + l.y + "] and " + collision.i + " at [" + collision.x + "," + collision.y + "]");
// Short circuit so we can't infinite loop
if (collision.moved) continue;
// This makes it feel a bit more precise by waiting to swap for just a bit when moving up.
if (l.y > collision.y && l.y - collision.y > collision.h / 4) continue;
if (l.x > collision.x && l.x - collision.x > collision.w / 4) continue;
// Don't move static items - we have to move *this* element away
if (collision.static) {
layout = moveElementAwayFromCollision(layout, collision, l, isUserAction, compactType, cols);
@@ -323,35 +353,36 @@ function moveElement(layout, l, x, y, isUserAction, preventCollision, compactTyp
* @param {Array} layout Full layout to modify.
* @param {LayoutItem} collidesWith Layout item we're colliding with.
* @param {LayoutItem} itemToMove Layout item we're moving.
* @param {Boolean} [isUserAction] If true, designates that the item we're moving is being dragged/resized
* by the user.
*/
function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction, compactType, cols) {
var compactH = compactType === 'horizontal';
var compactV = compactType === 'vertical';
var compactH = compactType === "horizontal";
var compactV = compactType === "vertical";
var preventCollision = false; // we're already colliding
// If there is enough space above the collision to put this element, move it there.
// We only do this on the main collision as this can get funky in cascades and cause
// unwanted swapping behavior.
if (isUserAction) {
// Reset isUserAction flag because we're not in the main collision anymore.
isUserAction = false;
// Make a mock item so we don't modify the item here, only modify in moveElement.
var fakeItem = {
x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
y: !compactH ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
w: itemToMove.w,
h: itemToMove.h,
i: '-1'
i: "-1"
};
// No collision? If so, we can go up there; otherwise, we'll end up moving down as normal
if (!getFirstCollision(layout, fakeItem)) {
return moveElement(layout, itemToMove, compactH ? fakeItem.x : undefined, compactV ? fakeItem.y + 1 : undefined, isUserAction, preventCollision, compactType, cols);
log("Doing reverse collision on " + itemToMove.i + " up to [" + fakeItem.x + "," + fakeItem.y + "].");
return moveElement(layout, itemToMove, fakeItem.x, fakeItem.y, isUserAction, preventCollision, compactType, cols);
}
}
// Previously this was optimized to move below the collision directly, but this can cause problems
// with cascading moves, as an item may actually leapflog a collision and cause a reversal in order.
return moveElement(layout, itemToMove, compactH ? itemToMove.x + 1 : undefined, compactV ? itemToMove.y + 1 : undefined, isUserAction, preventCollision, compactType, cols);
return moveElement(layout, itemToMove, compactH ? collidesWith.x + collidesWith.w : itemToMove.x, compactV ? collidesWith.y + collidesWith.h : itemToMove.y, isUserAction, preventCollision, compactType, cols);
}
/**
@@ -361,7 +392,7 @@ function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAc
* @return {String} That number as a percentage.
*/
function perc(num) {
return num * 100 + '%';
return num * 100 + "%";
}
function setTransform(_ref) {
@@ -371,16 +402,16 @@ function setTransform(_ref) {
height = _ref.height;
// Replace unitless items with px
var translate = 'translate(' + left + 'px,' + top + 'px)';
var translate = "translate(" + left + "px," + top + "px)";
return {
transform: translate,
WebkitTransform: translate,
MozTransform: translate,
msTransform: translate,
OTransform: translate,
width: width + 'px',
height: height + 'px',
position: 'absolute'
width: width + "px",
height: height + "px",
position: "absolute"
};
}
@@ -391,11 +422,11 @@ function setTopLeft(_ref2) {
height = _ref2.height;
return {
top: top + 'px',
left: left + 'px',
width: width + 'px',
height: height + 'px',
position: 'absolute'
top: top + "px",
left: left + "px",
width: width + "px",
height: height + "px",
position: "absolute"
};
}
@@ -406,7 +437,7 @@ function setTopLeft(_ref2) {
* @return {Array} Layout, sorted static items first.
*/
function sortLayoutItems(layout, compactType) {
if (compactType === 'horizontal') return sortLayoutItemsByColRow(layout);else return sortLayoutItemsByRowCol(layout);
if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);else return sortLayoutItemsByRowCol(layout);
}
function sortLayoutItemsByRowCol(layout) {
@@ -451,20 +482,26 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactTyp
layout[i] = cloneLayoutItem(exists);
} else {
if (!isProduction && child.props._grid) {
console.warn('`_grid` properties on children have been deprecated as of React 15.2. ' + // eslint-disable-line
'Please use `data-grid` or add your properties directly to the `layout`.');
console.warn("`_grid` properties on children have been deprecated as of React 15.2. " + // eslint-disable-line
"Please use `data-grid` or add your properties directly to the `layout`.");
}
var g = child.props['data-grid'] || child.props._grid;
var g = child.props["data-grid"] || child.props._grid;
// Hey, this item has a data-grid property, use it.
if (g) {
if (!isProduction) {
validateLayout([g], 'ReactGridLayout.children');
validateLayout([g], "ReactGridLayout.children");
}
layout[i] = cloneLayoutItem(_extends({}, g, { i: child.key }));
} else {
// Nothing provided: ensure this is added to the bottom
layout[i] = cloneLayoutItem({ w: 1, h: 1, x: 0, y: bottom(layout), i: String(child.key) });
layout[i] = cloneLayoutItem({
w: 1,
h: 1,
x: 0,
y: bottom(layout),
i: String(child.key)
});
}
}
});
@@ -483,22 +520,23 @@ function synchronizeLayoutWithChildren(initialLayout, children, cols, compactTyp
* @param {String} [contextName] Context name for errors.
* @throw {Error} Validation error.
*/
function validateLayout(layout, contextName) {
contextName = contextName || "Layout";
var subProps = ['x', 'y', 'w', 'h'];
function validateLayout(layout) {
var contextName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "Layout";
var subProps = ["x", "y", "w", "h"];
if (!Array.isArray(layout)) throw new Error(contextName + " must be an array!");
for (var _i8 = 0, len = layout.length; _i8 < len; _i8++) {
var item = layout[_i8];
for (var _i9 = 0, len = layout.length; _i9 < len; _i9++) {
var item = layout[_i9];
for (var j = 0; j < subProps.length; j++) {
if (typeof item[subProps[j]] !== 'number') {
throw new Error('ReactGridLayout: ' + contextName + '[' + _i8 + '].' + subProps[j] + ' must be a number!');
if (typeof item[subProps[j]] !== "number") {
throw new Error("ReactGridLayout: " + contextName + "[" + _i9 + "]." + subProps[j] + " must be a number!");
}
}
if (item.i && typeof item.i !== 'string') {
throw new Error('ReactGridLayout: ' + contextName + '[' + _i8 + '].i must be a string!');
if (item.i && typeof item.i !== "string") {
throw new Error("ReactGridLayout: " + contextName + "[" + _i9 + "].i must be a string!");
}
if (item.static !== undefined && typeof item.static !== 'boolean') {
throw new Error('ReactGridLayout: ' + contextName + '[' + _i8 + '].static must be a boolean!');
if (item.static !== undefined && typeof item.static !== "boolean") {
throw new Error("ReactGridLayout: " + contextName + "[" + _i9 + "].static must be a boolean!");
}
}
}
@@ -508,4 +546,14 @@ function autoBindHandlers(el, fns) {
fns.forEach(function (key) {
return el[key] = el[key].bind(el);
});
}
}
function log() {
var _console;
if (!DEBUG) return;
// eslint-disable-next-line no-console
(_console = console).log.apply(_console, arguments);
}
var noop = exports.noop = function noop() {};