diff --git a/react/features/base/react/components/AbstractContainer.js b/react/features/base/react/components/AbstractContainer.js index 8a4f1d6ea..9967a4850 100644 --- a/react/features/base/react/components/AbstractContainer.js +++ b/react/features/base/react/components/AbstractContainer.js @@ -1,13 +1,16 @@ +/* @flow */ + import React, { Component } from 'react'; /** - * Abstract (base) class for container of React Component children with a style. + * Abstract (base) class for container of React {@link Component} children with + * a style. * * @extends Component */ export default class AbstractContainer extends Component { /** - * AbstractContainer component's property types. + * {@code AbstractContainer} component's property types. * * @static */ @@ -15,38 +18,43 @@ export default class AbstractContainer extends Component { children: React.PropTypes.node, /** - * The event handler/listener to be invoked when this AbstractContainer - * is clicked on Web or pressed on React Native. If onClick is defined - * and touchFeedback is undefined, touchFeedback is considered defined - * as true. + * The event handler/listener to be invoked when this + * {@code AbstractContainer} is clicked on Web or pressed on React + * Native. If {@code onClick} is defined and {@link touchFeedback} is + * undefined, {@code touchFeedback} is considered defined as + * {@code true}. */ onClick: React.PropTypes.func, /** - * The style (as in stylesheet) to be applied to this AbstractContainer. + * The style (as in stylesheet) to be applied to this + * {@code AbstractContainer}. */ style: React.PropTypes.object, /** - * True if this instance is to provide visual feedback when touched; - * otherwise, false. If touchFeedback is undefined and onClick is - * defined, touchFeedback is considered defined as true. + * If this instance is to provide visual feedback when touched, then + * {@code true}; otherwise, {@code false}. If {@code touchFeedback} is + * undefined and {@link onClick} is defined, {@code touchFeedback} is + * considered defined as {@code true}. */ touchFeedback: React.PropTypes.bool, /** - * True if this AbstractContainer is to be visible or false if this - * instance is to be hidden or not rendered at all. + * If this {@code AbstractContainer} is to be visible, then {@code true} + * or {@code false} if this instance is to be hidden or not rendered at + * all. */ visible: React.PropTypes.bool }; /** - * Renders this AbstractContainer as a React Component of a specific type. + * Renders this {@code AbstractContainer} as a React {@code Component} of a + * specific type. * - * @param {string|ReactClass} type - The type of the React Component which - * is to be rendered. - * @param {Object|undefined} props - The read-only React Component + * @param {string|ReactClass} type - The type of the React {@code Component} + * which is to be rendered. + * @param {Object|undefined} props - The read-only React {@code Component} * properties, if any, to render. If undefined, the props of this instance * will be rendered. * @protected diff --git a/react/features/base/react/components/native/Container.js b/react/features/base/react/components/native/Container.js index cf366be5b..4f7a43de7 100644 --- a/react/features/base/react/components/native/Container.js +++ b/react/features/base/react/components/native/Container.js @@ -1,3 +1,5 @@ +/* @flow */ + import React from 'react'; import { Dimensions, @@ -31,6 +33,9 @@ export default class Container extends AbstractContainer { // eslint-disable-next-line prefer-const let { onClick, style, touchFeedback, visible, ...props } = this.props; + // onClick & touchFeedback + (typeof touchFeedback === 'undefined') && (touchFeedback = onClick); + // visible // The following property is responsible to hide/show this Container by @@ -50,9 +55,6 @@ export default class Container extends AbstractContainer { }; } - // onClick & touchFeedback - (typeof touchFeedback === 'undefined') && (touchFeedback = onClick); - const renderParent = touchFeedback || onClick; if (!renderParent && visibilityStyle) { @@ -63,20 +65,17 @@ export default class Container extends AbstractContainer { } // eslint-disable-next-line object-property-newline - let component = this._render(View, { ...props, style }); + let component = super._render(View, { ...props, style }); if (renderParent) { const parentType - = touchFeedback - ? TouchableHighlight - : TouchableWithoutFeedback; + = touchFeedback ? TouchableHighlight : TouchableWithoutFeedback; const parentProps = {}; onClick && (parentProps.onPress = onClick); visibilityStyle && (parentProps.style = visibilityStyle); - component - = React.createElement(parentType, parentProps, component); + component = React.createElement(parentType, parentProps, component); } return component; diff --git a/react/features/base/react/components/web/Container.js b/react/features/base/react/components/web/Container.js index 550d1c6d4..3f1face99 100644 --- a/react/features/base/react/components/web/Container.js +++ b/react/features/base/react/components/web/Container.js @@ -1,3 +1,5 @@ +/* @flow */ + import AbstractContainer from '../AbstractContainer'; /** @@ -22,10 +24,9 @@ export default class Container extends AbstractContainer { render() { const { visible } = this.props; - if (typeof visible !== 'undefined' && !visible) { - return null; - } - - return this._render('div'); + return ( + typeof visible === 'undefined' || visible + ? super._render('div') + : null); } }