Add StyleUtils

ajayesivan · Nov 24, 2021 · 3c41171 · 3c41171
1 parent 47d756e
commit 3c41171
Show file tree

Hide file tree

Showing 21 changed files with 545 additions and 515 deletions.
diff --git a/src/components/Badge.js b/src/components/Badge.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import {Pressable, View} from 'react-native';
 import PropTypes from 'prop-types';
-import styles, {getBadgeColorStyle} from '../styles/styles';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 import Text from './Text';
 
 const propTypes = {
@@ -38,7 +39,7 @@ const Badge = (props) => {
     const wrapperStyles = ({pressed}) => ([
         styles.badge,
         styles.ml2,
-        getBadgeColorStyle(props.success, props.error, pressed),
+        StyleUtils.getBadgeColorStyle(props.success, props.error, pressed),
         ...props.badgeStyles,
     ]);
 

diff --git a/src/components/ContextMenuItem.js b/src/components/ContextMenuItem.js
@@ -4,7 +4,8 @@ import {Pressable} from 'react-native';
 import MenuItem from './MenuItem';
 import Tooltip from './Tooltip';
 import Icon from './Icon';
-import styles, {getIconFillColor, getButtonBackgroundColorStyle} from '../styles/styles';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 import getButtonState from '../libs/getButtonState';
 
 const propTypes = {
@@ -89,14 +90,14 @@ class ContextMenuItem extends Component {
                             style={
                                 ({hovered, pressed}) => [
                                     styles.reportActionContextMenuMiniButton,
-                                    getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.state.success)),
+                                    StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed, this.state.success)),
                                 ]
                             }
                         >
                             {({hovered, pressed}) => (
                                 <Icon
                                     src={icon}
-                                    fill={getIconFillColor(getButtonState(hovered, pressed, this.state.success))}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed, this.state.success))}
                                 />
                             )}
                         </Pressable>

diff --git a/src/components/FAB/FAB.js b/src/components/FAB/FAB.js
@@ -4,7 +4,8 @@ import {
 } from 'react-native';
 import Icon from '../Icon';
 import * as Expensicons from '../Icon/Expensicons';
-import styles, {getAnimatedFABStyle} from '../../styles/styles';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
 import themeColors from '../../styles/themes/default';
 import fabPropTypes from './fabPropTypes';
 import Tooltip from '../Tooltip';
@@ -69,7 +70,7 @@ class FAB extends PureComponent {
                     onPress={this.props.onPress}
                     style={[
                         styles.floatingActionButton,
-                        getAnimatedFABStyle(rotate, backgroundColor),
+                        StyleUtils.getAnimatedFABStyle(rotate, backgroundColor),
                     ]}
                 >
                     <AnimatedIcon src={Expensicons.Plus} fill={fill} />

diff --git a/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js b/src/components/HTMLEngineProvider/BaseHTMLEngineProvider.js
@@ -12,7 +12,8 @@ import {
 import PropTypes from 'prop-types';
 import lodashGet from 'lodash/get';
 import Config from '../../CONFIG';
-import styles, {webViewStyles, getFontFamilyMonospace} from '../../styles/styles';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
 import fontFamily from '../../styles/fontFamily';
 import AnchorForCommentsOnly from '../AnchorForCommentsOnly';
 import InlineCodeBlock from '../InlineCodeBlock';
@@ -150,7 +151,7 @@ function CodeRenderer(props) {
     const {boxModelStyle, otherStyle: textStyle} = splitBoxModelStyle(props.style);
 
     // Get the correct fontFamily variant based in the fontStyle and fontWeight
-    const font = getFontFamilyMonospace({
+    const font = StyleUtils.getFontFamilyMonospace({
         fontStyle: textStyle.fontStyle,
         fontWeight: textStyle.fontWeight,
     });
@@ -243,7 +244,7 @@ function ImgRenderer(props) {
                 >
                     <ThumbnailImage
                         previewSourceURL={previewSource}
-                        style={webViewStyles.tagStyles.img}
+                        style={styles.webViewStyles.tagStyles.img}
                         isAuthTokenRequired={isAttachment}
                     />
                 </TouchableOpacity>
@@ -297,8 +298,8 @@ const BaseHTMLEngineProvider = (props) => {
     return (
         <TRenderEngineProvider
             customHTMLElementModels={customHTMLElementModels}
-            baseStyle={webViewStyles.baseFontStyle}
-            tagsStyles={webViewStyles.tagStyles}
+            baseStyle={styles.webViewStyles.baseFontStyle}
+            tagsStyles={styles.webViewStyles.tagStyles}
             enableCSSInlineProcessing={false}
             dangerouslyDisableWhitespaceCollapsing={false}
             systemFonts={EXTRA_FONTS}

diff --git a/src/components/ImageView/index.js b/src/components/ImageView/index.js
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import {
     View, Image, Pressable,
 } from 'react-native';
-import styles, {getZoomCursorStyle, getZoomSizingStyle} from '../../styles/styles';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
 import canUseTouchScreen from '../../libs/canUseTouchscreen';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions';
 
@@ -180,8 +181,8 @@ class ImageView extends PureComponent {
             >
                 <Pressable
                     style={{
-                        ...getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale, this.state.containerHeight),
-                        ...getZoomCursorStyle(this.state.isZoomed, this.state.isDragging),
+                        ...StyleUtils.getZoomSizingStyle(this.state.isZoomed, this.state.imgWidth, this.state.imgHeight, this.state.zoomScale, this.state.containerHeight),
+                        ...StyleUtils.getZoomCursorStyle(this.state.isZoomed, this.state.isDragging),
                         ...this.state.isZoomed ? styles.pRelative : styles.pAbsolute,
                         ...styles.flex1,
                     }}

diff --git a/src/components/MenuItem.js b/src/components/MenuItem.js
@@ -4,7 +4,8 @@ import {
     View, Pressable,
 } from 'react-native';
 import Text from './Text';
-import styles, {getButtonBackgroundColorStyle, getIconFillColor} from '../styles/styles';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 import Icon from './Icon';
 import * as Expensicons from './Icon/Expensicons';
 import getButtonState from '../libs/getButtonState';
@@ -48,7 +49,7 @@ const MenuItem = props => (
         }}
         style={({hovered, pressed}) => ([
             styles.popoverMenuItem,
-            getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive)),
+            StyleUtils.getButtonBackgroundColorStyle(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive)),
             ..._.isArray(props.wrapperStyle) ? props.wrapperStyle : [props.wrapperStyle],
         ])}
         disabled={props.disabled}
@@ -67,7 +68,7 @@ const MenuItem = props => (
                                 src={props.icon}
                                 width={props.iconWidth}
                                 height={props.iconHeight}
-                                fill={props.iconFill || getIconFillColor(
+                                fill={props.iconFill || StyleUtils.getIconFillColor(
                                     getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive),
                                 )}
                             />
@@ -119,7 +120,7 @@ const MenuItem = props => (
                         <View style={styles.popoverMenuIcon}>
                             <Icon
                                 src={props.iconRight}
-                                fill={getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive))}
+                                fill={StyleUtils.getIconFillColor(getButtonState(props.focused || hovered, pressed, props.success, props.disabled, props.interactive))}
                             />
                         </View>
                     )}

diff --git a/src/components/Modal/BaseModal.js b/src/components/Modal/BaseModal.js
@@ -3,7 +3,8 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ReactNativeModal from 'react-native-modal';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
-import styles, {getModalPaddingStyles, getSafeAreaPadding} from '../../styles/styles';
+import styles from '../../styles/styles';
+import * as StyleUtils from '../../styles/StyleUtils';
 import themeColors from '../../styles/themes/default';
 import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './modalPropTypes';
 import getModalStyles from '../../styles/getModalStyles';
@@ -119,9 +120,9 @@ class BaseModal extends PureComponent {
                             paddingBottom: safeAreaPaddingBottom,
                             paddingLeft: safeAreaPaddingLeft,
                             paddingRight: safeAreaPaddingRight,
-                        } = getSafeAreaPadding(insets);
+                        } = StyleUtils.getSafeAreaPadding(insets);
 
-                        const modalPaddingStyles = getModalPaddingStyles({
+                        const modalPaddingStyles = StyleUtils.getModalPaddingStyles({
                             safeAreaPaddingTop,
                             safeAreaPaddingBottom,
                             safeAreaPaddingLeft,

diff --git a/src/components/ScreenWrapper.js b/src/components/ScreenWrapper.js
@@ -5,7 +5,8 @@ import {View} from 'react-native';
 import {withNavigation} from '@react-navigation/compat';
 import {SafeAreaInsetsContext} from 'react-native-safe-area-context';
 import {withOnyx} from 'react-native-onyx';
-import styles, {getSafeAreaPadding} from '../styles/styles';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 import HeaderGap from './HeaderGap';
 import KeyboardShortcutsModal from './KeyboardShortcutsModal';
 import KeyboardShortcut from '../libs/KeyboardShortcut';
@@ -97,7 +98,7 @@ class ScreenWrapper extends React.Component {
         return (
             <SafeAreaInsetsContext.Consumer>
                 {(insets) => {
-                    const {paddingTop, paddingBottom} = getSafeAreaPadding(insets);
+                    const {paddingTop, paddingBottom} = StyleUtils.getSafeAreaPadding(insets);
                     const paddingStyle = {};
 
                     if (this.props.includePaddingTop) {

diff --git a/src/components/TextInputAutoWidth.js b/src/components/TextInputAutoWidth.js
@@ -2,7 +2,8 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
-import styles, {getAutoGrowTextInputStyle} from '../styles/styles';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 import Text from './Text';
 import TextInputFocusable from './TextInputFocusable';
 
@@ -45,7 +46,7 @@ class TextInputAutoWidth extends React.Component {
             <>
                 <View>
                     <TextInputFocusable
-                        style={[this.props.inputStyle, getAutoGrowTextInputStyle(this.state.textInputWidth)]}
+                        style={[this.props.inputStyle, StyleUtils.getAutoGrowTextInputStyle(this.state.textInputWidth)]}
                         ref={this.props.forwardedRef}
                         /* eslint-disable-next-line react/jsx-props-no-spreading */
                         {...propsWithoutStyles}

diff --git a/src/components/ThumbnailImage.js b/src/components/ThumbnailImage.js
@@ -4,7 +4,8 @@ import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import ImageWithSizeCalculation from './ImageWithSizeCalculation';
 import addEncryptedAuthTokenToURL from '../libs/addEncryptedAuthTokenToURL';
-import styles, {getWidthAndHeightStyle} from '../styles/styles';
+import styles from '../styles/styles';
+import * as StyleUtils from '../styles/StyleUtils';
 
 const propTypes = {
     /** Source URL for the preview image */
@@ -52,7 +53,7 @@ class ThumbnailImage extends PureComponent {
         return (
             <View
                 style={[
-                    getWidthAndHeightStyle(this.state.thumbnailWidth, this.state.thumbnailHeight),
+                    StyleUtils.getWidthAndHeightStyle(this.state.thumbnailWidth, this.state.thumbnailHeight),
                     styles.alignItemsCenter,
                     styles.justifyContentCenter,
                     styles.overflowHidden,

diff --git a/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js b/src/libs/Navigation/AppNavigator/BaseDrawerNavigator.js
@@ -4,7 +4,9 @@ import PropTypes from 'prop-types';
 import {createDrawerNavigator} from '@react-navigation/drawer';
 import {View} from 'react-native';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
-import styles, {getNavigationDrawerStyle, getNavigationDrawerType} from '../../../styles/styles';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
+
 import Navigation from '../Navigation';
 
 const propTypes = {
@@ -43,8 +45,8 @@ const BaseDrawerNavigator = (props) => {
             screenOptions={{
                 cardStyle: styles.navigationScreenCardStyle,
                 headerShown: false,
-                drawerType: getNavigationDrawerType(props.isSmallScreenWidth),
-                drawerStyle: getNavigationDrawerStyle(
+                drawerType: StyleUtils.getNavigationDrawerType(props.isSmallScreenWidth),
+                drawerStyle: StyleUtils.getNavigationDrawerStyle(
                     props.isSmallScreenWidth,
                 ),
                 swipeEdgeWidth: 500,

diff --git a/src/pages/home/report/EmojiPickerMenu/index.js b/src/pages/home/report/EmojiPickerMenu/index.js
@@ -3,7 +3,8 @@ import {View, FlatList} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
 import CONST from '../../../../CONST';
-import styles, {getEmojiPickerStyle} from '../../../../styles/styles';
+import styles from '../../../../styles/styles';
+import * as StyleUtils from '../../../../styles/StyleUtils';
 import themeColors from '../../../../styles/themes/default';
 import emojis from '../../../../../assets/emojis';
 import EmojiPickerMenuItem from '../EmojiPickerMenuItem';
@@ -356,7 +357,7 @@ class EmojiPickerMenu extends Component {
     render() {
         return (
             <View
-                style={[styles.emojiPickerContainer, getEmojiPickerStyle(this.props.isSmallScreenWidth)]}
+                style={[styles.emojiPickerContainer, StyleUtils.getEmojiPickerStyle(this.props.isSmallScreenWidth)]}
                 pointerEvents={this.state.arePointerEventsDisabled ? 'none' : 'auto'}
             >
                 {!this.props.isSmallScreenWidth && (

diff --git a/src/pages/home/report/EmojiPickerMenuItem.js b/src/pages/home/report/EmojiPickerMenuItem.js
@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Pressable} from 'react-native';
-import styles, {getButtonBackgroundColorStyle} from '../../../styles/styles';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
 import getButtonState from '../../../libs/getButtonState';
 import Hoverable from '../../../components/Hoverable';
 import Text from '../../../components/Text';
@@ -27,7 +28,7 @@ const EmojiPickerMenuItem = props => (
             pressed,
         }) => ([
             styles.pv1,
-            getButtonBackgroundColorStyle(getButtonState(false, pressed)),
+            StyleUtils.getButtonBackgroundColorStyle(getButtonState(false, pressed)),
             props.isHighlighted ? styles.emojiItemHighlighted : {},
             styles.emojiItem,
         ])}

diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js
@@ -12,7 +12,8 @@ import _ from 'underscore';
 import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import lodashIntersection from 'lodash/intersection';
-import styles, {getButtonBackgroundColorStyle, getIconFillColor} from '../../../styles/styles';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
 import themeColors from '../../../styles/themes/default';
 import TextInputFocusable from '../../../components/TextInputFocusable';
 import ONYXKEYS from '../../../ONYXKEYS';
@@ -673,7 +674,7 @@ class ReportActionCompose extends React.Component {
                     <Pressable
                         style={({hovered, pressed}) => ([
                             styles.chatItemEmojiButton,
-                            getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
+                            StyleUtils.getButtonBackgroundColorStyle(getButtonState(hovered, pressed)),
                         ])}
                         ref={el => this.emojiPopoverAnchor = el}
                         onLayout={this.measureEmojiPopoverAnchorPosition}
@@ -684,7 +685,7 @@ class ReportActionCompose extends React.Component {
                             <Tooltip text={this.props.translate('reportActionCompose.emoji')}>
                                 <Icon
                                     src={Expensicons.Emoji}
-                                    fill={getIconFillColor(getButtonState(hovered, pressed))}
+                                    fill={StyleUtils.getIconFillColor(getButtonState(hovered, pressed))}
                                 />
                             </Tooltip>
                         )}

diff --git a/src/pages/home/sidebar/OptionRow.js b/src/pages/home/sidebar/OptionRow.js
@@ -8,7 +8,8 @@ import {
     StyleSheet,
 } from 'react-native';
 import Str from 'expensify-common/lib/str';
-import styles, {getBackgroundAndBorderStyle, getBackgroundColorStyle} from '../../../styles/styles';
+import styles from '../../../styles/styles';
+import * as StyleUtils from '../../../styles/StyleUtils';
 import {optionPropTypes} from './optionPropTypes';
 import Icon from '../../../components/Icon';
 import * as Expensicons from '../../../components/Icon/Expensicons';
@@ -140,7 +141,7 @@ const OptionRow = (props) => {
                         styles.justifyContentBetween,
                         styles.sidebarLink,
                         styles.sidebarLinkInner,
-                        getBackgroundColorStyle(props.backgroundColor),
+                        StyleUtils.getBackgroundColorStyle(props.backgroundColor),
                         props.optionIsFocused ? styles.sidebarLinkActive : null,
                         hovered && !props.optionIsFocused ? props.hoverStyle : null,
                         props.isDisabled && styles.cursorDisabled,
@@ -160,12 +161,12 @@ const OptionRow = (props) => {
                                         avatarImageURLs={props.option.icons}
                                         size={props.mode === 'compact' ? 'small' : 'default'}
                                         secondAvatarStyle={[
-                                            getBackgroundAndBorderStyle(props.backgroundColor),
+                                            StyleUtils.getBackgroundAndBorderStyle(props.backgroundColor),
                                             props.optionIsFocused
-                                                ? getBackgroundAndBorderStyle(focusedBackgroundColor)
+                                                ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor)
                                                 : undefined,
                                             hovered && !props.optionIsFocused
-                                                ? getBackgroundAndBorderStyle(hoveredBackgroundColor)
+                                                ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor)
                                                 : undefined,
                                         ]}
                                         isDefaultChatRoom={props.option.isDefaultChatRoom}