[native] fix viewer user profile bototm sheet snap point
ClosedPublic
Actions

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
import { Text } from 'react-native';		import { Text } from 'react-native';

import { oldValidUsernameRegexString } from 'lib/shared/account-utils.js';		import { oldValidUsernameRegexString } from 'lib/shared/account-utils.js';
import {		import {
getNewTextAndSelection,		getNewTextAndSelection,
encodeChatMentionText,		encodeChatMentionText,
type Selection,		type Selection,
type TypeaheadTooltipActionItem,		type TypeaheadTooltipActionItem,
type MentionTypeaheadSuggestionItem,		type MentionTypeaheadSuggestionItem,
} from 'lib/shared/mention-utils.js';		} from 'lib/shared/mention-utils.js';
		import { validChatNameRegexString } from 'lib/shared/thread-utils.js';
import { stringForUserExplicit } from 'lib/shared/user-utils.js';		import { stringForUserExplicit } from 'lib/shared/user-utils.js';

		import ThreadAvatar from '../avatars/thread-avatar.react.js';
import UserAvatar from '../avatars/user-avatar.react.js';		import UserAvatar from '../avatars/user-avatar.react.js';
import type { TypeaheadTooltipStyles } from '../chat/typeahead-tooltip.react.js';		import type { TypeaheadTooltipStyles } from '../chat/typeahead-tooltip.react.js';

// Native regex is a little bit different than web one as		// Native regex is a little bit different than web one as
// there are no named capturing groups yet on native.		// there are no named capturing groups yet on native.
const nativeMentionTypeaheadRegex: RegExp = new RegExp(		const nativeMentionTypeaheadRegex: RegExp = new RegExp(
`((^(.\|\n)*\\s+)\|^)@(${oldValidUsernameRegexString})?$`,		`((^(.\|\n)*\\s+)\|^)@(${oldValidUsernameRegexString}\|${validChatNameRegexString})?$`,
);		);

export type TypeaheadTooltipActionsParams<SuggestionType> = {		export type TypeaheadTooltipActionsParams<SuggestionType> = {
+suggestions: $ReadOnlyArray<SuggestionType>,		+suggestions: $ReadOnlyArray<SuggestionType>,
+textBeforeAtSymbol: string,		+textBeforeAtSymbol: string,
+text: string,		+text: string,
+textPrefix: string,		+textPrefix: string,
+focusAndUpdateTextAndSelection: (text: string, selection: Selection) => void,		+focusAndUpdateTextAndSelection: (text: string, selection: Selection) => void,
Show All 31 Lines	if (suggestion.type === 'user') {
});		});
},		},
actionButtonContent: {		actionButtonContent: {
type: 'user',		type: 'user',
userInfo,		userInfo,
},		},
});		});
} else if (suggestion.type === 'chat') {		} else if (suggestion.type === 'chat') {
const { chat } = suggestion;		const { threadInfo } = suggestion;
const mentionText = `@[[${chat.id}:${encodeChatMentionText(		const mentionText = `@[[${threadInfo.id}:${encodeChatMentionText(
chat.uiName,		threadInfo.uiName,
)}]]`;		)}]]`;
actions.push({		actions.push({
key: chat.id,		key: threadInfo.id,
execute: () => {		execute: () => {
const { newText, newSelectionStart } = getNewTextAndSelection(		const { newText, newSelectionStart } = getNewTextAndSelection(
textBeforeAtSymbol,		textBeforeAtSymbol,
text,		text,
textPrefix,		textPrefix,
mentionText,		mentionText,
);		);
focusAndUpdateTextAndSelection(newText, {		focusAndUpdateTextAndSelection(newText, {
start: newSelectionStart,		start: newSelectionStart,
end: newSelectionStart,		end: newSelectionStart,
});		});
},		},
actionButtonContent: {		actionButtonContent: {
type: 'chat',		type: 'chat',
chat,		threadInfo,
},		},
});		});
}		}
}		}
return actions;		return actions;
}		}

export type TypeaheadTooltipButtonRendererParams<SuggestionItemType> = {		export type TypeaheadTooltipButtonRendererParams<SuggestionItemType> = {
+item: TypeaheadTooltipActionItem<SuggestionItemType>,		+item: TypeaheadTooltipActionItem<SuggestionItemType>,
+styles: TypeaheadTooltipStyles,		+styles: TypeaheadTooltipStyles,
};		};
function mentionTypeaheadTooltipButtonRenderer({		function mentionTypeaheadTooltipButtonRenderer({
item,		item,
styles,		styles,
}: TypeaheadTooltipButtonRendererParams<MentionTypeaheadSuggestionItem>): React.Node {		}: TypeaheadTooltipButtonRendererParams<MentionTypeaheadSuggestionItem>): React.Node {
let avatarComponent = null;		let avatarComponent = null;
let typeaheadTooltipButtonText = null;		let typeaheadTooltipButtonText = null;
if (item.actionButtonContent.type === 'user') {		if (item.actionButtonContent.type === 'user') {
avatarComponent = (		avatarComponent = (
<UserAvatar size="small" userID={item.actionButtonContent.userInfo.id} />		<UserAvatar size="small" userID={item.actionButtonContent.userInfo.id} />
);		);
typeaheadTooltipButtonText = item.actionButtonContent.userInfo.username;		typeaheadTooltipButtonText = item.actionButtonContent.userInfo.username;
		} else if (item.actionButtonContent.type === 'chat') {
		typeaheadTooltipButtonText = item.actionButtonContent.threadInfo.uiName;
		avatarComponent = (
		<ThreadAvatar
		size="small"
		threadInfo={item.actionButtonContent.threadInfo}
		/>
		);
}		}
return (		return (
<>		<>
{avatarComponent}		{avatarComponent}
<Text style={styles.buttonLabel} numberOfLines={1}>		<Text style={styles.buttonLabel} numberOfLines={1}>
{typeaheadTooltipButtonText}		{typeaheadTooltipButtonText}
</Text>		</Text>
</>		</>
);		);
}		}

export {		export {
nativeMentionTypeaheadRegex,		nativeMentionTypeaheadRegex,
mentionTypeaheadTooltipActions,		mentionTypeaheadTooltipActions,
mentionTypeaheadTooltipButtonRenderer,		mentionTypeaheadTooltipButtonRenderer,
};		};

[native] fix viewer user profile bototm sheet snap pointClosedPublicActions

Details

Diff Detail

Event Timeline

Revision ContentsChangeset List

Diff 31900

native/user-profile/user-profile-relationship-button.react.js

[native] fix viewer user profile bototm sheet snap point
ClosedPublic
Actions

Revision Contents
Changeset List