Merge pull request #4148 from zbettenbuk/recording-web-css-fix

Safeguard Container style when used cross-platform

react/features/base/react/components/AbstractContainer.js

@@ -2,6 +2,8 @@
 
 import React, { Component } from 'react';
 
+import { getFixedPlatformStyle } from '../../styles';
+
 /**
  * {@code AbstractContainer} component's property types.
  */
@@ -80,6 +82,7 @@ export default class AbstractContainer<P: Props> extends Component<P> {
     _render(type, props?: P) {
         const {
             children,
+            style,
 
             /* eslint-disable no-unused-vars */
 
@@ -94,7 +97,12 @@ export default class AbstractContainer<P: Props> extends Component<P> {
             ...filteredProps
         } = props || this.props;
 
+        const _style = getFixedPlatformStyle(style);
+
         // $FlowFixMe
-        return React.createElement(type, filteredProps, children);
+        return React.createElement(type, {
+            style: _style,
+            ...filteredProps
+        }, children);
     }
 }

react/features/base/styles/functions.native.js

@@ -0,0 +1,18 @@
+// @flow
+
+import { type StyleType } from './functions.any';
+
+export * from './functions.any';
+
+/**
+ * Fixes the style prop that is passed to a platform generic component based on platform specific
+ * format requirements.
+ *
+ * @param {StyleType} style - The passed style prop to the component.
+ * @returns {StyleType}
+ */
+export function getFixedPlatformStyle(style: StyleType): StyleType {
+    // There is nothing to do on mobile - yet.
+
+    return style;
+}

react/features/base/styles/functions.web.js

@@ -0,0 +1,26 @@
+// @flow
+
+import { type StyleType } from './functions.any';
+
+export * from './functions.any';
+
+/**
+ * Fixes the style prop that is passed to a platform generic component based on platform specific
+ * format requirements.
+ *
+ * @param {StyleType} style - The passed style prop to the component.
+ * @returns {StyleType}
+ */
+export function getFixedPlatformStyle(style: StyleType): StyleType {
+    if (Array.isArray(style)) {
+        const _style = {};
+
+        for (const component of style) {
+            Object.assign(_style, component);
+        }
+
+        return _style;
+    }
+
+    return style;
+}