diff --git a/react/features/base/aspect-ratio/components/AspectRatioAware.js b/react/features/base/aspect-ratio/components/AspectRatioAware.js
index e566bd5a4..a81d18e04 100644
--- a/react/features/base/aspect-ratio/components/AspectRatioAware.js
+++ b/react/features/base/aspect-ratio/components/AspectRatioAware.js
@@ -1,42 +1,64 @@
// @flow
+
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { connect } from 'react-redux';
-import { ASPECT_RATIO_NARROW } from '../constants';
+import { ASPECT_RATIO_NARROW, ASPECT_RATIO_WIDE } from '../constants';
/**
- * Decorates given React component class into {@link AspectRatioAwareWrapper}
- * which provides the aspectRatio property updated on each Redux state
- * change.
+ * Checks if given React component decorated in {@link AspectRatioAwareWrapper}
+ * has currently the {@link ASPECT_RATIO_NARROW} set in the aspect ratio
+ * property.
*
- * @param {ReactClass} WrapperComponent - A React component class to be wrapped.
+ * @param {AspectRatioAwareWrapper} component - A
+ * {@link AspectRatioAwareWrapper} which has aspectRation property.
+ * @returns {boolean}
+ */
+export function isNarrowAspectRatio(component: React$Component<*>) {
+ return component.props.aspectRatio === ASPECT_RATIO_NARROW;
+}
+
+/**
+ * Decorates a specific React {@code Component} class into an
+ * {@link AspectRatioAware} which provides the React prop {@code aspectRatio}
+ * updated on each redux state change.
+ *
+ * @param {Class} WrappedComponent - A React {@code Component}
+ * class to be wrapped.
* @returns {AspectRatioAwareWrapper}
*/
-export function AspectRatioAware(
- WrapperComponent: ReactClass<*>): ReactClass<*> {
- return connect(_mapStateToProps)(
- class AspectRatioAwareWrapper extends Component {
+export function makeAspectRatioAware(
+ WrappedComponent: Class>
+): Class> {
+ /**
+ * Renders {@code WrappedComponent} with the React prop {@code aspectRatio}.
+ */
+ class AspectRatioAware extends Component<*> {
+ /**
+ * Properties of the aspect ratio aware wrapper.
+ */
+ static propTypes = {
/**
- * Properties of the aspect ratio aware wrapper.
+ * Either {@link ASPECT_RATIO_NARROW} or {@link ASPECT_RATIO_WIDE}.
*/
- static propTypes = {
- /**
- * Either {@link ASPECT_RATIO_NARROW} or
- * {@link ASPECT_RATIO_WIDE}.
- */
- aspectRatio: PropTypes.symbol
- }
+ aspectRatio: PropTypes.oneOf([
+ ASPECT_RATIO_NARROW,
+ ASPECT_RATIO_WIDE
+ ])
+ }
- /**
- * Implement's React render method to wrap the nested component.
- *
- * @returns {XML}
- */
- render(): React$Element<*> {
- return ;
- }
- });
+ /**
+ * Implement's React render method to wrap the nested component.
+ *
+ * @returns {React$Element}
+ */
+ render(): React$Element<*> {
+ return ;
+ }
+ }
+
+ return connect(_mapStateToProps)(AspectRatioAware);
}
/**
@@ -53,16 +75,3 @@ function _mapStateToProps(state) {
aspectRatio: state['features/base/aspect-ratio'].aspectRatio
};
}
-
-/**
- * Checks if given React component decorated in {@link AspectRatioAwareWrapper}
- * has currently the {@link ASPECT_RATIO_NARROW} set in the aspect ratio
- * property.
- *
- * @param {AspectRatioAwareWrapper} component - A
- * {@link AspectRatioAwareWrapper} which has aspectRation property.
- * @returns {boolean}
- */
-export function isNarrowAspectRatio(component: ReactClass<*>) {
- return component.props.aspectRatio === ASPECT_RATIO_NARROW;
-}
diff --git a/react/features/base/react/components/native/Container.js b/react/features/base/react/components/native/Container.js
index 2e011868f..0383d87ff 100644
--- a/react/features/base/react/components/native/Container.js
+++ b/react/features/base/react/components/native/Container.js
@@ -1,4 +1,4 @@
-/* @flow */
+// @flow
import React from 'react';
import {
diff --git a/react/features/conference/components/Conference.native.js b/react/features/conference/components/Conference.native.js
index d616aeb55..1b3645d2d 100644
--- a/react/features/conference/components/Conference.native.js
+++ b/react/features/conference/components/Conference.native.js
@@ -114,7 +114,7 @@ class Conference extends Component {
* after this component is mounted.
*
* @inheritdoc
- * returns {void}
+ * @returns {void}
*/
componentDidMount() {
// Set handling any hardware button presses for back navigation up.
diff --git a/react/features/filmstrip/components/Filmstrip.native.js b/react/features/filmstrip/components/Filmstrip.native.js
index 41be88aee..60cce801a 100644
--- a/react/features/filmstrip/components/Filmstrip.native.js
+++ b/react/features/filmstrip/components/Filmstrip.native.js
@@ -1,11 +1,14 @@
-/* @flow */
+// @flow
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { ScrollView } from 'react-native';
import { connect } from 'react-redux';
-import { AspectRatioAware, isNarrowAspectRatio } from '../../base/aspect-ratio';
+import {
+ isNarrowAspectRatio,
+ makeAspectRatioAware
+} from '../../base/aspect-ratio';
import { Container } from '../../base/react';
import Thumbnail from './Thumbnail';
@@ -148,4 +151,4 @@ function _mapStateToProps(state) {
};
}
-export default connect(_mapStateToProps)(AspectRatioAware(Filmstrip));
+export default connect(_mapStateToProps)(makeAspectRatioAware(Filmstrip));
diff --git a/react/features/toolbox/components/Toolbox.native.js b/react/features/toolbox/components/Toolbox.native.js
index cc302f725..9add00e20 100644
--- a/react/features/toolbox/components/Toolbox.native.js
+++ b/react/features/toolbox/components/Toolbox.native.js
@@ -4,7 +4,10 @@ import { View } from 'react-native';
import { connect } from 'react-redux';
import { sendAnalyticsEvent } from '../../analytics';
-import { AspectRatioAware, isNarrowAspectRatio } from '../../base/aspect-ratio';
+import {
+ isNarrowAspectRatio,
+ makeAspectRatioAware
+} from '../../base/aspect-ratio';
import { toggleAudioOnly } from '../../base/conference';
import {
MEDIA_TYPE,
@@ -439,4 +442,4 @@ function _mapStateToProps(state) {
}
export default connect(_mapStateToProps, _mapDispatchToProps)(
- AspectRatioAware(Toolbox));
+ makeAspectRatioAware(Toolbox));