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 @@ -101,7 +101,7 @@ export type NUXTipsOverlayParams = { +tipKey: NUXTip, - +tooltipLocation: 'above' | 'below', + +tooltipLocation: 'above' | 'below' | 'absolute', }; export type NUXTipsOverlayProps = { @@ -113,25 +113,36 @@ const marginHorizontal: number = 10; function createNUXTipsOverlay( - ButtonComponent: React.ComponentType>, + ButtonComponent: ?React.ComponentType>, tipText: string, ): React.ComponentType> { function NUXTipsOverlay(props: NUXTipsOverlayProps) { const nuxTipContext = React.useContext(NUXTipsContext); const { navigation, route } = props; + const dimensions = useSelector(state => state.dimensions); + const { initialCoordinates, verticalBounds } = React.useMemo(() => { + if (!ButtonComponent) { + const y = (dimensions.height * 2) / 5; + const x = dimensions.width / 2; + return { + initialCoordinates: { height: 0, width: 0, x, y }, + verticalBounds: { height: 0, y }, + }; + } const tipsProps = nuxTipContext?.tipsProps; invariant(tipsProps, 'tips props should be defined in nux tips overlay'); - const { pageX, pageY, width, height } = tipsProps[route.params.tipKey]; + const tipProps = tipsProps[route.params.tipKey]; + invariant(tipProps, 'button should be registered with nuxTipContext'); + const { pageX, pageY, width, height } = tipProps; return { initialCoordinates: { height, width, x: pageX, y: pageY }, verticalBounds: { height, y: pageY }, }; - }, [nuxTipContext, route.params.tipKey]); + }, [dimensions, nuxTipContext?.tipsProps, route.params.tipKey]); - const dimensions = useSelector(state => state.dimensions); const overlayContext = React.useContext(OverlayContext); invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); const { onExitFinish } = overlayContext; @@ -210,7 +221,10 @@ const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; - if (extraLeftSpace < extraRightSpace) { + if (tooltipLocation === 'absolute') { + style.left = marginHorizontal; + style.right = marginHorizontal; + } else if (extraLeftSpace < extraRightSpace) { style.left = marginHorizontal; style.minWidth = width + 2 * extraLeftSpace; style.marginRight = 2 * marginHorizontal; @@ -252,6 +266,23 @@ (values/*: EntryAnimationsValues*/) => { 'worklet'; + if(tooltipLocation === 'absolute'){ + return { + animations: { + opacity: withTiming(1, { duration: animationDuration }), + transform: [ + { scale: withTiming(1, { duration: animationDuration }) }, + ], + }, + initialValues: { + opacity: 0, + transform: [ + { scale: 0 }, + ], + }, + }; + } + const initialX = (-values.targetWidth + initialCoordinates.width + @@ -289,6 +320,22 @@ (values/*: ExitAnimationsValues*/) => { 'worklet'; + if(tooltipLocation === 'absolute'){ + return { + animations: { + opacity: withTiming(0, { duration: animationDuration }), + transform: [ + { scale: withTiming(0, { duration: animationDuration }) }, + ], + }, + initialValues: { + opacity: 1, + transform: [ { scale: 1 }], + }, + callback: onExitFinish, + }; + } + const toValueX = (-values.currentWidth + initialCoordinates.width + @@ -361,9 +408,9 @@ }); }, [goBackOnce, navigation, route.params.tipKey]); - return ( - - + const button = React.useMemo( + () => + ButtonComponent ? ( + ) : undefined, + [buttonStyle, contentContainerStyle, props.navigation, route], + ); + + return ( + + + {button}