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

Optimize rendering

Browse source
This commit is contained in:
Fedor Indutny 2021-08-11 09:23:21 -07:00 • committed by GitHub
parent 81f06e2404
commit 12c78c742f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
34 changed files with 702 additions and 444 deletions
Download patch file Download diff file Expand all files Collapse all files

12
ts/components/conversationList/BaseConversationListItem.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { ReactNode, CSSProperties, FunctionComponent } from 'react';
import React, { ReactNode, FunctionComponent } from 'react';
import classNames from 'classnames';
import { isBoolean, isNumber } from 'lodash';
@ -37,7 +37,6 @@ type PropsType = {
messageStatusIcon?: ReactNode;
messageText?: ReactNode;
onClick?: () => void;
style: CSSProperties;
unreadCount?: number;
} & Pick<
ConversationType,
@ -77,7 +76,6 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
phoneNumber,
profileName,
sharedGroupNames,
style,
title,
unblurredAvatarPath,
unreadCount,
@ -198,7 +196,6 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
{ [`${BASE_CLASS_NAME}--is-checkbox--disabled`]: disabled }
)}
data-id={id ? cleanId(id) : undefined}
style={style}
// `onClick` is will double-fire if we're enabled. We want it to fire when we're
// disabled so we can show any "can't add contact" modals, etc. This won't
// work for keyboard users, though, because labels are not tabbable.
@ -219,7 +216,6 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
data-id={id ? cleanId(id) : undefined}
disabled={disabled}
onClick={onClick}
style={style}
type="button"
>
{contents}
@ -228,11 +224,7 @@ export const BaseConversationListItem: FunctionComponent<PropsType> = React.memo
}
return (
<div
className={commonClassNames}
data-id={id ? cleanId(id) : undefined}
style={style}
>
<div className={commonClassNames} data-id={id ? cleanId(id) : undefined}>
{contents}
</div>
);

5
ts/components/conversationList/ContactCheckbox.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { CSSProperties, FunctionComponent, ReactNode } from 'react';
import React, { FunctionComponent, ReactNode } from 'react';
import { BaseConversationListItem } from './BaseConversationListItem';
import { ConversationType } from '../../state/ducks/conversations';
@ -38,7 +38,6 @@ export type PropsDataType = {
type PropsHousekeepingType = {
i18n: LocalizerType;
style: CSSProperties;
onClick: (
id: string,
disabledReason: undefined | ContactCheckboxDisabledReason
@ -63,7 +62,6 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
phoneNumber,
profileName,
sharedGroupNames,
style,
title,
type,
unblurredAvatarPath,
@ -114,7 +112,6 @@ export const ContactCheckbox: FunctionComponent<PropsType> = React.memo(
phoneNumber={phoneNumber}
profileName={profileName}
sharedGroupNames={sharedGroupNames}
style={style}
title={title}
unblurredAvatarPath={unblurredAvatarPath}
/>

5
ts/components/conversationList/ContactListItem.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { CSSProperties, FunctionComponent } from 'react';
import React, { FunctionComponent } from 'react';
import { BaseConversationListItem } from './BaseConversationListItem';
import { ConversationType } from '../../state/ducks/conversations';
@ -28,7 +28,6 @@ export type PropsDataType = Pick<
type PropsHousekeepingType = {
i18n: LocalizerType;
style: CSSProperties;
onClick?: (id: string) => void;
};
@ -48,7 +47,6 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
phoneNumber,
profileName,
sharedGroupNames,
style,
title,
type,
unblurredAvatarPath,
@ -85,7 +83,6 @@ export const ContactListItem: FunctionComponent<PropsType> = React.memo(
phoneNumber={phoneNumber}
profileName={profileName}
sharedGroupNames={sharedGroupNames}
style={style}
title={title}
unblurredAvatarPath={unblurredAvatarPath}
/>

10
ts/components/conversationList/ConversationListItem.tsx
View file

@ -1,12 +1,7 @@
// Copyright 2018-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, {
useCallback,
CSSProperties,
FunctionComponent,
ReactNode,
} from 'react';
import React, { useCallback, FunctionComponent, ReactNode } from 'react';
import classNames from 'classnames';
import {
@ -62,7 +57,6 @@ export type PropsData = Pick<
type PropsHousekeeping = {
i18n: LocalizerType;
style: CSSProperties;
onClick: (id: string) => void;
};
@ -88,7 +82,6 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
profileName,
sharedGroupNames,
shouldShowDraft,
style,
title,
type,
typingContact,
@ -197,7 +190,6 @@ export const ConversationListItem: FunctionComponent<Props> = React.memo(
phoneNumber={phoneNumber}
profileName={profileName}
sharedGroupNames={sharedGroupNames}
style={style}
title={title}
unreadCount={unreadCount}
unblurredAvatarPath={unblurredAvatarPath}

6
ts/components/conversationList/CreateNewGroupButton.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { CSSProperties, FunctionComponent } from 'react';
import React, { FunctionComponent } from 'react';
import { BaseConversationListItem } from './BaseConversationListItem';
import { LocalizerType } from '../../types/Util';
@ -9,11 +9,10 @@ import { LocalizerType } from '../../types/Util';
type PropsType = {
i18n: LocalizerType;
onClick: () => void;
style: CSSProperties;
};
export const CreateNewGroupButton: FunctionComponent<PropsType> = React.memo(
({ i18n, onClick, style }) => {
({ i18n, onClick }) => {
const title = i18n('createNewGroupButton');
return (
@ -26,7 +25,6 @@ export const CreateNewGroupButton: FunctionComponent<PropsType> = React.memo(
isSelected={false}
onClick={onClick}
sharedGroupNames={[]}
style={style}
title={title}
/>
);

1
ts/components/conversationList/MessageSearchResult.stories.tsx
View file

@ -55,7 +55,6 @@ const createProps = (overrideProps: Partial<PropsType> = {}): PropsType => ({
'isSearchingInConversation',
overrideProps.isSearchingInConversation || false
),
style: {},
});
story.add('Default', () => {

12
ts/components/conversationList/MessageSearchResult.tsx
View file

@ -1,12 +1,7 @@
// Copyright 2019-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, {
useCallback,
CSSProperties,
FunctionComponent,
ReactNode,
} from 'react';
import React, { useCallback, FunctionComponent, ReactNode } from 'react';
import { escapeRegExp } from 'lodash';
import { MessageBodyHighlight } from './MessageBodyHighlight';
@ -59,7 +54,6 @@ type PropsHousekeepingType = {
conversationId: string;
messageId?: string;
}) => void;
style: CSSProperties;
};
export type PropsType = PropsDataType & PropsHousekeepingType;
@ -159,7 +153,6 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
openConversationInternal,
sentAt,
snippet,
style,
to,
}) => {
const onClickItem = useCallback(() => {
@ -167,7 +160,7 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
}, [openConversationInternal, conversationId, id]);
if (!from || !to) {
return <div style={style} />;
return <div />;
}
const isNoteToSelf = from.isMe && to.isMe;
@ -213,7 +206,6 @@ export const MessageSearchResult: FunctionComponent<PropsType> = React.memo(
phoneNumber={from.phoneNumber}
profileName={from.profileName}
sharedGroupNames={from.sharedGroupNames}
style={style}
title={from.title}
unblurredAvatarPath={from.unblurredAvatarPath}
/>

12
ts/components/conversationList/SearchResultsLoadingFakeHeader.tsx
View file

@ -1,12 +1,10 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { CSSProperties, FunctionComponent } from 'react';
import React, { FunctionComponent } from 'react';
type PropsType = {
style: CSSProperties;
};
type PropsType = Record<string, never>;
export const SearchResultsLoadingFakeHeader: FunctionComponent<PropsType> = ({
style,
}) => <div className="module-SearchResultsLoadingFakeHeader" style={style} />;
export const SearchResultsLoadingFakeHeader: FunctionComponent<PropsType> = () => (
<div className="module-SearchResultsLoadingFakeHeader" />
);

12
ts/components/conversationList/SearchResultsLoadingFakeRow.tsx
View file

@ -1,16 +1,12 @@
// Copyright 2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { CSSProperties, FunctionComponent } from 'react';
import React, { FunctionComponent } from 'react';
type PropsType = {
style: CSSProperties;
};
type PropsType = Record<string, never>;
export const SearchResultsLoadingFakeRow: FunctionComponent<PropsType> = ({
style,
}) => (
<div className="module-SearchResultsLoadingFakeRow" style={style}>
export const SearchResultsLoadingFakeRow: FunctionComponent<PropsType> = () => (
<div className="module-SearchResultsLoadingFakeRow">
<div className="module-SearchResultsLoadingFakeRow__avatar" />
<div className="module-SearchResultsLoadingFakeRow__content">
<div className="module-SearchResultsLoadingFakeRow__content__header" />

14
ts/components/conversationList/StartNewConversation.tsx
View file

@ -1,7 +1,7 @@
// Copyright 2019-2021 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only
import React, { CSSProperties, FunctionComponent } from 'react';
import React, { FunctionComponent, useCallback } from 'react';
import {
BaseConversationListItem,
@ -19,18 +19,21 @@ type PropsData = {
type PropsHousekeeping = {
i18n: LocalizerType;
style: CSSProperties;
onClick: () => void;
onClick: (phoneNumber: string) => void;
};
export type Props = PropsData & PropsHousekeeping;
export const StartNewConversation: FunctionComponent<Props> = React.memo(
({ i18n, onClick, phoneNumber, style }) => {
({ i18n, onClick, phoneNumber }) => {
const messageText = (
<div className={TEXT_CLASS_NAME}>{i18n('startConversation')}</div>
);
const boundOnClick = useCallback(() => {
onClick(phoneNumber);
}, [onClick, phoneNumber]);
return (
<BaseConversationListItem
acceptedMessageRequest={false}
@ -41,10 +44,9 @@ export const StartNewConversation: FunctionComponent<Props> = React.memo(
isMe={false}
isSelected={false}
messageText={messageText}
onClick={onClick}
onClick={boundOnClick}
phoneNumber={phoneNumber}
sharedGroupNames={[]}
style={style}
title={phoneNumber}
/>
);