From af7ba137e202aec98f8c890797f574dc32469e27 Mon Sep 17 00:00:00 2001 From: Rahul kushwaha Date: Thu, 29 Jun 2023 18:02:08 +0530 Subject: [PATCH 1/5] revert usage of InteractionManager in Modal --- src/components/Modal/index.web.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/Modal/index.web.js b/src/components/Modal/index.web.js index 6e304f0420c2..065b3a9f210f 100644 --- a/src/components/Modal/index.web.js +++ b/src/components/Modal/index.web.js @@ -1,5 +1,4 @@ import React, {useState} from 'react'; -import {InteractionManager} from 'react-native'; import withWindowDimensions from '../withWindowDimensions'; import BaseModal from './BaseModal'; import {propTypes, defaultProps} from './modalPropTypes'; @@ -16,7 +15,7 @@ function Modal(props) { return; } - InteractionManager.runAfterInteractions(() => StatusBar.setBackgroundColor(color)); + StatusBar.setBackgroundColor(color); }; const hideModal = () => { From 36b206fc3f5f6e5b06400a65c90dc9f70ddb0668 Mon Sep 17 00:00:00 2001 From: Rahul kushwaha Date: Fri, 30 Jun 2023 21:21:45 +0530 Subject: [PATCH 2/5] accept rgba and rgb also --- src/styles/StyleUtils.js | 45 ++++++++++++++++++++++++++++++++++++---- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index b7cbdaa20ee2..c3daec26f8e5 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -689,24 +689,61 @@ function convertRGBToUnitValues(red, green, blue) { return [red / 255, green / 255, blue / 255]; } +/** + * Converts RGB values to a hexadecimal color representation. + * @param {number} red - The red component of the RGB color (0-255). + * @param {number} green - The green component of the RGB color (0-255). + * @param {number} blue - The blue component of the RGB color (0-255). + * @returns {string} The hexadecimal representation of the RGB color. + */ +function convertRGBToHex(red, green, blue) { + // Convert individual RGB components to hexadecimal + const redHex = red.toString(16).padStart(2, '0'); + const greenHex = green.toString(16).padStart(2, '0'); + const blueHex = blue.toString(16).padStart(2, '0'); + + // Combine the hexadecimal components + const hexColor = `#${redHex}${greenHex}${blueHex}`; + + return hexColor; +} + +/** + * Matches an RGBA or RGB color value and extracts the color components. + * @param {string} color - The RGBA or RGB color value to match and extract components from. + * @returns {Array} An array containing the extracted color components [red, green, blue, alpha]. + * Returns null if the input string does not match the pattern. + */ +function extractValuesFromRGB(color) { + const rgbaPattern = /rgba?\((?[.\d]+)[, ]+(?[.\d]+)[, ]+(?[.\d]+)(?:\s?[,/]\s?(?[.\d]+%?))?\)$/i; + + const matchRGBA = color.match(rgbaPattern); + if (matchRGBA) { + const [, red, green, blue, alpha] = matchRGBA; + return [parseInt(red, 10), parseInt(green, 10), parseInt(blue, 10), alpha ? parseFloat(alpha) : 1]; + } + + return null; +} + /** * Determines the theme color for a modal based on the app's background color, * the modal's backdrop, and the backdrop's opacity. * * @param {String} bgColor - theme background color - * @returns {String} The theme color as an RGB value. + * @returns {String} The theme color as an hex value. */ function getThemeBackgroundColor(bgColor = themeColors.appBG) { const backdropOpacity = variables.modalFullscreenBackdropOpacity; - const [backgroundRed, backgroundGreen, backgroundBlue] = hexadecimalToRGBArray(bgColor); + const [backgroundRed, backgroundGreen, backgroundBlue] = extractValuesFromRGB(bgColor) || hexadecimalToRGBArray(bgColor); const [backdropRed, backdropGreen, backdropBlue] = hexadecimalToRGBArray(themeColors.modalBackdrop); const normalizedBackdropRGB = convertRGBToUnitValues(backdropRed, backdropGreen, backdropBlue); const normalizedBackgroundRGB = convertRGBToUnitValues(backgroundRed, backgroundGreen, backgroundBlue); const themeRGBNormalized = convertRGBAToRGB(normalizedBackdropRGB, normalizedBackgroundRGB, backdropOpacity); const themeRGB = convertUnitValuesToRGB(...themeRGBNormalized); - - return `rgb(${themeRGB.join(', ')})`; + const themeHex = convertRGBToHex(...themeRGB); + return themeHex; } /** From f8b42163c08b790f5e53db5df5e4e7f8f7408dc1 Mon Sep 17 00:00:00 2001 From: Rahul kushwaha Date: Sun, 2 Jul 2023 17:00:54 +0530 Subject: [PATCH 3/5] revert conversion of rgb to hex --- src/styles/StyleUtils.js | 25 +++---------------------- 1 file changed, 3 insertions(+), 22 deletions(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 7a8be2fd987b..32ec08414cff 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -701,25 +701,6 @@ function convertRGBToUnitValues(red, green, blue) { return [red / 255, green / 255, blue / 255]; } -/** - * Converts RGB values to a hexadecimal color representation. - * @param {number} red - The red component of the RGB color (0-255). - * @param {number} green - The green component of the RGB color (0-255). - * @param {number} blue - The blue component of the RGB color (0-255). - * @returns {string} The hexadecimal representation of the RGB color. - */ -function convertRGBToHex(red, green, blue) { - // Convert individual RGB components to hexadecimal - const redHex = red.toString(16).padStart(2, '0'); - const greenHex = green.toString(16).padStart(2, '0'); - const blueHex = blue.toString(16).padStart(2, '0'); - - // Combine the hexadecimal components - const hexColor = `#${redHex}${greenHex}${blueHex}`; - - return hexColor; -} - /** * Matches an RGBA or RGB color value and extracts the color components. * @param {string} color - The RGBA or RGB color value to match and extract components from. @@ -743,7 +724,7 @@ function extractValuesFromRGB(color) { * the modal's backdrop, and the backdrop's opacity. * * @param {String} bgColor - theme background color - * @returns {String} The theme color as an hex value. + * @returns {String} The theme color as an RGB value. */ function getThemeBackgroundColor(bgColor = themeColors.appBG) { const backdropOpacity = variables.modalFullscreenBackdropOpacity; @@ -754,8 +735,8 @@ function getThemeBackgroundColor(bgColor = themeColors.appBG) { const normalizedBackgroundRGB = convertRGBToUnitValues(backgroundRed, backgroundGreen, backgroundBlue); const themeRGBNormalized = convertRGBAToRGB(normalizedBackdropRGB, normalizedBackgroundRGB, backdropOpacity); const themeRGB = convertUnitValuesToRGB(...themeRGBNormalized); - const themeHex = convertRGBToHex(...themeRGB); - return themeHex; + + return `rgb(${themeRGB.join(', ')})`; } /** From 88af2c46d1ba6e4f8c7ff2414b80a15f001f3615 Mon Sep 17 00:00:00 2001 From: Rahul kushwaha Date: Thu, 6 Jul 2023 05:00:35 +0530 Subject: [PATCH 4/5] added new line --- src/styles/StyleUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 32ec08414cff..1ea2261f74e1 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -703,13 +703,13 @@ function convertRGBToUnitValues(red, green, blue) { /** * Matches an RGBA or RGB color value and extracts the color components. + * * @param {string} color - The RGBA or RGB color value to match and extract components from. * @returns {Array} An array containing the extracted color components [red, green, blue, alpha]. * Returns null if the input string does not match the pattern. */ function extractValuesFromRGB(color) { const rgbaPattern = /rgba?\((?[.\d]+)[, ]+(?[.\d]+)[, ]+(?[.\d]+)(?:\s?[,/]\s?(?[.\d]+%?))?\)$/i; - const matchRGBA = color.match(rgbaPattern); if (matchRGBA) { const [, red, green, blue, alpha] = matchRGBA; From 74e1643c9eb0dc52a2cfe17e37afb2049464540b Mon Sep 17 00:00:00 2001 From: Rahul kushwaha Date: Thu, 6 Jul 2023 05:03:04 +0530 Subject: [PATCH 5/5] prettier --- src/styles/StyleUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/styles/StyleUtils.js b/src/styles/StyleUtils.js index 1ea2261f74e1..59a5938ef923 100644 --- a/src/styles/StyleUtils.js +++ b/src/styles/StyleUtils.js @@ -703,7 +703,7 @@ function convertRGBToUnitValues(red, green, blue) { /** * Matches an RGBA or RGB color value and extracts the color components. - * + * * @param {string} color - The RGBA or RGB color value to match and extract components from. * @returns {Array} An array containing the extracted color components [red, green, blue, alpha]. * Returns null if the input string does not match the pattern.