c9d8b5c827
We started on the way to responsive UI and its design with aspect ratio and keeping the filmstrip on the short side of the app's visible rectangle. Shortly, we're going to introduce reduced UI for Picture-in-Picture. And that's where we'll need another dimensions-based detector akin to the aspect ratio detector. While the AspectRatioDetector, the up-and-coming ReducedUIDetector, and their base DimensionsDetector are definitely separate abstractions and implementations not mixed for the purposes of easy extensibility and maintenance, the three of them are our building blocks on top of which we'll build our responsive UI.
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>
|
|
);
|
|
}
|
|
}
|