rn-vs-lb 1.0.60 → 1.0.62
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.
|
@@ -22,6 +22,7 @@ const meta: Meta<Props> = {
|
|
|
22
22
|
argTypes: {
|
|
23
23
|
onAttachPress: { control: false },
|
|
24
24
|
onMaxImagesExceeded: { control: false },
|
|
25
|
+
enableImageAttachment: { control: 'boolean' },
|
|
25
26
|
},
|
|
26
27
|
};
|
|
27
28
|
export default meta;
|
|
@@ -89,6 +90,12 @@ Default.args = {
|
|
|
89
90
|
maxImages: 1,
|
|
90
91
|
};
|
|
91
92
|
|
|
93
|
+
export const AttachmentsDisabled = Template.bind({});
|
|
94
|
+
AttachmentsDisabled.args = {
|
|
95
|
+
placeholder: 'No attachments allowed',
|
|
96
|
+
enableImageAttachment: false,
|
|
97
|
+
};
|
|
98
|
+
|
|
92
99
|
export const WithAttachments = Template.bind({});
|
|
93
100
|
WithAttachments.args = {
|
|
94
101
|
placeholder: 'Attach up to 2 images',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { FC, useCallback, useRef, useState } from 'react';
|
|
1
|
+
import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
|
|
2
2
|
import { View, StyleSheet, TextInput, TouchableOpacity, Text, Image, ScrollView, ActivityIndicator } from 'react-native';
|
|
3
3
|
import { Ionicons } from '@expo/vector-icons';
|
|
4
4
|
import { ThemeType, useTheme } from '../../theme';
|
|
@@ -22,6 +22,7 @@ interface InputMessageProps {
|
|
|
22
22
|
maxImages?: number; // по умолчанию 1
|
|
23
23
|
onAttachPress?: () => Promise<ImageAsset[] | void>; // родитель сам открывает пикер и вернёт выбранные
|
|
24
24
|
onMaxImagesExceeded?: (max: number) => void;
|
|
25
|
+
enableImageAttachment?: boolean;
|
|
25
26
|
|
|
26
27
|
// Индикатор отправки (можно не передавать — тогда управляем внутри)
|
|
27
28
|
sendingControlled?: boolean;
|
|
@@ -47,6 +48,7 @@ export const InputMessage: FC<InputMessageProps> = ({
|
|
|
47
48
|
maxImages = 1,
|
|
48
49
|
onAttachPress,
|
|
49
50
|
onMaxImagesExceeded,
|
|
51
|
+
enableImageAttachment = true,
|
|
50
52
|
|
|
51
53
|
sendingControlled,
|
|
52
54
|
isSending: isSendingProp,
|
|
@@ -64,6 +66,13 @@ export const InputMessage: FC<InputMessageProps> = ({
|
|
|
64
66
|
const [isSendingLocal, setIsSendingLocal] = useState(false);
|
|
65
67
|
|
|
66
68
|
const isSending = sendingControlled ? !!isSendingProp : isSendingLocal;
|
|
69
|
+
const attachmentsAllowed = enableImageAttachment;
|
|
70
|
+
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
if (!attachmentsAllowed && images.length > 0) {
|
|
73
|
+
setImages([]);
|
|
74
|
+
}
|
|
75
|
+
}, [attachmentsAllowed, images.length]);
|
|
67
76
|
|
|
68
77
|
// Собственный дебаунс без lodash
|
|
69
78
|
const stopTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
|
|
@@ -74,7 +83,7 @@ export const InputMessage: FC<InputMessageProps> = ({
|
|
|
74
83
|
}, [onTyping, onStopTyping]);
|
|
75
84
|
|
|
76
85
|
const handleAttachPress = useCallback(async () => {
|
|
77
|
-
if (!onAttachPress) return;
|
|
86
|
+
if (!attachmentsAllowed || !onAttachPress) return;
|
|
78
87
|
const selected = (await onAttachPress()) || [];
|
|
79
88
|
if (!selected.length) return;
|
|
80
89
|
|
|
@@ -165,7 +174,12 @@ export const InputMessage: FC<InputMessageProps> = ({
|
|
|
165
174
|
)}
|
|
166
175
|
|
|
167
176
|
{/* Поле ввода + кнопки */}
|
|
168
|
-
<View
|
|
177
|
+
<View
|
|
178
|
+
style={[
|
|
179
|
+
styles.inputContainer,
|
|
180
|
+
attachmentsAllowed ? styles.inputContainerWithAttach : styles.inputContainerWithoutAttach,
|
|
181
|
+
]}
|
|
182
|
+
>
|
|
169
183
|
<TextInput
|
|
170
184
|
multiline
|
|
171
185
|
placeholder={placeholder}
|
|
@@ -183,9 +197,11 @@ export const InputMessage: FC<InputMessageProps> = ({
|
|
|
183
197
|
onContentSizeChange={(e) => setInputHeight(e.nativeEvent.contentSize.height)}
|
|
184
198
|
/>
|
|
185
199
|
|
|
186
|
-
|
|
187
|
-
<
|
|
188
|
-
|
|
200
|
+
{attachmentsAllowed && (
|
|
201
|
+
<TouchableOpacity style={styles.attachButton} onPress={handleAttachPress}>
|
|
202
|
+
<Ionicons name="image-outline" size={22} color={theme.primary} />
|
|
203
|
+
</TouchableOpacity>
|
|
204
|
+
)}
|
|
189
205
|
|
|
190
206
|
<TouchableOpacity style={styles.sendButton} onPress={handleSubmit} disabled={isSending}>
|
|
191
207
|
{isSending ? (
|
|
@@ -208,8 +224,13 @@ export const getStyles = (theme: ThemeType) =>
|
|
|
208
224
|
borderTopWidth: 1,
|
|
209
225
|
borderTopColor: theme.border,
|
|
210
226
|
paddingRight: 45,
|
|
227
|
+
},
|
|
228
|
+
inputContainerWithAttach: {
|
|
211
229
|
paddingLeft: 45,
|
|
212
230
|
},
|
|
231
|
+
inputContainerWithoutAttach: {
|
|
232
|
+
paddingLeft: 12,
|
|
233
|
+
},
|
|
213
234
|
replyContainer: {
|
|
214
235
|
backgroundColor: theme.background,
|
|
215
236
|
padding: 6,
|