stream-chat-react-native-core 5.4.2 → 5.4.3
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/README.md +2 -2
- package/lib/commonjs/components/Chat/hooks/useAppSettings.js +1 -1
- package/lib/commonjs/components/Chat/hooks/useAppSettings.js.map +1 -1
- package/lib/commonjs/i18n/tr.json +19 -19
- package/lib/commonjs/version.json +1 -1
- package/lib/module/components/Chat/hooks/useAppSettings.js +1 -1
- package/lib/module/components/Chat/hooks/useAppSettings.js.map +1 -1
- package/lib/module/i18n/tr.json +19 -19
- package/lib/module/version.json +1 -1
- package/lib/typescript/i18n/tr.json +19 -19
- package/package.json +1 -1
- package/src/components/Chat/hooks/__tests__/useAppSettings.test.tsx +1 -0
- package/src/components/Chat/hooks/useAppSettings.ts +1 -1
- package/src/i18n/tr.json +19 -19
- package/src/version.json +1 -1
- package/lib/commonjs/components/Channel/Channel.md +0 -39
- package/lib/commonjs/components/ChannelList/ChannelList.md +0 -18
- package/lib/commonjs/components/ChannelList/ChannelListMessenger.md +0 -19
- package/lib/commonjs/components/Message/Message.md +0 -22
- package/lib/commonjs/components/Message/MessageSimple/MessageText.md +0 -4
- package/lib/commonjs/components/Message/MessageSimple/utils/renderText.md +0 -11
- package/lib/commonjs/components/docs/AttachmentProps.md +0 -1
- package/lib/commonjs/components/docs/ListProps.md +0 -14
- package/lib/commonjs/components/docs/MessageProps.md +0 -1
- package/lib/commonjs/components/docs/PreviewProps.md +0 -7
- package/lib/commonjs/contexts/channelContext/ChannelContext.md +0 -37
- package/lib/commonjs/contexts/channelsContext/ChannelsContext.md +0 -38
- package/lib/commonjs/contexts/chatContext/ChatContext.md +0 -37
- package/lib/commonjs/contexts/imageGalleryContext/ImageGalleryContext.md +0 -38
- package/lib/commonjs/contexts/keyboardContext/KeyboardContext.md +0 -5
- package/lib/commonjs/contexts/keyboardContext/withKeyboardContext.md +0 -18
- package/lib/commonjs/contexts/messageContext/MessageContext.md +0 -43
- package/lib/commonjs/contexts/messageInputContext/MessageInputContext.md +0 -40
- package/lib/commonjs/contexts/messagesContext/MessagesContext.md +0 -35
- package/lib/commonjs/contexts/messagesContext/withMessagesContext.md +0 -26
- package/lib/commonjs/contexts/overlayContext/OverlayContext.md +0 -34
- package/lib/commonjs/contexts/overlayContext/OverlayProvider.md +0 -0
- package/lib/commonjs/contexts/overlayContext/withOverlayContext.md +0 -1
- package/lib/commonjs/contexts/paginatedMessageListContext/PaginatedMessageListContext.md +0 -34
- package/lib/commonjs/contexts/suggestionsContext/SuggestionsContext.md +0 -28
- package/lib/commonjs/contexts/suggestionsContext/withSuggestionsContext.md +0 -1
- package/lib/commonjs/contexts/threadContext/ThreadContext.md +0 -34
- package/lib/commonjs/contexts/typingContext/TypingContext.md +0 -33
- package/lib/commonjs/utils/Streami18n.md +0 -390
- package/lib/module/components/Channel/Channel.md +0 -39
- package/lib/module/components/ChannelList/ChannelList.md +0 -18
- package/lib/module/components/ChannelList/ChannelListMessenger.md +0 -19
- package/lib/module/components/Message/Message.md +0 -22
- package/lib/module/components/Message/MessageSimple/MessageText.md +0 -4
- package/lib/module/components/Message/MessageSimple/utils/renderText.md +0 -11
- package/lib/module/components/docs/AttachmentProps.md +0 -1
- package/lib/module/components/docs/ListProps.md +0 -14
- package/lib/module/components/docs/MessageProps.md +0 -1
- package/lib/module/components/docs/PreviewProps.md +0 -7
- package/lib/module/contexts/channelContext/ChannelContext.md +0 -37
- package/lib/module/contexts/channelsContext/ChannelsContext.md +0 -38
- package/lib/module/contexts/chatContext/ChatContext.md +0 -37
- package/lib/module/contexts/imageGalleryContext/ImageGalleryContext.md +0 -38
- package/lib/module/contexts/keyboardContext/KeyboardContext.md +0 -5
- package/lib/module/contexts/keyboardContext/withKeyboardContext.md +0 -18
- package/lib/module/contexts/messageContext/MessageContext.md +0 -43
- package/lib/module/contexts/messageInputContext/MessageInputContext.md +0 -40
- package/lib/module/contexts/messagesContext/MessagesContext.md +0 -35
- package/lib/module/contexts/messagesContext/withMessagesContext.md +0 -26
- package/lib/module/contexts/overlayContext/OverlayContext.md +0 -34
- package/lib/module/contexts/overlayContext/OverlayProvider.md +0 -0
- package/lib/module/contexts/overlayContext/withOverlayContext.md +0 -1
- package/lib/module/contexts/paginatedMessageListContext/PaginatedMessageListContext.md +0 -34
- package/lib/module/contexts/suggestionsContext/SuggestionsContext.md +0 -28
- package/lib/module/contexts/suggestionsContext/withSuggestionsContext.md +0 -1
- package/lib/module/contexts/threadContext/ThreadContext.md +0 -34
- package/lib/module/contexts/typingContext/TypingContext.md +0 -33
- package/lib/module/utils/Streami18n.md +0 -390
- package/src/components/Channel/Channel.md +0 -39
- package/src/components/ChannelList/ChannelList.md +0 -18
- package/src/components/ChannelList/ChannelListMessenger.md +0 -19
- package/src/components/Message/Message.md +0 -22
- package/src/components/Message/MessageSimple/MessageText.md +0 -4
- package/src/components/Message/MessageSimple/utils/renderText.md +0 -11
- package/src/components/docs/AttachmentProps.md +0 -1
- package/src/components/docs/ListProps.md +0 -14
- package/src/components/docs/MessageProps.md +0 -1
- package/src/components/docs/PreviewProps.md +0 -7
- package/src/contexts/channelContext/ChannelContext.md +0 -37
- package/src/contexts/channelsContext/ChannelsContext.md +0 -38
- package/src/contexts/chatContext/ChatContext.md +0 -37
- package/src/contexts/imageGalleryContext/ImageGalleryContext.md +0 -38
- package/src/contexts/keyboardContext/KeyboardContext.md +0 -5
- package/src/contexts/keyboardContext/withKeyboardContext.md +0 -18
- package/src/contexts/messageContext/MessageContext.md +0 -43
- package/src/contexts/messageInputContext/MessageInputContext.md +0 -40
- package/src/contexts/messagesContext/MessagesContext.md +0 -35
- package/src/contexts/messagesContext/withMessagesContext.md +0 -26
- package/src/contexts/overlayContext/OverlayContext.md +0 -34
- package/src/contexts/overlayContext/OverlayProvider.md +0 -0
- package/src/contexts/overlayContext/withOverlayContext.md +0 -1
- package/src/contexts/paginatedMessageListContext/PaginatedMessageListContext.md +0 -34
- package/src/contexts/suggestionsContext/SuggestionsContext.md +0 -28
- package/src/contexts/suggestionsContext/withSuggestionsContext.md +0 -1
- package/src/contexts/threadContext/ThreadContext.md +0 -34
- package/src/contexts/typingContext/TypingContext.md +0 -33
- package/src/utils/Streami18n.md +0 -390
|
@@ -1,390 +0,0 @@
|
|
|
1
|
-
Wrapper around [i18next](https://www.i18next.com/) class for Stream related translations.
|
|
2
|
-
|
|
3
|
-
### API
|
|
4
|
-
|
|
5
|
-
- **constructor**(options)
|
|
6
|
-
|
|
7
|
-
Constructor accepts following options:
|
|
8
|
-
|
|
9
|
-
- **language** (String) default: 'en'
|
|
10
|
-
|
|
11
|
-
Language code e.g., en, tr
|
|
12
|
-
|
|
13
|
-
- **disableDateTimeTranslations** (boolean) default: false
|
|
14
|
-
|
|
15
|
-
Disable translations for datetimes
|
|
16
|
-
|
|
17
|
-
- **debug** (boolean) default: false
|
|
18
|
-
|
|
19
|
-
Enable debug mode in internal i18n class
|
|
20
|
-
|
|
21
|
-
- **logger** (function) default: () => {}
|
|
22
|
-
|
|
23
|
-
Logger function to log warnings/errors from this class
|
|
24
|
-
|
|
25
|
-
- **dayjsLocaleConfigForLanguage** (object) default: 'enConfig'
|
|
26
|
-
|
|
27
|
-
[Config object](https://github.com/iamkun/dayjs/tree/dev/src/locale) for internal dayjs object, corresponding to language (param)
|
|
28
|
-
|
|
29
|
-
- **DateTimeParser** (function)
|
|
30
|
-
|
|
31
|
-
Moment or Dayjs instance/function.
|
|
32
|
-
|
|
33
|
-
- **geti18Instance**
|
|
34
|
-
|
|
35
|
-
Returns an instance of [i18next](https://www.i18next.com/) used internally.
|
|
36
|
-
|
|
37
|
-
- **getAvailableLanguages**
|
|
38
|
-
|
|
39
|
-
Returns all the languages (code) registered with Streami18n
|
|
40
|
-
|
|
41
|
-
- **getTranslations**
|
|
42
|
-
|
|
43
|
-
Returns all the translations registered with Streami18n
|
|
44
|
-
|
|
45
|
-
- **getTranslators**
|
|
46
|
-
|
|
47
|
-
Returns an object containing t (i18next translator) and momentjs instance (configured with set language)
|
|
48
|
-
|
|
49
|
-
```js static
|
|
50
|
-
const streami18n = new Streami18n({ language: 'nl' });
|
|
51
|
-
const { t, tDateTimeParser } = await streami18n.getTranslators();
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
- **registerTranslation**
|
|
55
|
-
|
|
56
|
-
_params_
|
|
57
|
-
|
|
58
|
-
- language | string
|
|
59
|
-
- translator | object
|
|
60
|
-
- customDayjsLocale | object (optional)
|
|
61
|
-
|
|
62
|
-
```js static
|
|
63
|
-
streami18n.registerTranslation(
|
|
64
|
-
'mr',
|
|
65
|
-
{
|
|
66
|
-
'Nothing yet...': 'काहीही नाही ...',
|
|
67
|
-
'{{ firstUser }} and {{ secondUser }} are typing...':
|
|
68
|
-
'{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',
|
|
69
|
-
},
|
|
70
|
-
{
|
|
71
|
-
months: [...],
|
|
72
|
-
monthsShort: [...],
|
|
73
|
-
calendar: {
|
|
74
|
-
sameDay: '...'
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
);
|
|
78
|
-
```
|
|
79
|
-
|
|
80
|
-
- **setLanguage**
|
|
81
|
-
|
|
82
|
-
Set a different language
|
|
83
|
-
|
|
84
|
-
```js static
|
|
85
|
-
streami18n.setLanguage('tr');
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
Instance of this class should be provided to Chat component to handle translations.
|
|
89
|
-
Stream provides following list of in-built translations:
|
|
90
|
-
|
|
91
|
-
1. English (en)
|
|
92
|
-
2. Dutch (nl)
|
|
93
|
-
3. Russian (ru)
|
|
94
|
-
4. Turkish (tr)
|
|
95
|
-
5. French (fr)
|
|
96
|
-
6. Italian (it)
|
|
97
|
-
7. Hindi (hi)
|
|
98
|
-
|
|
99
|
-
### Docs
|
|
100
|
-
|
|
101
|
-
- **Text translations**
|
|
102
|
-
|
|
103
|
-
Simplest way to start using chat components in one of the in-built languages would be following:
|
|
104
|
-
|
|
105
|
-
```js static
|
|
106
|
-
const i18n = new Streami18n({ language: 'nl' });
|
|
107
|
-
<Chat client={chatClient} i18nInstance={i18n}>
|
|
108
|
-
...
|
|
109
|
-
</Chat>;
|
|
110
|
-
```
|
|
111
|
-
|
|
112
|
-
If you would like to override certain keys in in-built translation.
|
|
113
|
-
UI will be automatically updated in this case.
|
|
114
|
-
|
|
115
|
-
```js static
|
|
116
|
-
const i18n = new Streami18n({
|
|
117
|
-
language: 'nl',
|
|
118
|
-
translationsForLanguage: {
|
|
119
|
-
'Nothing yet...': 'Nog Niet ...',
|
|
120
|
-
'{{ firstUser }} and {{ secondUser }} are typing...':
|
|
121
|
-
'{{ firstUser }} en {{ secondUser }} zijn aan het typen...',
|
|
122
|
-
},
|
|
123
|
-
});
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
If you would like to register additional languages, use registerTranslation. You can add as many languages as you want:
|
|
127
|
-
|
|
128
|
-
```js static
|
|
129
|
-
i18n.registerTranslation('zh', {
|
|
130
|
-
'Nothing yet...': 'Nog Niet ...',
|
|
131
|
-
'{{ firstUser }} and {{ secondUser }} are typing...':
|
|
132
|
-
'{{ firstUser }} en {{ secondUser }} zijn aan het typen...',
|
|
133
|
-
});
|
|
134
|
-
|
|
135
|
-
<Chat client={chatClient} i18nInstance={i18n}>
|
|
136
|
-
...
|
|
137
|
-
</Chat>;
|
|
138
|
-
```
|
|
139
|
-
|
|
140
|
-
You can use the same function to add whole new language as well.
|
|
141
|
-
|
|
142
|
-
```js static
|
|
143
|
-
const i18n = new Streami18n();
|
|
144
|
-
|
|
145
|
-
i18n.registerTranslation('mr', {
|
|
146
|
-
'Nothing yet...': 'काहीही नाही ...',
|
|
147
|
-
'{{ firstUser }} and {{ secondUser }} are typing...':
|
|
148
|
-
'{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',
|
|
149
|
-
});
|
|
150
|
-
|
|
151
|
-
// Make sure to call setLanguage to reflect new language in UI.
|
|
152
|
-
i18n.setLanguage('it');
|
|
153
|
-
|
|
154
|
-
<Chat client={chatClient} i18nInstance={i18n}>
|
|
155
|
-
...
|
|
156
|
-
</Chat>;
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
We have exported all the in-built translations in our library. You can import them in your project as following:
|
|
160
|
-
|
|
161
|
-
```js static
|
|
162
|
-
import {
|
|
163
|
-
enTranslations,
|
|
164
|
-
nlTranslations,
|
|
165
|
-
ruTranslations,
|
|
166
|
-
trTranslations,
|
|
167
|
-
frTranslations,
|
|
168
|
-
hiTranslations,
|
|
169
|
-
itTranslations,
|
|
170
|
-
esTranslations,
|
|
171
|
-
} from 'stream-chat-react-native'; // or 'stream-chat-expo'
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
If you would like to maintain your own translation files:
|
|
175
|
-
|
|
176
|
-
1. Create a json file in your project with whatever name you prefer. Best practice would be to name it after
|
|
177
|
-
the language-translations it contains e.g, If you are creating a translation file for Korean language then `ko.json`
|
|
178
|
-
2. Copy the content of file https://github.com/GetStream/stream-chat-react/blob/master/src/i18n/en.json
|
|
179
|
-
3. Change the values of the keys as translation of key.
|
|
180
|
-
4. Use it in chat client:
|
|
181
|
-
|
|
182
|
-
```js static
|
|
183
|
-
import koTranslation from 'path/to/ko.json';
|
|
184
|
-
import deTranslation from 'path/to/de.json';
|
|
185
|
-
const i18n = new Streami18n();
|
|
186
|
-
i18n.registerTranslation('ko', koTranslation);
|
|
187
|
-
i18n.registerTranslation('de', deTranslation);
|
|
188
|
-
// You can switch language at any point in lifetime of component, it will automatically reflect in UI.
|
|
189
|
-
i18n.setLanguage('ko');
|
|
190
|
-
<Chat client={chatClient} i18nInstance={i18n}>
|
|
191
|
-
...
|
|
192
|
-
</Chat>;
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
## Datetime translations
|
|
196
|
-
|
|
197
|
-
Stream react chat components uses [dayjs](https://day.js.org/en/) internally by default to format datetime stamp.
|
|
198
|
-
e.g., in ChannelPreview, MessageContent components.
|
|
199
|
-
Dayjs has locale support as well - https://day.js.org/docs/en/i18n/i18n
|
|
200
|
-
Dayjs is a lightweight alternative to Momentjs with the same modern API.
|
|
201
|
-
|
|
202
|
-
Dayjs provides locale config for plenty of languages, you can check the whole list of locale configs at following url
|
|
203
|
-
https://github.com/iamkun/dayjs/tree/dev/src/locale
|
|
204
|
-
|
|
205
|
-
You can either provide the dayjs locale config while registering
|
|
206
|
-
language with Streami18n (either via constructor or registerTranslation()) OR you can provide your own Dayjs or Moment instance
|
|
207
|
-
to Streami18n constructor, which will be then used internally (using the language locale) in components.
|
|
208
|
-
|
|
209
|
-
### Via language registration
|
|
210
|
-
|
|
211
|
-
e.g.,
|
|
212
|
-
|
|
213
|
-
```js static
|
|
214
|
-
const i18n = new Streami18n({
|
|
215
|
-
language: 'nl',
|
|
216
|
-
dayjsLocaleConfigForLanguage: {
|
|
217
|
-
months: [...],
|
|
218
|
-
monthsShort: [...],
|
|
219
|
-
calendar: {
|
|
220
|
-
sameDay: ...'
|
|
221
|
-
}
|
|
222
|
-
}
|
|
223
|
-
});
|
|
224
|
-
```
|
|
225
|
-
|
|
226
|
-
Similarly, you can add locale config for dayjs while registering translation via `registerTranslation` function.
|
|
227
|
-
|
|
228
|
-
e.g.,
|
|
229
|
-
|
|
230
|
-
```js static
|
|
231
|
-
const i18n = new Streami18n();
|
|
232
|
-
|
|
233
|
-
i18n.registerTranslation(
|
|
234
|
-
'mr',
|
|
235
|
-
{
|
|
236
|
-
'Nothing yet...': 'काहीही नाही ...',
|
|
237
|
-
'{{ firstUser }} and {{ secondUser }} are typing...': '{{ firstUser }} आणि {{ secondUser }} टीपी करत आहेत ',
|
|
238
|
-
},
|
|
239
|
-
{
|
|
240
|
-
months: [...],
|
|
241
|
-
monthsShort: [...],
|
|
242
|
-
calendar: {
|
|
243
|
-
sameDay: ...'
|
|
244
|
-
}
|
|
245
|
-
}
|
|
246
|
-
);
|
|
247
|
-
```
|
|
248
|
-
|
|
249
|
-
### Provide your own Moment object
|
|
250
|
-
|
|
251
|
-
```js static
|
|
252
|
-
import 'moment/locale/nl';
|
|
253
|
-
import 'moment/locale/it';
|
|
254
|
-
// or if you want to include all locales
|
|
255
|
-
import 'moment/min/locales';
|
|
256
|
-
|
|
257
|
-
import Moment from moment
|
|
258
|
-
|
|
259
|
-
const i18n = new Streami18n({
|
|
260
|
-
language: 'nl',
|
|
261
|
-
DateTimeParser: Moment
|
|
262
|
-
})
|
|
263
|
-
```
|
|
264
|
-
|
|
265
|
-
### Provide your own Dayjs object
|
|
266
|
-
|
|
267
|
-
```js static
|
|
268
|
-
import Dayjs from 'dayjs';
|
|
269
|
-
|
|
270
|
-
import 'dayjs/locale/nl';
|
|
271
|
-
import 'dayjs/locale/it';
|
|
272
|
-
|
|
273
|
-
const i18n = new Streami18n({
|
|
274
|
-
language: 'nl',
|
|
275
|
-
DateTimeParser: Dayjs,
|
|
276
|
-
});
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
If you would like to stick with english language for datetimes in Stream components, you can set `disableDateTimeTranslations` to true.
|
|
280
|
-
|
|
281
|
-
**NOTE** Please note here that locales in `dayjs/locale/it` (and all other language locale files), does not load calendar related
|
|
282
|
-
config like 'today at', 'tomorrow at' etc. You will need to manually configure calendar locale using [updateLocale](https://day.js.org/docs/en/plugin/update-locale).
|
|
283
|
-
|
|
284
|
-
**TIPS**
|
|
285
|
-
|
|
286
|
-
1. If you would like to stick with english language for datetimes in Stream components,
|
|
287
|
-
you can set `disableDateTimeTranslations` to true.
|
|
288
|
-
|
|
289
|
-
```js static
|
|
290
|
-
const i18n = new Streami18n({
|
|
291
|
-
language: 'nl',
|
|
292
|
-
disableDateTimeTranslations: false,
|
|
293
|
-
});
|
|
294
|
-
```
|
|
295
|
-
|
|
296
|
-
2. If you want to disable all the warnings, you can override logger option:
|
|
297
|
-
|
|
298
|
-
```js static
|
|
299
|
-
const i18n = new Streami18n({
|
|
300
|
-
language: 'nl',
|
|
301
|
-
logger: () => null,
|
|
302
|
-
});
|
|
303
|
-
```
|
|
304
|
-
|
|
305
|
-
The default `en` locale config from dayjs is as follow:
|
|
306
|
-
|
|
307
|
-
```json static
|
|
308
|
-
{
|
|
309
|
-
"months": [
|
|
310
|
-
"January",
|
|
311
|
-
"February",
|
|
312
|
-
"March",
|
|
313
|
-
"April",
|
|
314
|
-
"May",
|
|
315
|
-
"June",
|
|
316
|
-
"July",
|
|
317
|
-
"August",
|
|
318
|
-
"September",
|
|
319
|
-
"October",
|
|
320
|
-
"November",
|
|
321
|
-
"December"
|
|
322
|
-
],
|
|
323
|
-
"monthsShort": [
|
|
324
|
-
"Jan",
|
|
325
|
-
"Feb",
|
|
326
|
-
"Mar",
|
|
327
|
-
"Apr",
|
|
328
|
-
"May",
|
|
329
|
-
"Jun",
|
|
330
|
-
"Jul",
|
|
331
|
-
"Aug",
|
|
332
|
-
"Sep",
|
|
333
|
-
"Oct",
|
|
334
|
-
"Nov",
|
|
335
|
-
"Dec"
|
|
336
|
-
],
|
|
337
|
-
"week": {
|
|
338
|
-
"dow": 0,
|
|
339
|
-
"doy": 6
|
|
340
|
-
},
|
|
341
|
-
"weekdays": [
|
|
342
|
-
"Sunday",
|
|
343
|
-
"Monday",
|
|
344
|
-
"Tuesday",
|
|
345
|
-
"Wednesday",
|
|
346
|
-
"Thursday",
|
|
347
|
-
"Friday",
|
|
348
|
-
"Saturday"
|
|
349
|
-
],
|
|
350
|
-
"weekdaysMin": ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"],
|
|
351
|
-
"weekdaysShort": ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"],
|
|
352
|
-
"calendar": {
|
|
353
|
-
"sameDay": "[Today at] LT",
|
|
354
|
-
"nextDay": "[Tomorrow at] LT",
|
|
355
|
-
"nextWeek": "dddd [at] LT",
|
|
356
|
-
"lastDay": "[Yesterday at] LT",
|
|
357
|
-
"lastWeek": "[Last] dddd [at] LT",
|
|
358
|
-
"sameElse": "L"
|
|
359
|
-
},
|
|
360
|
-
"formats": {
|
|
361
|
-
"LTS": "h:mm:ss A",
|
|
362
|
-
"LT": "h:mm A",
|
|
363
|
-
"L": "MM/DD/YYYY",
|
|
364
|
-
"LL": "MMMM D, YYYY",
|
|
365
|
-
"LLL": "MMMM D, YYYY h:mm A",
|
|
366
|
-
"LLLL": "dddd, MMMM D, YYYY h:mm A"
|
|
367
|
-
},
|
|
368
|
-
"invalidDate": "Invalid date",
|
|
369
|
-
"ordinal": "%d.",
|
|
370
|
-
"dayOfMonthOrdinalParse": /\\d{1,2}(th|st|nd|rd)/,
|
|
371
|
-
"relativeTime": {
|
|
372
|
-
"future": "in %s",
|
|
373
|
-
"past": "%s ago",
|
|
374
|
-
"s": "a few seconds",
|
|
375
|
-
"ss": "%d seconds",
|
|
376
|
-
"m": "a minute",
|
|
377
|
-
"mm": "%d minutes",
|
|
378
|
-
"h": "an hour",
|
|
379
|
-
"hh": "%d hours",
|
|
380
|
-
"d": "a day",
|
|
381
|
-
"dd": "%d days",
|
|
382
|
-
"M": "a month",
|
|
383
|
-
"MM": "%d months",
|
|
384
|
-
"y": "a year",
|
|
385
|
-
"yy": "%d years"
|
|
386
|
-
},
|
|
387
|
-
"meridiemParse": /[ap]\\.?m?\\.?/i,
|
|
388
|
-
"abbr": "en"
|
|
389
|
-
}
|
|
390
|
-
```
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
**Note:** The Channel component provides access to the values stored in [ChannelContext](#channelcontext), [MessagesContext](#messagescontext), and [ThreadContext](#threadcontext) and exposes their hooks or the [withChannelContext](#withchannelcontext), [withMessagesContext](#withmessagescontext), and [withThreadContext](#withthreadcontext) higher order components.
|
|
2
|
-
|
|
3
|
-
The example below shows how to write a component that consumes a context and uses hooks.
|
|
4
|
-
|
|
5
|
-
```jsx static
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import { Text, View } from 'react-native';
|
|
8
|
-
|
|
9
|
-
import { Chat, Channel, MessageInput, MessageList, useChannelContext } from 'stream-chat-react-native';
|
|
10
|
-
|
|
11
|
-
const CustomChannelHeader = () => {
|
|
12
|
-
const { channel, loading } = useChannelContext();
|
|
13
|
-
|
|
14
|
-
return loading ? (
|
|
15
|
-
<View>
|
|
16
|
-
<Text>Channel is loading...</Text>
|
|
17
|
-
</View>
|
|
18
|
-
) : (
|
|
19
|
-
<View>
|
|
20
|
-
<Text>Channel ID: {channel.cid}</Text>
|
|
21
|
-
<Text>
|
|
22
|
-
There are currently {channel.state.watcher_count} people online
|
|
23
|
-
</Text>
|
|
24
|
-
</View>
|
|
25
|
-
);
|
|
26
|
-
};
|
|
27
|
-
|
|
28
|
-
<OverlayProvider>
|
|
29
|
-
<View>
|
|
30
|
-
<Chat client={chat}>
|
|
31
|
-
<Channel channel={dataChannel}>
|
|
32
|
-
<CustomChannelHeader />
|
|
33
|
-
<MessageList />
|
|
34
|
-
<MessageInput />
|
|
35
|
-
</Channel>
|
|
36
|
-
</Chat>
|
|
37
|
-
</View>
|
|
38
|
-
</OverlayProvider>
|
|
39
|
-
```
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
```jsx static
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import { Chat, ChannelList } from 'stream-chat-react-native';
|
|
4
|
-
|
|
5
|
-
<OverlayProvider>
|
|
6
|
-
<View>
|
|
7
|
-
<Chat client={client}>
|
|
8
|
-
<ChannelList
|
|
9
|
-
filters={{
|
|
10
|
-
members: {
|
|
11
|
-
$in: ['vishal', 'neil']
|
|
12
|
-
}
|
|
13
|
-
}}
|
|
14
|
-
/>
|
|
15
|
-
</Chat>
|
|
16
|
-
</View>
|
|
17
|
-
</OverlayProvider>
|
|
18
|
-
```
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
```jsx static
|
|
2
|
-
import { View } from 'react-native';
|
|
3
|
-
import { Chat, ChannelList, ChannelListMessenger } from 'stream-chat-react-native';
|
|
4
|
-
|
|
5
|
-
<OverlayProvider>
|
|
6
|
-
<View>
|
|
7
|
-
<Chat client={client}>
|
|
8
|
-
<ChannelList
|
|
9
|
-
List={ChannelListMessenger}
|
|
10
|
-
filters={{
|
|
11
|
-
members: {
|
|
12
|
-
$in: ['vishal', 'neil']
|
|
13
|
-
}
|
|
14
|
-
}}
|
|
15
|
-
/>
|
|
16
|
-
</Chat>
|
|
17
|
-
</View>
|
|
18
|
-
</OverlayProvider>
|
|
19
|
-
```
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
The Message component is the high level component that deals with all the message logic.
|
|
2
|
-
It doesn't implement any rendering, but delegates that to the Message prop.
|
|
3
|
-
|
|
4
|
-
The Message component provides the following functions to the rendered component:
|
|
5
|
-
|
|
6
|
-
- **isMyMessage** returns true if message belongs to current user, else false
|
|
7
|
-
|
|
8
|
-
**Params**
|
|
9
|
-
|
|
10
|
-
- `message`
|
|
11
|
-
|
|
12
|
-
- **isAdmin** returns true if current user has admin role.
|
|
13
|
-
- **canEditMessage** returns true if current user has permission to edit message.
|
|
14
|
-
- **canDeleteMessage** returns true if current user has permission to edit message.
|
|
15
|
-
- **handleFlag** Handler to flag a message
|
|
16
|
-
- **handleMute** Handler to mute a user of message
|
|
17
|
-
- **handleEdit** Handler to edit a message This message simply sets current message as value of `editing` property of channel context. `editing` prop is then used by MessageInput component to switch to edit mode.
|
|
18
|
-
- **handleDelete** Handler to delete a message
|
|
19
|
-
- **handleReaction** Handler to add/remove reaction on message
|
|
20
|
-
- **handleAction** Handler for actions. Actions in combination with attachments can be used to build [commands](https://getstream.io/chat/docs/#channel_commands).
|
|
21
|
-
- **handleRetry** Handler to resend the message, in case of failure.
|
|
22
|
-
- **openThread** Handler to open the thread on current message.
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
[src/components/Message/MessageSimple/utils/renderText.ts](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/components/Message/MessageSimple/utils/renderText.ts)
|
|
2
|
-
|
|
3
|
-
Function that handles markdown and parsing for the text of message.
|
|
4
|
-
|
|
5
|
-
Internally it uses [react-native-simple-markdown](https://github.com/GetStream/react-native-simple-markdown#styles-1) to handle markdown.
|
|
6
|
-
|
|
7
|
-
It accepts following params:
|
|
8
|
-
|
|
9
|
-
- markdownRules { object } - <https://github.com/GetStream/react-native-simple-markdown#rules>
|
|
10
|
-
- markdownStyles { object } - <https://github.com/GetStream/react-native-simple-markdown#styles-1>
|
|
11
|
-
- message { object } Message object
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
All the props mentioned in [Attachment](#attachment) are available for this component.
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
All props available in the [ChannelList](#channellist) component are passed along to the List component. Additionally, the following props are provided to the List component:
|
|
2
|
-
|
|
3
|
-
- `error` {boolean | Error} Error in channels query, if any
|
|
4
|
-
- `channels` {array} List of channel objects
|
|
5
|
-
- `forceUpdate` {number} Incremental number change to force update the FlatList
|
|
6
|
-
- `hasNextPage` {boolean} Whether or not the FlatList has another page to render
|
|
7
|
-
- `loadingChannels` {boolean} Initial channels query loading state, triggers the LoadingIndicator
|
|
8
|
-
- `loadingNextPage` {boolean} Whether or not additional channels are being loaded, triggers the FooterLoadingIndicator
|
|
9
|
-
- `loadNextPage` {function} Loads the next page of `channels`
|
|
10
|
-
- `refreshing` {boolean} List of channels is being refreshed or re-queried (in case of reconnection)
|
|
11
|
-
- `refreshList` {function} Refresh the channel list without reloading existing channels
|
|
12
|
-
- `reloadList` {function} Removes all the existing channels from UI and loads fresh channels
|
|
13
|
-
- `setActiveChannel` {function} Sets the currently active channel
|
|
14
|
-
- `setFlatListRef` {function} Gains access to the inner FlatList ref
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
All the props mentioned in [MessageSimple](#messagesimple) are available for this component.
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
All props available to the [ChannelPreview](#channelpreview) component are also passed to the ChannelPreviewMessenger UI component. Additionally, the following channel specific properties are available:
|
|
2
|
-
|
|
3
|
-
- `formatLatestMessageDate` {function} Formatter function for date of the latest message
|
|
4
|
-
- `lastMessage` {object} Latest received message on the channel
|
|
5
|
-
- `latestMessageLength` {number} Length at which latest message should be truncated
|
|
6
|
-
- `latestMessagePreview` {object} Formatted message object with preview display information
|
|
7
|
-
- `unread` {number} Number of unread messages on the channel
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
Please check the `ChannelContextValue` in [ChannelContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/channelContext/ChannelContext.md), for consumable values.
|
|
2
|
-
Provider for this context exists in `Channel` component. And so, any child component of Channel
|
|
3
|
-
can get access to context as following:
|
|
4
|
-
|
|
5
|
-
- Functional component
|
|
6
|
-
|
|
7
|
-
```tsx static
|
|
8
|
-
import { useChannelContext } from 'stream-chat-react-native';
|
|
9
|
-
|
|
10
|
-
const SomeChildComponent = () => {
|
|
11
|
-
const { loading, reloadChannel } = useChannelContext();
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<View />
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
- Class component
|
|
20
|
-
|
|
21
|
-
```tsx static
|
|
22
|
-
import React from 'react';
|
|
23
|
-
import { withChannelContext } from 'stream-chat-react-native';
|
|
24
|
-
|
|
25
|
-
class SomeChildComponent extends React.Component {
|
|
26
|
-
constructor(props) {
|
|
27
|
-
super(props);
|
|
28
|
-
|
|
29
|
-
console.log(props.loading);
|
|
30
|
-
console.log(props.reloadChannel);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// UI Logic
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export withChannelContext(SomeChildComponent);
|
|
37
|
-
```
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
Please check the `ChannelsContextValue` in [ChannelsContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/channelsContext/ChannelsContext.md), for consumable values.
|
|
2
|
-
Provider for this context exists in `ChannelList` component. And so, any child component of ChannelList
|
|
3
|
-
can get access to context as following:
|
|
4
|
-
|
|
5
|
-
- Functional component
|
|
6
|
-
|
|
7
|
-
```tsx static
|
|
8
|
-
import { useChannelsContext } from 'stream-chat-react-native';
|
|
9
|
-
|
|
10
|
-
const SomeChildComponent = () => {
|
|
11
|
-
const { error, loadingChannels, refreshing } = useChannelsContext();
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<View />
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
- Class component
|
|
20
|
-
|
|
21
|
-
```tsx static
|
|
22
|
-
import React from 'react';
|
|
23
|
-
import { withChannelsContext } from 'stream-chat-react-native';
|
|
24
|
-
|
|
25
|
-
class SomeChildComponent extends React.Component {
|
|
26
|
-
constructor(props) {
|
|
27
|
-
super(props);
|
|
28
|
-
|
|
29
|
-
console.log(props.error);
|
|
30
|
-
console.log(props.loadingChannels);
|
|
31
|
-
console.log(props.refreshing);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// UI Logic
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export withChannelsContext(SomeChildComponent);
|
|
38
|
-
```
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
Please check the `ChatContextValue` in [ChatContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/chatContext/ChatContext.tsx), for consumable values.
|
|
2
|
-
Provider for this context exists in `Chat` component. And so, any child component of Chat
|
|
3
|
-
can get access to context as following:
|
|
4
|
-
|
|
5
|
-
- Functional component
|
|
6
|
-
|
|
7
|
-
```tsx static
|
|
8
|
-
import { useChatContext } from 'stream-chat-react-native';
|
|
9
|
-
|
|
10
|
-
const SomeChildComponent = () => {
|
|
11
|
-
const { client, isOnline } = useChatContext();
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<View />
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
- Class component
|
|
20
|
-
|
|
21
|
-
```tsx static
|
|
22
|
-
import React from 'react';
|
|
23
|
-
import { withChatContext } from 'stream-chat-react-native';
|
|
24
|
-
|
|
25
|
-
class SomeChildComponent extends React.Component {
|
|
26
|
-
constructor(props) {
|
|
27
|
-
super(props);
|
|
28
|
-
|
|
29
|
-
console.log(props.client);
|
|
30
|
-
console.log(props.isOnline);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// UI Logic
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
export withChatContext(SomeChildComponent);
|
|
37
|
-
```
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
Please check the `ImageGalleryContextValue` in [ImageGalleryContext](https://github.com/GetStream/stream-chat-react-native/blob/main/package/src/contexts/imageGalleryContext/ImageGalleryContext.tsx), for consumable values.
|
|
2
|
-
Provider for this context exists in `OverlayProvider` component. And so, any child component of OverlayProvider
|
|
3
|
-
can get access to context as following:
|
|
4
|
-
|
|
5
|
-
- Functional component
|
|
6
|
-
|
|
7
|
-
```tsx static
|
|
8
|
-
import { useChannelsContext } from 'stream-chat-react-native';
|
|
9
|
-
|
|
10
|
-
const SomeChildComponent = () => {
|
|
11
|
-
const { selectedMessage, setSelectedMessage, setMessages } = useImageGalleryContext();
|
|
12
|
-
|
|
13
|
-
return (
|
|
14
|
-
<View />
|
|
15
|
-
)
|
|
16
|
-
}
|
|
17
|
-
```
|
|
18
|
-
|
|
19
|
-
- Class component
|
|
20
|
-
|
|
21
|
-
```tsx static
|
|
22
|
-
import React from 'react';
|
|
23
|
-
import { withChannelsContext } from 'stream-chat-react-native';
|
|
24
|
-
|
|
25
|
-
class SomeChildComponent extends React.Component {
|
|
26
|
-
constructor(props) {
|
|
27
|
-
super(props);
|
|
28
|
-
|
|
29
|
-
console.log(props.image);
|
|
30
|
-
console.log(props.setImage);
|
|
31
|
-
console.log(props.setImages);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
// UI Logic
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
export withImageGalleryContext(SomeChildComponent);
|
|
38
|
-
```
|