This commit is contained in:
noumantahir 2024-09-20 10:35:57 +05:00
parent b45f3e7b0c
commit 9fdc414fda
4 changed files with 35 additions and 84 deletions

View File

@ -1,9 +1,9 @@
import React, { useState } from 'react';
import { TabView, TabBarProps } from 'react-native-tab-view';
import { useWindowDimensions, View } from 'react-native';
import { TabbedPostsProps } from '../types/tabbedPosts.types';
import { FeedTabBar, TabItem } from '../view/feedTabBar';
import PostsTabContent from '../view/postsTabContent';
import { TabView, TabBarProps } from 'react-native-tab-view';
import { useWindowDimensions, View } from 'react-native';
export const TabbedPosts = ({
filterOptions,
@ -16,10 +16,8 @@ export const TabbedPosts = ({
pageType,
tabContentOverrides,
stackedTabs,
onTabChange,
...props
}: TabbedPostsProps) => {
const layout = useWindowDimensions();
// initialize state
@ -48,7 +46,7 @@ export const TabbedPosts = ({
const combinedFilters = [...mainFilters, ...subFilters];
const [routes] = useState(
combinedFilters.map((filter, index) => ({ key: filter.filterKey, title: filter.label }))
combinedFilters.map((filter) => ({ key: filter.filterKey, title: filter.label })),
);
const [selectedFilter, setSelectedFilter] = useState(combinedFilters[initialTabIndex].filterKey);
@ -67,47 +65,15 @@ export const TabbedPosts = ({
createFilterScrollRequest(null);
};
// initialize first set of pages
const pages = combinedFilters.map((filter, index) => {
if (tabContentOverrides && tabContentOverrides.has(index)) {
return tabContentOverrides.get(index);
}
return (
<PostsTabContent
key={filter.filterKey}
filterKey={filter.filterKey}
isFeedScreen={isFeedScreen}
isInitialTab={initialTabIndex == index}
feedUsername={feedUsername}
pageType={pageType}
filterScrollRequest={filterScrollRequest}
onScrollRequestProcessed={_onScrollRequestProcessed}
{...props}
/>
);
});
// render tab bar
const _renderTabBar = (props: TabBarProps<any>) => {
return (
<FeedTabBar
{...props}
routes={routes}
initialFirstStackIndex={selectedOptionIndex}
onFilterSelect={_onFilterSelect}
pageType={pageType}
/>
<FeedTabBar {...props} routes={routes} onFilterSelect={_onFilterSelect} pageType={pageType} />
);
};
// Dynamically create scenes for each tab
const renderScene = ({ route }) => {
if (tabContentOverrides && tabContentOverrides.has(index)) {
return tabContentOverrides.get(index);
}
@ -127,7 +93,7 @@ export const TabbedPosts = ({
};
return (
<View style={{ flex: 1, width: layout.width }} >
<View style={{ flex: 1, width: layout.width }}>
<TabView
animationEnabled={false}
lazy={true}
@ -139,6 +105,5 @@ export const TabbedPosts = ({
initialLayout={{ width: layout.width }}
/>
</View>
);
};

View File

@ -3,7 +3,6 @@ import getWindowDimensions from '../../../utils/getWindowDimensions';
const deviceWidth = getWindowDimensions().width;
export default EStyleSheet.create({
container: {
justifyContent: 'center',
@ -22,13 +21,13 @@ export default EStyleSheet.create({
},
tabStyle: {
width: 'auto',
minWidth: (deviceWidth / 3) - 12,
minWidth: deviceWidth / 3 - 12,
height: 38,
paddingTop: 0,
},
tabBarStyle: {
flex: 1,
backgroundColor: EStyleSheet.value("$primaryLightBackground"), // Background color for the TabBar
backgroundColor: EStyleSheet.value('$primaryLightBackground'), // Background color for the TabBar
},
dropdownWrapper: {

View File

@ -13,7 +13,6 @@ export interface TabbedPostsProps {
tabContentOverrides: Map<number, any>;
stackedTabs: boolean;
pinnedPermlink?: string;
onTabChange: (index: number) => void;
handleOnScroll: () => void;
}

View File

@ -1,12 +1,10 @@
import React, { useRef, useState } from 'react';
import React, { useRef } from 'react';
import { useIntl } from 'react-intl';
import { useDispatch, useSelector } from 'react-redux';
import { CustomiseFiltersModal, FilterBar, IconButton, Tag } from '../..';
import { setHidePostsThumbnails } from '../../../redux/actions/applicationActions';
import { CustomiseFiltersModalRef } from '../../customiseFiltersModal/customiseFiltersModal';
import { TabBar, TabBarProps } from 'react-native-tab-view';
import EStyleSheet from 'react-native-extended-stylesheet';
import { Text, useWindowDimensions, View } from 'react-native';
import { useWindowDimensions, View } from 'react-native';
import { CustomiseFiltersModal, IconButton, Tag } from '../..';
import { CustomiseFiltersModalRef } from '../../customiseFiltersModal/customiseFiltersModal';
import styles from '../styles/feedTabBar.styles';
export interface TabItem {
@ -18,20 +16,12 @@ interface FeedTabBarProps extends TabBarProps<any> {
pageType?: 'main' | 'community' | 'profile' | 'ownProfile';
routes: {
key: string;
title: string
}[],
initialFirstStackIndex: number;
title: string;
}[];
onFilterSelect: (filterKey: string) => void;
}
export const FeedTabBar = ({
routes,
initialFirstStackIndex,
onFilterSelect,
pageType,
...props
}: FeedTabBarProps) => {
export const FeedTabBar = ({ routes, onFilterSelect, pageType, ...props }: FeedTabBarProps) => {
const intl = useIntl();
const layout = useWindowDimensions();
@ -45,14 +35,14 @@ export const FeedTabBar = ({
}
};
return (
<View style={{
<View
style={{
flexDirection: 'row',
alignItems: 'center', backgroundColor: EStyleSheet.value("$primaryLightBackground")
}} >
alignItems: 'center',
backgroundColor: EStyleSheet.value('$primaryLightBackground'),
}}
>
<TabBar
renderLabel={({ route, focused }) => (
<Tag
@ -61,18 +51,17 @@ export const FeedTabBar = ({
isFilter
isPin={focused}
/>
)}
style={styles.tabBarStyle}
indicatorStyle={styles.indicatorStyle}
tabStyle={{ ...styles.tabStyle, minWidth: (layout.width / 3) - (enableCustomTabs ? 14 : 0) }}
tabStyle={{ ...styles.tabStyle, minWidth: layout.width / 3 - (enableCustomTabs ? 14 : 0) }}
scrollEnabled={routes.length > 3}
onTabPress={({ route }) => {
onFilterSelect(route.key)
onFilterSelect(route.key);
}}
{...props}
/>
{enableCustomTabs &&
{enableCustomTabs && (
<IconButton
iconStyle={styles.rightIcon}
style={styles.rightIconWrapper}
@ -81,9 +70,8 @@ export const FeedTabBar = ({
name="add"
onPress={_onCustomisePress}
/>
}
)}
{enableCustomTabs && <CustomiseFiltersModal pageType={pageType} ref={customiseModalRef} />}
</View>
);
};