diff --git a/native/components/nux-tips-context.react.js b/native/components/nux-tips-context.react.js index 77ad4efad..92f998654 100644 --- a/native/components/nux-tips-context.react.js +++ b/native/components/nux-tips-context.react.js @@ -1,143 +1,137 @@ // @flow import * as React from 'react'; import { values } from 'lib/utils/objects.js'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import type { NUXTipRouteNames } from '../navigation/route-names.js'; import { CommunityDrawerTipRouteName, MutedTabTipRouteName, HomeTabTipRouteName, IntroTipRouteName, } from '../navigation/route-names.js'; const nuxTip = Object.freeze({ INTRO: 'intro', COMMUNITY_DRAWER: 'community_drawer', HOME: 'home', MUTED: 'muted', }); export type NUXTip = $Values; type NUXTipParams = { +nextTip: ?NUXTip, +tooltipLocation: 'below' | 'above' | 'absolute', - +nextRouteName: ?NUXTipRouteNames, + +routeName: NUXTipRouteNames, +exitingCallback?: ( navigation: AppNavigationProp, ) => void, }; -const firstNUXTipKey = 'firstTip'; -type NUXTipParamsKeys = NUXTip | 'firstTip'; +const firstNUXTipKey = nuxTip.INTRO; -const nuxTipParams: { +[NUXTipParamsKeys]: NUXTipParams } = { - [firstNUXTipKey]: { - nextTip: nuxTip.INTRO, - tooltipLocation: 'absolute', - nextRouteName: IntroTipRouteName, - }, +const nuxTipParams: { +[NUXTip]: NUXTipParams } = { [nuxTip.INTRO]: { nextTip: nuxTip.COMMUNITY_DRAWER, - tooltipLocation: 'below', - nextRouteName: CommunityDrawerTipRouteName, + tooltipLocation: 'absolute', + routeName: IntroTipRouteName, }, [nuxTip.COMMUNITY_DRAWER]: { nextTip: nuxTip.HOME, tooltipLocation: 'below', - nextRouteName: HomeTabTipRouteName, + routeName: CommunityDrawerTipRouteName, }, [nuxTip.HOME]: { nextTip: nuxTip.MUTED, tooltipLocation: 'below', - nextRouteName: MutedTabTipRouteName, + routeName: HomeTabTipRouteName, }, [nuxTip.MUTED]: { nextTip: undefined, - nextRouteName: undefined, + routeName: MutedTabTipRouteName, tooltipLocation: 'below', exitingCallback: navigation => navigation.goBack(), }, }; -function getNUXTipParams(currentTipKey: NUXTipParamsKeys): NUXTipParams { +function getNUXTipParams(currentTipKey: NUXTip): NUXTipParams { return nuxTipParams[currentTipKey]; } type TipProps = { +x: number, +y: number, +width: number, +height: number, +pageX: number, +pageY: number, }; export type NUXTipsContextType = { +registerTipButton: (type: NUXTip, tipProps: ?TipProps) => void, +tipsProps: ?{ +[type: NUXTip]: TipProps }, }; const NUXTipsContext: React.Context = React.createContext(); type Props = { +children: React.Node, }; function NUXTipsContextProvider(props: Props): React.Node { const { children } = props; const [tipsPropsState, setTipsPropsState] = React.useState<{ +[tip: NUXTip]: ?TipProps, }>(() => ({})); const registerTipButton = React.useCallback( (type: NUXTip, tipProps: ?TipProps) => { setTipsPropsState(currenttipsPropsState => { const newtipsPropsState = { ...currenttipsPropsState }; newtipsPropsState[type] = tipProps; return newtipsPropsState; }); }, [], ); const tipsProps = React.useMemo(() => { const result: { [tip: NUXTip]: TipProps } = {}; for (const type of values(nuxTip)) { - if (type === nuxTip.INTRO) { + if (nuxTipParams[type].tooltipLocation === 'absolute') { continue; } if (!tipsPropsState[type]) { return null; } result[type] = tipsPropsState[type]; } return result; }, [tipsPropsState]); const value = React.useMemo( () => ({ registerTipButton, tipsProps, }), [tipsProps, registerTipButton], ); return ( {children} ); } export { NUXTipsContext, NUXTipsContextProvider, nuxTip, getNUXTipParams, firstNUXTipKey, }; diff --git a/native/navigation/nux-tip-overlay-backdrop.react.js b/native/navigation/nux-tip-overlay-backdrop.react.js index b98da3193..23c073f7f 100644 --- a/native/navigation/nux-tip-overlay-backdrop.react.js +++ b/native/navigation/nux-tip-overlay-backdrop.react.js @@ -1,105 +1,102 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { withTiming } from 'react-native-reanimated'; import type { AppNavigationProp } from './app-navigator.react.js'; import { OverlayContext } from './overlay-context.js'; import type { NUXTipRouteNames, NavigationRoute } from './route-names'; import { firstNUXTipKey, getNUXTipParams, } from '../components/nux-tips-context.react.js'; import { useStyles } from '../themes/colors.js'; import { animationDuration } from '../tooltip/nux-tips-overlay.react.js'; import { AnimatedView } from '../types/styles.js'; type Props = { +navigation: AppNavigationProp<'NUXTipOverlayBackdrop'>, +route: NavigationRoute<'NUXTipOverlayBackdrop'>, }; function NUXTipOverlayBackdrop(props: Props): React.Node { const overlayContext = React.useContext(OverlayContext); invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); const { shouldRenderScreenContent } = overlayContext; return shouldRenderScreenContent ? ( ) : null; } function opacityEnteringAnimation() { 'worklet'; return { animations: { opacity: withTiming(0.7, { duration: animationDuration }), }, initialValues: { opacity: 0, }, }; } function NUXTipOverlayBackdropInner(props: Props): React.Node { const overlayContext = React.useContext(OverlayContext); invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); const { onExitFinish } = overlayContext; const styles = useStyles(unboundStyles); const opacityExitingAnimation = React.useCallback(() => { 'worklet'; return { animations: { opacity: withTiming(0, { duration: animationDuration }), }, initialValues: { opacity: 0.7, }, callback: onExitFinish, }; }, [onExitFinish]); - const { nextTip, tooltipLocation, nextRouteName } = - getNUXTipParams(firstNUXTipKey); - invariant(nextRouteName && nextTip, 'first nux tip should be defined'); + const { routeName } = getNUXTipParams(firstNUXTipKey); React.useEffect( () => props.navigation.navigate({ - name: nextRouteName, + name: routeName, params: { - tipKey: nextTip, - tooltipLocation, + tipKey: firstNUXTipKey, }, }), // We want this effect to run exactly once, when this component is mounted // eslint-disable-next-line react-hooks/exhaustive-deps [], ); return ( ); } const unboundStyles = { backdrop: { backgroundColor: 'black', bottom: 0, left: 0, position: 'absolute', right: 0, top: 0, }, }; export default NUXTipOverlayBackdrop; diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js index 4df0b19d9..eb8b13ea3 100644 --- a/native/tooltip/nux-tips-overlay.react.js +++ b/native/tooltip/nux-tips-overlay.react.js @@ -1,465 +1,459 @@ // @flow import invariant from 'invariant'; import * as React from 'react'; import { View, TouchableWithoutFeedback, Platform, Text } from 'react-native'; import Animated, { FadeOut, withTiming, // eslint-disable-next-line no-unused-vars type EntryAnimationsValues, // eslint-disable-next-line no-unused-vars type ExitAnimationsValues, } from 'react-native-reanimated'; import Button from '../components/button.react.js'; import { getNUXTipParams, NUXTipsContext, type NUXTip, } from '../components/nux-tips-context.react.js'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import { OverlayContext } from '../navigation/overlay-context.js'; import type { NavigationRoute, NUXTipRouteNames, } from '../navigation/route-names.js'; import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; import type { LayoutEvent } from '../types/react-native.js'; import { AnimatedView } from '../types/styles.js'; import type { WritableAnimatedStyleObj } from '../types/styles.js'; const { Value } = Animated; const animationDuration = 150; const unboundStyles = { container: { flex: 1, }, contentContainer: { flex: 1, overflow: 'hidden', }, items: { backgroundColor: 'tooltipBackground', borderRadius: 5, overflow: 'hidden', paddingHorizontal: 20, paddingTop: 20, paddingBottom: 18, }, 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, }, triangleDown: { borderBottomColor: 'transparent', borderBottomWidth: 0, borderLeftColor: 'transparent', borderLeftWidth: 10, borderRightColor: 'transparent', borderRightWidth: 10, borderStyle: 'solid', borderTopColor: 'tooltipBackground', borderTopWidth: 10, height: 10, top: Platform.OS === 'android' ? -1 : 0, width: 10, }, tipText: { color: 'panelForegroundLabel', fontSize: 18, marginBottom: 10, }, buttonContainer: { alignSelf: 'flex-end', }, okButtonText: { fontSize: 18, color: 'panelForegroundLabel', textAlign: 'center', paddingVertical: 10, paddingHorizontal: 20, }, okButton: { backgroundColor: 'purpleButton', borderRadius: 8, }, }; export type NUXTipsOverlayParams = { +tipKey: NUXTip, - +tooltipLocation: 'above' | 'below' | 'absolute', }; export type NUXTipsOverlayProps = { +navigation: AppNavigationProp, +route: NavigationRoute, }; const marginVertical: number = 20; const marginHorizontal: number = 10; function createNUXTipsOverlay( 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 tipProps = nuxTipContext?.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 }, }; }, [dimensions, nuxTipContext?.tipsProps, route.params.tipKey]); const overlayContext = React.useContext(OverlayContext); invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); const { onExitFinish } = overlayContext; const { goBackOnce } = navigation; const styles = useStyles(unboundStyles); const contentContainerStyle = React.useMemo(() => { const fullScreenHeight = dimensions.height; const top = verticalBounds.y; const bottom = fullScreenHeight - verticalBounds.y - verticalBounds.height; return { ...styles.contentContainer, marginTop: top, marginBottom: bottom, }; }, [ dimensions.height, styles.contentContainer, verticalBounds.height, verticalBounds.y, ]); 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 { tooltipLocation } = route.params; + const tipParams = getNUXTipParams(route.params.tipKey); + const { tooltipLocation } = tipParams; const baseTipContainerStyle = React.useMemo(() => { const { y, x, height, width } = initialCoordinates; const style: WritableAnimatedStyleObj = { position: 'absolute', alignItems: 'center', }; if (tooltipLocation === 'below') { style.top = Math.min(y + height, verticalBounds.y + verticalBounds.height) + marginVertical; } else { style.bottom = dimensions.height - Math.max(y, verticalBounds.y) + marginVertical; } const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; 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; } else { style.right = marginHorizontal; style.minWidth = width + 2 * extraRightSpace; style.marginLeft = 2 * marginHorizontal; } return style; }, [ dimensions.height, dimensions.width, initialCoordinates, tooltipLocation, verticalBounds.height, verticalBounds.y, ]); const triangleStyle = React.useMemo(() => { const { x, width } = initialCoordinates; const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; if (extraLeftSpace < extraRightSpace) { return { alignSelf: 'flex-start', left: extraLeftSpace + (4 / 10) * width - marginHorizontal, }; } else { return { alignSelf: 'flex-end', right: extraRightSpace + (4 / 10) * width - marginHorizontal, }; } }, [dimensions.width, initialCoordinates]); // prettier-ignore const tipContainerEnteringAnimation = React.useCallback( (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 + initialCoordinates.x) / 2; const initialY = tooltipLocation === 'below' ? -values.targetHeight / 2 : values.targetHeight / 2; return { animations: { opacity: withTiming(1, { duration: animationDuration }), transform: [ { translateX: withTiming(0, { duration: animationDuration }) }, { translateY: withTiming(0, { duration: animationDuration }) }, { scale: withTiming(1, { duration: animationDuration }) }, ], }, initialValues: { opacity: 0, transform: [ { translateX: initialX }, { translateY: initialY }, { scale: 0 }, ], }, }; }, [initialCoordinates.width, initialCoordinates.x, tooltipLocation], ); // prettier-ignore const tipContainerExitingAnimation = React.useCallback( (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 + initialCoordinates.x) / 2; const toValueY = tooltipLocation === 'below' ? -values.currentHeight / 2 : values.currentHeight / 2;; return { animations: { opacity: withTiming(0, { duration: animationDuration }), transform: [ { translateX: withTiming(toValueX, { duration: animationDuration, }), }, { translateY: withTiming(toValueY, { duration: animationDuration, }), }, { scale: withTiming(0, { duration: animationDuration }) }, ], }, initialValues: { opacity: 1, transform: [{ translateX: 0 }, { translateY: 0 }, { scale: 1 }], }, callback: onExitFinish, }; }, [initialCoordinates.width, initialCoordinates.x, onExitFinish, tooltipLocation], ); let triangleDown = null; let triangleUp = null; if (tooltipLocation === 'above') { triangleDown = ; } else if (tooltipLocation === 'below') { triangleUp = ; } const onPressOk = React.useCallback(() => { - const callbackParams = getNUXTipParams(route.params.tipKey); - - const { - nextTip, - tooltipLocation: nextLocation, - nextRouteName, - exitingCallback, - } = callbackParams; + const { nextTip, exitingCallback } = tipParams; goBackOnce(); if (exitingCallback) { exitingCallback?.(navigation); } - if (!nextTip || !nextRouteName) { + if (!nextTip) { return; } + const { routeName } = getNUXTipParams(nextTip); + navigation.navigate({ - name: nextRouteName, + name: routeName, params: { tipKey: nextTip, - tooltipLocation: nextLocation, }, }); - }, [goBackOnce, navigation, route.params.tipKey]); + }, [goBackOnce, navigation, tipParams]); const button = React.useMemo( () => ButtonComponent ? ( ) : undefined, [buttonStyle, contentContainerStyle, props.navigation, route], ); return ( {button} {triangleUp} {tipText} {triangleDown} ); } function NUXTipsOverlayWrapper(props: NUXTipsOverlayProps) { const overlayContext = React.useContext(OverlayContext); invariant(overlayContext, 'NUXTipsOverlay should have OverlayContext'); const { shouldRenderScreenContent } = overlayContext; return shouldRenderScreenContent ? : null; } return React.memo>(NUXTipsOverlayWrapper); } export { createNUXTipsOverlay, animationDuration };