149 lines
3.8 KiB
TypeScript
149 lines
3.8 KiB
TypeScript
import AppText from 'components/AppText';
|
|
import React, { Dispatch, SetStateAction, useRef, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import {
|
|
FlatList,
|
|
NativeScrollEvent,
|
|
NativeSyntheticEvent,
|
|
StyleSheet,
|
|
TouchableOpacity,
|
|
View,
|
|
useWindowDimensions,
|
|
} from 'react-native';
|
|
import ArrowLeft from 'svg/ArrowLeft';
|
|
import ArrowRightUnderline from 'svg/ArrowRightUnderline';
|
|
|
|
type FilterType =
|
|
| 'COLLECTING'
|
|
| 'ON_THE_WAY'
|
|
| 'IN_CUSTOMS'
|
|
| 'IN_WAREHOUSE'
|
|
| 'DELIVERED'
|
|
| 'PAID';
|
|
|
|
interface Props {
|
|
filter: FilterType;
|
|
setFilter: Dispatch<SetStateAction<FilterType>>;
|
|
}
|
|
|
|
const tabList: { label: string; value: FilterType }[] = [
|
|
{ label: "Yig'ilmoqda", value: 'COLLECTING' },
|
|
{ label: "Yo'lda", value: 'ON_THE_WAY' },
|
|
{ label: 'Bojxonada', value: 'IN_CUSTOMS' },
|
|
{ label: 'Toshkent omboriga yetib keldi', value: 'IN_WAREHOUSE' },
|
|
{ label: 'Topshirish punktiga yuborildi', value: 'DELIVERED' },
|
|
];
|
|
|
|
const Tabs = ({ filter, setFilter }: Props) => {
|
|
const { width: screenWidth } = useWindowDimensions();
|
|
const cardWidth = screenWidth * 0.95;
|
|
const styles = makeStyles();
|
|
const flatListRef = useRef<FlatList>(null);
|
|
const [scrollX, setScrollX] = useState(0);
|
|
const { t } = useTranslation();
|
|
const scrollStep = 120;
|
|
|
|
const handleScrollLeft = () => {
|
|
flatListRef.current?.scrollToOffset({
|
|
offset: Math.max(0, scrollX - scrollStep),
|
|
animated: true,
|
|
});
|
|
};
|
|
|
|
const handleScrollRight = () => {
|
|
flatListRef.current?.scrollToOffset({
|
|
offset: scrollX + scrollStep,
|
|
animated: true,
|
|
});
|
|
};
|
|
|
|
const onScroll = (event: NativeSyntheticEvent<NativeScrollEvent>) => {
|
|
setScrollX(event.nativeEvent.contentOffset.x);
|
|
};
|
|
|
|
return (
|
|
<View style={styles.container}>
|
|
<TouchableOpacity style={styles.navButton} onPress={handleScrollLeft}>
|
|
<ArrowLeft color="#28A7E8" width={20} height={20} />
|
|
</TouchableOpacity>
|
|
|
|
<FlatList
|
|
ref={flatListRef}
|
|
horizontal
|
|
data={tabList}
|
|
keyExtractor={item => item.value}
|
|
showsHorizontalScrollIndicator={false}
|
|
onScroll={onScroll}
|
|
renderItem={({ item }) => (
|
|
<TouchableOpacity
|
|
style={[styles.card, filter === item.value && styles.activeCard]}
|
|
onPress={() => setFilter(item.value)}
|
|
>
|
|
<AppText
|
|
style={[styles.text, filter === item.value && styles.activeText]}
|
|
>
|
|
{t(item.label)}
|
|
</AppText>
|
|
</TouchableOpacity>
|
|
)}
|
|
contentContainerStyle={styles.scrollContent}
|
|
/>
|
|
|
|
<TouchableOpacity style={styles.navButton} onPress={handleScrollRight}>
|
|
<ArrowRightUnderline color="#28A7E8" width={20} height={20} />
|
|
</TouchableOpacity>
|
|
</View>
|
|
);
|
|
};
|
|
|
|
const makeStyles = () =>
|
|
StyleSheet.create({
|
|
container: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
width: '95%',
|
|
height: 50,
|
|
backgroundColor: '#FFFFFF',
|
|
marginTop: 10,
|
|
alignSelf: 'center',
|
|
borderRadius: 8,
|
|
paddingHorizontal: 4,
|
|
shadowColor: '#000',
|
|
shadowOffset: { width: 0, height: 1 },
|
|
shadowOpacity: 0.1,
|
|
shadowRadius: 2,
|
|
|
|
elevation: 1,
|
|
},
|
|
scrollContent: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingHorizontal: 4,
|
|
},
|
|
card: {
|
|
paddingHorizontal: 12,
|
|
paddingVertical: 8,
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: '#F3FAFF',
|
|
marginRight: 8,
|
|
borderRadius: 8,
|
|
},
|
|
activeCard: {
|
|
backgroundColor: '#28A7E8',
|
|
},
|
|
text: {
|
|
color: '#28A7E8',
|
|
fontWeight: '500',
|
|
fontSize: 14,
|
|
},
|
|
activeText: {
|
|
color: '#fff',
|
|
},
|
|
navButton: {
|
|
padding: 6,
|
|
},
|
|
});
|
|
|
|
export default Tabs;
|