Skip to content

Commit c7d5553

Browse files
vishalnarkhedevishalnarkhede
authored
Merge pull request #1108 from GetStream/khushal87-crns-285
feat: revamped giphy interaction from prev/next to shuffle [CRNS - 285]
2 parents 5388343 + 50ca799 commit c7d5553

File tree

8 files changed

+83
-116
lines changed

8 files changed

+83
-116
lines changed

‎examples/SampleApp/src/screens/GroupChannelDetailsScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useContext, useEffect, useRef, useState } from 'react';
1+
import React, { useEffect, useRef, useState } from 'react';
22
import {
33
ScrollView,
44
StyleSheet,

‎package/src/components/Attachment/Giphy.tsx‎

Lines changed: 64 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,8 @@ import {
1212
useMessagesContext,
1313
} from '../../contexts/messagesContext/MessagesContext';
1414
import { useTheme } from '../../contexts/themeContext/ThemeContext';
15-
import { Left } from '../../icons/Left';
15+
import { GiphyIcon } from '../../icons';
1616
import { Lightning } from '../../icons/Lightning';
17-
import { Right } from '../../icons/Right';
1817
import type {
1918
DefaultAttachmentType,
2019
DefaultChannelType,
@@ -28,25 +27,20 @@ import type {
2827
import { makeImageCompatibleUrl } from '../../utils/utils';
2928

3029
const styles = StyleSheet.create({
30+
buttonContainer: { alignItems: 'center', borderTopWidth: 1, flex: 1, justifyContent: 'center' },
3131
cancel: {
3232
fontSize: 14,
3333
fontWeight: '600',
3434
paddingVertical: 16,
3535
},
36-
cancelContainer: {
37-
alignItems: 'center',
38-
borderRightWidth: 1,
39-
flex: 1,
40-
justifyContent: 'center',
41-
},
4236
container: {
4337
overflow: 'hidden',
44-
width: 256,
38+
width: 270,
4539
},
4640
giphy: {
47-
borderTopLeftRadius: 8,
48-
borderTopRightRadius: 8,
49-
height: 140,
41+
borderRadius: 2,
42+
height: 170,
43+
width: 270,
5044
},
5145
giphyContainer: {
5246
alignItems: 'center',
@@ -56,36 +50,47 @@ const styles = StyleSheet.create({
5650
justifyContent: 'center',
5751
width: 68,
5852
},
53+
giphyHeaderText: {
54+
fontSize: 16,
55+
fontWeight: '600',
56+
},
57+
giphyHeaderTitle: {
58+
fontSize: 14,
59+
},
5960
giphyMask: {
6061
bottom: 8,
6162
left: 8,
6263
position: 'absolute',
6364
},
64-
giphyText: { fontSize: 11, fontWeight: '600' },
65+
giphyMaskText: { fontSize: 13, fontWeight: '600' },
66+
header: {
67+
alignItems: 'center',
68+
display: 'flex',
69+
flexDirection: 'row',
70+
justifyContent: 'space-between',
71+
padding: 8,
72+
width: '60%',
73+
},
6574
margin: {
66-
margin: 8,
75+
margin: 1,
6776
},
6877
row: { flexDirection: 'row' },
6978
selectionContainer: {
70-
borderRadius: 8,
79+
borderBottomLeftRadius: 8,
7180
borderWidth: 1,
7281
overflow: 'hidden',
73-
width: 250,
74-
},
75-
selector: {
76-
alignItems: 'center',
77-
borderBottomWidth: 1,
78-
flexDirection: 'row',
79-
justifyContent: 'space-between',
80-
paddingBottom: 8,
81-
paddingHorizontal: 8,
82+
width: 272,
8283
},
8384
send: {
8485
fontSize: 14,
8586
fontWeight: '600',
8687
paddingVertical: 16,
8788
},
88-
sendContainer: { alignItems: 'center', flex: 1, justifyContent: 'center' },
89+
shuffle: {
90+
fontSize: 14,
91+
fontWeight: '600',
92+
paddingVertical: 16,
93+
},
8994
shuffleButton: {
9095
alignItems: 'center',
9196
borderRadius: 16,
@@ -94,11 +99,6 @@ const styles = StyleSheet.create({
9499
justifyContent: 'center',
95100
width: 32,
96101
},
97-
title: {
98-
fontSize: 14,
99-
fontStyle: 'italic',
100-
fontWeight: '500',
101-
},
102102
});
103103

104104
export type GiphyPropsWithContext<
@@ -142,22 +142,22 @@ const GiphyWithContext = <
142142

143143
const {
144144
theme: {
145-
colors: { accent_blue, black, border, grey, overlay, white },
145+
colors: { accent_blue, black, grey, grey_dark, grey_gainsboro, white },
146146
messageSimple: {
147147
giphy: {
148+
buttonContainer,
148149
cancel,
149-
cancelContainer,
150150
container,
151151
giphy,
152152
giphyContainer,
153+
giphyHeaderText,
154+
giphyHeaderTitle,
153155
giphyMask,
154-
giphyText,
156+
giphyMaskText,
157+
header,
155158
selectionContainer,
156-
selector,
157159
send,
158-
sendContainer,
159-
shuffleButton,
160-
title: titleStyle,
160+
shuffle,
161161
},
162162
},
163163
},
@@ -175,59 +175,57 @@ const GiphyWithContext = <
175175
selectionContainer,
176176
]}
177177
>
178+
<View style={[styles.header, header]}>
179+
<GiphyIcon />
180+
<Text style={[styles.giphyHeaderText, giphyHeaderText]}>Giphy</Text>
181+
<Text
182+
style={[styles.giphyHeaderTitle, giphyHeaderTitle, { color: grey_dark }]}
183+
>{`/giphy ${title}`}</Text>
184+
</View>
178185
<View style={styles.margin}>
179186
<Image
180187
resizeMode='cover'
181188
source={{ uri: makeImageCompatibleUrl(uri) }}
182189
style={[styles.giphy, giphy]}
183190
/>
184-
<View style={[styles.giphyMask, giphyMask]}>
185-
<View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
186-
<Lightning height={16} pathFill={white} width={16} />
187-
<Text style={[styles.giphyText, { color: white }, giphyText]}>
188-
{type?.toUpperCase()}
189-
</Text>
190-
</View>
191-
</View>
192191
</View>
193192
<View>
194-
<View style={[styles.selector, { borderBottomColor: border }, selector]}>
195-
<TouchableOpacity
196-
onPress={() => handleAction('image_action', 'shuffle')}
197-
style={[styles.shuffleButton, { borderColor: border }, shuffleButton]}
198-
>
199-
<Left />
200-
</TouchableOpacity>
201-
<Text style={[styles.title, { color: black }, titleStyle]}>{`"${title}"`}</Text>
193+
<View style={styles.row}>
202194
<TouchableOpacity
203195
onPress={() => {
204-
if (actions?.[1].name && actions?.[1].value && handleAction) {
205-
handleAction(actions[1].name, actions[1].value);
196+
if (actions?.[2].name && actions?.[2].value && handleAction) {
197+
handleAction(actions[2].name, actions[2].value);
206198
}
207199
}}
208-
style={[styles.shuffleButton, shuffleButton]}
200+
style={[
201+
styles.buttonContainer,
202+
{ borderColor: grey_gainsboro, borderRightWidth: 1 },
203+
buttonContainer,
204+
]}
209205
>
210-
<Right />
206+
<Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
211207
</TouchableOpacity>
212-
</View>
213-
<View style={styles.row}>
214208
<TouchableOpacity
215209
onPress={() => {
216-
if (actions?.[2].name && actions?.[2].value && handleAction) {
217-
handleAction(actions[2].name, actions[2].value);
210+
if (actions?.[1].name && actions?.[1].value && handleAction) {
211+
handleAction(actions[1].name, actions[1].value);
218212
}
219213
}}
220-
style={[styles.cancelContainer, { borderRightColor: border }, cancelContainer]}
214+
style={[
215+
styles.buttonContainer,
216+
{ borderColor: grey_gainsboro, borderRightWidth: 1 },
217+
buttonContainer,
218+
]}
221219
>
222-
<Text style={[styles.cancel, { color: grey }, cancel]}>{actions?.[2].text}</Text>
220+
<Text style={[styles.shuffle, { color: grey }, shuffle]}>{actions?.[1].text}</Text>
223221
</TouchableOpacity>
224222
<TouchableOpacity
225223
onPress={() => {
226224
if (actions?.[0].name && actions?.[0].value && handleAction) {
227225
handleAction(actions[0].name, actions[0].value);
228226
}
229227
}}
230-
style={[styles.sendContainer, sendContainer]}
228+
style={[styles.buttonContainer, { borderColor: grey_gainsboro }, buttonContainer]}
231229
>
232230
<Text style={[styles.send, { color: accent_blue }, send]}>{actions?.[0].text}</Text>
233231
</TouchableOpacity>
@@ -272,9 +270,9 @@ const GiphyWithContext = <
272270
style={[styles.giphy, giphy]}
273271
/>
274272
<View style={[styles.giphyMask, giphyMask]}>
275-
<View style={[styles.giphyContainer, { backgroundColor: overlay }, giphyContainer]}>
273+
<View style={[styles.giphyContainer, { backgroundColor: grey_dark }, giphyContainer]}>
276274
<Lightning height={16} pathFill={white} width={16} />
277-
<Text style={[styles.giphyText, { color: white }, giphyText]}>
275+
<Text style={[styles.giphyMaskText, { color: white }, giphyMaskText]}>
278276
{type?.toUpperCase()}
279277
</Text>
280278
</View>

‎package/src/components/Message/MessageSimple/MessageFooter.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const MessageFooterWithContext = <
8686

8787
const {
8888
theme: {
89-
colors: { grey },
89+
colors: { grey, grey_dark },
9090
messageSimple: {
9191
content: { deletedMetaText, eyeIcon, messageUser, metaContainer, metaText },
9292
},
@@ -99,11 +99,11 @@ const MessageFooterWithContext = <
9999
<View style={metaContainer} testID='message-deleted'>
100100
{deletedMessagesVisibilityType === 'sender' && (
101101
<>
102-
<Eye pathFill={isDeleted ? undefined : grey} {...eyeIcon} />
102+
<Eye pathFill={grey_dark} {...eyeIcon} />
103103
<Text
104104
style={[
105105
{
106-
color: grey,
106+
color: grey_dark,
107107
textAlign: alignment,
108108
},
109109
metaText,
@@ -138,11 +138,11 @@ const MessageFooterWithContext = <
138138
<View style={metaContainer} testID='message-status-time'>
139139
{otherAttachments.length && otherAttachments[0].actions ? (
140140
<>
141-
<Eye {...eyeIcon} />
141+
<Eye pathFill={grey_dark} {...eyeIcon} />
142142
<Text
143143
style={[
144144
{
145-
color: grey,
145+
color: grey_dark,
146146
textAlign: alignment,
147147
},
148148
metaText,

‎package/src/contexts/themeContext/utils/theme.ts‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -417,18 +417,19 @@ export type Theme = {
417417
moreImagesText: TextStyle;
418418
};
419419
giphy: {
420+
buttonContainer: ViewStyle;
420421
cancel: TextStyle;
421-
cancelContainer: ViewStyle;
422422
container: ViewStyle;
423423
giphy: ImageStyle;
424424
giphyContainer: ViewStyle;
425+
giphyHeaderText: TextStyle;
426+
giphyHeaderTitle: TextStyle;
425427
giphyMask: ViewStyle;
426-
giphyText: TextStyle;
428+
giphyMaskText: TextStyle;
429+
header: ViewStyle;
427430
selectionContainer: ViewStyle;
428-
selector: ViewStyle;
429431
send: TextStyle;
430-
sendContainer: ViewStyle;
431-
shuffleButton: ViewStyle;
432+
shuffle: TextStyle;
432433
title: TextStyle;
433434
};
434435
pinnedHeader: {
@@ -837,7 +838,7 @@ export const defaultTheme: Theme = {
837838
deletedContainer: {},
838839
deletedContainerInner: {},
839840
deletedMetaText: {
840-
paddingHorizontal: 10,
841+
paddingHorizontal: 5,
841842
},
842843
deletedText: {
843844
em: {
@@ -908,18 +909,19 @@ export const defaultTheme: Theme = {
908909
moreImagesText: {},
909910
},
910911
giphy: {
912+
buttonContainer: {},
911913
cancel: {},
912-
cancelContainer: {},
913914
container: {},
914915
giphy: {},
915916
giphyContainer: {},
917+
giphyHeaderText: {},
918+
giphyHeaderTitle: {},
916919
giphyMask: {},
917-
giphyText: {},
920+
giphyMaskText: {},
921+
header: {},
918922
selectionContainer: {},
919-
selector: {},
920923
send: {},
921-
sendContainer: {},
922-
shuffleButton: {},
924+
shuffle: {},
923925
title: {},
924926
},
925927
pinnedHeader: {

‎package/src/icons/Left.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎package/src/icons/Right.tsx‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎package/src/icons/index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,6 @@ export * from './Grid';
3030
export * from './Group';
3131
export * from './HTML';
3232
export * from './Imgur';
33-
export * from './Left';
3433
export * from './Lightning';
3534
export * from './Link';
3635
export * from './Loading';
@@ -54,7 +53,6 @@ export * from './PPT';
5453
export * from './PPTX';
5554
export * from './RAR';
5655
export * from './Refresh';
57-
export * from './Right';
5856
export * from './RTF';
5957
export * from './Search';
6058
export * from './SendRight';

‎package/yarn.lock‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6435,13 +6435,6 @@ is-core-module@^2.8.0:
64356435
dependencies:
64366436
has "^1.0.3"
64376437

6438-
is-core-module@^2.8.0:
6439-
version "2.8.1"
6440-
resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
6441-
integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
6442-
dependencies:
6443-
has "^1.0.3"
6444-
64456438
is-data-descriptor@^0.1.4:
64466439
version "0.1.4"
64476440
resolved "https://registry.yarnpkg.com/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz#0b5ee648388e2c860282e793f1856fec3f301b56"

0 commit comments

Comments
 (0)