resize-observer-polyfill-1.5.1",[],(function(a,b,c,d,e,f){"use strict";var g={},h={exports:g};function i(){(function(b,c){typeof g==="object"&&typeof h!=="undefined"?h.exports=c():b.ResizeObserver=c()})(this,function(){var b=function(){if(typeof Map!=="undefined")return Map;function a(a,b){var c=-1;a.some(function(d,a){if(d[0]===b){c=a;return!0}return!1});return c}return function(){function b(){this.__entries__=[]}Object.defineProperty(b.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0});b.prototype.get=function(b){b=a(this.__entries__,b);b=this.__entries__[b];return b&&b[1]};b.prototype.set=function(c,d){var b=a(this.__entries__,c);~b?this.__entries__[b][1]=d:this.__entries__.push([c,d])};b.prototype["delete"]=function(b){var c=this.__entries__;b=a(c,b);~b&&c.splice(b,1)};b.prototype.has=function(b){return!!~a(this.__entries__,b)};b.prototype.clear=function(){this.__entries__.splice(0)};b.prototype.forEach=function(a,b){b===void 0&&(b=null);for(var c=0,d=this.__entries__;c0};a.prototype.connect_=function(){if(!c||this.connected_)return;document.addEventListener("transitionend",this.onTransitionEnd_);window.addEventListener("resize",this.refresh);j?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0);this.connected_=!0};a.prototype.disconnect_=function(){if(!c||!this.connected_)return;document.removeEventListener("transitionend",this.onTransitionEnd_);window.removeEventListener("resize",this.refresh);this.mutationsObserver_&&this.mutationsObserver_.disconnect();this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh);this.mutationsObserver_=null;this.mutationEventsAdded_=!1;this.connected_=!1};a.prototype.onTransitionEnd_=function(a){a=a.propertyName;var b=a===void 0?"":a;a=i.some(function(a){return!!~b.indexOf(a)});a&&this.refresh()};a.getInstance=function(){this.instance_||(this.instance_=new a());return this.instance_};a.instance_=null;return a}(),l=function(a,b){for(var c=0,d=Object.keys(b);c0};return a}(),B=typeof WeakMap!=="undefined"?new WeakMap():new b(),C=function(){function a(b){if(!(this instanceof a))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var c=k.getInstance(),d=new A(b,c,this);B.set(this,d)}return a}();["observe","unobserve","disconnect"].forEach(function(a){C.prototype[a]=function(){var b;return(b=B.get(this))[a].apply(b,arguments)}});var D=function(){return typeof d.ResizeObserver!=="undefined"?d.ResizeObserver:C}();return D})}var j=!1;function k(){j||(j=!0,i());return h.exports}function b(a){switch(a){case void 0:return k()}}e.exports=b}),null);
/**
* License: https://www.facebook.com/legal/license/t3hOLs8wlXy/
*/
-----
resize-observer-polyfill-deprecated",["resize-observer-polyfill-1.5.1"],(function(a,b,c,d,e,f){e.exports=b("resize-observer-polyfill-1.5.1")()}),null);
-----
react-grid-layout-1.4.2",["react-0.0.0","fast-equals-4.0.3","clsx-2.0.0","prop-types-15.8.1","react-draggable-4.4.6","react-resizable-3.0.5","resize-observer-polyfill-1.5.1"],(function $module_react_grid_layout_1_4_2(global,require,requireDynamic,requireLazy,module,exports){ "use strict"; var require$$1$2 = require("react-0.0.0"); var require$$1$1 = require("fast-equals-4.0.3"); var require$$8 = require("clsx-2.0.0"); var require$$2$1 = require("prop-types-15.8.1"); var require$$3$2 = require("react-draggable-4.4.6"); var require$$4$1 = require("react-resizable-3.0.5"); var require$$3$3 = require("resize-observer-polyfill-1.5.1"); var exports$a = {}; var module$a = { exports: exports$a }; function TROMPLE_MAIN$9() { // this file was prevaled module$a.exports = function fastRGLPropsEqual(a, b, isEqualImpl) { if (a === b) return true; return a.className === b.className && isEqualImpl(a.style, b.style) && a.width === b.width && a.autoSize === b.autoSize && a.cols === b.cols && a.draggableCancel === b.draggableCancel && a.draggableHandle === b.draggableHandle && isEqualImpl(a.verticalCompact, b.verticalCompact) && isEqualImpl(a.compactType, b.compactType) && isEqualImpl(a.layout, b.layout) && isEqualImpl(a.margin, b.margin) && isEqualImpl(a.containerPadding, b.containerPadding) && a.rowHeight === b.rowHeight && a.maxRows === b.maxRows && a.isBounded === b.isBounded && a.isDraggable === b.isDraggable && a.isResizable === b.isResizable && a.allowOverlap === b.allowOverlap && a.preventCollision === b.preventCollision && a.useCSSTransforms === b.useCSSTransforms && a.transformScale === b.transformScale && a.isDroppable === b.isDroppable && isEqualImpl(a.resizeHandles, b.resizeHandles) && isEqualImpl(a.resizeHandle, b.resizeHandle) && a.onLayoutChange === b.onLayoutChange && a.onDragStart === b.onDragStart && a.onDrag === b.onDrag && a.onDragStop === b.onDragStop && a.onResizeStart === b.onResizeStart && a.onResize === b.onResize && a.onResizeStop === b.onResizeStop && a.onDrop === b.onDrop && isEqualImpl(a.droppingItem, b.droppingItem) && isEqualImpl(a.innerRef, b.innerRef); }; } var TROMPLE_HAS_RAN$9 = false; function require$$3$1 () { if (!TROMPLE_HAS_RAN$9) { TROMPLE_HAS_RAN$9 = true; TROMPLE_MAIN$9(); } return module$a.exports; } var exports$9 = {}; var module$9 = { exports: exports$9 }; function TROMPLE_MAIN$8() { Object.defineProperty(exports$9, "__esModule", { value: true }); exports$9.bottom = bottom; exports$9.childrenEqual = childrenEqual; exports$9.cloneLayout = cloneLayout; exports$9.cloneLayoutItem = cloneLayoutItem; exports$9.collides = collides; exports$9.compact = compact; exports$9.compactItem = compactItem; exports$9.compactType = compactType; exports$9.correctBounds = correctBounds; exports$9.fastPositionEqual = fastPositionEqual; exports$9.fastRGLPropsEqual = void 0; exports$9.getAllCollisions = getAllCollisions; exports$9.getFirstCollision = getFirstCollision; exports$9.getLayoutItem = getLayoutItem; exports$9.getStatics = getStatics; exports$9.modifyLayout = modifyLayout; exports$9.moveElement = moveElement; exports$9.moveElementAwayFromCollision = moveElementAwayFromCollision; exports$9.noop = void 0; exports$9.perc = perc; exports$9.resizeItemInDirection = resizeItemInDirection; exports$9.setTopLeft = setTopLeft; exports$9.setTransform = setTransform; exports$9.sortLayoutItems = sortLayoutItems; exports$9.sortLayoutItemsByColRow = sortLayoutItemsByColRow; exports$9.sortLayoutItemsByRowCol = sortLayoutItemsByRowCol; exports$9.synchronizeLayoutWithChildren = synchronizeLayoutWithChildren; exports$9.validateLayout = validateLayout; exports$9.withLayoutItem = withLayoutItem; var _fastEquals = require$$1$1(); var _react = _interopRequireDefault(require$$1$2()); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } /** * Return the bottom coordinate of the layout. * * @param {Array} layout Layout array. * @return {Number} Bottom coordinate. */ function bottom(layout /*: Layout*/) /*: number*/{ let max = 0, bottomY; for (let i = 0, len = layout.length; i < len; i++) { bottomY = layout[i].y + layout[i].h; if (bottomY > max) max = bottomY; } return max; } function cloneLayout(layout /*: Layout*/) /*: Layout*/{ const newLayout = Array(layout.length); for (let i = 0, len = layout.length; i < len; i++) { newLayout[i] = cloneLayoutItem(layout[i]); } return newLayout; } // Modify a layoutItem inside a layout. Returns a new Layout, // does not mutate. Carries over all other LayoutItems unmodified. function modifyLayout(layout /*: Layout*/, layoutItem /*: LayoutItem*/) /*: Layout*/{ const newLayout = Array(layout.length); for (let i = 0, len = layout.length; i < len; i++) { if (layoutItem.i === layout[i].i) { newLayout[i] = layoutItem; } else { newLayout[i] = layout[i]; } } return newLayout; } // Function to be called to modify a layout item. // Does defensive clones to ensure the layout is not modified. function withLayoutItem(layout /*: Layout*/, itemKey /*: string*/, cb /*: LayoutItem => LayoutItem*/) /*: [Layout, ?LayoutItem]*/{ let item = getLayoutItem(layout, itemKey); if (!item) return [layout, null]; item = cb(cloneLayoutItem(item)); // defensive clone then modify // FIXME could do this faster if we already knew the index layout = modifyLayout(layout, item); return [layout, item]; } // Fast path to cloning, since this is monomorphic function cloneLayoutItem(layoutItem /*: LayoutItem*/) /*: 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), // These can be null/undefined isDraggable: layoutItem.isDraggable, isResizable: layoutItem.isResizable, resizeHandles: layoutItem.resizeHandles, isBounded: layoutItem.isBounded }; } /** * Comparing React `children` is a bit difficult. This is a good way to compare them. * This will catch differences in keys, order, and length. */ function childrenEqual(a /*: ReactChildren*/, b /*: ReactChildren*/) /*: boolean*/{ return (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c === null || c === void 0 ? void 0 : c.key), _react.default.Children.map(b, c => c === null || c === void 0 ? void 0 : c.key)) && (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c === null || c === void 0 ? void 0 : c.props["data-grid"]), _react.default.Children.map(b, c => c === null || c === void 0 ? void 0 : c.props["data-grid"])); } /** * See `fastRGLPropsEqual.js`. * We want this to run as fast as possible - it is called often - and to be * resilient to new props that we add. So rather than call lodash.isEqual, * which isn"t suited to comparing props very well, we use this specialized * function in conjunction with preval to generate the fastest possible comparison * function, tuned for exactly our props. */ /*:: type FastRGLPropsEqual = (Object, Object, Function) => boolean;*/ const fastRGLPropsEqual /*: FastRGLPropsEqual*/ = require$$3$1(); // Like the above, but a lot simpler. exports$9.fastRGLPropsEqual = fastRGLPropsEqual; function fastPositionEqual(a /*: Position*/, b /*: Position*/) /*: boolean*/{ return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height; } /** * Given two layoutitems, check if they collide. */ function collides(l1 /*: LayoutItem*/, l2 /*: LayoutItem*/) /*: boolean*/{ if (l1.i === l2.i) return false; // same element if (l1.x + l1.w <= l2.x) return false; // l1 is left of l2 if (l1.x >= l2.x + l2.w) return false; // l1 is right of l2 if (l1.y + l1.h <= l2.y) return false; // l1 is above l2 if (l1.y >= l2.y + l2.h) return false; // l1 is below l2 return true; // boxes overlap } /** * Given a layout, compact it. This involves going down each y coordinate and removing gaps * between items. * * Does not modify layout items (clones). Creates a new layout array. * * @param {Array} layout Layout. * @param {Boolean} verticalCompact Whether or not to compact the layout * vertically. * @param {Boolean} allowOverlap When `true`, allows overlapping grid items. * @return {Array} Compacted Layout. */ function compact(layout /*: Layout*/, compactType /*: CompactType*/, cols /*: number*/, allowOverlap /*: ?boolean*/) /*: Layout*/{ // Statics go in the compareWith array right away so items flow around them. const compareWith = getStatics(layout); // We go through the items by row and column. const sorted = sortLayoutItems(layout, compactType); // Holding for new items. const out = Array(layout.length); for (let i = 0, len = sorted.length; i < len; i++) { let l = cloneLayoutItem(sorted[i]); // Don"t move static elements if (!l.static) { l = compactItem(compareWith, l, compactType, cols, sorted, allowOverlap); // Add to comparison array. We only collide with items before this one. // Statics are already in this array. compareWith.push(l); } // Add to output array to make sure they still come out in the right order. out[layout.indexOf(sorted[i])] = l; // Clear moved flag, if it exists. l.moved = false; } return out; } const 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 /*: Layout*/, item /*: LayoutItem*/, moveToCoord /*: number*/, axis /*: "x" | "y"*/) { const sizeProp = heightWidth[axis]; item[axis] += 1; const itemIndex = layout.map(layoutItem => { return layoutItem.i; }).indexOf(item.i); // Go through each item we collide with. for (let i = itemIndex + 1; i < layout.length; i++) { const otherItem = layout[i]; // Ignore static items if (otherItem.static) continue; // Optimization: we can break early if we know we"re past this el // We can do this b/c it"s a sorted layout if (otherItem.y > item.y + item.h) break; if (collides(item, otherItem)) { resolveCompactionCollision(layout, otherItem, moveToCoord + item[sizeProp], axis); } } item[axis] = moveToCoord; } /** * Compact an item in the layout. * * Modifies item. * */ function compactItem(compareWith /*: Layout*/, l /*: LayoutItem*/, compactType /*: CompactType*/, cols /*: number*/, fullLayout /*: Layout*/, allowOverlap /*: ?boolean*/) /*: LayoutItem*/{ const compactV = compactType === "vertical"; const 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} // This is here because the layout must be sorted in order to get the correct bottom `y`. l.y = Math.min(bottom(compareWith), l.y); // Move the element up as far as it can go without colliding. while (l.y > 0 && !getFirstCollision(compareWith, l)) { l.y--; } } else if (compactH) { // Move the element left as far as it can go without colliding. while (l.x > 0 && !getFirstCollision(compareWith, l)) { l.x--; } } // Move it down, and keep moving it down if it"s colliding. let collides; // Checking the compactType null value to avoid breaking the layout when overlapping is allowed. while ((collides = getFirstCollision(compareWith, l)) && !(compactType === null && allowOverlap)) { if (compactH) { resolveCompactionCollision(fullLayout, l, collides.x + collides.w, "x"); } else { 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) { l.x = cols - l.w; l.y++; // ALso move element as left as we can while (l.x > 0 && !getFirstCollision(compareWith, l)) { l.x--; } } } // Ensure that there are no negative positions l.y = Math.max(l.y, 0); l.x = Math.max(l.x, 0); return l; } /** * Given a layout, make sure all elements fit within its bounds. * * Modifies layout items. * * @param {Array} layout Layout array. * @param {Number} bounds Number of columns. */ function correctBounds(layout /*: Layout*/, bounds /*: { cols: number }*/) /*: Layout*/{ const collidesWith = getStatics(layout); for (let i = 0, len = layout.length; i < len; i++) { const l = layout[i]; // Overflows right if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w; // Overflows left if (l.x < 0) { l.x = 0; l.w = bounds.cols; } if (!l.static) collidesWith.push(l);else { // If this is static and collides with other statics, we must move it down. // We have to do something nicer than just letting them overlap. while (getFirstCollision(collidesWith, l)) { l.y++; } } } return layout; } /** * Get a layout item by ID. Used so we can override later on if necessary. * * @param {Array} layout Layout array. * @param {String} id ID * @return {LayoutItem} Item at ID. */ function getLayoutItem(layout /*: Layout*/, id /*: string*/) /*: ?LayoutItem*/{ for (let i = 0, len = layout.length; i < len; i++) { if (layout[i].i === id) return layout[i]; } } /** * Returns the first item this layout collides with. * It doesn"t appear to matter which order we approach this from, although * perhaps that is the wrong thing to do. * * @param {Object} layoutItem Layout item. * @return {Object|undefined} A colliding layout item, or undefined. */ function getFirstCollision(layout /*: Layout*/, layoutItem /*: LayoutItem*/) /*: ?LayoutItem*/{ for (let i = 0, len = layout.length; i < len; i++) { if (collides(layout[i], layoutItem)) return layout[i]; } } function getAllCollisions(layout /*: Layout*/, layoutItem /*: LayoutItem*/) /*: Array*/{
return layout.filter(l => collides(l, layoutItem));
}
/**
* Get all static elements.
* @param {Array} layout Array of layout objects.
* @return {Array} Array of static layout items..
*/
function getStatics(layout /*: Layout*/) /*: Array*/{
return layout.filter(l => l.static);
}
/**
* Move an element. Responsible for doing cascading movements of other elements.
*
* Modifies layout items.
*
* @param {Array} layout Full layout to modify.
* @param {LayoutItem} l element to move.
* @param {Number} [x] X position in grid units.
* @param {Number} [y] Y position in grid units.
*/
function moveElement(layout /*: Layout*/, l /*: LayoutItem*/, x /*: ?number*/, y /*: ?number*/, isUserAction /*: ?boolean*/, preventCollision /*: ?boolean*/, compactType /*: CompactType*/, cols /*: number*/, allowOverlap /*: ?boolean*/) /*: Layout*/{
// If this is static and not explicitly enabled as draggable,
// no move is possible, so we can short-circuit this immediately.
if (l.static && l.isDraggable !== true) return layout;
// Short-circuit if nothing to do.
if (l.y === y && l.x === x) return layout;
log("Moving element ".concat(l.i, " to [").concat(String(x), ",").concat(String(y), "] from [").concat(l.x, ",").concat(l.y, "]"));
const oldX = l.x;
const oldY = l.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.moved = true;
// If this collides with anything, move it.
// When doing this comparison, we have to sort the items we compare with
// to ensure, in the case of multiple collisions, that we"re getting the
// nearest collision.
let sorted = sortLayoutItems(layout, compactType);
const movingUp = compactType === "vertical" && typeof y === "number" ? oldY >= y : compactType === "horizontal" && typeof x === "number" ? oldX >= x : false;
// $FlowIgnore acceptable modification of read-only array as it was recently cloned
if (movingUp) sorted = sorted.reverse();
const collisions = getAllCollisions(sorted, l);
const hasCollisions = collisions.length > 0;
// We may have collisions. We can short-circuit if we"ve turned off collisions or
// allowed overlap.
if (hasCollisions && allowOverlap) {
// Easy, we don"t need to resolve collisions. But we *did* change the layout,
// so clone it on the way out.
return cloneLayout(layout);
} else if (hasCollisions && preventCollision) {
// If we are preventing collision but not allowing overlap, we need to
// revert the position of this element so it goes to where it came from, rather
// than the user"s desired location.
log("Collision prevented on ".concat(l.i, ", reverting."));
l.x = oldX;
l.y = oldY;
l.moved = false;
return layout; // did not change so don"t clone
}
// Move each item that collides away from this element.
for (let i = 0, len = collisions.length; i < len; i++) {
const collision = collisions[i];
log("Resolving collision between ".concat(l.i, " at [").concat(l.x, ",").concat(l.y, "] and ").concat(collision.i, " at [").concat(collision.x, ",").concat(collision.y, "]"));
// Short circuit so we can"t infinite loop
if (collision.moved) continue;
// Don"t move static items - we have to move *this* element away
if (collision.static) {
layout = moveElementAwayFromCollision(layout, collision, l, isUserAction, compactType);
} else {
layout = moveElementAwayFromCollision(layout, l, collision, isUserAction, compactType);
}
}
return layout;
}
/**
* This is where the magic needs to happen - given a collision, move an element away from the collision.
* We attempt to move it up if there"s room, otherwise it goes below.
*
* @param {Array} layout Full layout to modify.
* @param {LayoutItem} collidesWith Layout item we"re colliding with.
* @param {LayoutItem} itemToMove Layout item we"re moving.
*/
function moveElementAwayFromCollision(layout /*: Layout*/, collidesWith /*: LayoutItem*/, itemToMove /*: LayoutItem*/, isUserAction /*: ?boolean*/, compactType /*: CompactType*/, cols /*: number*/) /*: Layout*/{
const compactH = compactType === "horizontal";
// Compact vertically if not set to horizontal
const compactV = compactType === "vertical";
const preventCollision = collidesWith.static; // we"re already colliding (not for static items)
// 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.
const fakeItem /*: LayoutItem*/ = {
x: compactH ? Math.max(collidesWith.x - itemToMove.w, 0) : itemToMove.x,
y: compactV ? Math.max(collidesWith.y - itemToMove.h, 0) : itemToMove.y,
w: itemToMove.w,
h: itemToMove.h,
i: "-1"
};
const firstCollision = getFirstCollision(layout, fakeItem);
const collisionNorth = firstCollision && firstCollision.y + firstCollision.h > collidesWith.y;
const collisionWest = firstCollision && collidesWith.x + collidesWith.w > firstCollision.x;
// No collision? If so, we can go up there; otherwise, we"ll end up moving down as normal
if (!firstCollision) {
log("Doing reverse collision on ".concat(itemToMove.i, " up to [").concat(fakeItem.x, ",").concat(fakeItem.y, "]."));
return moveElement(layout, itemToMove, compactH ? fakeItem.x : undefined, compactV ? fakeItem.y : undefined, isUserAction, preventCollision, compactType);
} else if (collisionNorth && compactV) {
return moveElement(layout, itemToMove, undefined, collidesWith.y + 1, isUserAction, preventCollision, compactType);
} else if (collisionNorth && compactType == null) {
collidesWith.y = itemToMove.y;
itemToMove.y = itemToMove.y + itemToMove.h;
return layout;
} else if (collisionWest && compactH) {
return moveElement(layout, collidesWith, itemToMove.x, undefined, isUserAction, preventCollision, compactType);
}
}
const newX = compactH ? itemToMove.x + 1 : undefined;
const newY = compactV ? itemToMove.y + 1 : undefined;
if (newX == null && newY == null) {
return layout;
}
return moveElement(layout, itemToMove, compactH ? itemToMove.x + 1 : undefined, compactV ? itemToMove.y + 1 : undefined, isUserAction, preventCollision, compactType);
}
/**
* Helper to convert a number to a percentage string.
*
* @param {Number} num Any number
* @return {String} That number as a percentage.
*/
function perc(num /*: number*/) /*: string*/{
return num * 100 + "%";
}
/**
* 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));
};
const resizeNorthWest = function () {
return resizeNorth(arguments.length <= 0 ? undefined : arguments[0], resizeWest(...arguments));
};
const resizeSouthEast = function () {
return resizeSouth(arguments.length <= 0 ? undefined : arguments[0], resizeEast(...arguments));
};
const resizeSouthWest = function () {
return resizeSouth(arguments.length <= 0 ? undefined : arguments[0], resizeWest(...arguments));
};
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*/ = _ref5 /*: Position*/;
// Replace unitless items with px
const translate = "translate(".concat(left, "px,").concat(top, "px)");
return {
transform: translate,
WebkitTransform: translate,
MozTransform: translate,
msTransform: translate,
OTransform: translate,
width: "".concat(width, "px"),
height: "".concat(height, "px"),
position: "absolute"
};
}
function setTopLeft(_ref6 /*:: */) /*: Object*/{
let {
top,
left,
width,
height
} /*: Position*/ = _ref6 /*: Position*/;
return {
top: "".concat(top, "px"),
left: "".concat(left, "px"),
width: "".concat(width, "px"),
height: "".concat(height, "px"),
position: "absolute"
};
}
/**
* Get layout items sorted from top left to right and down.
*
* @return {Array} Array of layout objects.
* @return {Array} Layout, sorted static items first.
*/
function sortLayoutItems(layout /*: Layout*/, compactType /*: CompactType*/) /*: Layout*/{
if (compactType === "horizontal") return sortLayoutItemsByColRow(layout);
if (compactType === "vertical") return sortLayoutItemsByRowCol(layout);else return layout;
}
/**
* Sort layout items by row ascending and column ascending.
*
* Does not modify Layout.
*/
function sortLayoutItemsByRowCol(layout /*: Layout*/) /*: Layout*/{
// Slice to clone array as sort modifies
return layout.slice(0).sort(function (a, b) {
if (a.y > b.y || a.y === b.y && a.x > b.x) {
return 1;
} else if (a.y === b.y && a.x === b.x) {
// Without this, we can get different sort results in IE vs. Chrome/FF
return 0;
}
return -1;
});
}
/**
* Sort layout items by column ascending then row ascending.
*
* Does not modify Layout.
*/
function sortLayoutItemsByColRow(layout /*: Layout*/) /*: Layout*/{
return layout.slice(0).sort(function (a, b) {
if (a.x > b.x || a.x === b.x && a.y > b.y) {
return 1;
}
return -1;
});
}
/**
* Generate a layout using the initialLayout and children as a template.
* Missing entries will be added, extraneous ones will be truncated.
*
* Does not modify initialLayout.
*
* @param {Array} initialLayout Layout passed in through props.
* @param {String} breakpoint Current responsive breakpoint.
* @param {?String} compact Compaction option.
* @return {Array} Working layout.
*/
function synchronizeLayoutWithChildren(initialLayout /*: Layout*/, children /*: ReactChildren*/, cols /*: number*/, compactType /*: CompactType*/, allowOverlap /*: ?boolean*/) /*: Layout*/{
initialLayout = initialLayout || [];
// Generate one layout item per child.
const layout /*: LayoutItem[]*/ = [];
_react.default.Children.forEach(children, (child /*: ReactElement*/) => {
// Child may not exist
if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
const exists = getLayoutItem(initialLayout, String(child.key));
const g = child.props["data-grid"];
// Don"t overwrite the layout item if it"s already in the initial layout.
// If it has a `data-grid` property, prefer that over what"s in the layout.
if (exists && g == null) {
layout.push(cloneLayoutItem(exists));
} else {
// Hey, this item has a data-grid property, use it.
if (g) {
// FIXME clone not really necessary here
layout.push(cloneLayoutItem({
...g,
i: child.key
}));
} else {
// Nothing provided: ensure this is added to the bottom
// FIXME clone not really necessary here
layout.push(cloneLayoutItem({
w: 1,
h: 1,
x: 0,
y: bottom(layout),
i: String(child.key)
}));
}
}
});
// Correct the layout.
const correctedLayout = correctBounds(layout, {
cols: cols
});
return allowOverlap ? correctedLayout : compact(correctedLayout, compactType, cols);
}
/**
* Validate a layout. Throws errors.
*
* @param {Array} layout Array of layout items.
* @param {String} [contextName] Context name for errors.
* @throw {Error} Validation error.
*/
function validateLayout(layout /*: Layout*/) /*: void*/{
let contextName /*: string*/ = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "Layout";
const subProps = ["x", "y", "w", "h"];
if (!Array.isArray(layout)) throw new Error(contextName + " must be an array!");
for (let i = 0, len = layout.length; i < len; i++) {
const item = layout[i];
for (let j = 0; j < subProps.length; j++) {
if (typeof item[subProps[j]] !== "number") {
throw new Error("ReactGridLayout: " + contextName + "[" + i + "]." + subProps[j] + " must be a number!");
}
}
}
}
// Legacy support for verticalCompact: false
function compactType(props /*: ?{ verticalCompact: boolean, compactType: CompactType }*/) /*: CompactType*/{
const {
verticalCompact,
compactType
} = props || {};
return verticalCompact === false ? null : compactType;
}
function log() {
return;
}
const noop = () => {};
exports$9.noop = noop;
}
var TROMPLE_HAS_RAN$8 = false;
function require$$2 () {
if (!TROMPLE_HAS_RAN$8) {
TROMPLE_HAS_RAN$8 = true;
TROMPLE_MAIN$8();
}
return module$9.exports;
}
var exports$8 = {};
var module$8 = { exports: exports$8 };
function TROMPLE_MAIN$7() {
Object.defineProperty(exports$8, "__esModule", {
value: true
});
exports$8.calcGridColWidth = calcGridColWidth;
exports$8.calcGridItemPosition = calcGridItemPosition;
exports$8.calcGridItemWHPx = calcGridItemWHPx;
exports$8.calcWH = calcWH;
exports$8.calcXY = calcXY;
exports$8.clamp = clamp;
/*:: import type { Position } from "./utils";*/
/*:: export type PositionParams = {
margin: [number, number],
containerPadding: [number, number],
containerWidth: number,
cols: number,
rowHeight: number,
maxRows: number
};*/
// Helper for generating column width
function calcGridColWidth(positionParams /*: PositionParams*/) /*: number*/{
const {
margin,
containerPadding,
containerWidth,
cols
} = positionParams;
return (containerWidth - margin[0] * (cols - 1) - containerPadding[0] * 2) / cols;
}
// This can either be called:
// calcGridItemWHPx(w, colWidth, margin[0])
// or
// calcGridItemWHPx(h, rowHeight, margin[1])
function calcGridItemWHPx(gridUnits /*: number*/, colOrRowSize /*: number*/, marginPx /*: number*/) /*: number*/{
// 0 * Infinity === NaN, which causes problems with resize contraints
if (!Number.isFinite(gridUnits)) return gridUnits;
return Math.round(colOrRowSize * gridUnits + Math.max(0, gridUnits - 1) * marginPx);
}
/**
* Return position on the page given an x, y, w, h.
* left, top, width, height are all in pixels.
* @param {PositionParams} positionParams Parameters of grid needed for coordinates calculations.
* @param {Number} x X coordinate in grid units.
* @param {Number} y Y coordinate in grid units.
* @param {Number} w W coordinate in grid units.
* @param {Number} h H coordinate in grid units.
* @return {Position} Object containing coords.
*/
function calcGridItemPosition(positionParams /*: PositionParams*/, x /*: number*/, y /*: number*/, w /*: number*/, h /*: number*/, state /*: ?Object*/) /*: Position*/{
const {
margin,
containerPadding,
rowHeight
} = positionParams;
const colWidth = calcGridColWidth(positionParams);
const out = {};
// If resizing, use the exact width and height as returned from resizing callbacks.
if (state && state.resizing) {
out.width = Math.round(state.resizing.width);
out.height = Math.round(state.resizing.height);
}
// Otherwise, calculate from grid units.
else {
out.width = calcGridItemWHPx(w, colWidth, margin[0]);
out.height = calcGridItemWHPx(h, rowHeight, margin[1]);
}
// If dragging, use the exact width and height as returned from dragging callbacks.
if (state && state.dragging) {
out.top = Math.round(state.dragging.top);
out.left = Math.round(state.dragging.left);
} else if (state && state.resizing && typeof state.resizing.top === "number" && typeof state.resizing.left === "number") {
out.top = Math.round(state.resizing.top);
out.left = Math.round(state.resizing.left);
}
// Otherwise, calculate from grid units.
else {
out.top = Math.round((rowHeight + margin[1]) * y + containerPadding[1]);
out.left = Math.round((colWidth + margin[0]) * x + containerPadding[0]);
}
return out;
}
/**
* Translate x and y coordinates from pixels to grid units.
* @param {PositionParams} positionParams Parameters of grid needed for coordinates calculations.
* @param {Number} top Top position (relative to parent) in pixels.
* @param {Number} left Left position (relative to parent) in pixels.
* @param {Number} w W coordinate in grid units.
* @param {Number} h H coordinate in grid units.
* @return {Object} x and y in grid units.
*/
function calcXY(positionParams /*: PositionParams*/, top /*: number*/, left /*: number*/, w /*: number*/, h /*: number*/) /*: { x: number, y: number }*/{
const {
margin,
cols,
rowHeight,
maxRows
} = positionParams;
const colWidth = calcGridColWidth(positionParams);
// left = colWidth * x + margin * (x + 1)
// l = cx + m(x+1)
// l = cx + mx + m
// l - m = cx + mx
// l - m = x(c + m)
// (l - m) / (c + m) = x
// x = (left - margin) / (coldWidth + margin)
let x = Math.round((left - margin[0]) / (colWidth + margin[0]));
let y = Math.round((top - margin[1]) / (rowHeight + margin[1]));
// Capping
x = clamp(x, 0, cols - w);
y = clamp(y, 0, maxRows - h);
return {
x,
y
};
}
/**
* Given a height and width in pixel values, calculate grid units.
* @param {PositionParams} positionParams Parameters of grid needed for coordinates calcluations.
* @param {Number} height Height in pixels.
* @param {Number} width Width in pixels.
* @param {Number} x X coordinate in grid units.
* @param {Number} y Y coordinate in grid units.
* @param {String} handle Resize Handle.
* @return {Object} w, h as grid units.
*/
function calcWH(positionParams /*: PositionParams*/, width /*: number*/, height /*: number*/, x /*: number*/, y /*: number*/, handle /*: string*/) /*: { w: number, h: number }*/{
const {
margin,
maxRows,
cols,
rowHeight
} = positionParams;
const colWidth = calcGridColWidth(positionParams);
// width = colWidth * w - (margin * (w - 1))
// ...
// w = (width + margin) / (colWidth + margin)
let w = Math.round((width + margin[0]) / (colWidth + margin[0]));
let h = Math.round((height + margin[1]) / (rowHeight + margin[1]));
// Capping
let _w = clamp(w, 0, cols - x);
let _h = clamp(h, 0, maxRows - y);
if (["sw", "w", "nw"].indexOf(handle) !== -1) {
_w = clamp(w, 0, cols);
}
if (["nw", "n", "ne"].indexOf(handle) !== -1) {
_h = clamp(h, 0, maxRows);
}
return {
w: _w,
h: _h
};
}
// Similar to _.clamp
function clamp(num /*: number*/, lowerBound /*: number*/, upperBound /*: number*/) /*: number*/{
return Math.max(Math.min(num, upperBound), lowerBound);
}
}
var TROMPLE_HAS_RAN$7 = false;
function require$$3 () {
if (!TROMPLE_HAS_RAN$7) {
TROMPLE_HAS_RAN$7 = true;
TROMPLE_MAIN$7();
}
return module$8.exports;
}
var exports$7 = {};
var module$7 = { exports: exports$7 };
function TROMPLE_MAIN$6() {
Object.defineProperty(exports$7, "__esModule", {
value: true
});
exports$7.resizeHandleType = exports$7.resizeHandleAxesType = exports$7.default = void 0;
var _propTypes = _interopRequireDefault(require$$2$1());
var _react = _interopRequireDefault(require$$1$2());
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/*:: import type {
Ref,
ChildrenArray as ReactChildrenArray,
Element as ReactElement
} from "react";*/
/*:: import type {
DragOverEvent,
EventCallback,
CompactType,
Layout,
LayoutItem,
ResizeHandleAxis
} from "./utils";*/
/*:: export type ReactRef = {|
+current: T | null
|};*/
// util
/*:: export type ResizeHandle =
| ReactElement
| ((
resizeHandleAxis: ResizeHandleAxis,
ref: ReactRef
) => ReactElement);*/
// Defines which resize handles should be rendered (default: "se")
// Allows for any combination of:
// "s" - South handle (bottom-center)
// "w" - West handle (left-center)
// "e" - East handle (right-center)
// "n" - North handle (top-center)
// "sw" - Southwest handle (bottom-left)
// "nw" - Northwest handle (top-left)
// "se" - Southeast handle (bottom-right)
// "ne" - Northeast handle (top-right)
const resizeHandleAxesType /*: ReactPropsChainableTypeChecker*/ = _propTypes.default.arrayOf(_propTypes.default.oneOf(["s", "w", "e", "n", "sw", "nw", "se", "ne"]));
// Custom component for resize handles
exports$7.resizeHandleAxesType = resizeHandleAxesType;
const resizeHandleType /*: ReactPropsChainableTypeChecker*/ = _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]);
/*:: export type Props = {|
className: string,
style: Object,
width: number,
autoSize: boolean,
cols: number,
draggableCancel: string,
draggableHandle: string,
verticalCompact: boolean,
compactType: CompactType,
layout: Layout,
margin: [number, number],
containerPadding: ?[number, number],
rowHeight: number,
maxRows: number,
isBounded: boolean,
isDraggable: boolean,
isResizable: boolean,
isDroppable: boolean,
preventCollision: boolean,
useCSSTransforms: boolean,
transformScale: number,
droppingItem: $Shape,
resizeHandles: ResizeHandleAxis[],
resizeHandle?: ResizeHandle,
allowOverlap: boolean,
// Callbacks
onLayoutChange: Layout => void,
onDrag: EventCallback,
onDragStart: EventCallback,
onDragStop: EventCallback,
onResize: EventCallback,
onResizeStart: EventCallback,
onResizeStop: EventCallback,
onDropDragOver: (e: DragOverEvent) => ?({| w?: number, h?: number |} | false),
onDrop: (layout: Layout, item: ?LayoutItem, e: Event) => void,
children: ReactChildrenArray>,
innerRef?: Ref<"div">
|};*/
/*:: export type DefaultProps = $Diff<
Props,
{
children: ReactChildrenArray>,
width: number
}
>;*/
exports$7.resizeHandleType = resizeHandleType;
var _default = {
//
// Basic props
//
className: _propTypes.default.string,
style: _propTypes.default.object,
// This can be set explicitly. If it is not set, it will automatically
// be set to the container width. Note that resizes will *not* cause this to adjust.
// If you need that behavior, use WidthProvider.
width: _propTypes.default.number,
// If true, the container height swells and contracts to fit contents
autoSize: _propTypes.default.bool,
// # of cols.
cols: _propTypes.default.number,
// A selector that will not be draggable.
draggableCancel: _propTypes.default.string,
// A selector for the draggable handler
draggableHandle: _propTypes.default.string,
// Deprecated
verticalCompact: function (props /*: Props*/) {
if (props.verticalCompact === false && "production" !== "production") {
console.warn(
// eslint-disable-line no-console
"`verticalCompact` on is deprecated and will be removed soon. " + "Use `compactType`: "horizontal" | "vertical" | null.");
}
},
// Choose vertical or hotizontal compaction
compactType: (_propTypes.default.oneOf(["vertical", "horizontal"]) /*: ReactPropsChainableTypeChecker*/),
// layout is an array of object with the format:
// {x: Number, y: Number, w: Number, h: Number, i: String}
layout: function (props /*: Props*/) {
var layout = props.layout;
// I hope you"re setting the data-grid property on the grid items
if (layout === undefined) return;
require$$2().validateLayout(layout, "layout");
},
//
// Grid Dimensions
//
// Margin between items [x, y] in px
margin: (_propTypes.default.arrayOf(_propTypes.default.number) /*: ReactPropsChainableTypeChecker*/),
// Padding inside the container [x, y] in px
containerPadding: (_propTypes.default.arrayOf(_propTypes.default.number) /*: ReactPropsChainableTypeChecker*/),
// Rows have a static height, but you can change this based on breakpoints if you like
rowHeight: _propTypes.default.number,
// Default Infinity, but you can specify a max here if you like.
// Note that this isn"t fully fleshed out and won"t error if you specify a layout that
// extends beyond the row capacity. It will, however, not allow users to drag/resize
// an item past the barrier. They can push items beyond the barrier, though.
// Intentionally not documented for this reason.
maxRows: _propTypes.default.number,
//
// Flags
//
isBounded: _propTypes.default.bool,
isDraggable: _propTypes.default.bool,
isResizable: _propTypes.default.bool,
// If true, grid can be placed one over the other.
allowOverlap: _propTypes.default.bool,
// If true, grid items won"t change position when being dragged over.
preventCollision: _propTypes.default.bool,
// Use CSS transforms instead of top/left
useCSSTransforms: _propTypes.default.bool,
// parent layout transform scale
transformScale: _propTypes.default.number,
// If true, an external element can trigger onDrop callback with a specific grid position as a parameter
isDroppable: _propTypes.default.bool,
// Resize handle options
resizeHandles: resizeHandleAxesType,
resizeHandle: resizeHandleType,
//
// Callbacks
//
// Callback so you can save the layout. Calls after each drag & resize stops.
onLayoutChange: _propTypes.default.func,
// Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e, ?node).
// All callbacks below have the same signature. "start" and "stop" callbacks omit the "placeholder".
onDragStart: _propTypes.default.func,
// Calls on each drag movement.
onDrag: _propTypes.default.func,
// Calls when drag is complete.
onDragStop: _propTypes.default.func,
//Calls when resize starts.
onResizeStart: _propTypes.default.func,
// Calls when resize movement happens.
onResize: _propTypes.default.func,
// Calls when resize is complete.
onResizeStop: _propTypes.default.func,
// Calls when some element is dropped.
onDrop: _propTypes.default.func,
//
// Other validations
//
droppingItem: (_propTypes.default.shape({
i: _propTypes.default.string.isRequired,
w: _propTypes.default.number.isRequired,
h: _propTypes.default.number.isRequired
}) /*: ReactPropsChainableTypeChecker*/),
// Children must not have duplicate keys.
children: function (props /*: Props*/, propName /*: string*/) {
const children = props[propName];
// Check children keys for duplicates. Throw if found.
const keys = {};
_react.default.Children.forEach(children, function (child) {
if ((child === null || child === void 0 ? void 0 : child.key) == null) return;
if (keys[child.key]) {
throw new Error("Duplicate child key "" + child.key + "" found! This will cause problems in ReactGridLayout.");
}
keys[child.key] = true;
});
},
// Optional ref for getting a reference for the wrapping div.
innerRef: _propTypes.default.any
};
exports$7.default = _default;
}
var TROMPLE_HAS_RAN$6 = false;
function require$$7 () {
if (!TROMPLE_HAS_RAN$6) {
TROMPLE_HAS_RAN$6 = true;
TROMPLE_MAIN$6();
}
return module$7.exports;
}
var exports$6 = {};
var module$6 = { exports: exports$6 };
function TROMPLE_MAIN$5() {
Object.defineProperty(exports$6, "__esModule", {
value: true
});
exports$6.default = void 0;
var _react = _interopRequireDefault(require$$1$2());
var _propTypes = _interopRequireDefault(require$$2$1());
var _reactDraggable = require$$3$2();
var _reactResizable = require$$4$1();
var _utils = require$$2();
var _calculateUtils = require$$3();
var _ReactGridLayoutPropTypes = require$$7();
var _clsx = _interopRequireDefault(require$$8());
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
/*:: import type { Element as ReactElement, Node as ReactNode } from "react";*/
/*:: import type {
ReactDraggableCallbackData,
GridDragEvent,
GridResizeEvent,
DroppingPosition,
Position,
ResizeHandleAxis
} from "./utils";*/
/*:: import type { PositionParams } from "./calculateUtils";*/
/*:: import type { ResizeHandle, ReactRef } from "./ReactGridLayoutPropTypes";*/
/*:: type PartialPosition = { top: number, left: number };*/
/*:: type GridItemCallback = (
i: string,
w: number,
h: number,
Data
) => void;*/
/*:: type ResizeCallbackData = {
node: HTMLElement,
size: Position,
handle: ResizeHandleAxis
};*/
/*:: type GridItemResizeCallback = (
e: Event,
data: ResizeCallbackData,
position: Position
) => void;*/
/*:: type State = {
resizing: ?{ top: number, left: number, width: number, height: number },
dragging: ?{ top: number, left: number },
className: string
};*/
/*:: type Props = {
children: ReactElement,
cols: number,
containerWidth: number,
margin: [number, number],
containerPadding: [number, number],
rowHeight: number,
maxRows: number,
isDraggable: boolean,
isResizable: boolean,
isBounded: boolean,
static?: boolean,
useCSSTransforms?: boolean,
usePercentages?: boolean,
transformScale: number,
droppingPosition?: DroppingPosition,
className: string,
style?: Object,
// Draggability
cancel: string,
handle: string,
x: number,
y: number,
w: number,
h: number,
minW: number,
maxW: number,
minH: number,
maxH: number,
i: string,
resizeHandles?: ResizeHandleAxis[],
resizeHandle?: ResizeHandle,
onDrag?: GridItemCallback,
onDragStart?: GridItemCallback,
onDragStop?: GridItemCallback,
onResize?: GridItemCallback,
onResizeStart?: GridItemCallback,
onResizeStop?: GridItemCallback
};*/
/*:: type DefaultProps = {
className: string,
cancel: string,
handle: string,
minH: number,
minW: number,
maxH: number,
maxW: number,
transformScale: number
};*/
/**
* An individual item within a ReactGridLayout.
*/
class GridItem extends _react.default.Component /*:: */{
constructor() {
super(...arguments);
_defineProperty(this, "state", {
resizing: null,
dragging: null,
className: ""
});
_defineProperty(this, "elementRef", /*#__PURE__*/_react.default.createRef());
/**
* onDragStart event handler
* @param {Event} e event data
* @param {Object} callbackData an object with node, delta and position information
*/
_defineProperty(this, "onDragStart", (e, _ref) => {
let {
node
} = _ref;
const {
onDragStart,
transformScale
} = this.props;
if (!onDragStart) return;
const newPosition /*: PartialPosition*/ = {
top: 0,
left: 0
};
// TODO: this wont work on nested parents
const {
offsetParent
} = node;
if (!offsetParent) return;
const parentRect = offsetParent.getBoundingClientRect();
const clientRect = node.getBoundingClientRect();
const cLeft = clientRect.left / transformScale;
const pLeft = parentRect.left / transformScale;
const cTop = clientRect.top / transformScale;
const pTop = parentRect.top / transformScale;
newPosition.left = cLeft - pLeft + offsetParent.scrollLeft;
newPosition.top = cTop - pTop + offsetParent.scrollTop;
this.setState({
dragging: newPosition
});
// Call callback with this data
const {
x,
y
} = (0, _calculateUtils.calcXY)(this.getPositionParams(), newPosition.top, newPosition.left, this.props.w, this.props.h);
return onDragStart.call(this, this.props.i, x, y, {
e,
node,
newPosition
});
});
/**
* onDrag event handler
* @param {Event} e event data
* @param {Object} callbackData an object with node, delta and position information
*/
_defineProperty(this, "onDrag", (e, _ref2) => {
let {
node,
deltaX,
deltaY
} = _ref2;
const {
onDrag
} = this.props;
if (!onDrag) return;
if (!this.state.dragging) {
throw new Error("onDrag called before onDragStart.");
}
let top = this.state.dragging.top + deltaY;
let left = this.state.dragging.left + deltaX;
const {
isBounded,
i,
w,
h,
containerWidth
} = this.props;
const positionParams = this.getPositionParams();
// Boundary calculations; keeps items within the grid
if (isBounded) {
const {
offsetParent
} = node;
if (offsetParent) {
const {
margin,
rowHeight
} = this.props;
const bottomBoundary = offsetParent.clientHeight - (0, _calculateUtils.calcGridItemWHPx)(h, rowHeight, margin[1]);
top = (0, _calculateUtils.clamp)(top, 0, bottomBoundary);
const colWidth = (0, _calculateUtils.calcGridColWidth)(positionParams);
const rightBoundary = containerWidth - (0, _calculateUtils.calcGridItemWHPx)(w, colWidth, margin[0]);
left = (0, _calculateUtils.clamp)(left, 0, rightBoundary);
}
}
const newPosition /*: PartialPosition*/ = {
top,
left
};
this.setState({
dragging: newPosition
});
// Call callback with this data
const {
x,
y
} = (0, _calculateUtils.calcXY)(positionParams, top, left, w, h);
return onDrag.call(this, i, x, y, {
e,
node,
newPosition
});
});
/**
* onDragStop event handler
* @param {Event} e event data
* @param {Object} callbackData an object with node, delta and position information
*/
_defineProperty(this, "onDragStop", (e, _ref3) => {
let {
node
} = _ref3;
const {
onDragStop
} = this.props;
if (!onDragStop) return;
if (!this.state.dragging) {
throw new Error("onDragEnd called before onDragStart.");
}
const {
w,
h,
i
} = this.props;
const {
left,
top
} = this.state.dragging;
const newPosition /*: PartialPosition*/ = {
top,
left
};
this.setState({
dragging: null
});
const {
x,
y
} = (0, _calculateUtils.calcXY)(this.getPositionParams(), top, left, w, h);
return onDragStop.call(this, i, x, y, {
e,
node,
newPosition
});
});
/**
* onResizeStop event handler
* @param {Event} e event data
* @param {Object} callbackData an object with node and size information
*/
_defineProperty(this, "onResizeStop", (e, callbackData, position) => this.onResizeHandler(e, callbackData, position, "onResizeStop"));
// onResizeStart event handler
_defineProperty(this, "onResizeStart", (e, callbackData, position) => this.onResizeHandler(e, callbackData, position, "onResizeStart"));
// onResize event handler
_defineProperty(this, "onResize", (e, callbackData, position) => this.onResizeHandler(e, callbackData, position, "onResize"));
}
shouldComponentUpdate(nextProps /*: Props*/, nextState /*: State*/) /*: boolean*/{
// We can"t deeply compare children. If the developer memoizes them, we can
// use this optimization.
if (this.props.children !== nextProps.children) return true;
if (this.props.droppingPosition !== nextProps.droppingPosition) return true;
// TODO memoize these calculations so they don"t take so long?
const oldPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(this.props), this.props.x, this.props.y, this.props.w, this.props.h, this.state);
const newPosition = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(nextProps), nextProps.x, nextProps.y, nextProps.w, nextProps.h, nextState);
return !(0, _utils.fastPositionEqual)(oldPosition, newPosition) || this.props.useCSSTransforms !== nextProps.useCSSTransforms;
}
componentDidMount() {
this.moveDroppingItem({});
}
componentDidUpdate(prevProps /*: Props*/) {
this.moveDroppingItem(prevProps);
}
// When a droppingPosition is present, this means we should fire a move event, as if we had moved
// this element by `x, y` pixels.
moveDroppingItem(prevProps /*: Props*/) {
const {
droppingPosition
} = this.props;
if (!droppingPosition) return;
const node = this.elementRef.current;
// Can"t find DOM node (are we unmounted?)
if (!node) return;
const prevDroppingPosition = prevProps.droppingPosition || {
left: 0,
top: 0
};
const {
dragging
} = this.state;
const shouldDrag = dragging && droppingPosition.left !== prevDroppingPosition.left || droppingPosition.top !== prevDroppingPosition.top;
if (!dragging) {
this.onDragStart(droppingPosition.e, {
node,
deltaX: droppingPosition.left,
deltaY: droppingPosition.top
});
} else if (shouldDrag) {
const deltaX = droppingPosition.left - dragging.left;
const deltaY = droppingPosition.top - dragging.top;
this.onDrag(droppingPosition.e, {
node,
deltaX,
deltaY
});
}
}
getPositionParams() /*: PositionParams*/{
let props /*: Props*/ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props;
return {
cols: props.cols,
containerPadding: props.containerPadding,
containerWidth: props.containerWidth,
margin: props.margin,
maxRows: props.maxRows,
rowHeight: props.rowHeight
};
}
/**
* This is where we set the grid item"s absolute placement. It gets a little tricky because we want to do it
* well when server rendering, and the only way to do that properly is to use percentage width/left because
* we don"t know exactly what the browser viewport is.
* Unfortunately, CSS Transforms, which are great for performance, break in this instance because a percentage
* left is relative to the item itself, not its container! So we cannot use them on the server rendering pass.
*
* @param {Object} pos Position object with width, height, left, top.
* @return {Object} Style object.
*/
createStyle(pos /*: Position*/) /*: { [key: string]: ?string }*/{
const {
usePercentages,
containerWidth,
useCSSTransforms
} = this.props;
let style;
// CSS Transforms support (default)
if (useCSSTransforms) {
style = (0, _utils.setTransform)(pos);
} else {
// top,left (slow)
style = (0, _utils.setTopLeft)(pos);
// This is used for server rendering.
if (usePercentages) {
style.left = (0, _utils.perc)(pos.left / containerWidth);
style.width = (0, _utils.perc)(pos.width / containerWidth);
}
}
return style;
}
/**
* Mix a Draggable instance into a child.
* @param {Element} child Child element.
* @return {Element} Child wrapped in Draggable.
*/
mixinDraggable(child /*: ReactElement*/, isDraggable /*: boolean*/) /*: ReactElement*/{
return /*#__PURE__*/_react.default.createElement(_reactDraggable.DraggableCore, {
disabled: !isDraggable,
onStart: this.onDragStart,
onDrag: this.onDrag,
onStop: this.onDragStop,
handle: this.props.handle,
cancel: ".react-resizable-handle" + (this.props.cancel ? "," + this.props.cancel : ""),
scale: this.props.transformScale,
nodeRef: this.elementRef
}, child);
}
/**
* Utility function to setup callback handler definitions for
* similarily structured resize events.
*/
curryResizeHandler(position /*: Position*/, handler /*: Function*/) /*: Function*/{
return (e /*: Event*/, data /*: ResizeCallbackData*/) => /*: Function*/handler(e, data, position);
}
/**
* Mix a Resizable instance into a child.
* @param {Element} child Child element.
* @param {Object} position Position object (pixel values)
* @return {Element} Child wrapped in Resizable.
*/
mixinResizable(child /*: ReactElement*/, position /*: Position*/, isResizable /*: boolean*/) /*: ReactElement*/{
const {
cols,
minW,
minH,
maxW,
maxH,
transformScale,
resizeHandles,
resizeHandle
} = this.props;
const positionParams = this.getPositionParams();
// This is the max possible width - doesn"t go to infinity because of the width of the window
const maxWidth = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, cols, 0).width;
// Calculate min/max constraints using our min & maxes
const mins = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, minW, minH);
const maxes = (0, _calculateUtils.calcGridItemPosition)(positionParams, 0, 0, maxW, maxH);
const minConstraints = [mins.width, mins.height];
const maxConstraints = [Math.min(maxes.width, maxWidth), Math.min(maxes.height, Infinity)];
return /*#__PURE__*/_react.default.createElement(_reactResizable.Resizable
// These are opts for the resize handle itself
, {
draggableOpts: {
disabled: !isResizable
},
className: isResizable ? undefined : "react-resizable-hide",
width: position.width,
height: position.height,
minConstraints: minConstraints,
maxConstraints: maxConstraints,
onResizeStop: this.curryResizeHandler(position, this.onResizeStop),
onResizeStart: this.curryResizeHandler(position, this.onResizeStart),
onResize: this.curryResizeHandler(position, this.onResize),
transformScale: transformScale,
resizeHandles: resizeHandles,
handle: resizeHandle
}, child);
}
/**
* Wrapper around resize events to provide more useful data.
*/
onResizeHandler(e /*: Event*/, _ref4 /*:: */,
// "size" is updated position
position /*: Position*/,
// existing position
handlerName /*: string*/) /*: void*/{
let {
node,
size,
handle
} /*: ResizeCallbackData*/ = _ref4 /*: ResizeCallbackData*/;
const handler = this.props[handlerName];
if (!handler) return;
const {
x,
y,
i,
maxH,
minH,
containerWidth
} = this.props;
const {
minW,
maxW
} = this.props;
// 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(), updatedSize.width, updatedSize.height, x, y, handle);
// Min/max capping.
// minW should be at least 1 (TODO propTypes validation?)
w = (0, _calculateUtils.clamp)(w, Math.max(minW, 1), maxW);
h = (0, _calculateUtils.clamp)(h, minH, maxH);
handler.call(this, i, w, h, {
e,
node,
size: updatedSize,
handle
});
}
render() /*: ReactNode*/{
const {
x,
y,
w,
h,
isDraggable,
isResizable,
droppingPosition,
useCSSTransforms
} = this.props;
const pos = (0, _calculateUtils.calcGridItemPosition)(this.getPositionParams(), x, y, w, h, this.state);
const child = _react.default.Children.only(this.props.children);
// Create the child element. We clone the existing element but modify its className and style.
let newChild = /*#__PURE__*/_react.default.cloneElement(child, {
ref: this.elementRef,
className: (0, _clsx.default)("react-grid-item", child.props.className, this.props.className, {
static: this.props.static,
resizing: Boolean(this.state.resizing),
"react-draggable": isDraggable,
"react-draggable-dragging": Boolean(this.state.dragging),
dropping: Boolean(droppingPosition),
cssTransforms: useCSSTransforms
}),
// We can set the width and height on the child, but unfortunately we can"t set the position.
style: {
...this.props.style,
...child.props.style,
...this.createStyle(pos)
}
});
// Resizable support. This is usually on but the user can toggle it off.
newChild = this.mixinResizable(newChild, pos, isResizable);
// Draggable support. This is always on, except for with placeholders.
newChild = this.mixinDraggable(newChild, isDraggable);
return newChild;
}
}
exports$6.default = GridItem;
_defineProperty(GridItem, "propTypes", {
// Children must be only a single element
children: _propTypes.default.element,
// General grid attributes
cols: _propTypes.default.number.isRequired,
containerWidth: _propTypes.default.number.isRequired,
rowHeight: _propTypes.default.number.isRequired,
margin: _propTypes.default.array.isRequired,
maxRows: _propTypes.default.number.isRequired,
containerPadding: _propTypes.default.array.isRequired,
// These are all in grid units
x: _propTypes.default.number.isRequired,
y: _propTypes.default.number.isRequired,
w: _propTypes.default.number.isRequired,
h: _propTypes.default.number.isRequired,
// All optional
minW: function (props /*: Props*/, propName /*: string*/) {
const value = props[propName];
if (typeof value !== "number") return new Error("minWidth not Number");
if (value > props.w || value > props.maxW) return new Error("minWidth larger than item width/maxWidth");
},
maxW: function (props /*: Props*/, propName /*: string*/) {
const value = props[propName];
if (typeof value !== "number") return new Error("maxWidth not Number");
if (value < props.w || value < props.minW) return new Error("maxWidth smaller than item width/minWidth");
},
minH: function (props /*: Props*/, propName /*: string*/) {
const value = props[propName];
if (typeof value !== "number") return new Error("minHeight not Number");
if (value > props.h || value > props.maxH) return new Error("minHeight larger than item height/maxHeight");
},
maxH: function (props /*: Props*/, propName /*: string*/) {
const value = props[propName];
if (typeof value !== "number") return new Error("maxHeight not Number");
if (value < props.h || value < props.minH) return new Error("maxHeight smaller than item height/minHeight");
},
// ID is nice to have for callbacks
i: _propTypes.default.string.isRequired,
// Resize handle options
resizeHandles: _ReactGridLayoutPropTypes.resizeHandleAxesType,
resizeHandle: _ReactGridLayoutPropTypes.resizeHandleType,
// Functions
onDragStop: _propTypes.default.func,
onDragStart: _propTypes.default.func,
onDrag: _propTypes.default.func,
onResizeStop: _propTypes.default.func,
onResizeStart: _propTypes.default.func,
onResize: _propTypes.default.func,
// Flags
isDraggable: _propTypes.default.bool.isRequired,
isResizable: _propTypes.default.bool.isRequired,
isBounded: _propTypes.default.bool.isRequired,
static: _propTypes.default.bool,
// Use CSS transforms instead of top/left
useCSSTransforms: _propTypes.default.bool.isRequired,
transformScale: _propTypes.default.number,
// Others
className: _propTypes.default.string,
// Selector for draggable handle
handle: _propTypes.default.string,
// Selector for draggable cancel (see react-draggable)
cancel: _propTypes.default.string,
// Current position of a dropping element
droppingPosition: _propTypes.default.shape({
e: _propTypes.default.object.isRequired,
left: _propTypes.default.number.isRequired,
top: _propTypes.default.number.isRequired
})
});
_defineProperty(GridItem, "defaultProps", {
className: "",
cancel: "",
handle: "",
minH: 1,
minW: 1,
maxH: Infinity,
maxW: Infinity,
transformScale: 1
});
}
var TROMPLE_HAS_RAN$5 = false;
function require$$6$1 () {
if (!TROMPLE_HAS_RAN$5) {
TROMPLE_HAS_RAN$5 = true;
TROMPLE_MAIN$5();
}
return module$6.exports;
}
var exports$5 = {};
var module$5 = { exports: exports$5 };
function TROMPLE_MAIN$4() {
Object.defineProperty(exports$5, "__esModule", {
value: true
});
exports$5.default = void 0;
var React = _interopRequireWildcard(require$$1$2());
var _fastEquals = require$$1$1();
var _clsx = _interopRequireDefault(require$$8());
var _utils = require$$2();
var _calculateUtils = require$$3();
var _GridItem = _interopRequireDefault(require$$6$1());
var _ReactGridLayoutPropTypes = _interopRequireDefault(require$$7());
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
/*:: import type {
ChildrenArray as ReactChildrenArray,
Element as ReactElement
} from "react";*/
/*:: import type {
CompactType,
GridResizeEvent,
GridDragEvent,
DragOverEvent,
Layout,
DroppingPosition,
LayoutItem
} from "./utils";*/
// Types
/*:: import type { PositionParams } from "./calculateUtils";*/
/*:: type State = {
activeDrag: ?LayoutItem,
layout: Layout,
mounted: boolean,
oldDragItem: ?LayoutItem,
oldLayout: ?Layout,
oldResizeItem: ?LayoutItem,
resizing: boolean,
droppingDOMNode: ?ReactElement,
droppingPosition?: DroppingPosition,
// Mirrored props
children: ReactChildrenArray>,
compactType?: CompactType,
propsLayout?: Layout
};*/
/*:: import type { Props, DefaultProps } from "./ReactGridLayoutPropTypes";*/
// End Types
const layoutClassName = "react-grid-layout";
let isFirefox = false;
// Try...catch will protect from navigator not existing (e.g. node) or a bad implementation of navigator
try {
isFirefox = /firefox/i.test(navigator.userAgent);
} catch (e) {
/* Ignore */
}
/**
* A reactive, fluid grid layout with draggable, resizable components.
*/
class ReactGridLayout extends React.Component /*:: */{
constructor() {
super(...arguments);
_defineProperty(this, "state", {
activeDrag: null,
layout: (0, _utils.synchronizeLayoutWithChildren)(this.props.layout, this.props.children, this.props.cols,
// Legacy support for verticalCompact: false
(0, _utils.compactType)(this.props), this.props.allowOverlap),
mounted: false,
oldDragItem: null,
oldLayout: null,
oldResizeItem: null,
resizing: false,
droppingDOMNode: null,
children: []
});
_defineProperty(this, "dragEnterCounter", 0);
/**
* When dragging starts
* @param {String} i Id of the child
* @param {Number} x X position of the move
* @param {Number} y Y position of the move
* @param {Event} e The mousedown event
* @param {Element} node The current dragging DOM element
*/
_defineProperty(this, "onDragStart", (i /*: string*/, x /*: number*/, y /*: number*/, _ref /*:: */) => {
let {
e,
node
} /*: GridDragEvent*/ = _ref /*: GridDragEvent*/;
const {
layout
} = this.state;
const l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return;
this.setState({
oldDragItem: (0, _utils.cloneLayoutItem)(l),
oldLayout: layout
});
return this.props.onDragStart(layout, l, l, null, e, node);
});
/**
* Each drag movement create a new dragelement and move the element to the dragged location
* @param {String} i Id of the child
* @param {Number} x X position of the move
* @param {Number} y Y position of the move
* @param {Event} e The mousedown event
* @param {Element} node The current dragging DOM element
*/
_defineProperty(this, "onDrag", (i, x, y, _ref2) => {
let {
e,
node
} = _ref2;
const {
oldDragItem
} = this.state;
let {
layout
} = this.state;
const {
cols,
allowOverlap,
preventCollision
} = this.props;
const l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return;
// Create placeholder (display only)
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
placeholder: true,
i: i
};
// Move the element to the dragged location.
const isUserAction = true;
layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, _utils.compactType)(this.props), cols, allowOverlap);
this.props.onDrag(layout, oldDragItem, l, placeholder, e, node);
this.setState({
layout: allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols),
activeDrag: placeholder
});
});
/**
* When dragging stops, figure out which position the element is closest to and update its x and y.
* @param {String} i Index of the child.
* @param {Number} x X position of the move
* @param {Number} y Y position of the move
* @param {Event} e The mousedown event
* @param {Element} node The current dragging DOM element
*/
_defineProperty(this, "onDragStop", (i, x, y, _ref3) => {
let {
e,
node
} = _ref3;
if (!this.state.activeDrag) return;
const {
oldDragItem
} = this.state;
let {
layout
} = this.state;
const {
cols,
preventCollision,
allowOverlap
} = this.props;
const l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return;
// Move the element here
const isUserAction = true;
layout = (0, _utils.moveElement)(layout, l, x, y, isUserAction, preventCollision, (0, _utils.compactType)(this.props), cols, allowOverlap);
// Set state
const newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
this.props.onDragStop(newLayout, oldDragItem, l, null, e, node);
const {
oldLayout
} = this.state;
this.setState({
activeDrag: null,
layout: newLayout,
oldDragItem: null,
oldLayout: null
});
this.onLayoutMaybeChanged(newLayout, oldLayout);
});
_defineProperty(this, "onResizeStart", (i, w, h, _ref4) => {
let {
e,
node
} = _ref4;
const {
layout
} = this.state;
const l = (0, _utils.getLayoutItem)(layout, i);
if (!l) return;
this.setState({
oldResizeItem: (0, _utils.cloneLayoutItem)(l),
oldLayout: this.state.layout,
resizing: true
});
this.props.onResizeStart(layout, l, l, null, e, node);
});
_defineProperty(this, "onResize", (i, w, h, _ref5) => {
let {
e,
node,
size,
handle
} = _ref5;
const {
oldResizeItem
} = this.state;
let {
layout
} = this.state;
const {
cols,
preventCollision,
allowOverlap
} = this.props;
let shouldMoveItem = false;
let finalLayout;
let x;
let y;
const [newLayout, l] = (0, _utils.withLayoutItem)(layout, i, l => {
let hasCollisions;
x = l.x;
y = l.y;
if (["sw", "w", "nw", "n", "ne"].indexOf(handle) !== -1) {
if (["sw", "nw", "w"].indexOf(handle) !== -1) {
x = l.x + (l.w - w);
w = l.x !== x && x < 0 ? l.w : w;
x = x < 0 ? 0 : x;
}
if (["ne", "n", "nw"].indexOf(handle) !== -1) {
y = l.y + (l.h - h);
h = l.y !== y && y < 0 ? l.h : h;
y = y < 0 ? 0 : y;
}
shouldMoveItem = true;
}
// Something like quad tree should be used
// to find collisions faster
if (preventCollision && !allowOverlap) {
const collisions = (0, _utils.getAllCollisions)(layout, {
...l,
w,
h,
x,
y
}).filter(layoutItem => layoutItem.i !== l.i);
hasCollisions = collisions.length > 0;
// If we"re colliding, we need adjust the placeholder.
if (hasCollisions) {
// Reset layoutItem dimensions if there were collisions
y = l.y;
h = l.h;
x = l.x;
w = l.w;
shouldMoveItem = false;
}
}
l.w = w;
l.h = h;
return l;
});
// Shouldn"t ever happen, but typechecking makes it necessary
if (!l) return;
finalLayout = newLayout;
if (shouldMoveItem) {
// Move the element to the new position.
const isUserAction = true;
finalLayout = (0, _utils.moveElement)(newLayout, l, x, y, isUserAction, this.props.preventCollision, (0, _utils.compactType)(this.props), cols, allowOverlap);
}
// Create placeholder element (display only)
const placeholder = {
w: l.w,
h: l.h,
x: l.x,
y: l.y,
static: true,
i: i
};
this.props.onResize(finalLayout, oldResizeItem, l, placeholder, e, node);
// Re-compact the newLayout and set the drag placeholder.
this.setState({
layout: allowOverlap ? finalLayout : (0, _utils.compact)(finalLayout, (0, _utils.compactType)(this.props), cols),
activeDrag: placeholder
});
});
_defineProperty(this, "onResizeStop", (i, w, h, _ref6) => {
let {
e,
node
} = _ref6;
const {
layout,
oldResizeItem
} = this.state;
const {
cols,
allowOverlap
} = this.props;
const l = (0, _utils.getLayoutItem)(layout, i);
// Set state
const newLayout = allowOverlap ? layout : (0, _utils.compact)(layout, (0, _utils.compactType)(this.props), cols);
this.props.onResizeStop(newLayout, oldResizeItem, l, null, e, node);
const {
oldLayout
} = this.state;
this.setState({
activeDrag: null,
layout: newLayout,
oldResizeItem: null,
oldLayout: null,
resizing: false
});
this.onLayoutMaybeChanged(newLayout, oldLayout);
});
// Called while dragging an element. Part of browser native drag/drop API.
// Native event target might be the layout itself, or an element within the layout.
_defineProperty(this, "onDragOver", e => {
var _e$nativeEvent$target;
e.preventDefault(); // Prevent any browser native action
e.stopPropagation();
// we should ignore events from layout"s children in Firefox
// to avoid unpredictable jumping of a dropping placeholder
// FIXME remove this hack
if (isFirefox &&
// $FlowIgnore can"t figure this out
!((_e$nativeEvent$target = e.nativeEvent.target) !== null && _e$nativeEvent$target !== void 0 && _e$nativeEvent$target.classList.contains(layoutClassName))) {
return false;
}
const {
droppingItem,
onDropDragOver,
margin,
cols,
rowHeight,
maxRows,
width,
containerPadding,
transformScale
} = this.props;
// Allow user to customize the dropping item or short-circuit the drop based on the results
// of the `onDragOver(e: Event)` callback.
const onDragOverResult = onDropDragOver === null || onDropDragOver === void 0 ? void 0 : onDropDragOver(e);
if (onDragOverResult === false) {
if (this.state.droppingDOMNode) {
this.removeDroppingPlaceholder();
}
return false;
}
const finalDroppingItem = {
...droppingItem,
...onDragOverResult
};
const {
layout
} = this.state;
// This is relative to the DOM element that this event fired for.
const {
layerX,
layerY
} = e.nativeEvent;
const droppingPosition = {
left: layerX / transformScale,
top: layerY / transformScale,
e
};
if (!this.state.droppingDOMNode) {
const positionParams /*: PositionParams*/ = {
cols,
margin,
maxRows,
rowHeight,
containerWidth: width,
containerPadding: containerPadding || margin
};
const calculatedPosition = (0, _calculateUtils.calcXY)(positionParams, layerY, layerX, finalDroppingItem.w, finalDroppingItem.h);
this.setState({
droppingDOMNode: /*#__PURE__*/React.createElement("div", {
key: finalDroppingItem.i
}),
droppingPosition,
layout: [...layout, {
...finalDroppingItem,
x: calculatedPosition.x,
y: calculatedPosition.y,
static: false,
isDraggable: true
}]
});
} else if (this.state.droppingPosition) {
const {
left,
top
} = this.state.droppingPosition;
const shouldUpdatePosition = left != layerX || top != layerY;
if (shouldUpdatePosition) {
this.setState({
droppingPosition
});
}
}
});
_defineProperty(this, "removeDroppingPlaceholder", () => {
const {
droppingItem,
cols
} = this.props;
const {
layout
} = this.state;
const newLayout = (0, _utils.compact)(layout.filter(l => l.i !== droppingItem.i), (0, _utils.compactType)(this.props), cols, this.props.allowOverlap);
this.setState({
layout: newLayout,
droppingDOMNode: null,
activeDrag: null,
droppingPosition: undefined
});
});
_defineProperty(this, "onDragLeave", e => {
e.preventDefault(); // Prevent any browser native action
e.stopPropagation();
this.dragEnterCounter--;
// onDragLeave can be triggered on each layout"s child.
// But we know that count of dragEnter and dragLeave events
// will be balanced after leaving the layout"s container
// so we can increase and decrease count of dragEnter and
// when it"ll be equal to 0 we"ll remove the placeholder
if (this.dragEnterCounter === 0) {
this.removeDroppingPlaceholder();
}
});
_defineProperty(this, "onDragEnter", e => {
e.preventDefault(); // Prevent any browser native action
e.stopPropagation();
this.dragEnterCounter++;
});
_defineProperty(this, "onDrop", (e /*: Event*/) => {
e.preventDefault(); // Prevent any browser native action
e.stopPropagation();
const {
droppingItem
} = this.props;
const {
layout
} = this.state;
const item = layout.find(l => l.i === droppingItem.i);
// reset dragEnter counter on drop
this.dragEnterCounter = 0;
this.removeDroppingPlaceholder();
this.props.onDrop(layout, item, e);
});
}
componentDidMount() {
this.setState({
mounted: true
});
// Possibly call back with layout on mount. This should be done after correcting the layout width
// to ensure we don"t rerender with the wrong width.
this.onLayoutMaybeChanged(this.state.layout, this.props.layout);
}
static getDerivedStateFromProps(nextProps /*: Props*/, prevState /*: State*/) /*: $Shape | null*/{
let newLayoutBase;
if (prevState.activeDrag) {
return null;
}
// Legacy support for compactType
// Allow parent to set layout directly.
if (!(0, _fastEquals.deepEqual)(nextProps.layout, prevState.propsLayout) || nextProps.compactType !== prevState.compactType) {
newLayoutBase = nextProps.layout;
} else if (!(0, _utils.childrenEqual)(nextProps.children, prevState.children)) {
// If children change, also regenerate the layout. Use our state
// as the base in case because it may be more up to date than
// what is in props.
newLayoutBase = prevState.layout;
}
// We need to regenerate the layout.
if (newLayoutBase) {
const newLayout = (0, _utils.synchronizeLayoutWithChildren)(newLayoutBase, nextProps.children, nextProps.cols, (0, _utils.compactType)(nextProps), nextProps.allowOverlap);
return {
layout: newLayout,
// We need to save these props to state for using
// getDerivedStateFromProps instead of componentDidMount (in which we would get extra rerender)
compactType: nextProps.compactType,
children: nextProps.children,
propsLayout: nextProps.layout
};
}
return null;
}
shouldComponentUpdate(nextProps /*: Props*/, nextState /*: State*/) /*: boolean*/{
return (
// NOTE: this is almost always unequal. Therefore the only way to get better performance
// from SCU is if the user intentionally memoizes children. If they do, and they can
// handle changes properly, performance will increase.
this.props.children !== nextProps.children || !(0, _utils.fastRGLPropsEqual)(this.props, nextProps, _fastEquals.deepEqual) || this.state.activeDrag !== nextState.activeDrag || this.state.mounted !== nextState.mounted || this.state.droppingPosition !== nextState.droppingPosition
);
}
componentDidUpdate(prevProps /*: Props*/, prevState /*: State*/) {
if (!this.state.activeDrag) {
const newLayout = this.state.layout;
const oldLayout = prevState.layout;
this.onLayoutMaybeChanged(newLayout, oldLayout);
}
}
/**
* Calculates a pixel value for the container.
* @return {String} Container height in pixels.
*/
containerHeight() /*: ?string*/{
if (!this.props.autoSize) return;
const nbRow = (0, _utils.bottom)(this.state.layout);
const containerPaddingY = this.props.containerPadding ? this.props.containerPadding[1] : this.props.margin[1];
return nbRow * this.props.rowHeight + (nbRow - 1) * this.props.margin[1] + containerPaddingY * 2 + "px";
}
onLayoutMaybeChanged(newLayout /*: Layout*/, oldLayout /*: ?Layout*/) {
if (!oldLayout) oldLayout = this.state.layout;
if (!(0, _fastEquals.deepEqual)(oldLayout, newLayout)) {
this.props.onLayoutChange(newLayout);
}
}
/**
* Create a placeholder object.
* @return {Element} Placeholder div.
*/
placeholder() /*: ?ReactElement*/{
const {
activeDrag
} = this.state;
if (!activeDrag) return null;
const {
width,
cols,
margin,
containerPadding,
rowHeight,
maxRows,
useCSSTransforms,
transformScale
} = this.props;
// {...this.state.activeDrag} is pretty slow, actually
return /*#__PURE__*/React.createElement(_GridItem.default, {
w: activeDrag.w,
h: activeDrag.h,
x: activeDrag.x,
y: activeDrag.y,
i: activeDrag.i,
className: "react-grid-placeholder ".concat(this.state.resizing ? "placeholder-resizing" : ""),
containerWidth: width,
cols: cols,
margin: margin,
containerPadding: containerPadding || margin,
maxRows: maxRows,
rowHeight: rowHeight,
isDraggable: false,
isResizable: false,
isBounded: false,
useCSSTransforms: useCSSTransforms,
transformScale: transformScale
}, /*#__PURE__*/React.createElement("div", null));
}
/**
* Given a grid item, set its style attributes & surround in a .
* @param {Element} child React element.
* @return {Element} Element wrapped in draggable and properly placed.
*/
processGridItem(child /*: ReactElement*/, isDroppingItem /*: boolean*/) /*: ?ReactElement*/{
if (!child || !child.key) return;
const l = (0, _utils.getLayoutItem)(this.state.layout, String(child.key));
if (!l) return null;
const {
width,
cols,
margin,
containerPadding,
rowHeight,
maxRows,
isDraggable,
isResizable,
isBounded,
useCSSTransforms,
transformScale,
draggableCancel,
draggableHandle,
resizeHandles,
resizeHandle
} = this.props;
const {
mounted,
droppingPosition
} = this.state;
// Determine user manipulations possible.
// If an item is static, it can"t be manipulated by default.
// Any properties defined directly on the grid item will take precedence.
const draggable = typeof l.isDraggable === "boolean" ? l.isDraggable : !l.static && isDraggable;
const resizable = typeof l.isResizable === "boolean" ? l.isResizable : !l.static && isResizable;
const resizeHandlesOptions = l.resizeHandles || resizeHandles;
// isBounded set on child if set on parent, and child is not explicitly false
const bounded = draggable && isBounded && l.isBounded !== false;
return /*#__PURE__*/React.createElement(_GridItem.default, {
containerWidth: width,
cols: cols,
margin: margin,
containerPadding: containerPadding || margin,
maxRows: maxRows,
rowHeight: rowHeight,
cancel: draggableCancel,
handle: draggableHandle,
onDragStop: this.onDragStop,
onDragStart: this.onDragStart,
onDrag: this.onDrag,
onResizeStart: this.onResizeStart,
onResize: this.onResize,
onResizeStop: this.onResizeStop,
isDraggable: draggable,
isResizable: resizable,
isBounded: bounded,
useCSSTransforms: useCSSTransforms && mounted,
usePercentages: !mounted,
transformScale: transformScale,
w: l.w,
h: l.h,
x: l.x,
y: l.y,
i: l.i,
minH: l.minH,
minW: l.minW,
maxH: l.maxH,
maxW: l.maxW,
static: l.static,
droppingPosition: isDroppingItem ? droppingPosition : undefined,
resizeHandles: resizeHandlesOptions,
resizeHandle: resizeHandle
}, child);
}
render() /*: React.Element<"div">*/{
const {
className,
style,
isDroppable,
innerRef
} = this.props;
const mergedClassName = (0, _clsx.default)(layoutClassName, className);
const mergedStyle = {
height: this.containerHeight(),
...style
};
return /*#__PURE__*/React.createElement("div", {
ref: innerRef,
className: mergedClassName,
style: mergedStyle,
onDrop: isDroppable ? this.onDrop : _utils.noop,
onDragLeave: isDroppable ? this.onDragLeave : _utils.noop,
onDragEnter: isDroppable ? this.onDragEnter : _utils.noop,
onDragOver: isDroppable ? this.onDragOver : _utils.noop
}, React.Children.map(this.props.children, child => this.processGridItem(child)), isDroppable && this.state.droppingDOMNode && this.processGridItem(this.state.droppingDOMNode, true), this.placeholder());
}
}
exports$5.default = ReactGridLayout;
// TODO publish internal ReactClass displayName transform
_defineProperty(ReactGridLayout, "displayName", "ReactGridLayout");
// Refactored to another module to make way for preval
_defineProperty(ReactGridLayout, "propTypes", _ReactGridLayoutPropTypes.default);
_defineProperty(ReactGridLayout, "defaultProps", {
autoSize: true,
cols: 12,
className: "",
style: {},
draggableHandle: "",
draggableCancel: "",
containerPadding: null,
rowHeight: 150,
maxRows: Infinity,
// infinite vertical growth
layout: [],
margin: [10, 10],
isBounded: false,
isDraggable: true,
isResizable: true,
allowOverlap: false,
isDroppable: false,
useCSSTransforms: true,
transformScale: 1,
verticalCompact: true,
compactType: "vertical",
preventCollision: false,
droppingItem: {
i: "__dropping-elem__",
h: 1,
w: 1
},
resizeHandles: ["se"],
onLayoutChange: _utils.noop,
onDragStart: _utils.noop,
onDrag: _utils.noop,
onDragStop: _utils.noop,
onResizeStart: _utils.noop,
onResize: _utils.noop,
onResizeStop: _utils.noop,
onDrop: _utils.noop,
onDropDragOver: _utils.noop
});
}
var TROMPLE_HAS_RAN$4 = false;
function require$$1 () {
if (!TROMPLE_HAS_RAN$4) {
TROMPLE_HAS_RAN$4 = true;
TROMPLE_MAIN$4();
}
return module$5.exports;
}
var exports$4 = {};
var module$4 = { exports: exports$4 };
function TROMPLE_MAIN$3() {
Object.defineProperty(exports$4, "__esModule", {
value: true
});
exports$4.findOrGenerateResponsiveLayout = findOrGenerateResponsiveLayout;
exports$4.getBreakpointFromWidth = getBreakpointFromWidth;
exports$4.getColsFromBreakpoint = getColsFromBreakpoint;
exports$4.sortBreakpoints = sortBreakpoints;
var _utils = require$$2();
/*:: import type { CompactType, Layout } from "./utils";*/
/*:: export type Breakpoint = string;*/
/*:: export type DefaultBreakpoints = "lg" | "md" | "sm" | "xs" | "xxs";*/
/*:: export type ResponsiveLayout = {
+[breakpoint: T]: Layout
};*/
// + indicates read-only
/*:: export type Breakpoints = {
+[breakpoint: T]: number
};*/
/*:: export type OnLayoutChangeCallback = (
Layout,
{ [key: Breakpoint]: Layout }
) => void;*/
/**
* Given a width, find the highest breakpoint that matches is valid for it (width > breakpoint).
*
* @param {Object} breakpoints Breakpoints object (e.g. {lg: 1200, md: 960, ...})
* @param {Number} width Screen width.
* @return {String} Highest breakpoint that is less than width.
*/
function getBreakpointFromWidth(breakpoints /*: Breakpoints*/, width /*: number*/) /*: Breakpoint*/{
const sorted = sortBreakpoints(breakpoints);
let matching = sorted[0];
for (let i = 1, len = sorted.length; i < len; i++) {
const breakpointName = sorted[i];
if (width > breakpoints[breakpointName]) matching = breakpointName;
}
return matching;
}
/**
* Given a breakpoint, get the # of cols set for it.
* @param {String} breakpoint Breakpoint name.
* @param {Object} cols Map of breakpoints to cols.
* @return {Number} Number of cols.
*/
function getColsFromBreakpoint(breakpoint /*: Breakpoint*/, cols /*: Breakpoints*/) /*: number*/{
if (!cols[breakpoint]) {
throw new Error("ResponsiveReactGridLayout: `cols` entry for breakpoint " + breakpoint + " is missing!");
}
return cols[breakpoint];
}
/**
* Given existing layouts and a new breakpoint, find or generate a new layout.
*
* This finds the layout above the new one and generates from it, if it exists.
*
* @param {Object} layouts Existing layouts.
* @param {Array} breakpoints All breakpoints.
* @param {String} breakpoint New breakpoint.
* @param {String} breakpoint Last breakpoint (for fallback).
* @param {Number} cols Column count at new breakpoint.
* @param {Boolean} verticalCompact Whether or not to compact the layout
* vertically.
* @return {Array} New layout.
*/
function findOrGenerateResponsiveLayout(layouts /*: ResponsiveLayout*/, breakpoints /*: Breakpoints*/, breakpoint /*: Breakpoint*/, lastBreakpoint /*: Breakpoint*/, cols /*: number*/, compactType /*: CompactType*/) /*: Layout*/{
// If it already exists, just return it.
if (layouts[breakpoint]) return (0, _utils.cloneLayout)(layouts[breakpoint]);
// Find or generate the next layout
let layout = layouts[lastBreakpoint];
const breakpointsSorted = sortBreakpoints(breakpoints);
const breakpointsAbove = breakpointsSorted.slice(breakpointsSorted.indexOf(breakpoint));
for (let i = 0, len = breakpointsAbove.length; i < len; i++) {
const b = breakpointsAbove[i];
if (layouts[b]) {
layout = layouts[b];
break;
}
}
layout = (0, _utils.cloneLayout)(layout || []); // clone layout so we don"t modify existing items
return (0, _utils.compact)((0, _utils.correctBounds)(layout, {
cols: cols
}), compactType, cols);
}
/**
* Given breakpoints, return an array of breakpoints sorted by width. This is usually
* e.g. ["xxs", "xs", "sm", ...]
*
* @param {Object} breakpoints Key/value pair of breakpoint names to widths.
* @return {Array} Sorted breakpoints.
*/
function sortBreakpoints(breakpoints /*: Breakpoints*/) /*: Array*/{
const keys /*: Array*/ = Object.keys(breakpoints);
return keys.sort(function (a, b) {
return breakpoints[a] - breakpoints[b];
});
}
}
var TROMPLE_HAS_RAN$3 = false;
function require$$5 () {
if (!TROMPLE_HAS_RAN$3) {
TROMPLE_HAS_RAN$3 = true;
TROMPLE_MAIN$3();
}
return module$4.exports;
}
var exports$3 = {};
var module$3 = { exports: exports$3 };
function TROMPLE_MAIN$2() {
Object.defineProperty(exports$3, "__esModule", {
value: true
});
exports$3.default = void 0;
var React = _interopRequireWildcard(require$$1$2());
var _propTypes = _interopRequireDefault(require$$2$1());
var _fastEquals = require$$1$1();
var _utils = require$$2();
var _responsiveUtils = require$$5();
var _ReactGridLayout = _interopRequireDefault(require$$1());
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } /*:: import { type Layout, type Pick } from "./utils";*/ /*:: import { type ResponsiveLayout, type OnLayoutChangeCallback, type Breakpoints } from "./responsiveUtils";*/
// $FlowFixMe[method-unbinding]
const type = obj => Object.prototype.toString.call(obj);
/**
* Get a value of margin or containerPadding.
*
* @param {Array | Object} param Margin | containerPadding, e.g. [10, 10] | {lg: [10, 10], ...}.
* @param {String} breakpoint Breakpoint: lg, md, sm, xs and etc.
* @return {Array}
*/
function getIndentationValue /*:: */(param /*: { [key: string]: T } | T*/, breakpoint /*: string*/) /*: T*/{
// $FlowIgnore TODO fix this typedef
if (param == null) return null;
// $FlowIgnore TODO fix this typedef
return Array.isArray(param) ? param : param[breakpoint];
}
/*:: type State = {
layout: Layout,
breakpoint: string,
cols: number,
layouts?: ResponsiveLayout
};*/
/*:: type Props = {|
...React.ElementConfig,
// Responsive config
breakpoint?: ?Breakpoint,
breakpoints: Breakpoints,
cols: { [key: Breakpoint]: number },
layouts: ResponsiveLayout,
width: number,
margin: { [key: Breakpoint]: [number, number] } | [number, number],
/* prettier-ignore *-/
containerPadding: { [key: Breakpoint]: ?[number, number] } | ?[number, number],
// Callbacks
onBreakpointChange: (Breakpoint, cols: number) => void,
onLayoutChange: OnLayoutChangeCallback,
onWidthChange: (
containerWidth: number,
margin: [number, number],
cols: number,
containerPadding: ?[number, number]
) => void
|};*/
/*:: type DefaultProps = Pick<
Props<>,
{|
allowOverlap: 0,
breakpoints: 0,
cols: 0,
containerPadding: 0,
layouts: 0,
margin: 0,
onBreakpointChange: 0,
onLayoutChange: 0,
onWidthChange: 0
|}
>;*/
class ResponsiveReactGridLayout extends React.Component
/*:: <
Props<>,
State
>*/
{
constructor() {
super(...arguments);
_defineProperty(this, "state", this.generateInitialState());
// wrap layouts so we do not need to pass layouts to child
_defineProperty(this, "onLayoutChange", (layout /*: Layout*/) => {
this.props.onLayoutChange(layout, {
...this.props.layouts,
[this.state.breakpoint]: layout
});
});
}
generateInitialState() /*: State*/{
const {
width,
breakpoints,
layouts,
cols
} = this.props;
const breakpoint = (0, _responsiveUtils.getBreakpointFromWidth)(breakpoints, width);
const colNo = (0, _responsiveUtils.getColsFromBreakpoint)(breakpoint, cols);
// verticalCompact compatibility, now deprecated
const compactType = this.props.verticalCompact === false ? null : this.props.compactType;
// Get the initial layout. This can tricky; we try to generate one however possible if one doesn"t exist
// for this layout.
const initialLayout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(layouts, breakpoints, breakpoint, breakpoint, colNo, compactType);
return {
layout: initialLayout,
breakpoint: breakpoint,
cols: colNo
};
}
static getDerivedStateFromProps(nextProps /*: Props<*>*/, prevState /*: State*/) /*: ?$Shape*/{
if (!(0, _fastEquals.deepEqual)(nextProps.layouts, prevState.layouts)) {
// Allow parent to set layouts directly.
const {
breakpoint,
cols
} = prevState;
// Since we"re setting an entirely new layout object, we must generate a new responsive layout
// if one does not exist.
const newLayout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(nextProps.layouts, nextProps.breakpoints, breakpoint, breakpoint, cols, nextProps.compactType);
return {
layout: newLayout,
layouts: nextProps.layouts
};
}
return null;
}
componentDidUpdate(prevProps /*: Props<*>*/) {
// Allow parent to set width or breakpoint directly.
if (this.props.width != prevProps.width || this.props.breakpoint !== prevProps.breakpoint || !(0, _fastEquals.deepEqual)(this.props.breakpoints, prevProps.breakpoints) || !(0, _fastEquals.deepEqual)(this.props.cols, prevProps.cols)) {
this.onWidthChange(prevProps);
}
}
/**
* When the width changes work through breakpoints and reset state with the new width & breakpoint.
* Width changes are necessary to figure out the widget widths.
*/
onWidthChange(prevProps /*: Props<*>*/) {
const {
breakpoints,
cols,
layouts,
compactType
} = this.props;
const newBreakpoint = this.props.breakpoint || (0, _responsiveUtils.getBreakpointFromWidth)(this.props.breakpoints, this.props.width);
const lastBreakpoint = this.state.breakpoint;
const newCols /*: number*/ = (0, _responsiveUtils.getColsFromBreakpoint)(newBreakpoint, cols);
const newLayouts = {
...layouts
};
// Breakpoint change
if (lastBreakpoint !== newBreakpoint || prevProps.breakpoints !== breakpoints || prevProps.cols !== cols) {
// Preserve the current layout if the current breakpoint is not present in the next layouts.
if (!(lastBreakpoint in newLayouts)) newLayouts[lastBreakpoint] = (0, _utils.cloneLayout)(this.state.layout);
// Find or generate a new layout.
let layout = (0, _responsiveUtils.findOrGenerateResponsiveLayout)(newLayouts, breakpoints, newBreakpoint, lastBreakpoint, newCols, compactType);
// This adds missing items.
layout = (0, _utils.synchronizeLayoutWithChildren)(layout, this.props.children, newCols, compactType, this.props.allowOverlap);
// Store the new layout.
newLayouts[newBreakpoint] = layout;
// callbacks
this.props.onLayoutChange(layout, newLayouts);
this.props.onBreakpointChange(newBreakpoint, newCols);
this.setState({
breakpoint: newBreakpoint,
layout: layout,
cols: newCols
});
}
const margin = getIndentationValue(this.props.margin, newBreakpoint);
const containerPadding = getIndentationValue(this.props.containerPadding, newBreakpoint);
//call onWidthChange on every change of width, not only on breakpoint changes
this.props.onWidthChange(this.props.width, margin, newCols, containerPadding);
}
render() /*: React.Element*/{
/* eslint-disable no-unused-vars */
const {
breakpoint,
breakpoints,
cols,
layouts,
margin,
containerPadding,
onBreakpointChange,
onLayoutChange,
onWidthChange,
...other
} = this.props;
/* eslint-enable no-unused-vars */
return /*#__PURE__*/React.createElement(_ReactGridLayout.default, _extends({}, other, {
// $FlowIgnore should allow nullable here due to DefaultProps
margin: getIndentationValue(margin, this.state.breakpoint),
containerPadding: getIndentationValue(containerPadding, this.state.breakpoint),
onLayoutChange: this.onLayoutChange,
layout: this.state.layout,
cols: this.state.cols
}));
}
}
exports$3.default = ResponsiveReactGridLayout;
// This should only include propTypes needed in this code; RGL itself
// will do validation of the rest props passed to it.
_defineProperty(ResponsiveReactGridLayout, "propTypes", {
//
// Basic props
//
// Optional, but if you are managing width yourself you may want to set the breakpoint
// yourself as well.
breakpoint: _propTypes.default.string,
// {name: pxVal}, e.g. {lg: 1200, md: 996, sm: 768, xs: 480}
breakpoints: _propTypes.default.object,
allowOverlap: _propTypes.default.bool,
// # of cols. This is a breakpoint -> cols map
cols: _propTypes.default.object,
// # of margin. This is a breakpoint -> margin map
// e.g. { lg: [5, 5], md: [10, 10], sm: [15, 15] }
// Margin between items [x, y] in px
// e.g. [10, 10]
margin: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
// # of containerPadding. This is a breakpoint -> containerPadding map
// e.g. { lg: [5, 5], md: [10, 10], sm: [15, 15] }
// Padding inside the container [x, y] in px
// e.g. [10, 10]
containerPadding: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]),
// layouts is an object mapping breakpoints to layouts.
// e.g. {lg: Layout, md: Layout, ...}
layouts(props /*: Props<>*/, propName /*: string*/) {
if (type(props[propName]) !== "[object Object]") {
throw new Error("Layout property must be an object. Received: " + type(props[propName]));
}
Object.keys(props[propName]).forEach(key => {
if (!(key in props.breakpoints)) {
throw new Error("Each key in layouts must align with a key in breakpoints.");
}
(0, _utils.validateLayout)(props.layouts[key], "layouts." + key);
});
},
// The width of this component.
// Required in this propTypes stanza because generateInitialState() will fail without it.
width: _propTypes.default.number.isRequired,
//
// Callbacks
//
// Calls back with breakpoint and new # cols
onBreakpointChange: _propTypes.default.func,
// Callback so you can save the layout.
// Calls back with (currentLayout, allLayouts). allLayouts are keyed by breakpoint.
onLayoutChange: _propTypes.default.func,
// Calls back with (containerWidth, margin, cols, containerPadding)
onWidthChange: _propTypes.default.func
});
_defineProperty(ResponsiveReactGridLayout, "defaultProps", {
breakpoints: {
lg: 1200,
md: 996,
sm: 768,
xs: 480,
xxs: 0
},
cols: {
lg: 12,
md: 10,
sm: 6,
xs: 4,
xxs: 2
},
containerPadding: {
lg: null,
md: null,
sm: null,
xs: null,
xxs: null
},
layouts: {},
margin: [10, 10],
allowOverlap: false,
onBreakpointChange: _utils.noop,
onLayoutChange: _utils.noop,
onWidthChange: _utils.noop
});
}
var TROMPLE_HAS_RAN$2 = false;
function require$$4 () {
if (!TROMPLE_HAS_RAN$2) {
TROMPLE_HAS_RAN$2 = true;
TROMPLE_MAIN$2();
}
return module$3.exports;
}
var exports$2 = {};
var module$2 = { exports: exports$2 };
function TROMPLE_MAIN$1() {
Object.defineProperty(exports$2, "__esModule", {
value: true
});
exports$2.default = WidthProvideRGL;
var React = _interopRequireWildcard(require$$1$2());
var _propTypes = _interopRequireDefault(require$$2$1());
var _resizeObserverPolyfill = _interopRequireDefault(require$$3$3());
var _clsx = _interopRequireDefault(require$$8());
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : 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; }; return _extends.apply(this, arguments); }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
/*:: import type { ReactRef } from "../ReactGridLayoutPropTypes";*/
/*:: type WPDefaultProps = {|
measureBeforeMount: boolean
|};*/
/*:: type WPProps = {|
className?: string,
style?: Object,
...WPDefaultProps
|};*/
// eslint-disable-next-line no-unused-vars
/*:: type WPState = {|
width: number
|};*/
/*:: type ComposedProps = {|
...Config,
measureBeforeMount?: boolean,
className?: string,
style?: Object,
width?: number
|};*/
const layoutClassName = "react-grid-layout";
/*
* A simple HOC that provides facility for listening to container resizes.
*
* The Flow type is pretty janky here. I can"t just spread `WPProps` into this returned object - I wish I could - but it triggers
* a flow bug of some sort that causes it to stop typechecking.
*/
function WidthProvideRGL /*:: */(ComposedComponent /*: React.AbstractComponent*/) /*: React.AbstractComponent>*/{
var _class;
return _class = class WidthProvider extends React.Component
/*:: <
ComposedProps,
WPState
>*/
{
constructor() {
super(...arguments);
_defineProperty(this, "state", {
width: 1280
});
_defineProperty(this, "elementRef", /*#__PURE__*/React.createRef());
_defineProperty(this, "mounted", false);
_defineProperty(this, "resizeObserver", void 0);
}
componentDidMount() {
this.mounted = true;
this.resizeObserver = new _resizeObserverPolyfill.default(entries => {
const node = this.elementRef.current;
if (node instanceof HTMLElement) {
const width = entries[0].contentRect.width;
this.setState({
width
});
}
});
const node = this.elementRef.current;
if (node instanceof HTMLElement) {
this.resizeObserver.observe(node);
}
}
componentWillUnmount() {
this.mounted = false;
const node = this.elementRef.current;
if (node instanceof HTMLElement) {
this.resizeObserver.unobserve(node);
}
this.resizeObserver.disconnect();
}
render() {
const {
measureBeforeMount,
...rest
} = this.props;
if (measureBeforeMount && !this.mounted) {
return /*#__PURE__*/React.createElement("div", {
className: (0, _clsx.default)(this.props.className, layoutClassName),
style: this.props.style
// $FlowIgnore ref types
,
ref: this.elementRef
});
}
return /*#__PURE__*/React.createElement(ComposedComponent, _extends({
innerRef: this.elementRef
}, rest, this.state));
}
}, _defineProperty(_class, "defaultProps", {
measureBeforeMount: false
}), _defineProperty(_class, "propTypes", {
// If true, will not render children until mounted. Useful for getting the exact width before
// rendering, to prevent any unsightly resizing.
measureBeforeMount: _propTypes.default.bool
}), _class;
}
}
var TROMPLE_HAS_RAN$1 = false;
function require$$6 () {
if (!TROMPLE_HAS_RAN$1) {
TROMPLE_HAS_RAN$1 = true;
TROMPLE_MAIN$1();
}
return module$2.exports;
}
var exports$1 = {};
var module$1 = { exports: exports$1 };
function TROMPLE_MAIN() {
module$1.exports = require$$1().default;
module$1.exports.utils = require$$2();
module$1.exports.calculateUtils = require$$3();
module$1.exports.Responsive =
require$$4().default;
module$1.exports.Responsive.utils = require$$5();
module$1.exports.WidthProvider =
require$$6().default;
}
var TROMPLE_HAS_RAN = false;
function main () {
if (!TROMPLE_HAS_RAN) {
TROMPLE_HAS_RAN = true;
TROMPLE_MAIN();
}
return module$1.exports;
}
function trompleEntryPoint (requirePath) {
switch (requirePath) {
case undefined: return main();
}
}
module.exports = trompleEntryPoint;
/* */}),null);
-----
react-slick-0.26.1",["react-0.0.0","react-dom-0.0.0","lodash-debounce-4.0.8","classnames-2.2.6","resize-observer-polyfill-1.5.1","json2mq-0.2.0","enquire-js-2.1.6"],(function(a,b,c,d,e,f){"use strict";var g=b("react-0.0.0"),h=b("react-dom-0.0.0"),i=b("lodash-debounce-4.0.8"),j=b("classnames-2.2.6"),k=b("resize-observer-polyfill-1.5.1"),l=b("json2mq-0.2.0"),m=b("enquire-js-2.1.6"),n={},o={exports:n};function p(){Object.defineProperty(n,"__esModule",{value:!0});n["default"]=void 0;var a={animating:!1,autoplaying:null,currentDirection:0,currentLeft:null,currentSlide:0,direction:1,dragging:!1,edgeDragged:!1,initialized:!1,lazyLoadedList:[],listHeight:null,listWidth:null,scrolling:!1,slideCount:null,slideHeight:null,slideWidth:null,swipeLeft:null,swiped:!1,swiping:!1,touchObject:{startX:0,startY:0,curX:0,curY:0},trackStyle:{},trackWidth:0};a=a;n["default"]=a}var q=!1;function r(){q||(q=!0,p());return o.exports}var s={},t={exports:s};function u(){Object.defineProperty(s,"__esModule",{value:!0});s.canUseDOM=s.slidesOnLeft=s.slidesOnRight=s.siblingDirection=s.getTotalSlides=s.getPostClones=s.getPreClones=s.getTrackLeft=s.getTrackAnimateCSS=s.getTrackCSS=s.checkSpecKeys=s.getSlideCount=s.checkNavigable=s.getNavigableIndexes=s.swipeEnd=s.swipeMove=s.swipeStart=s.keyHandler=s.changeSlide=s.slideHandler=s.initializedState=s.extractObject=s.canGoNext=s.getSwipeDirection=s.getHeight=s.getWidth=s.lazySlidesOnRight=s.lazySlidesOnLeft=s.lazyEndIndex=s.lazyStartIndex=s.getRequiredLazySlides=s.getOnDemandLazySlides=void 0;var a=c(g()),b=c(h());function c(a){return a&&a.__esModule?a:{"default":a}}function d(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable}));c.push.apply(c,d)}return c}function e(a){for(var b=1;b0?1:0):0};s.lazySlidesOnLeft=l;var m=function(a){return a.centerMode?Math.floor((a.slidesToShow-1)/2)+1+(parseInt(a.centerPadding)>0?1:0):a.slidesToShow};s.lazySlidesOnRight=m;var n=function(a){return a&&a.offsetWidth||0};s.getWidth=n;var o=function(a){return a&&a.offsetHeight||0};s.getHeight=o;var p=function(a){var b=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!1,c,d,e,f;c=a.startX-a.curX;d=a.startY-a.curY;e=Math.atan2(d,c);f=Math.round(e*180/Math.PI);f<0&&(f=360-Math.abs(f));if(f<=45&&f>=0||f<=360&&f>=315)return"left";if(f>=135&&f<=225)return"right";if(b===!0)if(f>=35&&f<=135)return"up";else return"down";return"vertical"};s.getSwipeDirection=p;var q=function(a){var b=!0;a.infinite||(a.centerMode&&a.currentSlide>=a.slideCount-1?b=!1:(a.slideCount<=a.slidesToShow||a.currentSlide>=a.slideCount-a.slidesToShow)&&(b=!1));return b};s.canGoNext=q;c=function(a,b){var c={};b.forEach(function(b){return c[b]=a[b]});return c};s.extractObject=c;c=function(c){var d=a["default"].Children.count(c.children),e=Math.ceil(n(b["default"].findDOMNode(c.listRef))),f=Math.ceil(n(b["default"].findDOMNode(c.trackRef)));if(!c.vertical){var g=c.centerMode&&parseInt(c.centerPadding)*2;typeof c.centerPadding==="string"&&c.centerPadding.slice(-1)==="%"&&(g*=e/100);g=Math.ceil((e-g)/c.slidesToShow)}else g=e;var h=b["default"].findDOMNode(c.listRef)&&o(b["default"].findDOMNode(c.listRef).querySelector("[data-index="0"]")),j=h*c.slidesToShow,k=c.currentSlide===void 0?c.initialSlide:c.currentSlide;c.rtl&&c.currentSlide===void 0&&(k=d-1-c.initialSlide);var l=c.lazyLoadedList||[],m=i({currentSlide:k,lazyLoadedList:l});l.concat(m);m={slideCount:d,slideWidth:g,listWidth:e,trackWidth:f,currentSlide:k,slideHeight:h,listHeight:j,lazyLoadedList:l};c.autoplaying===null&&c.autoplay&&(m.autoplaying="playing");return m};s.initializedState=c;c=function(a){var b=a.waitForAnimate,c=a.animating,d=a.fade,f=a.infinite,g=a.index,h=a.slideCount,j=a.lazyLoadedList,k=a.lazyLoad,l=a.currentSlide,m=a.centerMode,n=a.slidesToScroll,o=a.slidesToShow,p=a.useCSS;if(b&&c)return{};b=g;c={};var r={};if(d){if(!f&&(g<0||g>=h))return{};g<0?b=g+h:g>=h&&(b=g-h);k&&j.indexOf(b)<0&&j.push(b);c={animating:!0,currentSlide:b,lazyLoadedList:j};r={animating:!1}}else d=b,b<0?(d=b+h,!f?d=0:h%n!==0&&(d=h-h%n)):!q(a)&&b>l?b=d=l:m&&b>=h?(b=f?h:h-1,d=f?0:h-1):b>=h&&(d=b-h,!f?d=h-o:h%n!==0&&(d=0)),g=y(e({},a,{slideIndex:b})),l=y(e({},a,{slideIndex:d})),f||(g===l&&(b=d),g=l),k&&j.concat(i(e({},a,{currentSlide:b}))),!p?c={currentSlide:d,trackStyle:w(e({},a,{left:l})),lazyLoadedList:j}:(c={animating:!0,currentSlide:d,trackStyle:x(e({},a,{left:g})),lazyLoadedList:j},r={animating:!1,currentSlide:d,trackStyle:w(e({},a,{left:l})),swipeLeft:null});return{state:c,nextState:r}};s.slideHandler=c;c=function(a,b){var c,d,f,g=a.slidesToScroll,h=a.slidesToShow,i=a.slideCount,j=a.currentSlide,k=a.lazyLoad,l=a.infinite;d=i%g!==0;d=d?0:(i-j)%g;if(b.message==="previous")h=d===0?g:h-d,f=j-h,k&&!l&&(c=j-h,f=c===-1?i-1:c);else if(b.message==="next")h=d===0?g:d,f=j+h,k&&!l&&(f=(j+g)%i+d);else if(b.message==="dots"){f=b.index*b.slidesToScroll;if(f===b.currentSlide)return null}else if(b.message==="children"){f=b.index;if(f===b.currentSlide)return null;if(l){c=C(e({},a,{targetSlide:f}));f>b.currentSlide&&c==="left"?f=f-i:f10)return{scrolling:!0};h&&(u.swipeLength=g);o=(i?-1:1)*(u.curX>u.startX?1:-1);h&&(o=u.curY>u.startY?1:-1);g=Math.ceil(r/s);r=p(b.touchObject,h);s=u.swipeLength;t||(j===0&&r==="right"||j+1>=g&&r==="left"||!q(b)&&r==="left")&&(s=u.swipeLength*k,l===!1&&m&&(m(r),c.edgeDragged=!0));!n&&v&&(v(r),c.swiped=!0);!f?!i?t=d+s*o:t=d-s*o:t=d+s*(x/z)*o;h&&(t=d+s*o);c=e({},c,{touchObject:u,swipeLeft:t,trackStyle:w(e({},b,{left:t}))});if(Math.abs(u.curX-u.startX)10&&(c.swiping=!0,a.preventDefault());return c};s.swipeMove=c;c=function(a,b){var c=b.dragging,d=b.swipe,f=b.touchObject,g=b.listWidth,h=b.touchThreshold,i=b.verticalSwiping,j=b.listHeight,k=b.currentSlide,l=b.swipeToSlide,m=b.scrolling,n=b.onSwipe;if(!c){d&&a.preventDefault();return{}}c=i?j/h:g/h;d=p(f,i);j={dragging:!1,edgeDragged:!1,scrolling:!1,swiping:!1,swiped:!1,swipeLeft:null,touchObject:{}};if(m)return j;if(!f.swipeLength)return j;if(f.swipeLength>c){a.preventDefault();n&&n(d);var o;switch(d){case"left":case"up":g=k+u(b);o=l?t(b,g):g;j.currentDirection=0;break;case"right":case"down":g=k-u(b);o=l?t(b,g):g;j.currentDirection=1;break;default:o=k}j.triggerSlideHandler=o}else{h=y(b);j.trackStyle=x(e({},b,{left:h}))}return j};s.swipeEnd=c;var r=function(a){var b=a.infinite?a.slideCount*2:a.slideCount,c=a.infinite?a.slidesToShow*-1:0,d=a.infinite?a.slidesToShow*-1:0,e=[];while(ca[a.length-1])b=a[a.length-1];else for(var d in a){if(ba.swipeLeft*-1){d=b;return!1}}else if(b.offsetTop+o(b)/2>a.swipeLeft*-1){d=b;return!1}return!0});if(!d)return 0;e=a.rtl===!0?a.slideCount-a.currentSlide:a.currentSlide;e=Math.abs(d.dataset.index-e)||1;return e}else return a.slidesToScroll};s.getSlideCount=u;var v=function(a,b){return b.reduce(function(b,c){return b&&a.hasOwnProperty(c)},!0)?null:!1};s.checkSpecKeys=v;var w=function(a){v(a,["left","variableWidth","slideCount","slidesToShow","slideWidth"]);var b,c,d=a.slideCount+2*a.slidesToShow;!a.vertical?b=B(a)*a.slideWidth:c=d*a.slideHeight;d={opacity:1,transition:"",WebkitTransition:""};if(a.useTransform){var f=a.vertical?"translate3d(0px, "+a.left+"px, 0px)":"translate3d("+a.left+"px, 0px, 0px)",g=a.vertical?"translate3d(0px, "+a.left+"px, 0px)":"translate3d("+a.left+"px, 0px, 0px)",h=a.vertical?"translateY("+a.left+"px)":"translateX("+a.left+"px)";d=e({},d,{WebkitTransform:f,transform:g,msTransform:h})}else a.vertical?d.top=a.left:d.left=a.left;a.fade&&(d={opacity:1});b&&(d.width=b);c&&(d.height=c);window&&!window.addEventListener&&window.attachEvent&&(!a.vertical?d.marginLeft=a.left+"px":d.marginTop=a.left+"px");return d};s.getTrackCSS=w;var x=function(a){v(a,["left","variableWidth","slideCount","slidesToShow","slideWidth","speed","cssEase"]);var b=w(a);a.useTransform?(b.WebkitTransition="-webkit-transform "+a.speed+"ms "+a.cssEase,b.transition="transform "+a.speed+"ms "+a.cssEase):a.vertical?b.transition="top "+a.speed+"ms "+a.cssEase:b.transition="left "+a.speed+"ms "+a.cssEase;return b};s.getTrackAnimateCSS=x;var y=function(a){if(a.unslick)return 0;v(a,["slideIndex","trackRef","infinite","centerMode","slideCount","slidesToShow","slidesToScroll","slideWidth","listWidth","variableWidth","slideHeight"]);var c=a.slideIndex,d=a.trackRef,e=a.infinite,f=a.centerMode,g=a.slideCount,h=a.slidesToShow,i=a.slidesToScroll,j=a.slideWidth,k=a.listWidth,l=a.variableWidth,m=a.slideHeight,n=a.fade,o=a.vertical;if(n||a.slideCount===1)return 0;n=0;e?(n=-z(a),g%i!==0&&c+i>g&&(n=-(c>g?h-(c-g):g%i)),f&&(n+=parseInt(h/2))):(g%i!==0&&c+i>g&&(n=h-g%i),f&&(n=parseInt(h/2)));g=n*j;i=n*m;!o?h=c*j*-1+g:h=c*m*-1+i;if(l===!0){n=b["default"].findDOMNode(d);o=c+z(a);j=n&&n.childNodes[o];h=j?j.offsetLeft*-1:0;if(f===!0){o=e?c+z(a):c;j=n&&n.children[o];h=0;for(g=0;ga.currentSlide)return a.targetSlide>a.currentSlide+D(a)?"left":"right";else return a.targetSlide0&&(c+=1);d&&b%2===0&&(c+=1);return c}return d?0:b-1};s.slidesOnRight=D;var E=function(a){var b=a.slidesToShow,c=a.centerMode,d=a.rtl;a=a.centerPadding;if(c){c=(b-1)/2+1;parseInt(a)>0&&(c+=1);!d&&b%2===0&&(c+=1);return c}return d?b-1:0};s.slidesOnLeft=E;c=function(){return!!(typeof window!=="undefined"&&window.document&&window.document.createElement)};s.canUseDOM=c}var v=!1;function w(){v||(v=!0,u());return t.exports}var x={},y={exports:x};function z(){Object.defineProperty(x,"__esModule",{value:!0});x.Track=void 0;var a=d(g()),b=d(j()),c=w();function d(a){return a&&a.__esModule?a:{"default":a}}function e(a){typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?e=function(a){return typeof a}:e=function(a){return a&&typeof Symbol==="function"&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a};return e(a)}function f(){f=Object.assign||function(a){for(var b=1;b=a.slideCount;a.centerMode?(e=Math.floor(a.slidesToShow/2),c=(f-a.currentSlide)%a.slideCount===0,f>a.currentSlide-e-1&&f<=a.currentSlide+e&&(b=!0)):b=a.currentSlide<=f&&f=0?n=l:n=a["default"].createElement("div",null);var p=u(r({},d,{index:m})),q=n.props.className||"",s=t(r({},d,{index:m}));f.push(a["default"].cloneElement(n,{key:"original"+v(n,m),"data-index":m,className:b["default"](s,q),tabIndex:"-1","aria-hidden":!s["slick-active"],style:r({outline:"none"},n.props.style||{},{},p),onClick:function(a){n.props&&n.props.onClick&&n.props.onClick(a),d.focusOnSelect&&d.focusOnSelect(o)}}));if(d.infinite&&d.fade===!1){var w=i-m;w<=c.getPreClones(d)&&i!==d.slidesToShow&&(e=-w,e>=j&&(n=l),s=t(r({},d,{index:e})),g.push(a["default"].cloneElement(n,{key:"precloned"+v(n,e),"data-index":e,tabIndex:"-1",className:b["default"](s,q),"aria-hidden":!s["slick-active"],style:r({},n.props.style||{},{},p),onClick:function(a){n.props&&n.props.onClick&&n.props.onClick(a),d.focusOnSelect&&d.focusOnSelect(o)}})));i!==d.slidesToShow&&(e=i+m,e=d&&c.props.currentSlide<=f});f={message:"dots",index:e,slidesToScroll:c.props.slidesToScroll,currentSlide:c.props.currentSlide};f=c.clickHandler.bind(c,f);return a["default"].createElement("li",{key:e,className:d},a["default"].cloneElement(c.props.customPaging(e),{onClick:f}))});return a["default"].cloneElement(this.props.appendDots(h),f({className:this.props.dotsClass},g))}}]);return d}(a["default"].PureComponent);C.Dots=c}var F=!1;function G(){F||(F=!0,E());return D.exports}var H={},I={exports:H};function J(){Object.defineProperty(H,"__esModule",{value:!0});H.NextArrow=H.PrevArrow=void 0;var a=d(g()),b=d(j()),c=w();function d(a){return a&&a.__esModule?a:{"default":a}}function e(a){typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?e=function(a){return typeof a}:e=function(a){return a&&typeof Symbol==="function"&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a};return e(a)}function f(){f=Object.assign||function(a){for(var b=1;b=0)continue;if(!Object.prototype.propertyIsEnumerable.call(a,d))continue;c[d]=a[d]}}return c}function t(a,b){if(a==null)return{};var c={},d=Object.keys(a),e,f;for(f=0;f=0)continue;c[e]=a[e]}return c}function u(a){typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?u=function(a){return typeof a}:u=function(a){return a&&typeof Symbol==="function"&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a};return u(a)}function v(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable}));c.push.apply(c,d)}return c}function x(a){for(var b=1;b0&&(i.setState(function(b){return{lazyLoadedList:b.lazyLoadedList.concat(a)}}),i.props.onLazyLoad&&i.props.onLazyLoad(a))}});F(C(i),"componentDidMount",function(){var a=x({listRef:i.list,trackRef:i.track},i.props);i.updateState(a,!0,function(){i.adaptHeight(),i.props.autoplay&&i.autoPlay("update")});i.props.lazyLoad==="progressive"&&(i.lazyLoadTimer=setInterval(i.progressiveLazyLoad,1e3));i.ro=new o["default"](function(){i.state.animating?(i.onWindowResized(!1),i.callbackTimers.push(setTimeout(function(){return i.onWindowResized()},i.props.speed))):i.onWindowResized()});i.ro.observe(i.list);Array.prototype.forEach.call(document.querySelectorAll(".slick-slide"),function(a){a.onfocus=i.props.pauseOnFocus?i.onSlideFocus:null,a.onblur=i.props.pauseOnFocus?i.onSlideBlur:null});window.addEventListener?window.addEventListener("resize",i.onWindowResized):window.attachEvent("onresize",i.onWindowResized)});F(C(i),"componentWillUnmount",function(){i.animationEndCallback&&clearTimeout(i.animationEndCallback),i.lazyLoadTimer&&clearInterval(i.lazyLoadTimer),i.callbackTimers.length&&(i.callbackTimers.forEach(function(a){return clearTimeout(a)}),i.callbackTimers=[]),window.addEventListener?window.removeEventListener("resize",i.onWindowResized):window.detachEvent("onresize",i.onWindowResized),i.autoplayTimer&&clearInterval(i.autoplayTimer),i.ro.disconnect()});F(C(i),"UNSAFE_componentWillReceiveProps",function(b){var c=x({listRef:i.list,trackRef:i.track},b,{},i.state),d=!1;for(var e=0,f=Object.keys(i.props);e=a["default"].Children.count(b.children)&&i.changeSlide({message:"index",index:a["default"].Children.count(b.children)-b.slidesToShow,currentSlide:i.state.currentSlide}),b.autoplay?i.autoPlay("update"):i.pause("paused")})});F(C(i),"componentDidUpdate",function(){i.checkImagesLoad();i.props.onReInit&&i.props.onReInit();if(i.props.lazyLoad){var a=f.getOnDemandLazySlides(x({},i.props,{},i.state));a.length>0&&(i.setState(function(b){return{lazyLoadedList:b.lazyLoadedList.concat(a)}}),i.props.onLazyLoad&&i.props.onLazyLoad(a))}i.adaptHeight()});F(C(i),"onWindowResized",function(a){i.debouncedResize&&i.debouncedResize.cancel(),i.debouncedResize=d["default"](function(){return i.resizeWindow(a)},50),i.debouncedResize()});F(C(i),"resizeWindow",function(){var a=arguments.length>0&&arguments[0]!==void 0?arguments[0]:!0;if(!b["default"].findDOMNode(i.track))return;var c=x({listRef:i.list,trackRef:i.track},i.props,{},i.state);i.updateState(c,a,function(){i.props.autoplay?i.autoPlay("update"):i.pause("paused")});i.setState({animating:!1});clearTimeout(i.animationEndCallback);delete i.animationEndCallback});F(C(i),"updateState",function(b,c,d){var e=f.initializedState(b);b=x({},b,{},e,{slideIndex:e.currentSlide});var g=f.getTrackLeft(b);b=x({},b,{left:g});g=f.getTrackCSS(b);(c||a["default"].Children.count(i.props.children)!==a["default"].Children.count(b.children))&&(e.trackStyle=g);i.setState(e,d)});F(C(i),"ssrInit",function(){if(i.props.variableWidth){var b=0,c=0,d=[],e=f.getPreClones(x({},i.props,{},i.state,{slideCount:i.props.children.length})),g=f.getPostClones(x({},i.props,{},i.state,{slideCount:i.props.children.length}));i.props.children.forEach(function(a){d.push(a.props.style.width),b+=a.props.style.width});for(var h=0;h=b&&i.onWindowResized()};if(!a.onclick)a.onclick=function(){return a.parentNode.focus()};else{var e=a.onclick;a.onclick=function(){e(),a.parentNode.focus()}}a.onload||(i.props.lazyLoad?a.onload=function(){i.adaptHeight(),i.callbackTimers.push(setTimeout(i.onWindowResized,i.props.speed))}:(a.onload=d,a.onerror=function(){d(),i.props.onLazyLoadError&&i.props.onLazyLoadError()}))})});F(C(i),"progressiveLazyLoad",function(){var a=[],b=x({},i.props,{},i.state);for(var c=i.state.currentSlide;c=-f.getPreClones(b);c--)if(i.state.lazyLoadedList.indexOf(c)<0){a.push(c);break}a.length>0?(i.setState(function(b){return{lazyLoadedList:b.lazyLoadedList.concat(a)}}),i.props.onLazyLoad&&i.props.onLazyLoad(a)):i.lazyLoadTimer&&(clearInterval(i.lazyLoadTimer),delete i.lazyLoadTimer)});F(C(i),"slideHandler",function(a){var b=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!1,c=i.props,d=c.asNavFor,e=c.beforeChange,g=c.onLazyLoad,h=c.speed,j=c.afterChange,k=i.state.currentSlide,l=f.slideHandler(x({index:a},i.props,{},i.state,{trackRef:i.track,useCSS:i.props.useCSS&&!b})),m=l.state,n=l.nextState;if(!m)return;e&&e(k,m.currentSlide);var o=m.lazyLoadedList.filter(function(a){return i.state.lazyLoadedList.indexOf(a)<0});g&&o.length>0&&g(o);i.setState(m,function(){d&&d.innerSlider.slideHandler(a);if(!n)return;i.animationEndCallback=setTimeout(function(){var a=n.animating,b=s(n,["animating"]);i.setState(b,function(){i.callbackTimers.push(setTimeout(function(){return i.setState({animating:a})},10)),j&&j(m.currentSlide),delete i.animationEndCallback})},h)})});F(C(i),"changeSlide",function(a){var b=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!1,c=x({},i.props,{},i.state),d=f.changeSlide(c,a);if(d!==0&&!d)return;b===!0?i.slideHandler(d,b):i.slideHandler(d)});F(C(i),"clickHandler",function(a){i.clickable===!1&&(a.stopPropagation(),a.preventDefault()),i.clickable=!0});F(C(i),"keyHandler",function(a){a=f.keyHandler(a,i.props.accessibility,i.props.rtl);a!==""&&i.changeSlide({message:a})});F(C(i),"selectHandler",function(a){i.changeSlide(a)});F(C(i),"disableBodyScroll",function(){var a=function(a){a=a||window.event,a.preventDefault&&a.preventDefault(),a.returnValue=!1};window.ontouchmove=a});F(C(i),"enableBodyScroll",function(){window.ontouchmove=null});F(C(i),"swipeStart",function(a){i.props.verticalSwiping&&i.disableBodyScroll();a=f.swipeStart(a,i.props.swipe,i.props.draggable);a!==""&&i.setState(a)});F(C(i),"swipeMove",function(a){a=f.swipeMove(a,x({},i.props,{},i.state,{trackRef:i.track,listRef:i.list,slideIndex:i.state.currentSlide}));if(!a)return;a.swiping&&(i.clickable=!1);i.setState(a)});F(C(i),"swipeEnd",function(a){a=f.swipeEnd(a,x({},i.props,{},i.state,{trackRef:i.track,listRef:i.list,slideIndex:i.state.currentSlide}));if(!a)return;var b=a.triggerSlideHandler;delete a.triggerSlideHandler;i.setState(a);if(b===void 0)return;i.slideHandler(b);i.props.verticalSwiping&&i.enableBodyScroll()});F(C(i),"slickPrev",function(){i.callbackTimers.push(setTimeout(function(){return i.changeSlide({message:"previous"})},0))});F(C(i),"slickNext",function(){i.callbackTimers.push(setTimeout(function(){return i.changeSlide({message:"next"})},0))});F(C(i),"slickGoTo",function(a){var b=arguments.length>1&&arguments[1]!==void 0?arguments[1]:!1;a=Number(a);if(isNaN(a))return"";i.callbackTimers.push(setTimeout(function(){return i.changeSlide({message:"index",index:a,currentSlide:i.state.currentSlide},b)},0))});F(C(i),"play",function(){var a;if(i.props.rtl)a=i.state.currentSlide-i.props.slidesToScroll;else if(f.canGoNext(x({},i.props,{},i.state)))a=i.state.currentSlide+i.props.slidesToScroll;else return!1;i.slideHandler(a)});F(C(i),"autoPlay",function(a){i.autoplayTimer&&clearInterval(i.autoplayTimer);var b=i.state.autoplaying;if(a==="update"){if(b==="hovered"||b==="focused"||b==="paused")return}else if(a==="leave"){if(b==="paused"||b==="focused")return}else if(a==="blur"&&(b==="paused"||b==="hovered"))return;i.autoplayTimer=setInterval(i.play,i.props.autoplaySpeed+50);i.setState({autoplaying:"playing"})});F(C(i),"pause",function(a){i.autoplayTimer&&(clearInterval(i.autoplayTimer),i.autoplayTimer=null);var b=i.state.autoplaying;a==="paused"?i.setState({autoplaying:"paused"}):a==="focused"?(b==="hovered"||b==="playing")&&i.setState({autoplaying:"focused"}):b==="playing"&&i.setState({autoplaying:"hovered"})});F(C(i),"onDotsOver",function(){return i.props.autoplay&&i.pause("hovered")});F(C(i),"onDotsLeave",function(){return i.props.autoplay&&i.state.autoplaying==="hovered"&&i.autoPlay("leave")});F(C(i),"onTrackOver",function(){return i.props.autoplay&&i.pause("hovered")});F(C(i),"onTrackLeave",function(){return i.props.autoplay&&i.state.autoplaying==="hovered"&&i.autoPlay("leave")});F(C(i),"onSlideFocus",function(){return i.props.autoplay&&i.pause("focused")});F(C(i),"onSlideBlur",function(){return i.props.autoplay&&i.state.autoplaying==="focused"&&i.autoPlay("blur")});F(C(i),"render",function(){var b=e["default"]("slick-slider",i.props.className,{"slick-vertical":i.props.vertical,"slick-initialized":!0}),c=x({},i.props,{},i.state),d=f.extractObject(c,["fade","cssEase","speed","infinite","centerMode","focusOnSelect","currentSlide","lazyLoad","lazyLoadedList","rtl","slideWidth","slideHeight","listHeight","vertical","slidesToShow","slidesToScroll","slideCount","trackStyle","variableWidth","unslick","centerPadding"]),g=i.props.pauseOnHover;d=x({},d,{onMouseEnter:g?i.onTrackOver:null,onMouseLeave:g?i.onTrackLeave:null,onMouseOver:g?i.onTrackOver:null,focusOnSelect:i.props.focusOnSelect?i.selectHandler:null});var h;if(i.props.dots===!0&&i.state.slideCount>=i.props.slidesToShow){g=f.extractObject(c,["dotsClass","slideCount","slidesToShow","currentSlide","slidesToScroll","clickHandler","children","customPaging","infinite","appendDots"]);var j=i.props.pauseOnDotsHover;g=x({},g,{clickHandler:i.changeSlide,onMouseEnter:j?i.onDotsLeave:null,onMouseOver:j?i.onDotsOver:null,onMouseLeave:j?i.onDotsLeave:null});h=a["default"].createElement(m.Dots,g)}var k,o;j=f.extractObject(c,["infinite","centerMode","currentSlide","slideCount","slidesToShow","prevArrow","nextArrow"]);j.clickHandler=i.changeSlide;i.props.arrows&&(k=a["default"].createElement(n.PrevArrow,j),o=a["default"].createElement(n.NextArrow,j));g=null;i.props.vertical&&(g={height:i.state.listHeight});c=null;i.props.vertical===!1?i.props.centerMode===!0&&(c={padding:"0px "+i.props.centerPadding}):i.props.centerMode===!0&&(c={padding:i.props.centerPadding+" 0px"});j=x({},g,{},c);g=i.props.touchMove;c={className:"slick-list",style:j,onClick:i.clickHandler,onMouseDown:g?i.swipeStart:null,onMouseMove:i.state.dragging&&g?i.swipeMove:null,onMouseUp:g?i.swipeEnd:null,onMouseLeave:i.state.dragging&&g?i.swipeEnd:null,onTouchStart:g?i.swipeStart:null,onTouchMove:i.state.dragging&&g?i.swipeMove:null,onTouchEnd:g?i.swipeEnd:null,onTouchCancel:i.state.dragging&&g?i.swipeEnd:null,onKeyDown:i.props.accessibility?i.keyHandler:null};j={className:b,dir:"ltr",style:i.props.style};i.props.unslick&&(c={className:"slick-list"},j={className:b});return a["default"].createElement("div",j,i.props.unslick?"":k,a["default"].createElement("div",q({ref:i.listRefHandler},c),a["default"].createElement(l.Track,q({ref:i.trackRefHandler},d),i.props.children)),i.props.unslick?"":o,i.props.unslick?"":h)});i.list=null;i.track=null;i.state=x({},c["default"],{currentSlide:i.props.initialSlide,slideCount:a["default"].Children.count(i.props.children)});i.callbackTimers=[];i.clickable=!0;i.debouncedResize=null;return i}return h}(a["default"].Component);M.InnerSlider=p}var P=!1;function Q(){P||(P=!0,O());return N.exports}var R={},S={exports:R};function T(){Object.defineProperty(R,"__esModule",{value:!0});R["default"]=void 0;var a=b(g());function b(a){return a&&a.__esModule?a:{"default":a}}b={accessibility:!0,adaptiveHeight:!1,afterChange:null,appendDots:function(b){return a["default"].createElement("ul",{style:{display:"block"}},b)},arrows:!0,autoplay:!1,autoplaySpeed:3e3,beforeChange:null,centerMode:!1,centerPadding:"50px",className:"",cssEase:"ease",customPaging:function(b){return a["default"].createElement("button",null,b+1)},dots:!1,dotsClass:"slick-dots",draggable:!0,easing:"linear",edgeFriction:.35,fade:!1,focusOnSelect:!1,infinite:!0,initialSlide:0,lazyLoad:null,nextArrow:null,onEdge:null,onInit:null,onLazyLoadError:null,onReInit:null,pauseOnDotsHover:!1,pauseOnFocus:!1,pauseOnHover:!0,prevArrow:null,responsive:null,rows:1,rtl:!1,slide:"div",slidesPerRow:1,slidesToScroll:1,slidesToShow:1,speed:500,swipe:!0,swipeEvent:null,swipeToSlide:!1,touchMove:!0,touchThreshold:5,useCSS:!0,useTransform:!0,variableWidth:!1,vertical:!1,waitForAnimate:!0};b=b;R["default"]=b}var U=!1;function V(){U||(U=!0,T());return S.exports}var W={},X={exports:W};function aa(){Object.defineProperty(W,"__esModule",{value:!0});W["default"]=void 0;var a=f(g()),b=Q(),c=f(l()),d=f(V()),e=w();function f(a){return a&&a.__esModule?a:{"default":a}}function h(a){typeof Symbol==="function"&&typeof Symbol.iterator==="symbol"?h=function(a){return typeof a}:h=function(a){return a&&typeof Symbol==="function"&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a};return h(a)}function i(){i=Object.assign||function(a){for(var b=1;b1&&arguments[1]!==void 0?arguments[1]:!1;return b.innerSlider.slickGoTo(a,c)});v(s(b),"slickPause",function(){return b.innerSlider.pause("paused")});v(s(b),"slickPlay",function(){return b.innerSlider.autoPlay("play")});b.state={breakpoint:null};b._responsiveMediaHandlers=[];return b}p(g,[{key:"media",value:function(a,b){x.register(a,b),this._responsiveMediaHandlers.push({query:a,handler:b})}},{key:"UNSAFE_componentWillMount",value:function(){var a=this;if(this.props.responsive){var b=this.props.responsive.map(function(a){return a.breakpoint});b.sort(function(a,b){return a-b});b.forEach(function(d,f){var g;f===0?g=c["default"]({minWidth:0,maxWidth:d}):g=c["default"]({minWidth:b[f-1]+1,maxWidth:d});e.canUseDOM()&&a.media(g,function(){a.setState({breakpoint:d})})});var d=c["default"]({minWidth:b.slice(-1)[0]});e.canUseDOM()&&this.media(d,function(){a.setState({breakpoint:null})})}}},{key:"componentWillUnmount",value:function(){this._responsiveMediaHandlers.forEach(function(a){x.unregister(a.query,a.handler)})}},{key:"render",value:function(){var c=this,e;this.state.breakpoint?(e=this.props.responsive.filter(function(a){return a.breakpoint===c.state.breakpoint}),e=e[0].settings==="unslick"?"unslick":k({},d["default"],{},this.props,{},e[0].settings)):e=k({},d["default"],{},this.props);e.centerMode&&(e.slidesToScroll>1&&!1,e.slidesToScroll=1);e.fade&&(e.slidesToShow>1&&!1,e.slidesToScroll>1&&!1,e.slidesToShow=1,e.slidesToScroll=1);var f=a["default"].Children.toArray(this.props.children);f=f.filter(function(a){return typeof a==="string"?!!a.trim():!!a});e.variableWidth&&(e.rows>1||e.slidesPerRow>1)&&(e.variableWidth=!1);var g=[],h=null;for(var j=0;j=f.length)break;n.push(a["default"].cloneElement(f[o],{key:100*j+10*m+o,tabIndex:-1,style:{width:"".concat(100/e.slidesPerRow,"%"),display:"inline-block"}}))}l.push(a["default"].createElement("div",{key:10*j+m},n))}e.variableWidth?g.push(a["default"].createElement("div",{key:j,style:{width:h}},l)):g.push(a["default"].createElement("div",{key:j},l))}if(e==="unslick"){o="regular slider "+(this.props.className||"");return a["default"].createElement("div",{className:o},f)}else g.length<=e.slidesToShow&&(e.unslick=!0);return a["default"].createElement(b.InnerSlider,i({style:this.props.style,ref:this.innerSliderRefHandler},e),g)}}]);return g}(a["default"].Component);W["default"]=f}var Y=!1;function ba(){Y||(Y=!0,aa());return X.exports}var Z={},ca={exports:Z};function da(){Object.defineProperty(Z,"__esModule",{value:!0});Z["default"]=void 0;a=a(ba());function a(a){return a&&a.__esModule?a:{"default":a}}a=a["default"];Z["default"]=a}var $=!1;function ea(){$||($=!0,da());return ca.exports}function a(a){switch(a){case void 0:return ea()}}e.exports=a}),null);
-----
resize-observer-polyfill-deprecated",["resize-observer-polyfill-1.5.1"],(function(a,b,c,d,e,f){e.exports=b("resize-observer-polyfill-1.5.1")()}),null);
-----
resize-observer-polyfill",["resize-observer-polyfill-1.5.1"],(function(a,b,c,d,e,f){e.exports=b("resize-observer-polyfill-1.5.1")()}),null); /** * License: https://www.facebook.com/legal/license/t3hOLs8wlXy/ */
-----
resize-observer-polyfill-1.5.1",[],(function(a,b,c,d,e,f){"use strict";var g={},h={exports:g},i;function j(){(function(b,c){typeof g==="object"&&typeof h!=="undefined"?h.exports=c():typeof i==="function"&&i.amd?i(c):b.ResizeObserver=c()})(this,function(){var b=function(){if(typeof Map!=="undefined")return Map;function a(a,b){var c=-1;a.some(function(d,a){if(d[0]===b){c=a;return!0}return!1});return c}return function(){function b(){this.__entries__=[]}Object.defineProperty(b.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0});b.prototype.get=function(b){b=a(this.__entries__,b);b=this.__entries__[b];return b&&b[1]};b.prototype.set=function(c,d){var b=a(this.__entries__,c);~b?this.__entries__[b][1]=d:this.__entries__.push([c,d])};b.prototype["delete"]=function(b){var c=this.__entries__;b=a(c,b);~b&&c.splice(b,1)};b.prototype.has=function(b){return!!~a(this.__entries__,b)};b.prototype.clear=function(){this.__entries__.splice(0)};b.prototype.forEach=function(a,b){b===void 0&&(b=null);for(var c=0,d=this.__entries__;c0};a.prototype.connect_=function(){if(!c||this.connected_)return;document.addEventListener("transitionend",this.onTransitionEnd_);window.addEventListener("resize",this.refresh);j?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0);this.connected_=!0};a.prototype.disconnect_=function(){if(!c||!this.connected_)return;document.removeEventListener("transitionend",this.onTransitionEnd_);window.removeEventListener("resize",this.refresh);this.mutationsObserver_&&this.mutationsObserver_.disconnect();this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh);this.mutationsObserver_=null;this.mutationEventsAdded_=!1;this.connected_=!1};a.prototype.onTransitionEnd_=function(a){a=a.propertyName;var b=a===void 0?"":a;a=i.some(function(a){return!!~b.indexOf(a)});a&&this.refresh()};a.getInstance=function(){this.instance_||(this.instance_=new a());return this.instance_};a.instance_=null;return a}(),l=function(a,b){for(var c=0,d=Object.keys(b);c0};return a}(),B=typeof WeakMap!=="undefined"?new WeakMap():new b(),C=function(){function a(b){if(!(this instanceof a))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var c=k.getInstance(),d=new A(b,c,this);B.set(this,d)}return a}();["observe","unobserve","disconnect"].forEach(function(a){C.prototype[a]=function(){var b;return(b=B.get(this))[a].apply(b,arguments)}});var D=function(){return typeof d.ResizeObserver!=="undefined"?d.ResizeObserver:C}();return D})}var k=!1;function l(){k||(k=!0,j());return h.exports}function b(a){switch(a){case void 0:return l()}}e.exports=b}),null);
-----
-----
resize-observer-polyfill-deprecated",["resize-observer-polyfill-1.5.1"],(function(a,b,c,d,e,f){e.exports=b("resize-observer-polyfill-1.5.1")()}),null);
-----
react-grid-layout-1.4.2",["react-0.0.0","fast-equals-4.0.3","clsx-2.0.0","prop-types-15.8.1","react-draggable-4.4.6","react-resizable-3.0.5","resize-observer-polyfill-1.5.1"],(function $module_react_grid_layout_1_4_2(global,require,requireDynamic,requireLazy,module,exports){ "use strict"; var require$$1$2 = require("react-0.0.0"); var require$$1$1 = require("fast-equals-4.0.3"); var require$$8 = require("clsx-2.0.0"); var require$$2$1 = require("prop-types-15.8.1"); var require$$3$2 = require("react-draggable-4.4.6"); var require$$4$1 = require("react-resizable-3.0.5"); var require$$3$3 = require("resize-observer-polyfill-1.5.1"); var exports$a = {}; var module$a = { exports: exports$a }; function TROMPLE_MAIN$9() { // this file was prevaled module$a.exports = function fastRGLPropsEqual(a, b, isEqualImpl) { if (a === b) return true; return a.className === b.className && isEqualImpl(a.style, b.style) && a.width === b.width && a.autoSize === b.autoSize && a.cols === b.cols && a.draggableCancel === b.draggableCancel && a.draggableHandle === b.draggableHandle && isEqualImpl(a.verticalCompact, b.verticalCompact) && isEqualImpl(a.compactType, b.compactType) && isEqualImpl(a.layout, b.layout) && isEqualImpl(a.margin, b.margin) && isEqualImpl(a.containerPadding, b.containerPadding) && a.rowHeight === b.rowHeight && a.maxRows === b.maxRows && a.isBounded === b.isBounded && a.isDraggable === b.isDraggable && a.isResizable === b.isResizable && a.allowOverlap === b.allowOverlap && a.preventCollision === b.preventCollision && a.useCSSTransforms === b.useCSSTransforms && a.transformScale === b.transformScale && a.isDroppable === b.isDroppable && isEqualImpl(a.resizeHandles, b.resizeHandles) && isEqualImpl(a.resizeHandle, b.resizeHandle) && a.onLayoutChange === b.onLayoutChange && a.onDragStart === b.onDragStart && a.onDrag === b.onDrag && a.onDragStop === b.onDragStop && a.onResizeStart === b.onResizeStart && a.onResize === b.onResize && a.onResizeStop === b.onResizeStop && a.onDrop === b.onDrop && isEqualImpl(a.droppingItem, b.droppingItem) && isEqualImpl(a.innerRef, b.innerRef); }; } var TROMPLE_HAS_RAN$9 = false; function require$$3$1 () { if (!TROMPLE_HAS_RAN$9) { TROMPLE_HAS_RAN$9 = true; TROMPLE_MAIN$9(); } return module$a.exports; } var exports$9 = {}; var module$9 = { exports: exports$9 }; function TROMPLE_MAIN$8() { Object.defineProperty(exports$9, "__esModule", { value: true }); exports$9.bottom = bottom; exports$9.childrenEqual = childrenEqual; exports$9.cloneLayout = cloneLayout; exports$9.cloneLayoutItem = cloneLayoutItem; exports$9.collides = collides; exports$9.compact = compact; exports$9.compactItem = compactItem; exports$9.compactType = compactType; exports$9.correctBounds = correctBounds; exports$9.fastPositionEqual = fastPositionEqual; exports$9.fastRGLPropsEqual = void 0; exports$9.getAllCollisions = getAllCollisions; exports$9.getFirstCollision = getFirstCollision; exports$9.getLayoutItem = getLayoutItem; exports$9.getStatics = getStatics; exports$9.modifyLayout = modifyLayout; exports$9.moveElement = moveElement; exports$9.moveElementAwayFromCollision = moveElementAwayFromCollision; exports$9.noop = void 0; exports$9.perc = perc; exports$9.resizeItemInDirection = resizeItemInDirection; exports$9.setTopLeft = setTopLeft; exports$9.setTransform = setTransform; exports$9.sortLayoutItems = sortLayoutItems; exports$9.sortLayoutItemsByColRow = sortLayoutItemsByColRow; exports$9.sortLayoutItemsByRowCol = sortLayoutItemsByRowCol; exports$9.synchronizeLayoutWithChildren = synchronizeLayoutWithChildren; exports$9.validateLayout = validateLayout; exports$9.withLayoutItem = withLayoutItem; var _fastEquals = require$$1$1(); var _react = _interopRequireDefault(require$$1$2()); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } /** * Return the bottom coordinate of the layout. * * @param {Array} layout Layout array. * @return {Number} Bottom coordinate. */ function bottom(layout /*: Layout*/) /*: number*/{ let max = 0, bottomY; for (let i = 0, len = layout.length; i < len; i++) { bottomY = layout[i].y + layout[i].h; if (bottomY > max) max = bottomY; } return max; } function cloneLayout(layout /*: Layout*/) /*: Layout*/{ const newLayout = Array(layout.length); for (let i = 0, len = layout.length; i < len; i++) { newLayout[i] = cloneLayoutItem(layout[i]); } return newLayout; } // Modify a layoutItem inside a layout. Returns a new Layout, // does not mutate. Carries over all other LayoutItems unmodified. function modifyLayout(layout /*: Layout*/, layoutItem /*: LayoutItem*/) /*: Layout*/{ const newLayout = Array(layout.length); for (let i = 0, len = layout.length; i < len; i++) { if (layoutItem.i === layout[i].i) { newLayout[i] = layoutItem; } else { newLayout[i] = layout[i]; } } return newLayout; } // Function to be called to modify a layout item. // Does defensive clones to ensure the layout is not modified. function withLayoutItem(layout /*: Layout*/, itemKey /*: string*/, cb /*: LayoutItem => LayoutItem*/) /*: [Layout, ?LayoutItem]*/{ let item = getLayoutItem(layout, itemKey); if (!item) return [layout, null]; item = cb(cloneLayoutItem(item)); // defensive clone then modify // FIXME could do this faster if we already knew the index layout = modifyLayout(layout, item); return [layout, item]; } // Fast path to cloning, since this is monomorphic function cloneLayoutItem(layoutItem /*: LayoutItem*/) /*: 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), // These can be null/undefined isDraggable: layoutItem.isDraggable, isResizable: layoutItem.isResizable, resizeHandles: layoutItem.resizeHandles, isBounded: layoutItem.isBounded }; } /** * Comparing React `children` is a bit difficult. This is a good way to compare them. * This will catch differences in keys, order, and length. */ function childrenEqual(a /*: ReactChildren*/, b /*: ReactChildren*/) /*: boolean*/{ return (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c === null || c === void 0 ? void 0 : c.key), _react.default.Children.map(b, c => c === null || c === void 0 ? void 0 : c.key)) && (0, _fastEquals.deepEqual)(_react.default.Children.map(a, c => c === null || c === void 0 ? void 0 : c.props["data-grid"]), _react.default.Children.map(b, c => c === null || c === void 0 ? void 0 : c.props["data-grid"])); } /** * See `fastRGLPropsEqual.js`. * We want this to run as fast as possible - it is called often - and to be * resilient to new props that we add. So rather than call lodash.isEqual, * which isn"t suited to comparing props very well, we use this specialized * function in conjunction with preval to generate the fastest possible comparison * function, tuned for exactly our props. */ /*:: type FastRGLPropsEqual = (Object, Object, Function) => boolean;*/ const fastRGLPropsEqual /*: FastRGLPropsEqual*/ = require$$3$1(); // Like the above, but a lot simpler. exports$9.fastRGLPropsEqual = fastRGLPropsEqual; function fastPositionEqual(a /*: Position*/, b /*: Position*/) /*: boolean*/{ return a.left === b.left && a.top === b.top && a.width === b.width && a.height === b.height; } /** * Given two layoutitems, check if they collide. */ function collides(l1 /*: LayoutItem*/, l2 /*: LayoutItem*/) /*: boolean*/{ if (l1.i === l2.i) return false; // same element if (l1.x + l1.w <= l2.x) return false; // l1 is left of l2 if (l1.x >= l2.x + l2.w) return false; // l1 is right of l2 if (l1.y + l1.h <= l2.y) return false; // l1 is above l2 if (l1.y >= l2.y + l2.h) return false; // l1 is below l2 return true; // boxes overlap } /** * Given a layout, compact it. This involves going down each y coordinate and removing gaps * between items. * * Does not modify layout items (clones). Creates a new layout array. * * @param {Array} layout Layout. * @param {Boolean} verticalCompact Whether or not to compact the layout * vertically. * @param {Boolean} allowOverlap When `true`, allows overlapping grid items. * @return {Array} Compacted Layout. */ function compact(layout /*: Layout*/, compactType /*: CompactType*/, cols /*: number*/, allowOverlap /*: ?boolean*/) /*: Layout*/{ // Statics go in the compareWith array right away so items flow around them. const compareWith = getStatics(layout); // We go through the items by row and column. const sorted = sortLayoutItems(layout, compactType); // Holding for new items. const out = Array(layout.length); for (let i = 0, len = sorted.length; i < len; i++) { let l = cloneLayoutItem(sorted[i]); // Don"t move static elements if (!l.static) { l = compactItem(compareWith, l, compactType, cols, sorted, allowOverlap); // Add to comparison array. We only collide with items before this one. // Statics are already in this array. compareWith.push(l); } // Add to output array to make sure they still come out in the right order. out[layout.indexOf(sorted[i])] = l; // Clear moved flag, if it exists. l.moved = false; } return out; } const 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 /*: Layout*/, item /*: LayoutItem*/, moveToCoord /*: number*/, axis /*: "x" | "y"*/) { const sizeProp = heightWidth[axis]; item[axis] += 1; const itemIndex = layout.map(layoutItem => { return layoutItem.i; }).indexOf(item.i); // Go through each item we collide with. for (let i = itemIndex + 1; i < layout.length; i++) { const otherItem = layout[i]; // Ignore static items if (otherItem.static) continue; // Optimization: we can break early if we know we"re past this el // We can do this b/c it"s a sorted layout if (otherItem.y > item.y + item.h) break; if (collides(item, otherItem)) { resolveCompactionCollision(layout, otherItem, moveToCoord + item[sizeProp], axis); } } item[axis] = moveToCoord; } /** * Compact an item in the layout. * * Modifies item. * */ function compactItem(compareWith /*: Layout*/, l /*: LayoutItem*/, compactType /*: CompactType*/, cols /*: number*/, fullLayout /*: Layout*/, allowOverlap /*: ?boolean*/) /*: LayoutItem*/{ const compactV = compactType === "vertical"; const 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} // This is here because the layout must be sorted in order to get the correct bottom `y`. l.y = Math.min(bottom(compareWith), l.y); // Move the element up as far as it can go without colliding. while (l.y > 0 && !getFirstCollision(compareWith, l)) { l.y--; } } else if (compactH) { // Move the element left as far as it can go without colliding. while (l.x > 0 && !getFirstCollision(compareWith, l)) { l.x--; } } // Move it down, and keep moving it down if it"s colliding. let collides; // Checking the compactType null value to avoid breaking the layout when overlapping is allowed. while ((collides = getFirstCollision(compareWith, l)) && !(compactType === null && allowOverlap)) { if (compactH) { resolveCompactionCollision(fullLayout, l, collides.x + collides.w, "x"); } else { 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) { l.x = cols - l.w; l.y++; // ALso move element as left as we can while (l.x > 0 && !getFirstCollision(compareWith, l)) { l.x--; } } } // Ensure that there are no negative positions l.y = Math.max(l.y, 0); l.x = Math.max(l.x, 0); return l; } /** * Given a layout, make sure all elements fit within its bounds. * * Modifies layout items. * * @param {Array} layout Layout array. * @param {Number} bounds Number of columns. */ function correctBounds(layout /*: Layout*/, bounds /*: { cols: number }*/) /*: Layout*/{ const collidesWith = getStatics(layout); for (let i = 0, len = layout.length; i < len; i++) { const l = layout[i]; // Overflows right if (l.x + l.w > bounds.cols) l.x = bounds.cols - l.w; // Overflows left if (l.x < 0) { l.x = 0; l.w = bounds.cols; } if (!l.static) collidesWith.push(l);else { // If this is static and collides with other statics, we must move it down. // We have to do something nicer than just letting them overlap. while (getFirstCollision(collidesWith, l)) { l.y++; } } } return layout; } /** * Get a layout item by ID. Used so we can override later on if necessary. * * @param {Array} layout Layout array. * @param {String} id ID * @return {LayoutItem} Item at ID. */ function getLayoutItem(layout /*: Layout*/, id /*: string*/) /*: ?LayoutItem*/{ for (let i = 0, len = layout.length; i < len; i++) { if (layout[i].i === id) return layout[i]; } } /** * Returns the first item this layout collides with. * It doesn"t appear to matter which order we approach this from, although * perhaps that is the wrong thing to do. * * @param {Object} layoutItem Layout item. * @return {Object|undefined} A colliding layout item, or undefined. */ function getFirstCollision(layout /*: Layout*/, layoutItem /*: LayoutItem*/) /*: ?LayoutItem*/{ for (let i = 0, len = layout.length; i < len; i++) { if (collides(layout[i], layoutItem)) return layout[i]; } } function getAllCollisions(layout /*: Layout*/, layoutItem /*: LayoutItem*/) /*: Array
-----
react-slick-0.26.1",["react-0.0.0","react-dom-0.0.0","lodash-debounce-4.0.8","classnames-2.2.6","resize-observer-polyfill-1.5.1","json2mq-0.2.0","enquire-js-2.1.6"],(function(a,b,c,d,e,f){"use strict";var g=b("react-0.0.0"),h=b("react-dom-0.0.0"),i=b("lodash-debounce-4.0.8"),j=b("classnames-2.2.6"),k=b("resize-observer-polyfill-1.5.1"),l=b("json2mq-0.2.0"),m=b("enquire-js-2.1.6"),n={},o={exports:n};function p(){Object.defineProperty(n,"__esModule",{value:!0});n["default"]=void 0;var a={animating:!1,autoplaying:null,currentDirection:0,currentLeft:null,currentSlide:0,direction:1,dragging:!1,edgeDragged:!1,initialized:!1,lazyLoadedList:[],listHeight:null,listWidth:null,scrolling:!1,slideCount:null,slideHeight:null,slideWidth:null,swipeLeft:null,swiped:!1,swiping:!1,touchObject:{startX:0,startY:0,curX:0,curY:0},trackStyle:{},trackWidth:0};a=a;n["default"]=a}var q=!1;function r(){q||(q=!0,p());return o.exports}var s={},t={exports:s};function u(){Object.defineProperty(s,"__esModule",{value:!0});s.canUseDOM=s.slidesOnLeft=s.slidesOnRight=s.siblingDirection=s.getTotalSlides=s.getPostClones=s.getPreClones=s.getTrackLeft=s.getTrackAnimateCSS=s.getTrackCSS=s.checkSpecKeys=s.getSlideCount=s.checkNavigable=s.getNavigableIndexes=s.swipeEnd=s.swipeMove=s.swipeStart=s.keyHandler=s.changeSlide=s.slideHandler=s.initializedState=s.extractObject=s.canGoNext=s.getSwipeDirection=s.getHeight=s.getWidth=s.lazySlidesOnRight=s.lazySlidesOnLeft=s.lazyEndIndex=s.lazyStartIndex=s.getRequiredLazySlides=s.getOnDemandLazySlides=void 0;var a=c(g()),b=c(h());function c(a){return a&&a.__esModule?a:{"default":a}}function d(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable}));c.push.apply(c,d)}return c}function e(a){for(var b=1;b
-----
resize-observer-polyfill-deprecated",["resize-observer-polyfill-1.5.1"],(function(a,b,c,d,e,f){e.exports=b("resize-observer-polyfill-1.5.1")()}),null);
-----
resize-observer-polyfill",["resize-observer-polyfill-1.5.1"],(function(a,b,c,d,e,f){e.exports=b("resize-observer-polyfill-1.5.1")()}),null); /** * License: https://www.facebook.com/legal/license/t3hOLs8wlXy/ */
-----
resize-observer-polyfill-1.5.1",[],(function(a,b,c,d,e,f){"use strict";var g={},h={exports:g},i;function j(){(function(b,c){typeof g==="object"&&typeof h!=="undefined"?h.exports=c():typeof i==="function"&&i.amd?i(c):b.ResizeObserver=c()})(this,function(){var b=function(){if(typeof Map!=="undefined")return Map;function a(a,b){var c=-1;a.some(function(d,a){if(d[0]===b){c=a;return!0}return!1});return c}return function(){function b(){this.__entries__=[]}Object.defineProperty(b.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0});b.prototype.get=function(b){b=a(this.__entries__,b);b=this.__entries__[b];return b&&b[1]};b.prototype.set=function(c,d){var b=a(this.__entries__,c);~b?this.__entries__[b][1]=d:this.__entries__.push([c,d])};b.prototype["delete"]=function(b){var c=this.__entries__;b=a(c,b);~b&&c.splice(b,1)};b.prototype.has=function(b){return!!~a(this.__entries__,b)};b.prototype.clear=function(){this.__entries__.splice(0)};b.prototype.forEach=function(a,b){b===void 0&&(b=null);for(var c=0,d=this.__entries__;c
-----