react-native-gifted-chat 2.4.1 → 2.5.1
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 +1 -3
- package/lib/Actions.d.ts +5 -6
- package/lib/Actions.js +16 -13
- package/lib/Actions.js.map +1 -1
- package/lib/Avatar.d.ts +9 -25
- package/lib/Avatar.js +12 -18
- package/lib/Avatar.js.flow +1 -1
- package/lib/Avatar.js.map +1 -1
- package/lib/Bubble.d.ts +29 -29
- package/lib/Bubble.js +88 -70
- package/lib/Bubble.js.flow +1 -1
- package/lib/Bubble.js.map +1 -1
- package/lib/Composer.d.ts +1 -1
- package/lib/Composer.js +30 -32
- package/lib/Composer.js.map +1 -1
- package/lib/Constant.js +1 -0
- package/lib/Constant.js.map +1 -1
- package/lib/Day.d.ts +3 -15
- package/lib/Day.js +2 -14
- package/lib/Day.js.flow +1 -1
- package/lib/Day.js.map +1 -1
- package/lib/GiftedAvatar.d.ts +7 -7
- package/lib/GiftedAvatar.js +30 -29
- package/lib/GiftedAvatar.js.map +1 -1
- package/lib/GiftedChat.d.ts +15 -89
- package/lib/GiftedChat.js +204 -350
- package/lib/GiftedChat.js.flow +1 -3
- package/lib/GiftedChat.js.map +1 -1
- package/lib/GiftedChatContext.d.ts +2 -1
- package/lib/GiftedChatContext.js.map +1 -1
- package/lib/InputToolbar.d.ts +7 -5
- package/lib/InputToolbar.js +41 -34
- package/lib/InputToolbar.js.map +1 -1
- package/lib/LoadEarlier.d.ts +4 -4
- package/lib/LoadEarlier.js +8 -6
- package/lib/LoadEarlier.js.map +1 -1
- package/lib/Message.d.ts +8 -9
- package/lib/Message.js +47 -40
- package/lib/Message.js.flow +1 -1
- package/lib/Message.js.map +1 -1
- package/lib/MessageAudio.d.ts +2 -1
- package/lib/MessageAudio.js +4 -4
- package/lib/MessageAudio.js.flow +1 -1
- package/lib/MessageAudio.js.map +1 -1
- package/lib/MessageContainer.d.ts +17 -17
- package/lib/MessageContainer.js +33 -51
- package/lib/MessageContainer.js.map +1 -1
- package/lib/MessageImage.d.ts +5 -4
- package/lib/MessageImage.js +4 -5
- package/lib/MessageImage.js.flow +1 -1
- package/lib/MessageImage.js.map +1 -1
- package/lib/MessageText.d.ts +11 -10
- package/lib/MessageText.js +5 -10
- package/lib/MessageText.js.flow +1 -1
- package/lib/MessageText.js.map +1 -1
- package/lib/MessageVideo.d.ts +2 -1
- package/lib/MessageVideo.js +4 -4
- package/lib/MessageVideo.js.flow +1 -1
- package/lib/MessageVideo.js.map +1 -1
- package/lib/Models.d.ts +7 -7
- package/lib/QuickReplies.d.ts +3 -3
- package/lib/QuickReplies.js +8 -14
- package/lib/QuickReplies.js.flow +1 -1
- package/lib/QuickReplies.js.map +1 -1
- package/lib/Send.d.ts +4 -4
- package/lib/Send.js +6 -9
- package/lib/Send.js.map +1 -1
- package/lib/SystemMessage.d.ts +6 -5
- package/lib/SystemMessage.js +1 -2
- package/lib/SystemMessage.js.flow +1 -1
- package/lib/SystemMessage.js.map +1 -1
- package/lib/Time.d.ts +7 -6
- package/lib/Time.js +1 -3
- package/lib/Time.js.flow +1 -1
- package/lib/Time.js.map +1 -1
- package/lib/TypingIndicator.d.ts +2 -1
- package/lib/TypingIndicator.js +5 -5
- package/lib/TypingIndicator.js.map +1 -1
- package/lib/hooks/useUpdateLayoutEffect.js +2 -4
- package/lib/hooks/useUpdateLayoutEffect.js.map +1 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +1 -0
- package/lib/index.js.map +1 -1
- package/lib/logging.d.ts +2 -2
- package/lib/logging.js.map +1 -1
- package/lib/types.js.flow +1 -1
- package/lib/utils.d.ts +1 -1
- package/lib/utils.js +2 -4
- package/lib/utils.js.map +1 -1
- package/package.json +83 -53
- package/src/Actions.tsx +114 -0
- package/src/Avatar.tsx +178 -0
- package/src/Bubble.tsx +601 -0
- package/src/Color.ts +17 -0
- package/src/Composer.tsx +147 -0
- package/src/Constant.ts +18 -0
- package/src/Day.tsx +71 -0
- package/src/GiftedAvatar.tsx +205 -0
- package/src/GiftedChat.tsx +670 -0
- package/src/GiftedChatContext.ts +23 -0
- package/src/InputToolbar.tsx +113 -0
- package/src/LoadEarlier.tsx +108 -0
- package/src/Message.tsx +229 -0
- package/src/MessageAudio.tsx +19 -0
- package/src/MessageContainer.tsx +362 -0
- package/src/MessageImage.tsx +78 -0
- package/src/MessageText.tsx +187 -0
- package/src/MessageVideo.tsx +19 -0
- package/src/Models.ts +84 -0
- package/src/QuickReplies.tsx +186 -0
- package/src/Send.tsx +102 -0
- package/src/SystemMessage.tsx +61 -0
- package/src/Time.tsx +97 -0
- package/src/TypingIndicator.tsx +108 -0
- package/src/__tests__/Actions.test.tsx +10 -0
- package/src/__tests__/Avatar.test.tsx +13 -0
- package/src/__tests__/Bubble.test.tsx +23 -0
- package/src/__tests__/Color.test.tsx +5 -0
- package/src/__tests__/Composer.test.tsx +11 -0
- package/src/__tests__/Constant.test.tsx +5 -0
- package/src/__tests__/Day.test.tsx +23 -0
- package/src/__tests__/GiftedAvatar.test.tsx +11 -0
- package/src/__tests__/GiftedChat.test.tsx +36 -0
- package/src/__tests__/InputToolbar.test.tsx +11 -0
- package/src/__tests__/LoadEarlier.test.tsx +11 -0
- package/src/__tests__/Message.test.tsx +77 -0
- package/src/__tests__/MessageContainer.test.tsx +11 -0
- package/src/__tests__/MessageImage.test.tsx +27 -0
- package/src/__tests__/MessageText.test.tsx +11 -0
- package/src/__tests__/Send.test.tsx +22 -0
- package/src/__tests__/SystemMessage.test.tsx +27 -0
- package/src/__tests__/Time.test.tsx +29 -0
- package/src/__tests__/__snapshots__/Actions.test.tsx.snap +76 -0
- package/src/__tests__/__snapshots__/Avatar.test.tsx.snap +17 -0
- package/src/__tests__/__snapshots__/Bubble.test.tsx.snap +145 -0
- package/src/__tests__/__snapshots__/Color.test.tsx.snap +21 -0
- package/src/__tests__/__snapshots__/Composer.test.tsx.snap +35 -0
- package/src/__tests__/__snapshots__/Constant.test.tsx.snap +16 -0
- package/src/__tests__/__snapshots__/Day.test.tsx.snap +37 -0
- package/src/__tests__/__snapshots__/GiftedAvatar.test.tsx.snap +22 -0
- package/src/__tests__/__snapshots__/GiftedChat.test.tsx.snap +15 -0
- package/src/__tests__/__snapshots__/InputToolbar.test.tsx.snap +60 -0
- package/src/__tests__/__snapshots__/LoadEarlier.test.tsx.snap +74 -0
- package/src/__tests__/__snapshots__/Message.test.tsx.snap +628 -0
- package/src/__tests__/__snapshots__/MessageContainer.test.tsx.snap +127 -0
- package/src/__tests__/__snapshots__/MessageImage.test.tsx.snap +38 -0
- package/src/__tests__/__snapshots__/MessageText.test.tsx.snap +30 -0
- package/src/__tests__/__snapshots__/Send.test.tsx.snap +129 -0
- package/src/__tests__/__snapshots__/SystemMessage.test.tsx.snap +38 -0
- package/src/__tests__/__snapshots__/Time.test.tsx.snap +33 -0
- package/src/__tests__/data.ts +8 -0
- package/src/__tests__/utils.test.ts +31 -0
- package/src/hooks/useUpdateLayoutEffect.ts +21 -0
- package/src/index.ts +4 -0
- package/src/logging.ts +8 -0
- package/src/utils.ts +39 -0
- package/.eslintignore +0 -2
- package/.eslintrc.js +0 -21
- package/jest.config.js +0 -15
package/README.md
CHANGED
|
@@ -264,7 +264,7 @@ See PR [#1211](https://github.com/FaridSafi/react-native-gifted-chat/pull/1211)
|
|
|
264
264
|
interface Reply {
|
|
265
265
|
title: string
|
|
266
266
|
value: string
|
|
267
|
-
messageId?:
|
|
267
|
+
messageId?: number | string
|
|
268
268
|
}
|
|
269
269
|
|
|
270
270
|
interface QuickReplies {
|
|
@@ -346,7 +346,6 @@ interface QuickReplies {
|
|
|
346
346
|
- **`timeFormat`** _(String)_ - Format to use for rendering times; default is `'LT'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
|
|
347
347
|
- **`dateFormat`** _(String)_ - Format to use for rendering dates; default is `'ll'` (see [Day.js Format](https://day.js.org/docs/en/display/format))
|
|
348
348
|
- **`loadEarlier`** _(Bool)_ - Enables the "load earlier messages" button, required for `infiniteScroll`
|
|
349
|
-
- **`isKeyboardInternallyHandled`** _(Bool)_ - Determine whether to handle keyboard awareness inside the plugin. If you have your own keyboard handling outside the plugin set this to false; default is `true`
|
|
350
349
|
- **`onLoadEarlier`** _(Function)_ - Callback when loading earlier messages
|
|
351
350
|
- **`isLoadingEarlier`** _(Bool)_ - Display an `ActivityIndicator` when loading earlier messages
|
|
352
351
|
- **`renderLoading`** _(Function)_ - Render a loading view when initializing
|
|
@@ -385,7 +384,6 @@ interface QuickReplies {
|
|
|
385
384
|
- **`renderSend`** _(Function)_ - Custom send button; you can pass children to the original `Send` component quite easily, for example, to use a custom icon ([example](https://github.com/FaridSafi/react-native-gifted-chat/pull/487))
|
|
386
385
|
- **`renderAccessory`** _(Function)_ - Custom second line of actions below the message composer
|
|
387
386
|
- **`onPressActionButton`** _(Function)_ - Callback when the Action button is pressed (if set, the default `actionSheet` will not be used)
|
|
388
|
-
- **`bottomOffset`** _(Integer)_ - Distance of the chat from the bottom of the screen (e.g. useful if you display a tab bar)
|
|
389
387
|
- **`minInputToolbarHeight`** _(Integer)_ - Minimum height of the input toolbar; default is `44`
|
|
390
388
|
- **`listViewProps`** _(Object)_ - Extra props to be passed to the messages [`<ListView>`](https://facebook.github.io/react-native/docs/listview.html); some props can't be overridden, see the code in `MessageContainer.render()` for details
|
|
391
389
|
- **`textInputProps`** _(Object)_ - Extra props to be passed to the [`<TextInput>`](https://facebook.github.io/react-native/docs/textinput.html)
|
package/lib/Actions.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
import { ReactNode } from 'react';
|
|
2
|
+
import React, { ReactNode } from 'react';
|
|
3
3
|
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
4
4
|
export interface ActionsProps {
|
|
5
5
|
options?: {
|
|
6
|
-
[key: string]:
|
|
6
|
+
[key: string]: () => void;
|
|
7
7
|
};
|
|
8
8
|
optionTintColor?: string;
|
|
9
9
|
icon?: () => ReactNode;
|
|
@@ -12,15 +12,14 @@ export interface ActionsProps {
|
|
|
12
12
|
containerStyle?: StyleProp<ViewStyle>;
|
|
13
13
|
onPressActionButton?(): void;
|
|
14
14
|
}
|
|
15
|
-
export declare function Actions({ options, optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }: ActionsProps): JSX.Element;
|
|
15
|
+
export declare function Actions({ options, optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }: ActionsProps): React.JSX.Element;
|
|
16
16
|
export declare namespace Actions {
|
|
17
17
|
var propTypes: {
|
|
18
|
-
onSend: PropTypes.Requireable<(...args: any[]) => any>;
|
|
19
18
|
options: PropTypes.Requireable<object>;
|
|
20
19
|
optionTintColor: PropTypes.Requireable<string>;
|
|
21
20
|
icon: PropTypes.Requireable<(...args: any[]) => any>;
|
|
22
21
|
onPressActionButton: PropTypes.Requireable<(...args: any[]) => any>;
|
|
23
|
-
wrapperStyle: PropTypes.Requireable<number | boolean | object
|
|
24
|
-
containerStyle: PropTypes.Requireable<number | boolean | object
|
|
22
|
+
wrapperStyle: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
23
|
+
containerStyle: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
25
24
|
};
|
|
26
25
|
}
|
package/lib/Actions.js
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import PropTypes from 'prop-types';
|
|
2
|
-
import React from 'react';
|
|
2
|
+
import React, { useCallback } from 'react';
|
|
3
3
|
import { StyleSheet, Text, TouchableOpacity, View, } from 'react-native';
|
|
4
4
|
import Color from './Color';
|
|
5
5
|
import { StylePropType } from './utils';
|
|
6
6
|
import { useChatContext } from './GiftedChatContext';
|
|
7
|
-
|
|
8
|
-
export function Actions({ options = {}, optionTintColor = Color.optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }) {
|
|
7
|
+
export function Actions({ options, optionTintColor = Color.optionTintColor, icon, wrapperStyle, iconTextStyle, onPressActionButton, containerStyle, }) {
|
|
9
8
|
const { actionSheet } = useChatContext();
|
|
10
|
-
const onActionsPress =
|
|
9
|
+
const onActionsPress = useCallback(() => {
|
|
10
|
+
if (!options)
|
|
11
|
+
return;
|
|
11
12
|
const optionKeys = Object.keys(options);
|
|
12
13
|
const cancelButtonIndex = optionKeys.indexOf('Cancel');
|
|
13
14
|
actionSheet().showActionSheetWithOptions({
|
|
@@ -15,26 +16,25 @@ export function Actions({ options = {}, optionTintColor = Color.optionTintColor,
|
|
|
15
16
|
cancelButtonIndex,
|
|
16
17
|
tintColor: optionTintColor,
|
|
17
18
|
}, (buttonIndex) => {
|
|
19
|
+
if (buttonIndex === undefined)
|
|
20
|
+
return;
|
|
18
21
|
const key = optionKeys[buttonIndex];
|
|
19
|
-
if (key)
|
|
22
|
+
if (key)
|
|
20
23
|
options[key]();
|
|
21
|
-
}
|
|
22
24
|
});
|
|
23
|
-
}, []);
|
|
24
|
-
const renderIcon =
|
|
25
|
-
if (icon)
|
|
25
|
+
}, [actionSheet, options, optionTintColor]);
|
|
26
|
+
const renderIcon = useCallback(() => {
|
|
27
|
+
if (icon)
|
|
26
28
|
return icon();
|
|
27
|
-
}
|
|
28
29
|
return (<View style={[styles.wrapper, wrapperStyle]}>
|
|
29
|
-
<Text style={[styles.iconText, iconTextStyle]}
|
|
30
|
+
<Text style={[styles.iconText, iconTextStyle]}>{'+'}</Text>
|
|
30
31
|
</View>);
|
|
31
|
-
}, []);
|
|
32
|
+
}, [icon, iconTextStyle, wrapperStyle]);
|
|
32
33
|
return (<TouchableOpacity style={[styles.container, containerStyle]} onPress={onPressActionButton || onActionsPress}>
|
|
33
34
|
{renderIcon()}
|
|
34
35
|
</TouchableOpacity>);
|
|
35
36
|
}
|
|
36
37
|
Actions.propTypes = {
|
|
37
|
-
onSend: PropTypes.func,
|
|
38
38
|
options: PropTypes.object,
|
|
39
39
|
optionTintColor: PropTypes.string,
|
|
40
40
|
icon: PropTypes.func,
|
|
@@ -54,11 +54,14 @@ const styles = StyleSheet.create({
|
|
|
54
54
|
borderColor: Color.defaultColor,
|
|
55
55
|
borderWidth: 2,
|
|
56
56
|
flex: 1,
|
|
57
|
+
alignItems: 'center',
|
|
58
|
+
justifyContent: 'center',
|
|
57
59
|
},
|
|
58
60
|
iconText: {
|
|
59
61
|
color: Color.defaultColor,
|
|
60
62
|
fontWeight: 'bold',
|
|
61
63
|
fontSize: 16,
|
|
64
|
+
lineHeight: 16,
|
|
62
65
|
backgroundColor: Color.backgroundTransparent,
|
|
63
66
|
textAlign: 'center',
|
|
64
67
|
},
|
package/lib/Actions.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAA;AAClC,OAAO,
|
|
1
|
+
{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../src/Actions.tsx"],"names":[],"mappings":"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"}
|
package/lib/Avatar.d.ts
CHANGED
|
@@ -3,36 +3,20 @@ import React, { ReactNode } from 'react';
|
|
|
3
3
|
import { ImageStyle, TextStyle, ViewStyle } from 'react-native';
|
|
4
4
|
import { IMessage, LeftRightStyle, User } from './Models';
|
|
5
5
|
export interface AvatarProps<TMessage extends IMessage> {
|
|
6
|
-
currentMessage
|
|
6
|
+
currentMessage: TMessage;
|
|
7
7
|
previousMessage?: TMessage;
|
|
8
8
|
nextMessage?: TMessage;
|
|
9
|
-
position: 'left' | 'right'
|
|
9
|
+
position: 'left' | 'right';
|
|
10
10
|
renderAvatarOnTop?: boolean;
|
|
11
11
|
showAvatarForEveryMessage?: boolean;
|
|
12
12
|
imageStyle?: LeftRightStyle<ImageStyle>;
|
|
13
13
|
containerStyle?: LeftRightStyle<ViewStyle>;
|
|
14
14
|
textStyle?: TextStyle;
|
|
15
15
|
renderAvatar?(props: Omit<AvatarProps<TMessage>, 'renderAvatar'>): ReactNode;
|
|
16
|
-
onPressAvatar
|
|
17
|
-
onLongPressAvatar
|
|
16
|
+
onPressAvatar?: (user: User) => void;
|
|
17
|
+
onLongPressAvatar?: (user: User) => void;
|
|
18
18
|
}
|
|
19
|
-
export declare function Avatar
|
|
20
|
-
renderAvatarOnTop?: boolean | undefined;
|
|
21
|
-
showAvatarForEveryMessage?: boolean | undefined;
|
|
22
|
-
containerStyle?: {
|
|
23
|
-
[key: string]: any;
|
|
24
|
-
} | undefined;
|
|
25
|
-
position?: string | undefined;
|
|
26
|
-
currentMessage?: IMessage | undefined;
|
|
27
|
-
previousMessage?: IMessage | undefined;
|
|
28
|
-
nextMessage?: IMessage | undefined;
|
|
29
|
-
renderAvatar?: ((props: Omit<AvatarProps<IMessage>, "renderAvatar">) => React.ReactNode) | undefined;
|
|
30
|
-
imageStyle?: {
|
|
31
|
-
[key: string]: any;
|
|
32
|
-
} | undefined;
|
|
33
|
-
onPressAvatar?: (({}: {}) => void) | undefined;
|
|
34
|
-
onLongPressAvatar?: (({}: {}) => void) | undefined;
|
|
35
|
-
}): JSX.Element | null;
|
|
19
|
+
export declare function Avatar<TMessage extends IMessage = IMessage>(props: AvatarProps<TMessage>): React.JSX.Element | null;
|
|
36
20
|
export declare namespace Avatar {
|
|
37
21
|
var propTypes: {
|
|
38
22
|
renderAvatarOnTop: PropTypes.Requireable<boolean>;
|
|
@@ -45,12 +29,12 @@ export declare namespace Avatar {
|
|
|
45
29
|
onLongPressAvatar: PropTypes.Requireable<(...args: any[]) => any>;
|
|
46
30
|
renderAvatar: PropTypes.Requireable<(...args: any[]) => any>;
|
|
47
31
|
containerStyle: PropTypes.Requireable<PropTypes.InferProps<{
|
|
48
|
-
left: PropTypes.Requireable<number | boolean | object
|
|
49
|
-
right: PropTypes.Requireable<number | boolean | object
|
|
32
|
+
left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
33
|
+
right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
50
34
|
}>>;
|
|
51
35
|
imageStyle: PropTypes.Requireable<PropTypes.InferProps<{
|
|
52
|
-
left: PropTypes.Requireable<number | boolean | object
|
|
53
|
-
right: PropTypes.Requireable<number | boolean | object
|
|
36
|
+
left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
37
|
+
right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
54
38
|
}>>;
|
|
55
39
|
};
|
|
56
40
|
}
|
package/lib/Avatar.js
CHANGED
|
@@ -11,7 +11,6 @@ const styles = {
|
|
|
11
11
|
onTop: {
|
|
12
12
|
alignSelf: 'flex-start',
|
|
13
13
|
},
|
|
14
|
-
onBottom: {},
|
|
15
14
|
image: {
|
|
16
15
|
height: 36,
|
|
17
16
|
width: 36,
|
|
@@ -25,7 +24,6 @@ const styles = {
|
|
|
25
24
|
onTop: {
|
|
26
25
|
alignSelf: 'flex-start',
|
|
27
26
|
},
|
|
28
|
-
onBottom: {},
|
|
29
27
|
image: {
|
|
30
28
|
height: 36,
|
|
31
29
|
width: 36,
|
|
@@ -33,29 +31,27 @@ const styles = {
|
|
|
33
31
|
},
|
|
34
32
|
}),
|
|
35
33
|
};
|
|
36
|
-
export function Avatar(
|
|
34
|
+
export function Avatar(props) {
|
|
35
|
+
const { renderAvatarOnTop, showAvatarForEveryMessage, containerStyle, position, currentMessage, renderAvatar, previousMessage, nextMessage, imageStyle, onPressAvatar, onLongPressAvatar, } = props;
|
|
37
36
|
const messageToCompare = renderAvatarOnTop ? previousMessage : nextMessage;
|
|
38
|
-
|
|
39
|
-
if (renderAvatar === null) {
|
|
37
|
+
if (renderAvatar === null)
|
|
40
38
|
return null;
|
|
41
|
-
}
|
|
42
39
|
if (!showAvatarForEveryMessage &&
|
|
43
40
|
currentMessage &&
|
|
44
41
|
messageToCompare &&
|
|
45
42
|
isSameUser(currentMessage, messageToCompare) &&
|
|
46
|
-
isSameDay(currentMessage, messageToCompare))
|
|
43
|
+
isSameDay(currentMessage, messageToCompare))
|
|
47
44
|
return (<View style={[
|
|
48
45
|
styles[position].container,
|
|
49
|
-
containerStyle
|
|
46
|
+
containerStyle?.[position],
|
|
50
47
|
]}>
|
|
51
48
|
<GiftedAvatar avatarStyle={[
|
|
52
49
|
styles[position].image,
|
|
53
|
-
imageStyle
|
|
50
|
+
imageStyle?.[position],
|
|
54
51
|
]}/>
|
|
55
52
|
</View>);
|
|
56
|
-
}
|
|
57
53
|
const renderAvatarComponent = () => {
|
|
58
|
-
if (renderAvatar)
|
|
54
|
+
if (renderAvatar)
|
|
59
55
|
return renderAvatar({
|
|
60
56
|
renderAvatarOnTop,
|
|
61
57
|
showAvatarForEveryMessage,
|
|
@@ -68,19 +64,17 @@ export function Avatar({ renderAvatarOnTop = false, showAvatarForEveryMessage =
|
|
|
68
64
|
onPressAvatar,
|
|
69
65
|
onLongPressAvatar,
|
|
70
66
|
});
|
|
71
|
-
|
|
72
|
-
if (currentMessage) {
|
|
67
|
+
if (currentMessage)
|
|
73
68
|
return (<GiftedAvatar avatarStyle={[
|
|
74
69
|
styles[position].image,
|
|
75
|
-
imageStyle
|
|
76
|
-
]} user={currentMessage.user} onPress={() => onPressAvatar(currentMessage.user)} onLongPress={() => onLongPressAvatar(currentMessage.user)}/>);
|
|
77
|
-
}
|
|
70
|
+
imageStyle?.[position],
|
|
71
|
+
]} user={currentMessage.user} onPress={() => onPressAvatar?.(currentMessage.user)} onLongPress={() => onLongPressAvatar?.(currentMessage.user)}/>);
|
|
78
72
|
return null;
|
|
79
73
|
};
|
|
80
74
|
return (<View style={[
|
|
81
75
|
styles[position].container,
|
|
82
|
-
styles[position]
|
|
83
|
-
containerStyle
|
|
76
|
+
renderAvatarOnTop && styles[position].onTop,
|
|
77
|
+
containerStyle?.[position],
|
|
84
78
|
]}>
|
|
85
79
|
{renderAvatarComponent()}
|
|
86
80
|
</View>);
|
package/lib/Avatar.js.flow
CHANGED
|
@@ -7,7 +7,7 @@ import type {
|
|
|
7
7
|
} from 'react-native/Libraries/StyleSheet/StyleSheet'
|
|
8
8
|
|
|
9
9
|
export type AvatarProps<TMessage: IMessage = IMessage> = $ReadOnly<{|
|
|
10
|
-
currentMessage
|
|
10
|
+
currentMessage: TMessage,
|
|
11
11
|
previousMessage?: TMessage,
|
|
12
12
|
nextMessage?: TMessage,
|
|
13
13
|
position: 'left' | 'right',
|
package/lib/Avatar.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAA;AAClC,OAAO,KAAoB,MAAM,OAAO,CAAA;AACxC,OAAO,EAEL,UAAU,EAEV,IAAI,GAEL,MAAM,cAAc,CAAA;AACrB,OAAO,YAAY,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAA;
|
|
1
|
+
{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../src/Avatar.tsx"],"names":[],"mappings":"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"}
|
package/lib/Bubble.d.ts
CHANGED
|
@@ -6,10 +6,10 @@ import { MessageTextProps } from './MessageText';
|
|
|
6
6
|
import { MessageImageProps } from './MessageImage';
|
|
7
7
|
import { TimeProps } from './Time';
|
|
8
8
|
import { User, IMessage, LeftRightStyle, Reply, Omit, MessageVideoProps, MessageAudioProps } from './Models';
|
|
9
|
-
export
|
|
10
|
-
export
|
|
11
|
-
export
|
|
12
|
-
export
|
|
9
|
+
export type RenderMessageImageProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageImageProps<TMessage>;
|
|
10
|
+
export type RenderMessageVideoProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageVideoProps<TMessage>;
|
|
11
|
+
export type RenderMessageAudioProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageAudioProps<TMessage>;
|
|
12
|
+
export type RenderMessageTextProps<TMessage extends IMessage> = Omit<BubbleProps<TMessage>, 'containerStyle' | 'wrapperStyle'> & MessageTextProps<TMessage>;
|
|
13
13
|
export interface BubbleProps<TMessage extends IMessage> {
|
|
14
14
|
user?: User;
|
|
15
15
|
touchableProps?: object;
|
|
@@ -17,7 +17,7 @@ export interface BubbleProps<TMessage extends IMessage> {
|
|
|
17
17
|
isCustomViewBottom?: boolean;
|
|
18
18
|
inverted?: boolean;
|
|
19
19
|
position: 'left' | 'right';
|
|
20
|
-
currentMessage
|
|
20
|
+
currentMessage: TMessage;
|
|
21
21
|
nextMessage?: TMessage;
|
|
22
22
|
previousMessage?: TMessage;
|
|
23
23
|
optionTitles?: string[];
|
|
@@ -32,8 +32,8 @@ export interface BubbleProps<TMessage extends IMessage> {
|
|
|
32
32
|
quickReplyStyle?: StyleProp<ViewStyle>;
|
|
33
33
|
quickReplyTextStyle?: StyleProp<TextStyle>;
|
|
34
34
|
quickReplyContainerStyle?: StyleProp<ViewStyle>;
|
|
35
|
-
onPress?(context?:
|
|
36
|
-
onLongPress?(context?:
|
|
35
|
+
onPress?(context?: unknown, message?: unknown): void;
|
|
36
|
+
onLongPress?(context?: unknown, message?: unknown): void;
|
|
37
37
|
onQuickReply?(replies: Reply[]): void;
|
|
38
38
|
renderMessageImage?(props: RenderMessageImageProps<TMessage>): React.ReactNode;
|
|
39
39
|
renderMessageVideo?(props: RenderMessageVideoProps<TMessage>): React.ReactNode;
|
|
@@ -101,26 +101,26 @@ export default class Bubble<TMessage extends IMessage = IMessage> extends React.
|
|
|
101
101
|
nextMessage: PropTypes.Requireable<object>;
|
|
102
102
|
previousMessage: PropTypes.Requireable<object>;
|
|
103
103
|
containerStyle: PropTypes.Requireable<PropTypes.InferProps<{
|
|
104
|
-
left: PropTypes.Requireable<number | boolean | object
|
|
105
|
-
right: PropTypes.Requireable<number | boolean | object
|
|
104
|
+
left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
105
|
+
right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
106
106
|
}>>;
|
|
107
107
|
wrapperStyle: PropTypes.Requireable<PropTypes.InferProps<{
|
|
108
|
-
left: PropTypes.Requireable<number | boolean | object
|
|
109
|
-
right: PropTypes.Requireable<number | boolean | object
|
|
108
|
+
left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
109
|
+
right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
110
110
|
}>>;
|
|
111
111
|
bottomContainerStyle: PropTypes.Requireable<PropTypes.InferProps<{
|
|
112
|
-
left: PropTypes.Requireable<number | boolean | object
|
|
113
|
-
right: PropTypes.Requireable<number | boolean | object
|
|
112
|
+
left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
113
|
+
right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
114
114
|
}>>;
|
|
115
|
-
tickStyle: PropTypes.Requireable<number | boolean | object
|
|
116
|
-
usernameStyle: PropTypes.Requireable<number | boolean | object
|
|
115
|
+
tickStyle: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
116
|
+
usernameStyle: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
117
117
|
containerToNextStyle: PropTypes.Requireable<PropTypes.InferProps<{
|
|
118
|
-
left: PropTypes.Requireable<number | boolean | object
|
|
119
|
-
right: PropTypes.Requireable<number | boolean | object
|
|
118
|
+
left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
119
|
+
right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
120
120
|
}>>;
|
|
121
121
|
containerToPreviousStyle: PropTypes.Requireable<PropTypes.InferProps<{
|
|
122
|
-
left: PropTypes.Requireable<number | boolean | object
|
|
123
|
-
right: PropTypes.Requireable<number | boolean | object
|
|
122
|
+
left: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
123
|
+
right: PropTypes.Requireable<NonNullable<number | boolean | object | null | undefined>>;
|
|
124
124
|
}>>;
|
|
125
125
|
};
|
|
126
126
|
onPress: () => void;
|
|
@@ -135,15 +135,15 @@ export default class Bubble<TMessage extends IMessage = IMessage> extends React.
|
|
|
135
135
|
} | {
|
|
136
136
|
borderTopRightRadius: number;
|
|
137
137
|
})[] | null;
|
|
138
|
-
renderQuickReplies(): React.ReactNode;
|
|
139
|
-
renderMessageText(): React.ReactNode;
|
|
140
|
-
renderMessageImage(): React.ReactNode;
|
|
141
|
-
renderMessageVideo(): React.ReactNode;
|
|
142
|
-
renderMessageAudio(): React.ReactNode;
|
|
143
|
-
renderTicks(): React.ReactNode;
|
|
144
|
-
renderTime(): React.ReactNode;
|
|
145
|
-
renderUsername(): React.ReactNode;
|
|
138
|
+
renderQuickReplies(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
139
|
+
renderMessageText(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
140
|
+
renderMessageImage(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
141
|
+
renderMessageVideo(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
142
|
+
renderMessageAudio(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
143
|
+
renderTicks(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
144
|
+
renderTime(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
145
|
+
renderUsername(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
|
|
146
146
|
renderCustomView(): React.ReactNode;
|
|
147
|
-
renderBubbleContent(): JSX.Element;
|
|
148
|
-
render(): JSX.Element;
|
|
147
|
+
renderBubbleContent(): React.JSX.Element;
|
|
148
|
+
render(): React.JSX.Element;
|
|
149
149
|
}
|