From 0ad1c88cd236f3b642cdafa707b6e8ebe1dde9c9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Fri, 2 Feb 2018 13:21:14 +0100 Subject: [PATCH] [RN] Refactor AspectRatioDetector Factor out the dimensions detection login into a DimensionsDetector component. --- .../components/AspectRatioDetector.native.js | 59 ++++++++------- .../components/DimensionsDetector.native.js | 72 +++++++++++++++++++ .../dimensions-detector/components/index.js | 1 + .../components/styles.js | 4 +- .../base/dimensions-detector/index.js | 1 + 5 files changed, 105 insertions(+), 32 deletions(-) create mode 100644 react/features/base/dimensions-detector/components/DimensionsDetector.native.js create mode 100644 react/features/base/dimensions-detector/components/index.js rename react/features/base/{aspect-ratio => dimensions-detector}/components/styles.js (68%) create mode 100644 react/features/base/dimensions-detector/index.js diff --git a/react/features/base/aspect-ratio/components/AspectRatioDetector.native.js b/react/features/base/aspect-ratio/components/AspectRatioDetector.native.js index c81fcd0e5..4ed0d895f 100644 --- a/react/features/base/aspect-ratio/components/AspectRatioDetector.native.js +++ b/react/features/base/aspect-ratio/components/AspectRatioDetector.native.js @@ -1,33 +1,33 @@ -import PropTypes from 'prop-types'; +// @flow + import React, { Component } from 'react'; -import { View } from 'react-native'; import { connect } from 'react-redux'; +import { DimensionsDetector } from '../../dimensions-detector'; + import { setAspectRatio } from '../actions'; -import styles from './styles'; + +/** + * AspectRatioDetector component's property types. + */ +type Props = { + + /** + * The "onDimensionsHandler" handler. + */ + _onDimensionsChanged: Function, + + /** + * Any nested components. + */ + children: React$Node +}; /** * A root {@link View} which captures the 'onLayout' event and figures out * the aspect ratio of the app. */ -class AspectRatioDetector extends Component { - /** - * AspectRatioDetector component's property types. - * - * @static - */ - static propTypes = { - /** - * The "onLayout" handler. - */ - _onLayout: PropTypes.func, - - /** - * Any nested components. - */ - children: PropTypes.node - }; - +class AspectRatioDetector extends Component { /** * Renders the root view and it's children. * @@ -35,11 +35,10 @@ class AspectRatioDetector extends Component { */ render() { return ( - + { this.props.children } - + ); } } @@ -50,21 +49,21 @@ class AspectRatioDetector extends Component { * @param {Function} dispatch - Redux action dispatcher. * @private * @returns {{ - * _onLayout: Function + * _onDimensionsChanged: Function * }} */ function _mapDispatchToProps(dispatch) { return { /** - * Handles the "on layout" View's event and dispatches aspect ratio + * Handles the "on dimensions changed" event and dispatches aspect ratio * changed action. * - * @param {Object} event - The "on layout" event object/structure passed - * by react-native. + * @param {number} width - The new width for the component. + * @param {number} height - The new height for the component. * @private * @returns {void} */ - _onLayout({ nativeEvent: { layout: { height, width } } }) { + _onDimensionsChanged(width: number, height: number) { dispatch(setAspectRatio(width, height)); } }; diff --git a/react/features/base/dimensions-detector/components/DimensionsDetector.native.js b/react/features/base/dimensions-detector/components/DimensionsDetector.native.js new file mode 100644 index 000000000..6cf515095 --- /dev/null +++ b/react/features/base/dimensions-detector/components/DimensionsDetector.native.js @@ -0,0 +1,72 @@ +// @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 { + /** + * 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 ( + + { this.props.children } + + ); + } +} diff --git a/react/features/base/dimensions-detector/components/index.js b/react/features/base/dimensions-detector/components/index.js new file mode 100644 index 000000000..5c87f6443 --- /dev/null +++ b/react/features/base/dimensions-detector/components/index.js @@ -0,0 +1 @@ +export { default as DimensionsDetector } from './DimensionsDetector'; diff --git a/react/features/base/aspect-ratio/components/styles.js b/react/features/base/dimensions-detector/components/styles.js similarity index 68% rename from react/features/base/aspect-ratio/components/styles.js rename to react/features/base/dimensions-detector/components/styles.js index b377cbb1a..2fe087901 100644 --- a/react/features/base/aspect-ratio/components/styles.js +++ b/react/features/base/dimensions-detector/components/styles.js @@ -5,9 +5,9 @@ import { createStyleSheet } from '../../styles'; */ export default createStyleSheet({ /** - * The style of {@link AspectRatioDetector} used on react-native. + * The style of {@link DimensionsDetector} used on react-native. */ - aspectRatioDetector: { + dimensionsDetector: { alignSelf: 'stretch', flex: 1 } diff --git a/react/features/base/dimensions-detector/index.js b/react/features/base/dimensions-detector/index.js new file mode 100644 index 000000000..07635cbbc --- /dev/null +++ b/react/features/base/dimensions-detector/index.js @@ -0,0 +1 @@ +export * from './components';