From bce2a9fba9ace4066a12aabba471f15c94136fed Mon Sep 17 00:00:00 2001 From: Lyubo Marinov Date: Fri, 3 Nov 2017 15:14:38 -0500 Subject: [PATCH] [RN] Fix eslint & flow errors --- .../components/AspectRatioAware.js | 87 ++++++++++--------- .../base/react/components/native/Container.js | 2 +- .../components/Conference.native.js | 2 +- .../filmstrip/components/Filmstrip.native.js | 9 +- .../toolbox/components/Toolbox.native.js | 7 +- 5 files changed, 61 insertions(+), 46 deletions(-) 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));