Merge pull request #31831 from lukemorawski/31695-theme_switching_com…

…poser

31695 theme switching composer

src/components/Composer/index.android.js

@@ -4,7 +4,8 @@ import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import themeColors from '@styles/themes/default';
+import {useTheme} from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** Maximum number of lines in the text input */
@@ -65,6 +66,8 @@ const defaultProps = {
 
 function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isComposerFullSize, setIsFullComposerAvailable, ...props}) {
     const textInput = useRef(null);
+    const theme = useTheme();
+    const styles = useThemeStyles();
 
     /**
      * Set the TextInput Ref
@@ -110,9 +113,9 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
     return (
         <RNTextInput
             autoComplete="off"
-            placeholderTextColor={themeColors.placeholderText}
+            placeholderTextColor={theme.placeholderText}
             ref={setTextInputRef}
-            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e)}
+            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)}
             rejectResponderTermination={false}
             // Setting a really high number here fixes an issue with the `maxNumberOfLines` prop on TextInput, where on Android the text input would collapse to only one line,
             // when it should actually expand to the container (https://github.com/Expensify/App/issues/11694#issuecomment-1560520670)

src/components/Composer/index.ios.js

@@ -4,8 +4,8 @@ import {StyleSheet} from 'react-native';
 import _ from 'underscore';
 import RNTextInput from '@components/RNTextInput';
 import * as ComposerUtils from '@libs/ComposerUtils';
-import styles from '@styles/styles';
-import themeColors from '@styles/themes/default';
+import useTheme from '@styles/themes/useTheme';
+import useThemeStyles from '@styles/useThemeStyles';
 
 const propTypes = {
     /** If the input should clear, it actually gets intercepted instead of .clear() */
@@ -66,6 +66,8 @@ const defaultProps = {
 
 function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isComposerFullSize, setIsFullComposerAvailable, ...props}) {
     const textInput = useRef(null);
+    const styles = useThemeStyles();
+    const theme = useTheme();
 
     /**
      * Set the TextInput Ref
@@ -115,9 +117,9 @@ function Composer({shouldClear, onClear, isDisabled, maxLines, forwardedRef, isC
     return (
         <RNTextInput
             autoComplete="off"
-            placeholderTextColor={themeColors.placeholderText}
+            placeholderTextColor={theme.placeholderText}
             ref={setTextInputRef}
-            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e)}
+            onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)}
             rejectResponderTermination={false}
             smartInsertDelete={false}
             maxNumberOfLines={maxNumberOfLines}

src/components/EmojiPicker/EmojiPickerMenu/index.js

@@ -18,8 +18,8 @@ import compose from '@libs/compose';
 import * as EmojiUtils from '@libs/EmojiUtils';
 import getOperatingSystem from '@libs/getOperatingSystem';
 import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
-import styles from '@styles/styles';
 import * as StyleUtils from '@styles/StyleUtils';
+import useThemeStyles from '@styles/useThemeStyles';
 import * as User from '@userActions/User';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -51,6 +51,8 @@ const throttleTime = Browser.isMobile() ? 200 : 50;
 function EmojiPickerMenu(props) {
     const {forwardedRef, frequentlyUsedEmojis, preferredSkinTone, onEmojiSelected, preferredLocale, translate} = props;
 
+    const styles = useThemeStyles();
+
     const {isSmallScreenWidth, windowHeight} = useWindowDimensions();
 
     // Ref for the emoji search input
@@ -462,7 +464,7 @@ function EmojiPickerMenu(props) {
                 />
             );
         },
-        [isUsingKeyboardMovement, highlightedIndex, onEmojiSelected, preferredSkinTone, translate, highlightFirstEmoji],
+        [preferredSkinTone, highlightedIndex, isUsingKeyboardMovement, highlightFirstEmoji, styles, translate, onEmojiSelected],
     );
 
     const isFiltered = emojis.current.length !== filteredEmojis.length;

src/libs/ComposerUtils/updateNumberOfLines/index.native.ts

@@ -1,13 +1,12 @@
 import getNumberOfLines from '@libs/ComposerUtils/getNumberOfLines';
 import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
-import styles from '@styles/styles';
 import UpdateNumberOfLines from './types';
 
 /**
  * Check the current scrollHeight of the textarea (minus any padding) and
  * divide by line height to get the total number of rows for the textarea.
  */
-const updateNumberOfLines: UpdateNumberOfLines = (props, event) => {
+const updateNumberOfLines: UpdateNumberOfLines = (props, event, styles) => {
     const lineHeight = styles.textInputCompose.lineHeight ?? 0;
     const paddingTopAndBottom = styles.textInputComposeSpacing.paddingVertical * 2;
     const inputHeight = event?.nativeEvent?.contentSize?.height ?? null;

src/libs/ComposerUtils/updateNumberOfLines/types.ts

@@ -1,6 +1,7 @@
 import {NativeSyntheticEvent, TextInputContentSizeChangeEventData} from 'react-native';
 import ComposerProps from '@libs/ComposerUtils/types';
+import themeStyles from '@styles/styles';
 
-type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>) => void;
+type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>, styles: typeof themeStyles) => void;
 
 export default UpdateNumberOfLines;

src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js

@@ -535,7 +535,7 @@ function ComposerWithSuggestions({
 
     return (
         <>
-            <View style={[containerComposeStyles, styles.textInputComposeBorder]}>
+            <View style={[containerComposeStyles(styles), styles.textInputComposeBorder]}>
                 <Composer
                     checkComposerVisibility={checkComposerVisibility}
                     autoFocus={shouldAutoFocus}

src/pages/home/report/ReportActionItemMessageEdit.js

@@ -397,7 +397,7 @@ function ReportActionItemMessageEdit(props) {
                             </PressableWithFeedback>
                         </Tooltip>
                     </View>
-                    <View style={[containerComposeStyles, styles.textInputComposeBorder]}>
+                    <View style={[containerComposeStyles(styles), styles.textInputComposeBorder]}>
                         <Composer
                             multiline
                             ref={(el) => {

src/styles/containerComposeStyles/index.native.ts

@@ -1,6 +1,5 @@
-import styles from '@styles/styles';
 import ContainerComposeStyles from './types';
 
-const containerComposeStyles: ContainerComposeStyles = [styles.textInputComposeSpacing];
+const containerComposeStyles: ContainerComposeStyles = (styles) => [styles.textInputComposeSpacing];
 
 export default containerComposeStyles;

src/styles/containerComposeStyles/index.ts

@@ -1,7 +1,6 @@
-import styles from '@styles/styles';
 import ContainerComposeStyles from './types';
 
 // We need to set paddingVertical = 0 on web to avoid displaying a normal pointer on some parts of compose box when not in focus
-const containerComposeStyles: ContainerComposeStyles = [styles.textInputComposeSpacing, {paddingVertical: 0}];
+const containerComposeStyles: ContainerComposeStyles = (styles) => [styles.textInputComposeSpacing, {paddingVertical: 0}];
 
 export default containerComposeStyles;

src/styles/containerComposeStyles/types.ts

@@ -1,5 +1,6 @@
 import {ViewStyle} from 'react-native';
+import themeStyles from '@styles/styles';
 
-type ContainerComposeStyles = ViewStyle[];
+type ContainerComposeStyles = (styles: typeof themeStyles) => ViewStyle[];
 
 export default ContainerComposeStyles;