Page MenuHomePhabricator
Differential D5765

[native] Normalize Android MarkdownLink behavior to match iOS
ClosedPublic
Actions

Authored by ashoat on Nov 29 2022, 8:11 PM.
Tags
None
Referenced Files
Unknown Object (File)
Wed, Apr 2, 4:21 AM
Unknown Object (File)
Tue, Apr 1, 3:47 PM
Unknown Object (File)
Mon, Mar 17, 3:57 AM
Unknown Object (File)
Mon, Mar 17, 3:57 AM
Unknown Object (File)
Mon, Mar 17, 3:57 AM
Unknown Object (File)
Mon, Mar 17, 3:52 AM
Unknown Object (File)
Feb 11 2025, 4:11 AM
Unknown Object (File)
Jan 29 2025, 12:41 AM
View All Files
Subscribers
tomek

Details

Reviewers
rohan
atul
ginsu
michal
Commits
rCOMM7988ebdc2edd: [native] Normalize Android MarkdownLink behavior to match iOS
Test Plan

I tested this on iOS and Android while pressing all over a message, before and after opening the modal. See attached video in previous diff

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Revision Contents
Changeset List

PathSize
native/
chat/
12 lines
markdown/
1 line
38 lines

Diff 18987

View Options

native/chat/text-message.react.js

// @flow // @flow
import data from '@emoji-mart/data'; import data from '@emoji-mart/data';
import Picker from '@emoji-mart/react'; import Picker from '@emoji-mart/react';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { import {
defaultAnonymousUserEmojiAvatar, defaultAnonymousUserEmojiAvatar,
getAvatarForUser, getAvatarForUser,
getDefaultAvatar, getDefaultAvatar,
} from 'lib/shared/avatar-utils.js'; } from 'lib/shared/avatar-utils.js';
import type { import type {
ClientAvatar, ClientAvatar,
ClientEmojiAvatar, ClientEmojiAvatar,
Show All 10 Lines
function EmojiAvatarSelectionModal(): React.Node { function EmojiAvatarSelectionModal(): React.Node {
const { popModal } = useModalContext(); const { popModal } = useModalContext();
const editUserAvatarContext = React.useContext(EditUserAvatarContext); const editUserAvatarContext = React.useContext(EditUserAvatarContext);
invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext; const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
const [errorMessage, setErrorMessage] = React.useState<?string>();
const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserInfo = useSelector(state => state.currentUserInfo);
const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo); const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
? getDefaultAvatar(currentUserInfo.username) ? getDefaultAvatar(currentUserInfo.username)
: defaultAnonymousUserEmojiAvatar; : defaultAnonymousUserEmojiAvatar;
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState( const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState(
Show All 13 Lines () => ({
type: 'emoji', type: 'emoji',
emoji: pendingAvatarEmoji, emoji: pendingAvatarEmoji,
color: pendingAvatarColor, color: pendingAvatarColor,
}), }),
[pendingAvatarColor, pendingAvatarEmoji], [pendingAvatarColor, pendingAvatarEmoji],
); );
const onEmojiSelect = React.useCallback(selection => { const onEmojiSelect = React.useCallback(selection => {
setErrorMessage();
setPendingAvatarEmoji(selection.native); setPendingAvatarEmoji(selection.native);
}, []); }, []);
const onSaveAvatar = React.useCallback( const onColorSelection = React.useCallback((hex: string) => {
() => setUserAvatar(pendingEmojiAvatar), setErrorMessage();
[pendingEmojiAvatar, setUserAvatar], setPendingAvatarColor(hex);
); }, []);
const onSaveAvatar = React.useCallback(async () => {
try {
await setUserAvatar(pendingEmojiAvatar);
} catch {
setErrorMessage('Avatar update failed. Please try again.');
}
}, [pendingEmojiAvatar, setUserAvatar]);
let saveButtonContent; let saveButtonContent;
if (userAvatarSaveInProgress) { if (userAvatarSaveInProgress) {
saveButtonContent = <LoadingIndicator status="loading" size="medium" />; saveButtonContent = <LoadingIndicator status="loading" size="medium" />;
} else if (errorMessage) {
saveButtonContent = (
<>
<SWMansionIcon icon="warning-circle" size={24} />
{errorMessage}
</>
);
} else { } else {
saveButtonContent = 'Save Avatar'; saveButtonContent = 'Save Avatar';
} }
return ( return (
<Modal name="Emoji avatar selection" size="large" onClose={popModal}> <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
<div className={css.modalBody}> <div className={css.modalBody}>
<div className={css.avatarContainer}> <div className={css.avatarContainer}>
<Avatar avatarInfo={pendingEmojiAvatar} size="profile" /> <Avatar avatarInfo={pendingEmojiAvatar} size="profile" />
</div> </div>
<div className={css.emojiPickerContainer}> <div className={css.emojiPickerContainer}>
<Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} /> <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
</div> </div>
<div className={css.colorSelectorContainer}> <div className={css.colorSelectorContainer}>
<ColorSelector <ColorSelector
currentColor={pendingAvatarColor} currentColor={pendingAvatarColor}
onColorSelection={setPendingAvatarColor} onColorSelection={onColorSelection}
/> />
</div> </div>
<div className={css.saveButtonContainer}> <div className={css.saveButtonContainer}>
<Button <Button
variant="filled" variant="filled"
buttonColor={buttonThemes.standard} buttonColor={
errorMessage ? buttonThemes.danger : buttonThemes.standard
}
onClick={onSaveAvatar} onClick={onSaveAvatar}
disabled={userAvatarSaveInProgress} disabled={userAvatarSaveInProgress}
> >
<div className={css.saveAvatarButtonContent}> <div className={css.saveAvatarButtonContent}>
{saveButtonContent} {saveButtonContent}
</div> </div>
</Button> </Button>
</div> </div>
</div> </div>
</Modal> </Modal>
); );
} }
export default EmojiAvatarSelectionModal; export default EmojiAvatarSelectionModal;
View Options

native/markdown/markdown-link-context.js

// @flow // @flow
import data from '@emoji-mart/data'; import data from '@emoji-mart/data';
import Picker from '@emoji-mart/react'; import Picker from '@emoji-mart/react';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { import {
defaultAnonymousUserEmojiAvatar, defaultAnonymousUserEmojiAvatar,
getAvatarForUser, getAvatarForUser,
getDefaultAvatar, getDefaultAvatar,
} from 'lib/shared/avatar-utils.js'; } from 'lib/shared/avatar-utils.js';
import type { import type {
ClientAvatar, ClientAvatar,
ClientEmojiAvatar, ClientEmojiAvatar,
Show All 10 Lines
function EmojiAvatarSelectionModal(): React.Node { function EmojiAvatarSelectionModal(): React.Node {
const { popModal } = useModalContext(); const { popModal } = useModalContext();
const editUserAvatarContext = React.useContext(EditUserAvatarContext); const editUserAvatarContext = React.useContext(EditUserAvatarContext);
invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext; const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
const [errorMessage, setErrorMessage] = React.useState<?string>();
const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserInfo = useSelector(state => state.currentUserInfo);
const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo); const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
? getDefaultAvatar(currentUserInfo.username) ? getDefaultAvatar(currentUserInfo.username)
: defaultAnonymousUserEmojiAvatar; : defaultAnonymousUserEmojiAvatar;
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState( const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState(
Show All 13 Lines () => ({
type: 'emoji', type: 'emoji',
emoji: pendingAvatarEmoji, emoji: pendingAvatarEmoji,
color: pendingAvatarColor, color: pendingAvatarColor,
}), }),
[pendingAvatarColor, pendingAvatarEmoji], [pendingAvatarColor, pendingAvatarEmoji],
); );
const onEmojiSelect = React.useCallback(selection => { const onEmojiSelect = React.useCallback(selection => {
setErrorMessage();
setPendingAvatarEmoji(selection.native); setPendingAvatarEmoji(selection.native);
}, []); }, []);
const onSaveAvatar = React.useCallback( const onColorSelection = React.useCallback((hex: string) => {
() => setUserAvatar(pendingEmojiAvatar), setErrorMessage();
[pendingEmojiAvatar, setUserAvatar], setPendingAvatarColor(hex);
); }, []);
const onSaveAvatar = React.useCallback(async () => {
try {
await setUserAvatar(pendingEmojiAvatar);
} catch {
setErrorMessage('Avatar update failed. Please try again.');
}
}, [pendingEmojiAvatar, setUserAvatar]);
let saveButtonContent; let saveButtonContent;
if (userAvatarSaveInProgress) { if (userAvatarSaveInProgress) {
saveButtonContent = <LoadingIndicator status="loading" size="medium" />; saveButtonContent = <LoadingIndicator status="loading" size="medium" />;
} else if (errorMessage) {
saveButtonContent = (
<>
<SWMansionIcon icon="warning-circle" size={24} />
{errorMessage}
</>
);
} else { } else {
saveButtonContent = 'Save Avatar'; saveButtonContent = 'Save Avatar';
} }
return ( return (
<Modal name="Emoji avatar selection" size="large" onClose={popModal}> <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
<div className={css.modalBody}> <div className={css.modalBody}>
<div className={css.avatarContainer}> <div className={css.avatarContainer}>
<Avatar avatarInfo={pendingEmojiAvatar} size="profile" /> <Avatar avatarInfo={pendingEmojiAvatar} size="profile" />
</div> </div>
<div className={css.emojiPickerContainer}> <div className={css.emojiPickerContainer}>
<Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} /> <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
</div> </div>
<div className={css.colorSelectorContainer}> <div className={css.colorSelectorContainer}>
<ColorSelector <ColorSelector
currentColor={pendingAvatarColor} currentColor={pendingAvatarColor}
onColorSelection={setPendingAvatarColor} onColorSelection={onColorSelection}
/> />
</div> </div>
<div className={css.saveButtonContainer}> <div className={css.saveButtonContainer}>
<Button <Button
variant="filled" variant="filled"
buttonColor={buttonThemes.standard} buttonColor={
errorMessage ? buttonThemes.danger : buttonThemes.standard
}
onClick={onSaveAvatar} onClick={onSaveAvatar}
disabled={userAvatarSaveInProgress} disabled={userAvatarSaveInProgress}
> >
<div className={css.saveAvatarButtonContent}> <div className={css.saveAvatarButtonContent}>
{saveButtonContent} {saveButtonContent}
</div> </div>
</Button> </Button>
</div> </div>
</div> </div>
</Modal> </Modal>
); );
} }
export default EmojiAvatarSelectionModal; export default EmojiAvatarSelectionModal;
View Options

native/markdown/markdown-link.react.js

// @flow // @flow
import data from '@emoji-mart/data'; import data from '@emoji-mart/data';
import Picker from '@emoji-mart/react'; import Picker from '@emoji-mart/react';
import invariant from 'invariant'; import invariant from 'invariant';
import * as React from 'react'; import * as React from 'react';
import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js'; import { EditUserAvatarContext } from 'lib/components/base-edit-user-avatar-provider.react.js';
import { useModalContext } from 'lib/components/modal-provider.react.js'; import { useModalContext } from 'lib/components/modal-provider.react.js';
import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
import { import {
defaultAnonymousUserEmojiAvatar, defaultAnonymousUserEmojiAvatar,
getAvatarForUser, getAvatarForUser,
getDefaultAvatar, getDefaultAvatar,
} from 'lib/shared/avatar-utils.js'; } from 'lib/shared/avatar-utils.js';
import type { import type {
ClientAvatar, ClientAvatar,
ClientEmojiAvatar, ClientEmojiAvatar,
Show All 10 Lines
function EmojiAvatarSelectionModal(): React.Node { function EmojiAvatarSelectionModal(): React.Node {
const { popModal } = useModalContext(); const { popModal } = useModalContext();
const editUserAvatarContext = React.useContext(EditUserAvatarContext); const editUserAvatarContext = React.useContext(EditUserAvatarContext);
invariant(editUserAvatarContext, 'editUserAvatarContext should be set'); invariant(editUserAvatarContext, 'editUserAvatarContext should be set');
const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext; const { setUserAvatar, userAvatarSaveInProgress } = editUserAvatarContext;
const [errorMessage, setErrorMessage] = React.useState<?string>();
const currentUserInfo = useSelector(state => state.currentUserInfo); const currentUserInfo = useSelector(state => state.currentUserInfo);
const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo); const currentUserAvatar: ClientAvatar = getAvatarForUser(currentUserInfo);
const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username const defaultUserAvatar: ClientEmojiAvatar = currentUserInfo?.username
? getDefaultAvatar(currentUserInfo.username) ? getDefaultAvatar(currentUserInfo.username)
: defaultAnonymousUserEmojiAvatar; : defaultAnonymousUserEmojiAvatar;
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState( const [pendingAvatarEmoji, setPendingAvatarEmoji] = React.useState(
Show All 13 Lines () => ({
type: 'emoji', type: 'emoji',
emoji: pendingAvatarEmoji, emoji: pendingAvatarEmoji,
color: pendingAvatarColor, color: pendingAvatarColor,
}), }),
[pendingAvatarColor, pendingAvatarEmoji], [pendingAvatarColor, pendingAvatarEmoji],
); );
const onEmojiSelect = React.useCallback(selection => { const onEmojiSelect = React.useCallback(selection => {
setErrorMessage();
setPendingAvatarEmoji(selection.native); setPendingAvatarEmoji(selection.native);
}, []); }, []);
const onSaveAvatar = React.useCallback( const onColorSelection = React.useCallback((hex: string) => {
() => setUserAvatar(pendingEmojiAvatar), setErrorMessage();
[pendingEmojiAvatar, setUserAvatar], setPendingAvatarColor(hex);
); }, []);
const onSaveAvatar = React.useCallback(async () => {
try {
await setUserAvatar(pendingEmojiAvatar);
} catch {
setErrorMessage('Avatar update failed. Please try again.');
}
}, [pendingEmojiAvatar, setUserAvatar]);
let saveButtonContent; let saveButtonContent;
if (userAvatarSaveInProgress) { if (userAvatarSaveInProgress) {
saveButtonContent = <LoadingIndicator status="loading" size="medium" />; saveButtonContent = <LoadingIndicator status="loading" size="medium" />;
} else if (errorMessage) {
saveButtonContent = (
<>
<SWMansionIcon icon="warning-circle" size={24} />
{errorMessage}
</>
);
} else { } else {
saveButtonContent = 'Save Avatar'; saveButtonContent = 'Save Avatar';
} }
return ( return (
<Modal name="Emoji avatar selection" size="large" onClose={popModal}> <Modal name="Emoji avatar selection" size="large" onClose={popModal}>
<div className={css.modalBody}> <div className={css.modalBody}>
<div className={css.avatarContainer}> <div className={css.avatarContainer}>
<Avatar avatarInfo={pendingEmojiAvatar} size="profile" /> <Avatar avatarInfo={pendingEmojiAvatar} size="profile" />
</div> </div>
<div className={css.emojiPickerContainer}> <div className={css.emojiPickerContainer}>
<Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} /> <Picker data={data} theme="dark" onEmojiSelect={onEmojiSelect} />
</div> </div>
<div className={css.colorSelectorContainer}> <div className={css.colorSelectorContainer}>
<ColorSelector <ColorSelector
currentColor={pendingAvatarColor} currentColor={pendingAvatarColor}
onColorSelection={setPendingAvatarColor} onColorSelection={onColorSelection}
/> />
</div> </div>
<div className={css.saveButtonContainer}> <div className={css.saveButtonContainer}>
<Button <Button
variant="filled" variant="filled"
buttonColor={buttonThemes.standard} buttonColor={
errorMessage ? buttonThemes.danger : buttonThemes.standard
}
onClick={onSaveAvatar} onClick={onSaveAvatar}
disabled={userAvatarSaveInProgress} disabled={userAvatarSaveInProgress}
> >
<div className={css.saveAvatarButtonContent}> <div className={css.saveAvatarButtonContent}>
{saveButtonContent} {saveButtonContent}
</div> </div>
</Button> </Button>
</div> </div>
</div> </div>
</Modal> </Modal>
); );
} }
export default EmojiAvatarSelectionModal; export default EmojiAvatarSelectionModal;