feat: wrap up the new Join Community overlay
Audric Ackermann
3 years ago
parent
282e631f73
commit
374b71630a
@ -1,62 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
import { MemoConversationListItemWithDetails } from './conversation-list-item/ConversationListItem';
|
||||
import { AutoSizer, List } from 'react-virtualized';
|
||||
import { LeftPaneSectionHeader } from './LeftPaneSectionHeader';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { getDirectContacts } from '../../state/selectors/conversations';
|
||||
import { RowRendererParamsType } from './LeftPane';
|
||||
|
||||
const renderRow = (props: RowRendererParamsType) => {
|
||||
const { index, key, style } = props;
|
||||
|
||||
const directContacts = (props.parent as any)?.props?.directContacts || [];
|
||||
|
||||
const item = directContacts?.[index];
|
||||
|
||||
if (!item) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <MemoConversationListItemWithDetails style={style} key={key} {...item} />;
|
||||
};
|
||||
|
||||
const ContactListItemSection = () => {
|
||||
const directContacts = useSelector(getDirectContacts);
|
||||
|
||||
if (!directContacts) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const length = Number(directContacts.length);
|
||||
|
||||
return (
|
||||
<div className="module-left-pane__list" key={0}>
|
||||
<AutoSizer>
|
||||
{({ height, width }) => (
|
||||
<List
|
||||
className="module-left-pane__virtual-list"
|
||||
height={height}
|
||||
directContacts={directContacts} // needed for change in props refresh
|
||||
rowCount={length}
|
||||
rowHeight={64}
|
||||
rowRenderer={renderRow}
|
||||
width={width}
|
||||
autoHeight={false}
|
||||
/>
|
||||
)}
|
||||
</AutoSizer>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export const LeftPaneContactSection = () => {
|
||||
return (
|
||||
<div className="left-pane-contact-section">
|
||||
<LeftPaneSectionHeader />
|
||||
<div className="left-pane-contact-content">
|
||||
<ContactListItemSection />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,9 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const StyledLeftPaneList = styled.div`
|
||||
height: -webkit-fill-available;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
`;
|
||||
@ -0,0 +1,100 @@
|
||||
import React from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { AutoSizer, List, ListRowProps } from 'react-virtualized';
|
||||
import styled from 'styled-components';
|
||||
import {
|
||||
getDirectContacts,
|
||||
getDirectContactsCount,
|
||||
} from '../../../../state/selectors/conversations';
|
||||
import { MemoConversationListItemWithDetails } from '../../conversation-list-item/ConversationListItem';
|
||||
import { StyledLeftPaneList } from '../../LeftPaneList';
|
||||
import { StyledChooseActionTitle } from './OverlayChooseAction';
|
||||
// tslint:disable: use-simple-attributes no-submodule-imports
|
||||
|
||||
const renderRow = (props: ListRowProps) => {
|
||||
const { index, key, style, parent } = props;
|
||||
|
||||
// ugly, but it seems react-viurtualized do not support very well functional components just yet
|
||||
// https://stackoverflow.com/questions/54488954/how-to-pass-prop-into-rowrender-of-react-virtualized
|
||||
const directContacts = (parent as any).props.directContacts;
|
||||
const item = directContacts?.[index];
|
||||
if (!item) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <MemoConversationListItemWithDetails style={style} key={key} {...item} />;
|
||||
};
|
||||
|
||||
const ContactListItemSection = () => {
|
||||
const directContacts = useSelector(getDirectContacts);
|
||||
|
||||
if (!directContacts) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const length = Number(directContacts.length);
|
||||
|
||||
return (
|
||||
<StyledLeftPaneList key={0} style={{ width: '100%' }}>
|
||||
<AutoSizer>
|
||||
{({ height }) => {
|
||||
return (
|
||||
<List
|
||||
className="module-left-pane__virtual-list"
|
||||
height={height}
|
||||
rowCount={length}
|
||||
rowHeight={64}
|
||||
directContacts={directContacts}
|
||||
rowRenderer={renderRow}
|
||||
width={300} // the same as session-left-pane-width
|
||||
autoHeight={false}
|
||||
/>
|
||||
);
|
||||
}}
|
||||
</AutoSizer>
|
||||
</StyledLeftPaneList>
|
||||
);
|
||||
};
|
||||
|
||||
const StyledContactSection = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
|
||||
.module-conversation-list-item __header__date,
|
||||
.module-conversation-list-item __message {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.module-conversation-list-item __buttons {
|
||||
display: flex;
|
||||
|
||||
.session-button {
|
||||
font-size: 11px;
|
||||
padding: 6px;
|
||||
height: auto;
|
||||
margin: 0px;
|
||||
line-height: 14px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
const ContactsTitle = () => {
|
||||
const contactsCount = useSelector(getDirectContactsCount);
|
||||
if (contactsCount <= 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return <StyledChooseActionTitle>{window.i18n('contactsHeader')}</StyledChooseActionTitle>;
|
||||
};
|
||||
|
||||
export const ContactsListWithBreaks = () => {
|
||||
return (
|
||||
<StyledContactSection>
|
||||
<ContactsTitle />
|
||||
<ContactListItemSection />
|
||||
</StyledContactSection>
|
||||
);
|
||||
};
|
||||
Loading…
Reference in New Issue