}
102 | />,
103 | container
104 | )
105 | expect(refOnResize).not.toBe(null)
106 | expect(refOnResize.id).toBe('child')
107 | })
108 | it('should trigger onResize when componentDidMount is called', () => {
109 | const onResize = jest.fn()
110 | render(, container)
111 | expect(onResize).toHaveBeenCalledTimes(1)
112 | })
113 | it('should trigger onResize when resizeObserver callback is called', () => {
114 | const onResize = jest.fn()
115 |
116 | render(, container)
117 | resizeObserver.callback()
118 | jest.runAllTimers()
119 |
120 | expect(onResize).toHaveBeenCalledTimes(2)
121 | })
122 | })
123 | })
124 |
--------------------------------------------------------------------------------
/src/__tests__/__snapshots__/Measure.test.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`Measure should handle bounds 1`] = `
4 |
5 | {
6 | "contentRect": {
7 | "entry": {},
8 | "client": {},
9 | "offset": {},
10 | "scroll": {},
11 | "bounds": {},
12 | "margin": {}
13 | }
14 | }
15 |
16 | `;
17 |
18 | exports[`Measure should handle bounds 2`] = `
19 |
20 | {
21 | "contentRect": {
22 | "bounds": {
23 | "top": 0,
24 | "right": 0,
25 | "bottom": 0,
26 | "left": 0,
27 | "width": 0,
28 | "height": 0
29 | }
30 | }
31 | }
32 |
33 | `;
34 |
35 | exports[`Measure should handle entry 1`] = `
36 |
37 | {
38 | "contentRect": {
39 | "entry": {},
40 | "client": {},
41 | "offset": {},
42 | "scroll": {},
43 | "bounds": {},
44 | "margin": {}
45 | }
46 | }
47 |
48 | `;
49 |
50 | exports[`Measure should handle entry 2`] = `
51 |
52 | {
53 | "contentRect": {
54 | "entry": {
55 | "width": 0,
56 | "height": 0
57 | }
58 | }
59 | }
60 |
61 | `;
62 |
--------------------------------------------------------------------------------
/src/get-content-rect.js:
--------------------------------------------------------------------------------
1 | function getContentRect(node, types) {
2 | const calculations = {}
3 |
4 | if (types.indexOf('client') > -1) {
5 | calculations.client = {
6 | top: node.clientTop,
7 | left: node.clientLeft,
8 | width: node.clientWidth,
9 | height: node.clientHeight,
10 | }
11 | }
12 |
13 | if (types.indexOf('offset') > -1) {
14 | calculations.offset = {
15 | top: node.offsetTop,
16 | left: node.offsetLeft,
17 | width: node.offsetWidth,
18 | height: node.offsetHeight,
19 | }
20 | }
21 |
22 | if (types.indexOf('scroll') > -1) {
23 | calculations.scroll = {
24 | top: node.scrollTop,
25 | left: node.scrollLeft,
26 | width: node.scrollWidth,
27 | height: node.scrollHeight,
28 | }
29 | }
30 |
31 | if (types.indexOf('bounds') > -1) {
32 | const rect = node.getBoundingClientRect()
33 | calculations.bounds = {
34 | top: rect.top,
35 | right: rect.right,
36 | bottom: rect.bottom,
37 | left: rect.left,
38 | width: rect.width,
39 | height: rect.height,
40 | }
41 | }
42 |
43 | if (types.indexOf('margin') > -1) {
44 | const styles = getComputedStyle(node)
45 | calculations.margin = {
46 | top: styles ? parseInt(styles.marginTop) : 0,
47 | right: styles ? parseInt(styles.marginRight) : 0,
48 | bottom: styles ? parseInt(styles.marginBottom) : 0,
49 | left: styles ? parseInt(styles.marginLeft) : 0,
50 | }
51 | }
52 |
53 | return calculations
54 | }
55 |
56 | export default getContentRect
57 |
--------------------------------------------------------------------------------
/src/get-types.js:
--------------------------------------------------------------------------------
1 | const types = ['client', 'offset', 'scroll', 'bounds', 'margin']
2 |
3 | export default function getTypes(props) {
4 | const allowedTypes = []
5 | types.forEach(type => {
6 | if (props[type]) {
7 | allowedTypes.push(type)
8 | }
9 | })
10 | return allowedTypes
11 | }
12 |
--------------------------------------------------------------------------------
/src/get-window-of.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Returns the global window object associated with provided element.
3 | */
4 | function getWindowOf(target) {
5 | // Assume that the element is an instance of Node, which means that it
6 | // has the "ownerDocument" property from which we can retrieve a
7 | // corresponding global object.
8 | const ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView
9 |
10 | // Return the local window object if it's not possible extract one from
11 | // provided element.
12 | return ownerGlobal || window
13 | };
14 |
15 | export default getWindowOf
16 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Measure from './Measure'
2 | import withContentRect from './with-content-rect'
3 |
4 | export { Measure as default, withContentRect }
5 |
--------------------------------------------------------------------------------
/src/with-content-rect.js:
--------------------------------------------------------------------------------
1 | import { Component, createElement } from 'react'
2 | import PropTypes from 'prop-types'
3 | import ResizeObserver from 'resize-observer-polyfill'
4 |
5 | import getTypes from './get-types'
6 | import getContentRect from './get-content-rect'
7 | import getWindowOf from './get-window-of'
8 |
9 | function withContentRect(types) {
10 | return WrappedComponent =>
11 | class WithContentRect extends Component {
12 | static propTypes = {
13 | client: PropTypes.bool,
14 | offset: PropTypes.bool,
15 | scroll: PropTypes.bool,
16 | bounds: PropTypes.bool,
17 | margin: PropTypes.bool,
18 | innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
19 | onResize: PropTypes.func,
20 | }
21 |
22 | state = {
23 | contentRect: {
24 | entry: {},
25 | client: {},
26 | offset: {},
27 | scroll: {},
28 | bounds: {},
29 | margin: {},
30 | },
31 | }
32 |
33 | _animationFrameID = null
34 |
35 | _resizeObserver = null
36 |
37 | _node = null
38 |
39 | _window = null
40 |
41 | componentDidMount() {
42 | this._resizeObserver = (this._window !== null && this._window.ResizeObserver)
43 | ? new this._window.ResizeObserver(this.measure)
44 | : new ResizeObserver(this.measure);
45 | if (this._node !== null) {
46 | this._resizeObserver.observe(this._node)
47 |
48 | if (typeof this.props.onResize === 'function') {
49 | this.props.onResize(
50 | getContentRect(this._node, types || getTypes(this.props))
51 | )
52 | }
53 | }
54 | }
55 |
56 | componentWillUnmount() {
57 | if (this._window !== null) {
58 | this._window.cancelAnimationFrame(this._animationFrameID)
59 | }
60 |
61 | if (this._resizeObserver !== null) {
62 | this._resizeObserver.disconnect()
63 | this._resizeObserver = null
64 | }
65 | }
66 |
67 | measure = entries => {
68 | const contentRect = getContentRect(
69 | this._node,
70 | types || getTypes(this.props)
71 | )
72 |
73 | if (entries) {
74 | contentRect.entry = entries[0].contentRect
75 | }
76 |
77 | this._animationFrameID = this._window.requestAnimationFrame(() => {
78 | if (this._resizeObserver !== null) {
79 | this.setState({ contentRect })
80 | if (typeof this.props.onResize === 'function') {
81 | this.props.onResize(contentRect)
82 | }
83 | }
84 | })
85 | }
86 |
87 | _handleRef = node => {
88 | if (this._resizeObserver !== null && this._node !== null) {
89 | this._resizeObserver.unobserve(this._node)
90 | }
91 |
92 | this._node = node
93 | this._window = getWindowOf(this._node)
94 |
95 | const { innerRef } = this.props
96 | if (innerRef) {
97 | if (typeof innerRef === 'function') {
98 | innerRef(this._node)
99 | } else {
100 | innerRef.current = this._node
101 | }
102 | }
103 |
104 | if (this._resizeObserver !== null && this._node !== null) {
105 | this._resizeObserver.observe(this._node)
106 | }
107 | }
108 |
109 | render() {
110 | const { innerRef, onResize, ...props } = this.props
111 | return createElement(WrappedComponent, {
112 | ...props,
113 | measureRef: this._handleRef,
114 | measure: this.measure,
115 | contentRect: this.state.contentRect,
116 | })
117 | }
118 | }
119 | }
120 |
121 | export default withContentRect
122 |
--------------------------------------------------------------------------------