Skip to content

Commit 7dfabd7

Browse files
khushal87khushal87
committed
feat: poll ui in message view
1 parent 9c6c24a commit 7dfabd7

File tree

10 files changed

+319
-119
lines changed

10 files changed

+319
-119
lines changed

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,8 @@ const styles = StyleSheet.create({
7878
position: 'absolute',
7979
},
8080
replyContainer: {
81-
flexDirection: 'row',
82-
paddingHorizontal: 8,
83-
paddingTop: 8,
81+
paddingHorizontal: primitives.spacingXs,
82+
paddingTop: primitives.spacingXs,
8483
},
8584
rightAlignContent: {
8685
justifyContent: 'flex-end',

‎package/src/components/Poll/Poll.tsx‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ import {
1515
useTranslationContext,
1616
} from '../../contexts';
1717

18+
import { primitives } from '../../theme';
19+
1820
export type PollProps = Pick<PollContextValue, 'poll' | 'message'> &
1921
Pick<MessagesContextValue, 'PollContent'>;
2022

@@ -24,8 +26,10 @@ export type PollContentProps = {
2426
};
2527

2628
export const PollHeader = () => {
29+
const styles = useStyles();
2730
const { t } = useTranslationContext();
2831
const { enforceUniqueVote, isClosed, maxVotesAllowed, name } = usePollState();
32+
2933
const subtitle = useMemo(() => {
3034
if (isClosed) {
3135
return t('Vote ended');
@@ -41,20 +45,17 @@ export const PollHeader = () => {
4145

4246
const {
4347
theme: {
44-
colors: { text_high_emphasis, text_low_emphasis },
4548
poll: {
4649
message: { header },
4750
},
4851
},
4952
} = useTheme();
5053

5154
return (
52-
<>
53-
<Text style={[styles.headerTitle, { color: text_high_emphasis }, header.title]}>{name}</Text>
54-
<Text style={[styles.headerSubtitle, { color: text_low_emphasis }, header.subtitle]}>
55-
{subtitle}
56-
</Text>
57-
</>
55+
<View style={styles.headerContainer}>
56+
<Text style={[styles.headerTitle, header.title]}>{name}</Text>
57+
<Text style={[styles.headerSubtitle, header.subtitle]}>{subtitle}</Text>
58+
</View>
5859
);
5960
};
6061

@@ -63,6 +64,7 @@ export const PollContent = ({
6364
PollHeader: PollHeaderOverride,
6465
}: PollContentProps) => {
6566
const { options } = usePollState();
67+
const styles = useStyles();
6668

6769
const {
6870
theme: {
@@ -98,9 +100,33 @@ export const Poll = ({ message, poll, PollContent: PollContentOverride }: PollPr
98100
</PollContextProvider>
99101
);
100102

101-
const styles = StyleSheet.create({
102-
container: { padding: 15, width: 270 },
103-
headerSubtitle: { fontSize: 12, marginTop: 4 },
104-
headerTitle: { fontSize: 16, fontWeight: '500' },
105-
optionsWrapper: { marginTop: 12 },
106-
});
103+
const useStyles = () => {
104+
const {
105+
theme: { semantics },
106+
} = useTheme();
107+
return useMemo(() => {
108+
return StyleSheet.create({
109+
container: {
110+
width: 256, // TODO: Fix this
111+
padding: primitives.spacingMd,
112+
gap: primitives.spacingLg,
113+
},
114+
headerContainer: { gap: primitives.spacingXxs },
115+
headerSubtitle: {
116+
color: semantics.chatTextIncoming,
117+
fontSize: primitives.typographyFontSizeSm,
118+
fontWeight: primitives.typographyFontWeightRegular,
119+
lineHeight: primitives.typographyLineHeightTight,
120+
},
121+
headerTitle: {
122+
color: semantics.chatTextIncoming,
123+
fontSize: primitives.typographyFontSizeMd,
124+
fontWeight: primitives.typographyFontWeightSemiBold,
125+
lineHeight: primitives.typographyLineHeightNormal,
126+
},
127+
optionsWrapper: {
128+
gap: primitives.spacingMd,
129+
},
130+
});
131+
}, [semantics]);
132+
};

‎package/src/components/Poll/components/PollButtons.tsx‎

Lines changed: 83 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
import React, { useCallback, useState } from 'react';
2-
import { Modal } from 'react-native';
1+
import React, { useCallback, useMemo, useState } from 'react';
2+
import { Modal, StyleSheet, View } from 'react-native';
33

4-
import { GenericPollButton, PollButtonProps } from './Button';
4+
import { PollButtonProps } from './Button';
55
import { PollAnswersList } from './PollAnswersList';
66
import { PollInputDialog } from './PollInputDialog';
77
import { PollModalHeader } from './PollModalHeader';
88
import { PollAllOptions } from './PollOption';
99
import { PollResults } from './PollResults';
1010

1111
import { useChatContext, usePollContext, useTheme, useTranslationContext } from '../../../contexts';
12+
import { primitives } from '../../../theme';
13+
import { Button } from '../../ui';
1214
import { SafeAreaViewWrapper } from '../../UIComponents/SafeAreaViewWrapper';
15+
import { useIsPollCreatedByClient } from '../hook/useIsPollCreatedByClient';
1316
import { usePollState } from '../hooks/usePollState';
1417

1518
export const ViewResultsButton = (props: PollButtonProps) => {
@@ -32,14 +35,22 @@ export const ViewResultsButton = (props: PollButtonProps) => {
3235
colors: { white },
3336
},
3437
} = useTheme();
38+
const styles = useStyles();
3539

3640
const onRequestClose = useCallback(() => {
3741
setShowResults(false);
3842
}, []);
3943

4044
return (
4145
<>
42-
<GenericPollButton onPress={onPressHandler} title={t('View Results')} />
46+
<Button
47+
variant='secondary'
48+
type='outline'
49+
label={t('View Results')}
50+
onPress={onPressHandler}
51+
size='sm'
52+
style={styles.viewResultsButton}
53+
/>
4354
{showResults ? (
4455
<Modal animationType='slide' onRequestClose={onRequestClose} visible={showResults}>
4556
<SafeAreaViewWrapper style={{ backgroundColor: white, flex: 1 }}>
@@ -81,9 +92,12 @@ export const ShowAllOptionsButton = (props: PollButtonProps) => {
8192
return (
8293
<>
8394
{options && options.length > 10 ? (
84-
<GenericPollButton
95+
<Button
96+
variant='secondary'
97+
type='ghost'
8598
onPress={onPressHandler}
86-
title={t('See all {{count}} options', { count: options.length })}
99+
label={t('See all {{count}} options', { count: options.length })}
100+
size='sm'
87101
/>
88102
) : null}
89103
{showAllOptions ? (
@@ -127,9 +141,12 @@ export const ShowAllCommentsButton = (props: PollButtonProps) => {
127141
return (
128142
<>
129143
{answersCount && answersCount > 0 ? (
130-
<GenericPollButton
144+
<Button
145+
variant='secondary'
146+
type='ghost'
131147
onPress={onPressHandler}
132-
title={t('View {{count}} comments', { count: answersCount })}
148+
label={t('View {{count}} comments', { count: answersCount })}
149+
size='sm'
133150
/>
134151
) : null}
135152
{showAnswers ? (
@@ -167,7 +184,13 @@ export const SuggestOptionButton = (props: PollButtonProps) => {
167184
return (
168185
<>
169186
{!isClosed && allowUserSuggestedOptions ? (
170-
<GenericPollButton onPress={onPressHandler} title={t('Suggest an option')} />
187+
<Button
188+
variant='secondary'
189+
type='ghost'
190+
onPress={onPressHandler}
191+
label={t('Suggest an option')}
192+
size='sm'
193+
/>
171194
) : null}
172195
{showAddOptionDialog ? (
173196
<PollInputDialog
@@ -204,7 +227,13 @@ export const AddCommentButton = (props: PollButtonProps) => {
204227
return (
205228
<>
206229
{!isClosed && allowAnswers ? (
207-
<GenericPollButton onPress={onPressHandler} title={t('Add a comment')} />
230+
<Button
231+
variant='secondary'
232+
type='ghost'
233+
onPress={onPressHandler}
234+
label={t('Add a comment')}
235+
size='sm'
236+
/>
208237
) : null}
209238
{showAddCommentDialog ? (
210239
<PollInputDialog
@@ -223,19 +252,52 @@ export const EndVoteButton = () => {
223252
const { t } = useTranslationContext();
224253
const { createdBy, endVote, isClosed } = usePollState();
225254
const { client } = useChatContext();
255+
const styles = useStyles();
226256

227257
return !isClosed && createdBy?.id === client.userID ? (
228-
<GenericPollButton onPress={endVote} title={t('End Vote')} />
258+
<Button
259+
variant='secondary'
260+
type='outline'
261+
label={t('End Vote')}
262+
onPress={endVote}
263+
size='sm'
264+
style={styles.endVoteButton}
265+
/>
229266
) : null;
230267
};
231268

232-
export const PollButtons = () => (
233-
<>
234-
<ShowAllOptionsButton />
235-
<ShowAllCommentsButton />
236-
<SuggestOptionButton />
237-
<AddCommentButton />
238-
<ViewResultsButton />
239-
<EndVoteButton />
240-
</>
241-
);
269+
export const PollButtons = () => {
270+
const styles = useStyles();
271+
return (
272+
<View style={styles.buttonsContainer}>
273+
<ViewResultsButton />
274+
<EndVoteButton />
275+
<ShowAllOptionsButton />
276+
<SuggestOptionButton />
277+
<AddCommentButton />
278+
<ShowAllCommentsButton />
279+
</View>
280+
);
281+
};
282+
283+
const useStyles = () => {
284+
const {
285+
theme: { semantics },
286+
} = useTheme();
287+
const isPollCreatedByClient = useIsPollCreatedByClient();
288+
return useMemo(() => {
289+
return StyleSheet.create({
290+
buttonsContainer: { gap: primitives.spacingXs },
291+
endVoteButton: {
292+
borderColor: isPollCreatedByClient
293+
? semantics.chatBorderOnChatOutgoing
294+
: semantics.chatBorderOnChatIncoming,
295+
},
296+
viewResultsButton: {
297+
borderColor: isPollCreatedByClient
298+
? semantics.chatBorderOnChatOutgoing
299+
: semantics.chatBorderOnChatIncoming,
300+
},
301+
});
302+
}, [semantics, isPollCreatedByClient]);
303+
};

0 commit comments

Comments
 (0)