From b39b6640b4e024c05429802770268a247c1e2456 Mon Sep 17 00:00:00 2001
From: Lyubo Marinov <lmarinov@atlassian.com>
Date: Thu, 7 Dec 2017 20:31:28 -0600
Subject: [PATCH] React & React Native Fragment-like

---
 react/features/app/components/AbstractApp.js  | 29 +-----------------
 .../base/react/components/Fragment.js         | 30 +++++++++++++++++++
 react/features/base/react/components/index.js |  1 +
 3 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 react/features/base/react/components/Fragment.js

diff --git a/react/features/app/components/AbstractApp.js b/react/features/app/components/AbstractApp.js
index a133878ff..029f14d3c 100644
--- a/react/features/app/components/AbstractApp.js
+++ b/react/features/app/components/AbstractApp.js
@@ -1,5 +1,4 @@
 /* global APP */
-/* eslint-disable react/no-multi-comp */
 
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
@@ -13,7 +12,7 @@ import {
     localParticipantJoined,
     localParticipantLeft
 } from '../../base/participants';
-import { RouteRegistry } from '../../base/react';
+import { Fragment, RouteRegistry } from '../../base/react';
 import { MiddlewareRegistry, ReducerRegistry } from '../../base/redux';
 import { toURLString } from '../../base/util';
 import { OverlayContainer } from '../../overlay';
@@ -27,32 +26,6 @@ import { appNavigate, appWillMount, appWillUnmount } from '../actions';
  */
 const DEFAULT_URL = 'https://meet.jit.si';
 
-/**
- * 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 this once React Native supports Fragment (0.52 probably).
- */
-class Fragment extends Component {
-    /**
-     * {@code Fragment} component's property types.
-     *
-     * @static
-     */
-    static propTypes = {
-        children: PropTypes.node
-    };
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        return this.props.children;
-    }
-}
-
 /**
  * Base (abstract) class for main App component.
  *
diff --git a/react/features/base/react/components/Fragment.js b/react/features/base/react/components/Fragment.js
new file mode 100644
index 000000000..660c57da4
--- /dev/null
+++ b/react/features/base/react/components/Fragment.js
@@ -0,0 +1,30 @@
+// @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;
+    }
+}
diff --git a/react/features/base/react/components/index.js b/react/features/base/react/components/index.js
index cda61441e..68451b1e4 100644
--- a/react/features/base/react/components/index.js
+++ b/react/features/base/react/components/index.js
@@ -1 +1,2 @@
 export * from './_';
+export { default as Fragment } from './Fragment';