Page MenuHomePhabricator
Files F3502222

D12981.id43430.diff
No OneTemporary
Actions

D12981.id43430.diff
View Options

diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js
--- a/native/tooltip/nux-tips-overlay.react.js
+++ b/native/tooltip/nux-tips-overlay.react.js
@@ -88,8 +88,13 @@
+buttonStyle: ViewStyle,
+tipHorizontalOffset: Value,
+onTipContainerLayout: (event: LayoutEvent) => void,
+ +tipContainerOpacity: Node,
+ +tipVerticalBelow: Node,
};
+const tipHeight: number = 30;
+const margin: number = 20;
+
function createNUXTipsOverlay(
ButtonComponent: React.ComponentType<ButtonProps<BaseNUXTipsOverlayProps>>,
MenuComponent: React.ComponentType<BaseNUXTipsOverlayProps>,
@@ -97,35 +102,19 @@
class NUXTipsOverlay extends React.PureComponent<
NUXTipsOverlayProps<BaseNUXTipsOverlayProps>,
> {
- tipContainerOpacity: Node;
tipVerticalAbove: Node;
- tipVerticalBelow: Node;
tipHorizontal: Node;
tipScale: Node;
fixedTipVertical: Node;
- tipHeight: number = 30;
- margin: number = 20;
constructor(props: NUXTipsOverlayProps<BaseNUXTipsOverlayProps>) {
super(props);
const { position } = props;
- this.tipContainerOpacity = interpolateNode(position, {
- inputRange: [0, 0.1],
- outputRange: [0, 1],
- extrapolate: Extrapolate.CLAMP,
- });
-
- const { margin } = this;
this.tipVerticalAbove = interpolateNode(position, {
inputRange: [0, 1],
- outputRange: [margin + this.tipHeight / 2, 0],
- extrapolate: Extrapolate.CLAMP,
- });
- this.tipVerticalBelow = interpolateNode(position, {
- inputRange: [0, 1],
- outputRange: [-margin - this.tipHeight / 2, 0],
+ outputRange: [margin + tipHeight / 2, 0],
extrapolate: Extrapolate.CLAMP,
});
@@ -149,15 +138,15 @@
}
get tipContainerStyle(): AnimatedViewStyle {
- const { dimensions, route } = this.props;
+ const { dimensions, route, tipContainerOpacity, tipVerticalBelow } =
+ this.props;
const { initialCoordinates, verticalBounds } = route.params;
const { x, y, width, height } = initialCoordinates;
- const { margin } = this;
const style: WritableAnimatedStyleObj = {};
style.position = 'absolute';
style.alignItems = 'center';
- style.opacity = this.tipContainerOpacity;
+ style.opacity = tipContainerOpacity;
const transform: Array<ReanimatedTransform> = [];
@@ -175,7 +164,7 @@
style.top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin;
- transform.push({ translateY: this.tipVerticalBelow });
+ transform.push({ translateY: tipVerticalBelow });
transform.push({ scale: this.tipScale });
style.transform = transform;
@@ -193,6 +182,8 @@
buttonStyle,
tipHorizontalOffset,
onTipContainerLayout,
+ tipContainerOpacity,
+ tipVerticalBelow,
...navAndRouteForFlow
} = this.props;
@@ -320,6 +311,26 @@
[dimensions.width, initialCoordinates, tipHorizontalOffset],
);
+ const tipContainerOpacity = React.useMemo(
+ () =>
+ interpolateNode(position, {
+ inputRange: [0, 0.1],
+ outputRange: [0, 1],
+ extrapolate: Extrapolate.CLAMP,
+ }),
+ [position],
+ );
+
+ const tipVerticalBelow = React.useMemo(
+ () =>
+ interpolateNode(position, {
+ inputRange: [0, 1],
+ outputRange: [-margin - tipHeight / 2, 0],
+ extrapolate: Extrapolate.CLAMP,
+ }),
+ [position],
+ );
+
return (
<NUXTipsOverlay
{...props}
@@ -332,6 +343,8 @@
buttonStyle={buttonStyle}
tipHorizontalOffset={tipHorizontalOffset}
onTipContainerLayout={onTipContainerLayout}
+ tipContainerOpacity={tipContainerOpacity}
+ tipVerticalBelow={tipVerticalBelow}
/>
);
}

File Metadata

Mime Type
text/plain
Expires
Sat, Dec 21, 3:59 AM (17 h, 23 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2683923
Default Alt Text
D12981.id43430.diff (3 KB)

Event Timeline