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.

Sign up for GitHub

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

Jump to bottom

fix: no action after swipe down to close action #37630

Merged
merged 3 commits into from
Mar 5, 2024
Merged

fix: no action after swipe down to close action #37630

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
edb7c94
fix: no action after swipe down to close action
kirillzyusko Mar 1, 2024
252b322
chore: fix after review
kirillzyusko Mar 4, 2024
a534558
fix: CI
kirillzyusko Mar 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
184 changes: 100 additions & 84 deletions src/components/AttachmentModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import {Animated, Keyboard, View} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import { useSharedValue } from 'react-native-reanimated';
import useLocalize from '@hooks/useLocalize';
import useNetwork from '@hooks/useNetwork';
import useStyleUtils from '@hooks/useStyleUtils';
Expand Down Expand Up @@ -39,6 +40,7 @@ import * as Expensicons from './Icon/Expensicons';
import * as Illustrations from './Icon/Illustrations';
import Modal from './Modal';
import SafeAreaConsumer from './SafeAreaConsumer';
import AttachmentCarouselPagerContext from './Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext';

/**
* Modal render prop component that exposes modal launching triggers that can be used
Expand Down Expand Up @@ -184,6 +186,7 @@ function AttachmentModal({
const [isConfirmButtonDisabled, setIsConfirmButtonDisabled] = useState(false);
const [confirmButtonFadeAnimation] = useState(() => new Animated.Value(1));
const [isDownloadButtonReadyToBeShown, setIsDownloadButtonReadyToBeShown] = React.useState(true);
const nope = useSharedValue(false);
const {windowWidth, isSmallScreenWidth} = useWindowDimensions();
const isOverlayModalVisible = (isReceiptAttachment && isDeleteReceiptConfirmModalVisible) || (!isReceiptAttachment && isAttachmentInvalid);

Expand Down Expand Up @@ -466,6 +469,16 @@ function AttachmentModal({
shouldShowDownloadButton = allowDownload && isDownloadButtonReadyToBeShown && !isReceiptAttachment && !isOffline;
shouldShowThreeDotsButton = isReceiptAttachment && isModalOpen && threeDotsMenuItems.length !== 0;
}
const context = useMemo(() => ({
pagerItems: [],
activePage: 0,
pagerRef: undefined,
isPagerScrolling: nope,
isScrollEnabled: nope,
onTap: () => {},
onScaleChanged: () => {},
onSwipeDown: closeModal,
}), [closeModal, nope]);

return (
<>
Expand All @@ -485,94 +498,97 @@ function AttachmentModal({
propagateSwipe
>
<GestureHandlerRootView style={styles.flex1}>
{isSmallScreenWidth && <HeaderGap />}
<HeaderWithBackButton
title={headerTitleNew}
shouldShowBorderBottom
shouldShowDownloadButton={shouldShowDownloadButton}
onDownloadButtonPress={() => downloadAttachment()}
shouldShowCloseButton={!isSmallScreenWidth}
shouldShowBackButton={isSmallScreenWidth}
onBackButtonPress={closeModal}
onCloseButtonPress={closeModal}
shouldShowThreeDotsButton={shouldShowThreeDotsButton}
threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
threeDotsMenuItems={threeDotsMenuItems}
shouldOverlayDots
/>
<View style={styles.imageModalImageCenterContainer}>
{isLoading && <FullScreenLoadingIndicator />}
{shouldShowNotFoundPage && !isLoading && (
<BlockingView
icon={Illustrations.ToddBehindCloud}
iconWidth={variables.modalTopIconWidth}
iconHeight={variables.modalTopIconHeight}
title={translate('notFound.notHere')}
subtitle={translate('notFound.pageNotFound')}
linkKey="notFound.goBackHome"
shouldShowLink
onLinkPress={() => Navigation.dismissModal()}
/>
)}
{!isEmptyObject(report) && !isReceiptAttachment ? (
<AttachmentCarousel
report={report}
onNavigate={onNavigate}
source={source}
onToggleKeyboard={updateConfirmButtonVisibility}
setDownloadButtonVisibility={setDownloadButtonVisibility}
/>
) : (
!!sourceForAttachmentView &&
shouldLoadAttachment &&
!isLoading &&
!shouldShowNotFoundPage && (
<AttachmentView
// @ts-expect-error TODO: Remove this once Attachments (https://github.com/Expensify/App/issues/24969) is migrated to TypeScript.
containerStyles={[styles.mh5]}
source={sourceForAttachmentView}
isAuthTokenRequired={isAuthTokenRequired}
file={file}
<AttachmentCarouselPagerContext.Provider value={context}>
kirillzyusko marked this conversation as resolved.
Show resolved Hide resolved
{isSmallScreenWidth && <HeaderGap />}
<HeaderWithBackButton
title={headerTitleNew}
shouldShowBorderBottom
shouldShowDownloadButton={shouldShowDownloadButton}
onDownloadButtonPress={() => downloadAttachment()}
shouldShowCloseButton={!isSmallScreenWidth}
shouldShowBackButton={isSmallScreenWidth}
onBackButtonPress={closeModal}
onCloseButtonPress={closeModal}
shouldShowThreeDotsButton={shouldShowThreeDotsButton}
threeDotsAnchorPosition={styles.threeDotsPopoverOffsetAttachmentModal(windowWidth)}
threeDotsMenuItems={threeDotsMenuItems}
shouldOverlayDots
/>
<View style={styles.imageModalImageCenterContainer}>
{isLoading && <FullScreenLoadingIndicator />}
{shouldShowNotFoundPage && !isLoading && (
<BlockingView
icon={Illustrations.ToddBehindCloud}
iconWidth={variables.modalTopIconWidth}
iconHeight={variables.modalTopIconHeight}
title={translate('notFound.notHere')}
subtitle={translate('notFound.pageNotFound')}
linkKey="notFound.goBackHome"
shouldShowLink
onLinkPress={() => Navigation.dismissModal()}
/>
)}
{!isEmptyObject(report) && !isReceiptAttachment ? (
<AttachmentCarousel
report={report}
onNavigate={onNavigate}
onClose={closeModal}
source={source}
onToggleKeyboard={updateConfirmButtonVisibility}
isWorkspaceAvatar={isWorkspaceAvatar}
maybeIcon={maybeIcon}
fallbackSource={fallbackSource}
isUsedInAttachmentModal
transactionID={transaction?.transactionID}
setDownloadButtonVisibility={setDownloadButtonVisibility}
/>
)
)}
</View>
{/* If we have an onConfirm method show a confirmation button */}
{!!onConfirm && (
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
<Button
success
style={[styles.buttonConfirm, isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
textStyles={[styles.buttonConfirmText]}
text={translate('common.send')}
onPress={submitAndClose}
isDisabled={isConfirmButtonDisabled}
pressOnEnter
) : (
!!sourceForAttachmentView &&
shouldLoadAttachment &&
!isLoading &&
!shouldShowNotFoundPage && (
<AttachmentView
// @ts-expect-error TODO: Remove this once Attachments (https://github.com/Expensify/App/issues/24969) is migrated to TypeScript.
containerStyles={[styles.mh5]}
source={sourceForAttachmentView}
isAuthTokenRequired={isAuthTokenRequired}
file={file}
onToggleKeyboard={updateConfirmButtonVisibility}
isWorkspaceAvatar={isWorkspaceAvatar}
maybeIcon={maybeIcon}
fallbackSource={fallbackSource}
isUsedInAttachmentModal
transactionID={transaction?.transactionID}
/>
</Animated.View>
)
)}
</SafeAreaConsumer>
)}
{isReceiptAttachment && (
<ConfirmModal
title={translate('receipt.deleteReceipt')}
isVisible={isDeleteReceiptConfirmModalVisible}
onConfirm={deleteAndCloseModal}
onCancel={closeConfirmModal}
prompt={translate('receipt.deleteConfirmation')}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
/>
)}
</View>
{/* If we have an onConfirm method show a confirmation button */}
{!!onConfirm && (
<SafeAreaConsumer>
{({safeAreaPaddingBottomStyle}) => (
<Animated.View style={[StyleUtils.fade(confirmButtonFadeAnimation), safeAreaPaddingBottomStyle]}>
<Button
success
style={[styles.buttonConfirm, isSmallScreenWidth ? {} : styles.attachmentButtonBigScreen]}
textStyles={[styles.buttonConfirmText]}
text={translate('common.send')}
onPress={submitAndClose}
isDisabled={isConfirmButtonDisabled}
pressOnEnter
/>
</Animated.View>
)}
</SafeAreaConsumer>
)}
{isReceiptAttachment && (
<ConfirmModal
title={translate('receipt.deleteReceipt')}
isVisible={isDeleteReceiptConfirmModalVisible}
onConfirm={deleteAndCloseModal}
onCancel={closeConfirmModal}
prompt={translate('receipt.deleteConfirmation')}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
/>
)}
</AttachmentCarouselPagerContext.Provider>
</GestureHandlerRootView>
</Modal>
{!isReceiptAttachment && (
Expand Down
2 changes: 1 addition & 1 deletion src/components/Attachments/AttachmentCarousel/Pager/AttachmentCarouselPagerContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ type AttachmentCarouselPagerContextValue = {

/** The index of the active page */
activePage: number;
pagerRef: ForwardedRef<PagerView>;
pagerRef?: ForwardedRef<PagerView>;
isPagerScrolling: SharedValue<boolean>;
isScrollEnabled: SharedValue<boolean>;
onTap: () => void;
Expand Down
8 changes: 2 additions & 6 deletions src/components/Attachments/AttachmentCarousel/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import extractAttachmentsFromReport from './extractAttachmentsFromReport';
import AttachmentCarouselPager from './Pager';
import useCarouselArrows from './useCarouselArrows';

function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate}) {
function AttachmentCarousel({report, reportActions, parentReportActions, source, onNavigate, setDownloadButtonVisibility, translate, onClose}) {
const styles = useThemeStyles();
const pagerRef = useRef(null);
const [page, setPage] = useState();
Expand Down Expand Up @@ -102,10 +102,6 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
[setShouldShowArrows],
);

const goBack = useCallback(() => {
Navigation.goBack();
}, []);

const containerStyles = [styles.flex1, styles.attachmentCarouselContainer];

if (page == null) {
Expand Down Expand Up @@ -143,7 +139,7 @@ function AttachmentCarousel({report, reportActions, parentReportActions, source,
activeSource={activeSource}
onRequestToggleArrows={toggleArrows}
onPageSelected={({nativeEvent: {position: newPage}}) => updatePage(newPage)}
onClose={goBack}
onClose={onClose}
ref={pagerRef}
/>
</>
Expand Down
8 changes: 4 additions & 4 deletions src/components/MultiGestureCanvas/usePanGesture.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,11 +141,11 @@ const usePanGesture = ({
if (finalTranslateY > SNAP_POINT && zoomScale.value <= 1) {
offsetY.value = withSpring(SNAP_POINT_HIDDEN, SPRING_CONFIG, () => {
isSwipingDownToClose.value = false;
});

if (onSwipeDown) {
runOnJS(onSwipeDown)();
}
if (onSwipeDown) {
runOnJS(onSwipeDown)();
}
});
} else {
// Animated back to the boundary
offsetY.value = withSpring(clampedOffset.y, SPRING_CONFIG, () => {
Expand Down
Loading