Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

35380 virtual viewport on report screen #38755

Merged
merged 10 commits into from
Mar 26, 2024
Prev Previous commit
Next Next commit
update condition avoid regression
  • Loading branch information
suneox committed Mar 26, 2024

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
commit 967184b5410282951a05208da76889342099ff6d
3 changes: 1 addition & 2 deletions src/components/EmojiPicker/EmojiPicker.js
Original file line number Diff line number Diff line change
@@ -176,8 +176,7 @@ const EmojiPicker = forwardRef((props, ref) => {
onModalShow={focusEmojiSearchInput}
onModalHide={onModalHide.current}
hideModalContentWhileAnimating
// shouldSetModalVisibility is true for mobile safari to handle adjust virtual viewport position when toggle modal visibility
shouldSetModalVisibility={Browser.isMobileSafari()}
shouldSetModalVisibility={false}
animationInTiming={1}
animationOutTiming={1}
anchorPosition={{
Original file line number Diff line number Diff line change
@@ -24,6 +24,7 @@ const useEmojiPickerMenu = () => {
const [preferredSkinTone] = usePreferredEmojiSkinTone();
const {windowHeight} = useWindowDimensions(true);
const StyleUtils = useStyleUtils();
// calculate the height of the emoji picker based popoverInnerContainer style has maxHeight is 95%
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you update the comment to explain why 95%?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have updated explain the reason for 95%

const listStyle = StyleUtils.getEmojiPickerListHeight(isListFiltered, windowHeight * 0.95);

useEffect(() => {
15 changes: 7 additions & 8 deletions src/libs/actions/Modal.ts
Original file line number Diff line number Diff line change
@@ -49,13 +49,6 @@ function close(onModalCloseCallback: () => void, isNavigating = true) {
closeTop();
}

/**
* Allows other parts of the app to know when a modal has been opened or closed
*/
function setModalVisibility(isVisible: boolean) {
Onyx.merge(ONYXKEYS.MODAL, {isVisible});
}

function onModalDidClose() {
if (!onModalClose) {
return;
@@ -67,7 +60,13 @@ function onModalDidClose() {
onModalClose();
onModalClose = null;
isNavigate = undefined;
setModalVisibility(false);
}

/**
* Allows other parts of the app to know when a modal has been opened or closed
*/
function setModalVisibility(isVisible: boolean) {
Onyx.merge(ONYXKEYS.MODAL, {isVisible});
}

/**
6 changes: 3 additions & 3 deletions src/pages/home/ReportScreen.tsx
Original file line number Diff line number Diff line change
@@ -55,7 +55,7 @@ import {ActionListContext, ReactionListContext} from './ReportScreenContext';
import type {ActionListContextType, ReactionListRef, ScrollPosition} from './ReportScreenContext';

type ReportScreenOnyxProps = {
/** Indicates if there is a modal currently visible or not */
/** Get modal status */
modal: OnyxEntry<OnyxTypes.Modal>;
suneox marked this conversation as resolved.
Show resolved Hide resolved
/** Tells us if the sidebar has rendered */
isSidebarLoaded: OnyxEntry<boolean>;
@@ -133,7 +133,7 @@ function ReportScreen({
markReadyForHydration,
policies = {},
isSidebarLoaded = false,
modal = {isVisible: false},
modal,
isComposerFullSize = false,
userLeavingStatus = false,
currentReportID = '',
@@ -262,7 +262,7 @@ function ReportScreen({
Performance.markStart(CONST.TIMING.CHAT_RENDER);
}
const [isComposerFocus, setIsComposerFocus] = useState(false);
const viewportOffsetTop = useViewportOffsetTop(Browser.isMobileSafari() && isComposerFocus && !modal?.isVisible);
const viewportOffsetTop = useViewportOffsetTop(Browser.isMobileSafari() && isComposerFocus && !modal?.willAlertModalBecomeVisible);

const {reportPendingAction, reportErrors} = ReportUtils.getReportOfflinePendingActionAndErrors(report);
const screenWrapperStyle: ViewStyle[] = [styles.appContent, styles.flex1, {marginTop: viewportOffsetTop}];
Original file line number Diff line number Diff line change
@@ -87,10 +87,10 @@ type ReportActionComposeProps = ReportActionComposeOnyxProps &
isReportReadyForDisplay?: boolean;

/** A method to call when the input is focus */
onComposerFocus: () => void;
onComposerFocus?: () => void;

/** A method to call when the input is blur */
onComposerBlur: () => void;
onComposerBlur?: () => void;
};

// We want consistent auto focus behavior on input between native and mWeb so we have some auto focus management code that will
@@ -305,7 +305,7 @@ function ReportActionCompose({
(event: NativeSyntheticEvent<TextInputFocusEventData>) => {
const webEvent = event as unknown as FocusEvent;
setIsFocused(false);
onComposerBlur();
onComposerBlur?.();
if (suggestionsRef.current) {
suggestionsRef.current.resetSuggestions();
}
@@ -316,9 +316,9 @@ function ReportActionCompose({
[onComposerBlur],
);

const handleFocus = useCallback(() => {
const onFocus = useCallback(() => {
setIsFocused(true);
onComposerFocus();
onComposerFocus?.();
}, [onComposerFocus]);

// resets the composer to normal size when
@@ -449,7 +449,7 @@ function ReportActionCompose({
setIsCommentEmpty={setIsCommentEmpty}
handleSendMessage={handleSendMessage}
shouldShowComposeInput={shouldShowComposeInput}
onFocus={handleFocus}
onFocus={onFocus}
onBlur={onBlur}
measureParentContainer={measureContainer}
listHeight={listHeight}
Loading