Page MenuHomePhabricator
Differential D12978

[native] Move opacityStyle
ClosedPublic
Actions

Authored by inka on Aug 5 2024, 6:02 AM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Apr 21, 4:43 AM
Unknown Object (File)
Wed, Apr 16, 3:55 PM
Unknown Object (File)
Wed, Apr 16, 3:15 PM
Unknown Object (File)
Wed, Apr 16, 2:30 PM
Unknown Object (File)
Wed, Apr 16, 12:16 AM
Unknown Object (File)
Tue, Apr 15, 11:13 AM
Unknown Object (File)
Sun, Apr 13, 9:26 PM
Unknown Object (File)
Fri, Apr 11, 2:45 AM
View All 84 Files
Subscribers
ashoat

Details

Reviewers
tomek
will
Commits
rCOMM6d256a561f4d: [native] Move opacityStyle
Summary

issue: ENG-8914
Refactoring from class to function

Test Plan

Tested by creating a nux tooltip and displaying it - still works

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Revision Contents
Changeset List

PathSize
native/
tooltip/
30 lines

Diff 43349

View Options

native/tooltip/nux-tips-overlay.react.js

Show First 20 Lines • Show All 78 Lines • ▼ Show 20 Lines
type NUXTipsOverlayProps<Base> = { type NUXTipsOverlayProps<Base> = {
...Base, ...Base,
// Redux state // Redux state
+dimensions: DimensionsInfo, +dimensions: DimensionsInfo,
+position: Animated.Node, +position: Animated.Node,
+styles: $ReadOnly<typeof unboundStyles>, +styles: $ReadOnly<typeof unboundStyles>,
+closeTip: () => mixed, +closeTip: () => mixed,
+contentContainerStyle: ViewStyle, +contentContainerStyle: ViewStyle,
+opacityStyle: AnimatedViewStyle,
}; };
function createNUXTipsOverlay( function createNUXTipsOverlay(
ButtonComponent: React.ComponentType<ButtonProps<BaseNUXTipsOverlayProps>>, ButtonComponent: React.ComponentType<ButtonProps<BaseNUXTipsOverlayProps>>,
MenuComponent: React.ComponentType<BaseNUXTipsOverlayProps>, MenuComponent: React.ComponentType<BaseNUXTipsOverlayProps>,
): React.ComponentType<BaseNUXTipsOverlayProps> { ): React.ComponentType<BaseNUXTipsOverlayProps> {
class NUXTipsOverlay extends React.PureComponent< class NUXTipsOverlay extends React.PureComponent<
NUXTipsOverlayProps<BaseNUXTipsOverlayProps>, NUXTipsOverlayProps<BaseNUXTipsOverlayProps>,
> { > {
backdropOpacity: Node;
tipContainerOpacity: Node; tipContainerOpacity: Node;
tipVerticalAbove: Node; tipVerticalAbove: Node;
tipVerticalBelow: Node; tipVerticalBelow: Node;
tipHorizontalOffset: Value = new Value(0); tipHorizontalOffset: Value = new Value(0);
tipHorizontal: Node; tipHorizontal: Node;
tipScale: Node; tipScale: Node;
fixedTipVertical: Node; fixedTipVertical: Node;
tipHeight: number = 30; tipHeight: number = 30;
margin: number = 20; margin: number = 20;
constructor(props: NUXTipsOverlayProps<BaseNUXTipsOverlayProps>) { constructor(props: NUXTipsOverlayProps<BaseNUXTipsOverlayProps>) {
super(props); super(props);
const { position } = props; const { position } = props;
this.backdropOpacity = interpolateNode(position, {
inputRange: [0, 1],
outputRange: [0, 0.7],
extrapolate: Extrapolate.CLAMP,
});
this.tipContainerOpacity = interpolateNode(position, { this.tipContainerOpacity = interpolateNode(position, {
inputRange: [0, 0.1], inputRange: [0, 0.1],
outputRange: [0, 1], outputRange: [0, 1],
extrapolate: Extrapolate.CLAMP, extrapolate: Extrapolate.CLAMP,
}); });
const { margin } = this; const { margin } = this;
this.tipVerticalAbove = interpolateNode(position, { this.tipVerticalAbove = interpolateNode(position, {
Show All 18 Lines constructor(props: NUXTipsOverlayProps<BaseNUXTipsOverlayProps>) {
}); });
this.fixedTipVertical = multiply( this.fixedTipVertical = multiply(
invertedPosition, invertedPosition,
props.dimensions.height, props.dimensions.height,
); );
} }
get opacityStyle(): AnimatedViewStyle {
return {
...this.props.styles.backdrop,
opacity: this.backdropOpacity,
};
}
get buttonStyle(): ViewStyle { get buttonStyle(): ViewStyle {
const { params } = this.props.route; const { params } = this.props.route;
const { initialCoordinates, verticalBounds } = params; const { initialCoordinates, verticalBounds } = params;
const { x, y, width, height } = initialCoordinates; const { x, y, width, height } = initialCoordinates;
return { return {
width: Math.ceil(width), width: Math.ceil(width),
height: Math.ceil(height), height: Math.ceil(height),
marginTop: y - verticalBounds.y, marginTop: y - verticalBounds.y,
Show All 37 Lines > {
render(): React.Node { render(): React.Node {
const { const {
dimensions, dimensions,
position, position,
styles, styles,
closeTip, closeTip,
contentContainerStyle, contentContainerStyle,
opacityStyle,
...navAndRouteForFlow ...navAndRouteForFlow
} = this.props; } = this.props;
let triangleStyle; let triangleStyle;
const { route } = this.props; const { route } = this.props;
const { initialCoordinates } = route.params; const { initialCoordinates } = route.params;
const { x, width } = initialCoordinates; const { x, width } = initialCoordinates;
const extraLeftSpace = x; const extraLeftSpace = x;
Show All 29 Lines render(): React.Node {
<MenuComponent {...navAndRouteForFlow} key="menu" /> <MenuComponent {...navAndRouteForFlow} key="menu" />
</View> </View>
</AnimatedView> </AnimatedView>
); );
return ( return (
<TouchableWithoutFeedback onPress={this.props.closeTip}> <TouchableWithoutFeedback onPress={this.props.closeTip}>
<View style={styles.container}> <View style={styles.container}>
<AnimatedView style={this.opacityStyle} /> <AnimatedView style={opacityStyle} />
<View style={this.props.contentContainerStyle}> <View style={this.props.contentContainerStyle}>
<View style={this.buttonStyle}> <View style={this.buttonStyle}>
<ButtonComponent {...buttonProps} /> <ButtonComponent {...buttonProps} />
</View> </View>
</View> </View>
{tip} {tip}
</View> </View>
</TouchableWithoutFeedback> </TouchableWithoutFeedback>
Show All 36 Lines const contentContainerStyle = React.useMemo(() => {
fullScreenHeight - verticalBounds.y - verticalBounds.height; fullScreenHeight - verticalBounds.y - verticalBounds.height;
return { return {
...styles.contentContainer, ...styles.contentContainer,
marginTop: top, marginTop: top,
marginBottom: bottom, marginBottom: bottom,
}; };
}, [dimensions.height, props.route.params, styles.contentContainer]); }, [dimensions.height, props.route.params, styles.contentContainer]);
const opacityStyle = React.useMemo(() => {
const backdropOpacity = interpolateNode(position, {
inputRange: [0, 1],
outputRange: [0, 0.7],
extrapolate: Extrapolate.CLAMP,
});
return {
...styles.backdrop,
opacity: backdropOpacity,
};
}, [position, styles.backdrop]);
return ( return (
<NUXTipsOverlay <NUXTipsOverlay
{...props} {...props}
dimensions={dimensions} dimensions={dimensions}
position={position} position={position}
styles={styles} styles={styles}
closeTip={goBackOnce} closeTip={goBackOnce}
contentContainerStyle={contentContainerStyle} contentContainerStyle={contentContainerStyle}
opacityStyle={opacityStyle}
/> />
); );
} }
return React.memo<BaseNUXTipsOverlayProps>(ConnectedNUXTipsOverlay); return React.memo<BaseNUXTipsOverlayProps>(ConnectedNUXTipsOverlay);
} }
export { createNUXTipsOverlay }; export { createNUXTipsOverlay };