diff --git a/src/components/Composer/index.android.js b/src/components/Composer/index.android.js index 278965cbc81a..1849e309f7f0 100644 --- a/src/components/Composer/index.android.js +++ b/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 ( 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) diff --git a/src/components/Composer/index.ios.js b/src/components/Composer/index.ios.js index a1b8c1a4ffe6..eb227de36a54 100644 --- a/src/components/Composer/index.ios.js +++ b/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 ( ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e)} + onContentSizeChange={(e) => ComposerUtils.updateNumberOfLines({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles)} rejectResponderTermination={false} smartInsertDelete={false} maxNumberOfLines={maxNumberOfLines} diff --git a/src/components/EmojiPicker/EmojiPickerMenu/index.js b/src/components/EmojiPicker/EmojiPickerMenu/index.js index 0ee12579733d..25a534b94758 100755 --- a/src/components/EmojiPicker/EmojiPickerMenu/index.js +++ b/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; diff --git a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts b/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts index df9292ecd690..6f87edaf2475 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/index.native.ts +++ b/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; diff --git a/src/libs/ComposerUtils/updateNumberOfLines/types.ts b/src/libs/ComposerUtils/updateNumberOfLines/types.ts index b0f9ba48ddc2..cef7d7ef6a80 100644 --- a/src/libs/ComposerUtils/updateNumberOfLines/types.ts +++ b/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) => void; +type UpdateNumberOfLines = (props: ComposerProps, event: NativeSyntheticEvent, styles: typeof themeStyles) => void; export default UpdateNumberOfLines; diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 663db82a6067..43c01cf8c952 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -535,7 +535,7 @@ function ComposerWithSuggestions({ return ( <> - + - + { diff --git a/src/styles/containerComposeStyles/index.native.ts b/src/styles/containerComposeStyles/index.native.ts index 9e1398b8176f..3104b6878b2a 100644 --- a/src/styles/containerComposeStyles/index.native.ts +++ b/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; diff --git a/src/styles/containerComposeStyles/index.ts b/src/styles/containerComposeStyles/index.ts index 0e40adda571e..c6161fd2d9df 100644 --- a/src/styles/containerComposeStyles/index.ts +++ b/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; diff --git a/src/styles/containerComposeStyles/types.ts b/src/styles/containerComposeStyles/types.ts index 278039691b8a..0b2305f52b56 100644 --- a/src/styles/containerComposeStyles/types.ts +++ b/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;