diff --git a/native/navigation/app-navigator.react.js b/native/navigation/app-navigator.react.js index 73d8469d2..064fc4f5f 100644 --- a/native/navigation/app-navigator.react.js +++ b/native/navigation/app-navigator.react.js @@ -1,163 +1,169 @@ // @flow import * as SplashScreen from 'expo-splash-screen'; import * as React from 'react'; import { PersistGate } from 'redux-persist/es/integration/react.js'; import ActionResultModal from './action-result-modal.react.js'; import { CommunityDrawerNavigator } from './community-drawer-navigator.react.js'; +import CommunityDrawerTip from './community-drawer-tip.react.js'; import { createOverlayNavigator } from './overlay-navigator.react.js'; import type { OverlayNavigationProp, OverlayNavigationHelpers, } from './overlay-navigator.react.js'; import type { RootNavigationProp } from './root-navigator.react.js'; +import { CommunityDrawerTipRouteName } from './route-names.js'; import { UserAvatarCameraModalRouteName, ThreadAvatarCameraModalRouteName, ImageModalRouteName, MultimediaMessageTooltipModalRouteName, ActionResultModalRouteName, TextMessageTooltipModalRouteName, ThreadSettingsMemberTooltipModalRouteName, UserRelationshipTooltipModalRouteName, RobotextMessageTooltipModalRouteName, ChatCameraModalRouteName, VideoPlaybackModalRouteName, CommunityDrawerNavigatorRouteName, type ScreenParamList, type OverlayParamList, TogglePinModalRouteName, } from './route-names.js'; import MultimediaMessageTooltipModal from '../chat/multimedia-message-tooltip-modal.react.js'; import RobotextMessageTooltipModal from '../chat/robotext-message-tooltip-modal.react.js'; import ThreadSettingsMemberTooltipModal from '../chat/settings/thread-settings-member-tooltip-modal.react.js'; import TextMessageTooltipModal from '../chat/text-message-tooltip-modal.react.js'; import TogglePinModal from '../chat/toggle-pin-modal.react.js'; import KeyboardStateContainer from '../keyboard/keyboard-state-container.react.js'; import ChatCameraModal from '../media/chat-camera-modal.react.js'; import ImageModal from '../media/image-modal.react.js'; import ThreadAvatarCameraModal from '../media/thread-avatar-camera-modal.react.js'; import UserAvatarCameraModal from '../media/user-avatar-camera-modal.react.js'; import VideoPlaybackModal from '../media/video-playback-modal.react.js'; import UserRelationshipTooltipModal from '../profile/user-relationship-tooltip-modal.react.js'; import PushHandler from '../push/push-handler.react.js'; import { getPersistor } from '../redux/persist.js'; import { useSelector } from '../redux/redux-utils.js'; import { RootContext } from '../root-context.js'; import { useLoadCommFonts } from '../themes/fonts.js'; import { waitForInteractions } from '../utils/timers.js'; let splashScreenHasHidden = false; export type AppNavigationProp< RouteName: $Keys = $Keys, > = OverlayNavigationProp; const App = createOverlayNavigator< ScreenParamList, OverlayParamList, OverlayNavigationHelpers, >(); type AppNavigatorProps = { navigation: RootNavigationProp<'App'>, ... }; function AppNavigator(props: AppNavigatorProps): React.Node { const { navigation } = props; const fontsLoaded = useLoadCommFonts(); const rootContext = React.useContext(RootContext); const storeLoadedFromLocalDatabase = useSelector(state => state.storeLoaded); const setNavStateInitialized = rootContext && rootContext.setNavStateInitialized; React.useEffect(() => { setNavStateInitialized && setNavStateInitialized(); }, [setNavStateInitialized]); const [localSplashScreenHasHidden, setLocalSplashScreenHasHidden] = React.useState(splashScreenHasHidden); React.useEffect(() => { if (localSplashScreenHasHidden || !fontsLoaded) { return; } splashScreenHasHidden = true; void (async () => { await waitForInteractions(); try { await SplashScreen.hideAsync(); } finally { setLocalSplashScreenHasHidden(true); } })(); }, [localSplashScreenHasHidden, fontsLoaded]); let pushHandler; if (localSplashScreenHasHidden) { pushHandler = ( ); } if (!storeLoadedFromLocalDatabase) { return null; } return ( + {pushHandler} ); } export default AppNavigator; diff --git a/native/navigation/community-drawer-button-icon.react.js b/native/navigation/community-drawer-button-icon.react.js new file mode 100644 index 000000000..e5fa29f2d --- /dev/null +++ b/native/navigation/community-drawer-button-icon.react.js @@ -0,0 +1,19 @@ +// @flow + +import Icon from '@expo/vector-icons/Feather.js'; +import * as React from 'react'; + +import { useStyles } from '../themes/colors.js'; + +// eslint-disable-next-line no-unused-vars +export default function CommunityDrawerButtonIcon(props: { ... }): React.Node { + const styles = useStyles(unboundStyles); + return ; +} + +const unboundStyles = { + drawerButton: { + color: 'listForegroundSecondaryLabel', + marginLeft: 16, + }, +}; diff --git a/native/navigation/community-drawer-button.react.js b/native/navigation/community-drawer-button.react.js index 8b2883655..3d0547bab 100644 --- a/native/navigation/community-drawer-button.react.js +++ b/native/navigation/community-drawer-button.react.js @@ -1,51 +1,46 @@ // @flow -import Icon from '@expo/vector-icons/Feather.js'; import invariant from 'invariant'; import * as React from 'react'; import { TouchableOpacity } from 'react-native'; +import type { AppNavigationProp } from './app-navigator.react.js'; +import CommunityDrawerButtonIcon from './community-drawer-button-icon.react.js'; import type { CommunityDrawerNavigationProp } from './community-drawer-navigator.react.js'; +import type { NUXTipRouteNames } from './route-names.js'; import type { TabNavigationProp } from './tab-navigator.react.js'; import { NUXTipsContext, nuxTip, } from '../components/nux-tips-context.react.js'; -import { useStyles } from '../themes/colors.js'; type Props = { +navigation: | TabNavigationProp<'Chat'> | TabNavigationProp<'Profile'> | TabNavigationProp<'Calendar'> - | CommunityDrawerNavigationProp<'TabNavigator'>, + | CommunityDrawerNavigationProp<'TabNavigator'> + | AppNavigationProp, + ... }; function CommunityDrawerButton(props: Props): React.Node { - const styles = useStyles(unboundStyles); const { navigation } = props; const tipsContext = React.useContext(NUXTipsContext); invariant(tipsContext, 'NUXTipsContext should be defined'); const { registerTipButton } = tipsContext; React.useEffect(() => { return () => { registerTipButton(nuxTip.COMMUNITY_DRAWER, null); }; }, [registerTipButton]); return ( - + ); } -const unboundStyles = { - drawerButton: { - color: 'listForegroundSecondaryLabel', - marginLeft: 16, - }, -}; - export default CommunityDrawerButton; diff --git a/native/navigation/community-drawer-tip.react.js b/native/navigation/community-drawer-tip.react.js new file mode 100644 index 000000000..ca1e6c8f1 --- /dev/null +++ b/native/navigation/community-drawer-tip.react.js @@ -0,0 +1,20 @@ +// @flow + +import * as React from 'react'; + +import CommunityDrawerButtonIcon from './community-drawer-button-icon.react.js'; +import { + type NUXTipsOverlayProps, + createNUXTipsOverlay, +} from '../tooltip/nux-tips-overlay.react.js'; + +const communityDrawerText = + 'You can use this view to explore the tree of channels ' + + 'inside a community. This shows you all of the channels you can see, ' + + 'including ones you haven’t joined.'; + +const CommunityDrawerTip: React.ComponentType< + NUXTipsOverlayProps<'CommunityDrawerTip'>, +> = createNUXTipsOverlay(CommunityDrawerButtonIcon, communityDrawerText); + +export default CommunityDrawerTip; diff --git a/native/tooltip/nux-tips-overlay.react.js b/native/tooltip/nux-tips-overlay.react.js index 72740ff20..090ffe9d1 100644 --- a/native/tooltip/nux-tips-overlay.react.js +++ b/native/tooltip/nux-tips-overlay.react.js @@ -1,429 +1,429 @@ // @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 { getNUXTipParams, NUXTipsContext, type NUXTip, } from '../components/nux-tips-context.react.js'; import PrimaryButton from '../components/primary-button.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 = { 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', padding: 20, }, 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: 20, marginBottom: 10, }, buttonContainer: { width: 100, alignSelf: 'flex-end', }, }; export type NUXTipsOverlayParams = { +tipKey: NUXTip, +tooltipLocation: 'above' | 'below', }; export type NUXTipsOverlayProps = { +navigation: AppNavigationProp, +route: NavigationRoute, }; const margin: number = 20; function opacityEnteringAnimation() { 'worklet'; return { animations: { opacity: withTiming(0.7, { duration: animationDuration }), }, initialValues: { opacity: 0, }, }; } 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 { initialCoordinates, verticalBounds } = React.useMemo(() => { const tipsProps = nuxTipContext?.getTipsProps(); invariant(tipsProps, 'tips props should be defined in nux tips overlay'); const { pageX, pageY, width, height } = tipsProps[route.params.tipKey]; return { initialCoordinates: { height, width, x: pageX, y: pageY }, verticalBounds: { height, y: pageY }, }; }, [nuxTipContext, route.params.tipKey]); const dimensions = useSelector(state => state.dimensions); 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 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) + margin; } else { style.bottom = dimensions.height - Math.max(y, verticalBounds.y) + margin; } 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; } 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, }; } else { return { alignSelf: 'flex-end', right: extraRightSpace + (4 / 10) * width, }; } }, [dimensions.width, initialCoordinates]); const opacityExitingAnimation = React.useCallback(() => { 'worklet'; return { animations: { opacity: withTiming(0, { duration: animationDuration }), }, initialValues: { opacity: 0.7, }, callback: onExitFinish, }; }, [onExitFinish]); // prettier-ignore const tipContainerEnteringAnimation = React.useCallback( (values/*: EntryAnimationsValues*/) => { 'worklet'; 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'; 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 }], }, }; }, [initialCoordinates.width, initialCoordinates.x, tooltipLocation], ); let triangleDown = null; let triangleUp = null; if (tooltipLocation === 'above') { triangleDown = ; } else if (tooltipLocation === 'below') { triangleUp = ; } const callbackParams = getNUXTipParams(route.params.tipKey); const onPressOk = React.useCallback(() => { const { nextTip, tooltipLocation: nextLocation, nextRouteName, } = callbackParams; goBackOnce(); if (!nextTip || !nextRouteName) { return; } navigation.navigate({ name: nextRouteName, params: { tipKey: nextTip, tooltipLocation: nextLocation, }, }); }, [callbackParams, goBackOnce, navigation]); return ( {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 };