Page MenuHomePhabricator
Files F3492563

D14111.diff
No OneTemporary
Actions

D14111.diff
View Options

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
@@ -148,13 +148,15 @@
+styles: $ReadOnly<typeof unboundStyles>,
+tooltipContext: TooltipContextType,
+closeTooltip: () => mixed,
- +boundTooltipItem: React.ComponentType<TooltipItemBaseProps>,
+computedTooltipLocation: 'above' | 'below' | 'fixed',
- +tooltipHorizontalOffset: Value,
+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> = {
@@ -180,13 +182,15 @@
styles,
tooltipContext,
closeTooltip,
- boundTooltipItem,
computedTooltipLocation,
- tooltipHorizontalOffset,
opacityStyle,
contentContainerStyle,
buttonStyle,
tooltipContainerStyle: _tooltipContainerStyle,
+ boundTooltipItem,
+ onPressMore,
+ renderMoreIcon,
+ onTooltipContainerLayout,
...navAndRouteForFlow
} = this.props;
@@ -199,7 +203,7 @@
const items: Array<React.Node> = [
<MenuComponent
{...navAndRouteForFlow}
- tooltipItem={this.getTooltipItem()}
+ tooltipItem={boundTooltipItem}
key="menu"
/>,
];
@@ -209,8 +213,8 @@
<BaseTooltipItem
id="more"
text="More"
- onPress={this.onPressMore}
- renderIcon={this.renderMoreIcon}
+ onPress={onPressMore}
+ renderIcon={renderMoreIcon}
containerStyle={tooltipContainerStyle}
key="more"
/>,
@@ -263,7 +267,7 @@
tooltip = (
<AnimatedView
style={this.props.tooltipContainerStyle}
- onLayout={this.onTooltipContainerLayout}
+ onLayout={onTooltipContainerLayout}
>
{triangleUp}
<View style={styles.items}>{items}</View>
@@ -295,44 +299,6 @@
</TouchableWithoutFeedback>
);
}
-
- getTooltipItem(): React.ComponentType<TooltipItemBaseProps> {
- const BoundTooltipItem = this.props.boundTooltipItem;
- return BoundTooltipItem;
- }
-
- onPressMore = () => {
- Keyboard.dismiss();
- this.props.tooltipContext.showActionSheet();
- };
-
- renderMoreIcon = (): React.Node => {
- const { styles } = this.props;
- return (
- <SWMansionIcon name="menu-vertical" style={styles.icon} size={16} />
- );
- };
-
- onTooltipContainerLayout = (event: LayoutEvent) => {
- const { route, dimensions } = this.props;
- const { x, width } = route.params.initialCoordinates;
-
- const extraLeftSpace = x;
- const extraRightSpace = dimensions.width - width - x;
-
- const actualWidth = event.nativeEvent.layout.width;
- if (extraLeftSpace < extraRightSpace) {
- const minWidth = width + 2 * extraLeftSpace;
- this.props.tooltipHorizontalOffset.setValue(
- (minWidth - actualWidth) / 2,
- );
- } else {
- const minWidth = width + 2 * extraRightSpace;
- this.props.tooltipHorizontalOffset.setValue(
- (actualWidth - minWidth) / 2,
- );
- }
- };
}
function ConnectedTooltip(
props: $ReadOnly<{
@@ -591,6 +557,40 @@
tooltipVerticalBelow,
]);
+ const onPressMore = React.useCallback(() => {
+ Keyboard.dismiss();
+ tooltipContext.showActionSheet();
+ }, [tooltipContext]);
+
+ const renderMoreIcon = React.useCallback((): React.Node => {
+ return (
+ <SWMansionIcon name="menu-vertical" style={styles.icon} size={16} />
+ );
+ }, [styles.icon]);
+
+ const onTooltipContainerLayout = React.useCallback(
+ (event: LayoutEvent) => {
+ const { x, width } = params.initialCoordinates;
+
+ const extraLeftSpace = x;
+ const extraRightSpace = dimensions.width - width - x;
+
+ const actualWidth = event.nativeEvent.layout.width;
+ if (extraLeftSpace < extraRightSpace) {
+ const minWidth = width + 2 * extraLeftSpace;
+ tooltipHorizontalOffset.current.setValue(
+ (minWidth - actualWidth) / 2,
+ );
+ } else {
+ const minWidth = width + 2 * extraRightSpace;
+ tooltipHorizontalOffset.current.setValue(
+ (actualWidth - minWidth) / 2,
+ );
+ }
+ },
+ [dimensions.width, params.initialCoordinates],
+ );
+
return (
<Tooltip
{...rest}
@@ -600,13 +600,15 @@
styles={styles}
tooltipContext={tooltipContext}
closeTooltip={closeTooltip}
- boundTooltipItem={boundTooltipItem}
computedTooltipLocation={computedTooltipLocation}
- tooltipHorizontalOffset={tooltipHorizontalOffset.current}
opacityStyle={opacityStyle}
contentContainerStyle={contentContainerStyle}
buttonStyle={buttonStyle}
tooltipContainerStyle={tooltipContainerStyle}
+ boundTooltipItem={boundTooltipItem}
+ onPressMore={onPressMore}
+ renderMoreIcon={renderMoreIcon}
+ onTooltipContainerLayout={onTooltipContainerLayout}
/>
);
}

File Metadata

Mime Type
text/plain
Expires
Fri, Dec 20, 12:37 AM (21 h, 55 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2679318
Default Alt Text
D14111.diff (5 KB)

Event Timeline