mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

When you send a message, scroll it into view

Browse source
This commit is contained in:
Scott Nonnenberg 2021-11-19 09:19:55 -08:00 • committed by GitHub
parent b9518ed0c5
commit a3525c16ef
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
14 changed files with 387 additions and 438 deletions
Download patch file Download diff file Expand all files Collapse all files

1
ts/components/CompositionArea.stories.tsx
View file

@ -68,7 +68,6 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
clearQuotedMessage: action('clearQuotedMessage'),
getPreferredBadge: () => undefined,
getQuotedMessage: action('getQuotedMessage'),
scrollToBottom: action('scrollToBottom'),
sortedGroupMembers: [],
// EmojiButton
onPickEmoji: action('onPickEmoji'),

6
ts/components/CompositionArea.tsx
View file

@ -123,7 +123,6 @@ export type OwnProps = Readonly<{
setQuotedMessage(message: undefined): unknown;
shouldSendHighQualityAttachments: boolean;
startRecording: () => unknown;
scrollToBottom: (converstionId: string) => unknown;
theme: ThemeType;
}>;
@ -203,7 +202,6 @@ export const CompositionArea = ({
clearQuotedMessage,
getPreferredBadge,
getQuotedMessage,
scrollToBottom,
sortedGroupMembers,
// EmojiButton
onPickEmoji,
@ -630,14 +628,13 @@ export const CompositionArea = ({
{!large ? leftHandSideButtonsFragment : null}
<div className="CompositionArea__input">
<CompositionInput
i18n={i18n}
conversationId={conversationId}
clearQuotedMessage={clearQuotedMessage}
disabled={disabled}
draftBodyRanges={draftBodyRanges}
draftText={draftText}
getPreferredBadge={getPreferredBadge}
getQuotedMessage={getQuotedMessage}
i18n={i18n}
inputApi={inputApiRef}
large={large}
onDirtyChange={setDirty}
@ -645,7 +642,6 @@ export const CompositionArea = ({
onPickEmoji={onPickEmoji}
onSubmit={handleSubmit}
onTextTooLong={onTextTooLong}
scrollToBottom={scrollToBottom}
skinTone={skinTone}
sortedGroupMembers={sortedGroupMembers}
theme={theme}

2
ts/components/CompositionInput.stories.tsx
View file

@ -21,7 +21,6 @@ const story = storiesOf('Components/CompositionInput', module);
const useProps = (overrideProps: Partial<Props> = {}): Props => ({
i18n,
conversationId: 'conversation-id',
disabled: boolean('disabled', overrideProps.disabled || false),
onSubmit: action('onSubmit'),
onEditorStateChange: action('onEditorStateChange'),
@ -33,7 +32,6 @@ const useProps = (overrideProps: Partial<Props> = {}): Props => ({
getQuotedMessage: action('getQuotedMessage'),
onPickEmoji: action('onPickEmoji'),
large: boolean('large', overrideProps.large || false),
scrollToBottom: action('scrollToBottom'),
sortedGroupMembers: overrideProps.sortedGroupMembers || [],
skinTone: select(
'skinTone',

5
ts/components/CompositionInput.tsx
View file

@ -62,7 +62,6 @@ export type InputApi = {
export type Props = {
readonly i18n: LocalizerType;
readonly conversationId: string;
readonly disabled?: boolean;
readonly getPreferredBadge: PreferredBadgeSelectorType;
readonly large?: boolean;
@ -88,7 +87,6 @@ export type Props = {
): unknown;
getQuotedMessage(): unknown;
clearQuotedMessage(): unknown;
scrollToBottom: (converstionId: string) => unknown;
};
const MAX_LENGTH = 64 * 1024;
@ -97,7 +95,6 @@ const BASE_CLASS_NAME = 'module-composition-input';
export function CompositionInput(props: Props): React.ReactElement {
const {
i18n,
conversationId,
disabled,
large,
inputApi,
@ -110,7 +107,6 @@ export function CompositionInput(props: Props): React.ReactElement {
getPreferredBadge,
getQuotedMessage,
clearQuotedMessage,
scrollToBottom,
sortedGroupMembers,
theme,
} = props;
@ -241,7 +237,6 @@ export function CompositionInput(props: Props): React.ReactElement {
`CompositionInput: Submitting message ${timestamp} with ${mentions.length} mentions`
);
onSubmit(text, mentions, timestamp);
scrollToBottom(conversationId);
};
if (inputApi) {

1
ts/components/ForwardMessageModal.stories.tsx
View file

@ -44,7 +44,6 @@ const candidateConversations = Array.from(Array(100), () =>
const useProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
attachments: overrideProps.attachments,
conversationId: 'conversation-id',
candidateConversations,
doForwardMessage: action('doForwardMessage'),
getPreferredBadge: () => undefined,

16
ts/components/ForwardMessageModal.tsx
View file

@ -41,7 +41,6 @@ import { useAnimated } from '../hooks/useAnimated';
export type DataPropsType = {
attachments?: Array<AttachmentDraftType>;
candidateConversations: ReadonlyArray<ConversationType>;
conversationId: string;
doForwardMessage: (
selectedContacts: Array<string>,
messageBody?: string,
@ -77,7 +76,6 @@ const MAX_FORWARD = 5;
export const ForwardMessageModal: FunctionComponent<PropsType> = ({
attachments,
candidateConversations,
conversationId,
doForwardMessage,
getPreferredBadge,
i18n,
@ -188,10 +186,10 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
}, [candidateConversations]);
const toggleSelectedConversation = useCallback(
(selectedConversationId: string) => {
(conversationId: string) => {
let removeContact = false;
const nextSelectedContacts = selectedContacts.filter(contact => {
if (contact.id === selectedConversationId) {
if (contact.id === conversationId) {
removeContact = true;
return false;
}
@ -201,7 +199,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
setSelectedContacts(nextSelectedContacts);
return;
}
const selectedContact = contactLookup.get(selectedConversationId);
const selectedContact = contactLookup.get(conversationId);
if (selectedContact) {
if (selectedContact.announcementsOnly && !selectedContact.areWeAdmin) {
setCannotMessage(true);
@ -337,7 +335,6 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
) : null}
<div className="module-ForwardMessageModal__text-edit-area">
<CompositionInput
conversationId={conversationId}
clearQuotedMessage={shouldNeverBeCalled}
draftText={messageBodyText}
getPreferredBadge={getPreferredBadge}
@ -346,7 +343,6 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
inputApi={inputApiRef}
large
moduleClassName="module-ForwardMessageModal__input"
scrollToBottom={noop}
onEditorStateChange={(
messageText,
bodyRanges,
@ -403,7 +399,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
i18n={i18n}
onClickArchiveButton={shouldNeverBeCalled}
onClickContactCheckbox={(
selectedConversationId: string,
conversationId: string,
disabledReason:
| undefined
| ContactCheckboxDisabledReason
@ -412,9 +408,7 @@ export const ForwardMessageModal: FunctionComponent<PropsType> = ({
disabledReason !==
ContactCheckboxDisabledReason.MaximumContactsSelected
) {
toggleSelectedConversation(
selectedConversationId
);
toggleSelectedConversation(conversationId);
}
}}
onSelectConversation={shouldNeverBeCalled}

4
ts/components/conversation/Timeline.stories.tsx
View file

@ -471,10 +471,7 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
overrideProps.isLoadingMessages === false
),
items: overrideProps.items || Object.keys(items),
loadCountdownStart: undefined,
messageHeightChangeIndex: undefined,
resetCounter: 0,
scrollToBottomCounter: 0,
scrollToIndex: overrideProps.scrollToIndex,
scrollToIndexCounter: 0,
totalUnread: number('totalUnread', overrideProps.totalUnread || 0),
@ -486,7 +483,6 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
warning: overrideProps.warning,
id: uuid(),
isNearBottom: false,
renderItem,
renderLastSeenIndicator,
renderHeroRow,

20
ts/components/conversation/Timeline.tsx
View file

@ -77,14 +77,13 @@ export type PropsDataType = {
haveNewest: boolean;
haveOldest: boolean;
isLoadingMessages: boolean;
isNearBottom: boolean;
isNearBottom?: boolean;
items: ReadonlyArray<string>;
loadCountdownStart: number | undefined;
messageHeightChangeIndex: number | undefined;
oldestUnreadIndex: number | undefined;
loadCountdownStart?: number;
messageHeightChangeIndex?: number;
oldestUnreadIndex?: number;
resetCounter: number;
scrollToBottomCounter: number;
scrollToIndex: number | undefined;
scrollToIndex?: number;
scrollToIndexCounter: number;
totalUnread: number;
};
@ -957,7 +956,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
this.scrollDown(false);
};
public scrollDown = (setFocus?: boolean, forceScrollDown?: boolean): void => {
public scrollDown = (setFocus?: boolean): void => {
const {
haveNewest,
id,
@ -974,7 +973,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
const lastId = items[items.length - 1];
const lastSeenIndicatorRow = this.getLastSeenIndicatorRow();
if (!this.visibleRows || forceScrollDown) {
if (!this.visibleRows) {
if (haveNewest) {
this.scrollToBottom(setFocus);
} else if (!isLoadingMessages) {
@ -1031,7 +1030,6 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
messageHeightChangeIndex,
oldestUnreadIndex,
resetCounter,
scrollToBottomCounter,
scrollToIndex,
typingContactId,
} = this.props;
@ -1049,10 +1047,6 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
this.resizeHeroRow();
}
if (scrollToBottomCounter !== prevProps.scrollToBottomCounter) {
this.scrollDown(false, true);
}
// There are a number of situations which can necessitate that we forget about row
// heights previously calculated. We reset the minimum number of rows to minimize
// unexpected changes to the scroll position. Those changes happen because