React (Native) optimizations/performance

Remove toolbar button and icon style literals from the render method of
Toolbox.native.js.

Additionally, comply w/ coding style.

react/features/toolbox/components/Toolbox.native.js

@@ -120,18 +120,16 @@ class Toolbox extends Component {
     _getMuteButtonStyles(mediaType) {
         let iconName;
         let iconStyle;
-        let style = styles.primaryToolbarButton;
+        let style;
 
         if (this.props[`_${mediaType}Muted`]) {
             iconName = this[`${mediaType}MutedIcon`];
-            iconStyle = styles.whiteIcon;
+            iconStyle = styles.whitePrimaryToolbarButtonIcon;
-            style = {
+            style = styles.whitePrimaryToolbarButton;
-                ...style,
-                backgroundColor: ColorPalette.buttonUnderlay
-            };
         } else {
             iconName = this[`${mediaType}Icon`];
-            iconStyle = styles.icon;
+            iconStyle = styles.primaryToolbarButtonIcon;
+            style = styles.primaryToolbarButton;
         }
 
         return {
@@ -163,12 +161,9 @@ class Toolbox extends Component {
                     style = { audioButtonStyles.style } />
                 <ToolbarButton
                     iconName = 'hangup'
-                    iconStyle = { styles.whiteIcon }
+                    iconStyle = { styles.whitePrimaryToolbarButtonIcon }
                     onClick = { this.props._onHangup }
-                    style = {{
+                    style = { styles.hangup }
-                        ...styles.primaryToolbarButton,
-                        backgroundColor: ColorPalette.red
-                    }}
                     underlayColor = { ColorPalette.buttonUnderlay } />
                 <ToolbarButton
                     iconName = { videoButtonStyles.iconName }
@@ -189,7 +184,7 @@ class Toolbox extends Component {
      * @returns {ReactElement}
      */
     _renderSecondaryToolbar() {
-        const iconStyle = styles.secondaryToolbarIcon;
+        const iconStyle = styles.secondaryToolbarButtonIcon;
         const style = styles.secondaryToolbarButton;
         const underlayColor = 'transparent';
 
@@ -213,7 +208,7 @@ class Toolbox extends Component {
                     underlayColor = { underlayColor } />
                 <ToolbarButton
                     iconName = 'hangup'
-                    iconStyle = { styles.audioOnlyIcon }
+                    iconStyle = { styles.toggleAudioOnlyIcon }
                     onClick = { this.props._onToggleAudioOnly }
                     style = { style }
                     underlayColor = { underlayColor } />

react/features/toolbox/components/styles.js

@@ -1,92 +1,91 @@
 import { BoxModel, ColorPalette, createStyleSheet } from '../../base/styles';
 
-/**
- * The base style for (toolbar) buttons.
- *
- * @type {Object}
- */
-const button = {
-    borderRadius: 30,
-    borderWidth: 0,
-    flex: 0,
-    flexDirection: 'row',
-    height: 60,
-    justifyContent: 'center',
-    margin: BoxModel.margin,
-    width: 60
-};
-
-/**
- * Small toolbar button.
- *
- * @type {{borderRadius: number, flex: number, flexDirection: string,
- * height: number, justifyContent: string, margin: number, width: number}}
- */
-const smallButton = {
-    borderRadius: 20,
-    flex: 0,
-    flexDirection: 'column',
-    height: 40,
-    justifyContent: 'center',
-    margin: BoxModel.margin / 2,
-    width: 40
-};
-
-/**
- * The base style for icons.
- *
- * @type {Object}
- */
-const icon = {
-    alignSelf: 'center',
-    color: ColorPalette.darkGrey,
-    fontSize: 24
-};
-
-/**
- * Small toolbar button icon.
- *
- * @type {{fontSize: number}}
- */
-const smallIcon = {
-    ...icon,
-    fontSize: 18
-};
-
 /**
  * The base style for toolbars.
  *
  * @type {Object}
  */
-const toolbar = {
+const _toolbar = {
     flex: 1,
     position: 'absolute'
 };
 
+/**
+ * The base style of toolbar buttons (in primaryToolbar and secondaryToolbar).
+ *
+ * @type {Object}
+ */
+const _toolbarButton = {
+    flex: 0,
+    justifyContent: 'center',
+    opacity: 0.7
+};
+
+/**
+ * The base icon style of toolbar buttons (in primaryToolbar and
+ * secondaryToolbar).
+ *
+ * @type {Object}
+ */
+const _toolbarButtonIcon = {
+    alignSelf: 'center'
+};
+
+/**
+ * The style of toolbar buttons in primaryToolbar.
+ */
+const primaryToolbarButton = {
+    ..._toolbarButton,
+    backgroundColor: ColorPalette.white,
+    borderRadius: 30,
+    borderWidth: 0,
+    flexDirection: 'row',
+    height: 60,
+    margin: BoxModel.margin,
+    width: 60
+};
+
+/**
+ * The icon style of the toolbar buttons in primaryToolbar.
+ *
+ * @type {Object}
+ */
+const primaryToolbarButtonIcon = {
+    ..._toolbarButtonIcon,
+    color: ColorPalette.darkGrey,
+    fontSize: 24
+};
+
+/**
+ * The icon style of the toolbar buttons in secondaryToolbar.
+ *
+ * @type {Object}
+ */
+const secondaryToolbarButtonIcon = {
+    ..._toolbarButtonIcon,
+    color: ColorPalette.white,
+    fontSize: 18
+};
+
 /**
  * The (conference) Toolbox/Toolbar related styles.
  */
 export const styles = createStyleSheet({
     /**
-     * The audio only (secondary) toolbar icon style.
+     * The style of the toolbar button in {@link #primaryToolbar} which
+     * hangs the current conference up.
      */
-    audioOnlyIcon: {
+    hangup: {
-        ...smallIcon,
+        ...primaryToolbarButton,
-        color: ColorPalette.white,
+        backgroundColor: ColorPalette.red
-        transform: [ { rotate: '135deg' } ]
     },
 
-    /**
-     * The toolbar button icon style.
-     */
-    icon,
-
     /**
      * The style of the toolbar which contains the primary buttons such as
      * hangup, audio and video mute.
      */
     primaryToolbar: {
-        ...toolbar,
+        ..._toolbar,
         bottom: 3 * BoxModel.margin,
         flexDirection: 'row',
         justifyContent: 'center',
@@ -95,20 +94,21 @@ export const styles = createStyleSheet({
     },
 
     /**
-     * The style of button in primaryToolbar.
+     * The style of toolbar buttons in {@link #primaryToolbar}.
      */
-    primaryToolbarButton: {
+    primaryToolbarButton,
-        ...button,
+
-        backgroundColor: ColorPalette.white,
+    /**
-        opacity: 0.7
+     * The icon style of the toolbar buttons in {@link #primaryToolbar}.
-    },
+     */
+    primaryToolbarButtonIcon,
 
     /**
      * The style of the toolbar which contains the secondary buttons such as
      * toggle camera facing mode.
      */
     secondaryToolbar: {
-        ...toolbar,
+        ..._toolbar,
         bottom: 0,
         flexDirection: 'column',
         right: BoxModel.margin,
@@ -116,25 +116,35 @@ export const styles = createStyleSheet({
     },
 
     /**
-     * The style of button in secondaryToolbar.
+     * The style of toolbar buttons in {@link #secondaryToolbar}.
      */
     secondaryToolbarButton: {
-        ...smallButton,
+        ..._toolbarButton,
         backgroundColor: ColorPalette.darkGrey,
-        opacity: 0.7
+        borderRadius: 20,
+        flexDirection: 'column',
+        height: 40,
+        margin: BoxModel.margin / 2,
+        width: 40
     },
 
     /**
-     * The secondary toolbar icon style.
+     * The icon style of the toolbar buttons in {@link #secondaryToolbar}.
      */
-    secondaryToolbarIcon: {
+    secondaryToolbarButtonIcon,
-        ...smallIcon,
+
-        color: ColorPalette.white
+    /**
+     * The icon style of the toolbar button in {@link #secondaryToolbar} which
+     * toggles the audio-only mode of the current conference.
+     */
+    toggleAudioOnlyIcon: {
+        ...secondaryToolbarButtonIcon,
+        transform: [ { rotate: '135deg' } ]
     },
 
     /**
-     * The style of the root/top-level Container of Toolbar that contains
+     * The style of the root/top-level {@link Container} of {@link Toolbox}
-     * toolbars.
+     * which contains {@link Toolbar}s.
      */
     toolbarContainer: {
         bottom: 0,
@@ -145,10 +155,20 @@ export const styles = createStyleSheet({
     },
 
     /**
-     * The toolbar white button icon style.
+     * The style of toolbar buttons in {@link #primaryToolbar} which display
+     * white icons.
      */
-    whiteIcon: {
+    whitePrimaryToolbarButton: {
-        ...icon,
+        ...primaryToolbarButton,
+        backgroundColor: ColorPalette.buttonUnderlay
+    },
+
+    /**
+     * The icon style of toolbar buttons in {@link #primaryToolbar} which
+     * display white icons.
+     */
+    whitePrimaryToolbarButtonIcon: {
+        ...primaryToolbarButtonIcon,
         color: ColorPalette.white
     }
 });