react-grid-layout
Advanced tools
react-grid-layout - npm Package Compare versions
Comparing version 0.8.1 to 0.8.2
@@ -18,2 +18,5 @@ 'use strict'; | ||
| propTypes: { | ||
| // Children must be only a single element | ||
| children: React.PropTypes.element, | ||
| // General grid attributes | ||
@@ -161,2 +164,38 @@ cols: React.PropTypes.number.isRequired, | ||
| /** | ||
| * 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: function createStyle(pos) { | ||
| var style = { | ||
| width: pos.width + 'px', | ||
| height: pos.height + 'px', | ||
| left: pos.left + 'px', | ||
| top: pos.top + 'px', | ||
| position: 'absolute' | ||
| }; | ||
| // This is used for server rendering. | ||
| if (this.props.usePercentages) { | ||
| pos.left = utils.perc(pos.left / this.props.containerWidth); | ||
| style.left = pos.left; | ||
| style.width = utils.perc(pos.width / this.props.containerWidth); | ||
| } | ||
| // CSS Transforms support | ||
| if (this.props.useCSSTransforms) { | ||
| utils.setTransform(style, [pos.left, pos.top]); | ||
| delete style.left; | ||
| delete style.top; | ||
| } | ||
| return style; | ||
| }, | ||
| /** | ||
| * Mix a Draggable instance into a child. | ||
@@ -290,3 +329,4 @@ * @param {Element} child Child element. | ||
| var child = cloneWithProps(React.Children.only(this.props.children), { | ||
| // Create the child element. We clone the existing element but modify its className and style. | ||
| var child = cloneWithProps(this.props.children, { | ||
| // Munge a classname. Use passed in classnames and resizing. | ||
@@ -296,32 +336,5 @@ // React with merge the classNames. | ||
| // 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' | ||
| } | ||
| style: this.createStyle(pos) | ||
| }); | ||
| // 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. | ||
| // This is used for server rendering. | ||
| if (this.props.usePercentages) { | ||
| pos.left = utils.perc(pos.left / p.containerWidth); | ||
| child.props.style.left = pos.left; | ||
| child.props.style.width = utils.perc(pos.width / p.containerWidth); | ||
| } | ||
| // CSS Transforms support | ||
| if (this.props.useCSSTransforms) { | ||
| utils.setTransform(child.props.style, [pos.left, pos.top]); | ||
| delete child.props.style.left; | ||
| delete child.props.style.top; | ||
| } | ||
| // Resizable support. This is usually on but the user can toggle it off. | ||
@@ -328,0 +341,0 @@ if (this.props.isResizable) { |
@@ -321,3 +321,6 @@ 'use strict'; | ||
| synchronizeLayoutWithChildren: function synchronizeLayoutWithChildren(initialLayout, children, cols) { | ||
| children = [].concat(children); // ensure 'children' is always an array | ||
| // ensure 'children' is always an array | ||
| if (!Array.isArray(children)) { | ||
| children = [children]; | ||
| } | ||
| initialLayout = initialLayout || []; | ||
@@ -324,0 +327,0 @@ |
@@ -0,1 +1,6 @@ | ||
| 0.8.2 | ||
| ----- | ||
| - Fix a crash when initializing with no children. | ||
| 0.8.1 | ||
@@ -2,0 +7,0 @@ ----- |
| { | ||
| "name": "react-grid-layout", | ||
| "version": "0.8.1", | ||
| "version": "0.8.2", | ||
| "description": "A draggable and resizable grid layout with responsive breakpoints, for React.", | ||
@@ -37,4 +37,4 @@ "main": "index.js", | ||
| "object-assign": "^2.0.0", | ||
| "react-resizable": "^0.2.3", | ||
| "react-draggable": "strml/react-draggable#v0.3.1" | ||
| "react-draggable": "strml/react-draggable#v0.3.1", | ||
| "react-resizable": "^0.3.2" | ||
| }, | ||
@@ -55,2 +55,3 @@ "devDependencies": { | ||
| "react": "^0.13.1", | ||
| "react-clonewithprops": "^1.0.1", | ||
| "react-hot-loader": "^1.2.4", | ||
@@ -57,0 +58,0 @@ "style-loader": "^0.9.0", |
@@ -19,3 +19,4 @@ 'use strict'; | ||
| // React dep should be available as window.React | ||
| "react": "React" | ||
| "react": "React", | ||
| "react/addons": "React" | ||
| }, | ||
@@ -35,2 +36,4 @@ module: { | ||
| new webpack.optimize.DedupePlugin(), | ||
| // See #40 - duplicated React modules don't play nice | ||
| new webpack.NormalModuleReplacementPlugin(/\/react\/lib\/cloneWithProps/, '../../react-clonewithprops/index.js'), | ||
| // Compress, but don't print warnings to console | ||
@@ -37,0 +40,0 @@ new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.96%
71425
- Lines of code
- increased by1.2%
1439
Worsened metrics
- Dev dependency count
- increased by5.88%
18
Dependency changes
+ Addedreact-resizable@0.3.3(transitive)
- Removedreact-resizable@0.2.3(transitive)
Updatedreact-resizable@^0.3.2