customHeader
unknown
plain_text
a year ago
7.1 kB
8
Indexable
/* eslint-disable react-native/no-inline-styles */ import React, { useEffect, useState } from 'react'; import { Animated, Pressable, StatusBar, StyleSheet, Text, TextStyle, TouchableOpacity, View } from 'react-native'; import { hitSlop, iosOpacity, width } from '../../constants/constants'; import GredientBg from './gredientBg'; import fonts from '../../assets/fonts'; import { colors } from '../../theme'; import { useHeaderHeight } from '@react-navigation/elements'; import { useSafeAreaInsets } from 'react-native-safe-area-context'; import Icon from 'react-native-vector-icons/Ionicons'; import { ChevronLeftIcon, MenuIcon } from '../../assets/Icons'; import { useIsFocused, useNavigation } from '@react-navigation/native'; import { ViewStyle } from 'react-native'; import AntDesign from 'react-native-vector-icons/AntDesign'; import Ionicons from 'react-native-vector-icons/Ionicons'; import { Dropdown } from 'react-native-element-dropdown'; import { useDispatch } from 'react-redux'; import { storeActiveDay, storeActiveWeek } from '../../redux/actions/fitness'; import { selectDate } from '../../redux/actions/users'; type CustomHeaderType = { title?: String; bgColor?: String; backButton?: String; menuButton?: Boolean; renderLeftIcon?: String; renderRightIcon?: String; titleStyle?: TextStyle; onPress?: () => {}; transparent?: boolean; whiteHeader?: boolean; extraStyles?: ViewStyle; dropdownData?: [] | null; setValue?: ({ val }: { val: string | number; }) => {}; onBack?:()=>{}; }; const CustomHeader = ({ onPress, title, bgColor, backButton, menuButton, renderLeftIcon, renderRightIcon, titleStyle, transparent, whiteHeader, extraStyles, dropdownData, onBack }: CustomHeaderType) => { const headerInset = useSafeAreaInsets(); const navigation = useNavigation(); const dispatch = useDispatch() const [dropdownValue, setDropdownValue] = useState(null) let labelValueArray = []; dropdownData?.forEach(item => { let labelValue = { label: `Week ${item['week']}`, value: String(item['week_id']), }; labelValue = ({ ...labelValue, ...item }) labelValueArray.push(labelValue); }); useEffect(() => { if (dropdownData) { const filteredData = dropdownData?.filter(item => item?.is_active); if (filteredData?.length > 0) { setDropdownValue(String(filteredData[0]?.week_id)); if (filteredData[0]?.days?.length > 0) { const filteredDays = filteredData[0]?.days?.filter(item => item?.is_active); dispatch(storeActiveDay(filteredDays[0])); } dispatch(storeActiveWeek(filteredData[0])); } } }, [dropdownData]); function FocusAwareStatusBar(props) { const isFocused = useIsFocused(); return isFocused ? <StatusBar {...props} /> : null; } return ( <View style={[ styles.container, { width: width, height: width / 7 + headerInset.top, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 15, paddingTop: headerInset.top, elevation: 2, backgroundColor: bgColor ? bgColor : colors.white, ...extraStyles }, iosOpacity, ]}> {/* <StatusBar translucent barStyle={'dark-content'} backgroundColor={'transparent'} /> */} <FocusAwareStatusBar translucent barStyle={'dark-content'} backgroundColor={'transparent'} animated={true} showHideTransition={'slide'} /> <View style={{ flexDirection: 'row', alignItems: 'center' }}> {/* <Icon name="chevron-back" size={width / 18} color={colors.black} /> */} {menuButton ? <TouchableOpacity onPress={() => navigation?.openDrawer()} > <MenuIcon width={width / 15} height={width / 15} /> </TouchableOpacity> : <Pressable onPress={() => onBack ? onBack() : navigation?.goBack()} hitSlop={hitSlop}> {whiteHeader ? <AntDesign name='left' size={width / 15} color={colors.white} /> : <ChevronLeftIcon width={width / 15} height={width / 15} />} </Pressable>} {!dropdownData && <Animated.Text style={[{ fontFamily: fonts.PoppinsSemiBold, fontSize: 18, marginLeft: width / 20, color: whiteHeader ? colors.white : colors.black, }, titleStyle]}> {title} </Animated.Text>} </View> {renderRightIcon && typeof (renderRightIcon) == 'object' && renderRightIcon} {renderRightIcon && typeof (renderRightIcon) == 'function' && renderRightIcon()} {dropdownData && <View style={styles.dropdownContainer}> {labelValueArray?.length == 1 ? <Text style={[{ fontFamily: fonts.PoppinsSemiBold, fontSize: 18, }]}>Week {labelValueArray?.value}</Text> : <Dropdown style={{ borderRadius: 5, width: 100, marginTop: 10 }} itemTextStyle={{ color: '#212529' }} placeholderStyle={{ fontFamily: fonts.PoppinsSemiBold, fontSize: 18, color: whiteHeader ? colors.white : colors.black, }} selectedTextStyle={{ fontFamily: fonts.PoppinsSemiBold, fontSize: 18, color: whiteHeader ? colors.white : colors.black, }} dropdownPosition={'bottom'} data={labelValueArray} placeholder={'Week'} labelField={'label'} valueField={'value'} value={dropdownValue} onChange={(item) => { if (item?.is_original_data) { setDropdownValue(item?.value); dispatch(storeActiveWeek(item)); if (item?.days?.length > 0 && item?.days[0]) { if (item?.days[0].date) { dispatch(storeActiveDay(item?.days[0])); dispatch(selectDate(item?.days[0].date)); } } } }} renderRightIcon={() => ( <Ionicons name={'chevron-down'} size={20} color="#909090" /> )} /> } </View>} </View> ); }; export default CustomHeader; const styles = StyleSheet.create({ container: { width: width, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', paddingHorizontal: 15, elevation: 2, }, dropdownContainer: { position: 'absolute', left: 0, right: 0, alignItems: 'center', justifyContent: 'center', } });
Editor is loading...
Leave a Comment