mirror of
https://github.com/ecency/ecency-mobile.git
synced 2024-12-24 05:42:33 +03:00
added basic filter structure with single tab bar manager
This commit is contained in:
parent
f90f661b17
commit
f97ff24142
@ -1,81 +1,60 @@
|
||||
import React, { useState } from 'react';
|
||||
// import { Animated, View, TouchableOpacity, StyleSheet } from 'react-native';
|
||||
// import { TabView, SceneMap } from 'react-native-tab-view';
|
||||
|
||||
// const FirstRoute = () => (
|
||||
// <View style={[styles.container, { backgroundColor: '#ff4081' }]} />
|
||||
// );
|
||||
// const SecondRoute = () => (
|
||||
// <View style={[styles.container, { backgroundColor: '#673ab7' }]} />
|
||||
// );
|
||||
|
||||
export const TabbedPosts = () => {
|
||||
return null;
|
||||
// const [state, setState] = useState({
|
||||
// index: 0,
|
||||
// routes: [
|
||||
// { key: 'first', title: 'First' },
|
||||
// { key: 'second', title: 'Second' },
|
||||
// ],
|
||||
// })
|
||||
|
||||
// const _handleIndexChange = (index) => setState({...state, index });
|
||||
|
||||
// const _renderTabBar = (props) => {
|
||||
// const inputRange = props.navigationState.routes.map((x, i) => i);
|
||||
|
||||
// return (
|
||||
// <View style={styles.tabBar}>
|
||||
// {props.navigationState.routes.map((route, i) => {
|
||||
// const opacity = props.position.interpolate({
|
||||
// inputRange,
|
||||
// outputRange: inputRange.map((inputIndex) =>
|
||||
// inputIndex === i ? 1 : 0.5
|
||||
// ),
|
||||
// });
|
||||
|
||||
// return (
|
||||
// <TouchableOpacity
|
||||
// style={styles.tabItem}
|
||||
// onPress={() => setState({...state, index: i })}>
|
||||
// <Animated.Text style={{ opacity }}>{route.title}</Animated.Text>
|
||||
// </TouchableOpacity>
|
||||
// );
|
||||
// })}
|
||||
// </View>
|
||||
// );
|
||||
// };
|
||||
|
||||
// //routes will be build dynamically
|
||||
// const _renderScene = SceneMap({
|
||||
// first: FirstRoute,
|
||||
// second: SecondRoute,
|
||||
// });
|
||||
import { useIntl } from 'react-intl';
|
||||
import ScrollableTabView from 'react-native-scrollable-tab-view';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { FilterBar } from '../..';
|
||||
import PostsList from '../../postsList';
|
||||
import { StackedTabBar } from '../view/stackedTabBar';
|
||||
import { TabbedPostsProps } from './tabbedPostsProps';
|
||||
|
||||
|
||||
// //tab view will be the parent component
|
||||
// return (
|
||||
// <TabView
|
||||
// lazy={true}
|
||||
// navigationState={state}
|
||||
// renderScene={_renderScene}
|
||||
// renderTabBar={_renderTabBar}
|
||||
// onIndexChange={_handleIndexChange}
|
||||
// />
|
||||
// );
|
||||
//
|
||||
export const TabbedPosts = ({
|
||||
filterOptions,
|
||||
filterOptionsValue,
|
||||
initialFilterIndex,
|
||||
feedSubfilterOptions,
|
||||
feedSubfilterOptionsValue,
|
||||
isFeedScreen
|
||||
}:TabbedPostsProps) => {
|
||||
|
||||
const intl = useIntl();
|
||||
const isLoggedIn = useSelector((state) => state.application.isLoggedIn);
|
||||
|
||||
const [initialPageIndex] = useState(initialFilterIndex == 0 && isFeedScreen && isLoggedIn ? filterOptions.length : initialFilterIndex)
|
||||
|
||||
|
||||
const pages = [
|
||||
...filterOptions,
|
||||
...feedSubfilterOptions,
|
||||
].map((filter)=>(
|
||||
<PostsList
|
||||
tabLabel={filter}
|
||||
isFeedScreen={isFeedScreen}
|
||||
promotedPosts={[]}
|
||||
/>
|
||||
))
|
||||
|
||||
|
||||
const _renderTabBar = (props) => {
|
||||
return (
|
||||
<StackedTabBar
|
||||
{...props}
|
||||
shouldStack={isFeedScreen && isLoggedIn}
|
||||
filterOptions={filterOptions}
|
||||
subFilterOptions={feedSubfilterOptions}
|
||||
initialFilterIndex={initialFilterIndex}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<ScrollableTabView
|
||||
scrollWithoutAnimation={true}
|
||||
initialPage={initialPageIndex}
|
||||
renderTabBar={_renderTabBar}>
|
||||
{pages}
|
||||
</ScrollableTabView>
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
// const styles = StyleSheet.create({
|
||||
// container: {
|
||||
// flex: 1,
|
||||
// },
|
||||
// tabBar: {
|
||||
// flexDirection: 'row',
|
||||
// },
|
||||
// tabItem: {
|
||||
// flex: 1,
|
||||
// alignItems: 'center',
|
||||
// padding: 16,
|
||||
// },
|
||||
// });
|
||||
|
9
src/components/tabbedPosts/container/tabbedPostsProps.ts
Normal file
9
src/components/tabbedPosts/container/tabbedPostsProps.ts
Normal file
@ -0,0 +1,9 @@
|
||||
export interface TabbedPostsProps {
|
||||
filterOptions:string[],
|
||||
filterOptionsValue:string[],
|
||||
isFeedScreen:boolean,
|
||||
feedUsername:string,
|
||||
initialFilterIndex:number,
|
||||
feedSubfilterOptions:string[],
|
||||
feedSubfilterOptionsValue:string[],
|
||||
}
|
68
src/components/tabbedPosts/view/stackedTabBar.tsx
Normal file
68
src/components/tabbedPosts/view/stackedTabBar.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import React, { useState } from "react";
|
||||
import { useIntl } from "react-intl";
|
||||
import { FilterBar } from "../..";
|
||||
|
||||
interface StackedTabBarProps {
|
||||
activeTab:boolean,
|
||||
goToPage:(pageIndex)=>void,
|
||||
tabs:string[],
|
||||
shouldStack:boolean,
|
||||
filterOptions:string[],
|
||||
subFilterOptions:string[],
|
||||
initialFilterIndex:number
|
||||
}
|
||||
|
||||
export const StackedTabBar = ({
|
||||
activeTab,
|
||||
goToPage,
|
||||
tabs,
|
||||
shouldStack,
|
||||
filterOptions,
|
||||
subFilterOptions,
|
||||
initialFilterIndex
|
||||
|
||||
}:StackedTabBarProps) => {
|
||||
|
||||
const intl = useIntl();
|
||||
const [selectedFilterIndex, setSelectedFilterIndex] = useState(initialFilterIndex);
|
||||
const [selectedFeedSubfilterIndex, setSelectedFeedSubfilterIndex] = useState(0);
|
||||
|
||||
return (
|
||||
<>
|
||||
<FilterBar
|
||||
options={filterOptions.map((item) =>
|
||||
intl.formatMessage({ id: `home.${item.toLowerCase()}` }).toUpperCase(),
|
||||
)}
|
||||
selectedOptionIndex={selectedFilterIndex}
|
||||
rightIconName="view-module"
|
||||
rightIconType="MaterialIcons"
|
||||
onDropdownSelect={(index)=>{
|
||||
setSelectedFilterIndex(index);
|
||||
if(index == 0 && shouldStack){
|
||||
goToPage(filterOptions.length + selectedFeedSubfilterIndex)
|
||||
}else{
|
||||
goToPage(index);
|
||||
}
|
||||
|
||||
}}
|
||||
onRightIconPress={()=>{}}
|
||||
/>
|
||||
|
||||
{
|
||||
selectedFilterIndex == 0 && shouldStack && (
|
||||
<FilterBar
|
||||
options={subFilterOptions.map((item) =>
|
||||
intl.formatMessage({ id: `home.${item.toLowerCase()}` }).toUpperCase(),
|
||||
)}
|
||||
selectedOptionIndex={selectedFeedSubfilterIndex}
|
||||
onDropdownSelect={(index)=>{
|
||||
setSelectedFeedSubfilterIndex(index)
|
||||
goToPage(filterOptions.length + index);
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
@ -3,7 +3,7 @@ import { SafeAreaView } from 'react-native';
|
||||
import get from 'lodash/get';
|
||||
|
||||
// Components
|
||||
import { Posts, Header } from '../../../components';
|
||||
import { Posts, Header, TabbedPosts } from '../../../components';
|
||||
|
||||
// Container
|
||||
import { AccountContainer } from '../../../containers';
|
||||
@ -25,7 +25,17 @@ const FeedScreen = () => {
|
||||
<Fragment>
|
||||
<Header />
|
||||
<SafeAreaView style={styles.container}>
|
||||
<Posts
|
||||
<TabbedPosts
|
||||
filterOptions={[...POPULAR_FILTERS]}
|
||||
filterOptionsValue={[...POPULAR_FILTERS_VALUE]}
|
||||
feedSubfilterOptions={[...FEED_SUBFILTERS]}
|
||||
feedSubfilterOptionsValue={[...FEED_SUBFILTERS_VALUE]}
|
||||
isFeedScreen={true}
|
||||
feedUsername={get(currentAccount, 'name', null)}
|
||||
initialFilterIndex={get(currentAccount, 'name', null) ? 0 : 2}
|
||||
|
||||
/>
|
||||
{/* <Posts
|
||||
filterOptions={[...POPULAR_FILTERS]}
|
||||
filterOptionsValue={[...POPULAR_FILTERS_VALUE]}
|
||||
feedSubfilterOptions={[...FEED_SUBFILTERS]}
|
||||
@ -34,7 +44,7 @@ const FeedScreen = () => {
|
||||
selectedOptionIndex={get(currentAccount, 'name', null) ? 0 : 2}
|
||||
feedUsername={get(currentAccount, 'name', null)}
|
||||
isFeedScreen={true}
|
||||
/>
|
||||
/> */}
|
||||
</SafeAreaView>
|
||||
</Fragment>
|
||||
)}
|
||||
|
Loading…
Reference in New Issue
Block a user