Skip to content

Commit 0a3047a

Browse files
jmusialjmusial
committed
forgotten stashed commit
1 parent e70b66b commit 0a3047a

7 files changed

Lines changed: 75 additions & 33 deletions

File tree

‎src/components/AvatarCropModal/AvatarCropModal.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -352,6 +352,7 @@ function AvatarCropModal({imageUri = '', imageName = '', imageType = '', onClose
352352
shouldUseCustomBackdrop
353353
shouldHandleNavigationBack
354354
enableEdgeToEdgeBottomSafeAreaPadding
355+
shouldUseReanimatedModal
355356
>
356357
<ScreenWrapper
357358
style={[styles.pb0]}

‎src/components/Modal/BaseModal.tsx‎

Lines changed: 25 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
import React, {forwardRef, useCallback, useContext, useEffect, useMemo, useRef} from 'react';
2-
import {View} from 'react-native';
2+
// Animated required for side panel navigation
3+
// eslint-disable-next-line no-restricted-imports
4+
import {Animated, View} from 'react-native';
35
import type {ModalProps as ReactNativeModalProps} from 'react-native-modal';
46
import ReactNativeModal from 'react-native-modal';
57
import type {ValueOf} from 'type-fest';
@@ -105,9 +107,10 @@ function BaseModal(
105107
const {windowWidth, windowHeight} = useWindowDimensions();
106108
// We need to use isSmallScreenWidth instead of shouldUseNarrowLayout to apply correct modal width
107109
// eslint-disable-next-line rulesdir/prefer-shouldUseNarrowLayout-instead-of-isSmallScreenWidth
108-
const {isSmallScreenWidth} = useResponsiveLayout();
109-
const {sidePanelOffset} = useSidePanel();
110-
const sidePanelStyle = shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined;
110+
const {isSmallScreenWidth, shouldUseNarrowLayout} = useResponsiveLayout();
111+
const {sidePanelOffset, modalTranslateX} = useSidePanel();
112+
const sidePanelStyle = !shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {paddingRight: sidePanelOffset.current} : undefined;
113+
const sidePanelReanimatedStyle = shouldUseReanimatedModal && shouldApplySidePanelOffset && !isSmallScreenWidth ? {transform: [{translateX: modalTranslateX.current}]} : undefined;
111114
const keyboardStateContextValue = useKeyboardState();
112115

113116
const insets = useSafeAreaInsets();
@@ -221,13 +224,27 @@ function BaseModal(
221224
windowWidth,
222225
windowHeight,
223226
isSmallScreenWidth,
227+
shouldUseNarrowLayout,
224228
},
225229
popoverAnchorPosition,
226230
innerContainerStyle,
227231
outerStyle,
228232
shouldUseModalPaddingStyle,
233+
shouldUseReanimatedModal,
229234
),
230-
[StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle, shouldUseModalPaddingStyle],
235+
[
236+
StyleUtils,
237+
type,
238+
windowWidth,
239+
windowHeight,
240+
isSmallScreenWidth,
241+
shouldUseNarrowLayout,
242+
popoverAnchorPosition,
243+
innerContainerStyle,
244+
outerStyle,
245+
shouldUseModalPaddingStyle,
246+
shouldUseReanimatedModal,
247+
],
231248
);
232249

233250
const modalPaddingStyles = useMemo(() => {
@@ -349,12 +366,12 @@ function BaseModal(
349366
initialFocus={initialFocus}
350367
shouldPreventScroll={shouldPreventScrollOnFocus}
351368
>
352-
<View
353-
style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
369+
<Animated.View
370+
style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone, sidePanelReanimatedStyle]}
354371
ref={ref}
355372
>
356373
<ColorSchemeWrapper>{children}</ColorSchemeWrapper>
357-
</View>
374+
</Animated.View>
358375
</FocusTrapForModal>
359376
</ModalContent>
360377
{!keyboardStateContextValue?.isKeyboardActive && <NavigationBar />}

‎src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,22 @@ function Backdrop({
2222
const {translate} = useLocalize();
2323

2424
const Entering = useMemo(() => {
25+
if (!backdropOpacity) {
26+
return;
27+
}
2528
const FadeIn = new Keyframe(getModalInAnimation('fadeIn'));
2629

2730
return FadeIn.duration(animationInTiming);
28-
}, [animationInTiming]);
31+
}, [animationInTiming, backdropOpacity]);
2932

3033
const Exiting = useMemo(() => {
34+
if (!backdropOpacity) {
35+
return;
36+
}
3137
const FadeOut = new Keyframe(getModalOutAnimation('fadeOut'));
3238

3339
return FadeOut.duration(animationOutTiming);
34-
}, [animationOutTiming]);
40+
}, [animationOutTiming, backdropOpacity]);
3541

3642
const backdropStyle = useMemo(
3743
() => ({

‎src/components/SidePanel/HelpModal/index.android.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,6 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) {
2727
type={CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED}
2828
shouldHandleNavigationBack
2929
shouldUseReanimatedModal
30-
animationIn="slideInRight"
31-
animationOut="slideOutRight"
3230
>
3331
<HelpContent closeSidePanel={closeSidePanel} />
3432
</Modal>

‎src/components/SidePanel/HelpModal/index.ios.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,6 @@ function Help({shouldHideSidePanel, closeSidePanel}: HelpProps) {
1414
propagateSwipe
1515
swipeDirection={CONST.SWIPE_DIRECTION.RIGHT}
1616
shouldUseReanimatedModal
17-
animationIn="slideInRight"
18-
animationOut="slideOutRight"
1917
>
2018
<HelpContent closeSidePanel={closeSidePanel} />
2119
</Modal>

‎src/hooks/useSidePanel.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ function useSidePanel() {
7171
const shouldApplySidePanelOffset = isExtraLargeScreenWidth && !shouldHideSidePanel;
7272
const sidePanelOffset = useRef(new Animated.Value(shouldApplySidePanelOffset ? variables.sideBarWidth : 0));
7373
const sidePanelTranslateX = useRef(new Animated.Value(shouldHideSidePanel ? sidePanelWidth : 0));
74+
const modalTranslateX = useRef(new Animated.Value(shouldApplySidePanelOffset ? -variables.sideBarWidth : 0));
7475
useEffect(() => {
7576
setIsSidePanelTransitionEnded(false);
7677
Animated.parallel([
@@ -84,6 +85,11 @@ function useSidePanel() {
8485
duration: CONST.ANIMATED_TRANSITION,
8586
useNativeDriver: true,
8687
}),
88+
Animated.timing(modalTranslateX.current, {
89+
toValue: shouldApplySidePanelOffset ? -variables.sideBarWidth : 0,
90+
duration: CONST.ANIMATED_TRANSITION,
91+
useNativeDriver: true,
92+
}),
8793
]).start(() => setIsSidePanelTransitionEnded(true));
8894

8995
// eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- sidePanelWidth dependency caused the help panel content to slide in on window resize
@@ -115,6 +121,7 @@ function useSidePanel() {
115121
shouldHideToolTip,
116122
sidePanelOffset,
117123
sidePanelTranslateX,
124+
modalTranslateX,
118125
openSidePanel,
119126
closeSidePanel,
120127
};

‎src/styles/utils/generators/ModalStyleUtils.ts‎

Lines changed: 34 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ type WindowDimensions = {
1919
windowWidth: number;
2020
windowHeight: number;
2121
isSmallScreenWidth: boolean;
22+
shouldUseNarrowLayout?: boolean;
2223
};
2324

2425
type GetModalStyles = {
@@ -42,12 +43,21 @@ type GetModalStylesStyleUtil = {
4243
innerContainerStyle?: ViewStyle,
4344
outerStyle?: ViewStyle,
4445
shouldUseModalPaddingStyle?: boolean,
46+
shouldUseReanimatedModal?: boolean,
4547
) => GetModalStyles;
4648
};
4749

4850
const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({theme, styles}) => ({
49-
getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}, shouldUseModalPaddingStyle = true): GetModalStyles => {
50-
const {windowWidth, isSmallScreenWidth} = windowDimensions;
51+
getModalStyles: (
52+
type,
53+
windowDimensions,
54+
popoverAnchorPosition = {},
55+
innerContainerStyle = {},
56+
outerStyle = {},
57+
shouldUseModalPaddingStyle = true,
58+
shouldUseReanimatedModal = false,
59+
): GetModalStyles => {
60+
const {windowWidth, isSmallScreenWidth, shouldUseNarrowLayout} = windowDimensions;
5161

5262
let modalStyle: GetModalStyles['modalStyle'] = {
5363
margin: 0,
@@ -258,7 +268,7 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
258268
modalStyle = {
259269
...modalStyle,
260270
...{
261-
marginLeft: isSmallScreenWidth ? 0 : windowWidth - variables.sideBarWidth,
271+
marginLeft: isSmallScreenWidth || (shouldUseReanimatedModal && shouldUseNarrowLayout) ? 0 : windowWidth - variables.sideBarWidth,
262272
width: isSmallScreenWidth ? '100%' : variables.sideBarWidth,
263273
flexDirection: 'row',
264274
justifyContent: 'flex-end',
@@ -270,22 +280,27 @@ const createModalStyleUtils: StyleUtilGenerator<GetModalStylesStyleUtil> = ({the
270280
overflow: 'hidden',
271281
};
272282

273-
animationIn = {
274-
from: {
275-
translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
276-
},
277-
to: {
278-
translateX: 0,
279-
},
280-
};
281-
animationOut = {
282-
from: {
283-
translateX: 0,
284-
},
285-
to: {
286-
translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
287-
},
288-
};
283+
if (shouldUseReanimatedModal) {
284+
animationIn = 'slideInRight';
285+
animationOut = 'slideOutRight';
286+
} else {
287+
animationIn = {
288+
from: {
289+
translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
290+
},
291+
to: {
292+
translateX: 0,
293+
},
294+
};
295+
animationOut = {
296+
from: {
297+
translateX: 0,
298+
},
299+
to: {
300+
translateX: isSmallScreenWidth ? windowWidth : variables.sideBarWidth,
301+
},
302+
};
303+
}
289304
hideBackdrop = true;
290305
swipeDirection = undefined;
291306
shouldAddBottomSafeAreaPadding = true;

0 commit comments

Comments
 (0)