react: remove custom Fragment

Fragment now works on both React and React Native, so use it.

react/features/app/components/AbstractApp.js

@@ -1,7 +1,7 @@
 /* global APP */
 
 import PropTypes from 'prop-types';
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 import { compose, createStore } from 'redux';
@@ -9,7 +9,7 @@ import Thunk from 'redux-thunk';
 
 import { i18next } from '../../base/i18n';
 import { localParticipantLeft } from '../../base/participants';
-import { Fragment, RouteRegistry } from '../../base/react';
+import { RouteRegistry } from '../../base/react';
 import {
     MiddlewareRegistry,
     ReducerRegistry,
@@ -131,7 +131,7 @@ export class AbstractApp extends Component {
 
             dispatch(appWillMount(this));
 
-            // We set the initialized state here and not in the contructor to
+            // We set the initialized state here and not in the constructor to
             // make sure that {@code componentWillMount} gets invoked before
             // the app tries to render the actual app content.
             this.setState({

react/features/base/react/components/Fragment.js

@@ -1,30 +0,0 @@
-// @flow
-
-import { Component } from 'react';
-
-/**
- * {@code Fragment} component's property types.
- *
- * @static
- */
-type Props = {
-    children: React$Node
-};
-
-/**
- * react-redux's {@code Provider} component only accepts a single child, so use
- * a simple wrapper component in order to pass more than 1 child components.
- *
- * TODO Remove once React Native supports Fragment (0.52 probably).
- */
-export default class Fragment extends Component<Props> {
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {React$Node}
-     */
-    render() {
-        return this.props.children;
-    }
-}

react/features/base/react/components/index.js

@@ -1,2 +1 @@
 export * from './_';
-export { default as Fragment } from './Fragment';

react/features/base/sounds/components/SoundCollection.js

@@ -5,7 +5,6 @@ import { connect } from 'react-redux';
 
 import { Audio } from '../../media';
 import type { AudioElement } from '../../media';
-import { Fragment } from '../../react';
 
 import { _addAudioElement, _removeAudioElement } from '../actions';
 import type { Sound } from '../reducer';
@@ -68,13 +67,7 @@ class SoundCollection extends Component<Props> {
             key += 1;
         }
 
-        return (
+        return sounds;
-            <Fragment>
-                {
-                    sounds
-                }
-            </Fragment>
-        );
     }
 
     /**

react/features/base/testing/components/TestConnectionInfo.js

@@ -1,10 +1,8 @@
 // @flow
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 
-
-import { Fragment } from '../../react';
 import { getLocalParticipant } from '../../participants';
 
 // FIXME this imports feature to 'base'

react/features/base/toolbox/components/ToolboxItem.web.js

@@ -1,7 +1,7 @@
 // @flow
 
 import Tooltip from '@atlaskit/tooltip';
-import React from 'react';
+import React, { Fragment } from 'react';
 
 import AbstractToolboxItem from './AbstractToolboxItem';
 import type { Props } from './AbstractToolboxItem';
@@ -33,12 +33,10 @@ export default class ToolboxItem extends AbstractToolboxItem<Props> {
         const elementType = showLabel ? 'li' : 'div';
         // eslint-disable-next-line no-extra-parens
         const children = (
-
+            <Fragment>
-            // $FlowFixMe
-            <React.Fragment>
                 { this._renderIcon() }
                 { showLabel && this.label }
-            </React.Fragment>
+            </Fragment>
         );
 
         return React.createElement(elementType, props, children);