From d8562e028546b1212c23bd0b70bc977f88b532c9 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Fri, 5 Aug 2016 14:24:54 +0200 Subject: [PATCH 1/4] Pass all values of getBoundingClientRect, not only `width` and `height` --- src/index.js | 10 ++++++--- tests/index.js | 60 +++++++++++++++++++++++++++++++++++++++++++++----- 2 files changed, 61 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index aa433bc..e0d831b 100644 --- a/src/index.js +++ b/src/index.js @@ -9,6 +9,11 @@ export default class ContainerDimensions extends Component { children: PropTypes.oneOfType([PropTypes.element, PropTypes.func]).isRequired } + static getDomNodeDimensions(node) { + const { top, right, bottom, left, width, height } = node.getBoundingClientRect() + return { top, right, bottom, left, width, height } + } + constructor() { super() this.state = { @@ -29,11 +34,10 @@ export default class ContainerDimensions extends Component { } onResize() { - const clientRect = this.parentNode.getBoundingClientRect() + const clientRect = ContainerDimensions.getDomNodeDimensions(this.parentNode) this.setState({ initiated: true, - width: clientRect.width, - height: clientRect.height + ...clientRect }) } diff --git a/tests/index.js b/tests/index.js index d620f3c..ddd2e48 100644 --- a/tests/index.js +++ b/tests/index.js @@ -1,7 +1,7 @@ /* eslint no-unused-expressions: 0 */ import React from 'react' import { mount } from 'enzyme' -import { spy } from 'sinon' +import { spy, stub } from 'sinon' import chai, { expect } from 'chai' import ContainerDimensions from '../src/index' @@ -61,11 +61,44 @@ describe('react-container-dimensions', () => { const el = wrapper.render() el.css('width', 10) setTimeout(() => { - el.css('width', 100) + el.css('width', 100) // Triggering onResize event expect(ContainerDimensions.prototype.onResize.calledTwice).to.be.true ContainerDimensions.prototype.onResize.restore() done() - }, 0) + }, 10) + }) + + it('onResize sets state with all keys and values from getBoundingClientRect', () => { + const styles = { top: 100, width: 200 } + stub(ContainerDimensions, 'getDomNodeDimensions', () => ({ + top: 0, + right: 0, + bottom: 0, + left: 0, + width: 0, + height: 0, + ...styles + })) + const wrapper = mount( +
+ + + +
+ , { attachTo: document.body }) + + wrapper.render() + expect(wrapper.find(MyComponent).props()).to.have.keys([ + 'initiated', + 'top', + 'right', + 'bottom', + 'left', + 'width', + 'height']) + expect(wrapper.find(MyComponent)).to.have.prop('top', 100) + expect(wrapper.find(MyComponent)).to.have.prop('width', 200) + ContainerDimensions.getDomNodeDimensions.restore() }) it('should initially render an empty placeholder', () => { @@ -89,34 +122,49 @@ describe('react-container-dimensions', () => { expect(wrapper.find(MyComponent).length).to.eq(1) }) - it('should pass width and height as props to its children', () => { + it('should pass dimensions as props to its children', () => { const wrapper = mount( ) wrapper.setState({ + top: 0, + right: 100, + bottom: 300, + left: 200, width: 100, height: 200 }) expect(wrapper.find(MyComponent)).to.have.length(1) + expect(wrapper.find(MyComponent)).to.have.prop('top', 0) + expect(wrapper.find(MyComponent)).to.have.prop('right', 100) + expect(wrapper.find(MyComponent)).to.have.prop('bottom', 300) + expect(wrapper.find(MyComponent)).to.have.prop('left', 200) expect(wrapper.find(MyComponent)).to.have.prop('width', 100) expect(wrapper.find(MyComponent)).to.have.prop('height', 200) }) - it('should pass width and height as function arguments', () => { + it('should pass dimensions as function arguments', () => { const wrapper = mount( { - ({ width, height }) => // eslint-disable-line + ({ left, width, height }) => // eslint-disable-line + } ) wrapper.setState({ + left: 20, width: 100, height: 200 }) expect(wrapper.find(MyComponent)).to.have.length(1) + expect(wrapper.find(MyComponent)).to.have.prop('left', 30) expect(wrapper.find(MyComponent)).to.have.prop('width', 110) expect(wrapper.find(MyComponent)).to.have.prop('height', 210) }) From 2a4f15fbd11e57f64e717b1aaa80d4c18b823f22 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Fri, 5 Aug 2016 14:29:40 +0200 Subject: [PATCH 2/4] Updated README --- README.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 06dd171..7610687 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,11 @@ It is especially useful when you create components with dimensions that change o time and you want to explicitely pass the container dimensions to the children. For example, SVG visualization needs to be updated in order to fit into container. +It uses [`getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) and passes values for all `top`, `right`, `bottom`, `left`, `width`, `height` CSs attributes down the tree. + ## Usage -* Wrap your existing components. Children component will recieve `width` and `height` as props. +* Wrap your existing components. Children component will recieve `top`, `right`, `bottom`, `left`, `width`, `height` as props. ```jsx From 85e68591b08aaf5206349f25ced85d67a78fd831 Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Fri, 5 Aug 2016 14:30:24 +0200 Subject: [PATCH 3/4] Updated CHANGELOG --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 72500cd..67a679c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,7 @@ +# 1.3.0 + +- Pass all values of getBoundingClientRect, not just `width` and `height`. (#6) + # 1.2.0 - Added React 15 to a semver range for peerDependencies (#3) From 2c97d23c771622b4460c48febbe0954fd995939c Mon Sep 17 00:00:00 2001 From: Andrey Okonetchnikov Date: Fri, 5 Aug 2016 14:30:43 +0200 Subject: [PATCH 4/4] Bumped version to 1.3.0 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 38701ce..a56fc6c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-container-dimensions", - "version": "1.2.0", + "version": "1.3.0", "description": "Wrapper component that detects element resize and passes new dimensions down the tree. Based on [element-resize-detector](https://github.com/wnr/element-resize-detector)", "main": "lib/index.js", "scripts": {