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