diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js index 2995e6c9d..986f722c8 100644 --- a/native/tooltip/nux-tips-overlay.react.js +++ b/native/tooltip/nux-tips-overlay.react.js @@ -1,341 +1,354 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { View, TouchableWithoutFeedback, Platform } from 'react-native'; import Animated from 'react-native-reanimated'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import { OverlayContext } from '../navigation/overlay-context.js'; import type { NavigationRoute } 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 type { LayoutCoordinates, VerticalBounds, } from '../types/layout-types.js'; import type { LayoutEvent } from '../types/react-native.js'; import { AnimatedView, type ViewStyle, type AnimatedViewStyle, type WritableAnimatedStyleObj, type ReanimatedTransform, } from '../types/styles.js'; const { Value, Node, Extrapolate, add, multiply, interpolateNode } = Animated; const unboundStyles = { backdrop: { backgroundColor: 'black', bottom: 0, left: 0, position: 'absolute', right: 0, top: 0, }, container: { flex: 1, }, contentContainer: { flex: 1, overflow: 'hidden', }, items: { backgroundColor: 'tooltipBackground', borderRadius: 5, overflow: 'hidden', }, triangleUp: { borderBottomColor: 'tooltipBackground', borderBottomWidth: 10, borderLeftColor: 'transparent', borderLeftWidth: 10, borderRightColor: 'transparent', borderRightWidth: 10, borderStyle: 'solid', borderTopColor: 'transparent', borderTopWidth: 0, bottom: Platform.OS === 'android' ? -1 : 0, height: 10, width: 10, }, }; export type NUXTipsOverlayParams = { +initialCoordinates: LayoutCoordinates, +verticalBounds: VerticalBounds, }; export type BaseNUXTipsOverlayProps = { +navigation: AppNavigationProp<'NUXTipsOverlay'>, +route: NavigationRoute<'NUXTipsOverlay'>, }; type ButtonProps = { ...Base, +progress: Node, }; type NUXTipsOverlayProps = { ...Base, // Redux state +dimensions: DimensionsInfo, +position: Animated.Node, +styles: $ReadOnly, +closeTip: () => mixed, +contentContainerStyle: ViewStyle, +opacityStyle: AnimatedViewStyle, +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>, MenuComponent: React.ComponentType, ): React.ComponentType { class NUXTipsOverlay extends React.PureComponent< NUXTipsOverlayProps, > { - tipContainerOpacity: Node; tipVerticalAbove: Node; - tipVerticalBelow: Node; tipHorizontal: Node; tipScale: Node; fixedTipVertical: Node; - tipHeight: number = 30; - margin: number = 20; constructor(props: NUXTipsOverlayProps) { 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, }); const invertedPosition = add(1, multiply(-1, position)); this.tipHorizontal = multiply( invertedPosition, this.props.tipHorizontalOffset, ); this.tipScale = interpolateNode(position, { inputRange: [0, 0.2, 0.8, 1], outputRange: [0, 0, 1, 1], extrapolate: Extrapolate.CLAMP, }); this.fixedTipVertical = multiply( invertedPosition, props.dimensions.height, ); } 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 = []; transform.push({ translateX: this.tipHorizontal }); const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; if (extraLeftSpace < extraRightSpace) { style.left = 0; style.minWidth = width + 2 * extraLeftSpace; } else { style.right = 0; style.minWidth = width + 2 * extraRightSpace; } 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; return style; } render(): React.Node { const { dimensions, position, styles, closeTip, contentContainerStyle, opacityStyle, buttonStyle, tipHorizontalOffset, onTipContainerLayout, + tipContainerOpacity, + tipVerticalBelow, ...navAndRouteForFlow } = this.props; 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, }; } const triangleUp = ; const buttonProps: ButtonProps = { ...navAndRouteForFlow, progress: position, }; let tip = null; tip = ( {triangleUp} ); return ( {tip} ); } } function ConnectedNUXTipsOverlay(props: BaseNUXTipsOverlayProps) { const dimensions = useSelector(state => state.dimensions); const overlayContext = React.useContext(OverlayContext); invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); const { position } = overlayContext; const { goBackOnce } = props.navigation; const styles = useStyles(unboundStyles); const contentContainerStyle = React.useMemo(() => { const { verticalBounds } = props.route.params; const fullScreenHeight = dimensions.height; const top = verticalBounds.y; const bottom = fullScreenHeight - verticalBounds.y - verticalBounds.height; return { ...styles.contentContainer, marginTop: top, marginBottom: bottom, }; }, [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]); const { initialCoordinates, verticalBounds } = props.route.params; const buttonStyle = React.useMemo(() => { const { x, y, width, height } = initialCoordinates; return { width: Math.ceil(width), height: Math.ceil(height), marginTop: y - verticalBounds.y, marginLeft: x, }; }, [initialCoordinates, verticalBounds]); const tipHorizontalOffsetRef = React.useRef(new Value(0)); const tipHorizontalOffset = tipHorizontalOffsetRef.current; const onTipContainerLayout = React.useCallback( (event: LayoutEvent) => { const { x, width } = initialCoordinates; const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; const actualWidth = event.nativeEvent.layout.width; if (extraLeftSpace < extraRightSpace) { const minWidth = width + 2 * extraLeftSpace; tipHorizontalOffset.setValue((minWidth - actualWidth) / 2); } else { const minWidth = width + 2 * extraRightSpace; tipHorizontalOffset.setValue((actualWidth - minWidth) / 2); } }, [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 ( ); } return React.memo(ConnectedNUXTipsOverlay); } export { createNUXTipsOverlay };