Page MenuHomePhabricator
Files F3001382

D9274.id31636.diff
No OneTemporary
Actions

D9274.id31636.diff
View Options

diff --git a/native/bottom-sheet/bottom-sheet.react.js b/native/bottom-sheet/bottom-sheet.react.js
--- a/native/bottom-sheet/bottom-sheet.react.js
+++ b/native/bottom-sheet/bottom-sheet.react.js
@@ -1,10 +1,12 @@
// @flow
import { BottomSheetModal } from '@gorhom/bottom-sheet';
+import invariant from 'invariant';
import * as React from 'react';
import BottomSheetBackdrop from './bottom-sheet-backdrop.react.js';
import BottomSheetHandle from './bottom-sheet-handle.react.js';
+import { BottomSheetContext } from './bottom-sheet-provider.react.js';
import { useStyles } from '../themes/colors.js';
type Props = {
@@ -20,7 +22,12 @@
const styles = useStyles(unboundStyles);
- const snapPoints = React.useMemo(() => ['25%', '50%'], []);
+ const bottomSheetContext = React.useContext(BottomSheetContext);
+ invariant(bottomSheetContext, 'bottomSheetContext should be set');
+
+ const { contentHeight } = bottomSheetContext;
+
+ const snapPoints = React.useMemo(() => [contentHeight], [contentHeight]);
return (
<BottomSheetModal
diff --git a/native/user-profile/user-profile-relationship-button.react.js b/native/user-profile/user-profile-relationship-button.react.js
--- a/native/user-profile/user-profile-relationship-button.react.js
+++ b/native/user-profile/user-profile-relationship-button.react.js
@@ -4,6 +4,7 @@
import { View, Text } from 'react-native';
import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt.js';
+import type { SetState } from 'lib/types/hook-types.js';
import { userRelationshipStatus } from 'lib/types/relationship-types.js';
import type { ThreadInfo } from 'lib/types/thread-types.js';
import type { UserInfo } from 'lib/types/user-types';
@@ -19,10 +20,15 @@
type Props = {
+threadInfo: ThreadInfo,
+pendingPersonalThreadUserInfo?: UserInfo,
+ +setUserProfileRelationshipButtonHeight: SetState<number>,
};
function UserProfileRelationshipButton(props: Props): React.Node {
- const { threadInfo, pendingPersonalThreadUserInfo } = props;
+ const {
+ threadInfo,
+ pendingPersonalThreadUserInfo,
+ setUserProfileRelationshipButtonHeight,
+ } = props;
const {
otherUserInfo,
@@ -33,6 +39,28 @@
pendingPersonalThreadUserInfo,
);
+ React.useLayoutEffect(() => {
+ if (otherUserInfo?.relationshipStatus === userRelationshipStatus.FRIEND) {
+ setUserProfileRelationshipButtonHeight(0);
+ } else if (
+ otherUserInfo?.relationshipStatus ===
+ userRelationshipStatus.REQUEST_RECEIVED
+ ) {
+ const incomingFriendRequestButtonsContainerHeight = 88;
+
+ setUserProfileRelationshipButtonHeight(
+ incomingFriendRequestButtonsContainerHeight,
+ );
+ } else {
+ const relationshipButtonHeight = 54;
+
+ setUserProfileRelationshipButtonHeight(relationshipButtonHeight);
+ }
+ }, [
+ otherUserInfo?.relationshipStatus,
+ setUserProfileRelationshipButtonHeight,
+ ]);
+
const styles = useStyles(unboundStyles);
const userProfileRelationshipButton = React.useMemo(() => {
diff --git a/native/user-profile/user-profile.react.js b/native/user-profile/user-profile.react.js
--- a/native/user-profile/user-profile.react.js
+++ b/native/user-profile/user-profile.react.js
@@ -1,8 +1,10 @@
// @flow
import Clipboard from '@react-native-clipboard/clipboard';
+import invariant from 'invariant';
import * as React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { relationshipBlockedInEitherDirection } from 'lib/shared/relationship-utils.js';
import { useUserProfileThreadInfo } from 'lib/shared/thread-utils.js';
@@ -13,6 +15,7 @@
import UserProfileMessageButton from './user-profile-message-button.react.js';
import UserProfileRelationshipButton from './user-profile-relationship-button.react.js';
import UserAvatar from '../avatars/user-avatar.react.js';
+import { BottomSheetContext } from '../bottom-sheet/bottom-sheet-provider.react.js';
import SingleLine from '../components/single-line.react.js';
import SWMansionIcon from '../components/swmansion-icon.react.js';
import { useStyles } from '../themes/colors.js';
@@ -30,6 +33,46 @@
const [usernameCopied, setUsernameCopied] = React.useState<boolean>(false);
+ const [
+ userProfileRelationshipButtonHeight,
+ setUserProfileRelationshipButtonHeight,
+ ] = React.useState<number>(0);
+
+ const bottomSheetContext = React.useContext(BottomSheetContext);
+ invariant(bottomSheetContext, 'bottomSheetContext should be set');
+
+ const { setContentHeight } = bottomSheetContext;
+
+ const insets = useSafeAreaInsets();
+
+ React.useLayoutEffect(() => {
+ const userInfoContainerHeight = 90;
+ const bottomPadding = 40;
+
+ let height = insets.bottom + userInfoContainerHeight + bottomPadding;
+
+ if (userProfileThreadInfo) {
+ const menuButtonHeight = 24;
+ height += menuButtonHeight;
+ }
+
+ if (
+ userProfileThreadInfo &&
+ !relationshipBlockedInEitherDirection(userInfo?.relationshipStatus)
+ ) {
+ const messageButtonHeight = 54;
+ height += messageButtonHeight + userProfileRelationshipButtonHeight;
+ }
+
+ setContentHeight(height);
+ }, [
+ insets.bottom,
+ setContentHeight,
+ userInfo?.relationshipStatus,
+ userProfileRelationshipButtonHeight,
+ userProfileThreadInfo,
+ ]);
+
const styles = useStyles(unboundStyles);
const onPressCopyUsername = React.useCallback(async () => {
@@ -100,6 +143,9 @@
<UserProfileRelationshipButton
threadInfo={threadInfo}
pendingPersonalThreadUserInfo={pendingPersonalThreadUserInfo}
+ setUserProfileRelationshipButtonHeight={
+ setUserProfileRelationshipButtonHeight
+ }
/>
);
}, [userInfo?.relationshipStatus, userProfileThreadInfo]);

File Metadata

Mime Type
text/plain
Expires
Sat, Oct 19, 4:21 AM (21 h, 55 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2321276
Default Alt Text
D9274.id31636.diff (5 KB)

Event Timeline