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 @@ -1,27 +1,11 @@ // @flow import type { RouteProp } from '@react-navigation/core'; -import * as Haptics from 'expo-haptics'; import invariant from 'invariant'; import * as React from 'react'; -import { - View, - TouchableWithoutFeedback, - Platform, - Keyboard, -} from 'react-native'; +import { View, TouchableWithoutFeedback, Platform } from 'react-native'; import Animated from 'react-native-reanimated'; -import { - TooltipContextProvider, - TooltipContext, - type TooltipContextType, -} from './tooltip-context.react.js'; -import BaseTooltipItem, { - type TooltipItemBaseProps, -} from './tooltip-item.react.js'; -import { ChatContext, type ChatContextType } from '../chat/chat-context.js'; -import SWMansionIcon from '../components/swmansion-icon.react.js'; import type { AppNavigationProp } from '../navigation/app-navigator.react.js'; import { OverlayContext, @@ -31,9 +15,9 @@ import { type DimensionsInfo } from '../redux/dimensions-updater.react.js'; import { useSelector } from '../redux/redux-utils.js'; import { useStyles } from '../themes/colors.js'; -import { - type VerticalBounds, - type LayoutCoordinates, +import type { + LayoutCoordinates, + VerticalBounds, } from '../types/layout-types.js'; import type { LayoutEvent } from '../types/react-native.js'; import { @@ -62,42 +46,11 @@ flex: 1, overflow: 'hidden', }, - icon: { - color: 'modalForegroundLabel', - }, - itemContainer: { - alignItems: 'center', - flex: 1, - flexDirection: 'row', - justifyContent: 'center', - padding: 10, - }, - itemContainerFixed: { - flexDirection: 'column', - }, items: { backgroundColor: 'tooltipBackground', borderRadius: 5, overflow: 'hidden', }, - itemsFixed: { - flex: 1, - flexDirection: 'row', - }, - 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, - }, triangleUp: { borderBottomColor: 'tooltipBackground', borderBottomWidth: 10, @@ -116,14 +69,8 @@ export type TooltipParams = { ...CustomProps, - +presentedFrom: string, +initialCoordinates: LayoutCoordinates, +verticalBounds: VerticalBounds, - +tooltipLocation?: 'above' | 'below' | 'fixed', - +margin?: number, - +visibleEntryIDs?: $ReadOnlyArray, - +chatInputBarHeight?: number, - +hideTooltip?: boolean, }; export type TooltipRoute> = RouteProp< TooltipModalParamList, @@ -137,23 +84,18 @@ type ButtonProps = { ...Base, +progress: Node, - +isOpeningSidebar: boolean, }; type TooltipProps = { ...Base, // Redux state +dimensions: DimensionsInfo, +overlayContext: ?OverlayContextType, - +chatContext: ?ChatContextType, +styles: $ReadOnly, - +tooltipContext: TooltipContextType, +closeTooltip: () => mixed, - +boundTooltipItem: React.ComponentType, }; export type TooltipMenuProps = { ...BaseTooltipProps, - +tooltipItem: React.ComponentType, }; function createTooltip< @@ -174,6 +116,8 @@ tooltipHorizontal: Node; tooltipScale: Node; fixedTooltipVertical: Node; + tooltipHeight: number = 30; + margin: number = 20; constructor(props: TooltipProps) { super(props); @@ -224,44 +168,6 @@ ); } - componentDidMount() { - Haptics.impactAsync(); - } - - get tooltipHeight(): number { - if (this.props.route.params.tooltipLocation === 'fixed') { - return fixedTooltipHeight; - } else { - return tooltipHeight(this.props.tooltipContext.getNumVisibleEntries()); - } - } - - get tooltipLocation(): 'above' | 'below' | 'fixed' { - const { params } = this.props.route; - const { tooltipLocation } = params; - if (tooltipLocation) { - return tooltipLocation; - } - - const { initialCoordinates, verticalBounds } = params; - const { y, height } = initialCoordinates; - const contentTop = y; - const contentBottom = y + height; - const boundsTop = verticalBounds.y; - const boundsBottom = verticalBounds.y + verticalBounds.height; - - const { margin, tooltipHeight: curTooltipHeight } = this; - const fullHeight = curTooltipHeight + margin; - if ( - contentBottom + fullHeight > boundsBottom && - contentTop - fullHeight > boundsTop - ) { - return 'above'; - } - - return 'below'; - } - get opacityStyle(): AnimatedViewStyle { return { ...this.props.styles.backdrop, @@ -294,19 +200,11 @@ }; } - get margin(): number { - const customMargin = this.props.route.params.margin; - return customMargin !== null && customMargin !== undefined - ? customMargin - : 20; - } - get tooltipContainerStyle(): AnimatedViewStyle { const { dimensions, route } = this.props; - const { initialCoordinates, verticalBounds, chatInputBarHeight } = - route.params; + const { initialCoordinates, verticalBounds } = route.params; const { x, y, width, height } = initialCoordinates; - const { margin, tooltipLocation } = this; + const { margin } = this; const style: WritableAnimatedStyleObj = {}; style.position = 'absolute'; @@ -315,9 +213,7 @@ const transform: Array = []; - if (tooltipLocation !== 'fixed') { - transform.push({ translateX: this.tooltipHorizontal }); - } + transform.push({ translateX: this.tooltipHorizontal }); const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; @@ -329,36 +225,10 @@ style.minWidth = width + 2 * extraRightSpace; } - const inputBarHeight = chatInputBarHeight ?? 0; - - if (tooltipLocation === 'fixed') { - const padding = 8; - - style.minWidth = dimensions.width - 16; - style.left = 8; - style.right = 8; - style.bottom = - dimensions.height - - verticalBounds.height - - verticalBounds.y - - inputBarHeight + - padding; - transform.push({ translateY: this.fixedTooltipVertical }); - } else if (tooltipLocation === 'above') { - style.bottom = - dimensions.height - Math.max(y, verticalBounds.y) + margin; - transform.push({ translateY: this.tooltipVerticalAbove }); - } else { - style.top = - Math.min(y + height, verticalBounds.y + verticalBounds.height) + - margin; - transform.push({ translateY: this.tooltipVerticalBelow }); - } - - if (tooltipLocation !== 'fixed') { - transform.push({ scale: this.tooltipScale }); - } - + style.top = + Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin; + transform.push({ translateY: this.tooltipVerticalBelow }); + transform.push({ scale: this.tooltipScale }); style.transform = transform; return style; @@ -368,41 +238,11 @@ const { dimensions, overlayContext, - chatContext, styles, - tooltipContext, closeTooltip, - boundTooltipItem, ...navAndRouteForFlow } = this.props; - const tooltipContainerStyle: Array = [styles.itemContainer]; - - if (this.tooltipLocation === 'fixed') { - tooltipContainerStyle.push(styles.itemContainerFixed); - } - - const items: Array = [ - , - ]; - - if (this.props.tooltipContext.shouldShowMore()) { - items.push( - , - ); - } - let triangleStyle; const { route } = this.props; const { initialCoordinates } = route.params; @@ -421,50 +261,29 @@ }; } - let triangleDown = null; - let triangleUp = null; - const { tooltipLocation } = this; - if (tooltipLocation === 'above') { - triangleDown = ; - } else if (tooltipLocation === 'below') { - triangleUp = ; - } + const triangleUp = ; invariant(overlayContext, 'Tooltip should have OverlayContext'); const { position } = overlayContext; - const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID; const buttonProps: ButtonProps = { ...navAndRouteForFlow, progress: position, - isOpeningSidebar, }; - const itemsStyles = [styles.items, styles.itemsFixed]; - let tooltip = null; - if (this.tooltipLocation !== 'fixed') { - tooltip = ( - - {triangleUp} - {items} - {triangleDown} - - ); - } else if ( - this.tooltipLocation === 'fixed' && - !this.props.route.params.hideTooltip - ) { - tooltip = ( - - {items} - - ); - } + tooltip = ( + + {triangleUp} + + + + + ); return ( @@ -481,23 +300,6 @@ ); } - getTooltipItem(): React.ComponentType { - const BoundTooltipItem = this.props.boundTooltipItem; - return BoundTooltipItem; - } - - onPressMore = () => { - Keyboard.dismiss(); - this.props.tooltipContext.showActionSheet(); - }; - - renderMoreIcon = (): React.Node => { - const { styles } = this.props; - return ( - - ); - }; - onTooltipContainerLayout = (event: LayoutEvent) => { const { route, dimensions } = this.props; const { x, width } = route.params.initialCoordinates; @@ -515,91 +317,33 @@ } }; } + function ConnectedTooltip( props: $ReadOnly<{ ...BaseTooltipPropsType, - +hideTooltip: () => mixed, }>, ) { const dimensions = useSelector(state => state.dimensions); const overlayContext = React.useContext(OverlayContext); - const chatContext = React.useContext(ChatContext); - - const { params } = props.route; - const { tooltipLocation } = params; - const isFixed = tooltipLocation === 'fixed'; - - const { hideTooltip, ...rest } = props; const { goBackOnce } = props.navigation; - const closeTooltip = React.useCallback(() => { - goBackOnce(); - if (isFixed) { - hideTooltip(); - } - }, [isFixed, hideTooltip, goBackOnce]); const styles = useStyles(unboundStyles); - const boundTooltipItem = React.useCallback( - (innerProps: TooltipItemBaseProps) => { - const containerStyle = isFixed - ? [styles.itemContainer, styles.itemContainerFixed] - : styles.itemContainer; - return ( - - ); - }, - [isFixed, styles, closeTooltip], - ); - const tooltipContext = React.useContext(TooltipContext); - invariant(tooltipContext, 'TooltipContext should be set in Tooltip'); return ( ); } function MemoizedTooltip(props: BaseTooltipPropsType) { - const { visibleEntryIDs } = props.route.params; - const { goBackOnce } = props.navigation; - - const { setParams } = props.navigation; - const hideTooltip = React.useCallback(() => { - const paramsUpdate: any = { hideTooltip: true }; - setParams(paramsUpdate); - }, [setParams]); - - return ( - - - - ); + return ; } return React.memo(MemoizedTooltip); } -function tooltipHeight(numEntries: number): number { - // 10 (triangle) + 37 * numEntries (entries) + numEntries - 1 (padding) - return 9 + 38 * numEntries; -} - -const fixedTooltipHeight: number = 53; - -export { createTooltip, fixedTooltipHeight }; +export { createTooltip };