diff --git a/native/chat/multimedia-message-tooltip-button.react.js b/native/chat/multimedia-message-tooltip-button.react.js index 4e7071d0c..1985f1b24 100644 --- a/native/chat/multimedia-message-tooltip-button.react.js +++ b/native/chat/multimedia-message-tooltip-button.react.js @@ -1,108 +1,167 @@ // @flow import * as React from 'react'; import Animated from 'react-native-reanimated'; +import { localIDPrefix } from 'lib/shared/message-utils'; +import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; +import type { SetState } from 'lib/types/hook-types'; + import type { AppNavigationProp } from '../navigation/app-navigator.react'; import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; import { TooltipInlineEngagement } from './inline-engagement.react'; import { InnerMultimediaMessage } from './inner-multimedia-message.react'; import { MessageHeader } from './message-header.react'; +import { + useSendReaction, + useReactionSelectionPopoverPosition, +} from './reaction-message-utils'; +import ReactionSelectionPopover from './reaction-selection-popover.react'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react'; import { useAnimatedMessageTooltipButton } from './utils'; /* eslint-disable import/no-named-as-default-member */ const { Node, Extrapolate, interpolateNode } = Animated; /* eslint-enable import/no-named-as-default-member */ function noop() {} type Props = { +navigation: AppNavigationProp<'MultimediaMessageTooltipModal'>, +route: TooltipRoute<'MultimediaMessageTooltipModal'>, +progress: Node, +isOpeningSidebar: boolean, + +setHideTooltip: SetState, }; function MultimediaMessageTooltipButton(props: Props): React.Node { + const { navigation, progress, isOpeningSidebar, setHideTooltip } = props; + const windowWidth = useSelector(state => state.dimensions.width); - const { progress } = props; const [ sidebarInputBarHeight, setSidebarInputBarHeight, ] = React.useState(null); const onInputBarMeasured = React.useCallback((height: number) => { setSidebarInputBarHeight(height); }, []); - const { item, verticalBounds, initialCoordinates } = props.route.params; + const { + item, + verticalBounds, + initialCoordinates, + margin, + } = props.route.params; + const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({ sourceMessage: item, initialCoordinates, messageListVerticalBounds: verticalBounds, progress, targetInputBarHeight: sidebarInputBarHeight, }); const headerStyle = React.useMemo(() => { const bottom = initialCoordinates.height; const opacity = interpolateNode(progress, { inputRange: [0, 0.05], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); return { opacity, position: 'absolute', left: -initialCoordinates.x, width: windowWidth, bottom, }; }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); - const { navigation, isOpeningSidebar } = props; - const inlineEngagement = React.useMemo(() => { if (!item.threadCreatedFromMessage) { return null; } return ( ); }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); + const { messageInfo, threadInfo, reactions } = item; + const nextLocalID = useSelector(state => state.nextLocalID); + const localID = `${localIDPrefix}${nextLocalID}`; + + const canCreateReactionFromMessage = useCanCreateReactionFromMessage( + threadInfo, + messageInfo, + ); + + const sendReaction = useSendReaction( + messageInfo.id, + localID, + threadInfo.id, + reactions, + ); + + const reactionSelectionPopoverPosition = useReactionSelectionPopoverPosition({ + initialCoordinates, + verticalBounds, + margin, + }); + + const reactionSelectionPopover = React.useMemo(() => { + if (!canCreateReactionFromMessage) { + return null; + } + + return ( + + ); + }, [ + canCreateReactionFromMessage, + reactionSelectionPopoverPosition, + sendReaction, + setHideTooltip, + ]); + return ( + {reactionSelectionPopover} {inlineEngagement} ); } const ConnectedMultimediaMessageTooltipButton: React.ComponentType = React.memo( MultimediaMessageTooltipButton, ); export default ConnectedMultimediaMessageTooltipButton; diff --git a/native/chat/reaction-selection-popover.react.js b/native/chat/reaction-selection-popover.react.js new file mode 100644 index 000000000..ff6324ad9 --- /dev/null +++ b/native/chat/reaction-selection-popover.react.js @@ -0,0 +1,90 @@ +// @flow + +import * as React from 'react'; +import { View, TouchableOpacity, Text } from 'react-native'; + +import type { SetState } from 'lib/types/hook-types'; + +import { useStyles } from '../themes/colors'; +import type { ViewStyle } from '../types/styles'; + +type ReactionSelectionPopoverProps = { + +setHideTooltip: SetState, + +reactionSelectionPopoverContainerStyle: ViewStyle, + +sendReaction: (reaction: string) => mixed, +}; + +function ReactionSelectionPopover( + props: ReactionSelectionPopoverProps, +): React.Node { + const { + setHideTooltip, + reactionSelectionPopoverContainerStyle, + sendReaction, + } = props; + + const styles = useStyles(unboundStyles); + + const containerStyle = React.useMemo( + () => [ + styles.reactionSelectionPopoverContainer, + reactionSelectionPopoverContainerStyle, + ], + [ + reactionSelectionPopoverContainerStyle, + styles.reactionSelectionPopoverContainer, + ], + ); + + const onPressDefaultEmoji = React.useCallback( + (emoji: string) => { + sendReaction(emoji); + setHideTooltip(true); + }, + [sendReaction, setHideTooltip], + ); + + const defaultEmojis = React.useMemo(() => { + const defaultEmojisData = ['❤️', '😆', '😮', '😠', '👍']; + + return defaultEmojisData.map(emoji => ( + onPressDefaultEmoji(emoji)}> + + {emoji} + + + )); + }, [ + onPressDefaultEmoji, + styles.reactionSelectionItemContainer, + styles.reactionSelectionItemEmoji, + ]); + + return {defaultEmojis}; +} + +const unboundStyles = { + reactionSelectionPopoverContainer: { + flexDirection: 'row', + alignItems: 'center', + backgroundColor: 'tooltipBackground', + padding: 8, + borderRadius: 8, + flex: 1, + }, + reactionSelectionItemContainer: { + backgroundColor: 'reactionSelectionPopoverItemBackground', + justifyContent: 'center', + alignItems: 'center', + padding: 8, + borderRadius: 20, + width: 40, + height: 40, + marginRight: 12, + }, + reactionSelectionItemEmoji: { + fontSize: 18, + }, +}; + +export default ReactionSelectionPopover; diff --git a/native/chat/robotext-message-tooltip-button.react.js b/native/chat/robotext-message-tooltip-button.react.js index 72b78e733..5dd89cad9 100644 --- a/native/chat/robotext-message-tooltip-button.react.js +++ b/native/chat/robotext-message-tooltip-button.react.js @@ -1,95 +1,154 @@ // @flow import * as React from 'react'; import Animated from 'react-native-reanimated'; +import { localIDPrefix } from 'lib/shared/message-utils'; +import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; +import type { SetState } from 'lib/types/hook-types'; + import type { AppNavigationProp } from '../navigation/app-navigator.react'; import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; import { TooltipInlineEngagement } from './inline-engagement.react'; import { InnerRobotextMessage } from './inner-robotext-message.react'; +import { + useSendReaction, + useReactionSelectionPopoverPosition, +} from './reaction-message-utils'; +import ReactionSelectionPopover from './reaction-selection-popover.react'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react'; import { Timestamp } from './timestamp.react'; import { useAnimatedMessageTooltipButton } from './utils'; /* eslint-disable import/no-named-as-default-member */ const { Node, interpolateNode, Extrapolate } = Animated; /* eslint-enable import/no-named-as-default-member */ type Props = { +navigation: AppNavigationProp<'RobotextMessageTooltipModal'>, +route: TooltipRoute<'RobotextMessageTooltipModal'>, +progress: Node, +isOpeningSidebar: boolean, + +setHideTooltip: SetState, }; function RobotextMessageTooltipButton(props: Props): React.Node { - const { progress } = props; + const { navigation, progress, isOpeningSidebar, setHideTooltip } = props; + const windowWidth = useSelector(state => state.dimensions.width); const [ sidebarInputBarHeight, setSidebarInputBarHeight, ] = React.useState(null); const onInputBarMeasured = React.useCallback((height: number) => { setSidebarInputBarHeight(height); }, []); - const { item, verticalBounds, initialCoordinates } = props.route.params; + const { + item, + verticalBounds, + initialCoordinates, + margin, + } = props.route.params; + const { style: messageContainerStyle } = useAnimatedMessageTooltipButton({ sourceMessage: item, initialCoordinates, messageListVerticalBounds: verticalBounds, progress, targetInputBarHeight: sidebarInputBarHeight, }); const headerStyle = React.useMemo(() => { const bottom = initialCoordinates.height; const opacity = interpolateNode(progress, { inputRange: [0, 0.05], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); return { opacity, position: 'absolute', left: -initialCoordinates.x, width: windowWidth, bottom, }; }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); - const { navigation, isOpeningSidebar } = props; - const inlineEngagement = React.useMemo(() => { if (!item.threadCreatedFromMessage) { return null; } return ( ); }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); + const { messageInfo, threadInfo, reactions } = item; + const nextLocalID = useSelector(state => state.nextLocalID); + const localID = `${localIDPrefix}${nextLocalID}`; + + const canCreateReactionFromMessage = useCanCreateReactionFromMessage( + threadInfo, + messageInfo, + ); + + const sendReaction = useSendReaction( + messageInfo.id, + localID, + threadInfo.id, + reactions, + ); + + const reactionSelectionPopoverPosition = useReactionSelectionPopoverPosition({ + initialCoordinates, + verticalBounds, + margin, + }); + + const reactionSelectionPopover = React.useMemo(() => { + if (!canCreateReactionFromMessage) { + return null; + } + + return ( + + ); + }, [ + canCreateReactionFromMessage, + reactionSelectionPopoverPosition, + sendReaction, + setHideTooltip, + ]); + return ( + {reactionSelectionPopover} {inlineEngagement} ); } export default RobotextMessageTooltipButton; diff --git a/native/chat/text-message-tooltip-button.react.js b/native/chat/text-message-tooltip-button.react.js index 3e91f24c4..4ade0dad5 100644 --- a/native/chat/text-message-tooltip-button.react.js +++ b/native/chat/text-message-tooltip-button.react.js @@ -1,119 +1,180 @@ // @flow import * as React from 'react'; import Animated from 'react-native-reanimated'; +import { localIDPrefix } from 'lib/shared/message-utils'; +import { useCanCreateReactionFromMessage } from 'lib/shared/reaction-utils'; +import type { SetState } from 'lib/types/hook-types'; + import type { AppNavigationProp } from '../navigation/app-navigator.react'; import type { TooltipRoute } from '../navigation/tooltip.react'; import { useSelector } from '../redux/redux-utils'; import { TooltipInlineEngagement } from './inline-engagement.react'; import { InnerTextMessage } from './inner-text-message.react'; import { MessageHeader } from './message-header.react'; import { MessageListContextProvider } from './message-list-types'; import { MessagePressResponderContext } from './message-press-responder-context'; +import { + useSendReaction, + useReactionSelectionPopoverPosition, +} from './reaction-message-utils'; +import ReactionSelectionPopover from './reaction-selection-popover.react'; import SidebarInputBarHeightMeasurer from './sidebar-input-bar-height-measurer.react'; import { useAnimatedMessageTooltipButton } from './utils'; /* eslint-disable import/no-named-as-default-member */ const { Node, interpolateNode, Extrapolate } = Animated; /* eslint-enable import/no-named-as-default-member */ type Props = { +navigation: AppNavigationProp<'TextMessageTooltipModal'>, +route: TooltipRoute<'TextMessageTooltipModal'>, +progress: Node, +isOpeningSidebar: boolean, + +setHideTooltip: SetState, }; function TextMessageTooltipButton(props: Props): React.Node { - const { progress } = props; + const { navigation, progress, isOpeningSidebar, setHideTooltip } = props; + const windowWidth = useSelector(state => state.dimensions.width); const [ sidebarInputBarHeight, setSidebarInputBarHeight, ] = React.useState(null); const onInputBarMeasured = React.useCallback((height: number) => { setSidebarInputBarHeight(height); }, []); - const { item, verticalBounds, initialCoordinates } = props.route.params; + const { + item, + verticalBounds, + initialCoordinates, + margin, + } = props.route.params; + const { style: messageContainerStyle, threadColorOverride, isThreadColorDarkOverride, } = useAnimatedMessageTooltipButton({ sourceMessage: item, initialCoordinates, messageListVerticalBounds: verticalBounds, progress, targetInputBarHeight: sidebarInputBarHeight, }); const headerStyle = React.useMemo(() => { const bottom = initialCoordinates.height; const opacity = interpolateNode(progress, { inputRange: [0, 0.05], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); return { opacity, position: 'absolute', left: -initialCoordinates.x, width: windowWidth, bottom, }; }, [initialCoordinates.height, initialCoordinates.x, progress, windowWidth]); const threadID = item.threadInfo.id; - const { navigation, isOpeningSidebar } = props; const messagePressResponderContext = React.useMemo( () => ({ onPressMessage: navigation.goBackOnce, }), [navigation.goBackOnce], ); const inlineEngagement = React.useMemo(() => { if (!item.threadCreatedFromMessage) { return null; } return ( ); }, [initialCoordinates, isOpeningSidebar, item, progress, windowWidth]); + + const { messageInfo, threadInfo, reactions } = item; + const nextLocalID = useSelector(state => state.nextLocalID); + const localID = `${localIDPrefix}${nextLocalID}`; + + const canCreateReactionFromMessage = useCanCreateReactionFromMessage( + threadInfo, + messageInfo, + ); + + const sendReaction = useSendReaction( + messageInfo.id, + localID, + threadInfo.id, + reactions, + ); + + const reactionSelectionPopoverPosition = useReactionSelectionPopoverPosition({ + initialCoordinates, + verticalBounds, + margin, + }); + + const reactionSelectionPopover = React.useMemo(() => { + if (!canCreateReactionFromMessage) { + return null; + } + + return ( + + ); + }, [ + canCreateReactionFromMessage, + reactionSelectionPopoverPosition, + sendReaction, + setHideTooltip, + ]); + return ( + {reactionSelectionPopover} {inlineEngagement} ); } export default TextMessageTooltipButton; diff --git a/native/navigation/tooltip.react.js b/native/navigation/tooltip.react.js index 0ca4b038e..e4f396ba1 100644 --- a/native/navigation/tooltip.react.js +++ b/native/navigation/tooltip.react.js @@ -1,885 +1,887 @@ // @flow import { useActionSheet, type ShowActionSheetWithOptions, } from '@expo/react-native-action-sheet'; import type { RouteProp } from '@react-navigation/native'; import * as Haptics from 'expo-haptics'; import invariant from 'invariant'; import * as React from 'react'; import { View, TouchableWithoutFeedback, Platform, TouchableOpacity, Keyboard, } from 'react-native'; import Animated, { SlideInDown, SlideOutDown, runOnJS, useSharedValue, type SharedValue, } from 'react-native-reanimated'; import { useDispatch } from 'react-redux'; import { type ServerCallState, serverCallStateSelector, } from 'lib/selectors/server-calls'; import { localIDPrefix } from 'lib/shared/message-utils'; import type { SetState } from 'lib/types/hook-types'; import type { Dispatch } from 'lib/types/redux-types'; import { createBoundServerCallsSelector, useDispatchActionPromise, type DispatchActionPromise, type ActionFunc, type BindServerCall, type DispatchFunctions, } from 'lib/utils/action-utils'; import { ChatContext, type ChatContextType } from '../chat/chat-context'; import CommIcon from '../components/comm-icon.react'; import { SingleLine } from '../components/single-line.react'; import SWMansionIcon from '../components/swmansion-icon.react'; import { type InputState, InputStateContext } from '../input/input-state'; import { type DimensionsInfo } from '../redux/dimensions-updater.react'; import { useSelector } from '../redux/redux-utils'; import { useStyles } from '../themes/colors'; import { type VerticalBounds, type LayoutCoordinates, } from '../types/layout-types'; import type { LayoutEvent } from '../types/react-native'; import { AnimatedView, type ViewStyle, type TextStyle } from '../types/styles'; import type { AppNavigationProp } from './app-navigator.react'; import { OverlayContext, type OverlayContextType } from './overlay-context'; import type { TooltipModalParamList } from './route-names'; /* eslint-disable import/no-named-as-default-member */ const { Value, Node, Extrapolate, add, multiply, interpolateNode } = Animated; /* eslint-enable import/no-named-as-default-member */ export type TooltipEntry> = { +id: string, +text: string, +onPress: ( route: TooltipRoute, dispatchFunctions: DispatchFunctions, bindServerCall: BindServerCall, inputState: ?InputState, navigation: AppNavigationProp, viewerID: ?string, chatContext: ?ChatContextType, reactionMessageLocalID: ?string, ) => mixed, }; type TooltipItemProps = { +spec: TooltipEntry, +onPress: (entry: TooltipEntry) => void, +containerStyle?: ViewStyle, +labelStyle?: TextStyle, +styles: typeof unboundStyles, }; type TooltipSpec = { +entries: $ReadOnlyArray>, +labelStyle?: ViewStyle, }; export type TooltipParams = { ...CustomProps, +presentedFrom: string, +initialCoordinates: LayoutCoordinates, +verticalBounds: VerticalBounds, +tooltipLocation?: 'above' | 'below' | 'fixed', +margin?: number, +visibleEntryIDs?: $ReadOnlyArray, +chatInputBarHeight?: number, }; export type TooltipRoute> = RouteProp< TooltipModalParamList, RouteName, >; export type BaseTooltipProps = { +navigation: AppNavigationProp, +route: TooltipRoute, }; type ButtonProps = { ...Base, +progress: Node, +isOpeningSidebar: boolean, + +setHideTooltip: SetState, }; type TooltipProps = { ...Base, // Redux state +dimensions: DimensionsInfo, +serverCallState: ServerCallState, +viewerID: ?string, +nextReactionMessageLocalID: number, // Redux dispatch functions +dispatch: Dispatch, +dispatchActionPromise: DispatchActionPromise, // withOverlayContext +overlayContext: ?OverlayContextType, // withInputState +inputState: ?InputState, +chatContext: ?ChatContextType, +showActionSheetWithOptions: ShowActionSheetWithOptions, +actionSheetShown: SharedValue, +hideTooltip: boolean, +setHideTooltip: SetState, +showEmojiKeyboard: SharedValue, +exitAnimationWorklet: (finished: boolean) => void, +styles: typeof unboundStyles, }; function createTooltip< RouteName: $Keys, BaseTooltipPropsType: BaseTooltipProps = BaseTooltipProps, >( ButtonComponent: React.ComponentType>, tooltipSpec: TooltipSpec, ): React.ComponentType { class TooltipItem extends React.PureComponent> { render() { let icon; const { styles } = this.props; if (this.props.spec.id === 'copy') { icon = ; } else if (this.props.spec.id === 'reply') { icon = ; } else if (this.props.spec.id === 'report') { icon = ( ); } else if (this.props.spec.id === 'sidebar') { icon = ( ); } else if (this.props.spec.id === 'more') { icon = ( ); } return ( {icon} {this.props.spec.text} ); } onPress = () => { this.props.onPress(this.props.spec); }; } class Tooltip extends React.PureComponent< TooltipProps, > { backdropOpacity: Node; tooltipContainerOpacity: Node; tooltipVerticalAbove: Node; tooltipVerticalBelow: Node; tooltipHorizontalOffset: Value = new Value(0); tooltipHorizontal: Node; tooltipScale: Node; constructor(props: TooltipProps) { super(props); const { overlayContext } = props; invariant(overlayContext, 'Tooltip should have OverlayContext'); const { position } = overlayContext; this.backdropOpacity = interpolateNode(position, { inputRange: [0, 1], outputRange: [0, 0.7], extrapolate: Extrapolate.CLAMP, }); this.tooltipContainerOpacity = interpolateNode(position, { inputRange: [0, 0.1], outputRange: [0, 1], extrapolate: Extrapolate.CLAMP, }); const { margin } = this; this.tooltipVerticalAbove = interpolateNode(position, { inputRange: [0, 1], outputRange: [margin + this.tooltipHeight / 2, 0], extrapolate: Extrapolate.CLAMP, }); this.tooltipVerticalBelow = interpolateNode(position, { inputRange: [0, 1], outputRange: [-margin - this.tooltipHeight / 2, 0], extrapolate: Extrapolate.CLAMP, }); this.tooltipHorizontal = multiply( add(1, multiply(-1, position)), this.tooltipHorizontalOffset, ); this.tooltipScale = interpolateNode(position, { inputRange: [0, 0.2, 0.8, 1], outputRange: [0, 0, 1, 1], extrapolate: Extrapolate.CLAMP, }); } componentDidMount() { Haptics.impactAsync(); } get entries(): $ReadOnlyArray> { const { entries } = tooltipSpec; const { visibleEntryIDs } = this.props.route.params; if (!visibleEntryIDs) { return entries; } const visibleSet = new Set(visibleEntryIDs); const filteredEntries = entries.filter(entry => visibleSet.has(entry.id)); // this is a temporary change and will be reverted once we go from // message liking to message reactions return filteredEntries.map(entry => { if (entry.id !== 'react') { return entry; } const messageLikes = this.props.route.params.item?.reactions.get('👍'); let reactionEntryText = entry.text; if (messageLikes && messageLikes.viewerReacted) { reactionEntryText = 'Unlike'; } return { ...entry, text: reactionEntryText, }; }); } get tooltipHeight(): number { if (this.props.route.params.tooltipLocation === 'fixed') { return fixedTooltipHeight; } else { return tooltipHeight(this.entries.length); } } 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() { return { ...this.props.styles.backdrop, opacity: this.backdropOpacity, }; } get contentContainerStyle() { const { verticalBounds } = this.props.route.params; const fullScreenHeight = this.props.dimensions.height; const top = verticalBounds.y; const bottom = fullScreenHeight - verticalBounds.y - verticalBounds.height; return { ...this.props.styles.contentContainer, marginTop: top, marginBottom: bottom, }; } get buttonStyle() { const { params } = this.props.route; const { initialCoordinates, verticalBounds } = params; const { x, y, width, height } = initialCoordinates; return { width: Math.ceil(width), height: Math.ceil(height), marginTop: y - verticalBounds.y, marginLeft: x, }; } get margin() { const customMargin = this.props.route.params.margin; return customMargin !== null && customMargin !== undefined ? customMargin : 20; } get tooltipContainerStyle() { const { dimensions, route } = this.props; const { initialCoordinates, verticalBounds, chatInputBarHeight, } = route.params; const { x, y, width, height } = initialCoordinates; const { margin, tooltipLocation } = this; const style = {}; style.position = 'absolute'; (style.alignItems = 'center'), (style.opacity = this.tooltipContainerOpacity); if (tooltipLocation !== 'fixed') { style.transform = [{ translateX: this.tooltipHorizontal }]; } 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; } 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; } else if (tooltipLocation === 'above') { style.bottom = dimensions.height - Math.max(y, verticalBounds.y) + margin; style.transform.push({ translateY: this.tooltipVerticalAbove }); } else { style.top = Math.min(y + height, verticalBounds.y + verticalBounds.height) + margin; style.transform.push({ translateY: this.tooltipVerticalBelow }); } if (tooltipLocation !== 'fixed') { style.transform.push({ scale: this.tooltipScale }); } return style; } render() { const { dimensions, serverCallState, viewerID, nextReactionMessageLocalID, dispatch, dispatchActionPromise, overlayContext, inputState, chatContext, showActionSheetWithOptions, actionSheetShown, hideTooltip, setHideTooltip, showEmojiKeyboard, exitAnimationWorklet, styles, ...navAndRouteForFlow } = this.props; const tooltipContainerStyle = [styles.itemContainer]; if (this.tooltipLocation === 'fixed') { tooltipContainerStyle.push(styles.itemContainerFixed); } const { entries } = this; const items = entries.map((entry, index) => { let style; if (this.tooltipLocation === 'fixed') { style = index !== entries.length - 1 ? styles.itemMarginFixed : null; } else { style = index !== entries.length - 1 ? styles.itemMargin : null; } return ( ); }); if (this.tooltipLocation === 'fixed' && entries.length > 3) { items.splice(3); const moreSpec = { id: 'more', text: 'More', onPress: this.onPressMore, }; const moreTooltipItem = ( ); items.push(moreTooltipItem); } 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, }; } let triangleDown = null; let triangleUp = null; const { tooltipLocation } = this; if (tooltipLocation === 'above') { triangleDown = ; } else if (tooltipLocation === 'below') { triangleUp = ; } invariant(overlayContext, 'Tooltip should have OverlayContext'); const { position } = overlayContext; const isOpeningSidebar = !!chatContext?.currentTransitionSidebarSourceID; const buttonProps: ButtonProps = { ...navAndRouteForFlow, progress: position, isOpeningSidebar, + setHideTooltip, }; const itemsStyles = [styles.items, styles.itemsFixed]; const animationDelay = Platform.OS === 'ios' ? 200 : 500; const enterAnimation = SlideInDown.delay(animationDelay); const exitAnimation = SlideOutDown.withCallback(exitAnimationWorklet); let tooltip = null; if (this.tooltipLocation !== 'fixed') { tooltip = ( {triangleUp} {items} {triangleDown} ); } else if ( this.tooltipLocation === 'fixed' && !hideTooltip && !showEmojiKeyboard.value ) { tooltip = ( {items} ); } return ( {tooltip} ); } onPressBackdrop = () => { if (this.tooltipLocation !== 'fixed') { this.props.navigation.goBackOnce(); } else { this.props.setHideTooltip(true); } }; onPressEntry = (entry: TooltipEntry) => { if ( this.tooltipLocation !== 'fixed' || this.props.actionSheetShown.value ) { this.props.navigation.goBackOnce(); } else { this.props.setHideTooltip(true); } let reactionMessageLocalID; if (entry.id === 'react') { reactionMessageLocalID = `${localIDPrefix}${this.props.nextReactionMessageLocalID}`; } const dispatchFunctions = { dispatch: this.props.dispatch, dispatchActionPromise: this.props.dispatchActionPromise, }; entry.onPress( this.props.route, dispatchFunctions, this.bindServerCall, this.props.inputState, this.props.navigation, this.props.viewerID, this.props.chatContext, reactionMessageLocalID, ); }; onPressMore = () => { Keyboard.dismiss(); this.props.actionSheetShown.value = true; this.props.setHideTooltip(true); const { entries } = this; const options = entries.map(entry => entry.text); const { destructiveButtonIndex, cancelButtonIndex, } = this.getPlatformSpecificButtonIndices(options); // We're reversing options to populate the action sheet from bottom to // top instead of the default (top to bottom) ordering. options.reverse(); const containerStyle = { paddingBottom: 24, }; const { styles } = this.props; const icons = [ , , , , ]; const onPressAction = (selectedIndex?: number) => { if (selectedIndex === cancelButtonIndex) { this.props.navigation.goBackOnce(); return; } const index = entries.length - (selectedIndex ?? 0); const entry = entries[Platform.OS === 'ios' ? index : index - 1]; this.onPressEntry(entry); }; this.props.showActionSheetWithOptions( { options, cancelButtonIndex, destructiveButtonIndex, containerStyle, icons, }, onPressAction, ); }; getPlatformSpecificButtonIndices = (options: Array) => { let destructiveButtonIndex; if (Platform.OS === 'ios') { const reportIndex = options.findIndex(option => option === 'Report'); destructiveButtonIndex = reportIndex !== -1 ? options.length - reportIndex : undefined; } const cancelButtonIndex = Platform.OS === 'ios' ? 0 : -1; // The "Cancel" action is iOS-specific if (Platform.OS === 'ios') { options.push('Cancel'); } return { destructiveButtonIndex, cancelButtonIndex }; }; bindServerCall = (serverCall: ActionFunc): F => { const { cookie, urlPrefix, sessionID, currentUserInfo, connectionStatus, } = this.props.serverCallState; return createBoundServerCallsSelector(serverCall)({ dispatch: this.props.dispatch, cookie, urlPrefix, sessionID, currentUserInfo, connectionStatus, }); }; onTooltipContainerLayout = (event: LayoutEvent) => { const { route, dimensions } = this.props; const { x, width } = route.params.initialCoordinates; const extraLeftSpace = x; const extraRightSpace = dimensions.width - width - x; const actualWidth = event.nativeEvent.layout.width; if (extraLeftSpace < extraRightSpace) { const minWidth = width + 2 * extraLeftSpace; this.tooltipHorizontalOffset.setValue((minWidth - actualWidth) / 2); } else { const minWidth = width + 2 * extraRightSpace; this.tooltipHorizontalOffset.setValue((actualWidth - minWidth) / 2); } }; } return React.memo(function ConnectedTooltip( props: BaseTooltipPropsType, ) { const { showActionSheetWithOptions } = useActionSheet(); const dimensions = useSelector(state => state.dimensions); const serverCallState = useSelector(serverCallStateSelector); const viewerID = useSelector( state => state.currentUserInfo && state.currentUserInfo.id, ); const nextReactionMessageLocalID = useSelector(state => state.nextLocalID); const dispatch = useDispatch(); const dispatchActionPromise = useDispatchActionPromise(); const overlayContext = React.useContext(OverlayContext); const inputState = React.useContext(InputStateContext); const chatContext = React.useContext(ChatContext); const actionSheetShown = useSharedValue(false); const [hideTooltip, setHideTooltip] = React.useState(false); const showEmojiKeyboard = useSharedValue(false); const goBackCallback = React.useCallback(() => { if (!actionSheetShown.value && !showEmojiKeyboard.value) { props.navigation.goBackOnce(); } }, [actionSheetShown.value, props.navigation, showEmojiKeyboard.value]); const exitAnimationWorklet = React.useCallback( finished => { 'worklet'; if (finished) { runOnJS(goBackCallback)(); } }, [goBackCallback], ); const styles = useStyles(unboundStyles); return ( ); }); } const unboundStyles = { backdrop: { backgroundColor: 'black', bottom: 0, left: 0, position: 'absolute', right: 0, top: 0, }, bottomSheetIcon: { color: '#000000', }, container: { flex: 1, }, contentContainer: { flex: 1, overflow: 'hidden', }, icon: { color: 'modalForegroundLabel', }, itemContainer: { alignItems: 'center', flex: 1, flexDirection: 'row', justifyContent: 'center', padding: 10, }, itemContainerFixed: { flexDirection: 'column', }, itemMargin: { borderBottomColor: '#404040', borderBottomWidth: 1, }, itemMarginFixed: { borderRightColor: 'panelForegroundBorder', borderRightWidth: 1, }, items: { backgroundColor: 'tooltipBackground', borderRadius: 5, overflow: 'hidden', }, itemsFixed: { flex: 1, flexDirection: 'row', }, label: { color: 'modalForegroundLabel', fontSize: 14, lineHeight: 17, textAlign: 'center', }, 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, borderLeftColor: 'transparent', borderLeftWidth: 10, borderRightColor: 'transparent', borderRightWidth: 10, borderStyle: 'solid', borderTopColor: 'transparent', borderTopWidth: 0, bottom: Platform.OS === 'android' ? -1 : 0, height: 10, width: 10, }, }; function tooltipHeight(numEntries: number): number { // 10 (triangle) + 37 * numEntries (entries) + numEntries - 1 (padding) return 9 + 38 * numEntries; } const fixedTooltipHeight: number = 53; export { createTooltip, fixedTooltipHeight }; diff --git a/native/themes/colors.js b/native/themes/colors.js index c9ed7613b..c625fecf7 100644 --- a/native/themes/colors.js +++ b/native/themes/colors.js @@ -1,312 +1,314 @@ // @flow import * as React from 'react'; import { StyleSheet } from 'react-native'; import { createSelector } from 'reselect'; import { selectBackgroundIsDark } from '../navigation/nav-selectors'; import { NavContext } from '../navigation/navigation-context'; import { useSelector } from '../redux/redux-utils'; import type { AppState } from '../redux/state-types'; import type { GlobalTheme } from '../types/themes'; const light = Object.freeze({ blockQuoteBackground: '#E0E0E0', blockQuoteBorder: '#CCCCCC', codeBackground: '#E0E0E0', disabledButton: '#E0E0E0', disconnectedBarBackground: '#F5F5F5', editButton: '#A4A4A2', floatingButtonBackground: '#999999', floatingButtonLabel: '#EBEBEB', headerChevron: '#0A0A0A', inlineEngagementBackground: '#E0E0E0', inlineEngagementLabel: '#0A0A0A', link: '#7E57C2', listBackground: '#FFFFFF', listBackgroundLabel: '#0A0A0A', listBackgroundSecondaryLabel: '#444444', listBackgroundTernaryLabel: '#999999', listChatBubble: '#F1F0F5', listForegroundLabel: '#0A0A0A', listForegroundSecondaryLabel: '#333333', listForegroundTertiaryLabel: '#666666', listInputBackground: '#F5F5F5', listInputBar: '#E2E2E2', listInputButton: '#8E8D92', listIosHighlightUnderlay: '#DDDDDDDD', listSearchBackground: '#F5F5F5', listSearchIcon: '#8E8D92', listSeparatorLabel: '#666666', modalBackground: '#EBEBEB', modalBackgroundLabel: '#333333', modalBackgroundSecondaryLabel: '#AAAAAA', modalButton: '#BBBBBB', modalButtonLabel: '#0A0A0A', modalContrastBackground: '#0A0A0A', modalContrastForegroundLabel: '#FFFFFF', modalContrastOpacity: 0.7, modalForeground: '#FFFFFF', modalForegroundBorder: '#CCCCCC', modalForegroundLabel: '#0A0A0A', modalForegroundSecondaryLabel: '#888888', modalForegroundTertiaryLabel: '#AAAAAA', modalIosHighlightUnderlay: '#CCCCCCDD', modalSubtext: '#CCCCCC', modalSubtextLabel: '#666666', navigationCard: '#FFFFFF', navigationChevron: '#CCCCCC', panelBackground: '#F5F5F5', panelBackgroundLabel: '#888888', panelForeground: '#FFFFFF', panelForegroundBorder: '#CCCCCC', panelForegroundLabel: '#0A0A0A', panelForegroundSecondaryLabel: '#333333', panelForegroundTertiaryLabel: '#888888', panelIosHighlightUnderlay: '#EBEBEBDD', panelSecondaryForeground: '#F5F5F5', panelSecondaryForegroundBorder: '#CCCCCC', purpleLink: '#7E57C2', purpleButton: '#7E57C2', + reactionSelectionPopoverItemBackground: '#404040', redText: '#F53100', spoiler: '#33332C', tabBarAccent: '#7E57C2', tabBarBackground: '#F5F5F5', tabBarActiveTintColor: '#7E57C2', vibrantGreenButton: '#00C853', vibrantRedButton: '#F53100', tooltipBackground: '#E0E0E0', logInSpacer: '#FFFFFF33', logInText: '#FFFFFF', siweButton: '#FFFFFF', siweButtonText: '#1F1F1F', drawerExpandButton: '#808080', drawerExpandButtonDisabled: '#CCCCCC', drawerItemLabelLevel0: '#0A0A0A', drawerItemLabelLevel1: '#0A0A0A', drawerItemLabelLevel2: '#1F1F1F', drawerOpenCommunityBackground: '#F5F5F5', drawerBackground: '#FFFFFF', subthreadsModalClose: '#808080', subthreadsModalBackground: '#EBEBEB', subthreadsModalSearch: '#00000008', }); export type Colors = $Exact; const dark: Colors = Object.freeze({ blockQuoteBackground: '#A9A9A9', blockQuoteBorder: '#808080', codeBackground: '#0A0A0A', disabledButton: '#404040', disconnectedBarBackground: '#1F1F1F', editButton: '#666666', floatingButtonBackground: '#666666', floatingButtonLabel: '#FFFFFF', headerChevron: '#FFFFFF', inlineEngagementBackground: '#666666', inlineEngagementLabel: '#FFFFFF', link: '#AE94DB', listBackground: '#0A0A0A', listBackgroundLabel: '#CCCCCC', listBackgroundSecondaryLabel: '#BBBBBB', listBackgroundTernaryLabel: '#808080', listChatBubble: '#26252A', listForegroundLabel: '#FFFFFF', listForegroundSecondaryLabel: '#CCCCCC', listForegroundTertiaryLabel: '#808080', listInputBackground: '#1F1F1F', listInputBar: '#666666', listInputButton: '#CCCCCC', listIosHighlightUnderlay: '#BBBBBB88', listSearchBackground: '#1F1F1F', listSearchIcon: '#CCCCCC', listSeparatorLabel: '#EBEBEB', modalBackground: '#0A0A0A', modalBackgroundLabel: '#CCCCCC', modalBackgroundSecondaryLabel: '#666666', modalButton: '#666666', modalButtonLabel: '#FFFFFF', modalContrastBackground: '#FFFFFF', modalContrastForegroundLabel: '#0A0A0A', modalContrastOpacity: 0.85, modalForeground: '#1F1F1F', modalForegroundBorder: '#1F1F1F', modalForegroundLabel: '#FFFFFF', modalForegroundSecondaryLabel: '#AAAAAA', modalForegroundTertiaryLabel: '#666666', modalIosHighlightUnderlay: '#AAAAAA88', modalSubtext: '#404040', modalSubtextLabel: '#AAAAAA', navigationCard: '#2A2A2A', navigationChevron: '#666666', panelBackground: '#0A0A0A', panelBackgroundLabel: '#CCCCCC', panelForeground: '#1F1F1F', panelForegroundBorder: '#2C2C2E', panelForegroundLabel: '#FFFFFF', panelForegroundSecondaryLabel: '#CCCCCC', panelForegroundTertiaryLabel: '#AAAAAA', panelIosHighlightUnderlay: '#313035', panelSecondaryForeground: '#333333', panelSecondaryForegroundBorder: '#666666', purpleLink: '#AE94DB', purpleButton: '#7E57C2', + reactionSelectionPopoverItemBackground: '#404040', redText: '#F53100', spoiler: '#33332C', tabBarAccent: '#AE94DB', tabBarBackground: '#0A0A0A', tabBarActiveTintColor: '#AE94DB', vibrantGreenButton: '#00C853', vibrantRedButton: '#F53100', tooltipBackground: '#1F1F1F', logInSpacer: '#FFFFFF33', logInText: '#FFFFFF', siweButton: '#FFFFFF', siweButtonText: '#1F1F1F', drawerExpandButton: '#808080', drawerExpandButtonDisabled: '#404040', drawerItemLabelLevel0: '#CCCCCC', drawerItemLabelLevel1: '#CCCCCC', drawerItemLabelLevel2: '#F5F5F5', drawerOpenCommunityBackground: '#191919', drawerBackground: '#1F1F1F', subthreadsModalClose: '#808080', subthreadsModalBackground: '#1F1F1F', subthreadsModalSearch: '#FFFFFF04', }); const colors = { light, dark }; const colorsSelector: (state: AppState) => Colors = createSelector( (state: AppState) => state.globalThemeInfo.activeTheme, (theme: ?GlobalTheme) => { const explicitTheme = theme ? theme : 'light'; return colors[explicitTheme]; }, ); const magicStrings = new Set(); for (const theme in colors) { for (const magicString in colors[theme]) { magicStrings.add(magicString); } } type Styles = { [name: string]: { [field: string]: mixed } }; type ReplaceField = (input: any) => any; export type StyleSheetOf = $ObjMap; function stylesFromColors( obj: IS, themeColors: Colors, ): StyleSheetOf { const result = {}; for (const key in obj) { const style = obj[key]; const filledInStyle = { ...style }; for (const styleKey in style) { const styleValue = style[styleKey]; if (typeof styleValue !== 'string') { continue; } if (magicStrings.has(styleValue)) { const mapped = themeColors[styleValue]; if (mapped) { filledInStyle[styleKey] = mapped; } } } result[key] = filledInStyle; } return StyleSheet.create(result); } function styleSelector( obj: IS, ): (state: AppState) => StyleSheetOf { return createSelector(colorsSelector, (themeColors: Colors) => stylesFromColors(obj, themeColors), ); } function useStyles(obj: IS): StyleSheetOf { const ourColors = useColors(); return React.useMemo(() => stylesFromColors(obj, ourColors), [ obj, ourColors, ]); } function useOverlayStyles(obj: IS): StyleSheetOf { const navContext = React.useContext(NavContext); const navigationState = navContext && navContext.state; const theme = useSelector( (state: AppState) => state.globalThemeInfo.activeTheme, ); const backgroundIsDark = React.useMemo( () => selectBackgroundIsDark(navigationState, theme), [navigationState, theme], ); const syntheticTheme = backgroundIsDark ? 'dark' : 'light'; return React.useMemo(() => stylesFromColors(obj, colors[syntheticTheme]), [ obj, syntheticTheme, ]); } function useColors(): Colors { return useSelector(colorsSelector); } function getStylesForTheme( obj: IS, theme: GlobalTheme, ): StyleSheetOf { return stylesFromColors(obj, colors[theme]); } export type IndicatorStyle = 'white' | 'black'; function useIndicatorStyle(): IndicatorStyle { const theme = useSelector( (state: AppState) => state.globalThemeInfo.activeTheme, ); return theme && theme === 'dark' ? 'white' : 'black'; } const indicatorStyleSelector: ( state: AppState, ) => IndicatorStyle = createSelector( (state: AppState) => state.globalThemeInfo.activeTheme, (theme: ?GlobalTheme) => { return theme && theme === 'dark' ? 'white' : 'black'; }, ); export type KeyboardAppearance = 'default' | 'light' | 'dark'; const keyboardAppearanceSelector: ( state: AppState, ) => KeyboardAppearance = createSelector( (state: AppState) => state.globalThemeInfo.activeTheme, (theme: ?GlobalTheme) => { return theme && theme === 'dark' ? 'dark' : 'light'; }, ); function useKeyboardAppearance(): KeyboardAppearance { return useSelector(keyboardAppearanceSelector); } export { colors, colorsSelector, styleSelector, useStyles, useOverlayStyles, useColors, getStylesForTheme, useIndicatorStyle, indicatorStyleSelector, useKeyboardAppearance, };