Skip to content

Commit c918d04

Browse files
isekovanicisekovanic
committed
fix: message actions portal flicker
1 parent aaa2179 commit c918d04

File tree

4 files changed

+145
-114
lines changed

4 files changed

+145
-114
lines changed

‎package/src/components/Message/hooks/useMessageActions.tsx‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,6 @@ export const useMessageActions = ({
7474
client,
7575
deleteMessage: deleteMessageFromContext,
7676
deleteReaction,
77-
dismissOverlay,
7877
enforceUniqueReaction,
7978
handleBan,
8079
handleCopy,
@@ -144,7 +143,6 @@ export const useMessageActions = ({
144143
});
145144

146145
const onBanUser = useStableCallback(async () => {
147-
dismissOverlay();
148146
if (message.user?.id) {
149147
if (handleBan) {
150148
handleBan(message);
@@ -155,55 +153,49 @@ export const useMessageActions = ({
155153
});
156154

157155
const onCopyMessage = useStableCallback(() => {
158-
dismissOverlay();
156+
//
159157
if (handleCopy) {
160158
handleCopy(message);
161159
}
162160
handleCopyMessage();
163161
});
164162

165163
const onDeleteMessage = useStableCallback(() => {
166-
dismissOverlay();
167164
if (handleDelete) {
168165
handleDelete(message);
169166
}
170167
handleDeleteMessage();
171168
});
172169

173170
const onDeleteForMeMessage = useStableCallback(() => {
174-
dismissOverlay();
175171
if (handleDeleteForMe) {
176172
handleDeleteForMe(message);
177173
}
178174
handleDeleteForMeMessage();
179175
});
180176

181177
const onEditMessage = useStableCallback(() => {
182-
dismissOverlay();
183178
if (handleEdit) {
184179
handleEdit(message);
185180
}
186181
handleEditMessage();
187182
});
188183

189184
const onFlagMessage = useStableCallback(() => {
190-
dismissOverlay();
191185
if (handleFlag) {
192186
handleFlag(message);
193187
}
194188
handleFlagMessage();
195189
});
196190

197191
const onMarkUnread = useStableCallback(() => {
198-
dismissOverlay();
199192
if (handleMarkUnread) {
200193
handleMarkUnread(message);
201194
}
202195
handleMarkUnreadMessage();
203196
});
204197

205198
const onTogglePinMessage = useStableCallback(() => {
206-
dismissOverlay();
207199
if (handlePinMessage) {
208200
handlePinMessage(message);
209201
}
@@ -219,7 +211,6 @@ export const useMessageActions = ({
219211
});
220212

221213
const onMuteUser = useStableCallback(async () => {
222-
dismissOverlay();
223214
if (message.user?.id) {
224215
if (handleMute) {
225216
handleMute(message);
@@ -230,15 +221,13 @@ export const useMessageActions = ({
230221
});
231222

232223
const onQuotedReply = useStableCallback(() => {
233-
dismissOverlay();
234224
if (handleQuotedReply) {
235225
handleQuotedReply(message);
236226
}
237227
handleQuotedReplyMessage();
238228
});
239229

240230
const onRetry = useStableCallback(async () => {
241-
dismissOverlay();
242231
const messageWithoutReservedFields = removeReservedFields(message);
243232
if (handleRetry) {
244233
handleRetry(messageWithoutReservedFields as LocalMessage);
@@ -248,15 +237,13 @@ export const useMessageActions = ({
248237
});
249238

250239
const onThreadReply = useStableCallback(() => {
251-
dismissOverlay();
252240
if (handleThreadReply) {
253241
handleThreadReply(message);
254242
}
255243
onOpenThread();
256244
});
257245

258246
const onBlockUser = useStableCallback(() => {
259-
dismissOverlay();
260247
if (handleBlockUser) {
261248
handleBlockUser(message.user);
262249
}

‎package/src/components/Thread/__tests__/__snapshots__/Thread.test.js.snap‎

Lines changed: 103 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1770,136 +1770,116 @@ exports[`Thread should match thread snapshot 1`] = `
17701770
<View
17711771
entering={BaseAnimationMock {}}
17721772
exiting={BaseAnimationMock {}}
1773-
style={
1774-
[
1775-
{},
1776-
{},
1777-
{
1778-
"transform": [
1779-
{
1780-
"rotate": "0deg",
1781-
},
1782-
],
1783-
},
1784-
]
1785-
}
17861773
>
17871774
<View
17881775
style={
17891776
[
1777+
{},
1778+
{},
17901779
{
1791-
"borderRadius": 9999,
1792-
},
1793-
{
1794-
"backgroundColor": undefined,
1795-
"borderColor": "#d5dbe1",
1796-
"borderWidth": 1,
1797-
"height": 48,
1798-
"width": 48,
1780+
"transform": [
1781+
{
1782+
"rotate": "0deg",
1783+
},
1784+
],
17991785
},
1800-
undefined,
18011786
]
18021787
}
18031788
>
18041789
<View
1805-
accessibilityState={
1806-
{
1807-
"busy": undefined,
1808-
"checked": undefined,
1809-
"disabled": false,
1810-
"expanded": undefined,
1811-
"selected": undefined,
1812-
}
1813-
}
1814-
accessibilityValue={
1815-
{
1816-
"max": undefined,
1817-
"min": undefined,
1818-
"now": undefined,
1819-
"text": undefined,
1820-
}
1821-
}
1822-
accessible={true}
1823-
collapsable={false}
1824-
focusable={true}
1825-
onBlur={[Function]}
1826-
onClick={[Function]}
1827-
onFocus={[Function]}
1828-
onResponderGrant={[Function]}
1829-
onResponderMove={[Function]}
1830-
onResponderRelease={[Function]}
1831-
onResponderTerminate={[Function]}
1832-
onResponderTerminationRequest={[Function]}
1833-
onStartShouldSetResponder={[Function]}
18341790
style={
18351791
[
18361792
{
1837-
"backgroundColor": "transparent",
1838-
"paddingHorizontal": 0,
1793+
"borderRadius": 9999,
18391794
},
18401795
{
1841-
"alignItems": "center",
1842-
"borderRadius": 9999,
1843-
"flex": 1,
1844-
"flexDirection": "row",
1845-
"gap": 8,
1846-
"justifyContent": "center",
1796+
"backgroundColor": undefined,
1797+
"borderColor": "#d5dbe1",
1798+
"borderWidth": 1,
1799+
"height": 48,
1800+
"width": 48,
18471801
},
1802+
undefined,
18481803
]
18491804
}
1850-
testID="attach-button"
18511805
>
1852-
<RNSVGSvgView
1853-
align="xMidYMid"
1854-
bbHeight={20}
1855-
bbWidth={20}
1856-
focusable={false}
1857-
height={20}
1858-
meetOrSlice={0}
1859-
minX={0}
1860-
minY={0}
1861-
stroke="#1a1b25"
1862-
strokeWidth={1.5}
1806+
<View
1807+
accessibilityState={
1808+
{
1809+
"busy": undefined,
1810+
"checked": undefined,
1811+
"disabled": false,
1812+
"expanded": undefined,
1813+
"selected": undefined,
1814+
}
1815+
}
1816+
accessibilityValue={
1817+
{
1818+
"max": undefined,
1819+
"min": undefined,
1820+
"now": undefined,
1821+
"text": undefined,
1822+
}
1823+
}
1824+
accessible={true}
1825+
collapsable={false}
1826+
focusable={true}
1827+
onBlur={[Function]}
1828+
onClick={[Function]}
1829+
onFocus={[Function]}
1830+
onResponderGrant={[Function]}
1831+
onResponderMove={[Function]}
1832+
onResponderRelease={[Function]}
1833+
onResponderTerminate={[Function]}
1834+
onResponderTerminationRequest={[Function]}
1835+
onStartShouldSetResponder={[Function]}
18631836
style={
18641837
[
18651838
{
18661839
"backgroundColor": "transparent",
1867-
"borderWidth": 0,
1840+
"paddingHorizontal": 0,
18681841
},
18691842
{
1870-
"flex": 0,
1871-
"height": 20,
1872-
"width": 20,
1843+
"alignItems": "center",
1844+
"borderRadius": 9999,
1845+
"flex": 1,
1846+
"flexDirection": "row",
1847+
"gap": 8,
1848+
"justifyContent": "center",
18731849
},
18741850
]
18751851
}
1876-
vbHeight={20}
1877-
vbWidth={20}
1878-
width={20}
1852+
testID="attach-button"
18791853
>
1880-
<RNSVGGroup
1881-
fill={
1882-
{
1883-
"payload": 4278190080,
1884-
"type": 0,
1885-
}
1886-
}
1887-
propList={
1854+
<RNSVGSvgView
1855+
align="xMidYMid"
1856+
bbHeight={20}
1857+
bbWidth={20}
1858+
focusable={false}
1859+
height={20}
1860+
meetOrSlice={0}
1861+
minX={0}
1862+
minY={0}
1863+
stroke="#1a1b25"
1864+
strokeWidth={1.5}
1865+
style={
18881866
[
1889-
"stroke",
1890-
"strokeWidth",
1867+
{
1868+
"backgroundColor": "transparent",
1869+
"borderWidth": 0,
1870+
},
1871+
{
1872+
"flex": 0,
1873+
"height": 20,
1874+
"width": 20,
1875+
},
18911876
]
18921877
}
1893-
stroke={
1894-
{
1895-
"payload": 4279900965,
1896-
"type": 0,
1897-
}
1898-
}
1899-
strokeWidth={1.5}
1878+
vbHeight={20}
1879+
vbWidth={20}
1880+
width={20}
19001881
>
1901-
<RNSVGPath
1902-
d="M10 3.125V10M10 10V16.875M10 10H3.125M10 10H16.875"
1882+
<RNSVGGroup
19031883
fill={
19041884
{
19051885
"payload": 4278190080,
@@ -1919,9 +1899,32 @@ exports[`Thread should match thread snapshot 1`] = `
19191899
}
19201900
}
19211901
strokeWidth={1.5}
1922-
/>
1923-
</RNSVGGroup>
1924-
</RNSVGSvgView>
1902+
>
1903+
<RNSVGPath
1904+
d="M10 3.125V10M10 10V16.875M10 10H3.125M10 10H16.875"
1905+
fill={
1906+
{
1907+
"payload": 4278190080,
1908+
"type": 0,
1909+
}
1910+
}
1911+
propList={
1912+
[
1913+
"stroke",
1914+
"strokeWidth",
1915+
]
1916+
}
1917+
stroke={
1918+
{
1919+
"payload": 4279900965,
1920+
"type": 0,
1921+
}
1922+
}
1923+
strokeWidth={1.5}
1924+
/>
1925+
</RNSVGGroup>
1926+
</RNSVGSvgView>
1927+
</View>
19251928
</View>
19261929
</View>
19271930
</View>

0 commit comments

Comments
 (0)