diff --git a/src/pages/inbox/ReportScreen.tsx b/src/pages/inbox/ReportScreen.tsx index 684f69b66284..0fe5cab9d7fb 100644 --- a/src/pages/inbox/ReportScreen.tsx +++ b/src/pages/inbox/ReportScreen.tsx @@ -28,7 +28,7 @@ import useDeferNonEssentials from './hooks/useDeferNonEssentials'; import useFlushDeferredWriteOnFocus from './hooks/useFlushDeferredWriteOnFocus'; import LinkedActionNotFoundGuard from './LinkedActionNotFoundGuard'; import ReactionListWrapper from './ReactionListWrapper'; -import ReportActionComposePlaceholder from './report/ReportActionCompose/ReportActionComposePlaceholder'; +import ReportActionCompose from './report/ReportActionCompose/ReportActionCompose'; import {ReportActionEditMessageContextProvider, ReportScreenEditMessageProviderWithTransactionThread} from './report/ReportActionEditMessageContext'; import ReportFooter from './report/ReportFooter'; import useClearReportActionDraftsOnReportChange from './report/useClearReportActionDraftsOnReportChange'; @@ -148,7 +148,7 @@ function ReportScreen({route, navigation}: ReportScreenProps) { testID="report-actions-view-wrapper" > - {shouldDeferNonEssentials ? : } + {shouldDeferNonEssentials ? : } diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx new file mode 100644 index 000000000000..c0f694363919 --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ComposerActionButton.tsx @@ -0,0 +1,14 @@ +import ComposerActionMenu from './ComposerActionMenu'; +import {useComposerEditState} from './ComposerContext'; +import ComposerEditingButtons from './ComposerEditingButtons'; + +function ComposerActionButton() { + const {isEditingInComposer} = useComposerEditState(); + + if (isEditingInComposer) { + return ; + } + return ; +} + +export default ComposerActionButton; diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerActionMenu.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerActionMenu.tsx index c84eda56f95f..b7e8f4e14569 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerActionMenu.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerActionMenu.tsx @@ -11,11 +11,8 @@ import AttachmentPickerWithMenuItems from './AttachmentPickerWithMenuItems'; import {useComposerActions, useComposerEditState, useComposerMeta, useComposerSendState, useComposerState} from './ComposerContext'; import useAttachmentPicker from './useAttachmentPicker'; -type ComposerActionMenuProps = { - reportID: string; -}; - -function ComposerActionMenu({reportID}: ComposerActionMenuProps) { +function ComposerActionMenu() { + const {reportID} = useComposerState(); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const {isMenuVisible, isFullComposerAvailable} = useComposerState(); const {draftComment} = useComposerEditState(); diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx index 568c90b2a619..0c1414788420 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerBox.tsx @@ -1,16 +1,13 @@ import React from 'react'; +import type {PropsWithChildren} from 'react'; import {View} from 'react-native'; import useOnyx from '@hooks/useOnyx'; import useThemeStyles from '@hooks/useThemeStyles'; import ONYXKEYS from '@src/ONYXKEYS'; import {useComposerMeta, useComposerSendState, useComposerState} from './ComposerContext'; -type ComposerBoxProps = { - reportID: string; - children: React.ReactNode; -}; - -function ComposerBox({reportID, children}: ComposerBoxProps) { +function ComposerBox({children}: PropsWithChildren) { + const {reportID} = useComposerState(); const styles = useThemeStyles(); const {isFocused} = useComposerState(); const {isExceedingMaxLength, isBlockedFromConcierge} = useComposerSendState(); diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerContainer.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerContainer.tsx new file mode 100644 index 000000000000..7a11d44e5f90 --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ComposerContainer.tsx @@ -0,0 +1,29 @@ +import React from 'react'; +import type {PropsWithChildren} from 'react'; +import OfflineWithFeedback from '@components/OfflineWithFeedback'; +import useOnyx from '@hooks/useOnyx'; +import useThemeStyles from '@hooks/useThemeStyles'; +import {getReportOfflinePendingActionAndErrors} from '@libs/ReportUtils'; +import ONYXKEYS from '@src/ONYXKEYS'; +import {useComposerState} from './ComposerContext'; + +function ComposerContainer({children}: PropsWithChildren) { + const {reportID} = useComposerState(); + const styles = useThemeStyles(); + const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); + const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); + const {reportPendingAction: pendingAction} = getReportOfflinePendingActionAndErrors(report); + + return ( + + {children} + + ); +} + +export default ComposerContainer; diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerContext.ts b/src/pages/inbox/report/ReportActionCompose/ComposerContext.ts index ec9b33de1433..64c32912a0a3 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerContext.ts +++ b/src/pages/inbox/report/ReportActionCompose/ComposerContext.ts @@ -26,6 +26,7 @@ type ComposerText = string; // Warm — changes on interaction type ComposerState = { + reportID: string; isFocused: boolean; isMenuVisible: boolean; isFullComposerAvailable: boolean; @@ -90,6 +91,7 @@ const noop = () => {}; const ComposerTextContext = createContext(''); const defaultState: ComposerState = { + reportID: '', isFocused: false, isMenuVisible: false, isFullComposerAvailable: false, diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerDefaultFooter.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerDefaultFooter.tsx new file mode 100644 index 000000000000..0c83e2b890ef --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ComposerDefaultFooter.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import OfflineIndicator from '@components/OfflineIndicator'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useThemeStyles from '@hooks/useThemeStyles'; +import ComposerExceededLength from './ComposerExceededLength'; +import ComposerFooter from './ComposerFooter'; +import ComposerTypingIndicator from './ComposerTypingIndicator'; + +function ComposerDefaultFooter() { + const styles = useThemeStyles(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); + + return ( + + {!shouldUseNarrowLayout && } + + + + ); +} + +export default ComposerDefaultFooter; diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerDropZone.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerDropZone.tsx index 344a2316925c..0db4107e2e22 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerDropZone.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerDropZone.tsx @@ -1,4 +1,5 @@ import React from 'react'; +import type {PropsWithChildren} from 'react'; import DragAndDropConsumer from '@components/DragAndDrop/Consumer'; import DropZoneUI from '@components/DropZone/DropZoneUI'; import DualDropZone from '@components/DropZone/DualDropZone'; @@ -14,15 +15,11 @@ import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID'; import {getParentReport, isChatRoom, isGroupChat, isInvoiceReport, isReportApproved, isSettled, temporary_getMoneyRequestOptions} from '@libs/ReportUtils'; import {hasReceipt as hasReceiptTransactionUtils} from '@libs/TransactionUtils'; import ONYXKEYS from '@src/ONYXKEYS'; +import {useComposerState} from './ComposerContext'; import useAttachmentPicker from './useAttachmentPicker'; import useReceiptDrop from './useReceiptDrop'; import useShouldAddOrReplaceReceipt from './useShouldAddOrReplaceReceipt'; -type ComposerDropZoneProps = { - reportID: string; - children: React.ReactNode; -}; - type RichDropZoneProps = { reportID: string; shouldAddOrReplaceReceipt: boolean; @@ -110,7 +107,8 @@ function RichDropZone({reportID, shouldAddOrReplaceReceipt, transactionID, onAtt ); } -function ComposerDropZone({reportID, children}: ComposerDropZoneProps) { +function ComposerDropZone({children}: PropsWithChildren) { + const {reportID} = useComposerState(); const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); const {shouldAddOrReplaceReceipt, transactionID} = useShouldAddOrReplaceReceipt(reportID); const {pickAttachments, PDFValidationComponent: AttachmentPDFValidation, ErrorModal: AttachmentErrorModal} = useAttachmentPicker(reportID); diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerEditingButtons.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerEditingButtons.tsx index 77f8f58dfae0..4bf7e056ad13 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerEditingButtons.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerEditingButtons.tsx @@ -2,16 +2,12 @@ import React from 'react'; import {View} from 'react-native'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import {useComposerEditActions} from './ComposerContext'; +import {useComposerEditActions, useComposerState} from './ComposerContext'; import ComposerExpandCollapseButton from './ComposerExpandCollapseButton'; import MessageEditCancelButton from './MessageEditCancelButton'; -type ComposerEditingButtonsProps = { - /** The report ID */ - reportID: string; -}; - -function ComposerEditingButtons({reportID}: ComposerEditingButtonsProps) { +function ComposerEditingButtons() { + const {reportID} = useComposerState(); const styles = useThemeStyles(); const {deleteDraft} = useComposerEditActions(); diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerEmojiPicker.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerEmojiPicker.tsx index 99c26549cd59..43f4ff1c8c47 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerEmojiPicker.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerEmojiPicker.tsx @@ -6,13 +6,10 @@ import {canUseTouchScreen} from '@libs/DeviceCapabilities'; import DomUtils from '@libs/DomUtils'; import {hideEmojiPicker, isActive as isActiveEmojiPickerAction} from '@userActions/EmojiPickerAction'; import CONST from '@src/CONST'; -import {useComposerMeta, useComposerSendState} from './ComposerContext'; +import {useComposerMeta, useComposerSendState, useComposerState} from './ComposerContext'; -type ComposerEmojiPickerProps = { - reportID: string; -}; - -function ComposerEmojiPicker({reportID}: ComposerEmojiPickerProps) { +function ComposerEmojiPicker() { + const {reportID} = useComposerState(); const styles = useThemeStyles(); const {isMediumScreenWidth} = useResponsiveLayout(); diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerFooter.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerFooter.tsx index c34ca8e8e9de..4bcfe5289c4c 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerFooter.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerFooter.tsx @@ -1,14 +1,11 @@ import React from 'react'; +import type {PropsWithChildren} from 'react'; import {View} from 'react-native'; import useNetwork from '@hooks/useNetwork'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -type ComposerFooterProps = { - children: React.ReactNode; -}; - -function ComposerFooter({children}: ComposerFooterProps) { +function ComposerFooter({children}: PropsWithChildren) { const styles = useThemeStyles(); // eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth const {isSmallScreenWidth} = useResponsiveLayout(); diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerInput.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerInput.tsx index 1b01a369687f..c8425c634336 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerInput.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerInput.tsx @@ -23,10 +23,6 @@ import ComposerWithSuggestions from './ComposerWithSuggestions'; import useAttachmentPicker from './useAttachmentPicker'; import useComposerSubmit from './useComposerSubmit'; -type ComposerInputProps = { - reportID: string; -}; - const AI_PLACEHOLDER_KEYS = ['reportActionCompose.askConciergeToUpdate', 'reportActionCompose.askConciergeToCorrect', 'reportActionCompose.askConciergeForHelp'] as const; function getRandomPlaceholder(translate: LocalizedTranslate): string { @@ -34,7 +30,8 @@ function getRandomPlaceholder(translate: LocalizedTranslate): string { return translate(AI_PLACEHOLDER_KEYS[randomIndex]); } -function ComposerInput({reportID}: ComposerInputProps) { +function ComposerInput() { + const {reportID} = useComposerState(); const {translate, preferredLocale} = useLocalize(); const {isMenuVisible} = useComposerState(); const {isBlockedFromConcierge, debouncedCommentMaxLengthValidation} = useComposerSendState(); diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx new file mode 100644 index 000000000000..2b59b2f8db2a --- /dev/null +++ b/src/pages/inbox/report/ReportActionCompose/ComposerInputArea.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import {View} from 'react-native'; +import useOnyx from '@hooks/useOnyx'; +import useThemeStyles from '@hooks/useThemeStyles'; +import CONST from '@src/CONST'; +import ONYXKEYS from '@src/ONYXKEYS'; +import ComposerActionButton from './ComposerActionButton'; +import ComposerBox from './ComposerBox'; +import ComposerContainer from './ComposerContainer'; +import {useComposerState} from './ComposerContext'; +import ComposerDropZone from './ComposerDropZone'; +import ComposerEmojiPicker from './ComposerEmojiPicker'; +import ComposerImportedState from './ComposerImportedState'; +import ComposerInput from './ComposerInput'; +import ComposerLocalTime from './ComposerLocalTime'; +import ComposerSendButton from './ComposerSendButton'; + +function ComposerInputArea() { + const {reportID} = useComposerState(); + const styles = useThemeStyles(); + const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); + + return ( + + + + + + + + + + + + + + + + + ); +} + +export default ComposerInputArea; diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerLocalTime.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerLocalTime.tsx index 9cfba965e4d2..e578fb87089b 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerLocalTime.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerLocalTime.tsx @@ -8,12 +8,10 @@ import {isAgentEmail} from '@libs/SessionUtils'; import ParticipantLocalTime from '@pages/inbox/report/ParticipantLocalTime'; import ONYXKEYS from '@src/ONYXKEYS'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; +import {useComposerState} from './ComposerContext'; -type ComposerLocalTimeProps = { - reportID: string; -}; - -function ComposerLocalTime({reportID}: ComposerLocalTimeProps) { +function ComposerLocalTime() { + const {reportID} = useComposerState(); const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); const currentUserPersonalDetails = useCurrentUserPersonalDetails(); const personalDetails = usePersonalDetails(); diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionComposePlaceholder.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerPlaceholder.tsx similarity index 97% rename from src/pages/inbox/report/ReportActionCompose/ReportActionComposePlaceholder.tsx rename to src/pages/inbox/report/ReportActionCompose/ComposerPlaceholder.tsx index 7a90fad4a08c..f3a997f5357a 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionComposePlaceholder.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerPlaceholder.tsx @@ -22,7 +22,7 @@ import CONST from '@src/CONST'; * chatItemComposeSecondaryRow, and icons [Plus, Emoji, Send]. * If the real composer changes its layout or icon set, update this placeholder to match. */ -function ReportActionComposePlaceholder() { +function ComposerPlaceholder() { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -86,4 +86,4 @@ function ReportActionComposePlaceholder() { ); } -export default ReportActionComposePlaceholder; +export default ComposerPlaceholder; diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerProvider.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerProvider.tsx index 7c3b41392182..3435222bd241 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerProvider.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerProvider.tsx @@ -124,6 +124,7 @@ function ComposerProvider({children, reportID}: ComposerProviderProps) { }; const composerState = { + reportID, isFocused, isMenuVisible, isFullComposerAvailable, diff --git a/src/pages/inbox/report/ReportActionCompose/ComposerSendButton.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerSendButton.tsx index 79aab7007d88..361c4828cccb 100644 --- a/src/pages/inbox/report/ReportActionCompose/ComposerSendButton.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerSendButton.tsx @@ -6,11 +6,12 @@ import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; -import {useComposerEditState, useComposerSendState} from './ComposerContext'; +import {useComposerEditState, useComposerSendState, useComposerState} from './ComposerContext'; import SubmitDraftButton from './SubmitDraftButton'; import useComposerSubmit from './useComposerSubmit'; -function ComposerSendButton({reportID}: {reportID: string}) { +function ComposerSendButton() { + const {reportID} = useComposerState(); const styles = useThemeStyles(); const {translate} = useLocalize(); const icons = useMemoizedLazyExpensifyIcons(['Send', 'Checkmark']); diff --git a/src/pages/inbox/report/ReportActionCompose/AgentZeroAwareTypingIndicator.tsx b/src/pages/inbox/report/ReportActionCompose/ComposerTypingIndicator.tsx similarity index 69% rename from src/pages/inbox/report/ReportActionCompose/AgentZeroAwareTypingIndicator.tsx rename to src/pages/inbox/report/ReportActionCompose/ComposerTypingIndicator.tsx index 835cc1323b4f..7ced0f7cc9c7 100644 --- a/src/pages/inbox/report/ReportActionCompose/AgentZeroAwareTypingIndicator.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ComposerTypingIndicator.tsx @@ -1,8 +1,10 @@ import React from 'react'; import useShouldSuppressConciergeIndicators from '@hooks/useShouldSuppressConciergeIndicators'; import ReportTypingIndicator from '@pages/inbox/report/ReportTypingIndicator'; +import {useComposerState} from './ComposerContext'; -function AgentZeroAwareTypingIndicator({reportID}: {reportID: string}) { +function ComposerTypingIndicator() { + const {reportID} = useComposerState(); const shouldSuppress = useShouldSuppressConciergeIndicators(reportID); if (shouldSuppress) { return null; @@ -10,4 +12,4 @@ function AgentZeroAwareTypingIndicator({reportID}: {reportID: string}) { return ; } -export default AgentZeroAwareTypingIndicator; +export default ComposerTypingIndicator; diff --git a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx index b81935a33ada..984b242f8c9d 100644 --- a/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx +++ b/src/pages/inbox/report/ReportActionCompose/ReportActionCompose.tsx @@ -1,18 +1,9 @@ import React from 'react'; -import {View} from 'react-native'; -import OfflineIndicator from '@components/OfflineIndicator'; -import OfflineWithFeedback from '@components/OfflineWithFeedback'; -import useOnyx from '@hooks/useOnyx'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useThemeStyles from '@hooks/useThemeStyles'; -import {getReportOfflinePendingActionAndErrors} from '@libs/ReportUtils'; -import CONST from '@src/CONST'; -import ONYXKEYS from '@src/ONYXKEYS'; -import AgentZeroAwareTypingIndicator from './AgentZeroAwareTypingIndicator'; import ComposerActionMenu from './ComposerActionMenu'; import ComposerBox from './ComposerBox'; -import {useComposerEditState} from './ComposerContext'; +import ComposerContainer from './ComposerContainer'; import type {SuggestionsRef} from './ComposerContext'; +import ComposerDefaultFooter from './ComposerDefaultFooter'; import ComposerDropZone from './ComposerDropZone'; import ComposerEditingButtons from './ComposerEditingButtons'; import ComposerEmojiPicker from './ComposerEmojiPicker'; @@ -20,84 +11,53 @@ import ComposerExceededLength from './ComposerExceededLength'; import ComposerFooter from './ComposerFooter'; import ComposerImportedState from './ComposerImportedState'; import ComposerInput from './ComposerInput'; +import ComposerInputArea from './ComposerInputArea'; import ComposerLocalTime from './ComposerLocalTime'; +import ComposerPlaceholder from './ComposerPlaceholder'; import ComposerProvider from './ComposerProvider'; import ComposerSendButton from './ComposerSendButton'; +import ComposerTypingIndicator from './ComposerTypingIndicator'; type ReportActionComposeProps = { /** Report ID */ reportID: string; - - /** Whether the composer is edit only */ - isEditOnly?: boolean; }; -function ComposerInner({reportID, isEditOnly = false}: ReportActionComposeProps) { - const styles = useThemeStyles(); - const {shouldUseNarrowLayout} = useResponsiveLayout(); - const {isEditingInComposer} = useComposerEditState(); - const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`); - const [isComposerFullSize = false] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE}${reportID}`); - const {reportPendingAction: pendingAction} = getReportOfflinePendingActionAndErrors(report); - +function ReportActionCompose({reportID}: ReportActionComposeProps) { return ( - - - - - - - {isEditingInComposer ? : } - - - - - - {!isEditOnly && ( - - {!shouldUseNarrowLayout && } - - - - )} - - - - + + + + ); } -function Composer({reportID, ...restProps}: ReportActionComposeProps) { +function EditOnlyReportActionCompose({reportID}: ReportActionComposeProps) { return ( - + ); } -Composer.LocalTime = ComposerLocalTime; -Composer.DropZone = ComposerDropZone; -Composer.Box = ComposerBox; -Composer.ActionMenu = ComposerActionMenu; -Composer.Input = ComposerInput; -Composer.EmojiPicker = ComposerEmojiPicker; -Composer.SendButton = ComposerSendButton; -Composer.EditingButtons = ComposerEditingButtons; -Composer.Footer = ComposerFooter; -Composer.TypingIndicator = AgentZeroAwareTypingIndicator; -Composer.ExceededLength = ComposerExceededLength; -Composer.ImportedState = ComposerImportedState; +ReportActionCompose.LocalTime = ComposerLocalTime; +ReportActionCompose.Container = ComposerContainer; +ReportActionCompose.ImportedState = ComposerImportedState; +ReportActionCompose.DropZone = ComposerDropZone; +ReportActionCompose.Box = ComposerBox; +ReportActionCompose.ActionMenu = ComposerActionMenu; +ReportActionCompose.Input = ComposerInput; +ReportActionCompose.EmojiPicker = ComposerEmojiPicker; +ReportActionCompose.SendButton = ComposerSendButton; +ReportActionCompose.EditingButtons = ComposerEditingButtons; +ReportActionCompose.Footer = ComposerFooter; +ReportActionCompose.TypingIndicator = ComposerTypingIndicator; +ReportActionCompose.ExceededLength = ComposerExceededLength; +ReportActionCompose.Layout = ComposerInputArea; +ReportActionCompose.Placeholder = ComposerPlaceholder; +ReportActionCompose.InputArea = ComposerInputArea; +ReportActionCompose.DefaultFooter = ComposerDefaultFooter; +ReportActionCompose.EditOnly = EditOnlyReportActionCompose; -export default Composer; +export default ReportActionCompose; export type {SuggestionsRef, ReportActionComposeProps}; diff --git a/src/pages/inbox/report/ReportFooter.tsx b/src/pages/inbox/report/ReportFooter.tsx index 08897c6bb2d3..e61c585d3fcd 100644 --- a/src/pages/inbox/report/ReportFooter.tsx +++ b/src/pages/inbox/report/ReportFooter.tsx @@ -90,7 +90,9 @@ function ReportFooter() { if (!shouldHideComposer) { return ( - + + + ); } @@ -159,10 +161,9 @@ function ReportFooter() { {isEditingWithComposer && ( - + + + )} - - - ); -} - export default ReportFooter; diff --git a/tests/unit/ComposerLocalTimeTest.tsx b/tests/unit/ComposerLocalTimeTest.tsx index 6906767de2f6..545530046d6e 100644 --- a/tests/unit/ComposerLocalTimeTest.tsx +++ b/tests/unit/ComposerLocalTimeTest.tsx @@ -5,6 +5,7 @@ import ComposeProviders from '@components/ComposeProviders'; import {LocaleContextProvider} from '@components/LocaleContextProvider'; import OnyxListItemProvider from '@components/OnyxListItemProvider'; import ComposerLocalTime from '@pages/inbox/report/ReportActionCompose/ComposerLocalTime'; +import ComposerProvider from '@pages/inbox/report/ReportActionCompose/ComposerProvider'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {PersonalDetailsList, Report} from '@src/types/onyx'; @@ -37,8 +38,12 @@ function buildReport(participantAccountIDs: number[]): Report { } as Report; } -function renderWithProviders(component: React.ReactElement) { - return render({component}); +function renderWithProviders(component: React.ReactElement, reportID: string) { + return render( + + {component} + , + ); } describe('ComposerLocalTime', () => { @@ -67,7 +72,7 @@ describe('ComposerLocalTime', () => { await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, personalDetails); await waitForBatchedUpdates(); - renderWithProviders(); + renderWithProviders(, REPORT_ID); await waitForBatchedUpdates(); @@ -92,7 +97,7 @@ describe('ComposerLocalTime', () => { await Onyx.merge(ONYXKEYS.PERSONAL_DETAILS_LIST, personalDetails); await waitForBatchedUpdates(); - const {toJSON} = renderWithProviders(); + const {toJSON} = renderWithProviders(, REPORT_ID); await waitForBatchedUpdates();