admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

IO-2311 fixed tile height

Browse Source
This commit is contained in:
swtmply
2023-06-06 22:39:39 +08:00
parent 0669282432
commit 6b8d0ec91c
1 changed files with 59 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
client/src/components/chat-conversation-list/chat-conversation-list.component.jsx
View File

@@ -7,7 +7,12 @@ import { selectSelectedConversation } from "../../redux/messaging/messaging.sele
import { TimeAgoFormatter } from "../../utils/DateFormatter"; import { TimeAgoFormatter } from "../../utils/DateFormatter";
import PhoneFormatter from "../../utils/PhoneFormatter"; import PhoneFormatter from "../../utils/PhoneFormatter";
import OwnerNameDisplay from "../owner-name-display/owner-name-display.component"; import OwnerNameDisplay from "../owner-name-display/owner-name-display.component";
import { List as VirtualizedList, AutoSizer } from "react-virtualized"; import {
List as VirtualizedList,
AutoSizer,
CellMeasurerCache,
CellMeasurer,
} from "react-virtualized";
import "./chat-conversation-list.styles.scss"; import "./chat-conversation-list.styles.scss";
@@ -33,48 +38,64 @@ function ChatConversationListComponent({
[] []
); );
const rowRenderer = ({ index, key, style }) => { const cache = new CellMeasurerCache({
fixedWidth: true,
defaultHeight: 60,
});
const rowRenderer = ({ index, key, style, parent }) => {
const item = conversationList[index]; const item = conversationList[index];
return ( return (
<List.Item <CellMeasurer
key={key} key={key}
onClick={() => setSelectedConversation(item.id)} cache={cache}
className={`chat-list-item ${ parent={parent}
item.id === selectedConversation columnIndex={0}
? "chat-list-selected-conversation" rowIndex={index}
: null
}`}
style={style}
> >
<div sryle={{ display: "inline-block" }}> <List.Item
{item.label && <div className="chat-name">{item.label}</div>} onClick={() => setSelectedConversation(item.id)}
{item.job_conversations.length > 0 ? ( className={`chat-list-item ${
<div className="chat-name"> item.id === selectedConversation
{item.job_conversations.map((j, idx) => ( ? "chat-list-selected-conversation"
<div key={idx}> : null
<OwnerNameDisplay ownerObject={j.job} /> }`}
</div> style={style}
))} >
</div> <div
) : ( style={{
<PhoneFormatter>{item.phone_num}</PhoneFormatter> display: "inline-block",
)} }}
</div> >
<div sryle={{ display: "inline-block" }}> {item.label && <div className="chat-name">{item.label}</div>}
<div> {item.job_conversations.length > 0 ? (
{item.job_conversations.length > 0 <div className="chat-name">
? item.job_conversations.map((j, idx) => ( {item.job_conversations.map((j, idx) => (
<Tag key={idx} className="ro-number-tag"> <div key={idx}>
{j.job.ro_number} <OwnerNameDisplay ownerObject={j.job} />
</Tag> </div>
)) ))}
: null} </div>
) : (
<PhoneFormatter>{item.phone_num}</PhoneFormatter>
)}
</div> </div>
<TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter> <div style={{ display: "inline-block" }}>
</div> <div>
<Badge count={item.messages_aggregate.aggregate.count || 0} /> {item.job_conversations.length > 0
</List.Item> ? item.job_conversations.map((j, idx) => (
<Tag key={idx} className="ro-number-tag">
{j.job.ro_number}
</Tag>
))
: null}
</div>
<TimeAgoFormatter>{item.updated_at}</TimeAgoFormatter>
</div>
<Badge count={item.messages_aggregate.aggregate.count || 0} />
</List.Item>
</CellMeasurer>
); );
}; };
@@ -86,7 +107,7 @@ function ChatConversationListComponent({
height={height} height={height}
width={width} width={width}
rowCount={conversationList.length} rowCount={conversationList.length}
rowHeight={60} rowHeight={cache.rowHeight}
rowRenderer={rowRenderer} rowRenderer={rowRenderer}
onScroll={({ scrollTop, scrollHeight, clientHeight }) => { onScroll={({ scrollTop, scrollHeight, clientHeight }) => {
if (scrollTop + clientHeight === scrollHeight) { if (scrollTop + clientHeight === scrollHeight) {