-
Notifications
You must be signed in to change notification settings - Fork 4.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[RNMobile] Create cross platform useResizeObserver()
hook
#19918
Changes from all commits
c60d675
50bbadc
74d9227
64f894a
8c22c00
aa3eeaa
a741278
057990d
6f48b92
2ac3218
0b3ac33
8b02d17
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import useResizeAware from 'react-resize-aware'; | ||
|
||
/** | ||
* Hook which allows to listen the resize event of any target element when it changes sizes. | ||
* _Note: `useResizeObserver` will report `null` until after first render_ | ||
* | ||
* @return {Array} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height` | ||
* | ||
* @example | ||
* | ||
* ```js | ||
* const App = () => { | ||
* const [ resizeListener, sizes ] = useResizeObserver(); | ||
* | ||
* return ( | ||
* <div> | ||
* { resizeListener } | ||
* Your content here | ||
* </div> | ||
* ); | ||
* }; | ||
* ``` | ||
* | ||
*/ | ||
export default useResizeAware; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { View, StyleSheet } from 'react-native'; | ||
/** | ||
* WordPress dependencies | ||
*/ | ||
import { useState, useCallback } from '@wordpress/element'; | ||
|
||
/** | ||
* Hook which allows to listen the resize event of any target element when it changes sizes. | ||
* | ||
* @return {Array} An array of {Element} `resizeListener` and {?Object} `sizes` with properties `width` and `height` | ||
* | ||
* @example | ||
* | ||
* ```js | ||
* const App = () => { | ||
* const [ resizeListener, sizes ] = useResizeObserver(); | ||
* | ||
* return ( | ||
* <View> | ||
* { resizeListener } | ||
* Your content here | ||
* </View> | ||
* ); | ||
* }; | ||
* ``` | ||
* | ||
*/ | ||
const useResizeObserver = () => { | ||
const [ measurements, setMeasurements ] = useState( null ); | ||
|
||
const onLayout = useCallback( ( { nativeEvent } ) => { | ||
const { width, height } = nativeEvent.layout; | ||
setMeasurements( ( prevState ) => { | ||
if ( | ||
! prevState || | ||
prevState.width !== width || | ||
prevState.height !== height | ||
) { | ||
return { width, height }; | ||
} | ||
return prevState; | ||
} ); | ||
}, [] ); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Shouldn't this include There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've tested it and looks like There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ah, I didn't know this:
|
||
|
||
const observer = ( | ||
<View style={ StyleSheet.absoluteFill } onLayout={ onLayout } /> | ||
); | ||
|
||
return [ observer, measurements ]; | ||
}; | ||
|
||
export default useResizeObserver; |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
/** | ||
* External dependencies | ||
*/ | ||
import { create, act } from 'react-test-renderer'; | ||
import { View } from 'react-native'; | ||
|
||
/** | ||
* Internal dependencies | ||
*/ | ||
import useResizeObserver from '../'; | ||
|
||
const TestComponent = ( { onLayout } ) => { | ||
const [ resizeObserver, sizes ] = useResizeObserver(); | ||
|
||
return ( | ||
<View sizes={ sizes } onLayout={ onLayout }> | ||
{ resizeObserver } | ||
</View> | ||
); | ||
}; | ||
|
||
const renderWithOnLayout = ( component ) => { | ||
const testComponent = create( component ); | ||
|
||
const mockNativeEvent = { | ||
nativeEvent: { | ||
layout: { | ||
width: 300, | ||
height: 500, | ||
}, | ||
}, | ||
}; | ||
|
||
act( () => { | ||
testComponent.toJSON().children[ 0 ].props.onLayout( mockNativeEvent ); | ||
} ); | ||
|
||
return testComponent.toJSON(); | ||
}; | ||
|
||
describe( 'useResizeObserver()', () => { | ||
it( 'should return "{ width: 300, height: 500 }"', () => { | ||
const component = renderWithOnLayout( <TestComponent /> ); | ||
|
||
expect( component.props.sizes ).toMatchObject( { | ||
width: 300, | ||
height: 500, | ||
} ); | ||
} ); | ||
} ); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,11 @@ | ||
jest.mock( '@wordpress/compose', () => { | ||
const App = () => null; | ||
return { | ||
...jest.requireActual( '@wordpress/compose' ), | ||
useViewportMatch: jest.fn(), | ||
useResizeObserver: jest.fn( () => [ | ||
<App key={ 'mock-key' } />, | ||
{ width: 700, height: 500 }, | ||
] ), | ||
}; | ||
} ); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These snapshot changes do not seem like they are sensible, since they undo the fixes intended with #19825.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh, I see that you updated the mocking in the tests, so that a value is provided. So maybe they are sensible. I'll take a closer look at those changes.