From 2128c842126a8a57210aaf171b3b1625bdd741d5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Wed, 23 May 2018 10:02:20 +0200 Subject: [PATCH 1/2] [RN] Add utility function to combine 2 sets of styles --- react/features/base/styles/functions.js | 38 +++++++++++++++++++++---- 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/react/features/base/styles/functions.js b/react/features/base/styles/functions.js index 902bf87d0..9b29aa576 100644 --- a/react/features/base/styles/functions.js +++ b/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; /** * 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 = {}) - : StyleSheet { - -/* eslint-enable flowtype/space-before-type-colon */ - +export function createStyleSheet( + styles: StyleSheet, overrides: StyleSheet = {}): StyleSheet { const combinedStyles = {}; for (const k of Object.keys(styles)) { From 83ede6603706392ac78fa9c5869097a8fc324a12 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sa=C3=BAl=20Ibarra=20Corretg=C3=A9?= Date: Tue, 22 May 2018 12:41:23 +0200 Subject: [PATCH 2/2] feat(toolbox): add disabledStyles to AbstractButton It allows for specifying an override style collection which is applied when the button is disabled. --- .../base/toolbox/components/AbstractButton.js | 44 +++++++++++++++++-- .../toolbox/components/AbstractToolboxItem.js | 10 +++-- 2 files changed, 47 insertions(+), 7 deletions(-) diff --git a/react/features/base/toolbox/components/AbstractButton.js b/react/features/base/toolbox/components/AbstractButton.js index 1b8293271..3e8c365e6 100644 --- a/react/features/base/toolbox/components/AbstractButton.js +++ b/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 extends Component { static defaultProps = { afterClick: undefined, + disabledStyles: defaultDisabledButtonStyles, showLabel: false, styles: undefined, toggledStyles: undefined, @@ -151,10 +174,25 @@ export default class AbstractButton extends Component { * @private * @returns {?Styles} */ - _getStyles() { - const { styles, toggledStyles } = this.props; + _getStyles(): ?Styles { + 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; } /** diff --git a/react/features/base/toolbox/components/AbstractToolboxItem.js b/react/features/base/toolbox/components/AbstractToolboxItem.js index e044bd59b..f45cf68d7 100644 --- a/react/features/base/toolbox/components/AbstractToolboxItem.js +++ b/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 = {