Page MenuHomePhabricator
Differential D6641

[9/n] Native Typeahead - Introduce SelectableTextInput
ClosedPublic
Actions

Authored by ashoat on Feb 6 2023, 5:49 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mar 7 2025, 7:32 PM
Unknown Object (File)
Mar 7 2025, 7:32 PM
Unknown Object (File)
Mar 7 2025, 7:32 PM
Unknown Object (File)
Mar 7 2025, 7:31 PM
Unknown Object (File)
Mar 7 2025, 7:24 PM
Unknown Object (File)
Feb 20 2025, 2:35 PM
Unknown Object (File)
Feb 20 2025, 2:01 AM
Unknown Object (File)
Feb 15 2025, 1:19 PM
View All 94 Files
Subscribers
None

Details

Reviewers
• przemek
tomek
atul
Commits
rCOMM51060cef3f18: [9/n] Native Typeahead - Introduce SelectableTextInput
Summary

This is just basic plumbing. Implementation comes in following diffs

Depends on D6390

Test Plan
  • Tested both iOS and Android
  • Made sure there was no flicker
  • Tested @-tag in both middle and end of text
  • Tested moving cursor after selecting @-tag

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

ashoat created this revision.Feb 6 2023, 5:49 PM
ashoat added a child revision: D6642: [10/n] Native Typeahead - SelectableTextInput for Android.
Harbormaster completed remote builds in B16205: Diff 22169.Feb 6 2023, 6:04 PM
ashoat requested review of this revision.Feb 6 2023, 6:04 PM
tomek accepted this revision.Feb 7 2023, 6:00 AM
tomek added inline comments.
native/components/selectable-text-input.react.ios.js
25–32 ↗(On Diff #22169)

Nice!

This revision is now accepted and ready to land.Feb 7 2023, 6:00 AM
tomek added 1 blocking reviewer(s): • przemek.Feb 7 2023, 6:00 AM
This revision now requires review to proceed.Feb 7 2023, 6:00 AM
ashoat updated this revision to Diff 22215.Feb 7 2023, 9:11 AM

Rebase

Harbormaster completed remote builds in B16244: Diff 22215.Feb 7 2023, 10:52 AM
ashoat removed 1 blocking reviewer(s): • przemek.Feb 7 2023, 2:28 PM
This revision is now accepted and ready to land.Feb 7 2023, 2:28 PM
Closed by commit rCOMM51060cef3f18: [9/n] Native Typeahead - Introduce SelectableTextInput (authored by ashoat). · Explain WhyFeb 7 2023, 2:37 PM
This revision was automatically updated to reflect the committed changes.
ashoat added a commit: rCOMM51060cef3f18: [9/n] Native Typeahead - Introduce SelectableTextInput.

Revision Contents
Changeset List

Diff 22251

View Options

native/chat/chat-input-bar.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
pushTypes, pushTypes,
type CreateMessageInfoParams, type CreateMessageInfoParams,
type MessageSpec, type MessageSpec,
type NotificationTextsParams,
} from './message-spec.js'; } from './message-spec.js';
import { joinResult } from './utils.js'; import { joinResult } from './utils.js';
import type { PlatformDetails } from '../../types/device-types.js'; import type { PlatformDetails } from '../../types/device-types.js';
import { messageTypes } from '../../types/message-types.js'; import { messageTypes } from '../../types/message-types.js';
import type { import type {
MessageInfo, MessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types.js'; } from '../../types/message-types.js';
import type { import type {
CreateSidebarMessageData, CreateSidebarMessageData,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
} from '../../types/messages/create-sidebar.js'; } from '../../types/messages/create-sidebar.js';
import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js'; import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js';
import type { NotifTexts } from '../../types/notif-types.js'; import type { NotifTexts } from '../../types/notif-types.js';
import type { ThreadInfo } from '../../types/thread-types.js'; import type { ThreadInfo } from '../../types/thread-types.js';
import type { RelativeUserInfo } from '../../types/user-types.js'; import type { RelativeUserInfo } from '../../types/user-types.js';
import { import {
ET, ET,
type EntityText, type EntityText,
pluralizeEntityText, pluralizeEntityText,
} from '../../utils/entity-text.js'; } from '../../utils/entity-text.js';
import { isMentioned } from '../mention-utils.js';
import { hasMinCodeVersion } from '../version-utils.js'; import { hasMinCodeVersion } from '../version-utils.js';
export const createSidebarMessageSpec: MessageSpec< export const createSidebarMessageSpec: MessageSpec<
CreateSidebarMessageData, CreateSidebarMessageData,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
> = Object.freeze({ > = Object.freeze({
messageContentForServerDB( messageContentForServerDB(
▲ Show 20 Lines • Show All 134 Lines • ▼ Show 20 Lines unshimMessageInfo(
unwrapped: RawCreateSidebarMessageInfo, unwrapped: RawCreateSidebarMessageInfo,
): RawCreateSidebarMessageInfo { ): RawCreateSidebarMessageInfo {
return unwrapped; return unwrapped;
}, },
async notificationTexts( async notificationTexts(
messageInfos: $ReadOnlyArray<MessageInfo>, messageInfos: $ReadOnlyArray<MessageInfo>,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
params: NotificationTextsParams,
): Promise<NotifTexts> { ): Promise<NotifTexts> {
const firstMessageInfo = messageInfos[0]; const firstMessageInfo = messageInfos[0];
invariant( invariant(
firstMessageInfo.type === messageTypes.CREATE_SIDEBAR, firstMessageInfo.type === messageTypes.CREATE_SIDEBAR,
'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!', 'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!',
); );
const creator = ET.user({ userInfo: firstMessageInfo.creator }); const creator = ET.user({ userInfo: firstMessageInfo.creator });
const prefix = ET`${creator}`; const prefix = ET`${creator}`;
const initialName = firstMessageInfo.initialThreadState.name; const initialName = firstMessageInfo.initialThreadState.name;
const sourceMessageAuthorPossessive = ET.user({ const sourceMessageAuthorPossessive = ET.user({
userInfo: firstMessageInfo.sourceMessageAuthor, userInfo: firstMessageInfo.sourceMessageAuthor,
possessive: true, possessive: true,
}); });
let body = `started a thread in response to `; let body = `started a thread in response to `;
body = ET`${body} ${sourceMessageAuthorPossessive} message`; body = ET`${body} ${sourceMessageAuthorPossessive} message`;
if (initialName) {
const { username } = params.notifTargetUserInfo;
const secondMessageInfo = messageInfos[1];
if (
username &&
secondMessageInfo &&
secondMessageInfo.type === messageTypes.SIDEBAR_SOURCE &&
secondMessageInfo.sourceMessage.type === messageTypes.TEXT &&
isMentioned(username, secondMessageInfo.sourceMessage.text)
) {
body = ET`${body} that tagged you`;
} else if (initialName) {
body = ET`${body} "${initialName}"`; body = ET`${body} "${initialName}"`;
} }
return { return {
merged: ET`${prefix} ${body}`, merged: ET`${prefix} ${body}`,
body, body,
title: threadInfo.uiName, title: threadInfo.uiName,
prefix, prefix,
Show All 20 Lines
View Options

native/components/selectable-text-input.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
pushTypes, pushTypes,
type CreateMessageInfoParams, type CreateMessageInfoParams,
type MessageSpec, type MessageSpec,
type NotificationTextsParams,
} from './message-spec.js'; } from './message-spec.js';
import { joinResult } from './utils.js'; import { joinResult } from './utils.js';
import type { PlatformDetails } from '../../types/device-types.js'; import type { PlatformDetails } from '../../types/device-types.js';
import { messageTypes } from '../../types/message-types.js'; import { messageTypes } from '../../types/message-types.js';
import type { import type {
MessageInfo, MessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types.js'; } from '../../types/message-types.js';
import type { import type {
CreateSidebarMessageData, CreateSidebarMessageData,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
} from '../../types/messages/create-sidebar.js'; } from '../../types/messages/create-sidebar.js';
import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js'; import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js';
import type { NotifTexts } from '../../types/notif-types.js'; import type { NotifTexts } from '../../types/notif-types.js';
import type { ThreadInfo } from '../../types/thread-types.js'; import type { ThreadInfo } from '../../types/thread-types.js';
import type { RelativeUserInfo } from '../../types/user-types.js'; import type { RelativeUserInfo } from '../../types/user-types.js';
import { import {
ET, ET,
type EntityText, type EntityText,
pluralizeEntityText, pluralizeEntityText,
} from '../../utils/entity-text.js'; } from '../../utils/entity-text.js';
import { isMentioned } from '../mention-utils.js';
import { hasMinCodeVersion } from '../version-utils.js'; import { hasMinCodeVersion } from '../version-utils.js';
export const createSidebarMessageSpec: MessageSpec< export const createSidebarMessageSpec: MessageSpec<
CreateSidebarMessageData, CreateSidebarMessageData,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
> = Object.freeze({ > = Object.freeze({
messageContentForServerDB( messageContentForServerDB(
▲ Show 20 Lines • Show All 134 Lines • ▼ Show 20 Lines unshimMessageInfo(
unwrapped: RawCreateSidebarMessageInfo, unwrapped: RawCreateSidebarMessageInfo,
): RawCreateSidebarMessageInfo { ): RawCreateSidebarMessageInfo {
return unwrapped; return unwrapped;
}, },
async notificationTexts( async notificationTexts(
messageInfos: $ReadOnlyArray<MessageInfo>, messageInfos: $ReadOnlyArray<MessageInfo>,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
params: NotificationTextsParams,
): Promise<NotifTexts> { ): Promise<NotifTexts> {
const firstMessageInfo = messageInfos[0]; const firstMessageInfo = messageInfos[0];
invariant( invariant(
firstMessageInfo.type === messageTypes.CREATE_SIDEBAR, firstMessageInfo.type === messageTypes.CREATE_SIDEBAR,
'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!', 'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!',
); );
const creator = ET.user({ userInfo: firstMessageInfo.creator }); const creator = ET.user({ userInfo: firstMessageInfo.creator });
const prefix = ET`${creator}`; const prefix = ET`${creator}`;
const initialName = firstMessageInfo.initialThreadState.name; const initialName = firstMessageInfo.initialThreadState.name;
const sourceMessageAuthorPossessive = ET.user({ const sourceMessageAuthorPossessive = ET.user({
userInfo: firstMessageInfo.sourceMessageAuthor, userInfo: firstMessageInfo.sourceMessageAuthor,
possessive: true, possessive: true,
}); });
let body = `started a thread in response to `; let body = `started a thread in response to `;
body = ET`${body} ${sourceMessageAuthorPossessive} message`; body = ET`${body} ${sourceMessageAuthorPossessive} message`;
if (initialName) {
const { username } = params.notifTargetUserInfo;
const secondMessageInfo = messageInfos[1];
if (
username &&
secondMessageInfo &&
secondMessageInfo.type === messageTypes.SIDEBAR_SOURCE &&
secondMessageInfo.sourceMessage.type === messageTypes.TEXT &&
isMentioned(username, secondMessageInfo.sourceMessage.text)
) {
body = ET`${body} that tagged you`;
} else if (initialName) {
body = ET`${body} "${initialName}"`; body = ET`${body} "${initialName}"`;
} }
return { return {
merged: ET`${prefix} ${body}`, merged: ET`${prefix} ${body}`,
body, body,
title: threadInfo.uiName, title: threadInfo.uiName,
prefix, prefix,
Show All 20 Lines
View Options

native/components/selectable-text-input.react.ios.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
pushTypes, pushTypes,
type CreateMessageInfoParams, type CreateMessageInfoParams,
type MessageSpec, type MessageSpec,
type NotificationTextsParams,
} from './message-spec.js'; } from './message-spec.js';
import { joinResult } from './utils.js'; import { joinResult } from './utils.js';
import type { PlatformDetails } from '../../types/device-types.js'; import type { PlatformDetails } from '../../types/device-types.js';
import { messageTypes } from '../../types/message-types.js'; import { messageTypes } from '../../types/message-types.js';
import type { import type {
MessageInfo, MessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types.js'; } from '../../types/message-types.js';
import type { import type {
CreateSidebarMessageData, CreateSidebarMessageData,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
} from '../../types/messages/create-sidebar.js'; } from '../../types/messages/create-sidebar.js';
import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js'; import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js';
import type { NotifTexts } from '../../types/notif-types.js'; import type { NotifTexts } from '../../types/notif-types.js';
import type { ThreadInfo } from '../../types/thread-types.js'; import type { ThreadInfo } from '../../types/thread-types.js';
import type { RelativeUserInfo } from '../../types/user-types.js'; import type { RelativeUserInfo } from '../../types/user-types.js';
import { import {
ET, ET,
type EntityText, type EntityText,
pluralizeEntityText, pluralizeEntityText,
} from '../../utils/entity-text.js'; } from '../../utils/entity-text.js';
import { isMentioned } from '../mention-utils.js';
import { hasMinCodeVersion } from '../version-utils.js'; import { hasMinCodeVersion } from '../version-utils.js';
export const createSidebarMessageSpec: MessageSpec< export const createSidebarMessageSpec: MessageSpec<
CreateSidebarMessageData, CreateSidebarMessageData,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
> = Object.freeze({ > = Object.freeze({
messageContentForServerDB( messageContentForServerDB(
▲ Show 20 Lines • Show All 134 Lines • ▼ Show 20 Lines unshimMessageInfo(
unwrapped: RawCreateSidebarMessageInfo, unwrapped: RawCreateSidebarMessageInfo,
): RawCreateSidebarMessageInfo { ): RawCreateSidebarMessageInfo {
return unwrapped; return unwrapped;
}, },
async notificationTexts( async notificationTexts(
messageInfos: $ReadOnlyArray<MessageInfo>, messageInfos: $ReadOnlyArray<MessageInfo>,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
params: NotificationTextsParams,
): Promise<NotifTexts> { ): Promise<NotifTexts> {
const firstMessageInfo = messageInfos[0]; const firstMessageInfo = messageInfos[0];
invariant( invariant(
firstMessageInfo.type === messageTypes.CREATE_SIDEBAR, firstMessageInfo.type === messageTypes.CREATE_SIDEBAR,
'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!', 'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!',
); );
const creator = ET.user({ userInfo: firstMessageInfo.creator }); const creator = ET.user({ userInfo: firstMessageInfo.creator });
const prefix = ET`${creator}`; const prefix = ET`${creator}`;
const initialName = firstMessageInfo.initialThreadState.name; const initialName = firstMessageInfo.initialThreadState.name;
const sourceMessageAuthorPossessive = ET.user({ const sourceMessageAuthorPossessive = ET.user({
userInfo: firstMessageInfo.sourceMessageAuthor, userInfo: firstMessageInfo.sourceMessageAuthor,
possessive: true, possessive: true,
}); });
let body = `started a thread in response to `; let body = `started a thread in response to `;
body = ET`${body} ${sourceMessageAuthorPossessive} message`; body = ET`${body} ${sourceMessageAuthorPossessive} message`;
if (initialName) {
const { username } = params.notifTargetUserInfo;
const secondMessageInfo = messageInfos[1];
if (
username &&
secondMessageInfo &&
secondMessageInfo.type === messageTypes.SIDEBAR_SOURCE &&
secondMessageInfo.sourceMessage.type === messageTypes.TEXT &&
isMentioned(username, secondMessageInfo.sourceMessage.text)
) {
body = ET`${body} that tagged you`;
} else if (initialName) {
body = ET`${body} "${initialName}"`; body = ET`${body} "${initialName}"`;
} }
return { return {
merged: ET`${prefix} ${body}`, merged: ET`${prefix} ${body}`,
body, body,
title: threadInfo.uiName, title: threadInfo.uiName,
prefix, prefix,
Show All 20 Lines
View Options

native/components/selectable-text-input.react.js

// @flow // @flow
import invariant from 'invariant'; import invariant from 'invariant';
import { import {
pushTypes, pushTypes,
type CreateMessageInfoParams, type CreateMessageInfoParams,
type MessageSpec, type MessageSpec,
type NotificationTextsParams,
} from './message-spec.js'; } from './message-spec.js';
import { joinResult } from './utils.js'; import { joinResult } from './utils.js';
import type { PlatformDetails } from '../../types/device-types.js'; import type { PlatformDetails } from '../../types/device-types.js';
import { messageTypes } from '../../types/message-types.js'; import { messageTypes } from '../../types/message-types.js';
import type { import type {
MessageInfo, MessageInfo,
ClientDBMessageInfo, ClientDBMessageInfo,
} from '../../types/message-types.js'; } from '../../types/message-types.js';
import type { import type {
CreateSidebarMessageData, CreateSidebarMessageData,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
} from '../../types/messages/create-sidebar.js'; } from '../../types/messages/create-sidebar.js';
import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js'; import type { RawUnsupportedMessageInfo } from '../../types/messages/unsupported.js';
import type { NotifTexts } from '../../types/notif-types.js'; import type { NotifTexts } from '../../types/notif-types.js';
import type { ThreadInfo } from '../../types/thread-types.js'; import type { ThreadInfo } from '../../types/thread-types.js';
import type { RelativeUserInfo } from '../../types/user-types.js'; import type { RelativeUserInfo } from '../../types/user-types.js';
import { import {
ET, ET,
type EntityText, type EntityText,
pluralizeEntityText, pluralizeEntityText,
} from '../../utils/entity-text.js'; } from '../../utils/entity-text.js';
import { isMentioned } from '../mention-utils.js';
import { hasMinCodeVersion } from '../version-utils.js'; import { hasMinCodeVersion } from '../version-utils.js';
export const createSidebarMessageSpec: MessageSpec< export const createSidebarMessageSpec: MessageSpec<
CreateSidebarMessageData, CreateSidebarMessageData,
RawCreateSidebarMessageInfo, RawCreateSidebarMessageInfo,
CreateSidebarMessageInfo, CreateSidebarMessageInfo,
> = Object.freeze({ > = Object.freeze({
messageContentForServerDB( messageContentForServerDB(
▲ Show 20 Lines • Show All 134 Lines • ▼ Show 20 Lines unshimMessageInfo(
unwrapped: RawCreateSidebarMessageInfo, unwrapped: RawCreateSidebarMessageInfo,
): RawCreateSidebarMessageInfo { ): RawCreateSidebarMessageInfo {
return unwrapped; return unwrapped;
}, },
async notificationTexts( async notificationTexts(
messageInfos: $ReadOnlyArray<MessageInfo>, messageInfos: $ReadOnlyArray<MessageInfo>,
threadInfo: ThreadInfo, threadInfo: ThreadInfo,
params: NotificationTextsParams,
): Promise<NotifTexts> { ): Promise<NotifTexts> {
const firstMessageInfo = messageInfos[0]; const firstMessageInfo = messageInfos[0];
invariant( invariant(
firstMessageInfo.type === messageTypes.CREATE_SIDEBAR, firstMessageInfo.type === messageTypes.CREATE_SIDEBAR,
'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!', 'firstMessageInfo should be messageTypes.CREATE_SIDEBAR!',
); );
const creator = ET.user({ userInfo: firstMessageInfo.creator }); const creator = ET.user({ userInfo: firstMessageInfo.creator });
const prefix = ET`${creator}`; const prefix = ET`${creator}`;
const initialName = firstMessageInfo.initialThreadState.name; const initialName = firstMessageInfo.initialThreadState.name;
const sourceMessageAuthorPossessive = ET.user({ const sourceMessageAuthorPossessive = ET.user({
userInfo: firstMessageInfo.sourceMessageAuthor, userInfo: firstMessageInfo.sourceMessageAuthor,
possessive: true, possessive: true,
}); });
let body = `started a thread in response to `; let body = `started a thread in response to `;
body = ET`${body} ${sourceMessageAuthorPossessive} message`; body = ET`${body} ${sourceMessageAuthorPossessive} message`;
if (initialName) {
const { username } = params.notifTargetUserInfo;
const secondMessageInfo = messageInfos[1];
if (
username &&
secondMessageInfo &&
secondMessageInfo.type === messageTypes.SIDEBAR_SOURCE &&
secondMessageInfo.sourceMessage.type === messageTypes.TEXT &&
isMentioned(username, secondMessageInfo.sourceMessage.text)
) {
body = ET`${body} that tagged you`;
} else if (initialName) {
body = ET`${body} "${initialName}"`; body = ET`${body} "${initialName}"`;
} }
return { return {
merged: ET`${prefix} ${body}`, merged: ET`${prefix} ${body}`,
body, body,
title: threadInfo.uiName, title: threadInfo.uiName,
prefix, prefix,
Show All 20 Lines