Skip to content

Commit

Permalink
Merge pull request #52300 from QichenZhu/fix/51875
Browse files Browse the repository at this point in the history
  • Loading branch information
@blimpich
blimpich authored Nov 14, 2024
2 parents d5a7b49 + 6447028 commit 2f084c3
Show file tree
Hide file tree
Showing 9 changed files with 102 additions and 127 deletions.
3 changes: 0 additions & 3 deletions src/components/Composer/implementation/index.native.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import useResetComposerFocus from '@hooks/useResetComposerFocus';
import useStyleUtils from '@hooks/useStyleUtils';
import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
import * as EmojiUtils from '@libs/EmojiUtils';
import * as FileUtils from '@libs/fileDownload/FileUtils';
import CONST from '@src/CONST';
Expand All @@ -29,7 +28,6 @@ function Composer(
isDisabled = false,
maxLines,
isComposerFullSize = false,
setIsFullComposerAvailable = () => {},
autoFocus = false,
style,
// On native layers we like to have the Text Input not focused so the
Expand Down Expand Up @@ -118,7 +116,6 @@ function Composer(
placeholderTextColor={theme.placeholderText}
ref={setTextInputRef}
value={value}
onContentSizeChange={(e) => updateIsFullComposerAvailable({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles, true)}
rejectResponderTermination={false}
smartInsertDelete={false}
textAlignVertical="center"
Expand Down
5 changes: 0 additions & 5 deletions src/components/Composer/implementation/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import useTheme from '@hooks/useTheme';
import useThemeStyles from '@hooks/useThemeStyles';
import addEncryptedAuthTokenToURL from '@libs/addEncryptedAuthTokenToURL';
import * as Browser from '@libs/Browser';
import updateIsFullComposerAvailable from '@libs/ComposerUtils/updateIsFullComposerAvailable';
import * as EmojiUtils from '@libs/EmojiUtils';
import * as FileUtils from '@libs/fileDownload/FileUtils';
import isEnterWhileComposition from '@libs/KeyboardShortcut/isEnterWhileComposition';
Expand All @@ -41,7 +40,6 @@ function Composer(
onClear = () => {},
onPasteFile = () => {},
onSelectionChange = () => {},
setIsFullComposerAvailable = () => {},
checkComposerVisibility = () => false,
selection: selectionProp = {
start: 0,
Expand Down Expand Up @@ -352,9 +350,6 @@ function Composer(
/* eslint-disable-next-line react/jsx-props-no-spreading */
{...props}
onSelectionChange={addCursorPositionToSelectionChange}
onContentSizeChange={(e) => {
updateIsFullComposerAvailable({maxLines, isComposerFullSize, isDisabled, setIsFullComposerAvailable}, e, styles);
}}
disabled={isDisabled}
onKeyPress={handleKeyPress}
addAuthTokenToImageURLCallback={addEncryptedAuthTokenToURL}
Expand Down
6 changes: 0 additions & 6 deletions src/components/Composer/types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,12 +54,6 @@ type ComposerProps = Omit<TextInputProps, 'onClear'> & {
/** Selection Object */
selection?: TextSelection;

/** Whether the full composer can be opened */
isFullComposerAvailable?: boolean;

/** Allow the full composer to be opened */
setIsFullComposerAvailable?: (value: boolean) => void;

/** Should we calculate the caret position */
shouldCalculateCaretPosition?: boolean;

Expand Down
23 changes: 0 additions & 23 deletions src/libs/ComposerUtils/updateIsFullComposerAvailable.ts
View file

This file was deleted.

172 changes: 98 additions & 74 deletions src/pages/home/report/ReportActionCompose/AttachmentPickerWithMenuItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,6 @@ type AttachmentPickerWithMenuItemsProps = {
/** Callback to open the file in the modal */
displayFileInModal: (url: FileObject) => void;

/** Whether or not the full size composer is available */
isFullComposerAvailable: boolean;

/** Whether or not the composer is full size */
isComposerFullSize: boolean;

Expand Down Expand Up @@ -100,7 +97,6 @@ function AttachmentPickerWithMenuItems({
report,
reportParticipantIDs,
displayFileInModal,
isFullComposerAvailable,
isComposerFullSize,
reportID,
isBlockedFromConcierge,
Expand Down Expand Up @@ -224,6 +220,29 @@ function AttachmentPickerWithMenuItems({
setMenuVisibility(false);
}, [didScreenBecomeInactive, isMenuVisible, setMenuVisibility]);

// 1. Limit the container width to a single column.
const outerContainerStyles = [{flexBasis: styles.composerSizeButton.width + styles.composerSizeButton.marginHorizontal * 2}, styles.flexGrow0, styles.flexShrink0];

// 2. If there isn't enough height for two buttons, the Expand/Collapse button wraps to the next column so that it's intentionally hidden,
// and the Create button is centered vertically.
const innerContainerStyles = [
styles.dFlex,
styles.flexColumnReverse,
styles.flexWrap,
styles.justifyContentCenter,
styles.pAbsolute,
styles.h100,
styles.w100,
styles.overflowHidden,
{paddingVertical: styles.composerSizeButton.marginHorizontal},
];

// 3. If there is enough height for two buttons, the Expand/Collapse button is at the top.
const expandCollapseButtonContainerStyles = [styles.flexGrow1, styles.flexShrink0];

// 4. And the Create button is at the bottom.
const createButtonContainerStyles = [styles.flexGrow0, styles.flexShrink0];

return (
<AttachmentPicker>
{({openPicker}) => {
Expand All @@ -245,76 +264,81 @@ function AttachmentPickerWithMenuItems({
];
return (
<>
<View style={[styles.dFlex, styles.flexColumn, isFullComposerAvailable || isComposerFullSize ? styles.justifyContentBetween : styles.justifyContentCenter]}>
{isComposerFullSize && (
<Tooltip text={translate('reportActionCompose.collapse')}>
<PressableWithFeedback
onPress={(e) => {
e?.preventDefault();
raiseIsScrollLikelyLayoutTriggered();
Report.setIsComposerFullSize(reportID, false);
}}
// Keep focus on the composer when Collapse button is clicked.
onMouseDown={(e) => e.preventDefault()}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || disabled}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('reportActionCompose.collapse')}
>
<Icon
fill={theme.icon}
src={Expensicons.Collapse}
/>
</PressableWithFeedback>
</Tooltip>
)}
{!isComposerFullSize && isFullComposerAvailable && (
<Tooltip text={translate('reportActionCompose.expand')}>
<PressableWithFeedback
onPress={(e) => {
e?.preventDefault();
raiseIsScrollLikelyLayoutTriggered();
Report.setIsComposerFullSize(reportID, true);
}}
// Keep focus on the composer when Expand button is clicked.
onMouseDown={(e) => e.preventDefault()}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || disabled}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('reportActionCompose.expand')}
>
<Icon
fill={theme.icon}
src={Expensicons.Expand}
/>
</PressableWithFeedback>
</Tooltip>
)}
<Tooltip text={translate('common.create')}>
<PressableWithFeedback
ref={actionButtonRef}
onPress={(e) => {
e?.preventDefault();
if (!isFocused) {
return;
}
onAddActionPressed();

// Drop focus to avoid blue focus ring.
actionButtonRef.current?.blur();
setMenuVisibility(!isMenuVisible);
}}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || disabled}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('common.create')}
>
<Icon
fill={theme.icon}
src={Expensicons.Plus}
/>
</PressableWithFeedback>
</Tooltip>
<View style={outerContainerStyles}>
<View style={innerContainerStyles}>
<View style={createButtonContainerStyles}>
<Tooltip text={translate('common.create')}>
<PressableWithFeedback
ref={actionButtonRef}
onPress={(e) => {
e?.preventDefault();
if (!isFocused) {
return;
}
onAddActionPressed();

// Drop focus to avoid blue focus ring.
actionButtonRef.current?.blur();
setMenuVisibility(!isMenuVisible);
}}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || disabled}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('common.create')}
>
<Icon
fill={theme.icon}
src={Expensicons.Plus}
/>
</PressableWithFeedback>
</Tooltip>
</View>
<View style={expandCollapseButtonContainerStyles}>
{isComposerFullSize ? (
<Tooltip text={translate('reportActionCompose.collapse')}>
<PressableWithFeedback
onPress={(e) => {
e?.preventDefault();
raiseIsScrollLikelyLayoutTriggered();
Report.setIsComposerFullSize(reportID, false);
}}
// Keep focus on the composer when Collapse button is clicked.
onMouseDown={(e) => e.preventDefault()}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || disabled}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('reportActionCompose.collapse')}
>
<Icon
fill={theme.icon}
src={Expensicons.Collapse}
/>
</PressableWithFeedback>
</Tooltip>
) : (
<Tooltip text={translate('reportActionCompose.expand')}>
<PressableWithFeedback
onPress={(e) => {
e?.preventDefault();
raiseIsScrollLikelyLayoutTriggered();
Report.setIsComposerFullSize(reportID, true);
}}
// Keep focus on the composer when Expand button is clicked.
onMouseDown={(e) => e.preventDefault()}
style={styles.composerSizeButton}
disabled={isBlockedFromConcierge || disabled}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('reportActionCompose.expand')}
>
<Icon
fill={theme.icon}
src={Expensicons.Expand}
/>
</PressableWithFeedback>
</Tooltip>
)}
</View>
</View>
</View>
<PopoverMenu
animationInTiming={CONST.ANIMATION_IN_TIMING}
Expand Down
10 changes: 0 additions & 10 deletions ...pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,12 +102,6 @@ type ComposerWithSuggestionsProps = Partial<ChildrenProps> & {
/** Whether the input is disabled */
disabled: boolean;

/** Whether the full composer is available */
isFullComposerAvailable: boolean;

/** Function to set whether the full composer is available */
setIsFullComposerAvailable: (isFullComposerAvailable: boolean) => void;

/** Function to set whether the comment is empty */
setIsCommentEmpty: (isCommentEmpty: boolean) => void;

Expand Down Expand Up @@ -227,8 +221,6 @@ function ComposerWithSuggestions(
displayFileInModal,
isBlockedFromConcierge,
disabled,
isFullComposerAvailable,
setIsFullComposerAvailable,
setIsCommentEmpty,
handleSendMessage,
shouldShowComposeInput,
Expand Down Expand Up @@ -776,8 +768,6 @@ function ComposerWithSuggestions(
isDisabled={isBlockedFromConcierge || disabled}
selection={selection}
onSelectionChange={onSelectionChange}
isFullComposerAvailable={isFullComposerAvailable}
setIsFullComposerAvailable={setIsFullComposerAvailable}
isComposerFullSize={isComposerFullSize}
value={value}
testID="composer"
Expand Down
4 changes: 0 additions & 4 deletions src/pages/home/report/ReportActionCompose/ReportActionCompose.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,6 @@ function ReportActionCompose({
const initialModalState = getModalState();
return shouldFocusInputOnScreenFocus && shouldShowComposeInput && !initialModalState?.isVisible && !initialModalState?.willAlertModalBecomeVisible;
});
const [isFullComposerAvailable, setIsFullComposerAvailable] = useState(isComposerFullSize);
const [shouldHideEducationalTooltip, setShouldHideEducationalTooltip] = useState(false);

// A flag to indicate whether the onScroll callback is likely triggered by a layout change (caused by text change) or not
Expand Down Expand Up @@ -454,7 +453,6 @@ function ReportActionCompose({
reportID={reportID}
report={report}
reportParticipantIDs={reportParticipantIDs}
isFullComposerAvailable={isFullComposerAvailable}
isComposerFullSize={isComposerFullSize}
isBlockedFromConcierge={isBlockedFromConcierge}
disabled={!!disabled}
Expand Down Expand Up @@ -494,8 +492,6 @@ function ReportActionCompose({
onCleared={submitForm}
isBlockedFromConcierge={isBlockedFromConcierge}
disabled={!!disabled}
isFullComposerAvailable={isFullComposerAvailable}
setIsFullComposerAvailable={setIsFullComposerAvailable}
setIsCommentEmpty={setIsCommentEmpty}
handleSendMessage={handleSendMessage}
shouldShowComposeInput={shouldShowComposeInput}
Expand Down
4 changes: 3 additions & 1 deletion src/pages/home/report/ReportActionItemMessageEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -467,6 +467,8 @@ function ReportActionItemMessageEdit(
}
}, [isFocused, hideSuggestionMenu]);

const closeButtonStyles = [styles.composerSizeButton, {marginVertical: styles.composerSizeButton.marginHorizontal}];

return (
<>
<View
Expand All @@ -486,7 +488,7 @@ function ReportActionItemMessageEdit(
<Tooltip text={translate('common.cancel')}>
<PressableWithFeedback
onPress={deleteDraft}
style={styles.composerSizeButton}
style={closeButtonStyles}
role={CONST.ROLE.BUTTON}
accessibilityLabel={translate('common.close')}
// disable dimming
Expand Down
Loading

0 comments on commit 2f084c3

Please sign in to comment.