73 lines
1.6 KiB
JavaScript
73 lines
1.6 KiB
JavaScript
|
// @flow
|
||
|
|
|
||
|
|
import React, { Component } from 'react';
|
||
|
|
import { View } from 'react-native';
|
||
|
|
|
||
|
|
import styles from './styles';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* AspectRatioDetector component's property types.
|
||
|
|
*/
|
||
|
|
type Props = {
|
||
|
|
|
||
|
|
/**
|
||
|
|
* The "onLayout" handler.
|
||
|
|
*/
|
||
|
|
onDimensionsChanged: Function,
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Any nested components.
|
||
|
|
*/
|
||
|
|
children: React$Node
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* A {@link View} which captures the 'onLayout' event and calls a prop with the
|
||
|
|
* component size.
|
||
|
|
*/
|
||
|
|
export default class DimensionsDetector extends Component<Props> {
|
||
|
|
/**
|
||
|
|
* Initializes a new DimensionsDetector instance.
|
||
|
|
*
|
||
|
|
* @param {Object} props - The read-only properties with which the new
|
||
|
|
* instance is to be initialized.
|
||
|
|
*/
|
||
|
|
constructor(props: Object) {
|
||
|
|
super(props);
|
||
|
|
|
||
|
|
this._onLayout = this._onLayout.bind(this);
|
||
|
|
}
|
||
|
|
|
||
|
|
_onLayout: (Object) => void;
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Handles the "on layout" View's event and calls the onDimensionsChanged
|
||
|
|
* prop.
|
||
|
|
*
|
||
|
|
* @param {Object} event - The "on layout" event object/structure passed
|
||
|
|
* by react-native.
|
||
|
|
* @private
|
||
|
|
* @returns {void}
|
||
|
|
*/
|
||
|
|
_onLayout({ nativeEvent: { layout: { height, width } } }) {
|
||
|
|
const { onDimensionsChanged } = this.props;
|
||
|
|
|
||
|
|
onDimensionsChanged && onDimensionsChanged(width, height);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Renders the root view and it's children.
|
||
|
|
*
|
||
|
|
* @returns {Component}
|
||
|
|
*/
|
||
|
|
render() {
|
||
|
|
return (
|
||
|
|
<View
|
||
|
|
onLayout = { this._onLayout }
|
||
|
|
style = { styles.dimensionsDetector } >
|
||
|
|
{ this.props.children }
|
||
|
|
</View>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|