Skip to content

Commit f677732

Browse files
arnautov-antonarnautov-anton
committed
Unread badges and loadUnreadThreads button \w icon
1 parent 386105c commit f677732

File tree

9 files changed

+268
-127
lines changed

9 files changed

+268
-127
lines changed

‎examples/vite/src/App.tsx

+19-17
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
ThreadList,
1414
ThreadProvider,
1515
} from 'stream-chat-react';
16-
import 'stream-chat-react/css/v2/index.css';
16+
import '@stream-io/stream-chat-css/dist/v2/css/index.css';
1717

1818
const params = (new Proxy(new URLSearchParams(window.location.search), {
1919
get: (searchParams, property) => searchParams.get(property as string),
@@ -65,20 +65,22 @@ const App = () => {
6565

6666
return (
6767
<Chat client={chatClient}>
68-
{!threadOnly && (
69-
<>
70-
<ChannelList filters={filters} options={options} sort={sort} />
71-
<Channel>
72-
<Window>
73-
<ChannelHeader />
74-
<MessageList returnAllReadData />
75-
<MessageInput focus />
76-
</Window>
77-
<Thread />
78-
</Channel>
79-
</>
80-
)}
81-
{threadOnly && <Threads />}
68+
<div className='str-chat'>
69+
{!threadOnly && (
70+
<>
71+
<ChannelList filters={filters} options={options} sort={sort} />
72+
<Channel>
73+
<Window>
74+
<ChannelHeader />
75+
<MessageList returnAllReadData />
76+
<MessageInput focus />
77+
</Window>
78+
<Thread virtualized />
79+
</Channel>
80+
</>
81+
)}
82+
{threadOnly && <Threads />}
83+
</div>
8284
</Chat>
8385
);
8486
};
@@ -87,8 +89,8 @@ const Threads = () => {
8789
const [state, setState] = useState<ThreadType | undefined>(undefined);
8890

8991
return (
90-
<div className='str-chat threads'>
91-
<ThreadList onItemPointerDown={(_, thread) => setState(thread)} />
92+
<div className='str-chat__threads'>
93+
<ThreadList threadListItemProps={{ onPointerDown: (_, t) => setState(t) }} />
9294
<ThreadProvider thread={state}>
9395
<Thread virtualized />
9496
</ThreadProvider>

‎examples/vite/src/index.scss

+129-75
Original file line numberDiff line numberDiff line change
@@ -16,70 +16,10 @@ body,
1616
display: flex;
1717
height: 100%;
1818

19-
// .str-chat__thread-list {
20-
// width: 50%;
21-
// height: 100%;
22-
// }
23-
24-
.str-chat__thread-list-item {
25-
all: unset;
26-
box-sizing: border-box;
27-
padding-block: 14px;
28-
padding-inline: 8px;
29-
gap: 6px;
19+
& > div.str-chat {
20+
height: 100%;
3021
width: 100%;
3122
display: flex;
32-
flex-direction: column;
33-
cursor: pointer;
34-
}
35-
36-
.str-chat__thread-list-item__channel {
37-
font-size: 14px;
38-
font-weight: 400;
39-
}
40-
41-
.str-chat__thread-list-item__parent-message {
42-
font-size: 12px;
43-
font-weight: 400;
44-
overflow: hidden;
45-
white-space: nowrap;
46-
text-overflow: ellipsis;
47-
}
48-
49-
.str-chat__thread-list-item__latest-reply-container {
50-
display: flex;
51-
align-items: center;
52-
gap: 5px;
53-
}
54-
55-
.str-chat__thread-list-item__latest-reply-details {
56-
display: flex;
57-
flex-direction: column;
58-
flex-grow: 1;
59-
gap: 4px;
60-
width: 0;
61-
}
62-
63-
.str-chat__thread-list-item__latest-reply-created-by {
64-
font-weight: 500;
65-
font-size: 16px;
66-
}
67-
68-
.str-chat__thread-list-item__latest-reply-text {
69-
display: flex;
70-
font-size: 14px;
71-
font-weight: 400;
72-
justify-content: space-between;
73-
74-
& > div:first-child {
75-
overflow: hidden;
76-
white-space: nowrap;
77-
text-overflow: ellipsis;
78-
}
79-
80-
& > div:last-child {
81-
white-space: nowrap;
82-
}
8323
}
8424

8525
.str-chat__channel-list {
@@ -122,18 +62,6 @@ body,
12262
}
12363
}
12464

125-
.str-chat.threads {
126-
display: flex;
127-
height: 100%;
128-
width: 100%;
129-
130-
.vml {
131-
display: flex;
132-
flex-direction: column;
133-
width: 70%;
134-
}
135-
}
136-
13765
@media screen and (min-width: 768px) {
13866
//.str-chat__channel-list.thread-open {
13967
// &.menu-open {
@@ -177,4 +105,130 @@ body,
177105
display: none;
178106
}
179107
}
180-
}
108+
}
109+
110+
.str-chat__threads {
111+
display: flex;
112+
width: 100%;
113+
114+
.str-chat__thread {
115+
width: 100%;
116+
}
117+
118+
.str-chat__thread-list {
119+
height: 100%;
120+
max-width: 420px;
121+
}
122+
}
123+
124+
.str-chat__thread-list-container {
125+
width: 40%;
126+
display: flex;
127+
flex-direction: column;
128+
flex-grow: 1;
129+
font-size: 16px;
130+
font-weight: 400;
131+
}
132+
133+
.str-chat__unread-threads-banner {
134+
margin: 8px;
135+
border-radius: 16px;
136+
padding: 16px;
137+
background: #080707;
138+
color: white;
139+
display: flex;
140+
align-items: center;
141+
justify-content: space-between;
142+
}
143+
.str-chat__unread-threads-banner__button {
144+
all: unset;
145+
cursor: pointer;
146+
display: flex;
147+
align-items: center;
148+
justify-content: center;
149+
width: 24px;
150+
height: 24px;
151+
}
152+
153+
.str-chat__thread-list-item {
154+
all: unset;
155+
box-sizing: border-box;
156+
padding-block: 14px;
157+
padding-inline: 8px;
158+
gap: 6px;
159+
width: 100%;
160+
display: flex;
161+
flex-direction: column;
162+
cursor: pointer;
163+
}
164+
165+
.str-chat__thread-list-item__channel {
166+
font-size: 14px;
167+
font-weight: 400;
168+
}
169+
170+
.str-chat__thread-list-item__parent-message {
171+
display: flex;
172+
gap: 3px;
173+
justify-content: space-between;
174+
align-items: center;
175+
}
176+
177+
.str-chat__thread-list-item__parent-message-text {
178+
font-size: 12px;
179+
font-weight: 400;
180+
overflow: hidden;
181+
white-space: nowrap;
182+
text-overflow: ellipsis;
183+
}
184+
185+
.str-chat__thread-list-item__parent-message-unread-count {
186+
font-size: 12px;
187+
line-height: 1;
188+
font-weight: 700;
189+
width: 22px;
190+
height: 22px;
191+
background: #ff3842;
192+
color: #fff;
193+
border-radius: 9999px;
194+
flex-shrink: 0;
195+
display: flex;
196+
align-items: center;
197+
justify-content: center;
198+
}
199+
200+
.str-chat__thread-list-item__latest-reply-container {
201+
display: flex;
202+
align-items: center;
203+
gap: 5px;
204+
}
205+
206+
.str-chat__thread-list-item__latest-reply-details {
207+
display: flex;
208+
flex-direction: column;
209+
flex-grow: 1;
210+
gap: 4px;
211+
width: 0;
212+
}
213+
214+
.str-chat__thread-list-item__latest-reply-created-by {
215+
font-weight: 500;
216+
font-size: 16px;
217+
}
218+
219+
.str-chat__thread-list-item__latest-reply-text {
220+
display: flex;
221+
font-size: 14px;
222+
font-weight: 400;
223+
justify-content: space-between;
224+
225+
& > div:first-child {
226+
overflow: hidden;
227+
white-space: nowrap;
228+
text-overflow: ellipsis;
229+
}
230+
231+
& > div:last-child {
232+
white-space: nowrap;
233+
}
234+
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@
148148
"@semantic-release/changelog": "^6.0.2",
149149
"@semantic-release/git": "^10.0.1",
150150
"@stream-io/rollup-plugin-node-builtins": "^2.1.5",
151-
"@stream-io/stream-chat-css": "^4.16.1",
151+
"@stream-io/stream-chat-css": "link:../stream-chat-css/",
152152
"@testing-library/jest-dom": "^6.1.4",
153153
"@testing-library/react": "^13.1.1",
154154
"@testing-library/react-hooks": "^8.0.0",

‎src/components/MessageList/MessageList.tsx

+2-7
Original file line numberDiff line numberDiff line change
@@ -225,18 +225,13 @@ const MessageListWithContext = <
225225
<UnreadMessagesNotification unreadCount={channelUnreadUiState?.unread_messages} />
226226
)}
227227
<div
228-
className={clsx(messageListClass, {
229-
[customClasses?.threadList || 'str-chat__thread-list']: threadList,
230-
})}
228+
className={clsx(messageListClass, customClasses?.threadList)}
231229
onScroll={onScroll}
232230
ref={setListElement}
233231
tabIndex={0}
234232
>
235233
{showEmptyStateIndicator ? (
236-
<EmptyStateIndicator
237-
key={'empty-state-indicator'}
238-
listType={threadList ? 'thread' : 'message'}
239-
/>
234+
<EmptyStateIndicator listType={threadList ? 'thread' : 'message'} />
240235
) : (
241236
<InfiniteScroll
242237
className='str-chat__message-list-scroll'

‎src/components/Threads/ThreadContext.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export const useThreadContext = () => {
2020
const thread = useContext(ThreadContext);
2121

2222
const placeholder = useMemo(
23-
() => new Thread({ client, registerEventHandlers: false, threadData: {} }),
23+
() => new Thread({ client, registerSubscriptions: false, threadData: {} }),
2424
[client],
2525
);
2626

0 commit comments

Comments
 (0)