Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

react-grid-layout

Package Overview
Dependencies
Maintainers
1
Versions
105
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-grid-layout - npm Package Compare versions

Comparing version 0.8.0 to 0.8.1

build.sh
webpack-examples.config.js

103

build/GridItem.js

@@ -1,8 +0,8 @@

"use strict";
var React = require("react");
var cloneWithProps = require("react/lib/cloneWithProps");
var utils = require("./utils");
var Draggable = require("react-draggable");
var Resizable = require("react-resizable").Resizable;
var PureDeepRenderMixin = require("./mixins/PureDeepRenderMixin");
'use strict';
var React = require('react');
var cloneWithProps = require('react/lib/cloneWithProps');
var utils = require('./utils');
var Draggable = require('react-draggable');
var Resizable = require('react-resizable').Resizable;
var PureDeepRenderMixin = require('./mixins/PureDeepRenderMixin');

@@ -13,3 +13,4 @@ /**

var GridItem = React.createClass({
displayName: "GridItem",
displayName: 'GridItem',
mixins: [PureDeepRenderMixin],

@@ -31,17 +32,17 @@

// All optional
minW: function (props, propName, componentName) {
minW: function minW(props, propName, componentName) {
React.PropTypes.number.apply(this, arguments);
if (props.minW > props.w || props.minW > props.maxW) constraintError("minW", props);
if (props.minW > props.w || props.minW > props.maxW) constraintError('minW', props);
},
maxW: function (props, propName, componentName) {
maxW: function maxW(props, propName, componentName) {
React.PropTypes.number.apply(this, arguments);
if (props.maxW < props.w || props.maxW < props.minW) constraintError("maxW", props);
if (props.maxW < props.w || props.maxW < props.minW) constraintError('maxW', props);
},
minH: function (props, propName, componentName) {
minH: function minH(props, propName, componentName) {
React.PropTypes.number.apply(this, arguments);
if (props.minH > props.h || props.minH > props.maxH) constraintError("minH", props);
if (props.minH > props.h || props.minH > props.maxH) constraintError('minH', props);
},
maxH: function (props, propName, componentName) {
maxH: function maxH(props, propName, componentName) {
React.PropTypes.number.apply(this, arguments);
if (props.maxH < props.h || props.maxH < props.minH) constraintError("maxH", props);
if (props.maxH < props.h || props.maxH < props.minH) constraintError('maxH', props);
},

@@ -83,4 +84,4 @@

useCSSTransforms: true,
className: "",
cancel: "",
className: '',
cancel: '',
minH: 1,

@@ -96,3 +97,3 @@ minW: 1,

resizing: false,
className: ""
className: ''
};

@@ -131,2 +132,3 @@ },

var top = _ref.top;
left = left - this.props.margin[0];

@@ -149,5 +151,6 @@ top = top - this.props.margin[1];

*/
calcWH: function calcWH(_ref2) {
var height = _ref2.height;
var width = _ref2.width;
calcWH: function calcWH(_ref) {
var height = _ref.height;
var width = _ref.width;
width = width + this.props.margin[0];

@@ -174,7 +177,7 @@ height = height + this.props.margin[1];

moveOnStartChange: this.props.moveOnStartChange,
onStop: this.onDragHandler("onDragStop"),
onStart: this.onDragHandler("onDragStart"),
onDrag: this.onDragHandler("onDrag"),
onStop: this.onDragHandler('onDragStop'),
onStart: this.onDragHandler('onDragStart'),
onDrag: this.onDragHandler('onDrag'),
handle: this.props.handle,
cancel: ".react-resizable-handle " + this.props.cancel,
cancel: '.react-resizable-handle ' + this.props.cancel,
useCSSTransforms: this.props.useCSSTransforms

@@ -209,5 +212,5 @@ },

maxConstraints: maxConstraints,
onResizeStop: this.onResizeHandler("onResizeStop"),
onResizeStart: this.onResizeHandler("onResizeStart"),
onResize: this.onResizeHandler("onResize")
onResizeStop: this.onResizeHandler('onResizeStop'),
onResizeStart: this.onResizeHandler('onResizeStart'),
onResize: this.onResizeHandler('onResize')
},

@@ -220,5 +223,5 @@ child

* Wrapper around drag events to provide more useful data.
* All drag events call the function with the given handler name,
* All drag events call the function with the given handler name,
* with the signature (index, x, y).
*
*
* @param {String} handlerName Handler name to wrap.

@@ -229,7 +232,9 @@ * @return {Function} Handler function.

var me = this;
return function (e, _ref3) {
var element = _ref3.element;
var position = _ref3.position;
return function (e, _ref) {
var element = _ref.element;
var position = _ref.position;
if (!me.props[handlerName]) return;
// Get new XY
var _me$calcXY = me.calcXY(position);

@@ -240,3 +245,2 @@

// Cap x at numCols

@@ -251,5 +255,5 @@ x = Math.min(x, me.props.cols - me.props.w);

* Wrapper around drag events to provide more useful data.
* All drag events call the function with the given handler name,
* All drag events call the function with the given handler name,
* with the signature (index, x, y).
*
*
* @param {String} handlerName Handler name to wrap.

@@ -260,8 +264,10 @@ * @return {Function} Handler function.

var me = this;
return function (e, _ref4) {
var element = _ref4.element;
var size = _ref4.size;
return function (e, _ref) {
var element = _ref.element;
var size = _ref.size;
if (!me.props[handlerName]) return;
// Get new XY
var _me$calcWH = me.calcWH(size);

@@ -272,3 +278,2 @@

// Cap w at numCols

@@ -283,3 +288,3 @@ w = Math.min(w, me.props.cols - me.props.x);

me.setState({ resizing: handlerName === "onResizeStop" ? null : size });
me.setState({ resizing: handlerName === 'onResizeStop' ? null : size });

@@ -301,10 +306,10 @@ me.props[handlerName](me.props.i, w, h, { e: e, element: element, size: size });

// React with merge the classNames.
className: ["react-grid-item", this.props.className, this.state.resizing ? "resizing" : "", this.props.useCSSTransforms ? "cssTransforms" : ""].join(" "),
className: ['react-grid-item', this.props.className, this.state.resizing ? 'resizing' : '', this.props.useCSSTransforms ? 'cssTransforms' : ''].join(' '),
// We can set the width and height on the child, but unfortunately we can't set the position.
style: {
width: pos.width + "px",
height: pos.height + "px",
left: pos.left + "px",
top: pos.top + "px",
position: "absolute"
width: pos.width + 'px',
height: pos.height + 'px',
left: pos.left + 'px',
top: pos.top + 'px',
position: 'absolute'
}

@@ -350,5 +355,5 @@ });

delete props.children;
throw new Error(name + " overrides contraints on gridItem " + props.i + ". Full props: " + JSON.stringify(props));
throw new Error(name + ' overrides contraints on gridItem ' + props.i + '. Full props: ' + JSON.stringify(props));
}
module.exports = GridItem;

6

build/mixins/PureDeepRenderMixin.js

@@ -1,7 +0,7 @@

"use strict";
var deepEqual = require("deep-equal");
'use strict';
var deepEqual = require('deep-equal');
// Like PureRenderMixin, but with deep comparisons.
var PureDeepRenderMixin = {
shouldComponentUpdate: function (nextProps, nextState) {
shouldComponentUpdate: function shouldComponentUpdate(nextProps, nextState) {
return !deepEqual(this.props, nextProps) || !deepEqual(this.state, nextState);

@@ -8,0 +8,0 @@ }

14

build/mixins/WidthListeningMixin.js

@@ -1,3 +0,3 @@

"use strict";
var React = require("react");
'use strict';
var React = require('react');

@@ -18,3 +18,3 @@ /**

getDefaultProps: function () {
getDefaultProps: function getDefaultProps() {
return {

@@ -26,5 +26,5 @@ initialWidth: 1280,

componentDidMount: function () {
componentDidMount: function componentDidMount() {
if (this.props.listenToWindowResize) {
window.addEventListener("resize", this.onWindowResize);
window.addEventListener('resize', this.onWindowResize);
// This is intentional. Once to properly set the breakpoint and resize the elements,

@@ -38,3 +38,3 @@ // and again to compensate for any scrollbar that appeared because of the first step.

componentWillUnmount: function componentWillUnmount() {
window.removeEventListener("resize", this.onWindowResize);
window.removeEventListener('resize', this.onWindowResize);
},

@@ -45,3 +45,3 @@

*/
onWindowResize: function () {
onWindowResize: function onWindowResize() {
this.onWidthChange(this.getDOMNode().offsetWidth);

@@ -48,0 +48,0 @@ }

147

build/ReactGridLayout.js

@@ -1,19 +0,12 @@

"use strict";
var _objectWithoutProperties = function (obj, keys) {
var target = {};
'use strict';
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
var _objectWithoutProperties = function (obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; };
return target;
};
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require("react");
var GridItem = require("./GridItem");
var utils = require("./utils");
var PureDeepRenderMixin = require("./mixins/PureDeepRenderMixin");
var WidthListeningMixin = require("./mixins/WidthListeningMixin");
var React = require('react');
var GridItem = require('./GridItem');
var utils = require('./utils');
var PureDeepRenderMixin = require('./mixins/PureDeepRenderMixin');
var WidthListeningMixin = require('./mixins/WidthListeningMixin');

@@ -24,3 +17,4 @@ /**

var ReactGridLayout = React.createClass({
displayName: "ReactGridLayout",
displayName: 'ReactGridLayout',
mixins: [PureDeepRenderMixin, WidthListeningMixin],

@@ -45,12 +39,13 @@

// {x: Number, y: Number, w: Number, h: Number}
layout: function (props, propName, componentName) {
layout: function layout(props, propName, componentName) {
var layout = props.layout;
// I hope you're setting the _grid property on the grid items
if (layout === undefined) return;
utils.validateLayout(layout, "layout");
if (layout === undefined) {
return;
}utils.validateLayout(layout, 'layout');
},
layouts: function (props, propName, componentName) {
layouts: function layouts(props, propName, componentName) {
if (props.layouts) {
throw new Error("ReactGridLayout does not use `layouts`: Use ReactGridLayout.Responsive.");
throw new Error('ReactGridLayout does not use `layouts`: Use ReactGridLayout.Responsive.');
}

@@ -99,3 +94,3 @@ },

// Children must not have duplicate keys.
children: function (props, propName, componentName) {
children: function children(props, propName, componentName) {
React.PropTypes.node.apply(this, arguments);

@@ -108,3 +103,3 @@ var children = props[propName];

if (keys[child.key]) {
throw new Error("Duplicate child key found! This will cause problems in ReactGridLayout.");
throw new Error('Duplicate child key found! This will cause problems in ReactGridLayout.');
}

@@ -126,9 +121,9 @@ keys[child.key] = true;

useCSSTransforms: true,
onLayoutChange: function () {},
onDragStart: function () {},
onDrag: function () {},
onDragStop: function () {},
onResizeStart: function () {},
onResize: function () {},
onResizeStop: function () {}
onLayoutChange: function onLayoutChange() {},
onDragStart: function onDragStart() {},
onDrag: function onDrag() {},
onDragStop: function onDragStop() {},
onResizeStart: function onResizeStart() {},
onResize: function onResize() {},
onResizeStop: function onResizeStop() {}
};

@@ -139,5 +134,6 @@ },

return {
activeDrag: null,
isMounted: false,
layout: utils.synchronizeLayoutWithChildren(this.props.layout, this.props.children, this.props.cols),
width: this.props.initialWidth,
activeDrag: null
width: this.props.initialWidth
};

@@ -150,2 +146,3 @@ },

this.props.onLayoutChange(this.state.layout);
this.setState({ isMounted: true });
},

@@ -186,4 +183,5 @@

containerHeight: function containerHeight() {
if (!this.props.autoSize) return;
return utils.bottom(this.state.layout) * this.props.rowHeight + this.props.margin[1] + "px";
if (!this.props.autoSize) {
return;
}return utils.bottom(this.state.layout) * this.props.rowHeight + this.props.margin[1] + 'px';
},

@@ -211,2 +209,3 @@

var position = _ref.position;
var layout = this.state.layout;

@@ -225,8 +224,9 @@ var l = utils.getLayoutItem(layout, i);

* @param {Element} element The current dragging DOM element
* @param {Object} position Drag information
* @param {Object} position Drag information
*/
onDrag: function onDrag(i, x, y, _ref2) {
var e = _ref2.e;
var element = _ref2.element;
var position = _ref2.position;
onDrag: function onDrag(i, x, y, _ref) {
var e = _ref.e;
var element = _ref.element;
var position = _ref.position;
var layout = this.state.layout;

@@ -247,3 +247,2 @@ var l = utils.getLayoutItem(layout, i);

this.setState({

@@ -265,6 +264,7 @@ layout: utils.compact(layout),

*/
onDragStop: function onDragStop(i, x, y, _ref3) {
var e = _ref3.e;
var element = _ref3.element;
var position = _ref3.position;
onDragStop: function onDragStop(i, x, y, _ref) {
var e = _ref.e;
var element = _ref.element;
var position = _ref.position;
var layout = this.state.layout;

@@ -283,6 +283,7 @@ var l = utils.getLayoutItem(layout, i);

onResizeStart: function onResizeStart(i, w, h, _ref4) {
var e = _ref4.e;
var element = _ref4.element;
var size = _ref4.size;
onResizeStart: function onResizeStart(i, w, h, _ref) {
var e = _ref.e;
var element = _ref.element;
var size = _ref.size;
var layout = this.state.layout;

@@ -295,6 +296,7 @@ var l = utils.getLayoutItem(layout, i);

onResize: function onResize(i, w, h, _ref5) {
var e = _ref5.e;
var element = _ref5.element;
var size = _ref5.size;
onResize: function onResize(i, w, h, _ref) {
var e = _ref.e;
var element = _ref.element;
var size = _ref.size;
var layout = this.state.layout;

@@ -319,6 +321,7 @@ var l = utils.getLayoutItem(layout, i);

onResizeStop: function onResizeStop(i, x, y, _ref6) {
var e = _ref6.e;
var element = _ref6.element;
var size = _ref6.size;
onResizeStop: function onResizeStop(i, x, y, _ref) {
var e = _ref.e;
var element = _ref.element;
var size = _ref.size;
var layout = this.state.layout;

@@ -338,5 +341,5 @@ var l = utils.getLayoutItem(layout, i);

placeholder: function placeholder() {
if (!this.state.activeDrag) return "";
// {...this.state.activeDrag} is pretty slow, actually
if (!this.state.activeDrag) {
return '';
} // {...this.state.activeDrag} is pretty slow, actually
return React.createElement(

@@ -351,3 +354,3 @@ GridItem,

isPlaceholder: true,
className: "react-grid-placeholder",
className: 'react-grid-placeholder',
containerWidth: this.state.width,

@@ -361,3 +364,3 @@ cols: this.props.cols,

},
React.createElement("div", null)
React.createElement('div', null)
);

@@ -383,8 +386,8 @@ },

var draggable, resizable;
if (l["static"] || this.props.isDraggable === false) draggable = false;
if (l["static"] || this.props.isResizable === false) resizable = false;
if (l['static'] || this.props.isDraggable === false) draggable = false;
if (l['static'] || this.props.isResizable === false) resizable = false;
return React.createElement(
GridItem,
React.__spread({
_extends({
containerWidth: this.state.width,

@@ -405,4 +408,4 @@ cols: this.props.cols,

isResizable: resizable,
useCSSTransforms: this.props.useCSSTransforms && this.isMounted(),
usePercentages: !this.isMounted()
useCSSTransforms: this.props.useCSSTransforms && this.state.isMounted,
usePercentages: !this.state.isMounted
}, l),

@@ -415,10 +418,12 @@ child

// Calculate classname
var className = this.props.className;
var props = _objectWithoutProperties(this.props, ["className"]);
var _props = this.props;
var className = _props.className;
className = "react-grid-layout " + (className || "");
var props = _objectWithoutProperties(_props, ['className']);
className = 'react-grid-layout ' + (className || '');
return React.createElement(
"div",
React.__spread({}, props, { className: className, style: { height: this.containerHeight() } }),
'div',
_extends({}, props, { className: className, style: { height: this.containerHeight() } }),
React.Children.map(this.props.children, this.processGridItem),

@@ -425,0 +430,0 @@ this.placeholder()

50

build/ResponsiveReactGridLayout.js

@@ -1,20 +0,13 @@

"use strict";
var _objectWithoutProperties = function (obj, keys) {
var target = {};
'use strict';
for (var i in obj) {
if (keys.indexOf(i) >= 0) continue;
if (!Object.prototype.hasOwnProperty.call(obj, i)) continue;
target[i] = obj[i];
}
var _objectWithoutProperties = function (obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; };
return target;
};
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var React = require("react");
var utils = require("./utils");
var responsiveUtils = require("./responsiveUtils");
var PureDeepRenderMixin = require("./mixins/PureDeepRenderMixin");
var WidthListeningMixin = require("./mixins/WidthListeningMixin");
var ReactGridLayout = require("./ReactGridLayout");
var React = require('react');
var utils = require('./utils');
var responsiveUtils = require('./responsiveUtils');
var PureDeepRenderMixin = require('./mixins/PureDeepRenderMixin');
var WidthListeningMixin = require('./mixins/WidthListeningMixin');
var ReactGridLayout = require('./ReactGridLayout');

@@ -25,3 +18,4 @@ /**

var ResponsiveReactGridLayout = React.createClass({
displayName: "ResponsiveReactGridLayout",
displayName: 'ResponsiveReactGridLayout',
mixins: [PureDeepRenderMixin, WidthListeningMixin],

@@ -46,3 +40,3 @@

// e.g. {lg: Layout, md: Layout, ...}
layouts: function (props, propName, componentName) {
layouts: function layouts(props, propName, componentName) {
React.PropTypes.object.isRequired.apply(this, arguments);

@@ -52,3 +46,3 @@

Object.keys(layouts).map(function (k) {
utils.validateLayout(layouts[k], "layouts." + k);
utils.validateLayout(layouts[k], 'layouts.' + k);
});

@@ -74,4 +68,4 @@ },

layouts: {},
onBreakpointChange: function () {},
onLayoutChange: function () {}
onBreakpointChange: function onBreakpointChange() {},
onLayoutChange: function onLayoutChange() {}
};

@@ -143,2 +137,3 @@ },

if (newState.cols !== this.state.cols) {
// Store the current layout

@@ -163,14 +158,15 @@ newState.layouts = this.state.layouts;

render: function render() {
// Don't pass responsive props to RGL.
/*jshint unused:false*/
var layouts = this.props.layouts;
var onBreakpointChange = this.props.onBreakpointChange;
var breakpoints = this.props.breakpoints;
var props = _objectWithoutProperties(this.props, ["layouts", "onBreakpointChange", "breakpoints"]);
var _props = this.props;
var layouts = _props.layouts;
var onBreakpointChange = _props.onBreakpointChange;
var breakpoints = _props.breakpoints;
var props = _objectWithoutProperties(_props, ['layouts', 'onBreakpointChange', 'breakpoints']);
return React.createElement(
ReactGridLayout,
React.__spread({}, props, {
_extends({}, props, {
layout: this.state.layout,

@@ -177,0 +173,0 @@ cols: this.state.cols,

21

build/responsiveUtils.js

@@ -1,4 +0,4 @@

"use strict";
'use strict';
var utils = require("./utils");
var utils = require('./utils');

@@ -9,3 +9,3 @@ var responsiveUtils = module.exports = {

* 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, ...})

@@ -25,3 +25,2 @@ * @param {Number} width Screen width.

/**

@@ -35,3 +34,3 @@ * Given a breakpoint, get the # of cols set for it.

if (!cols[breakpoint]) {
throw new Error("ResponsiveReactGridLayout: `cols` entry for breakpoint " + breakpoint + " is missing!");
throw new Error('ResponsiveReactGridLayout: `cols` entry for breakpoint ' + breakpoint + ' is missing!');
}

@@ -43,5 +42,5 @@ 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 {Array} layouts Existing layouts.

@@ -56,4 +55,5 @@ * @param {Array} breakpoints All breakpoints.

// If it already exists, just return it.
if (layouts[breakpoint]) return layouts[breakpoint];
// Find or generate the next layout
if (layouts[breakpoint]) {
return layouts[breakpoint];
} // Find or generate the next layout
var layout = layouts[lastBreakpoint];

@@ -73,7 +73,6 @@ var breakpointsSorted = responsiveUtils.sortBreakpoints(breakpoints);

/**
* 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.

@@ -80,0 +79,0 @@ * @return {Array} Sorted breakpoints.

111

build/utils.js

@@ -1,4 +0,4 @@

"use strict";
'use strict';
var assign = require("object-assign");
var assign = require('object-assign');

@@ -9,3 +9,3 @@ var utils = module.exports = {

* Return the bottom coordinate of the layout.
*
*
* @param {Array} layout Layout array.

@@ -35,3 +35,3 @@ * @return {Number} Bottom coordinate.

* Given two layouts, check if they collide.
*
*
* @param {Object} l1 Layout object.

@@ -42,7 +42,17 @@ * @param {Object} l2 Layout object.

collides: function collides(l1, l2) {
if (l1 === l2) 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
if (l1 === l2) {
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

@@ -54,3 +64,3 @@ },

* between items.
*
*
* @param {Array} layout Layout.

@@ -70,3 +80,3 @@ * @return {Array} Compacted Layout.

// Don't move static elements
if (!l["static"]) {
if (!l['static']) {
l = utils.compactItem(compareWith, l);

@@ -105,3 +115,3 @@

* Given a layout, make sure all elements fit within its bounds.
*
*
* @param {Array} layout Layout array.

@@ -122,3 +132,3 @@ * @param {Number} bounds Number of columns.

}
if (!l["static"]) collidesWith.push(l);else {
if (!l['static']) collidesWith.push(l);else {
// If this is static and collides with other statics, we must move it down.

@@ -142,5 +152,7 @@ // We have to do something nicer than just letting them overlap.

getLayoutItem: function getLayoutItem(layout, id) {
id = "" + id;
id = '' + id;
for (var i = 0, len = layout.length; i < len; i++) {
if ("" + layout[i].i === id) return layout[i];
if ('' + layout[i].i === id) {
return layout[i];
}
}

@@ -153,3 +165,3 @@ },

* perhaps that is the wrong thing to do.
*
*
* @param {Object} layoutItem Layout item.

@@ -160,3 +172,5 @@ * @return {Object|undefined} A colliding layout item, or undefined.

for (var i = 0, len = layout.length; i < len; i++) {
if (utils.collides(layout[i], layoutItem)) return layout[i];
if (utils.collides(layout[i], layoutItem)) {
return layout[i];
}
}

@@ -181,3 +195,3 @@ },

for (var i = 0, len = layout.length; i < len; i++) {
if (layout[i]["static"]) out.push(layout[i]);
if (layout[i]['static']) out.push(layout[i]);
}

@@ -189,3 +203,3 @@ return out;

* Move an element. Responsible for doing cascading movements of other elements.
*
*
* @param {Array} layout Full layout to modify.

@@ -199,8 +213,8 @@ * @param {LayoutItem} l element to move.

moveElement: function moveElement(layout, l, x, y, isUserAction) {
if (l["static"]) return layout;
// Short-circuit if nothing to do.
if (l.y === y && l.x === x) return layout;
var movingUp = l.y > y;
if (l['static']) {
return layout;
} // Short-circuit if nothing to do.
if (l.y === y && l.x === x) {
return layout;
}var movingUp = l.y > y;
// This is quite a bit faster than extending the object

@@ -231,3 +245,3 @@ if (x !== undefined) l.x = x;

// Don't move static items - we have to move *this* element away
if (collision["static"]) {
if (collision['static']) {
layout = utils.moveElementAwayFromCollision(layout, collision, l, isUserAction);

@@ -245,3 +259,3 @@ } else {

* We attempt to move it up if there's room, otherwise it goes below.
*
*
* @param {Array} layout Full layout to modify.

@@ -254,2 +268,3 @@ * @param {LayoutItem} collidesWith Layout item we're colliding with.

moveElementAwayFromCollision: function moveElementAwayFromCollision(layout, collidesWith, itemToMove, isUserAction) {
// If there is enough space above the collision to put this element, move it there.

@@ -278,3 +293,3 @@ // We only do this on the main collision as this can get funky in cascades and cause

* Helper to convert a number to a percentage string.
*
*
* @param {Number} num Any number

@@ -284,3 +299,3 @@ * @return {String} That number as a percentage.

perc: function perc(num) {
return num * 100 + "%";
return num * 100 + '%';
},

@@ -290,9 +305,9 @@

// Replace unitless items with px
var x = ("" + coords[0]).replace(/(\d)$/, "$1px");
var y = ("" + coords[1]).replace(/(\d)$/, "$1px");
style.transform = "translate(" + x + "," + y + ")";
style.WebkitTransform = "translate(" + x + "," + y + ")";
style.MozTransform = "translate(" + x + "," + y + ")";
style.msTransform = "translate(" + x + "," + y + ")";
style.OTransform = "translate(" + x + "," + y + ")";
var x = ('' + coords[0]).replace(/(\d)$/, '$1px');
var y = ('' + coords[1]).replace(/(\d)$/, '$1px');
style.transform = 'translate(' + x + ',' + y + ')';
style.WebkitTransform = 'translate(' + x + ',' + y + ')';
style.MozTransform = 'translate(' + x + ',' + y + ')';
style.msTransform = 'translate(' + x + ',' + y + ')';
style.OTransform = 'translate(' + x + ',' + y + ')';
return style;

@@ -303,3 +318,3 @@ },

* Get layout items sorted from top left to right and down.
*
*
* @return {Array} Array of layout objects.

@@ -320,3 +335,3 @@ * @return {Array} Layout, sorted static items first.

* Missing entries will be added, extraneous ones will be truncated.
*
*
* @param {Array} initialLayout Layout passed in through props.

@@ -338,3 +353,3 @@ * @param {String} breakpoint Current responsive breakpoint.

// Ensure 'i' is always a string
exists.i = "" + exists.i;
exists.i = '' + exists.i;
layout.push(exists);

@@ -346,3 +361,3 @@ continue;

if (g) {
utils.validateLayout([g], "ReactGridLayout.child");
utils.validateLayout([g], 'ReactGridLayout.child');
// Validated; add it to the layout. Bottom 'y' possible is the bottom of the layout.

@@ -366,3 +381,3 @@ // This allows you to do nice stuff like specify {y: Infinity}

* Validate a layout. Throws errors.
*
*
* @param {Array} layout Array of layout items.

@@ -373,13 +388,13 @@ * @param {String} [contextName] Context name for errors.

validateLayout: function validateLayout(layout, contextName) {
contextName = contextName || "Layout";
var subProps = ["x", "y", "w", "h"];
if (!Array.isArray(layout)) throw new Error(contextName + " must be an array!");
contextName = contextName || 'Layout';
var subProps = ['x', 'y', 'w', 'h'];
if (!Array.isArray(layout)) throw new Error(contextName + ' must be an array!');
for (var i = 0, len = layout.length; i < len; i++) {
for (var j = 0; j < subProps.length; j++) {
if (typeof layout[i][subProps[j]] !== "number") {
throw new Error("ReactGridLayout: " + contextName + "[" + i + "]." + subProps[j] + " must be a Number!");
if (typeof layout[i][subProps[j]] !== 'number') {
throw new Error('ReactGridLayout: ' + contextName + '[' + i + '].' + subProps[j] + ' must be a Number!');
}
}
if (layout[i]["static"] !== undefined && typeof layout[i]["static"] !== "boolean") {
throw new Error("ReactGridLayout: " + contextName + "[" + i + "].static must be a Boolean!");
if (layout[i]['static'] !== undefined && typeof layout[i]['static'] !== 'boolean') {
throw new Error('ReactGridLayout: ' + contextName + '[' + i + '].static must be a Boolean!');
}

@@ -386,0 +401,0 @@ }

8

CHANGELOG.md

@@ -0,1 +1,9 @@

0.8.1
-----
- Fixed React 0.13 warning about `isMounted()`.
- Update to babel 5.
- Added browser build for use with a `<script>` tag or in RequireJS builds.
- Pinned react-draggable version in anticipation of React 0.13 update.
0.8.0

@@ -2,0 +10,0 @@ -----

46

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

@@ -9,6 +9,6 @@ "main": "index.js",

"test": "echo \"Error: no test specified\" && exit 1",
"build": "make js",
"build-example": "webpack",
"check-build": "make check-build",
"dev": "echo 'Open http://localhost:4002'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base ."
"build": "bash build.sh",
"build-example": "webpack --config webpack-examples.config.js; node ./examples/generate.js",
"dev": "echo 'Open http://localhost:4002'; webpack-dev-server --config webpack-dev-server.config.js --hot --progress --colors --port 4002 --content-base .",
"prepublish": "npm run build"
},

@@ -36,22 +36,25 @@ "repository": {

"dependencies": {
"deep-equal": "^0.2.1",
"deep-equal": "^1.0.0",
"object-assign": "^2.0.0",
"react-draggable": "strml/react-draggable",
"react-resizable": "^0.2.1"
"react-resizable": "^0.2.3",
"react-draggable": "strml/react-draggable#v0.3.1"
},
"devDependencies": {
"6to5": "^2.2.0",
"6to5-loader": "^1.0.0",
"css-loader": "^0.9.0",
"ejs": "^1.0.0",
"babel": "^5.0.1",
"babel-core": "^5.0.1",
"babel-loader": "^5.0.0",
"babel-runtime": "^5.0.1",
"css-loader": "^0.9.1",
"ejs": "^2.3.1",
"exports-loader": "^0.6.2",
"imports-loader": "^0.6.3",
"jsxhint": "^0.9.0",
"lodash": "^2.4.1",
"precommit-hook": "^1.0.7",
"react": "^0.12.2",
"react-hot-loader": "^1.0.4",
"style-loader": "^0.8.2",
"webpack": "^1.4.14",
"webpack-dev-server": "^1.7.0"
"jsxhint": "^0.14.0",
"lodash": "^3.6.0",
"pre-commit": "^1.0.6",
"precommit-hook": "^2.0.1",
"react": "^0.13.1",
"react-hot-loader": "^1.2.4",
"style-loader": "^0.9.0",
"webpack": "^1.7.3",
"webpack-dev-server": "^1.8.0"
},

@@ -61,6 +64,5 @@ "publishConfig": {

},
"precommit": [
"check-build",
"pre-commit": [
"lint"
]
}

56

README.md

@@ -20,3 +20,3 @@ # React-Grid-Layout

React-Grid-Layout is a grid layout system much like [Packery](http://packery.metafizzy.co/) or
React-Grid-Layout is a grid layout system much like [Packery](http://packery.metafizzy.co/) or
[Gridster](http://gridster.net), for React.

@@ -58,3 +58,3 @@

* Separate layouts per responsive breakpoint
* Grid Items placed using CSS Transforms
* Grid Items placed using CSS Transforms
* Performance: [on](http://i.imgur.com/FTogpLp.jpg) / [off](http://i.imgur.com/gOveMm8.jpg), note paint (green) as % of time

@@ -71,5 +71,5 @@

// layout is an array of objects, see the demo
var layout = getOrGenerateLayout();
var layout = getOrGenerateLayout();
return (
<ReactGridLayout className="layout" layout={layout}
<ReactGridLayout className="layout" layout={layout}
cols={12} rowHeight={30}>

@@ -100,3 +100,7 @@ <div key={1}>1</div>

```
#### Usage without Browserify/Webpack
A module usable in a `<script>` tag is included [here](/dist/react-grid-layout.min.js). It uses a UMD shim and
excludes `React`, so it must be otherwise available in your application, either via RequireJS or on `window.React`.
#### Responsive Usage

@@ -113,4 +117,5 @@

return (
<ResponsiveReactGridLayout className="layout" layouts={layouts}
cols={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}>
<ResponsiveReactGridLayout className="layout" layouts={layouts}
breakpoints={{lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0}}
cols={{lg: 12, md: 10, sm: 6, xs: 4, xxs: 2}}>
<div key={1}>1</div>

@@ -126,4 +131,4 @@ <div key={2}>2</div>

When using `layouts`, it is best to supply as many breakpoints as possible, especially the largest one.
If the largest is provided, RGL will attempt to interpolate the rest.
When using `layouts`, it is best to supply as many breakpoints as possible, especially the largest one.
If the largest is provided, RGL will attempt to interpolate the rest.

@@ -139,3 +144,3 @@ For the time being, it is not possible to supply responsive mappings via the `_grid` property on individual

```javascript
//
//
// Basic props

@@ -172,3 +177,3 @@ //

// Rows have a static height, but you can change this based on breakpoints
// Rows have a static height, but you can change this based on breakpoints
// if you like.

@@ -182,12 +187,13 @@ rowHeight: React.PropTypes.number,

isResizable: React.PropTypes.bool,
// Uses CSS3 translate() instead of position top/left, about 6x faster paint performance
// Uses CSS3 translate() instead of position top/left.
// This makes about 6x faster paint performance
useCSSTransforms: React.PropTypes.bool,
// If false, you should supply width yourself. Good if you want to debounce resize events
// or reuse a handler from somewhere else.
// If false, you should supply width yourself. Good if you want to debounce
// resize events or reuse a handler from somewhere else.
listenToWindowResize: React.PropTypes.bool,
//
//
// Callbacks
//
//

@@ -198,4 +204,8 @@ // Callback so you can save the layout.

// Calls when drag starts. Callback is of the signature (layout, oldItem, newItem, placeholder, e).
// All callbacks below have the same signature. 'start' and 'stop' callbacks omit the 'placeholder'.
//
// All callbacks below have signature (layout, oldItem, newItem, placeholder, e).
// 'start' and 'stop' callbacks pass `undefined` for 'placeholder'.
//
// Calls when drag starts.
onDragStart: React.PropTypes.func,

@@ -206,3 +216,3 @@ // Calls on each drag movement.

onDragStop: React.PropTypes.func,
//Calls when resize starts.
// Calls when resize starts.
onResizeStart: React.PropTypes.func,

@@ -232,5 +242,5 @@ // Calls when resize movement happens.

//
//
// Callbacks
//
//

@@ -275,3 +285,3 @@ // Calls back with breakpoint and new # cols

maxH: React.PropTypes.number,
// If true, equal to `isDraggable: false, isResizable: false`.

@@ -283,3 +293,3 @@ static: React.PropTypes.bool,

isResizable: React.PropTypes.bool,
className: React.PropTypes.string,

@@ -299,3 +309,3 @@ // Selector for draggable handle

breakpoints: {lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0},
cols: 10,
cols: 10,
rowHeight: 150,

@@ -302,0 +312,0 @@ initialWidth: 1280,

6

webpack-dev-server.config.js

@@ -7,3 +7,3 @@ var webpack = require("webpack");

"webpack-dev-server/client?http://localhost:4002",
"webpack/hot/dev-server",
"webpack/hot/dev-server",
"./test/dev-hook.jsx",

@@ -18,3 +18,3 @@ ],

loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: '6to5-loader?experimental=true'},
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0'},
{test: /\.jsx$/, exclude: /node_modules/, loader: 'react-hot-loader'}

@@ -32,3 +32,3 @@ ]

debug: true,
devtool: "#inline-source-map",
devtool: 'eval',
publicPath: '/examples/',

@@ -35,0 +35,0 @@ resolve: {

42

webpack.config.js
'use strict';
var webpack = require('webpack');
var fs = require('fs');
// Builds example bundles
// Builds bundle usable <script>. Includes RGL and all deps, excluding React.
module.exports = {
context: __dirname,
entry: {
commons: ["lodash"],
'react-grid-layout': './index-dev.js'
},
output: {
path: __dirname + "/dist",
filename: "[name].bundle.js",
sourceMapFilename: "[file].map",
path: __dirname + "/dist",
filename: "[name].min.js",
libraryTarget: "umd",
library: "ReactGridLayout"
},
devtool: 'source-map',
externals: {
// React dep should be available as window.React
"react": "React"
},
module: {
loaders: [
{test: /\.jsx?$/, exclude: /node_modules/, loader: '6to5-loader?experimental=true&runtime=true'}
{test: /\.jsx?$/, exclude: /node_modules/, loader: 'babel-loader?stage=0'}
]

@@ -24,28 +29,13 @@ },

"process.env": {
NODE_ENV: JSON.stringify('development')
NODE_ENV: JSON.stringify('production')
}
}),
new webpack.optimize.CommonsChunkPlugin(
"commons", "commons.js"),
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.optimize.DedupePlugin(),
new webpack.ProvidePlugin({
to5Runtime: "imports?global=>{}!exports-loader?global.to5Runtime!6to5/runtime"
})
// Compress, but don't print warnings to console
new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}})
],
resolve: {
extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"],
alias: {'react-grid-layout': __dirname + '/index-dev.js'}
extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx"]
}
};
// Load all entry points
var files = fs.readdirSync(__dirname + '/test/examples').filter(function(element, index, array){
return element.match(/^.+\.jsx$/);
});
for(var idx in files){
var file = files[idx];
var module_name = file.replace(/\.jsx$/,'');
module.exports.entry[module_name] = './test/examples/' + file;
}
check-build.sh
Makefile
SocketSocket SOC 2 Logo

Product

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

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc