@planningcenter/chat-react-native 3.7.0-rc.1 → 3.7.0-rc.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/conversation/attachments/audio_attachment.d.ts.map +1 -1
- package/build/components/conversation/attachments/audio_attachment.js +2 -0
- package/build/components/conversation/attachments/audio_attachment.js.map +1 -1
- package/build/components/conversation/message_form.d.ts.map +1 -1
- package/build/components/conversation/message_form.js +81 -24
- package/build/components/conversation/message_form.js.map +1 -1
- package/build/components/conversations/conversation_actions.d.ts.map +1 -1
- package/build/components/conversations/conversation_actions.js +6 -2
- package/build/components/conversations/conversation_actions.js.map +1 -1
- package/build/components/display/button.d.ts +5 -5
- package/build/components/display/button.d.ts.map +1 -1
- package/build/components/display/button.js +9 -4
- package/build/components/display/button.js.map +1 -1
- package/build/components/display/icon.d.ts +1 -0
- package/build/components/display/icon.d.ts.map +1 -1
- package/build/components/display/icon.js +3 -0
- package/build/components/display/icon.js.map +1 -1
- package/build/components/page/error_boundary.d.ts +1 -1
- package/build/components/primitive/form_sheet.d.ts +48 -0
- package/build/components/primitive/form_sheet.d.ts.map +1 -0
- package/build/components/primitive/form_sheet.js +152 -0
- package/build/components/primitive/form_sheet.js.map +1 -0
- package/build/navigation/index.d.ts +2 -72
- package/build/navigation/index.d.ts.map +1 -1
- package/build/navigation/index.js +2 -4
- package/build/navigation/index.js.map +1 -1
- package/build/screens/attachment_actions/attachment_actions_screen.d.ts.map +1 -1
- package/build/screens/attachment_actions/attachment_actions_screen.js +8 -6
- package/build/screens/attachment_actions/attachment_actions_screen.js.map +1 -1
- package/build/screens/conversation/message_read_receipts_screen.d.ts +2 -3
- package/build/screens/conversation/message_read_receipts_screen.d.ts.map +1 -1
- package/build/screens/conversation/message_read_receipts_screen.js +29 -61
- package/build/screens/conversation/message_read_receipts_screen.js.map +1 -1
- package/build/screens/conversation_filters_screen.d.ts.map +1 -1
- package/build/screens/conversation_filters_screen.js +1 -4
- package/build/screens/conversation_filters_screen.js.map +1 -1
- package/build/screens/conversation_screen.d.ts.map +1 -1
- package/build/screens/conversation_screen.js +7 -7
- package/build/screens/conversation_screen.js.map +1 -1
- package/build/screens/message_actions_screen.d.ts +1 -2
- package/build/screens/message_actions_screen.d.ts.map +1 -1
- package/build/screens/message_actions_screen.js +33 -42
- package/build/screens/message_actions_screen.js.map +1 -1
- package/build/screens/reactions_screen.d.ts.map +1 -1
- package/build/screens/reactions_screen.js +21 -5
- package/build/screens/reactions_screen.js.map +1 -1
- package/build/types/resources/reaction.d.ts +1 -1
- package/build/types/resources/reaction.js.map +1 -1
- package/build/utils/index.d.ts +0 -1
- package/build/utils/index.d.ts.map +1 -1
- package/build/utils/index.js +0 -1
- package/build/utils/index.js.map +1 -1
- package/build/utils/jolt/transform_reaction_event_data_to_reaction_count_resource.js +3 -3
- package/build/utils/jolt/transform_reaction_event_data_to_reaction_count_resource.js.map +1 -1
- package/build/utils/native_adapters/audio.d.ts +1 -0
- package/build/utils/native_adapters/audio.d.ts.map +1 -1
- package/build/utils/native_adapters/audio.js.map +1 -1
- package/package.json +2 -2
- package/src/components/conversation/attachments/audio_attachment.tsx +2 -0
- package/src/components/conversation/message_form.tsx +106 -29
- package/src/components/conversations/conversation_actions.tsx +10 -2
- package/src/components/display/button.tsx +15 -9
- package/src/components/display/icon.tsx +3 -0
- package/src/components/primitive/form_sheet.tsx +254 -0
- package/src/navigation/index.tsx +2 -4
- package/src/screens/attachment_actions/attachment_actions_screen.tsx +8 -8
- package/src/screens/conversation/message_read_receipts_screen.tsx +38 -74
- package/src/screens/conversation_filters_screen.tsx +1 -4
- package/src/screens/conversation_screen.tsx +11 -7
- package/src/screens/message_actions_screen.tsx +65 -51
- package/src/screens/reactions_screen.tsx +27 -7
- package/src/types/resources/reaction.ts +1 -1
- package/src/utils/index.ts +0 -1
- package/src/utils/jolt/transform_reaction_event_data_to_reaction_count_resource.ts +3 -3
- package/src/utils/native_adapters/audio.ts +1 -0
- package/build/components/primitive/actions_form_sheet.d.ts +0 -34
- package/build/components/primitive/actions_form_sheet.d.ts.map +0 -1
- package/build/components/primitive/actions_form_sheet.js +0 -92
- package/build/components/primitive/actions_form_sheet.js.map +0 -1
- package/build/utils/navigation_constants.d.ts +0 -2
- package/build/utils/navigation_constants.d.ts.map +0 -1
- package/build/utils/navigation_constants.js +0 -11
- package/build/utils/navigation_constants.js.map +0 -1
- package/src/components/primitive/actions_form_sheet.tsx +0 -160
- package/src/utils/navigation_constants.ts +0 -12
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"audio_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/audio_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAOjH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,4BAA4B,GAC7B,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,4BAA4B,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CAC1F,
|
|
1
|
+
{"version":3,"file":"audio_attachment.d.ts","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/audio_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,qCAAqC,EAAE,MAAM,2DAA2D,CAAA;AAOjH,wBAAgB,eAAe,CAAC,EAC9B,UAAU,EACV,4BAA4B,GAC7B,EAAE;IACD,UAAU,EAAE,qCAAqC,CAAA;IACjD,4BAA4B,EAAE,CAAC,UAAU,EAAE,qCAAqC,KAAK,IAAI,CAAA;CAC1F,qBAsDA"}
|
|
@@ -11,6 +11,7 @@ export function AudioAttachment({ attachment, onMessageAttachmentLongPress, }) {
|
|
|
11
11
|
const { attributes } = attachment;
|
|
12
12
|
const { url, filename } = attributes;
|
|
13
13
|
const sound = Audio.useAudio(url);
|
|
14
|
+
const { AudioPlayer } = sound;
|
|
14
15
|
function toggleAudio() {
|
|
15
16
|
if (!sound.isPlaying) {
|
|
16
17
|
sound.play();
|
|
@@ -23,6 +24,7 @@ export function AudioAttachment({ attachment, onMessageAttachmentLongPress, }) {
|
|
|
23
24
|
return (<PlatformPressable onLongPress={() => onMessageAttachmentLongPress(attachment)} android_ripple={{ color: colors.androidRippleNeutral, foreground: true }} accessibilityHint="Long press for more options">
|
|
24
25
|
<AttachmentCard>
|
|
25
26
|
<View style={styles.container}>
|
|
27
|
+
{AudioPlayer}
|
|
26
28
|
<IconButton name={sound.isPlaying ? 'services.pause' : 'services.play'} size="md" accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'} onPress={toggleAudio} disabled={!sound} style={styles.button} iconStyle={styles.buttonIcon}/>
|
|
27
29
|
<View style={styles.details}>
|
|
28
30
|
<AttachmentCardTitle>{filename}</AttachmentCardTitle>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"audio_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/audio_attachment.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAE/C,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,eAAe,CAAA;AAChD,OAAO,EAAE,cAAc,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AACvE,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,gCAAgC,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAE9D,MAAM,UAAU,eAAe,CAAC,EAC9B,UAAU,EACV,4BAA4B,GAI7B;IACC,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAE7B,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAA;IACjC,MAAM,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAA;IACpC,MAAM,KAAK,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAA;
|
|
1
|
+
{"version":3,"file":"audio_attachment.js","sourceRoot":"","sources":["../../../../src/components/conversation/attachments/audio_attachment.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react'\nimport { View, StyleSheet } from 'react-native'\nimport { DenormalizedMessageAttachmentResource } from '../../../types/resources/denormalized_attachment_resource'\nimport { IconButton, Text } from '../../display'\nimport { AttachmentCard, AttachmentCardTitle } from './attachment_card'\nimport { useTheme } from '../../../hooks'\nimport { Audio } from '../../../utils/native_adapters'\nimport { PlatformPressable } from '@react-navigation/elements'\n\nexport function AudioAttachment({\n attachment,\n onMessageAttachmentLongPress,\n}: {\n attachment: DenormalizedMessageAttachmentResource\n onMessageAttachmentLongPress: (attachment: DenormalizedMessageAttachmentResource) => void\n}) {\n const styles = useStyles()\n const { colors } = useTheme()\n\n const { attributes } = attachment\n const { url, filename } = attributes\n const sound = Audio.useAudio(url)\n const { AudioPlayer } = sound\n\n function toggleAudio() {\n if (!sound.isPlaying) {\n sound.play()\n } else {\n sound.pause()\n }\n }\n\n const progress = sound.duration > 0 ? sound.position / sound.duration : 0\n\n return (\n <PlatformPressable\n onLongPress={() => onMessageAttachmentLongPress(attachment)}\n android_ripple={{ color: colors.androidRippleNeutral, foreground: true }}\n accessibilityHint=\"Long press for more options\"\n >\n <AttachmentCard>\n <View style={styles.container}>\n {AudioPlayer}\n <IconButton\n name={sound.isPlaying ? 'services.pause' : 'services.play'}\n size=\"md\"\n accessibilityLabel={sound.isPlaying ? 'Pause' : 'Play'}\n onPress={toggleAudio}\n disabled={!sound}\n style={styles.button}\n iconStyle={styles.buttonIcon}\n />\n <View style={styles.details}>\n <AttachmentCardTitle>{filename}</AttachmentCardTitle>\n <View style={styles.progressContainer}>\n <View style={styles.progressTrack}>\n <View style={[styles.progressBar, { width: `${progress * 100}%` }]} />\n </View>\n </View>\n {sound.isPlaying ? (\n <ProgressionText progress={sound.position || 0} />\n ) : (\n <DurationText duration={sound.duration || 0} />\n )}\n </View>\n </View>\n </AttachmentCard>\n </PlatformPressable>\n )\n}\n\nconst DurationText = ({ duration }: { duration: number }) => {\n if (duration === 0) return <Text variant=\"footnote\">Loading...</Text>\n\n const { minutes, seconds } = getMinutesAndSeconds(duration)\n const secondsLabel = `${seconds}s`\n const minutesLabel = `${minutes}m`\n const label = minutes > 0 ? `${minutesLabel} ${secondsLabel}` : secondsLabel\n\n return <Text variant=\"footnote\">{label}</Text>\n}\n\nconst ProgressionText = ({ progress }: { progress: number }) => {\n if (progress === 0) return <Text variant=\"footnote\">Loading...</Text>\n\n const { minutes, seconds } = getMinutesAndSeconds(progress)\n const twoDigitSeconds = seconds.toString().padStart(2, '0')\n const twoDigitMinutes = minutes.toString().padStart(2, '0')\n\n return <Text variant=\"footnote\">{`${twoDigitMinutes}:${twoDigitSeconds}`}</Text>\n}\n\nfunction getMinutesAndSeconds(ms?: number) {\n if (!ms || ms === 0) return { minutes: 0, seconds: 0 }\n\n const totalSeconds = Math.floor(ms / 1000)\n const minutes = Math.floor(totalSeconds / 60)\n const seconds = totalSeconds % 60\n\n return { minutes, seconds }\n}\n\nconst useStyles = () => {\n const { colors } = useTheme()\n\n return StyleSheet.create({\n container: {\n flexDirection: 'row',\n alignItems: 'center',\n },\n button: {\n width: 42,\n height: 42,\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: 25,\n backgroundColor: colors.fillColorNeutral100Inverted,\n borderColor: colors.borderColorDefaultBase,\n borderWidth: 1,\n },\n buttonIcon: {\n color: colors.iconColorDefaultPrimary,\n },\n buttonText: {\n fontSize: 32,\n lineHeight: 32,\n },\n details: {\n flex: 1,\n marginLeft: 10,\n gap: 4,\n },\n progressContainer: {\n marginTop: 2,\n },\n progressTrack: {\n height: 4,\n backgroundColor: colors.borderColorDefaultBase,\n borderRadius: 2,\n overflow: 'hidden',\n },\n progressBar: {\n height: '100%',\n borderRadius: 2,\n backgroundColor: colors.interaction,\n },\n })\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message_form.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAC3E,OAAO,
|
|
1
|
+
{"version":3,"file":"message_form.d.ts","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAuD,MAAM,OAAO,CAAA;AAC3E,OAAO,EAAoD,SAAS,EAAE,MAAM,cAAc,CAAA;AAG1F,OAAO,EAAE,oBAAoB,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAkBnE,eAAO,MAAM,WAAW;;;;;;CAOvB,CAAA;AAED,UAAU,qBAAsB,SAAQ,SAAS;IAC/C,YAAY,EAAE,oBAAoB,CAAA;IAClC,uBAAuB,CAAC,EAAE,eAAe,GAAG,IAAI,CAAA;CACjD;AA0BD,iBAAS,eAAe,CAAC,EACvB,YAAY,EACZ,uBAAuB,EACvB,QAAQ,GACT,EAAE,qBAAqB,qBAoHvB;AAiCD,iBAAS,gBAAgB,sBA6CxB;AAED,iBAAS,oBAAoB,sBA8C5B;AAED,iBAAS,2BAA2B,6BAoFnC;AAED,iBAAS,mBAAmB,6BAgC3B"}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import { useNavigation, useTheme as useNavigationTheme, useRoute, } from '@react-navigation/native';
|
|
2
2
|
import React, { useCallback, useContext, useEffect, useState } from 'react';
|
|
3
|
-
import { StyleSheet, TextInput, View } from 'react-native';
|
|
4
|
-
import { IconButton, Text } from '../../components';
|
|
5
|
-
import { useTheme } from '../../hooks';
|
|
3
|
+
import { Platform, Pressable, StyleSheet, TextInput, View } from 'react-native';
|
|
4
|
+
import { Icon, IconButton, Text } from '../../components';
|
|
5
|
+
import { useCreateAndroidRippleColor, useTheme } from '../../hooks';
|
|
6
6
|
import { ChatContext } from '../../contexts/chat_context';
|
|
7
7
|
import { ImagePicker } from '../../utils/native_adapters';
|
|
8
|
+
import { platformPressedOpacityStyle } from '../../utils';
|
|
8
9
|
import { useAttachmentUploader } from '../../hooks/use_attachment_uploader';
|
|
9
10
|
import { MessageFormAttachmentImage } from './message_form/message_form_attachment_image';
|
|
10
11
|
import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update';
|
|
11
12
|
import { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status';
|
|
13
|
+
import { tokens } from '../../vendor/tapestry/tokens';
|
|
14
|
+
import LinearGradient from 'react-native-linear-gradient';
|
|
12
15
|
export const MessageForm = {
|
|
13
16
|
Root: MessageFormRoot,
|
|
14
17
|
TextInput: MessageFormInput,
|
|
@@ -150,6 +153,7 @@ function MessageFormAttachments() {
|
|
|
150
153
|
}
|
|
151
154
|
function MessageFormInput() {
|
|
152
155
|
const styles = useMessageFormStyles();
|
|
156
|
+
const theme = useTheme();
|
|
153
157
|
const { text, setText, onSubmit, usingGiphy, attachmentUploader } = React.useContext(MessageFormContext);
|
|
154
158
|
const attachmentError = attachmentUploader?.errorMessage;
|
|
155
159
|
const route = useRoute();
|
|
@@ -168,16 +172,37 @@ function MessageFormInput() {
|
|
|
168
172
|
<Text style={styles.giphyBadgeText}>/giphy</Text>
|
|
169
173
|
</View>) : null}
|
|
170
174
|
|
|
171
|
-
<TextInput style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]} multiline={true} aria-disabled={true} placeholder="Send a message" onChangeText={handleTextChange} value={text} maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH} onSubmitEditing={onSubmit}/>
|
|
175
|
+
<TextInput style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]} multiline={true} aria-disabled={true} placeholder="Send a message" placeholderTextColor={theme.colors.textColorDefaultPlaceholder} onChangeText={handleTextChange} value={text} maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH} onSubmitEditing={onSubmit}/>
|
|
172
176
|
</View>
|
|
173
177
|
|
|
174
178
|
{attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
|
|
175
179
|
</View>);
|
|
176
180
|
}
|
|
177
181
|
function MessageFormSubmitBtn() {
|
|
178
|
-
const styles = useMessageFormStyles();
|
|
179
182
|
const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext);
|
|
180
|
-
|
|
183
|
+
const styles = useMessageFormStyles();
|
|
184
|
+
const { colors } = useTheme();
|
|
185
|
+
const colorKey = disabled ? 'disabled' : 'interaction';
|
|
186
|
+
const interactionStart = colors.buttonStart || colors.interaction;
|
|
187
|
+
const interactionEnd = colors.buttonEnd || colors.interaction;
|
|
188
|
+
const colorMap = {
|
|
189
|
+
disabled: [
|
|
190
|
+
colors.fillColorButtonNeutralSolidDisabled,
|
|
191
|
+
colors.fillColorButtonNeutralSolidDisabled,
|
|
192
|
+
],
|
|
193
|
+
interaction: [interactionStart, interactionEnd],
|
|
194
|
+
};
|
|
195
|
+
const androidRippleColor = useCreateAndroidRippleColor({ color: colorMap[colorKey][0] });
|
|
196
|
+
const gradientColors = colorMap[colorKey];
|
|
197
|
+
const iconStyles = [styles.submitIcon, disabled && styles.submitIconDisabled];
|
|
198
|
+
return (<Pressable disabled={disabled} onPress={onSubmit} accessibilityRole="button" accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'} style={({ pressed }) => [
|
|
199
|
+
styles.submitPressableWrapper,
|
|
200
|
+
pressed && platformPressedOpacityStyle,
|
|
201
|
+
]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}>
|
|
202
|
+
<LinearGradient start={{ x: 0.1, y: 0.1 }} end={{ x: 0.9, y: 0.9 }} colors={gradientColors} style={styles.submitGradientWrapper}>
|
|
203
|
+
<Icon name={usingGiphy ? 'general.search' : 'general.upArrow'} style={iconStyles} accessibilityElementsHidden={true}/>
|
|
204
|
+
</LinearGradient>
|
|
205
|
+
</Pressable>);
|
|
181
206
|
}
|
|
182
207
|
function MessageFormAttachmentPicker() {
|
|
183
208
|
const styles = useMessageFormStyles();
|
|
@@ -220,25 +245,24 @@ function MessageFormAttachmentPicker() {
|
|
|
220
245
|
if (usingGiphy || currentlyEditingMessage) {
|
|
221
246
|
return null;
|
|
222
247
|
}
|
|
223
|
-
return (
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
<IconButton accessibilityLabel="Take a photo" size="md" appearance="neutral" name={'general.videoCamera'} onPress={openCamera}/>
|
|
228
|
-
<IconButton accessibilityLabel="Choose a photo" size="md" appearance="neutral" name={'churchCenter.photosIos'} onPress={pickImage}/>
|
|
248
|
+
return (<View style={styles.attachmentPicker}>
|
|
249
|
+
{isOpen && (<View style={styles.attachmentPickerButtonsContainer}>
|
|
250
|
+
<IconButton accessibilityLabel="Take a photo" accessibilityHint="Opens your camera" size="lg" appearance="neutral" name="general.videoCamera" onPress={openCamera} style={styles.attachmentPickerButton}/>
|
|
251
|
+
<IconButton accessibilityLabel="Choose a photo" accessibilityHint="Opens your photo gallery" size="lg" appearance="neutral" name="churchCenter.photosIos" onPress={pickImage} style={styles.attachmentPickerButton}/>
|
|
229
252
|
</View>)}
|
|
230
|
-
<IconButton accessibilityLabel="File Menu" size="
|
|
253
|
+
<IconButton accessibilityLabel="File Menu" accessibilityHint="Opens options to attach or take a photo" size="lg" appearance="neutral" name="general.paperclip" onPress={() => setIsOpen(!isOpen)} style={styles.formButton}/>
|
|
231
254
|
</View>);
|
|
232
255
|
}
|
|
233
256
|
function MessageFormCommands() {
|
|
234
257
|
const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext);
|
|
258
|
+
const styles = useMessageFormStyles();
|
|
235
259
|
if (!canGiphy) {
|
|
236
260
|
return null;
|
|
237
261
|
}
|
|
238
262
|
if (usingGiphy) {
|
|
239
|
-
return (<IconButton accessibilityLabel="Exit Giphy Search" size="md" appearance="neutral" name={'general.x'} onPress={() => setUsingGiphy(false)}/>);
|
|
263
|
+
return (<IconButton accessibilityLabel="Exit Giphy Search" size="md" appearance="neutral" name={'general.x'} onPress={() => setUsingGiphy(false)} style={styles.formButton}/>);
|
|
240
264
|
}
|
|
241
|
-
return (<IconButton accessibilityLabel="Search Giphy" size="
|
|
265
|
+
return (<IconButton accessibilityLabel="Search Giphy" size="lg" appearance="neutral" name={'general.bolt'} onPress={() => setUsingGiphy(true)} disabled={text.length > GIPHY_MAX_LENGTH} style={styles.formButton}/>);
|
|
242
266
|
}
|
|
243
267
|
function EditingIndicator() {
|
|
244
268
|
const { currentlyEditingMessage } = React.useContext(MessageFormContext);
|
|
@@ -255,6 +279,7 @@ function EditingIndicator() {
|
|
|
255
279
|
const useMessageFormStyles = () => {
|
|
256
280
|
const theme = useTheme();
|
|
257
281
|
const navigationTheme = useNavigationTheme();
|
|
282
|
+
const buttonSize = 38;
|
|
258
283
|
return StyleSheet.create({
|
|
259
284
|
container: {
|
|
260
285
|
borderColor: theme.colors.fillColorNeutral050Base,
|
|
@@ -264,8 +289,8 @@ const useMessageFormStyles = () => {
|
|
|
264
289
|
textInputContainer: {
|
|
265
290
|
backgroundColor: navigationTheme.colors.card,
|
|
266
291
|
flexDirection: 'row',
|
|
267
|
-
alignItems: '
|
|
268
|
-
gap:
|
|
292
|
+
alignItems: 'flex-end',
|
|
293
|
+
gap: 16,
|
|
269
294
|
},
|
|
270
295
|
textInputBoundary: {
|
|
271
296
|
borderRadius: 24,
|
|
@@ -281,12 +306,13 @@ const useMessageFormStyles = () => {
|
|
|
281
306
|
},
|
|
282
307
|
textInput: {
|
|
283
308
|
paddingVertical: 8,
|
|
284
|
-
paddingHorizontal:
|
|
309
|
+
paddingHorizontal: 16,
|
|
285
310
|
color: theme.colors.textColorDefaultPrimary,
|
|
286
311
|
textAlignVertical: 'center',
|
|
287
312
|
justifyContent: 'center',
|
|
288
313
|
flex: 1,
|
|
289
314
|
fontSize: 16,
|
|
315
|
+
maxHeight: 200,
|
|
290
316
|
},
|
|
291
317
|
textInputWithGiphy: {
|
|
292
318
|
paddingLeft: 0,
|
|
@@ -302,20 +328,51 @@ const useMessageFormStyles = () => {
|
|
|
302
328
|
fontSize: 14,
|
|
303
329
|
color: theme.colors.interaction,
|
|
304
330
|
},
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
331
|
+
formButton: {
|
|
332
|
+
height: buttonSize,
|
|
333
|
+
},
|
|
334
|
+
submitPressableWrapper: {
|
|
335
|
+
borderRadius: buttonSize,
|
|
336
|
+
overflow: 'hidden',
|
|
337
|
+
},
|
|
338
|
+
submitGradientWrapper: {
|
|
339
|
+
flexDirection: 'row',
|
|
340
|
+
justifyContent: 'center',
|
|
341
|
+
alignItems: 'center',
|
|
342
|
+
borderRadius: buttonSize,
|
|
343
|
+
height: buttonSize,
|
|
344
|
+
width: buttonSize,
|
|
345
|
+
},
|
|
346
|
+
submitIcon: {
|
|
347
|
+
fontSize: 16,
|
|
348
|
+
color: tokens.colorNeutral100White,
|
|
349
|
+
},
|
|
350
|
+
submitIconDisabled: {
|
|
351
|
+
color: theme.colors.iconColorDefaultDisabled,
|
|
309
352
|
},
|
|
310
353
|
attachmentPicker: {
|
|
311
354
|
position: 'relative',
|
|
312
355
|
},
|
|
313
|
-
|
|
356
|
+
attachmentPickerButtonsContainer: {
|
|
314
357
|
position: 'absolute',
|
|
315
358
|
left: 0,
|
|
316
359
|
bottom: 40,
|
|
317
360
|
zIndex: 10,
|
|
318
|
-
gap:
|
|
361
|
+
gap: 12,
|
|
362
|
+
},
|
|
363
|
+
attachmentPickerButton: {
|
|
364
|
+
backgroundColor: theme.colors.fillColorNeutral070,
|
|
365
|
+
borderRadius: 20,
|
|
366
|
+
height: buttonSize,
|
|
367
|
+
width: buttonSize,
|
|
368
|
+
elevation: 3,
|
|
369
|
+
...Platform.select({
|
|
370
|
+
ios: {
|
|
371
|
+
borderWidth: 1,
|
|
372
|
+
borderColor: theme.colors.borderColorDefaultBase,
|
|
373
|
+
},
|
|
374
|
+
default: null,
|
|
375
|
+
}),
|
|
319
376
|
},
|
|
320
377
|
messageFormAttachments: {
|
|
321
378
|
flexDirection: 'row',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"message_form.js","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n RouteProp,\n useNavigation,\n useTheme as useNavigationTheme,\n useRoute,\n} from '@react-navigation/native'\nimport React, { useCallback, useContext, useEffect, useState } from 'react'\nimport { StyleSheet, TextInput, View, ViewProps } from 'react-native'\nimport { IconButton, Text } from '../../components'\nimport { useTheme } from '../../hooks'\nimport { ConversationResource, MessageResource } from '../../types'\n\nimport { ConversationScreenProps } from '../../screens/conversation_screen'\n\nimport { ChatContext } from '../../contexts/chat_context'\nimport { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'\nimport { useAttachmentUploader } from '../../hooks/use_attachment_uploader'\nimport {\n DenormalizedAttachmentResourceForCreate,\n DenormalizedMessageAttachmentResourceForCreate,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'\nimport { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\nimport { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status'\n\nexport const MessageForm = {\n Root: MessageFormRoot,\n\n TextInput: MessageFormInput,\n SubmitButton: MessageFormSubmitBtn,\n AttachmentPicker: MessageFormAttachmentPicker,\n Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n conversation: ConversationResource\n currentlyEditingMessage?: MessageResource | null\n}\n\nconst MessageFormContext = React.createContext<{\n text: string\n setText: (text: string) => void\n onSubmit: () => void\n disabled: boolean\n canGiphy: boolean\n usingGiphy: boolean\n setUsingGiphy: (usingGiphy: boolean) => void\n attachmentUploader?: ReturnType<typeof useAttachmentUploader>\n currentlyEditingMessage?: MessageResource | null\n}>({\n text: '',\n setText: (_text: string) => {},\n onSubmit: () => {},\n disabled: false,\n canGiphy: false,\n usingGiphy: false,\n setUsingGiphy: (_usingGiphy: boolean) => {},\n currentlyEditingMessage: null,\n})\n\nconst GIPHY_MAX_LENGTH = 50\nconst MAX_MESSAGE_LENGTH = 5000\n\nfunction MessageFormRoot({\n conversation,\n currentlyEditingMessage,\n children,\n}: MessagesFormRootProps) {\n const { giphyApiKey } = useContext(ChatContext)\n const canGiphy = !!giphyApiKey && !currentlyEditingMessage\n const styles = useMessageFormStyles()\n const [text, setText] = React.useState('')\n const [usingGiphy, setUsingGiphy] = useState(false)\n const navigation = useNavigation()\n const route = useRoute() as ConversationScreenProps['route']\n const {\n status,\n isPending,\n reset: resetMutation,\n mutateAsync,\n } = useMessageCreateOrUpdate({\n conversationId: conversation.id,\n messageId: currentlyEditingMessage?.id || null,\n })\n const attachmentUploader = useAttachmentUploader({\n conversationId: conversation.id,\n })\n const resetAttachmentUploader = attachmentUploader.reset\n\n const reset = useCallback(() => {\n resetAttachmentUploader()\n resetMutation()\n setText('')\n setUsingGiphy(false)\n navigation.setParams({\n editing_message_id: null,\n })\n }, [resetAttachmentUploader, resetMutation, navigation])\n\n useEffect(() => {\n if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {\n setUsingGiphy(true)\n setText('')\n }\n }, [canGiphy, text, usingGiphy])\n\n useEffect(() => {\n switch (status) {\n case 'success':\n reset()\n break\n }\n }, [reset, status])\n\n useEffect(() => {\n if (route.params.clear_input) {\n reset()\n navigation.setParams({ ...route.params, clear_input: false })\n }\n }, [reset, navigation, route.params])\n\n const canSubmit = (() => {\n if (isPending) return false\n if (attachmentUploader?.pendingUploads) return false\n if (text.length > 0) return true\n if (attachmentUploader?.attachments?.length) return true\n return false\n })()\n const disabled = !canSubmit\n\n const handleSubmit = () => {\n if (!canSubmit) return\n\n if (canGiphy && usingGiphy) {\n TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())\n navigation.navigate('SendGiphy', {\n conversation_id: conversation.id,\n search_term: text,\n })\n } else {\n let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] = []\n if (attachmentUploader?.attachmentIds) {\n attachmentsForSubmit = attachmentUploader.attachmentIds.map(\n (id: string): DenormalizedMessageAttachmentResourceForCreate => ({\n type: 'MessageAttachment',\n id,\n })\n )\n }\n if (currentlyEditingMessage) {\n mutateAsync({ text }).then(reset)\n } else {\n mutateAsync({ text, attachments: attachmentsForSubmit }).then(reset)\n }\n }\n }\n\n useEffect(() => {\n if (currentlyEditingMessage) {\n setText(currentlyEditingMessage.text || '')\n }\n }, [currentlyEditingMessage])\n\n return (\n <MessageFormContext.Provider\n value={{\n text,\n setText,\n onSubmit: handleSubmit,\n disabled,\n canGiphy,\n usingGiphy,\n setUsingGiphy,\n attachmentUploader,\n currentlyEditingMessage,\n }}\n >\n <View style={styles.container}>\n <EditingIndicator />\n <View style={styles.textInputContainer}>{children}</View>\n </View>\n </MessageFormContext.Provider>\n )\n}\n\nfunction MessageFormAttachments() {\n const styles = useMessageFormStyles()\n const { attachmentUploader } = React.useContext(MessageFormContext)\n const numberOfAttachments = attachmentUploader?.attachments?.length || 0\n const attachments = attachmentUploader?.attachments || []\n\n if (numberOfAttachments === 0) {\n return null\n }\n\n return (\n <View style={styles.messageFormAttachments}>\n {attachments.map(attachment => {\n return (\n <MessageFormAttachmentImage\n key={attachment.file.uri}\n uri={attachment.file.uri}\n alt={attachment.file.name}\n status={attachment.status}\n width={attachment.file.width}\n height={attachment.file.height}\n removeAttachment={() => {\n attachmentUploader?.removeAttachment(attachment)\n }}\n />\n )\n })}\n </View>\n )\n}\n\nfunction MessageFormInput() {\n const styles = useMessageFormStyles()\n const { text, setText, onSubmit, usingGiphy, attachmentUploader } =\n React.useContext(MessageFormContext)\n const attachmentError = attachmentUploader?.errorMessage\n\n const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n const conversationId = route.params.conversation_id\n const broadcastTypingStatus = useBroadcastTypingStatus(conversationId)\n\n const handleTextChange = (newText: string) => {\n setText(newText)\n\n if (newText.length > 0) {\n broadcastTypingStatus()\n }\n }\n\n return (\n <View style={styles.textInputBoundary}>\n <MessageFormAttachments />\n <View style={styles.textInputRow}>\n {usingGiphy ? (\n <View style={styles.giphyBadge}>\n <Text style={styles.giphyBadgeText}>/giphy</Text>\n </View>\n ) : null}\n\n <TextInput\n style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]}\n multiline={true}\n aria-disabled={true}\n placeholder=\"Send a message\"\n onChangeText={handleTextChange}\n value={text}\n maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}\n onSubmitEditing={onSubmit}\n />\n </View>\n\n {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}\n </View>\n )\n}\n\nfunction MessageFormSubmitBtn() {\n const styles = useMessageFormStyles()\n const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)\n\n return (\n <IconButton\n disabled={disabled}\n accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}\n size=\"md\"\n appearance=\"neutral\"\n style={styles.textInputSend}\n name={usingGiphy ? 'general.search' : 'general.upArrow'}\n onPress={onSubmit}\n />\n )\n}\n\nfunction MessageFormAttachmentPicker() {\n const styles = useMessageFormStyles()\n const { usingGiphy, attachmentUploader, currentlyEditingMessage } =\n React.useContext(MessageFormContext)\n const [isOpen, setIsOpen] = useState(false)\n\n function uploadImagePickerResult(result: ImagePickerResult) {\n if (result.canceled) {\n return\n }\n\n const filteredAssets = result.assets\n .filter(asset => {\n return asset.fileSize && asset.fileName && asset.mimeType\n })\n .map(asset => {\n return {\n uri: asset.uri,\n name: asset.fileName as string,\n type: asset.mimeType as string,\n size: asset.fileSize as number,\n height: asset.height,\n width: asset.width,\n }\n })\n\n attachmentUploader?.handleFilesAttached(filteredAssets)\n }\n\n const openCamera = async () => {\n setIsOpen(false)\n let result = await ImagePicker.openCameraAsync()\n if (!result.canceled) {\n uploadImagePickerResult(result)\n }\n }\n\n const pickImage = async () => {\n setIsOpen(false)\n let result = await ImagePicker.openImageLibraryAsync()\n if (!result.canceled) {\n uploadImagePickerResult(result)\n }\n }\n\n if (usingGiphy || currentlyEditingMessage) {\n return null\n }\n\n return (\n // TODO: Design Pass\n <View style={styles.attachmentPicker}>\n {isOpen && (\n <View style={styles.attachmentPickerButtons}>\n <IconButton\n accessibilityLabel=\"Take a photo\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.videoCamera'}\n onPress={openCamera}\n />\n <IconButton\n accessibilityLabel=\"Choose a photo\"\n size=\"md\"\n appearance=\"neutral\"\n name={'churchCenter.photosIos'}\n onPress={pickImage}\n />\n </View>\n )}\n <IconButton\n accessibilityLabel=\"File Menu\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.outlinedPlusCircle'}\n onPress={() => setIsOpen(!isOpen)}\n />\n </View>\n )\n}\n\nfunction MessageFormCommands() {\n const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)\n\n if (!canGiphy) {\n return null\n }\n\n if (usingGiphy) {\n return (\n <IconButton\n accessibilityLabel=\"Exit Giphy Search\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.x'}\n onPress={() => setUsingGiphy(false)}\n />\n )\n }\n\n return (\n <IconButton\n accessibilityLabel=\"Search Giphy\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.bolt'}\n onPress={() => setUsingGiphy(true)}\n disabled={text.length > GIPHY_MAX_LENGTH}\n />\n )\n}\n\nfunction EditingIndicator() {\n const { currentlyEditingMessage } = React.useContext(MessageFormContext)\n const styles = useMessageFormStyles()\n const navigation = useNavigation()\n\n if (!currentlyEditingMessage) {\n return null\n }\n\n return (\n <View style={styles.editingIndicator}>\n <Text>Editing message</Text>\n <IconButton\n accessibilityLabel=\"Exit message editing\"\n name={'general.x'}\n onPress={() => navigation.setParams({ editing_message_id: null })}\n />\n </View>\n )\n}\n\nconst useMessageFormStyles = () => {\n const theme = useTheme()\n const navigationTheme = useNavigationTheme()\n\n return StyleSheet.create({\n container: {\n borderColor: theme.colors.fillColorNeutral050Base,\n borderTopWidth: 1,\n padding: 12,\n },\n textInputContainer: {\n backgroundColor: navigationTheme.colors.card,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 12,\n },\n textInputBoundary: {\n borderRadius: 24,\n borderWidth: 1,\n borderColor: theme.colors.fillColorNeutral050Base,\n flex: 1,\n gap: 12,\n },\n textInputRow: {\n flexDirection: 'row',\n gap: 12,\n alignItems: 'center',\n },\n textInput: {\n paddingVertical: 8,\n paddingHorizontal: 20,\n color: theme.colors.textColorDefaultPrimary,\n textAlignVertical: 'center',\n justifyContent: 'center',\n flex: 1,\n fontSize: 16,\n },\n textInputWithGiphy: {\n paddingLeft: 0,\n },\n giphyBadge: {\n backgroundColor: theme.colors.fillColorNeutral050Base,\n borderRadius: 24,\n paddingHorizontal: 12,\n marginLeft: 12,\n padding: 4,\n },\n giphyBadgeText: {\n fontSize: 14,\n color: theme.colors.interaction,\n },\n textInputSend: {\n borderRadius: 24,\n height: 36,\n width: 36,\n },\n attachmentPicker: {\n position: 'relative',\n },\n attachmentPickerButtons: {\n position: 'absolute',\n left: 0,\n bottom: 40,\n zIndex: 10,\n gap: 16,\n },\n messageFormAttachments: {\n flexDirection: 'row',\n gap: 8,\n },\n inputErrorMessage: {\n color: theme.colors.statusErrorText,\n fontSize: 14,\n },\n editingIndicator: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 8,\n paddingBottom: 12,\n },\n })\n}\n"]}
|
|
1
|
+
{"version":3,"file":"message_form.js","sourceRoot":"","sources":["../../../src/components/conversation/message_form.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n RouteProp,\n useNavigation,\n useTheme as useNavigationTheme,\n useRoute,\n} from '@react-navigation/native'\nimport React, { useCallback, useContext, useEffect, useState } from 'react'\nimport { Platform, Pressable, StyleSheet, TextInput, View, ViewProps } from 'react-native'\nimport { Icon, IconButton, Text } from '../../components'\nimport { useCreateAndroidRippleColor, useTheme } from '../../hooks'\nimport { ConversationResource, MessageResource } from '../../types'\n\nimport { ConversationScreenProps } from '../../screens/conversation_screen'\n\nimport { ChatContext } from '../../contexts/chat_context'\nimport { ImagePicker, ImagePickerResult } from '../../utils/native_adapters'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { useAttachmentUploader } from '../../hooks/use_attachment_uploader'\nimport {\n DenormalizedAttachmentResourceForCreate,\n DenormalizedMessageAttachmentResourceForCreate,\n} from '../../types/resources/denormalized_attachment_resource'\nimport { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'\nimport { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'\nimport { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport LinearGradient from 'react-native-linear-gradient'\n\nexport const MessageForm = {\n Root: MessageFormRoot,\n\n TextInput: MessageFormInput,\n SubmitButton: MessageFormSubmitBtn,\n AttachmentPicker: MessageFormAttachmentPicker,\n Commands: MessageFormCommands,\n}\n\ninterface MessagesFormRootProps extends ViewProps {\n conversation: ConversationResource\n currentlyEditingMessage?: MessageResource | null\n}\n\nconst MessageFormContext = React.createContext<{\n text: string\n setText: (text: string) => void\n onSubmit: () => void\n disabled: boolean\n canGiphy: boolean\n usingGiphy: boolean\n setUsingGiphy: (usingGiphy: boolean) => void\n attachmentUploader?: ReturnType<typeof useAttachmentUploader>\n currentlyEditingMessage?: MessageResource | null\n}>({\n text: '',\n setText: (_text: string) => {},\n onSubmit: () => {},\n disabled: false,\n canGiphy: false,\n usingGiphy: false,\n setUsingGiphy: (_usingGiphy: boolean) => {},\n currentlyEditingMessage: null,\n})\n\nconst GIPHY_MAX_LENGTH = 50\nconst MAX_MESSAGE_LENGTH = 5000\n\nfunction MessageFormRoot({\n conversation,\n currentlyEditingMessage,\n children,\n}: MessagesFormRootProps) {\n const { giphyApiKey } = useContext(ChatContext)\n const canGiphy = !!giphyApiKey && !currentlyEditingMessage\n const styles = useMessageFormStyles()\n const [text, setText] = React.useState('')\n const [usingGiphy, setUsingGiphy] = useState(false)\n const navigation = useNavigation()\n const route = useRoute() as ConversationScreenProps['route']\n const {\n status,\n isPending,\n reset: resetMutation,\n mutateAsync,\n } = useMessageCreateOrUpdate({\n conversationId: conversation.id,\n messageId: currentlyEditingMessage?.id || null,\n })\n const attachmentUploader = useAttachmentUploader({\n conversationId: conversation.id,\n })\n const resetAttachmentUploader = attachmentUploader.reset\n\n const reset = useCallback(() => {\n resetAttachmentUploader()\n resetMutation()\n setText('')\n setUsingGiphy(false)\n navigation.setParams({\n editing_message_id: null,\n })\n }, [resetAttachmentUploader, resetMutation, navigation])\n\n useEffect(() => {\n if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {\n setUsingGiphy(true)\n setText('')\n }\n }, [canGiphy, text, usingGiphy])\n\n useEffect(() => {\n switch (status) {\n case 'success':\n reset()\n break\n }\n }, [reset, status])\n\n useEffect(() => {\n if (route.params.clear_input) {\n reset()\n navigation.setParams({ ...route.params, clear_input: false })\n }\n }, [reset, navigation, route.params])\n\n const canSubmit = (() => {\n if (isPending) return false\n if (attachmentUploader?.pendingUploads) return false\n if (text.length > 0) return true\n if (attachmentUploader?.attachments?.length) return true\n return false\n })()\n const disabled = !canSubmit\n\n const handleSubmit = () => {\n if (!canSubmit) return\n\n if (canGiphy && usingGiphy) {\n TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())\n navigation.navigate('SendGiphy', {\n conversation_id: conversation.id,\n search_term: text,\n })\n } else {\n let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] = []\n if (attachmentUploader?.attachmentIds) {\n attachmentsForSubmit = attachmentUploader.attachmentIds.map(\n (id: string): DenormalizedMessageAttachmentResourceForCreate => ({\n type: 'MessageAttachment',\n id,\n })\n )\n }\n if (currentlyEditingMessage) {\n mutateAsync({ text }).then(reset)\n } else {\n mutateAsync({ text, attachments: attachmentsForSubmit }).then(reset)\n }\n }\n }\n\n useEffect(() => {\n if (currentlyEditingMessage) {\n setText(currentlyEditingMessage.text || '')\n }\n }, [currentlyEditingMessage])\n\n return (\n <MessageFormContext.Provider\n value={{\n text,\n setText,\n onSubmit: handleSubmit,\n disabled,\n canGiphy,\n usingGiphy,\n setUsingGiphy,\n attachmentUploader,\n currentlyEditingMessage,\n }}\n >\n <View style={styles.container}>\n <EditingIndicator />\n <View style={styles.textInputContainer}>{children}</View>\n </View>\n </MessageFormContext.Provider>\n )\n}\n\nfunction MessageFormAttachments() {\n const styles = useMessageFormStyles()\n const { attachmentUploader } = React.useContext(MessageFormContext)\n const numberOfAttachments = attachmentUploader?.attachments?.length || 0\n const attachments = attachmentUploader?.attachments || []\n\n if (numberOfAttachments === 0) {\n return null\n }\n\n return (\n <View style={styles.messageFormAttachments}>\n {attachments.map(attachment => {\n return (\n <MessageFormAttachmentImage\n key={attachment.file.uri}\n uri={attachment.file.uri}\n alt={attachment.file.name}\n status={attachment.status}\n width={attachment.file.width}\n height={attachment.file.height}\n removeAttachment={() => {\n attachmentUploader?.removeAttachment(attachment)\n }}\n />\n )\n })}\n </View>\n )\n}\n\nfunction MessageFormInput() {\n const styles = useMessageFormStyles()\n const theme = useTheme()\n const { text, setText, onSubmit, usingGiphy, attachmentUploader } =\n React.useContext(MessageFormContext)\n const attachmentError = attachmentUploader?.errorMessage\n\n const route = useRoute<RouteProp<ConversationScreenProps['route']>>()\n const conversationId = route.params.conversation_id\n const broadcastTypingStatus = useBroadcastTypingStatus(conversationId)\n\n const handleTextChange = (newText: string) => {\n setText(newText)\n\n if (newText.length > 0) {\n broadcastTypingStatus()\n }\n }\n\n return (\n <View style={styles.textInputBoundary}>\n <MessageFormAttachments />\n <View style={styles.textInputRow}>\n {usingGiphy ? (\n <View style={styles.giphyBadge}>\n <Text style={styles.giphyBadgeText}>/giphy</Text>\n </View>\n ) : null}\n\n <TextInput\n style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]}\n multiline={true}\n aria-disabled={true}\n placeholder=\"Send a message\"\n placeholderTextColor={theme.colors.textColorDefaultPlaceholder}\n onChangeText={handleTextChange}\n value={text}\n maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}\n onSubmitEditing={onSubmit}\n />\n </View>\n\n {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}\n </View>\n )\n}\n\nfunction MessageFormSubmitBtn() {\n const { onSubmit, disabled, usingGiphy } = React.useContext(MessageFormContext)\n const styles = useMessageFormStyles()\n const { colors } = useTheme()\n\n const colorKey = disabled ? 'disabled' : 'interaction'\n const interactionStart = colors.buttonStart || colors.interaction\n const interactionEnd = colors.buttonEnd || colors.interaction\n const colorMap = {\n disabled: [\n colors.fillColorButtonNeutralSolidDisabled,\n colors.fillColorButtonNeutralSolidDisabled,\n ],\n interaction: [interactionStart, interactionEnd],\n }\n\n const androidRippleColor = useCreateAndroidRippleColor({ color: colorMap[colorKey][0] })\n const gradientColors = colorMap[colorKey] as [string, string]\n const iconStyles = [styles.submitIcon, disabled && styles.submitIconDisabled]\n\n return (\n <Pressable\n disabled={disabled}\n onPress={onSubmit}\n accessibilityRole=\"button\"\n accessibilityLabel={usingGiphy ? 'Search Giphy' : 'Send message'}\n style={({ pressed }) => [\n styles.submitPressableWrapper,\n pressed && platformPressedOpacityStyle,\n ]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n >\n <LinearGradient\n start={{ x: 0.1, y: 0.1 }}\n end={{ x: 0.9, y: 0.9 }}\n colors={gradientColors}\n style={styles.submitGradientWrapper}\n >\n <Icon\n name={usingGiphy ? 'general.search' : 'general.upArrow'}\n style={iconStyles}\n accessibilityElementsHidden={true}\n />\n </LinearGradient>\n </Pressable>\n )\n}\n\nfunction MessageFormAttachmentPicker() {\n const styles = useMessageFormStyles()\n const { usingGiphy, attachmentUploader, currentlyEditingMessage } =\n React.useContext(MessageFormContext)\n const [isOpen, setIsOpen] = useState(false)\n\n function uploadImagePickerResult(result: ImagePickerResult) {\n if (result.canceled) {\n return\n }\n\n const filteredAssets = result.assets\n .filter(asset => {\n return asset.fileSize && asset.fileName && asset.mimeType\n })\n .map(asset => {\n return {\n uri: asset.uri,\n name: asset.fileName as string,\n type: asset.mimeType as string,\n size: asset.fileSize as number,\n height: asset.height,\n width: asset.width,\n }\n })\n\n attachmentUploader?.handleFilesAttached(filteredAssets)\n }\n\n const openCamera = async () => {\n setIsOpen(false)\n let result = await ImagePicker.openCameraAsync()\n if (!result.canceled) {\n uploadImagePickerResult(result)\n }\n }\n\n const pickImage = async () => {\n setIsOpen(false)\n let result = await ImagePicker.openImageLibraryAsync()\n if (!result.canceled) {\n uploadImagePickerResult(result)\n }\n }\n\n if (usingGiphy || currentlyEditingMessage) {\n return null\n }\n\n return (\n <View style={styles.attachmentPicker}>\n {isOpen && (\n <View style={styles.attachmentPickerButtonsContainer}>\n <IconButton\n accessibilityLabel=\"Take a photo\"\n accessibilityHint=\"Opens your camera\"\n size=\"lg\"\n appearance=\"neutral\"\n name=\"general.videoCamera\"\n onPress={openCamera}\n style={styles.attachmentPickerButton}\n />\n <IconButton\n accessibilityLabel=\"Choose a photo\"\n accessibilityHint=\"Opens your photo gallery\"\n size=\"lg\"\n appearance=\"neutral\"\n name=\"churchCenter.photosIos\"\n onPress={pickImage}\n style={styles.attachmentPickerButton}\n />\n </View>\n )}\n <IconButton\n accessibilityLabel=\"File Menu\"\n accessibilityHint=\"Opens options to attach or take a photo\"\n size=\"lg\"\n appearance=\"neutral\"\n name=\"general.paperclip\"\n onPress={() => setIsOpen(!isOpen)}\n style={styles.formButton}\n />\n </View>\n )\n}\n\nfunction MessageFormCommands() {\n const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)\n const styles = useMessageFormStyles()\n\n if (!canGiphy) {\n return null\n }\n\n if (usingGiphy) {\n return (\n <IconButton\n accessibilityLabel=\"Exit Giphy Search\"\n size=\"md\"\n appearance=\"neutral\"\n name={'general.x'}\n onPress={() => setUsingGiphy(false)}\n style={styles.formButton}\n />\n )\n }\n\n return (\n <IconButton\n accessibilityLabel=\"Search Giphy\"\n size=\"lg\"\n appearance=\"neutral\"\n name={'general.bolt'}\n onPress={() => setUsingGiphy(true)}\n disabled={text.length > GIPHY_MAX_LENGTH}\n style={styles.formButton}\n />\n )\n}\n\nfunction EditingIndicator() {\n const { currentlyEditingMessage } = React.useContext(MessageFormContext)\n const styles = useMessageFormStyles()\n const navigation = useNavigation()\n\n if (!currentlyEditingMessage) {\n return null\n }\n\n return (\n <View style={styles.editingIndicator}>\n <Text>Editing message</Text>\n <IconButton\n accessibilityLabel=\"Exit message editing\"\n name={'general.x'}\n onPress={() => navigation.setParams({ editing_message_id: null })}\n />\n </View>\n )\n}\n\nconst useMessageFormStyles = () => {\n const theme = useTheme()\n const navigationTheme = useNavigationTheme()\n const buttonSize = 38\n\n return StyleSheet.create({\n container: {\n borderColor: theme.colors.fillColorNeutral050Base,\n borderTopWidth: 1,\n padding: 12,\n },\n textInputContainer: {\n backgroundColor: navigationTheme.colors.card,\n flexDirection: 'row',\n alignItems: 'flex-end',\n gap: 16,\n },\n textInputBoundary: {\n borderRadius: 24,\n borderWidth: 1,\n borderColor: theme.colors.fillColorNeutral050Base,\n flex: 1,\n gap: 12,\n },\n textInputRow: {\n flexDirection: 'row',\n gap: 12,\n alignItems: 'center',\n },\n textInput: {\n paddingVertical: 8,\n paddingHorizontal: 16,\n color: theme.colors.textColorDefaultPrimary,\n textAlignVertical: 'center',\n justifyContent: 'center',\n flex: 1,\n fontSize: 16,\n maxHeight: 200,\n },\n textInputWithGiphy: {\n paddingLeft: 0,\n },\n giphyBadge: {\n backgroundColor: theme.colors.fillColorNeutral050Base,\n borderRadius: 24,\n paddingHorizontal: 12,\n marginLeft: 12,\n padding: 4,\n },\n giphyBadgeText: {\n fontSize: 14,\n color: theme.colors.interaction,\n },\n formButton: {\n height: buttonSize,\n },\n submitPressableWrapper: {\n borderRadius: buttonSize,\n overflow: 'hidden',\n },\n submitGradientWrapper: {\n flexDirection: 'row',\n justifyContent: 'center',\n alignItems: 'center',\n borderRadius: buttonSize,\n height: buttonSize,\n width: buttonSize,\n },\n submitIcon: {\n fontSize: 16,\n color: tokens.colorNeutral100White,\n },\n submitIconDisabled: {\n color: theme.colors.iconColorDefaultDisabled,\n },\n attachmentPicker: {\n position: 'relative',\n },\n attachmentPickerButtonsContainer: {\n position: 'absolute',\n left: 0,\n bottom: 40,\n zIndex: 10,\n gap: 12,\n },\n attachmentPickerButton: {\n backgroundColor: theme.colors.fillColorNeutral070,\n borderRadius: 20,\n height: buttonSize,\n width: buttonSize,\n elevation: 3,\n ...Platform.select({\n ios: {\n borderWidth: 1,\n borderColor: theme.colors.borderColorDefaultBase,\n },\n default: null,\n }),\n },\n messageFormAttachments: {\n flexDirection: 'row',\n gap: 8,\n },\n inputErrorMessage: {\n color: theme.colors.statusErrorText,\n fontSize: 14,\n },\n editingIndicator: {\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'center',\n gap: 8,\n paddingBottom: 12,\n },\n })\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conversation_actions.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAClF,OAAO,EAAuB,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAU1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"conversation_actions.d.ts","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAA4C,MAAM,OAAO,CAAA;AAClF,OAAO,EAAuB,SAAS,EAAoB,SAAS,EAAE,MAAM,cAAc,CAAA;AAU1F,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAA;AAKlD,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,EAAE,oBAAoB,CAAA;IAClC,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC7B,qBAuDA"}
|
|
@@ -2,8 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
|
|
|
2
2
|
import { Platform, Pressable, StyleSheet, View } from 'react-native';
|
|
3
3
|
import ReanimatedSwipeable from 'react-native-gesture-handler/ReanimatedSwipeable';
|
|
4
4
|
import { useConversationsContext } from '../../contexts/conversations_context';
|
|
5
|
-
import { useTheme } from '../../hooks';
|
|
5
|
+
import { useTheme, useCreateAndroidRippleColor } from '../../hooks';
|
|
6
6
|
import { useConversationsMarkRead, useConversationsMute, } from '../../hooks/use_conversations_actions';
|
|
7
|
+
import { platformPressedOpacityStyle } from '../../utils';
|
|
7
8
|
import { tokens } from '../../vendor/tapestry/tokens';
|
|
8
9
|
import { ActionToggleButton } from './action_toggle_button';
|
|
9
10
|
export function ConversationActions({ children, conversation, style, onPress, }) {
|
|
@@ -12,6 +13,9 @@ export function ConversationActions({ children, conversation, style, onPress, })
|
|
|
12
13
|
const { activeConversationId, setActiveConversationId } = useConversationsContext();
|
|
13
14
|
const [disabled, setDisabled] = useState(false);
|
|
14
15
|
const overshootLeft = Platform.OS === 'ios';
|
|
16
|
+
const androidRippleColor = useCreateAndroidRippleColor({
|
|
17
|
+
color: styles.swipeableChildContainer.backgroundColor,
|
|
18
|
+
});
|
|
15
19
|
const handleSwipeableClose = () => {
|
|
16
20
|
setDisabled(false);
|
|
17
21
|
swipeableRef.current?.close();
|
|
@@ -31,7 +35,7 @@ export function ConversationActions({ children, conversation, style, onPress, })
|
|
|
31
35
|
handleSwipeableClose();
|
|
32
36
|
}, [activeConversationId, conversation.id]);
|
|
33
37
|
return (<ReanimatedSwipeable ref={swipeableRef} childrenContainerStyle={styles.swipeableChildContainer} containerStyle={styles.swipeableContainer} overshootFriction={8} overshootLeft={overshootLeft} overshootRight={false} onSwipeableOpenStartDrag={handleSwipeableOpen} onSwipeableClose={() => setDisabled(false)} renderRightActions={() => <></>} renderLeftActions={() => (<LeftActions conversation={conversation} onClose={handleSwipeableClose}/>)}>
|
|
34
|
-
<Pressable onPress={handlePress} style={style}>
|
|
38
|
+
<Pressable onPress={handlePress} style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}>
|
|
35
39
|
{children}
|
|
36
40
|
</Pressable>
|
|
37
41
|
</ReanimatedSwipeable>);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"conversation_actions.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,UAAU,EAAE,IAAI,EAAa,MAAM,cAAc,CAAA;AAC1F,OAAO,mBAEN,MAAM,kDAAkD,CAAA;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAA;AAC9E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"conversation_actions.js","sourceRoot":"","sources":["../../../src/components/conversations/conversation_actions.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAClF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAa,UAAU,EAAE,IAAI,EAAa,MAAM,cAAc,CAAA;AAC1F,OAAO,mBAEN,MAAM,kDAAkD,CAAA;AACzD,OAAO,EAAE,uBAAuB,EAAE,MAAM,sCAAsC,CAAA;AAC9E,OAAO,EAAE,QAAQ,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AACnE,OAAO,EACL,wBAAwB,EACxB,oBAAoB,GACrB,MAAM,uCAAuC,CAAA;AAE9C,OAAO,EAAE,2BAA2B,EAAE,MAAM,aAAa,CAAA;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AAE3D,MAAM,UAAU,mBAAmB,CAAC,EAClC,QAAQ,EACR,YAAY,EACZ,KAAK,EACL,OAAO,GAMR;IACC,MAAM,YAAY,GAAG,MAAM,CAAmB,IAAI,CAAC,CAAA;IACnD,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,GAAG,uBAAuB,EAAE,CAAA;IACnF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAC/C,MAAM,aAAa,GAAG,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAA;IAC3C,MAAM,kBAAkB,GAAG,2BAA2B,CAAC;QACrD,KAAK,EAAE,MAAM,CAAC,uBAAuB,CAAC,eAAe;KACtD,CAAC,CAAA;IAEF,MAAM,oBAAoB,GAAG,GAAG,EAAE;QAChC,WAAW,CAAC,KAAK,CAAC,CAAA;QAClB,YAAY,CAAC,OAAO,EAAE,KAAK,EAAE,CAAA;IAC/B,CAAC,CAAA;IAED,MAAM,mBAAmB,GAAG,GAAG,EAAE;QAC/B,WAAW,CAAC,IAAI,CAAC,CAAA;QACjB,uBAAuB,CAAC,YAAY,CAAC,EAAE,CAAC,CAAA;IAC1C,CAAC,CAAA;IAED,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,IAAI,QAAQ,IAAI,CAAC,OAAO;YAAE,OAAM;QAChC,OAAO,EAAE,CAAA;IACX,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAA;IAEvB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,oBAAoB,KAAK,YAAY,CAAC,EAAE;YAAE,OAAM;QAEpD,oBAAoB,EAAE,CAAA;IACxB,CAAC,EAAE,CAAC,oBAAoB,EAAE,YAAY,CAAC,EAAE,CAAC,CAAC,CAAA;IAE3C,OAAO,CACL,CAAC,mBAAmB,CAClB,GAAG,CAAC,CAAC,YAAY,CAAC,CAClB,sBAAsB,CAAC,CAAC,MAAM,CAAC,uBAAuB,CAAC,CACvD,cAAc,CAAC,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAC1C,iBAAiB,CAAC,CAAC,CAAC,CAAC,CACrB,aAAa,CAAC,CAAC,aAAa,CAAC,CAC7B,cAAc,CAAC,CAAC,KAAK,CAAC,CACtB,wBAAwB,CAAC,CAAC,mBAAmB,CAAC,CAC9C,gBAAgB,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC,CAC3C,kBAAkB,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,GAAG,CAAC,CAChC,iBAAiB,CAAC,CAAC,GAAG,EAAE,CAAC,CACvB,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC,OAAO,CAAC,CAAC,oBAAoB,CAAC,EAAG,CAC3E,CAAC,CAEF;MAAA,CAAC,SAAS,CACR,OAAO,CAAC,CAAC,WAAW,CAAC,CACrB,KAAK,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,KAAK,EAAE,OAAO,IAAI,2BAA2B,CAAC,CAAC,CACxE,cAAc,CAAC,CAAC,EAAE,KAAK,EAAE,kBAAkB,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,EAAE,IAAI,EAAE,CAAC,CAEnF;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,SAAS,CACb;IAAA,EAAE,mBAAmB,CAAC,CACvB,CAAA;AACH,CAAC;AAOD,SAAS,WAAW,CAAC,EAAE,YAAY,EAAE,OAAO,EAAoB;IAC9D,MAAM,MAAM,GAAG,SAAS,EAAE,CAAA;IAC1B,MAAM,iBAAiB,GAAG,YAAY,CAAC,oBAAoB,KAAK,IAAI,CAAA;IAEpE,MAAM,iBAAiB,GAAG;QACxB,IAAI,EAAE,EAAE,QAAQ,EAAE,cAAc,EAAE,KAAK,EAAE,QAAQ,EAAE;QACnD,KAAK,EAAE,EAAE,QAAQ,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,EAAE;KAC/C,CAAA;IAEV,MAAM,gCAAgC,GAAG;QACvC,IAAI,EAAE,EAAE,QAAQ,EAAE,6BAA6B,EAAE,KAAK,EAAE,WAAW,EAAE;QACrE,KAAK,EAAE,EAAE,QAAQ,EAAE,kCAAkC,EAAE,KAAK,EAAE,aAAa,EAAE;KACrE,CAAA;IACV,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,oBAAoB,CAAC,EAAE,YAAY,EAAE,CAAC,CAAA;IAC7E,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,SAAS,EAAE,eAAe,EAAE,GAAG,wBAAwB,CAAC,EAAE,YAAY,EAAE,CAAC,CAAA;IAEjG,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,QAAQ,CAAC,CAAC,KAAK,CAAC,CAAA;QAChB,OAAO,EAAE,CAAA;IACX,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE9B,MAAM,yBAAyB,GAAG,WAAW,CAAC,GAAG,EAAE;QACjD,QAAQ,CAAC,CAAC,IAAI,CAAC,CAAA;QACf,OAAO,EAAE,CAAA;IACX,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE7B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CACxC;MAAA,CAAC,kBAAkB,CACjB,OAAO,CAAC,CAAC,eAAe,CAAC,CACzB,QAAQ,CAAC,CAAC,iBAAiB,CAAC,CAC5B,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CACf,OAAO,CAAC,CAAC,yBAAyB,CAAC,CACnC,aAAa,CAAC,CAAC,gCAAgC,CAAC,CAChD,eAAe,CAAC,CAAC,MAAM,CAAC,gCAAgC,CAAC,EAE3D;MAAA,CAAC,kBAAkB,CACjB,OAAO,CAAC,CAAC,SAAS,CAAC,CACnB,OAAO,CAAC,CAAC,KAAK,CAAC,CACf,OAAO,CAAC,CAAC,UAAU,CAAC,CACpB,aAAa,CAAC,CAAC,iBAAiB,CAAC,CACjC,eAAe,CAAC,CAAC,MAAM,CAAC,kCAAkC,CAAC,EAE/D;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,mBAAmB,GAAG,GAAG,CAAA;AAC/B,MAAM,mBAAmB,GAAG,CAAC,CAAA;AAE7B,MAAM,SAAS,GAAG,GAAG,EAAE;IACrB,MAAM,EAAE,MAAM,EAAE,GAAG,QAAQ,EAAE,CAAA;IAC7B,OAAO,UAAU,CAAC,MAAM,CAAC;QACvB,uBAAuB,EAAE;YACvB,eAAe,EAAE,MAAM,CAAC,eAAe;SACxC;QACD,qBAAqB,EAAE;YACrB,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,mBAAmB,GAAG,mBAAmB;YAChD,YAAY,EAAE,SAAS;SACxB;QACD,kBAAkB,EAAE;YAClB,eAAe,EAAE,MAAM,CAAC,eAAe;SACxC;KACF,CAAC,CAAA;AACJ,CAAC,CAAA","sourcesContent":["import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'react'\nimport { Platform, Pressable, StyleProp, StyleSheet, View, ViewStyle } from 'react-native'\nimport ReanimatedSwipeable, {\n SwipeableMethods,\n} from 'react-native-gesture-handler/ReanimatedSwipeable'\nimport { useConversationsContext } from '../../contexts/conversations_context'\nimport { useTheme, useCreateAndroidRippleColor } from '../../hooks'\nimport {\n useConversationsMarkRead,\n useConversationsMute,\n} from '../../hooks/use_conversations_actions'\nimport { ConversationResource } from '../../types'\nimport { platformPressedOpacityStyle } from '../../utils'\nimport { tokens } from '../../vendor/tapestry/tokens'\nimport { ActionToggleButton } from './action_toggle_button'\n\nexport function ConversationActions({\n children,\n conversation,\n style,\n onPress,\n}: {\n children: ReactNode\n conversation: ConversationResource\n onPress: () => void\n style?: StyleProp<ViewStyle>\n}) {\n const swipeableRef = useRef<SwipeableMethods>(null)\n const styles = useStyles()\n const { activeConversationId, setActiveConversationId } = useConversationsContext()\n const [disabled, setDisabled] = useState(false)\n const overshootLeft = Platform.OS === 'ios'\n const androidRippleColor = useCreateAndroidRippleColor({\n color: styles.swipeableChildContainer.backgroundColor,\n })\n\n const handleSwipeableClose = () => {\n setDisabled(false)\n swipeableRef.current?.close()\n }\n\n const handleSwipeableOpen = () => {\n setDisabled(true)\n setActiveConversationId(conversation.id)\n }\n\n const handlePress = useCallback(() => {\n if (disabled || !onPress) return\n onPress()\n }, [disabled, onPress])\n\n useEffect(() => {\n if (activeConversationId === conversation.id) return\n\n handleSwipeableClose()\n }, [activeConversationId, conversation.id])\n\n return (\n <ReanimatedSwipeable\n ref={swipeableRef}\n childrenContainerStyle={styles.swipeableChildContainer}\n containerStyle={styles.swipeableContainer}\n overshootFriction={8}\n overshootLeft={overshootLeft}\n overshootRight={false}\n onSwipeableOpenStartDrag={handleSwipeableOpen}\n onSwipeableClose={() => setDisabled(false)}\n renderRightActions={() => <></>}\n renderLeftActions={() => (\n <LeftActions conversation={conversation} onClose={handleSwipeableClose} />\n )}\n >\n <Pressable\n onPress={handlePress}\n style={({ pressed }) => [style, pressed && platformPressedOpacityStyle]}\n android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}\n >\n {children}\n </Pressable>\n </ReanimatedSwipeable>\n )\n}\n\ninterface LeftActionsProps {\n conversation: ConversationResource\n onClose: () => void\n}\n\nfunction LeftActions({ conversation, onClose }: LeftActionsProps) {\n const styles = useStyles()\n const emptyConversation = conversation.lastMessageCreatedAt === null\n\n const muteToggleContent = {\n true: { iconName: 'general.bell', label: 'Unmute' },\n false: { iconName: 'general.bellMuted', label: 'Mute' },\n } as const\n\n const latestMessageUnreadToggleContent = {\n true: { iconName: 'general.outlinedTextMessage', label: 'Mark read' },\n false: { iconName: 'general.textMessageNotifications', label: 'Mark unread' },\n } as const\n const { muted, setMuted, isPending } = useConversationsMute({ conversation })\n const { read, markRead, isPending: markReadPending } = useConversationsMarkRead({ conversation })\n\n const handleMute = useCallback(() => {\n setMuted(!muted)\n onClose()\n }, [muted, onClose, setMuted])\n\n const handleLatestMessageUnread = useCallback(() => {\n markRead(!read)\n onClose()\n }, [read, onClose, markRead])\n\n return (\n <View style={styles.actionButtonContainer}>\n <ActionToggleButton\n loading={markReadPending}\n disabled={emptyConversation}\n toggled={!read}\n onPress={handleLatestMessageUnread}\n toggleContent={latestMessageUnreadToggleContent}\n backgroundColor={tokens.fillColorInteractionSwipeDefault}\n />\n <ActionToggleButton\n loading={isPending}\n toggled={muted}\n onPress={handleMute}\n toggleContent={muteToggleContent}\n backgroundColor={tokens.fillColorInteractionSwipeSecondary}\n />\n </View>\n )\n}\n\nconst ACTION_BUTTON_WIDTH = 120\nconst ACTION_BUTTON_COUNT = 2\n\nconst useStyles = () => {\n const { colors } = useTheme()\n return StyleSheet.create({\n swipeableChildContainer: {\n backgroundColor: colors.surfaceColor100,\n },\n actionButtonContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n width: ACTION_BUTTON_WIDTH * ACTION_BUTTON_COUNT,\n alignContent: 'stretch',\n },\n swipeableContainer: {\n backgroundColor: colors.surfaceColor090,\n },\n })\n}\n"]}
|
|
@@ -27,13 +27,13 @@ export interface ButtonProps extends PressableProps {
|
|
|
27
27
|
*/
|
|
28
28
|
appearance?: ButtonAppearanceUnion;
|
|
29
29
|
/**
|
|
30
|
-
* Styles the
|
|
30
|
+
* Styles the outer LinearGradient that gives the button its background and outline color
|
|
31
31
|
*/
|
|
32
|
-
|
|
32
|
+
colorWrapperStyles?: ViewStyle;
|
|
33
33
|
/**
|
|
34
|
-
* Styles the
|
|
34
|
+
* Styles the inner View that wraps the button's content
|
|
35
35
|
*/
|
|
36
|
-
|
|
36
|
+
contentWrapperStyles?: ViewStyle;
|
|
37
37
|
/**
|
|
38
38
|
* Generates an icon to the left of the button text
|
|
39
39
|
*/
|
|
@@ -67,6 +67,6 @@ export interface ButtonProps extends PressableProps {
|
|
|
67
67
|
*/
|
|
68
68
|
variant?: VariantUnion;
|
|
69
69
|
}
|
|
70
|
-
export declare function Button({ adjustsFontSizeToFit, allowFontScaling, appearance,
|
|
70
|
+
export declare function Button({ adjustsFontSizeToFit, allowFontScaling, appearance, contentWrapperStyles, colorWrapperStyles, disabled, iconNameLeft, iconNameRight, loading, maxFontSizeMultiplier, minimumFontScale, size, title, variant, style, ...props }: ButtonProps): React.JSX.Element;
|
|
71
71
|
export {};
|
|
72
72
|
//# sourceMappingURL=button.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/display/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAMzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAMlE,QAAA,MAAM,KAAK;;;;CAID,CAAA;AAEV,KAAK,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAA;AAYnD,QAAA,MAAM,QAAQ;;;CAGJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAa5D,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC;;OAEG;IACH,
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/display/button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAE7D,OAAO,EAAQ,UAAU,EAAE,MAAM,QAAQ,CAAA;AAMzC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAA;AAMlE,QAAA,MAAM,KAAK;;;;CAID,CAAA;AAEV,KAAK,SAAS,GAAG,CAAC,OAAO,KAAK,CAAC,CAAC,MAAM,OAAO,KAAK,CAAC,CAAA;AAYnD,QAAA,MAAM,QAAQ;;;CAGJ,CAAA;AAEV,KAAK,YAAY,GAAG,CAAC,OAAO,QAAQ,CAAC,CAAC,MAAM,OAAO,QAAQ,CAAC,CAAA;AAa5D,MAAM,WAAW,WAAY,SAAQ,cAAc;IACjD;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B;;OAEG;IACH,UAAU,CAAC,EAAE,qBAAqB,CAAA;IAClC;;OAEG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAA;IAC9B;;OAEG;IACH,oBAAoB,CAAC,EAAE,SAAS,CAAA;IAChC;;OAEG;IACH,YAAY,CAAC,EAAE,UAAU,CAAA;IACzB;;OAEG;IACH,aAAa,CAAC,EAAE,UAAU,CAAA;IAC1B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;OAEG;IACH,qBAAqB,CAAC,EAAE,MAAM,CAAA;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,OAAO,CAAC,EAAE,YAAY,CAAA;CACvB;AAED,wBAAgB,MAAM,CAAC,EACrB,oBAA4B,EAC5B,gBAAuB,EACvB,UAA0B,EAC1B,oBAAoB,EACpB,kBAAkB,EAClB,QAAgB,EAChB,YAAY,EACZ,aAAa,EACb,OAAO,EACP,qBAAqB,EACrB,gBAAgB,EAChB,IAAW,EACX,KAAK,EACL,OAAgB,EAChB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,WAAW,qBAiEb"}
|
|
@@ -19,17 +19,22 @@ const VARIANTS = {
|
|
|
19
19
|
fill: 'fill',
|
|
20
20
|
outline: 'outline',
|
|
21
21
|
};
|
|
22
|
-
export function Button({ adjustsFontSizeToFit = false, allowFontScaling = true, appearance = 'interaction',
|
|
22
|
+
export function Button({ adjustsFontSizeToFit = false, allowFontScaling = true, appearance = 'interaction', contentWrapperStyles, colorWrapperStyles, disabled = false, iconNameLeft, iconNameRight, loading, maxFontSizeMultiplier, minimumFontScale, size = 'md', title, variant = 'fill', style, ...props }) {
|
|
23
23
|
const styles = useStyles({ appearance, disabled, loading, maxFontSizeMultiplier, size, variant });
|
|
24
24
|
const gradientOptionsMap = useGradientColorMap();
|
|
25
25
|
const colorKey = getColorKey({ disabled, loading, appearance });
|
|
26
|
+
const overrideStyles = StyleSheet.flatten(style);
|
|
26
27
|
const textStyles = [styles.text, disabled && styles.textDisabled, loading && styles.iconLoading];
|
|
27
28
|
const iconStyles = [styles.icon, disabled && styles.iconDisabled, loading && styles.textLoading];
|
|
28
29
|
const androidRippleColor = useCreateAndroidRippleColor({ color: gradientOptionsMap[colorKey][0] });
|
|
29
|
-
return (<Pressable style={({ pressed }) =>
|
|
30
|
-
|
|
30
|
+
return (<Pressable style={({ pressed }) => ({
|
|
31
|
+
...styles.pressable,
|
|
32
|
+
...(pressed && platformPressedOpacityStyle),
|
|
33
|
+
...overrideStyles,
|
|
34
|
+
})} accessibilityRole="button" disabled={disabled || loading} accessibilityState={{ busy: loading }} android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }} {...props}>
|
|
35
|
+
<LinearGradient start={{ x: 0.1, y: 0.1 }} end={{ x: 0.9, y: 0.9 }} colors={gradientOptionsMap[colorKey]} style={[styles.colorWrapper, colorWrapperStyles]}>
|
|
31
36
|
{loading && (<Spinner size={styles.spinner.fontSize} maxFontSizeMultiplier={maxFontSizeMultiplier || 0}/>)}
|
|
32
|
-
<View style={[styles.innerWrapper,
|
|
37
|
+
<View style={[styles.innerWrapper, contentWrapperStyles]}>
|
|
33
38
|
{iconNameLeft && (<Icon name={iconNameLeft} style={iconStyles} maxFontSizeMultiplier={maxFontSizeMultiplier}/>)}
|
|
34
39
|
<Text allowFontScaling={allowFontScaling} minimumFontScale={minimumFontScale} maxFontSizeMultiplier={maxFontSizeMultiplier} adjustsFontSizeToFit={adjustsFontSizeToFit} numberOfLines={1} style={textStyles}>
|
|
35
40
|
{title}
|