Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
react-grid-layout
Advanced tools
react-grid-layout - npm Package Compare versions
Comparing version 0.6.2 to 0.7.0
@@ -173,3 +173,3 @@ "use strict"; | ||
| cancel: ".react-resizable-handle " + this.props.cancel, | ||
| useCSSTransforms: this.props.useCSSTransforms && this.isMounted() | ||
| useCSSTransforms: this.props.useCSSTransforms | ||
| }, | ||
@@ -285,4 +285,5 @@ child | ||
| var child = cloneWithProps(React.Children.only(this.props.children), { | ||
| // Munge a classname. Use passed in classnames, child classnames, and resizing. | ||
| className: ["react-grid-item", this.props.children.props.className || "", this.props.className, this.state.resizing ? "resizing" : ""].join(" "), | ||
| // Munge a classname. Use passed in classnames and resizing. | ||
| // React with merge the classNames. | ||
| className: ["react-grid-item", this.props.className, this.state.resizing ? "resizing" : "", this.useCSSTransforms ? "cssTransforms" : ""].join(" "), | ||
| // We can set the width and height on the child, but unfortunately we can't set the position. | ||
@@ -298,6 +299,18 @@ style: { | ||
| // 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 | ||
| // No CSS Transforms on server rendering, b/c we can't do percentages with CSS Translate(), | ||
| // it inexplicably is % of the element's size, not the parent's size. | ||
| if (process.browser && this.props.useCSSTransforms) { | ||
| if (this.props.useCSSTransforms) { | ||
| utils.setTransform(child.props.style, [pos.left, pos.top]); | ||
@@ -308,11 +321,4 @@ delete child.props.style.left; | ||
| // Server rendering support. Use percentages in case the user viewport is different than the | ||
| // server viewport (which is pretty much guaranteed) | ||
| if (!process.browser) { | ||
| pos.left = utils.perc(pos.left / p.containerWidth); | ||
| child.props.style.width = utils.perc(pos.width / p.containerWidth); | ||
| } | ||
| // Resizable support. This is usually on but the user can toggle it off. | ||
| if (this.props.isResizable && this.isMounted()) { | ||
| if (this.props.isResizable) { | ||
| child = this.mixinResizable(child, pos); | ||
@@ -319,0 +325,0 @@ } |
@@ -36,4 +36,7 @@ "use strict"; | ||
| cols: React.PropTypes.number, | ||
| // A selector that will not be draggable. | ||
| draggableCancel: React.PropTypes.string, | ||
| // A selector for the draggable handler | ||
| handle: React.PropTypes.string, | ||
| draggableHandle: React.PropTypes.string, | ||
@@ -288,3 +291,4 @@ // layout is an array of object with the format: | ||
| moveOnStartChange: moveOnStartChange, | ||
| handle: this.props.handle, | ||
| cancel: this.props.draggableCancel, | ||
| handle: this.props.draggableHandle, | ||
| onDragStop: this.onDragStop, | ||
@@ -297,3 +301,4 @@ onDragStart: this.onDragStart, | ||
| isResizable: resizable, | ||
| useCSSTransforms: this.props.useCSSTransforms | ||
| useCSSTransforms: this.props.useCSSTransforms && this.isMounted(), | ||
| usePercentages: !this.isMounted() | ||
| }, l), | ||
@@ -300,0 +305,0 @@ child |
| { | ||
| "name": "react-grid-layout", | ||
| "version": "0.6.2", | ||
| "version": "0.7.0", | ||
| "description": "A draggable and resizable grid layout with responsive breakpoints, for React.", | ||
@@ -5,0 +5,0 @@ "main": "index.js", |
@@ -5,6 +5,4 @@ # React-Grid-Layout | ||
| <!-- START doctoc generated TOC please keep comment here to allow auto update --> | ||
| <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --> | ||
| - [Summary](#summary) | ||
| - [Changelog](/CHANGELOG.md) | ||
| - [Demos](#demos) | ||
@@ -19,4 +17,2 @@ - [Features](#features) | ||
| <!-- END doctoc generated TOC please keep comment here to allow auto update --> | ||
| #### Summary | ||
@@ -150,4 +146,6 @@ | ||
| // A selector that will not be draggable. | ||
| draggableCancel: React.PropTypes.string, | ||
| // A selector for the draggable handler | ||
| handle: React.PropTypes.string, | ||
| draggableHandle: React.PropTypes.string, | ||
@@ -162,10 +160,10 @@ // Layout is an array of object with the format: | ||
| // This allows setting this on the server side | ||
| // This allows setting the initial width on the server side. | ||
| initialWidth: React.PropTypes.number, | ||
| // margin between items [x, y] in px | ||
| // Margin between items [x, y] in px. | ||
| margin: React.PropTypes.array, | ||
| // Rows have a static height, but you can change this based on breakpoints | ||
| // if you like | ||
| // if you like. | ||
| rowHeight: React.PropTypes.number, | ||
@@ -172,0 +170,0 @@ |
Sorry, the diff of this file is not supported yet
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 by3.98%
63974
- Number of package files
- increased by5%
21
- Lines of code
- increased by0.94%
1290
Worsened metrics
- Number of lines in readme file
- decreased by-0.66%
299
No dependency changes