Page MenuHomePhabricator
Files F3506251

D14112.id46331.diff
No OneTemporary
Actions

D14112.id46331.diff
View Options

diff --git a/native/chat/multimedia-message-tooltip-modal.react.js b/native/chat/multimedia-message-tooltip-modal.react.js
--- a/native/chat/multimedia-message-tooltip-modal.react.js
+++ b/native/chat/multimedia-message-tooltip-modal.react.js
@@ -11,7 +11,7 @@
import {
createTooltip,
type TooltipParams,
- type BaseTooltipProps,
+ type TooltipProps,
type TooltipMenuProps,
} from '../tooltip/tooltip.react.js';
import type { ChatMultimediaMessageInfoItem } from '../types/chat-types.js';
@@ -97,7 +97,7 @@
}
const MultimediaMessageTooltipModal: React.ComponentType<
- BaseTooltipProps<'MultimediaMessageTooltipModal'>,
+ TooltipProps<'MultimediaMessageTooltipModal'>,
> = createTooltip<'MultimediaMessageTooltipModal'>(
MultimediaMessageTooltipButton,
TooltipMenu,
diff --git a/native/chat/robotext-message-tooltip-modal.react.js b/native/chat/robotext-message-tooltip-modal.react.js
--- a/native/chat/robotext-message-tooltip-modal.react.js
+++ b/native/chat/robotext-message-tooltip-modal.react.js
@@ -8,7 +8,7 @@
import {
createTooltip,
type TooltipParams,
- type BaseTooltipProps,
+ type TooltipProps,
type TooltipMenuProps,
} from '../tooltip/tooltip.react.js';
import type { ChatRobotextMessageInfoItemWithHeight } from '../types/chat-types.js';
@@ -45,7 +45,7 @@
}
const RobotextMessageTooltipModal: React.ComponentType<
- BaseTooltipProps<'RobotextMessageTooltipModal'>,
+ TooltipProps<'RobotextMessageTooltipModal'>,
> = createTooltip<'RobotextMessageTooltipModal'>(
RobotextMessageTooltipButton,
TooltipMenu,
diff --git a/native/chat/settings/thread-settings-member-tooltip-modal.react.js b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
--- a/native/chat/settings/thread-settings-member-tooltip-modal.react.js
+++ b/native/chat/settings/thread-settings-member-tooltip-modal.react.js
@@ -15,7 +15,7 @@
import type { AppNavigationProp } from '../../navigation/app-navigator.react';
import { ChangeRolesScreenRouteName } from '../../navigation/route-names.js';
import {
- type BaseTooltipProps,
+ type TooltipProps,
createTooltip,
type TooltipMenuProps,
type TooltipParams,
@@ -105,7 +105,7 @@
}
const ThreadSettingsMemberTooltipModal: React.ComponentType<
- BaseTooltipProps<'ThreadSettingsMemberTooltipModal'>,
+ TooltipProps<'ThreadSettingsMemberTooltipModal'>,
> = createTooltip<'ThreadSettingsMemberTooltipModal'>(
ThreadSettingsMemberTooltipButton,
TooltipMenu,
diff --git a/native/chat/text-message-tooltip-modal.react.js b/native/chat/text-message-tooltip-modal.react.js
--- a/native/chat/text-message-tooltip-modal.react.js
+++ b/native/chat/text-message-tooltip-modal.react.js
@@ -19,7 +19,7 @@
import {
createTooltip,
type TooltipParams,
- type BaseTooltipProps,
+ type TooltipProps,
type TooltipMenuProps,
} from '../tooltip/tooltip.react.js';
import type { ChatTextMessageInfoItemWithHeight } from '../types/chat-types.js';
@@ -191,7 +191,7 @@
}
const TextMessageTooltipModal: React.ComponentType<
- BaseTooltipProps<'TextMessageTooltipModal'>,
+ TooltipProps<'TextMessageTooltipModal'>,
> = createTooltip<'TextMessageTooltipModal'>(
TextMessageTooltipButton,
TooltipMenu,
diff --git a/native/profile/user-relationship-tooltip-modal.react.js b/native/profile/user-relationship-tooltip-modal.react.js
--- a/native/profile/user-relationship-tooltip-modal.react.js
+++ b/native/profile/user-relationship-tooltip-modal.react.js
@@ -15,7 +15,7 @@
import {
createTooltip,
type TooltipParams,
- type BaseTooltipProps,
+ type TooltipProps,
type TooltipMenuProps,
type TooltipRoute,
} from '../tooltip/tooltip.react.js';
@@ -158,7 +158,7 @@
}
const UserRelationshipTooltipModal: React.ComponentType<
- BaseTooltipProps<'UserRelationshipTooltipModal'>,
+ TooltipProps<'UserRelationshipTooltipModal'>,
> = createTooltip<'UserRelationshipTooltipModal'>(
UserRelationshipTooltipButton,
TooltipMenu,
diff --git a/native/tooltip/tooltip.react.js b/native/tooltip/tooltip.react.js
--- a/native/tooltip/tooltip.react.js
+++ b/native/tooltip/tooltip.react.js
@@ -15,20 +15,15 @@
import {
TooltipContextProvider,
TooltipContext,
- type TooltipContextType,
} from './tooltip-context.react.js';
import BaseTooltipItem, {
type TooltipItemBaseProps,
} from './tooltip-item.react.js';
-import { ChatContext, type ChatContextType } from '../chat/chat-context.js';
+import { ChatContext } from '../chat/chat-context.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import type { AppNavigationProp } from '../navigation/app-navigator.react.js';
-import {
- OverlayContext,
- type OverlayContextType,
-} from '../navigation/overlay-context.js';
+import { OverlayContext } from '../navigation/overlay-context.js';
import type { TooltipModalParamList } from '../navigation/route-names.js';
-import { type DimensionsInfo } from '../redux/dimensions-updater.react.js';
import { useSelector } from '../redux/redux-utils.js';
import { useStyles } from '../themes/colors.js';
import {
@@ -130,7 +125,7 @@
RouteName,
>;
-export type BaseTooltipProps<RouteName> = {
+export type TooltipProps<RouteName> = {
+navigation: AppNavigationProp<RouteName>,
+route: TooltipRoute<RouteName>,
};
@@ -139,170 +134,22 @@
+progress: Node,
+isOpeningSidebar: boolean,
};
-type TooltipProps<Base> = {
- ...Base,
- // Redux state
- +dimensions: DimensionsInfo,
- +overlayContext: ?OverlayContextType,
- +chatContext: ?ChatContextType,
- +styles: $ReadOnly<typeof unboundStyles>,
- +tooltipContext: TooltipContextType,
- +closeTooltip: () => mixed,
- +computedTooltipLocation: 'above' | 'below' | 'fixed',
- +opacityStyle: AnimatedViewStyle,
- +contentContainerStyle: ViewStyle,
- +buttonStyle: ViewStyle,
- +tooltipContainerStyle: AnimatedViewStyle,
- +boundTooltipItem: React.ComponentType<TooltipItemBaseProps>,
- +onPressMore: () => void,
- +renderMoreIcon: () => React.Node,
- +onTooltipContainerLayout: (event: LayoutEvent) => void,
-};
export type TooltipMenuProps<RouteName> = {
- ...BaseTooltipProps<RouteName>,
+ ...TooltipProps<RouteName>,
+tooltipItem: React.ComponentType<TooltipItemBaseProps>,
};
function createTooltip<
RouteName: $Keys<TooltipModalParamList>,
- BaseTooltipPropsType: BaseTooltipProps<RouteName> = BaseTooltipProps<RouteName>,
+ TooltipPropsType: TooltipProps<RouteName> = TooltipProps<RouteName>,
>(
- ButtonComponent: React.ComponentType<ButtonProps<BaseTooltipPropsType>>,
+ ButtonComponent: React.ComponentType<ButtonProps<TooltipPropsType>>,
MenuComponent: React.ComponentType<TooltipMenuProps<RouteName>>,
-): React.ComponentType<BaseTooltipPropsType> {
- class Tooltip extends React.PureComponent<
- TooltipProps<BaseTooltipPropsType>,
- > {
- render(): React.Node {
- const {
- dimensions,
- overlayContext,
- chatContext,
- styles,
- tooltipContext,
- closeTooltip,
- computedTooltipLocation,
- opacityStyle,
- contentContainerStyle,
- buttonStyle,
- tooltipContainerStyle: _tooltipContainerStyle,
- boundTooltipItem,
- onPressMore,
- renderMoreIcon,
- onTooltipContainerLayout,
- ...navAndRouteForFlow
- } = this.props;
-
- const tooltipContainerStyle: Array<ViewStyle> = [styles.itemContainer];
-
- if (computedTooltipLocation === 'fixed') {
- tooltipContainerStyle.push(styles.itemContainerFixed);
- }
-
- const items: Array<React.Node> = [
- <MenuComponent
- {...navAndRouteForFlow}
- tooltipItem={boundTooltipItem}
- key="menu"
- />,
- ];
-
- if (this.props.tooltipContext.shouldShowMore()) {
- items.push(
- <BaseTooltipItem
- id="more"
- text="More"
- onPress={onPressMore}
- renderIcon={renderMoreIcon}
- containerStyle={tooltipContainerStyle}
- key="more"
- />,
- );
- }
-
- let triangleStyle;
- const { route } = this.props;
- const { initialCoordinates } = route.params;
- const { x, width } = initialCoordinates;
- const extraLeftSpace = x;
- const extraRightSpace = dimensions.width - width - x;
- if (extraLeftSpace < extraRightSpace) {
- triangleStyle = {
- alignSelf: 'flex-start',
- left: extraLeftSpace + (width - 20) / 2,
- };
- } else {
- triangleStyle = {
- alignSelf: 'flex-end',
- right: extraRightSpace + (width - 20) / 2,
- };
- }
-
- let triangleDown = null;
- let triangleUp = null;
- if (computedTooltipLocation === 'above') {
- triangleDown = <View style={[styles.triangleDown, triangleStyle]} />;
- } else if (computedTooltipLocation === 'below') {
- triangleUp = <View style={[styles.triangleUp, triangleStyle]} />;
- }
-
- invariant(overlayContext, 'Tooltip should have OverlayContext');
- const { position } = overlayContext;
- invariant(position, 'position should be defined in tooltip');
-
- const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID;
-
- const buttonProps: ButtonProps<BaseTooltipPropsType> = {
- ...navAndRouteForFlow,
- progress: position,
- isOpeningSidebar,
- };
-
- const itemsStyles = [styles.items, styles.itemsFixed];
-
- let tooltip = null;
-
- if (computedTooltipLocation !== 'fixed') {
- tooltip = (
- <AnimatedView
- style={this.props.tooltipContainerStyle}
- onLayout={onTooltipContainerLayout}
- >
- {triangleUp}
- <View style={styles.items}>{items}</View>
- {triangleDown}
- </AnimatedView>
- );
- } else if (
- computedTooltipLocation === 'fixed' &&
- !this.props.route.params.hideTooltip
- ) {
- tooltip = (
- <AnimatedView style={this.props.tooltipContainerStyle}>
- <View style={itemsStyles}>{items}</View>
- </AnimatedView>
- );
- }
-
- return (
- <TouchableWithoutFeedback onPress={this.props.closeTooltip}>
- <View style={styles.container}>
- <AnimatedView style={this.props.opacityStyle} />
- <View style={this.props.contentContainerStyle}>
- <View style={this.props.buttonStyle}>
- <ButtonComponent {...buttonProps} />
- </View>
- </View>
- {tooltip}
- </View>
- </TouchableWithoutFeedback>
- );
- }
- }
- function ConnectedTooltip(
+): React.ComponentType<TooltipPropsType> {
+ function Tooltip(
props: $ReadOnly<{
- ...BaseTooltipPropsType,
+ ...TooltipPropsType,
+hideTooltip: () => mixed,
}>,
) {
@@ -314,7 +161,7 @@
const { tooltipLocation } = params;
const isFixed = tooltipLocation === 'fixed';
- const { hideTooltip, ...rest } = props;
+ const { hideTooltip, ...navAndRouteForFlow } = props;
React.useEffect(() => {
Haptics.impactAsync();
@@ -591,28 +438,104 @@
[dimensions.width, params.initialCoordinates],
);
+ const tooltipItemContainerStyle: Array<ViewStyle> = [styles.itemContainer];
+
+ if (computedTooltipLocation === 'fixed') {
+ tooltipItemContainerStyle.push(styles.itemContainerFixed);
+ }
+
+ const items: Array<React.Node> = [
+ <MenuComponent
+ {...navAndRouteForFlow}
+ tooltipItem={boundTooltipItem}
+ key="menu"
+ />,
+ ];
+
+ if (tooltipContext.shouldShowMore()) {
+ items.push(
+ <BaseTooltipItem
+ id="more"
+ text="More"
+ onPress={onPressMore}
+ renderIcon={renderMoreIcon}
+ containerStyle={tooltipItemContainerStyle}
+ key="more"
+ />,
+ );
+ }
+
+ let triangleStyle;
+ const { initialCoordinates } = params;
+ const { x, width } = initialCoordinates;
+ const extraLeftSpace = x;
+ const extraRightSpace = dimensions.width - width - x;
+ if (extraLeftSpace < extraRightSpace) {
+ triangleStyle = {
+ alignSelf: 'flex-start',
+ left: extraLeftSpace + (width - 20) / 2,
+ };
+ } else {
+ triangleStyle = {
+ alignSelf: 'flex-end',
+ right: extraRightSpace + (width - 20) / 2,
+ };
+ }
+
+ let triangleDown = null;
+ let triangleUp = null;
+ if (computedTooltipLocation === 'above') {
+ triangleDown = <View style={[styles.triangleDown, triangleStyle]} />;
+ } else if (computedTooltipLocation === 'below') {
+ triangleUp = <View style={[styles.triangleUp, triangleStyle]} />;
+ }
+
+ const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID;
+
+ const buttonProps: ButtonProps<TooltipPropsType> = {
+ ...navAndRouteForFlow,
+ progress: position,
+ isOpeningSidebar,
+ };
+
+ const itemsStyles = [styles.items, styles.itemsFixed];
+
+ let tooltip = null;
+
+ if (computedTooltipLocation !== 'fixed') {
+ tooltip = (
+ <AnimatedView
+ style={tooltipContainerStyle}
+ onLayout={onTooltipContainerLayout}
+ >
+ {triangleUp}
+ <View style={styles.items}>{items}</View>
+ {triangleDown}
+ </AnimatedView>
+ );
+ } else if (computedTooltipLocation === 'fixed' && !params.hideTooltip) {
+ tooltip = (
+ <AnimatedView style={tooltipContainerStyle}>
+ <View style={itemsStyles}>{items}</View>
+ </AnimatedView>
+ );
+ }
+
return (
- <Tooltip
- {...rest}
- dimensions={dimensions}
- overlayContext={overlayContext}
- chatContext={chatContext}
- styles={styles}
- tooltipContext={tooltipContext}
- closeTooltip={closeTooltip}
- computedTooltipLocation={computedTooltipLocation}
- opacityStyle={opacityStyle}
- contentContainerStyle={contentContainerStyle}
- buttonStyle={buttonStyle}
- tooltipContainerStyle={tooltipContainerStyle}
- boundTooltipItem={boundTooltipItem}
- onPressMore={onPressMore}
- renderMoreIcon={renderMoreIcon}
- onTooltipContainerLayout={onTooltipContainerLayout}
- />
+ <TouchableWithoutFeedback onPress={closeTooltip}>
+ <View style={styles.container}>
+ <AnimatedView style={opacityStyle} />
+ <View style={contentContainerStyle}>
+ <View style={buttonStyle}>
+ <ButtonComponent {...buttonProps} />
+ </View>
+ </View>
+ {tooltip}
+ </View>
+ </TouchableWithoutFeedback>
);
}
- function MemoizedTooltip(props: BaseTooltipPropsType) {
+ function MemoizedTooltip(props: TooltipPropsType) {
const { visibleEntryIDs } = props.route.params;
const { goBackOnce } = props.navigation;
@@ -629,11 +552,11 @@
cancel={goBackOnce}
hideTooltip={hideTooltip}
>
- <ConnectedTooltip {...props} hideTooltip={hideTooltip} />
+ <Tooltip {...props} hideTooltip={hideTooltip} />
</TooltipContextProvider>
);
}
- return React.memo<BaseTooltipPropsType>(MemoizedTooltip);
+ return React.memo<TooltipPropsType>(MemoizedTooltip);
}
function getTooltipHeight(numEntries: number): number {

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 3:53 PM (5 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2685978
Default Alt Text
D14112.id46331.diff (15 KB)

Event Timeline