From af44bc90dd765f490a037ca83b16ce3487e66732 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Thu, 19 Sep 2024 19:14:59 +0500 Subject: [PATCH 1/8] added tab bar package --- ios/Podfile.lock | 8 ++++++++ package.json | 6 +++++- yarn.lock | 27 +++++++++++++++++++++++++++ 3 files changed, 40 insertions(+), 1 deletion(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index 097279588f..caf9b57358 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -1145,6 +1145,10 @@ PODS: - React-Core - react-native-orientation-locker (1.6.0): - React-Core + - react-native-pager-view (6.4.1): + - glog + - RCT-Folly (= 2022.05.16.00) + - React-Core - react-native-randombytes (3.6.1): - React-Core - react-native-receive-sharing-intent (2.0.0): @@ -1510,6 +1514,7 @@ DEPENDENCIES: - react-native-heic-converter (from `../node_modules/react-native-heic-converter`) - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)" - react-native-orientation-locker (from `../node_modules/react-native-orientation-locker`) + - react-native-pager-view (from `../node_modules/react-native-pager-view`) - react-native-randombytes (from `../node_modules/react-native-randombytes`) - react-native-receive-sharing-intent (from `../node_modules/react-native-receive-sharing-intent`) - react-native-render-html (from `../node_modules/react-native-render-html`) @@ -1711,6 +1716,8 @@ EXTERNAL SOURCES: :path: "../node_modules/@react-native-community/netinfo" react-native-orientation-locker: :path: "../node_modules/react-native-orientation-locker" + react-native-pager-view: + :path: "../node_modules/react-native-pager-view" react-native-randombytes: :path: "../node_modules/react-native-randombytes" react-native-receive-sharing-intent: @@ -1905,6 +1912,7 @@ SPEC CHECKSUMS: react-native-heic-converter: 8f7cd7a143ef013a54540ef7ebbc232cecb4fa87 react-native-netinfo: 8a7fd3f7130ef4ad2fb4276d5c9f8d3f28d2df3d react-native-orientation-locker: 4409c5b12b65f942e75449872b4f078b6f27af81 + react-native-pager-view: 4e062b5bf27b7070d470c60fd2e091ee641ba852 react-native-randombytes: 421f1c7d48c0af8dbcd471b0324393ebf8fe7846 react-native-receive-sharing-intent: 62ab28c50e6ae56d32b9e841d7452091312a0bc7 react-native-render-html: 984dfe2294163d04bf5fe25d7c9f122e60e05ebe diff --git a/package.json b/package.json index 390531908f..40391a714b 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "@tanstack/react-query": "^4.3.9", "@tanstack/react-query-persist-client": "^4.3.9", "@tradle/react-native-http": "^2.0.0", + "add": "^2.0.6", "appcenter": "5.0.0", "appcenter-analytics": "5.0.0", "appcenter-crashes": "5.0.0", @@ -137,6 +138,7 @@ "react-native-navigation-bar-color": "^2.0.2", "react-native-orientation-locker": "^1.6.0", "react-native-os": "^1.2.6", + "react-native-pager-view": "^6.4.1", "react-native-permissions": "^3.3.0", "react-native-portalize": "^1.0.7", "react-native-progress": "^5.0.0", @@ -154,6 +156,7 @@ "react-native-snap-carousel": "^3.8.0", "react-native-svg": "^12.1.1", "react-native-swiper": "^1.6.0-rc.3", + "react-native-tab-view": "^3.5.2", "react-native-tcp": "^4.0.0", "react-native-tus-client": "^1.1.0", "react-native-udp": "^4.1.4", @@ -187,7 +190,8 @@ "tty-browserify": "0.0.0", "url": "~0.10.1", "util": "~0.10.3", - "vm-browserify": "0.0.4" + "vm-browserify": "0.0.4", + "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/yarn.lock b/yarn.lock index a21b96e899..197768f214 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3702,6 +3702,11 @@ acorn@^8.8.2, acorn@^8.9.0: resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.11.2.tgz#ca0d78b51895be5390a5903c5b3bdcdaf78ae40b" integrity sha512-nc0Axzp/0FILLEVsm4fNwLCwMttvhEI263QtVPQcbpfZZ3ts0hLsZGOpE6czNlid7CJ9MlyH8reXkpsf3YUY4w== +add@^2.0.6: + version "2.0.6" + resolved "https://registry.yarnpkg.com/add/-/add-2.0.6.tgz#248f0a9f6e5a528ef2295dbeec30532130ae2235" + integrity sha512-j5QzrmsokwWWp6kUcJQySpbG+xfOBqqKnup3OIk1pz+kB/80SLorZ9V8zHFLO92Lcd+hbvq8bT+zOGoPkmBV0Q== + agent-base@6: version "6.0.2" resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-6.0.2.tgz#49fff58577cfee3f37176feab4c22e00f86d7f77" @@ -11523,6 +11528,11 @@ react-native-pager-view@^5.4.22: resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-5.4.25.tgz#cd639d5387a7f3d5581b55a33c5faa1cbc200f97" integrity sha512-3drrYwaLat2fYszymZe3nHMPASJ4aJMaxiejfA1V5SK3OygYmdtmV2u5prX7TnjueJzGSyyaCYEr2JlrRt4YPg== +react-native-pager-view@^6.4.1: + version "6.4.1" + resolved "https://registry.yarnpkg.com/react-native-pager-view/-/react-native-pager-view-6.4.1.tgz#82d04107229c19967a503de53a231dd95fcccd10" + integrity sha512-HnDxXTRHnR6WJ/vnOitv0C32KG9MJjxLnxswuQlBJmQ7RxF2GWOHSPIRAdZ9fLxdLstV38z9Oz1C95+t+yXkcg== + react-native-permissions@^3.3.0: version "3.10.1" resolved "https://registry.yarnpkg.com/react-native-permissions/-/react-native-permissions-3.10.1.tgz#cb0171c8d12113869deaabbdfb979aad1a44752b" @@ -11653,6 +11663,13 @@ react-native-swiper@^1.6.0-rc.3: dependencies: prop-types "^15.5.10" +react-native-tab-view@^3.5.2: + version "3.5.2" + resolved "https://registry.yarnpkg.com/react-native-tab-view/-/react-native-tab-view-3.5.2.tgz#2789b8af6148b16835869566bf13dc3b0e6c1b46" + integrity sha512-nE5WqjbeEPsWQx4mtz81QGVvgHRhujTNIIZiMCx3Bj6CBFDafbk7XZp9ocmtzXUQaZ4bhtVS43R4FIiR4LboJw== + dependencies: + use-latest-callback "^0.1.5" + react-native-tcp@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/react-native-tcp/-/react-native-tcp-4.0.0.tgz#142f519798cc41cc3bb39ad45e2970a8643ef461" @@ -13934,6 +13951,11 @@ url@~0.10.1: punycode "1.3.2" querystring "0.2.0" +use-latest-callback@^0.1.5: + version "0.1.11" + resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.11.tgz#e073fcbba792cc95ac661d96bc13b6041956cfe1" + integrity sha512-8nhb73STSD/z3GTHklvNjL8F9wMOo0bj0AFnulpIYuFTm6aQlT3ZcNbXF2YurKImIY8+kpSFSDHZZyQmurGrhw== + use-latest-callback@^0.1.7: version "0.1.9" resolved "https://registry.yarnpkg.com/use-latest-callback/-/use-latest-callback-0.1.9.tgz#10191dc54257e65a8e52322127643a8940271e2a" @@ -14501,6 +14523,11 @@ yargs@^17.3.1, yargs@^17.6.2: y18n "^5.0.5" yargs-parser "^21.1.1" +yarn@^1.22.22: + version "1.22.22" + resolved "https://registry.yarnpkg.com/yarn/-/yarn-1.22.22.tgz#ac34549e6aa8e7ead463a7407e1c7390f61a6610" + integrity sha512-prL3kGtyG7o9Z9Sv8IPfBNrWTDmXB4Qbes8A9rEzt6wkJV8mUvoirjU0Mp3GGAU06Y0XQyA3/2/RQFVuK7MTfg== + yocto-queue@^0.1.0: version "0.1.0" resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b" From 216c39603c6291f30f1060ca6ec931a71ce02aea Mon Sep 17 00:00:00 2001 From: noumantahir Date: Thu, 19 Sep 2024 19:15:50 +0500 Subject: [PATCH 2/8] drafted replacement of old tabbar with new one --- .../tabbedPosts/container/tabbedPosts.tsx | 105 ++++++++++++++---- .../tabbedPosts/styles/feedTabBar.styles.ts | 44 ++++++++ .../tabbedPosts.styles.tsx} | 0 .../{stackedTabBar.tsx => feedTabBar.tsx} | 57 +++++++++- .../tabbedPosts/view/listEmptyView.tsx | 2 +- .../tabbedPosts/view/scrollTopPopup.tsx | 2 +- 6 files changed, 178 insertions(+), 32 deletions(-) create mode 100644 src/components/tabbedPosts/styles/feedTabBar.styles.ts rename src/components/tabbedPosts/{view/tabbedPostsStyles.tsx => styles/tabbedPosts.styles.tsx} (100%) rename src/components/tabbedPosts/view/{stackedTabBar.tsx => feedTabBar.tsx} (65%) diff --git a/src/components/tabbedPosts/container/tabbedPosts.tsx b/src/components/tabbedPosts/container/tabbedPosts.tsx index 870f119fb7..b281295433 100644 --- a/src/components/tabbedPosts/container/tabbedPosts.tsx +++ b/src/components/tabbedPosts/container/tabbedPosts.tsx @@ -1,8 +1,9 @@ -import React, { useState } from 'react'; -import ScrollableTabView from 'react-native-scrollable-tab-view'; +import React, { useMemo, useState } from 'react'; import { TabbedPostsProps } from '../types/tabbedPosts.types'; -import { StackedTabBar, TabItem } from '../view/stackedTabBar'; +import { FeedTabBar, TabItem } from '../view/feedTabBar'; import PostsTabContent from '../view/postsTabContent'; +import { TabView, SceneMap, TabBar, TabBarProps } from 'react-native-tab-view'; +import { Text, useWindowDimensions, View } from 'react-native'; export const TabbedPosts = ({ filterOptions, @@ -19,6 +20,15 @@ export const TabbedPosts = ({ onTabChange, ...props }: TabbedPostsProps) => { + + const layout = useWindowDimensions(); + + const [index, setIndex] = React.useState(0); + // const [routes] = React.useState([ + // { key: 'first', title: 'First' }, + // { key: 'second', title: 'Second' }, + // ]); + // initialize state const [initialTabIndex] = useState( selectedOptionIndex == 0 && stackedTabs ? filterOptions.length : selectedOptionIndex, @@ -26,20 +36,20 @@ export const TabbedPosts = ({ const mainFilters = filterOptions.map( (label, index) => - ({ - filterKey: filterOptionsValue[index], - label, - } as TabItem), + ({ + filterKey: filterOptionsValue[index], + label, + } as TabItem), ); const subFilters = feedSubfilterOptions ? feedSubfilterOptions.map( - (label, index) => - ({ - filterKey: feedSubfilterOptionsValue[index], - label, - } as TabItem), - ) + (label, index) => + ({ + filterKey: feedSubfilterOptionsValue[index], + label, + } as TabItem), + ) : []; const combinedFilters = [...mainFilters, ...subFilters]; @@ -81,10 +91,27 @@ export const TabbedPosts = ({ ); }); + + + + // const renderScene = SceneMap({ + // first: scenes[0], + // second: scenes[1], + // }); + // render tab bar - const _renderTabBar = (props) => { + const _renderTabBar = (props:TabBarProps) => { + + // return ( + // + // ) + return ( - ({ key: filter.filterKey, title: filter.label })) + ); + + // Dynamically create scenes for each tab + const renderScene = ({ route }) => { + // const tab = tabs.find((t) => t.key === route.key); + return ( + + ); + }; + return ( - - {pages} - + + + + ); }; diff --git a/src/components/tabbedPosts/styles/feedTabBar.styles.ts b/src/components/tabbedPosts/styles/feedTabBar.styles.ts new file mode 100644 index 0000000000..b4b723a833 --- /dev/null +++ b/src/components/tabbedPosts/styles/feedTabBar.styles.ts @@ -0,0 +1,44 @@ +import EStyleSheet from 'react-native-extended-stylesheet'; +import { Dimensions } from 'react-native'; +import getWindowDimensions from '../../../utils/getWindowDimensions'; + +const deviceWidth = getWindowDimensions().width; + +export default EStyleSheet.create({ + container: { + justifyContent: 'center', + backgroundColor: '$primaryLightBackground', + shadowOpacity: 0.3, + shadowColor: '$shadowColor', + elevation: 0.1, + shadowOffset: { + height: 1, + }, + zIndex: 99, + }, + dropdownWrapper: { + flexDirection: 'row', + justifyContent: 'space-around', + alignItems: 'center', + marginRight: 8, + flex: 1, + }, + filterBarWrapper: { + flex: 1, + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + }, + rightIconWrapper: { + paddingRight: 12, + width: 40, + alignSelf: 'center', + }, + rightIcon: { + color: '$darkIconColor', + textAlign: 'center', + }, + rightIconPlaceholder: { + marginRight: 8, + }, +}); diff --git a/src/components/tabbedPosts/view/tabbedPostsStyles.tsx b/src/components/tabbedPosts/styles/tabbedPosts.styles.tsx similarity index 100% rename from src/components/tabbedPosts/view/tabbedPostsStyles.tsx rename to src/components/tabbedPosts/styles/tabbedPosts.styles.tsx diff --git a/src/components/tabbedPosts/view/stackedTabBar.tsx b/src/components/tabbedPosts/view/feedTabBar.tsx similarity index 65% rename from src/components/tabbedPosts/view/stackedTabBar.tsx rename to src/components/tabbedPosts/view/feedTabBar.tsx index 0e103e4c2c..b6adb50247 100644 --- a/src/components/tabbedPosts/view/stackedTabBar.tsx +++ b/src/components/tabbedPosts/view/feedTabBar.tsx @@ -1,16 +1,20 @@ import React, { useRef, useState } from 'react'; import { useIntl } from 'react-intl'; import { useDispatch, useSelector } from 'react-redux'; -import { CustomiseFiltersModal, FilterBar } from '../..'; +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 styles from '../styles/feedTabBar.styles'; export interface TabItem { filterKey: string; label: string; } -interface StackedTabBarProps { +interface FeedTabBarProps extends TabBarProps { goToPage: (pageIndex) => void; tabs: string[]; pageType?: 'main' | 'community' | 'profile' | 'ownProfile'; @@ -22,7 +26,7 @@ interface StackedTabBarProps { toggleHideImagesFlag: boolean; } -export const StackedTabBar = ({ +export const FeedTabBar = ({ goToPage, tabs, shouldStack, @@ -32,9 +36,11 @@ export const StackedTabBar = ({ onFilterSelect, toggleHideImagesFlag, pageType, -}: StackedTabBarProps) => { + ...props +}: FeedTabBarProps) => { const dispatch = useDispatch(); const intl = useIntl(); + const layout = useWindowDimensions(); const customiseModalRef = useRef(); @@ -58,7 +64,7 @@ export const StackedTabBar = ({ return ( <> - { return tabs[index] ? tabs[index] @@ -96,8 +102,47 @@ export const StackedTabBar = ({ goToPage(firstStack.length + index); }} /> - )} + )} */} + + + ( + + + )} + indicatorStyle={{ + backgroundColor: 'transparent', + }} + tabStyle={{ + width: 'auto', + height: 38, + paddingTop:0, + }} + + style={{ + backgroundColor: EStyleSheet.value("$primaryLightBackground"), // Background color for the TabBar + }} + scrollEnabled={true} + onTabPress={({ route, preventDefault }) => { + onFilterSelect(route.key) + }} + {...props} + /> + {/* */} + {enableCustomTabs && } ); diff --git a/src/components/tabbedPosts/view/listEmptyView.tsx b/src/components/tabbedPosts/view/listEmptyView.tsx index 1cb327afb1..974db8a277 100644 --- a/src/components/tabbedPosts/view/listEmptyView.tsx +++ b/src/components/tabbedPosts/view/listEmptyView.tsx @@ -7,7 +7,7 @@ import { useNavigation } from '@react-navigation/native'; import { NoPost, PostCardPlaceHolder, UserListItem } from '../..'; import globalStyles from '../../../globalStyles'; import { CommunityListItem, EmptyScreen } from '../../basicUIElements'; -import styles from './tabbedPostsStyles'; +import styles from '../styles/tabbedPosts.styles'; import { default as ROUTES } from '../../../constants/routeNames'; import { fetchCommunities, diff --git a/src/components/tabbedPosts/view/scrollTopPopup.tsx b/src/components/tabbedPosts/view/scrollTopPopup.tsx index 75685331c2..018fa92a00 100644 --- a/src/components/tabbedPosts/view/scrollTopPopup.tsx +++ b/src/components/tabbedPosts/view/scrollTopPopup.tsx @@ -5,7 +5,7 @@ import { Image as ExpoImage } from 'expo-image'; import Animated, { ZoomIn, ZoomOut } from 'react-native-reanimated'; import EStyleSheet from 'react-native-extended-stylesheet'; import { IconButton } from '../..'; -import styles from './tabbedPostsStyles'; +import styles from '../styles/tabbedPosts.styles'; interface ScrollTopPopupProps { onPress: () => void; From 1526e31182616c1ca6a1b4aa21dbdd9e57da794c Mon Sep 17 00:00:00 2001 From: noumantahir Date: Thu, 19 Sep 2024 19:50:48 +0500 Subject: [PATCH 3/8] ability to selected more than 3 tabs --- src/components/customiseFiltersModal/customiseFiltersModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/customiseFiltersModal/customiseFiltersModal.tsx b/src/components/customiseFiltersModal/customiseFiltersModal.tsx index 3db6eefbd3..31e0fa2ac2 100644 --- a/src/components/customiseFiltersModal/customiseFiltersModal.tsx +++ b/src/components/customiseFiltersModal/customiseFiltersModal.tsx @@ -76,7 +76,7 @@ const CustomiseFiltersModal = ({ pageType }: Props, ref: Ref { - if (selectedFilters.size !== 3) { + if (selectedFilters.size < 3) { alert(intl.formatMessage({ id: 'alert.wrong_filter_count' })); return; } From 6e7b56df9de8aa14c31d3b4b8bc29da370291979 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Thu, 19 Sep 2024 19:51:56 +0500 Subject: [PATCH 4/8] dynamically enable disable tabs scroll based on seelcted filters count --- .../tabbedPosts/container/tabbedPosts.tsx | 21 ++++------ .../tabbedPosts/view/feedTabBar.tsx | 39 +++++++++---------- 2 files changed, 26 insertions(+), 34 deletions(-) diff --git a/src/components/tabbedPosts/container/tabbedPosts.tsx b/src/components/tabbedPosts/container/tabbedPosts.tsx index b281295433..7bbac4c2c2 100644 --- a/src/components/tabbedPosts/container/tabbedPosts.tsx +++ b/src/components/tabbedPosts/container/tabbedPosts.tsx @@ -53,6 +53,9 @@ export const TabbedPosts = ({ : []; const combinedFilters = [...mainFilters, ...subFilters]; + const [routes] = useState( + combinedFilters.map((filter, index) => ({ key: filter.filterKey, title: filter.label })) + ); const [selectedFilter, setSelectedFilter] = useState(combinedFilters[initialTabIndex].filterKey); const [filterScrollRequest, createFilterScrollRequest] = useState(null); @@ -102,19 +105,10 @@ export const TabbedPosts = ({ // render tab bar const _renderTabBar = (props:TabBarProps) => { - // return ( - // - // ) - return ( ({ key: filter.filterKey, title: filter.label })) - ); + // Dynamically create scenes for each tab const renderScene = ({ route }) => { // const tab = tabs.find((t) => t.key === route.key); + if (tabContentOverrides && tabContentOverrides.has(index)) { + return tabContentOverrides.get(index); + } return ( { goToPage: (pageIndex) => void; tabs: string[]; pageType?: 'main' | 'community' | 'profile' | 'ownProfile'; - shouldStack: boolean; - firstStack: TabItem[]; - secondStack: TabItem[]; + routes: { key: string; + title: string}[] , initialFirstStackIndex: number; onFilterSelect: (filterKey: string) => void; toggleHideImagesFlag: boolean; @@ -29,9 +28,7 @@ interface FeedTabBarProps extends TabBarProps { export const FeedTabBar = ({ goToPage, tabs, - shouldStack, - firstStack, - secondStack, + routes, initialFirstStackIndex, onFilterSelect, toggleHideImagesFlag, @@ -104,8 +101,15 @@ export const FeedTabBar = ({ /> )} */} - - + {/* */} + ( 3 ? 'auto' : undefined, height: 38, - paddingTop:0, + paddingTop: 0, }} style={{ backgroundColor: EStyleSheet.value("$primaryLightBackground"), // Background color for the TabBar }} - scrollEnabled={true} - onTabPress={({ route, preventDefault }) => { + scrollEnabled={routes.length > 3} + onTabPress={({ route }) => { onFilterSelect(route.key) }} {...props} /> - {/* */} - + + {/* */} {enableCustomTabs && } ); From 2f485a17d37cea0a3b25f597c048c863d1749239 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 20 Sep 2024 10:10:46 +0500 Subject: [PATCH 5/8] arranged edit filters button to right of tab bar --- .../tabbedPosts/container/tabbedPosts.tsx | 6 +-- .../tabbedPosts/styles/feedTabBar.styles.ts | 17 +++++-- .../tabbedPosts/view/feedTabBar.tsx | 47 +++++++++---------- 3 files changed, 40 insertions(+), 30 deletions(-) diff --git a/src/components/tabbedPosts/container/tabbedPosts.tsx b/src/components/tabbedPosts/container/tabbedPosts.tsx index 7bbac4c2c2..81499ea4bc 100644 --- a/src/components/tabbedPosts/container/tabbedPosts.tsx +++ b/src/components/tabbedPosts/container/tabbedPosts.tsx @@ -1,9 +1,9 @@ -import React, { useMemo, useState } from 'react'; +import React, { useState } from 'react'; import { TabbedPostsProps } from '../types/tabbedPosts.types'; import { FeedTabBar, TabItem } from '../view/feedTabBar'; import PostsTabContent from '../view/postsTabContent'; -import { TabView, SceneMap, TabBar, TabBarProps } from 'react-native-tab-view'; -import { Text, useWindowDimensions, View } from 'react-native'; +import { TabView, TabBarProps } from 'react-native-tab-view'; +import { useWindowDimensions, View } from 'react-native'; export const TabbedPosts = ({ filterOptions, diff --git a/src/components/tabbedPosts/styles/feedTabBar.styles.ts b/src/components/tabbedPosts/styles/feedTabBar.styles.ts index b4b723a833..31821a16c6 100644 --- a/src/components/tabbedPosts/styles/feedTabBar.styles.ts +++ b/src/components/tabbedPosts/styles/feedTabBar.styles.ts @@ -1,8 +1,5 @@ import EStyleSheet from 'react-native-extended-stylesheet'; -import { Dimensions } from 'react-native'; -import getWindowDimensions from '../../../utils/getWindowDimensions'; -const deviceWidth = getWindowDimensions().width; export default EStyleSheet.create({ container: { @@ -16,6 +13,19 @@ export default EStyleSheet.create({ }, zIndex: 99, }, + + indicatorStyle: { + backgroundColor: 'transparent', + }, + tabStyle: { + height: 38, + paddingTop: 0, + }, + tabBarStyle: { + flex: 1, + backgroundColor: EStyleSheet.value("$primaryLightBackground"), // Background color for the TabBar + }, + dropdownWrapper: { flexDirection: 'row', justifyContent: 'space-around', @@ -31,6 +41,7 @@ export default EStyleSheet.create({ }, rightIconWrapper: { paddingRight: 12, + paddingLeft: 4, width: 40, alignSelf: 'center', }, diff --git a/src/components/tabbedPosts/view/feedTabBar.tsx b/src/components/tabbedPosts/view/feedTabBar.tsx index 3b3f44e71a..d0f3dd78fc 100644 --- a/src/components/tabbedPosts/view/feedTabBar.tsx +++ b/src/components/tabbedPosts/view/feedTabBar.tsx @@ -18,8 +18,10 @@ interface FeedTabBarProps extends TabBarProps { goToPage: (pageIndex) => void; tabs: string[]; pageType?: 'main' | 'community' | 'profile' | 'ownProfile'; - routes: { key: string; - title: string}[] , + routes: { + key: string; + title: string + }[], initialFirstStackIndex: number; onFilterSelect: (filterKey: string) => void; toggleHideImagesFlag: boolean; @@ -101,15 +103,11 @@ export const FeedTabBar = ({ /> )} */} - {/* */} - + + ( )} - indicatorStyle={{ - backgroundColor: 'transparent', - }} - tabStyle={{ - width: routes.length > 3 ? 'auto' : undefined, - height: 38, - paddingTop: 0, - }} - - style={{ - backgroundColor: EStyleSheet.value("$primaryLightBackground"), // Background color for the TabBar - }} + style={styles.tabBarStyle} + indicatorStyle={styles.indicatorStyle} + tabStyle={{ ...styles.tabStyle, width: routes.length > 3 ? 'auto' : undefined }} scrollEnabled={routes.length > 3} onTabPress={({ route }) => { onFilterSelect(route.key) }} {...props} /> + {enableCustomTabs && + + } - {/* */} + {enableCustomTabs && } ); From fdb33c8fa652250f1e3f793fe1793c55f9553430 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 20 Sep 2024 10:17:25 +0500 Subject: [PATCH 6/8] fine tuned width occupation of tab item --- src/components/tabbedPosts/styles/feedTabBar.styles.ts | 5 +++++ src/components/tabbedPosts/view/feedTabBar.tsx | 2 +- 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/tabbedPosts/styles/feedTabBar.styles.ts b/src/components/tabbedPosts/styles/feedTabBar.styles.ts index 31821a16c6..34a557faf5 100644 --- a/src/components/tabbedPosts/styles/feedTabBar.styles.ts +++ b/src/components/tabbedPosts/styles/feedTabBar.styles.ts @@ -1,4 +1,7 @@ import EStyleSheet from 'react-native-extended-stylesheet'; +import getWindowDimensions from '../../../utils/getWindowDimensions'; + +const deviceWidth = getWindowDimensions().width; export default EStyleSheet.create({ @@ -18,6 +21,8 @@ export default EStyleSheet.create({ backgroundColor: 'transparent', }, tabStyle: { + width: 'auto', + minWidth: (deviceWidth / 3) - 12, height: 38, paddingTop: 0, }, diff --git a/src/components/tabbedPosts/view/feedTabBar.tsx b/src/components/tabbedPosts/view/feedTabBar.tsx index d0f3dd78fc..9b01750c05 100644 --- a/src/components/tabbedPosts/view/feedTabBar.tsx +++ b/src/components/tabbedPosts/view/feedTabBar.tsx @@ -120,7 +120,7 @@ export const FeedTabBar = ({ )} style={styles.tabBarStyle} indicatorStyle={styles.indicatorStyle} - tabStyle={{ ...styles.tabStyle, width: routes.length > 3 ? 'auto' : undefined }} + tabStyle={styles.tabStyle} scrollEnabled={routes.length > 3} onTabPress={({ route }) => { onFilterSelect(route.key) From b45f3e7b0c0cad9faae2b38d923ddf257290ee07 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 20 Sep 2024 10:31:08 +0500 Subject: [PATCH 7/8] final code clean up and fine tuning --- .../tabbedPosts/container/tabbedPosts.tsx | 26 +--- .../tabbedPosts/types/tabbedPosts.types.ts | 1 - .../tabbedPosts/view/feedTabBar.tsx | 124 +++++------------- .../tagResult/screen/tagResultScreen.js | 1 - 4 files changed, 38 insertions(+), 114 deletions(-) diff --git a/src/components/tabbedPosts/container/tabbedPosts.tsx b/src/components/tabbedPosts/container/tabbedPosts.tsx index 81499ea4bc..976d2359f7 100644 --- a/src/components/tabbedPosts/container/tabbedPosts.tsx +++ b/src/components/tabbedPosts/container/tabbedPosts.tsx @@ -15,7 +15,6 @@ export const TabbedPosts = ({ feedUsername, pageType, tabContentOverrides, - imagesToggleEnabled, stackedTabs, onTabChange, ...props @@ -23,16 +22,11 @@ export const TabbedPosts = ({ const layout = useWindowDimensions(); - const [index, setIndex] = React.useState(0); - // const [routes] = React.useState([ - // { key: 'first', title: 'First' }, - // { key: 'second', title: 'Second' }, - // ]); - // initialize state const [initialTabIndex] = useState( selectedOptionIndex == 0 && stackedTabs ? filterOptions.length : selectedOptionIndex, ); + const [index, setIndex] = useState(initialTabIndex); const mainFilters = filterOptions.map( (label, index) => @@ -96,14 +90,8 @@ export const TabbedPosts = ({ - - // const renderScene = SceneMap({ - // first: scenes[0], - // second: scenes[1], - // }); - // render tab bar - const _renderTabBar = (props:TabBarProps) => { + const _renderTabBar = (props: TabBarProps) => { return ( ); }; - // Dynamically create scenes for each tab const renderScene = ({ route }) => { - // const tab = tabs.find((t) => t.key === route.key); + if (tabContentOverrides && tabContentOverrides.has(index)) { return tabContentOverrides.get(index); } @@ -143,11 +129,7 @@ export const TabbedPosts = ({ return ( ; - imagesToggleEnabled?: boolean; stackedTabs: boolean; pinnedPermlink?: string; onTabChange: (index: number) => void; diff --git a/src/components/tabbedPosts/view/feedTabBar.tsx b/src/components/tabbedPosts/view/feedTabBar.tsx index 9b01750c05..becc88dee2 100644 --- a/src/components/tabbedPosts/view/feedTabBar.tsx +++ b/src/components/tabbedPosts/view/feedTabBar.tsx @@ -15,8 +15,6 @@ export interface TabItem { } interface FeedTabBarProps extends TabBarProps { - goToPage: (pageIndex) => void; - tabs: string[]; pageType?: 'main' | 'community' | 'profile' | 'ownProfile'; routes: { key: string; @@ -24,31 +22,21 @@ interface FeedTabBarProps extends TabBarProps { }[], initialFirstStackIndex: number; onFilterSelect: (filterKey: string) => void; - toggleHideImagesFlag: boolean; } export const FeedTabBar = ({ - goToPage, - tabs, routes, initialFirstStackIndex, onFilterSelect, - toggleHideImagesFlag, pageType, ...props }: FeedTabBarProps) => { - const dispatch = useDispatch(); + const intl = useIntl(); const layout = useWindowDimensions(); const customiseModalRef = useRef(); - // redux properties - const isHideImages = useSelector((state) => state.application.hidePostsThumbnails); - - const [selectedFilterIndex, setSelectedFilterIndex] = useState(initialFirstStackIndex); - const [selectedSecondStackIndex, setSelectedSecondStackIndex] = useState(0); - const enableCustomTabs = pageType !== undefined; const _onCustomisePress = () => { @@ -57,89 +45,45 @@ export const FeedTabBar = ({ } }; - const _onToggleImagesPress = () => { - dispatch(setHidePostsThumbnails(!isHideImages)); - }; return ( - <> - {/* { - return tabs[index] - ? tabs[index] - : intl.formatMessage({ id: item.label.toLowerCase() }).toUpperCase(); - })} - selectedOptionIndex={selectedFilterIndex} - rightIconName={toggleHideImagesFlag && 'view-module'} - rightIconType={toggleHideImagesFlag && 'MaterialIcons'} - enableCustomiseButton={enableCustomTabs} - onCustomisePress={_onCustomisePress} - onDropdownSelect={(index) => { - setSelectedFilterIndex(index); - if (index == 0 && shouldStack) { - const tabIndex = firstStack.length + selectedSecondStackIndex; - onFilterSelect(secondStack[selectedSecondStackIndex].filterKey); - goToPage(tabIndex); - } else { - onFilterSelect(firstStack[index].filterKey); - goToPage(index); - } + + + ( + + + )} + style={styles.tabBarStyle} + indicatorStyle={styles.indicatorStyle} + tabStyle={{ ...styles.tabStyle, minWidth: (layout.width / 3) - (enableCustomTabs ? 14 : 0) }} + scrollEnabled={routes.length > 3} + onTabPress={({ route }) => { + onFilterSelect(route.key) }} - onRightIconPress={_onToggleImagesPress} + {...props} /> - - {selectedFilterIndex == 0 && shouldStack && ( - - intl.formatMessage({ id: item.label.toLowerCase() }).toUpperCase(), - )} - selectedOptionIndex={selectedSecondStackIndex} - onDropdownSelect={(index) => { - setSelectedSecondStackIndex(index); - onFilterSelect(secondStack[index].filterKey); - goToPage(firstStack.length + index); - }} + {enableCustomTabs && + - )} */} - - - - ( - - - )} - style={styles.tabBarStyle} - indicatorStyle={styles.indicatorStyle} - tabStyle={styles.tabStyle} - scrollEnabled={routes.length > 3} - onTabPress={({ route }) => { - onFilterSelect(route.key) - }} - {...props} - /> - {enableCustomTabs && - - } - - + } {enableCustomTabs && } - + + ); }; diff --git a/src/screens/tagResult/screen/tagResultScreen.js b/src/screens/tagResult/screen/tagResultScreen.js index 916526e74a..64ccd284af 100644 --- a/src/screens/tagResult/screen/tagResultScreen.js +++ b/src/screens/tagResult/screen/tagResultScreen.js @@ -59,7 +59,6 @@ const TagResultScreen = ({ navigation, route }) => { filterOptionsValue={GLOBAL_POST_FILTERS_VALUE} selectedOptionIndex={_getSelectedIndex()} tag={tag} - imagesToggleEnabled={true} /> From 9fdc414fdaba286deed2cc037c48d9ad7d348fc0 Mon Sep 17 00:00:00 2001 From: noumantahir Date: Fri, 20 Sep 2024 10:35:57 +0500 Subject: [PATCH 8/8] lint --- .../tabbedPosts/container/tabbedPosts.tsx | 65 +++++-------------- .../tabbedPosts/styles/feedTabBar.styles.ts | 5 +- .../tabbedPosts/types/tabbedPosts.types.ts | 1 - .../tabbedPosts/view/feedTabBar.tsx | 48 +++++--------- 4 files changed, 35 insertions(+), 84 deletions(-) diff --git a/src/components/tabbedPosts/container/tabbedPosts.tsx b/src/components/tabbedPosts/container/tabbedPosts.tsx index 976d2359f7..f5aa4fc05c 100644 --- a/src/components/tabbedPosts/container/tabbedPosts.tsx +++ b/src/components/tabbedPosts/container/tabbedPosts.tsx @@ -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 @@ -30,25 +28,25 @@ export const TabbedPosts = ({ const mainFilters = filterOptions.map( (label, index) => - ({ - filterKey: filterOptionsValue[index], - label, - } as TabItem), + ({ + filterKey: filterOptionsValue[index], + label, + } as TabItem), ); const subFilters = feedSubfilterOptions ? feedSubfilterOptions.map( - (label, index) => - ({ - filterKey: feedSubfilterOptionsValue[index], - label, - } as TabItem), - ) + (label, index) => + ({ + filterKey: feedSubfilterOptionsValue[index], + label, + } as TabItem), + ) : []; 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 ( - - ); - }); - - - // render tab bar const _renderTabBar = (props: TabBarProps) => { - return ( - + ); }; - // 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 ( - + - ); }; diff --git a/src/components/tabbedPosts/styles/feedTabBar.styles.ts b/src/components/tabbedPosts/styles/feedTabBar.styles.ts index 34a557faf5..0e7142943b 100644 --- a/src/components/tabbedPosts/styles/feedTabBar.styles.ts +++ b/src/components/tabbedPosts/styles/feedTabBar.styles.ts @@ -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: { diff --git a/src/components/tabbedPosts/types/tabbedPosts.types.ts b/src/components/tabbedPosts/types/tabbedPosts.types.ts index d1282200d8..d26c7e98c4 100644 --- a/src/components/tabbedPosts/types/tabbedPosts.types.ts +++ b/src/components/tabbedPosts/types/tabbedPosts.types.ts @@ -13,7 +13,6 @@ export interface TabbedPostsProps { tabContentOverrides: Map; stackedTabs: boolean; pinnedPermlink?: string; - onTabChange: (index: number) => void; handleOnScroll: () => void; } diff --git a/src/components/tabbedPosts/view/feedTabBar.tsx b/src/components/tabbedPosts/view/feedTabBar.tsx index becc88dee2..cd79079de1 100644 --- a/src/components/tabbedPosts/view/feedTabBar.tsx +++ b/src/components/tabbedPosts/view/feedTabBar.tsx @@ -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 { 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 ( - - - + ( - )} 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 && ( - } + )} {enableCustomTabs && } - ); };