Page MenuHomePhabricator
Files F3388266

D10018.diff
No OneTemporary
Actions

D10018.diff
View Options

diff --git a/native/chat/reaction-selection-popover.react.js b/native/chat/reaction-selection-popover.react.js
--- a/native/chat/reaction-selection-popover.react.js
+++ b/native/chat/reaction-selection-popover.react.js
@@ -18,7 +18,11 @@
import { useStyles } from '../themes/colors.js';
import { useTooltipActions } from '../tooltip/tooltip-hooks.js';
import type { TooltipRoute } from '../tooltip/tooltip.react.js';
-import { AnimatedView } from '../types/styles.js';
+import {
+ AnimatedView,
+ type WritableAnimatedStyleObj,
+ type ReanimatedTransform,
+} from '../types/styles.js';
type Props<RouteName: $Keys<TooltipModalParamList>> = {
+navigation: AppNavigationProp<RouteName>,
@@ -71,13 +75,13 @@
const calculatedMargin = getCalculatedMargin(margin);
const animationStyle = React.useMemo(() => {
- const style = {};
+ const style: WritableAnimatedStyleObj = {};
style.opacity = interpolateNode(position, {
inputRange: [0, 0.1],
outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP,
});
- style.transform = [
+ const transform: Array<ReanimatedTransform> = [
{
scale: interpolateNode(position, {
inputRange: [0.2, 0.8],
@@ -93,7 +97,7 @@
},
];
if (popoverLocation === 'above') {
- style.transform.push({
+ transform.push({
translateY: interpolateNode(position, {
inputRange: [0, 1],
outputRange: [
@@ -104,7 +108,7 @@
}),
});
} else {
- style.transform.push({
+ transform.push({
translateY: interpolateNode(position, {
inputRange: [0, 1],
outputRange: [
@@ -115,6 +119,7 @@
}),
});
}
+ style.transform = transform;
return style;
}, [position, calculatedMargin, popoverLocation, popoverHorizontalOffset]);
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
@@ -40,6 +40,8 @@
AnimatedView,
type ViewStyle,
type AnimatedViewStyle,
+ type WritableAnimatedStyleObj,
+ type ReanimatedTransform,
} from '../types/styles.js';
/* eslint-disable import/no-named-as-default-member */
@@ -308,13 +310,15 @@
const { x, y, width, height } = initialCoordinates;
const { margin, tooltipLocation } = this;
- const style = {};
+ const style: WritableAnimatedStyleObj = {};
style.position = 'absolute';
style.alignItems = 'center';
style.opacity = this.tooltipContainerOpacity;
+ const transform: Array<ReanimatedTransform> = [];
+
if (tooltipLocation !== 'fixed') {
- style.transform = [{ translateX: this.tooltipHorizontal }];
+ transform.push({ translateX: this.tooltipHorizontal });
}
const extraLeftSpace = x;
@@ -341,22 +345,24 @@
verticalBounds.y -
inputBarHeight +
padding;
- style.transform = [{ translateY: this.fixedTooltipVertical }];
+ transform.push({ translateY: this.fixedTooltipVertical });
} else if (tooltipLocation === 'above') {
style.bottom =
dimensions.height - Math.max(y, verticalBounds.y) + margin;
- style.transform.push({ translateY: this.tooltipVerticalAbove });
+ transform.push({ translateY: this.tooltipVerticalAbove });
} else {
style.top =
Math.min(y + height, verticalBounds.y + verticalBounds.height) +
margin;
- style.transform.push({ translateY: this.tooltipVerticalBelow });
+ transform.push({ translateY: this.tooltipVerticalBelow });
}
if (tooltipLocation !== 'fixed') {
- style.transform.push({ scale: this.tooltipScale });
+ transform.push({ scale: this.tooltipScale });
}
+ style.transform = transform;
+
return style;
}
diff --git a/native/types/react-native.js b/native/types/react-native.js
--- a/native/types/react-native.js
+++ b/native/types/react-native.js
@@ -3,6 +3,7 @@
import AnimatedInterpolation from 'react-native/Libraries/Animated/nodes/AnimatedInterpolation.js';
import type ReactNativeAnimatedValue from 'react-native/Libraries/Animated/nodes/AnimatedValue.js';
import type { ViewToken } from 'react-native/Libraries/Lists/ViewabilityHelper.js';
+import type { ____ViewStyle_Internal } from 'react-native/Libraries/StyleSheet/StyleSheetTypes.js';
export type {
Layout,
@@ -43,3 +44,5 @@
};
export type { AnimatedInterpolation };
+
+export type ViewStyleObj = ____ViewStyle_Internal;
diff --git a/native/types/styles.js b/native/types/styles.js
--- a/native/types/styles.js
+++ b/native/types/styles.js
@@ -7,6 +7,8 @@
type EntryExitAnimationFunction,
} from 'react-native-reanimated';
+import type { ViewStyleObj } from './react-native.js';
+
type ViewProps = React.ElementConfig<typeof View>;
export type ViewStyle = $PropertyType<ViewProps, 'style'>;
@@ -16,24 +18,29 @@
type ImageProps = React.ElementConfig<typeof Image>;
export type ImageStyle = $PropertyType<ImageProps, 'style'>;
-export type AnimatedStyleObj = {
- +opacity?: ?number | Animated.Node,
- +height?: ?number | Animated.Node,
- +width?: ?number | Animated.Node,
- +marginTop?: ?number | Animated.Node,
- +marginRight?: ?number | Animated.Node,
- +marginLeft?: ?number | Animated.Node,
- +backgroundColor?: ?string | Animated.Node,
- +bottom?: ?number | Animated.Node,
- +transform?: $ReadOnlyArray<{
- +scale?: ?number | Animated.Node,
- +translateX?: ?number | Animated.Node,
- +translateY?: ?number | Animated.Node,
- ...
- }>,
+export type ReanimatedTransform = {
+ +scale?: ?number | Animated.Node,
+ +translateX?: ?number | Animated.Node,
+ +translateY?: ?number | Animated.Node,
...
};
+export type WritableAnimatedStyleObj = {
+ ...ViewStyleObj,
+ opacity?: ?number | Animated.Node,
+ height?: ?number | Animated.Node,
+ width?: ?number | Animated.Node,
+ marginTop?: ?number | Animated.Node,
+ marginRight?: ?number | Animated.Node,
+ marginLeft?: ?number | Animated.Node,
+ backgroundColor?: ?string | Animated.Node,
+ bottom?: ?number | Animated.Node,
+ transform?: $ReadOnlyArray<ReanimatedTransform>,
+ ...
+};
+
+export type AnimatedStyleObj = $ReadOnly<WritableAnimatedStyleObj>;
+
export type AnimatedViewStyle =
| AnimatedStyleObj
| $ReadOnlyArray<ViewStyle | AnimatedStyleObj>;

File Metadata

Mime Type
text/plain
Expires
Sat, Nov 30, 1:27 PM (18 h, 30 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2601110
Default Alt Text
D10018.diff (6 KB)

Event Timeline