Page Menu
Home
Phabricator
Search
Configure Global Search
Log In
Files
F3527810
D13082.id43678.diff
No One
Temporary
Actions
View File
Edit File
Delete File
View Transforms
Subscribe
Mute Notifications
Award Token
Flag For Later
Size
4 KB
Referenced Files
None
Subscribers
None
D13082.id43678.diff
View Options
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,74 @@
+// @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 { threadSettingsNotificationsCopy } from 'lib/shared/thread-settings-notifications-utils.js';
+
+import {
+ nuxTip,
+ NUXTipsContext,
+} from '../components/nux-tips-context.react.js';
+
+const ButtonTitleToTip = Object.freeze({
+ [threadSettingsNotificationsCopy.MUTED]: nuxTip.MUTED,
+ [threadSettingsNotificationsCopy.HOME]: nuxTip.HOME,
+});
+
+export default function TabBarTop(
+ props: MaterialTopTabBarProps<Route<>>,
+): React.Node {
+ const { descriptors } = props;
+ const viewRef = React.useRef<?React.ElementRef<typeof View>>();
+
+ const tipsContext = React.useContext(NUXTipsContext);
+ invariant(tipsContext, 'NUXTipsContext should be defined');
+
+ const renderTabBarItem = React.useCallback(
+ (innerProps: TabBarItemProps<Route<>> & { key: string }) => {
+ const onLayout = () => {
+ const button = viewRef.current;
+ if (!button) {
+ return;
+ }
+ const label = descriptors[innerProps.route.key].options.title;
+ invariant(
+ label,
+ 'label has to be defined in chat tab bar for NUX to work',
+ );
+
+ const tipType = ButtonTitleToTip[label];
+ if (!tipType) {
+ return;
+ }
+ button.measure((x, y, width, height, pageX, pageY) => {
+ tipsContext.registerTipButton(tipType, {
+ x,
+ y,
+ width,
+ height,
+ pageX,
+ pageY,
+ });
+ });
+ };
+
+ return (
+ <View ref={viewRef} onLayout={onLayout}>
+ <TabBarItem {...innerProps} />
+ </View>
+ );
+ },
+ [descriptors, tipsContext],
+ );
+
+ 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
@@ -38,6 +38,7 @@
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';
@@ -119,15 +120,21 @@
export type ChatTopTabsNavigationHelpers =
MaterialTopTabNavigationHelpers<ScreenParamList>;
-const homeChatThreadListOptions = {
+const homeChatThreadListOptions: {
+ title: string,
+ tabBarIcon: ({ +color: string, ... }) => React$Node,
+} = {
title: threadSettingsNotificationsCopy.HOME,
- tabBarIcon: ({ color }: { +color: string, ... }) => (
+ tabBarIcon: ({ color }) => (
<SWMansionIcon name="home-1" size={22} style={{ color }} />
),
};
-const backgroundChatThreadListOptions = {
+const backgroundChatThreadListOptions: {
+ title: string,
+ tabBarIcon: ({ +color: string, ... }) => React$Node,
+} = {
title: threadSettingsNotificationsCopy.MUTED,
- tabBarIcon: ({ color }: { +color: string, ... }) => (
+ tabBarIcon: ({ color }) => (
<SWMansionIcon name="bell-disabled" size={22} style={{ color }} />
),
};
@@ -156,8 +163,9 @@
}),
[tabBarAccent, tabBarBackground],
);
+
return (
- <ChatThreadsTopTab.Navigator screenOptions={screenOptions}>
+ <ChatThreadsTopTab.Navigator screenOptions={screenOptions} tabBar={TabBar}>
<ChatThreadsTopTab.Screen
name={HomeChatThreadListRouteName}
component={HomeChatThreadList}
@@ -533,3 +541,5 @@
</View>
);
}
+
+export { backgroundChatThreadListOptions, homeChatThreadListOptions };
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
Details
Attached
Mime Type
text/plain
Expires
Wed, Dec 25, 6:53 AM (11 h, 4 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2701865
Default Alt Text
D13082.id43678.diff (4 KB)
Attached To
Mode
D13082: [native] Create custom top tabs component
Attached
Detach File
Event Timeline
Log In to Comment