Page MenuHomePhabricator
Files F3503596

D13178.id43804.diff
No OneTemporary
Actions

D13178.id43804.diff
View Options

diff --git a/native/navigation/chat-tab-bar-button.react.js b/native/navigation/chat-tab-bar-button.react.js
new file mode 100644
--- /dev/null
+++ b/native/navigation/chat-tab-bar-button.react.js
@@ -0,0 +1,101 @@
+// @flow
+
+import { useRoute } from '@react-navigation/core';
+import * as React from 'react';
+import { Animated, Text, View } from 'react-native';
+import { TabBarItem } from 'react-native-tab-view';
+
+import type { NUXTipRouteNames } from './route-names.js';
+import { useSelector } from '../redux/redux-utils.js';
+import { useStyles } from '../themes/colors.js';
+import { LightTheme, DarkTheme } from '../themes/navigation.js';
+import type { NUXTipsOverlayProps } from '../tooltip/nux-tips-overlay.react.js';
+
+const dummyCallback = () => {};
+const dummyNavigationState = { index: 0, routes: [] };
+
+const unboundStyles = {
+ button: {
+ flexDirection: 'row',
+ backgroundColor: 'tabBarBackground',
+ },
+ label: {
+ textAlign: 'center',
+ textTransform: 'uppercase',
+ fontSize: 13,
+ margin: 4,
+ backgroundColor: 'transparent',
+ },
+ icon: {
+ height: 24,
+ width: 24,
+ },
+};
+
+type Props = {
+ +tabBarIcon: ({ +color: string, ... }) => React$Node,
+ +title: string,
+};
+
+function createChatTabBarButton<Route: NUXTipRouteNames>(
+ props: Props,
+): React.ComponentType<void | NUXTipsOverlayProps<Route>> {
+ function ChatTabBarButton(): React.Node {
+ const { title, tabBarIcon: Icon } = props;
+
+ const position = React.useRef(() => new Animated.Value(0));
+ const route = useRoute();
+
+ const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
+ const color = React.useMemo(
+ () =>
+ activeTheme === 'dark' ? DarkTheme.colors.text : LightTheme.colors.text,
+ [activeTheme],
+ );
+
+ const styles = useStyles(unboundStyles);
+
+ const renderLabel = React.useCallback(
+ ({ color: labelColor }: { color: string, ... }) => {
+ return (
+ <Text style={[styles.label, { color: labelColor }]}>{title}</Text>
+ );
+ },
+ [styles.label, title],
+ );
+
+ const renderIcon = React.useCallback(
+ ({ color: iconColor }: { color: string, ... }) => {
+ return (
+ <View style={styles.icon}>
+ <Icon color={iconColor} />
+ </View>
+ );
+ },
+ [styles.icon],
+ );
+
+ const renderLabelText = React.useCallback(() => title, [title]);
+
+ return (
+ <TabBarItem
+ position={position.current}
+ route={route}
+ navigationState={dummyNavigationState}
+ onPress={dummyCallback}
+ onLongPress={dummyCallback}
+ style={styles.button}
+ getLabelText={renderLabelText}
+ getAccessible={dummyCallback}
+ getAccessibilityLabel={dummyCallback}
+ renderIcon={renderIcon}
+ getTestID={dummyCallback}
+ activeColor={color}
+ renderLabel={renderLabel}
+ />
+ );
+ }
+ return React.memo(ChatTabBarButton);
+}
+
+export { createChatTabBarButton };
diff --git a/native/navigation/muted-tab-tip.react.js b/native/navigation/muted-tab-tip.react.js
--- a/native/navigation/muted-tab-tip.react.js
+++ b/native/navigation/muted-tab-tip.react.js
@@ -1,16 +1,11 @@
// @flow
-import { useRoute } from '@react-navigation/core';
import * as React from 'react';
-import { Animated, Text, View } from 'react-native';
-import { TabBarItem } from 'react-native-tab-view';
import { useCurrentUserFID } from 'lib/utils/farcaster-utils.js';
+import { createChatTabBarButton } from './chat-tab-bar-button.react.js';
import { backgroundChatThreadListOptions } from '../chat/chat-options.js';
-import { useSelector } from '../redux/redux-utils.js';
-import { useStyles } from '../themes/colors.js';
-import { LightTheme, DarkTheme } from '../themes/navigation.js';
import {
type NUXTipsOverlayProps,
createNUXTipsOverlay,
@@ -22,81 +17,6 @@
' When Comm automatically adds you to a community associated with a ' +
'Farcaster channel you follow, we mute them by default.';
-const dummyCallback = () => {};
-const dummyNavigationState = { index: 0, routes: [] };
-
-const unboundStyles = {
- button: {
- flexDirection: 'row',
- backgroundColor: 'tabBarBackground',
- },
- label: {
- textAlign: 'center',
- textTransform: 'uppercase',
- fontSize: 13,
- margin: 4,
- backgroundColor: 'transparent',
- },
- icon: {
- height: 24,
- width: 24,
- },
-};
-
-function WrappedChatTabBarButton(): React.Node {
- const { title, tabBarIcon: Icon } = backgroundChatThreadListOptions;
-
- const position = React.useRef(() => new Animated.Value(0));
- const route = useRoute();
-
- const activeTheme = useSelector(state => state.globalThemeInfo.activeTheme);
- const color = React.useMemo(
- () =>
- activeTheme === 'dark' ? DarkTheme.colors.text : LightTheme.colors.text,
- [activeTheme],
- );
-
- const styles = useStyles(unboundStyles);
-
- const renderLabel = React.useCallback(
- ({ color: labelColor }: { color: string, ... }) => {
- return <Text style={[styles.label, { color: labelColor }]}>{title}</Text>;
- },
- [styles.label, title],
- );
-
- const renderIcon = React.useCallback(
- ({ color: iconColor }: { color: string, ... }) => {
- return (
- <View style={styles.icon}>
- <Icon color={iconColor} />
- </View>
- );
- },
- [styles.icon],
- );
-
- const renderLabelText = React.useCallback(() => title, [title]);
-
- return (
- <TabBarItem
- position={position.current}
- route={route}
- navigationState={dummyNavigationState}
- onPress={dummyCallback}
- onLongPress={dummyCallback}
- style={styles.button}
- getLabelText={renderLabelText}
- getAccessible={dummyCallback}
- getAccessibilityLabel={dummyCallback}
- renderIcon={renderIcon}
- getTestID={dummyCallback}
- activeColor={color}
- renderLabel={renderLabel}
- />
- );
-}
-
function MutedTabTip(props: NUXTipsOverlayProps<'MutedTabTip'>): React.Node {
const fid = useCurrentUserFID();
const text = React.useMemo(() => {
@@ -108,7 +28,10 @@
const MutedTabTipComponent: React.ComponentType<
NUXTipsOverlayProps<'MutedTabTip'>,
- > = createNUXTipsOverlay(WrappedChatTabBarButton, text);
+ > = createNUXTipsOverlay(
+ createChatTabBarButton<'MutedTabTip'>(backgroundChatThreadListOptions),
+ text,
+ );
return <MutedTabTipComponent {...props} />;
}

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 5:45 AM (18 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2684316
Default Alt Text
D13178.id43804.diff (6 KB)

Event Timeline