Files
cally/components/pages/(tablet_pages)/ViewSwitch.tsx
Milan Paunovic c184eb3293 adujstments
2025-02-16 01:07:12 +01:00

85 lines
2.4 KiB
TypeScript

import {SegmentedControl, View} from "react-native-ui-lib";
import React, {memo, useCallback, useMemo, useRef, useEffect} from "react";
import {StyleSheet} from "react-native";
import {NavigationProp, useNavigationState} from "@react-navigation/native";
interface ViewSwitchProps {
navigation: NavigationProp<any>;
}
const ViewSwitch = memo(function ViewSwitch({navigation}: ViewSwitchProps) {
const currentIndex = useNavigationState((state) => state.index === 6 ? 1 : 0);
const isInitialMount = useRef(true);
const navigationPending = useRef(false);
useEffect(() => {
if (isInitialMount.current) {
isInitialMount.current = false;
return;
}
}, []);
const handleSegmentChange = useCallback(
(index: number) => {
if (navigationPending.current) return;
navigationPending.current = true;
setTimeout(() => {
navigation.navigate(index === 0 ? "calendar" : "todos");
navigationPending.current = false;
}, 300);
},
[navigation]
);
const segments = useMemo(() => [
{label: "Calendar", segmentLabelStyle: styles.labelStyle},
{label: "To Dos", segmentLabelStyle: styles.labelStyle},
], []);
return (
<View style={styles.container}>
<SegmentedControl
segments={segments}
containerStyle={styles.segmentContainer}
style={styles.segment}
backgroundColor="#ebebeb"
inactiveColor="black"
activeColor="white"
activeBackgroundColor="#ea156c"
outlineColor="white"
outlineWidth={3}
onChangeIndex={handleSegmentChange}
initialIndex={currentIndex}
/>
</View>
);
});
const styles = StyleSheet.create({
container: {
borderRadius: 30,
backgroundColor: "#ebebeb",
shadowColor: "#000",
shadowOffset: {width: 0, height: 0},
shadowOpacity: 0,
shadowRadius: 0,
elevation: 0,
},
segmentContainer: {
height: 44,
width: 220,
},
segment: {
borderRadius: 50,
borderWidth: 0,
height: 44,
},
labelStyle: {
fontSize: 16,
fontFamily: "Manrope_600SemiBold",
},
});
export default ViewSwitch;