Page MenuHomePhabricator
Files F3502706

D13082.id43793.diff
No OneTemporary
Actions

D13082.id43793.diff
View Options

diff --git a/native/chat/chat-options.js b/native/chat/chat-options.js
new file mode 100644
--- /dev/null
+++ b/native/chat/chat-options.js
@@ -0,0 +1,28 @@
+// @flow
+
+import * as React from 'react';
+
+import { threadSettingsNotificationsCopy } from 'lib/shared/thread-settings-notifications-utils.js';
+
+import SWMansionIcon from '../components/swmansion-icon.react.js';
+
+const homeChatThreadListOptions: {
+ +title: string,
+ +tabBarIcon: ({ +color: string, ... }) => React.Node,
+} = {
+ title: threadSettingsNotificationsCopy.HOME,
+ tabBarIcon: ({ color }) => (
+ <SWMansionIcon name="home-1" size={22} style={{ color }} />
+ ),
+};
+const backgroundChatThreadListOptions: {
+ +title: string,
+ +tabBarIcon: ({ +color: string, ... }) => React.Node,
+} = {
+ title: threadSettingsNotificationsCopy.MUTED,
+ tabBarIcon: ({ color }) => (
+ <SWMansionIcon name="bell-disabled" size={22} style={{ color }} />
+ ),
+};
+
+export { backgroundChatThreadListOptions, homeChatThreadListOptions };
diff --git a/native/chat/chat-tab-bar.react.js b/native/chat/chat-tab-bar.react.js
new file mode 100644
--- /dev/null
+++ b/native/chat/chat-tab-bar.react.js
@@ -0,0 +1,73 @@
+// @flow
+
+import type {
+ MaterialTopTabBarProps,
+ Route,
+ TabBarItemProps,
+} from '@react-navigation/core';
+import { MaterialTopTabBar } from '@react-navigation/material-top-tabs';
+import invariant from 'invariant';
+import * as React from 'react';
+import { View } from 'react-native';
+import { TabBarItem } from 'react-native-tab-view';
+
+import {
+ nuxTip,
+ NUXTipsContext,
+} from '../components/nux-tips-context.react.js';
+import {
+ HomeChatThreadListRouteName,
+ BackgroundChatThreadListRouteName,
+} from '../navigation/route-names.js';
+
+const ButtonTitleToTip = Object.freeze({
+ [BackgroundChatThreadListRouteName]: nuxTip.MUTED,
+ [HomeChatThreadListRouteName]: nuxTip.HOME,
+});
+
+function TabBarButton(props: TabBarItemProps<Route<>>) {
+ const tipsContext = React.useContext(NUXTipsContext);
+ invariant(tipsContext, 'NUXTipsContext should be defined');
+
+ const viewRef = React.useRef<?React.ElementRef<typeof View>>();
+ const onLayout = React.useCallback(() => {
+ const button = viewRef.current;
+ if (!button) {
+ return;
+ }
+
+ const tipType = ButtonTitleToTip[props.route.name];
+ if (!tipType) {
+ return;
+ }
+ button.measure((x, y, width, height, pageX, pageY) => {
+ tipsContext.registerTipButton(tipType, {
+ x,
+ y,
+ width,
+ height,
+ pageX,
+ pageY,
+ });
+ });
+ }, [props.route.name, tipsContext]);
+
+ return (
+ <View ref={viewRef} onLayout={onLayout}>
+ <TabBarItem {...props} />
+ </View>
+ );
+}
+
+export default function TabBarTop(
+ props: MaterialTopTabBarProps<Route<>>,
+): React.Node {
+ const renderTabBarItem = React.useCallback(
+ (innerProps: $ReadOnly<{ ...TabBarItemProps<Route<>>, key: string }>) => (
+ <TabBarButton {...innerProps} />
+ ),
+ [],
+ );
+
+ return <MaterialTopTabBar {...props} renderTabBarItem={renderTabBarItem} />;
+}
diff --git a/native/chat/chat.react.js b/native/chat/chat.react.js
--- a/native/chat/chat.react.js
+++ b/native/chat/chat.react.js
@@ -34,10 +34,15 @@
import BackgroundChatThreadList from './background-chat-thread-list.react.js';
import ChatHeader from './chat-header.react.js';
+import {
+ backgroundChatThreadListOptions,
+ homeChatThreadListOptions,
+} from './chat-options.js';
import ChatRouter, {
type ChatRouterNavigationHelpers,
type ChatRouterNavigationAction,
} from './chat-router.js';
+import TabBar from './chat-tab-bar.react.js';
import ComposeSubchannel from './compose-subchannel.react.js';
import ComposeThreadButton from './compose-thread-button.react.js';
import FullScreenThreadMediaGallery from './fullscreen-thread-media-gallery.react.js';
@@ -58,7 +63,6 @@
nuxTip,
NUXTipsContext,
} from '../components/nux-tips-context.react.js';
-import SWMansionIcon from '../components/swmansion-icon.react.js';
import { InputStateContext } from '../input/input-state.js';
import CommunityDrawerButton from '../navigation/community-drawer-button.react.js';
import HeaderBackButton from '../navigation/header-back-button.react.js';
@@ -119,19 +123,6 @@
export type ChatTopTabsNavigationHelpers =
MaterialTopTabNavigationHelpers<ScreenParamList>;
-const homeChatThreadListOptions = {
- title: threadSettingsNotificationsCopy.HOME,
- tabBarIcon: ({ color }: { +color: string, ... }) => (
- <SWMansionIcon name="home-1" size={22} style={{ color }} />
- ),
-};
-const backgroundChatThreadListOptions = {
- title: threadSettingsNotificationsCopy.MUTED,
- tabBarIcon: ({ color }: { +color: string, ... }) => (
- <SWMansionIcon name="bell-disabled" size={22} style={{ color }} />
- ),
-};
-
const ChatThreadsTopTab = createMaterialTopTabNavigator<
ScreenParamList,
ChatTopTabsParamList,
@@ -156,8 +147,9 @@
}),
[tabBarAccent, tabBarBackground],
);
+
return (
- <ChatThreadsTopTab.Navigator screenOptions={screenOptions}>
+ <ChatThreadsTopTab.Navigator screenOptions={screenOptions} tabBar={TabBar}>
<ChatThreadsTopTab.Screen
name={HomeChatThreadListRouteName}
component={HomeChatThreadList}
diff --git a/native/components/nux-tips-context.react.js b/native/components/nux-tips-context.react.js
--- a/native/components/nux-tips-context.react.js
+++ b/native/components/nux-tips-context.react.js
@@ -9,6 +9,7 @@
const nuxTip = Object.freeze({
COMMUNITY_DRAWER: 'community_drawer',
MUTED: 'muted',
+ HOME: 'home',
});
export type NUXTip = $Values<typeof nuxTip>;

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 4:54 AM (18 h, 5 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2683843
Default Alt Text
D13082.id43793.diff (5 KB)

Event Timeline