Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 4x 4x 4x 4x 13x 4x 13x 13x 13x 13x 13x 13x 13x 1x 1x 13x 3x 1x 1x 2x 13x 13x 3x 2x 1x 13x 5x 1x 4x 1x 1x 3x 13x 5x 13x | import { useCallback, useContext, useMemo, useState } from 'react';
import { type ImageSourcePropType, PanResponder } from 'react-native';
import { NavigationContext } from '@react-navigation/native';
import { useTheme } from '@repo/ui/themes/ThemeContext';
import type { Theme } from '@repo/ui/themes/types';
import { SCREENS } from '@repo/constants/screens';
export type ProfileStep = 'incoming' | 'my' | 'settings';
// const PROFILE_STEPS: ProfileStep[] = ['incoming', 'my', 'settings'];
const PROFILE_STEPS: ProfileStep[] = ['settings'];
const SWIPE_ACTIVATION_DISTANCE = 12;
const SWIPE_TRIGGER_DISTANCE = 56;
const getProfileStepHeader = (
assets: Theme['assets'],
): Record<ProfileStep, { title: string; image: ImageSourcePropType }> => ({
incoming: {
title: 'Incoming Requests',
image: assets.coffeeMascot,
},
my: {
title: 'My Requests',
image: assets.patinMascot,
},
settings: {
title: 'Settings',
image: assets.coffeeMascot,
},
});
export const useProfileSteps = () => {
const navigation = useContext(NavigationContext);
const { theme } = useTheme();
const [activeStepIndex, setActiveStepIndex] = useState(0);
const activeStep = PROFILE_STEPS[activeStepIndex] ?? PROFILE_STEPS[0];
const profileStepHeader = useMemo(() => getProfileStepHeader(theme.assets), [theme.assets]);
const activeHeader = profileStepHeader[activeStep];
const updateStepIndex = useCallback((nextIndex: number) => {
Eif (nextIndex < 0 || nextIndex >= PROFILE_STEPS.length) {
return;
}
setActiveStepIndex(nextIndex);
}, []);
const handleSwipeStep = useCallback(
(dx: number) => {
if (dx <= -SWIPE_TRIGGER_DISTANCE) {
updateStepIndex(activeStepIndex + 1);
return;
}
Iif (dx >= SWIPE_TRIGGER_DISTANCE && activeStepIndex > 0) {
updateStepIndex(activeStepIndex - 1);
}
},
[activeStepIndex, updateStepIndex],
);
const panResponder = useMemo(
() =>
PanResponder.create({
onMoveShouldSetPanResponder: (_, gestureState) =>
Math.abs(gestureState.dx) > Math.abs(gestureState.dy) &&
Math.abs(gestureState.dx) > SWIPE_ACTIVATION_DISTANCE,
onPanResponderRelease: (_, gestureState) => {
handleSwipeStep(gestureState.dx);
},
onPanResponderTerminate: (_, gestureState) => {
handleSwipeStep(gestureState.dx);
},
}),
[handleSwipeStep],
);
const navigateToHome = useCallback(() => {
if (!navigation) {
return;
}
if (navigation.canGoBack()) {
navigation.goBack();
return;
}
navigation.navigate(SCREENS.HOME);
}, [navigation]);
const handleBackStep = useCallback(() => {
navigateToHome();
}, [navigateToHome]);
return {
activeStep,
activeStepIndex,
activeHeader,
profileSteps: PROFILE_STEPS,
panHandlers: panResponder.panHandlers,
handleBackStep,
};
};
|