2019-12-27 03:40:59 +01:00
|
|
|
import React from 'react';
|
|
|
|
|
2020-11-04 01:35:11 +01:00
|
|
|
import { ConversationListItemWithDetails } from '../ConversationListItem';
|
2021-01-27 23:46:15 +01:00
|
|
|
import { RowRendererParamsType } from '../LeftPane';
|
2019-12-30 00:07:51 +01:00
|
|
|
import { AutoSizer, List } from 'react-virtualized';
|
2021-04-20 07:52:19 +02:00
|
|
|
import { ConversationType as ReduxConversationType } from '../../state/ducks/conversations';
|
2020-12-03 02:09:39 +01:00
|
|
|
import { DefaultTheme } from 'styled-components';
|
2020-12-14 12:20:09 +01:00
|
|
|
import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
|
2021-04-28 06:03:22 +02:00
|
|
|
import autoBind from 'auto-bind';
|
2019-12-30 04:45:00 +01:00
|
|
|
|
2019-12-27 03:40:59 +01:00
|
|
|
export interface Props {
|
2021-04-20 07:52:19 +02:00
|
|
|
directContacts: Array<ReduxConversationType>;
|
2020-12-03 02:09:39 +01:00
|
|
|
theme: DefaultTheme;
|
2020-11-13 04:29:59 +01:00
|
|
|
openConversationExternal: (id: string, messageId?: string) => void;
|
2019-12-27 03:40:59 +01:00
|
|
|
}
|
|
|
|
|
2021-04-28 06:03:22 +02:00
|
|
|
export class LeftPaneContactSection extends React.Component<Props> {
|
2019-12-27 03:40:59 +01:00
|
|
|
public constructor(props: Props) {
|
|
|
|
super(props);
|
2021-04-28 06:03:22 +02:00
|
|
|
autoBind(this);
|
2019-12-30 00:07:51 +01:00
|
|
|
}
|
|
|
|
|
2019-12-30 03:33:38 +01:00
|
|
|
public renderHeader(): JSX.Element | undefined {
|
2021-04-22 10:03:58 +02:00
|
|
|
return <LeftPaneSectionHeader label={window.i18n('contactsHeader')} theme={this.props.theme} />;
|
2019-12-27 03:40:59 +01:00
|
|
|
}
|
|
|
|
|
2020-01-22 06:50:46 +01:00
|
|
|
public render(): JSX.Element {
|
2019-12-30 00:07:51 +01:00
|
|
|
return (
|
|
|
|
<div className="left-pane-contact-section">
|
|
|
|
{this.renderHeader()}
|
2021-04-28 06:03:22 +02:00
|
|
|
{this.renderContacts()}
|
2019-12-30 00:07:51 +01:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2021-04-22 10:03:58 +02:00
|
|
|
public renderRow = ({ index, key, style }: RowRendererParamsType): JSX.Element | undefined => {
|
2020-11-04 01:35:11 +01:00
|
|
|
const { directContacts } = this.props;
|
|
|
|
const item = directContacts[index];
|
2020-01-03 01:49:42 +01:00
|
|
|
|
|
|
|
return (
|
2020-09-14 08:06:24 +02:00
|
|
|
<ConversationListItemWithDetails
|
2020-11-04 01:35:11 +01:00
|
|
|
key={item.id}
|
2020-01-03 01:49:42 +01:00
|
|
|
style={style}
|
|
|
|
{...item}
|
|
|
|
i18n={window.i18n}
|
2020-11-13 04:29:59 +01:00
|
|
|
onClick={this.props.openConversationExternal}
|
2020-01-03 01:49:42 +01:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
2019-12-30 00:07:51 +01:00
|
|
|
private renderContacts() {
|
2021-04-28 06:03:22 +02:00
|
|
|
return <div className="left-pane-contact-content">{this.renderList()}</div>;
|
2019-12-27 03:40:59 +01:00
|
|
|
}
|
|
|
|
|
2019-12-30 00:07:51 +01:00
|
|
|
private renderList() {
|
2020-11-04 01:35:11 +01:00
|
|
|
const { directContacts } = this.props;
|
|
|
|
const length = Number(directContacts.length);
|
2020-01-03 01:12:43 +01:00
|
|
|
|
2019-12-30 00:07:51 +01:00
|
|
|
const list = (
|
|
|
|
<div className="module-left-pane__list" key={0}>
|
2019-12-30 03:33:38 +01:00
|
|
|
<AutoSizer>
|
|
|
|
{({ height, width }) => (
|
|
|
|
<List
|
|
|
|
className="module-left-pane__virtual-list"
|
|
|
|
height={height}
|
2020-11-04 01:35:11 +01:00
|
|
|
directContacts={directContacts} // needed for change in props refresh
|
2019-12-30 07:41:13 +01:00
|
|
|
rowCount={length}
|
2019-12-30 03:33:38 +01:00
|
|
|
rowHeight={64}
|
|
|
|
rowRenderer={this.renderRow}
|
|
|
|
width={width}
|
2020-07-30 03:19:52 +02:00
|
|
|
autoHeight={false}
|
2019-12-30 03:33:38 +01:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</AutoSizer>
|
2019-12-30 00:07:51 +01:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
|
|
|
|
return [list];
|
|
|
|
}
|
2019-12-27 03:40:59 +01:00
|
|
|
}
|