Merge pull request #3013 from saghul/toolbox-disabled-button

[RN] Toolbox disabled button styles

react/features/base/styles/functions.js

@@ -5,6 +5,7 @@ import { Platform } from '../react';
 import { ColorPalette } from './components';
 
 declare type StyleSheet = Object;
+export type StyleType = StyleSheet | Array<StyleSheet>;
 
 /**
  * The list of the well-known style properties which may not be numbers on Web
@@ -14,7 +15,35 @@ declare type StyleSheet = Object;
  */
 const _WELL_KNOWN_NUMBER_PROPERTIES = [ 'height', 'width' ];
 
-/* eslint-disable flowtype/space-before-type-colon */
+/**
+ * Combines the given 2 styles into a single one.
+ *
+ * @param {StyleType} a - An object or array of styles.
+ * @param {StyleType} b - An object or array of styles.
+ * @private
+ * @returns {StyleType} - The merged styles.
+ */
+export function combineStyles(a: StyleType, b: StyleType): StyleType {
+    const result = [];
+
+    if (a) {
+        if (Array.isArray(a)) {
+            result.push(...a);
+        } else {
+            result.push(a);
+        }
+    }
+
+    if (b) {
+        if (Array.isArray(b)) {
+            result.push(...b);
+        } else {
+            result.push(b);
+        }
+    }
+
+    return result;
+}
 
 /**
  * Create a style sheet using the provided style definitions.
@@ -25,11 +54,8 @@ const _WELL_KNOWN_NUMBER_PROPERTIES = [ 'height', 'width' ];
  * (often platform-independent) styles.
  * @returns {StyleSheet}
  */
-export function createStyleSheet(styles: StyleSheet, overrides: StyleSheet = {})
+export function createStyleSheet(
-        : StyleSheet {
+        styles: StyleSheet, overrides: StyleSheet = {}): StyleSheet {
-
-/* eslint-enable flowtype/space-before-type-colon */
-
     const combinedStyles = {};
 
     for (const k of Object.keys(styles)) {

react/features/base/toolbox/components/AbstractButton.js

@@ -2,6 +2,8 @@
 
 import React, { Component } from 'react';
 
+import { combineStyles } from '../../styles';
+
 import type { Styles } from './AbstractToolboxItem';
 import ToolboxItem from './ToolboxItem';
 
@@ -12,6 +14,12 @@ export type Props = {
      */
     afterClick: ?Function,
 
+    /**
+     * Extra styles which will be applied in conjunction with `styles` or
+     * `toggledStyles` when the button is disabled;
+     */
+    disabledStyles: ?Styles,
+
     /**
      * Whether to show the label or not.
      */
@@ -38,12 +46,27 @@ export type Props = {
     visible: boolean
 };
 
+/**
+ * Default style for disabled buttons.
+ */
+export const defaultDisabledButtonStyles = {
+    iconStyle: {
+        opacity: 0.5
+    },
+    labelStyle: {
+        opacity: 0.5
+    },
+    style: undefined,
+    underlayColor: undefined
+};
+
 /**
  * An abstract implementation of a button.
  */
 export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
     static defaultProps = {
         afterClick: undefined,
+        disabledStyles: defaultDisabledButtonStyles,
         showLabel: false,
         styles: undefined,
         toggledStyles: undefined,
@@ -151,10 +174,25 @@ export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
      * @private
      * @returns {?Styles}
      */
-    _getStyles() {
+    _getStyles(): ?Styles {
-        const { styles, toggledStyles } = this.props;
+        const { disabledStyles, styles, toggledStyles } = this.props;
+        const buttonStyles
+            = (this._isToggled() ? toggledStyles : styles) || styles;
 
-        return (this._isToggled() ? toggledStyles : styles) || styles;
+        if (this._isDisabled() && buttonStyles && disabledStyles) {
+            return {
+                iconStyle: combineStyles(
+                    buttonStyles.iconStyle, disabledStyles.iconStyle),
+                labelStyle: combineStyles(
+                    buttonStyles.labelStyle, disabledStyles.labelStyle),
+                style: combineStyles(
+                    buttonStyles.style, disabledStyles.style),
+                underlayColor:
+                    disabledStyles.underlayColor || buttonStyles.underlayColor
+            };
+        }
+
+        return buttonStyles;
     }
 
     /**

react/features/base/toolbox/components/AbstractToolboxItem.js

@@ -2,27 +2,29 @@
 
 import { Component } from 'react';
 
+import type { StyleType } from '../../styles';
+
 export type Styles = {
 
     /**
      * Style for the item's icon.
      */
-    iconStyle: Object,
+    iconStyle: StyleType,
 
     /**
      * Style for the item's label.
      */
-    labelStyle: Object,
+    labelStyle: StyleType,
 
     /**
      * Style for the item itself.
      */
-    style: Object,
+    style: StyleType,
 
     /**
      * Color for the item underlay (shows when clicked).
      */
-    underlayColor: string
+    underlayColor: ?string
 };
 
 export type Props = {