react-native-gifted-chat 2.6.5 → 2.7.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 +8 -17
- package/lib/Actions.d.ts +0 -11
- package/lib/Actions.js +2 -14
- package/lib/Actions.js.map +1 -1
- package/lib/Avatar.d.ts +1 -23
- package/lib/Avatar.js +32 -40
- package/lib/Avatar.js.map +1 -1
- package/lib/Bubble/index.d.ts +30 -0
- package/lib/{Bubble.js → Bubble/index.js} +31 -181
- package/lib/Bubble/index.js.map +1 -0
- package/lib/Bubble/styles.d.ts +69 -0
- package/lib/Bubble/styles.js +72 -0
- package/lib/Bubble/styles.js.map +1 -0
- package/lib/Bubble/types.d.ts +47 -0
- package/lib/Bubble/types.js +2 -0
- package/lib/Bubble/types.js.map +1 -0
- package/lib/Composer.d.ts +0 -17
- package/lib/Composer.js +3 -18
- package/lib/Composer.js.map +1 -1
- package/lib/Constant.d.ts +1 -1
- package/lib/Constant.js +1 -1
- package/lib/Constant.js.map +1 -1
- package/lib/Day/index.d.ts +4 -0
- package/lib/Day/index.js +39 -0
- package/lib/Day/index.js.map +1 -0
- package/lib/Day/styles.d.ts +20 -0
- package/lib/Day/styles.js +22 -0
- package/lib/Day/styles.js.map +1 -0
- package/lib/Day/types.d.ts +9 -0
- package/lib/Day/types.js +2 -0
- package/lib/Day/types.js.map +1 -0
- package/lib/GiftedAvatar.d.ts +1 -11
- package/lib/GiftedAvatar.js +26 -33
- package/lib/GiftedAvatar.js.map +1 -1
- package/lib/GiftedChat/index.d.ts +26 -0
- package/lib/{GiftedChat.js → GiftedChat/index.js} +46 -52
- package/lib/GiftedChat/index.js.map +1 -0
- package/lib/GiftedChat/styles.d.ts +6 -0
- package/lib/GiftedChat/styles.js +7 -0
- package/lib/GiftedChat/styles.js.map +1 -0
- package/lib/{GiftedChat.d.ts → GiftedChat/types.d.ts} +28 -38
- package/lib/GiftedChat/types.js +2 -0
- package/lib/GiftedChat/types.js.map +1 -0
- package/lib/InputToolbar.d.ts +1 -14
- package/lib/InputToolbar.js +0 -12
- package/lib/InputToolbar.js.map +1 -1
- package/lib/LoadEarlier.d.ts +0 -14
- package/lib/LoadEarlier.js +2 -16
- package/lib/LoadEarlier.js.map +1 -1
- package/lib/Message/index.d.ts +6 -0
- package/lib/Message/index.js +85 -0
- package/lib/Message/index.js.map +1 -0
- package/lib/Message/styles.d.ts +21 -0
- package/lib/Message/styles.js +22 -0
- package/lib/Message/styles.js.map +1 -0
- package/lib/Message/types.d.ts +22 -0
- package/lib/Message/types.js +2 -0
- package/lib/Message/types.js.map +1 -0
- package/lib/MessageAudio.js +1 -2
- package/lib/MessageAudio.js.map +1 -1
- package/lib/MessageContainer/components/DayAnimated/index.d.ts +5 -0
- package/lib/MessageContainer/components/DayAnimated/index.js +85 -0
- package/lib/MessageContainer/components/DayAnimated/index.js.map +1 -0
- package/lib/MessageContainer/components/DayAnimated/styles.d.ts +11 -0
- package/lib/MessageContainer/components/DayAnimated/styles.js +12 -0
- package/lib/MessageContainer/components/DayAnimated/styles.js.map +1 -0
- package/lib/MessageContainer/components/DayAnimated/types.d.ts +17 -0
- package/lib/MessageContainer/components/DayAnimated/types.js +2 -0
- package/lib/MessageContainer/components/DayAnimated/types.js.map +1 -0
- package/lib/MessageContainer/components/Item/index.d.ts +22 -0
- package/lib/MessageContainer/components/Item/index.js +69 -0
- package/lib/MessageContainer/components/Item/index.js.map +1 -0
- package/lib/MessageContainer/components/Item/types.d.ts +18 -0
- package/lib/MessageContainer/components/Item/types.js +2 -0
- package/lib/MessageContainer/components/Item/types.js.map +1 -0
- package/lib/MessageContainer/index.d.ts +6 -0
- package/lib/MessageContainer/index.js +200 -0
- package/lib/MessageContainer/index.js.map +1 -0
- package/lib/MessageContainer/styles.d.ts +34 -0
- package/lib/MessageContainer/styles.js +31 -0
- package/lib/MessageContainer/styles.js.map +1 -0
- package/lib/MessageContainer/types.d.ts +54 -0
- package/lib/MessageContainer/types.js +2 -0
- package/lib/MessageContainer/types.js.map +1 -0
- package/lib/MessageImage.d.ts +1 -12
- package/lib/MessageImage.js +2 -12
- package/lib/MessageImage.js.map +1 -1
- package/lib/MessageText.d.ts +1 -24
- package/lib/MessageText.js +0 -22
- package/lib/MessageText.js.map +1 -1
- package/lib/MessageVideo.js +1 -2
- package/lib/MessageVideo.js.map +1 -1
- package/lib/QuickReplies.d.ts +1 -12
- package/lib/QuickReplies.js +10 -20
- package/lib/QuickReplies.js.map +1 -1
- package/lib/Send.d.ts +2 -16
- package/lib/Send.js +0 -13
- package/lib/Send.js.map +1 -1
- package/lib/SystemMessage.d.ts +1 -10
- package/lib/SystemMessage.js +2 -12
- package/lib/SystemMessage.js.map +1 -1
- package/lib/Time.d.ts +1 -17
- package/lib/Time.js +0 -15
- package/lib/Time.js.map +1 -1
- package/lib/TypingIndicator/index.d.ts +5 -0
- package/lib/{TypingIndicator.js → TypingIndicator/index.js} +9 -30
- package/lib/TypingIndicator/index.js.map +1 -0
- package/lib/TypingIndicator/styles.d.ts +20 -0
- package/lib/TypingIndicator/styles.js +22 -0
- package/lib/TypingIndicator/styles.js.map +1 -0
- package/lib/TypingIndicator/types.d.ts +3 -0
- package/lib/TypingIndicator/types.js +2 -0
- package/lib/TypingIndicator/types.js.map +1 -0
- package/lib/index.d.ts +0 -1
- package/lib/index.js +0 -1
- package/lib/index.js.map +1 -1
- package/lib/styles.d.ts +10 -0
- package/lib/styles.js +11 -0
- package/lib/styles.js.map +1 -0
- package/lib/{Models.d.ts → types.d.ts} +1 -1
- package/lib/types.js +2 -0
- package/lib/types.js.map +1 -0
- package/lib/utils.d.ts +1 -3
- package/lib/utils.js +0 -7
- package/lib/utils.js.map +1 -1
- package/package.json +21 -29
- package/src/Actions.tsx +3 -15
- package/src/Avatar.tsx +43 -52
- package/src/{Bubble.tsx → Bubble/index.tsx} +52 -269
- package/src/Bubble/styles.ts +73 -0
- package/src/Bubble/types.ts +90 -0
- package/src/Composer.tsx +3 -19
- package/src/Constant.ts +1 -1
- package/src/Day/index.tsx +63 -0
- package/src/Day/styles.ts +22 -0
- package/src/Day/types.ts +14 -0
- package/src/GiftedAvatar.tsx +31 -38
- package/src/GiftedChat/index.tsx +501 -0
- package/src/GiftedChat/styles.ts +7 -0
- package/src/GiftedChat/types.ts +206 -0
- package/src/InputToolbar.tsx +1 -14
- package/src/LoadEarlier.tsx +2 -17
- package/src/Message/index.tsx +135 -0
- package/src/Message/styles.ts +22 -0
- package/src/Message/types.ts +26 -0
- package/src/MessageAudio.tsx +1 -4
- package/src/MessageContainer/components/DayAnimated/index.tsx +143 -0
- package/src/MessageContainer/components/DayAnimated/styles.ts +12 -0
- package/src/MessageContainer/components/DayAnimated/types.ts +12 -0
- package/src/MessageContainer/components/Item/index.tsx +136 -0
- package/src/MessageContainer/components/Item/types.ts +13 -0
- package/src/MessageContainer/index.tsx +343 -0
- package/src/MessageContainer/styles.ts +31 -0
- package/src/MessageContainer/types.ts +60 -0
- package/src/MessageImage.tsx +3 -14
- package/src/MessageText.tsx +1 -24
- package/src/MessageVideo.tsx +1 -4
- package/src/QuickReplies.tsx +14 -25
- package/src/Send.tsx +1 -15
- package/src/SystemMessage.tsx +3 -14
- package/src/Time.tsx +1 -17
- package/src/{TypingIndicator.tsx → TypingIndicator/index.tsx} +12 -35
- package/src/TypingIndicator/styles.ts +22 -0
- package/src/TypingIndicator/types.ts +3 -0
- package/src/__tests__/Bubble.test.tsx +7 -4
- package/src/__tests__/GiftedAvatar.test.tsx +6 -2
- package/src/__tests__/GiftedChat.test.tsx +20 -14
- package/src/__tests__/Message.test.tsx +4 -1
- package/src/__tests__/__snapshots__/Actions.test.tsx.snap +6 -2
- package/src/__tests__/__snapshots__/Bubble.test.tsx.snap +3 -1
- package/src/__tests__/__snapshots__/Composer.test.tsx.snap +2 -0
- package/src/__tests__/__snapshots__/Constant.test.tsx.snap +1 -1
- package/src/__tests__/__snapshots__/Day.test.tsx.snap +1 -33
- package/src/__tests__/__snapshots__/GiftedAvatar.test.tsx.snap +4 -2
- package/src/__tests__/__snapshots__/GiftedChat.test.tsx.snap +22 -9
- package/src/__tests__/__snapshots__/InputToolbar.test.tsx.snap +2 -0
- package/src/__tests__/__snapshots__/LoadEarlier.test.tsx.snap +3 -1
- package/src/__tests__/__snapshots__/Message.test.tsx.snap +21 -100
- package/src/__tests__/__snapshots__/MessageContainer.test.tsx.snap +282 -82
- package/src/__tests__/__snapshots__/MessageImage.test.tsx.snap +8 -4
- package/src/__tests__/__snapshots__/SystemMessage.test.tsx.snap +5 -1
- package/src/__tests__/data.ts +1 -1
- package/src/index.ts +0 -2
- package/src/styles.ts +11 -0
- package/src/{Models.ts → types.ts} +1 -1
- package/src/utils.ts +1 -9
- package/lib/Actions.js.flow +0 -21
- package/lib/Avatar.js.flow +0 -27
- package/lib/Bubble.d.ts +0 -148
- package/lib/Bubble.js.flow +0 -69
- package/lib/Bubble.js.map +0 -1
- package/lib/Composer.js.flow +0 -24
- package/lib/Day.d.ts +0 -15
- package/lib/Day.js +0 -36
- package/lib/Day.js.flow +0 -23
- package/lib/Day.js.map +0 -1
- package/lib/GiftedAvatar.js.flow +0 -17
- package/lib/GiftedChat.js.flow +0 -163
- package/lib/GiftedChat.js.map +0 -1
- package/lib/InputToolbar.js.flow +0 -31
- package/lib/LoadEarlier.js.flow +0 -20
- package/lib/Message.d.ts +0 -67
- package/lib/Message.js +0 -157
- package/lib/Message.js.flow +0 -32
- package/lib/Message.js.map +0 -1
- package/lib/MessageAudio.js.flow +0 -15
- package/lib/MessageContainer.d.ts +0 -105
- package/lib/MessageContainer.js +0 -224
- package/lib/MessageContainer.js.flow +0 -39
- package/lib/MessageContainer.js.map +0 -1
- package/lib/MessageImage.js.flow +0 -20
- package/lib/MessageText.js.flow +0 -23
- package/lib/MessageVideo.js.flow +0 -16
- package/lib/Models.js +0 -2
- package/lib/Models.js.map +0 -1
- package/lib/QuickReplies.js.flow +0 -25
- package/lib/Send.js.flow +0 -19
- package/lib/SystemMessage.js.flow +0 -18
- package/lib/Time.js.flow +0 -19
- package/lib/TypingIndicator.d.ts +0 -6
- package/lib/TypingIndicator.js.map +0 -1
- package/lib/index.js.flow +0 -2
- package/lib/types.js.flow +0 -43
- package/lib/utils.js.flow +0 -16
- package/src/Day.tsx +0 -71
- package/src/GiftedChat.tsx +0 -689
- package/src/Message.tsx +0 -229
- package/src/MessageContainer.tsx +0 -361
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
export default {
|
|
3
|
+
left: StyleSheet.create({
|
|
4
|
+
container: {
|
|
5
|
+
flexDirection: 'row',
|
|
6
|
+
alignItems: 'flex-end',
|
|
7
|
+
justifyContent: 'flex-start',
|
|
8
|
+
marginLeft: 8,
|
|
9
|
+
marginRight: 0,
|
|
10
|
+
},
|
|
11
|
+
}),
|
|
12
|
+
right: StyleSheet.create({
|
|
13
|
+
container: {
|
|
14
|
+
flexDirection: 'row',
|
|
15
|
+
alignItems: 'flex-end',
|
|
16
|
+
justifyContent: 'flex-end',
|
|
17
|
+
marginLeft: 0,
|
|
18
|
+
marginRight: 8,
|
|
19
|
+
},
|
|
20
|
+
}),
|
|
21
|
+
};
|
|
22
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/Message/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,eAAe;IACb,IAAI,EAAE,UAAU,CAAC,MAAM,CAAC;QACtB,SAAS,EAAE;YACT,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,UAAU;YACtB,cAAc,EAAE,YAAY;YAC5B,UAAU,EAAE,CAAC;YACb,WAAW,EAAE,CAAC;SACf;KACF,CAAC;IACF,KAAK,EAAE,UAAU,CAAC,MAAM,CAAC;QACvB,SAAS,EAAE;YACT,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,UAAU;YACtB,cAAc,EAAE,UAAU;YAC1B,UAAU,EAAE,CAAC;YACb,WAAW,EAAE,CAAC;SACf;KACF,CAAC;CACH,CAAA"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { ViewStyle, LayoutChangeEvent } from 'react-native';
|
|
2
|
+
import { AvatarProps } from '../Avatar';
|
|
3
|
+
import { SystemMessageProps } from '../SystemMessage';
|
|
4
|
+
import { DayProps } from '../Day';
|
|
5
|
+
import { IMessage, User, LeftRightStyle } from '../types';
|
|
6
|
+
import Bubble from '../Bubble';
|
|
7
|
+
export interface MessageProps<TMessage extends IMessage> {
|
|
8
|
+
showUserAvatar?: boolean;
|
|
9
|
+
position: 'left' | 'right';
|
|
10
|
+
currentMessage: TMessage;
|
|
11
|
+
nextMessage?: TMessage;
|
|
12
|
+
previousMessage?: TMessage;
|
|
13
|
+
user: User;
|
|
14
|
+
inverted?: boolean;
|
|
15
|
+
containerStyle?: LeftRightStyle<ViewStyle>;
|
|
16
|
+
renderBubble?(props: Bubble['props']): React.ReactNode;
|
|
17
|
+
renderDay?(props: DayProps): React.ReactNode;
|
|
18
|
+
renderSystemMessage?(props: SystemMessageProps<TMessage>): React.ReactNode;
|
|
19
|
+
renderAvatar?(props: AvatarProps<TMessage>): React.ReactNode;
|
|
20
|
+
shouldUpdateMessage?(props: MessageProps<IMessage>, nextProps: MessageProps<IMessage>): boolean;
|
|
21
|
+
onMessageLayout?(event: LayoutChangeEvent): void;
|
|
22
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Message/types.ts"],"names":[],"mappings":""}
|
package/lib/MessageAudio.js
CHANGED
|
@@ -7,8 +7,7 @@ export function MessageAudio() {
|
|
|
7
7
|
{'Audio is not implemented by GiftedChat.'}
|
|
8
8
|
</Text>
|
|
9
9
|
<Text style={{ color: Color.alizarin, fontWeight: '600' }}>
|
|
10
|
-
{'
|
|
11
|
-
{'prop.'}
|
|
10
|
+
{'\nYou need to provide your own implementation by using renderMessageAudio prop.'}
|
|
12
11
|
</Text>
|
|
13
12
|
</View>);
|
|
14
13
|
}
|
package/lib/MessageAudio.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MessageAudio.js","sourceRoot":"","sources":["../src/MessageAudio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAC3B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CACxD;QAAA,CAAC,yCAAyC,CAC5C;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CACxD;QAAA,
|
|
1
|
+
{"version":3,"file":"MessageAudio.js","sourceRoot":"","sources":["../src/MessageAudio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,KAAK,MAAM,SAAS,CAAA;AAC3B,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAEzC,MAAM,UAAU,YAAY;IAC1B,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAC3B;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CACxD;QAAA,CAAC,yCAAyC,CAC5C;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,CAAC,QAAQ,EAAE,UAAU,EAAE,KAAK,EAAE,CAAC,CACxD;QAAA,CAAC,iFAAiF,CACpF;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DayAnimatedProps } from './types';
|
|
3
|
+
export * from './types';
|
|
4
|
+
declare const DayAnimated: ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoadingEarlier, ...rest }: DayAnimatedProps) => React.JSX.Element | null;
|
|
5
|
+
export default DayAnimated;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
|
2
|
+
import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue, useAnimatedReaction, withTiming, runOnJS } from 'react-native-reanimated';
|
|
3
|
+
import { Day } from '../../../Day';
|
|
4
|
+
import { isSameDay } from '../../../utils';
|
|
5
|
+
import { useScrolledPosition, useTopOffset } from '../Item';
|
|
6
|
+
import stylesCommon from '../../../styles';
|
|
7
|
+
import styles from './styles';
|
|
8
|
+
export * from './types';
|
|
9
|
+
const DayAnimated = ({ scrolledY, daysPositions, listHeight, renderDay, messages, isLoadingEarlier, ...rest }) => {
|
|
10
|
+
const opacity = useSharedValue(0);
|
|
11
|
+
const fadeOutOpacityTimeoutId = useSharedValue(undefined);
|
|
12
|
+
const containerHeight = useSharedValue(0);
|
|
13
|
+
const isScrolledOnMount = useSharedValue(false);
|
|
14
|
+
const isLoadingEarlierAnim = useSharedValue(isLoadingEarlier);
|
|
15
|
+
const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y));
|
|
16
|
+
const [createdAt, setCreatedAt] = useState();
|
|
17
|
+
const dayTopOffset = useMemo(() => 10, []);
|
|
18
|
+
const dayBottomMargin = useMemo(() => 10, []);
|
|
19
|
+
const scrolledPosition = useScrolledPosition(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset);
|
|
20
|
+
const topOffset = useTopOffset(listHeight, scrolledY, daysPositions, containerHeight, dayBottomMargin, dayTopOffset);
|
|
21
|
+
const messagesDates = useMemo(() => {
|
|
22
|
+
const messagesDates = [];
|
|
23
|
+
for (let i = 1; i < messages.length; i++) {
|
|
24
|
+
const previousMessage = messages[i - 1];
|
|
25
|
+
const message = messages[i];
|
|
26
|
+
if (!isSameDay(previousMessage, message) || !messagesDates.includes(new Date(message.createdAt).getTime()))
|
|
27
|
+
messagesDates.push(new Date(message.createdAt).getTime());
|
|
28
|
+
}
|
|
29
|
+
return messagesDates;
|
|
30
|
+
}, [messages]);
|
|
31
|
+
const createdAtDate = useDerivedValue(() => {
|
|
32
|
+
for (let i = 0; i < daysPositionsArray.value.length; i++) {
|
|
33
|
+
const day = daysPositionsArray.value[i];
|
|
34
|
+
const dayPosition = day.y + day.height - containerHeight.value - dayBottomMargin;
|
|
35
|
+
if (scrolledPosition.value < dayPosition)
|
|
36
|
+
return day.createdAt;
|
|
37
|
+
}
|
|
38
|
+
return messagesDates[messagesDates.length - 1];
|
|
39
|
+
}, [daysPositionsArray, scrolledPosition, messagesDates, containerHeight, dayBottomMargin]);
|
|
40
|
+
const style = useAnimatedStyle(() => ({
|
|
41
|
+
top: interpolate(topOffset.value, [-dayTopOffset, -0.0001, 0, isLoadingEarlierAnim.value ? 0 : containerHeight.value + dayTopOffset], [dayTopOffset, dayTopOffset, -containerHeight.value, isLoadingEarlierAnim.value ? -containerHeight.value : dayTopOffset], 'clamp'),
|
|
42
|
+
}), [topOffset, containerHeight, dayTopOffset, isLoadingEarlierAnim]);
|
|
43
|
+
const contentStyle = useAnimatedStyle(() => ({
|
|
44
|
+
opacity: opacity.value,
|
|
45
|
+
}), [opacity]);
|
|
46
|
+
const fadeOut = useCallback(() => {
|
|
47
|
+
'worklet';
|
|
48
|
+
opacity.value = withTiming(0, { duration: 500 });
|
|
49
|
+
}, [opacity]);
|
|
50
|
+
const scheduleFadeOut = useCallback(() => {
|
|
51
|
+
clearTimeout(fadeOutOpacityTimeoutId.value);
|
|
52
|
+
fadeOutOpacityTimeoutId.value = setTimeout(fadeOut, 500);
|
|
53
|
+
}, [fadeOut, fadeOutOpacityTimeoutId]);
|
|
54
|
+
const handleLayout = useCallback(({ nativeEvent }) => {
|
|
55
|
+
containerHeight.value = nativeEvent.layout.height;
|
|
56
|
+
}, [containerHeight]);
|
|
57
|
+
useAnimatedReaction(() => [scrolledY.value, daysPositionsArray], (value, prevValue) => {
|
|
58
|
+
if (!isScrolledOnMount.value) {
|
|
59
|
+
isScrolledOnMount.value = true;
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
if (value[0] === prevValue?.[0])
|
|
63
|
+
return;
|
|
64
|
+
opacity.value = withTiming(1, { duration: 500 });
|
|
65
|
+
runOnJS(scheduleFadeOut)();
|
|
66
|
+
}, [scrolledY, scheduleFadeOut, daysPositionsArray]);
|
|
67
|
+
useAnimatedReaction(() => createdAtDate.value, (value, prevValue) => {
|
|
68
|
+
if (value && value !== prevValue)
|
|
69
|
+
runOnJS(setCreatedAt)(value);
|
|
70
|
+
}, [createdAtDate]);
|
|
71
|
+
useEffect(() => {
|
|
72
|
+
isLoadingEarlierAnim.value = isLoadingEarlier;
|
|
73
|
+
}, [isLoadingEarlierAnim, isLoadingEarlier]);
|
|
74
|
+
if (!createdAt)
|
|
75
|
+
return null;
|
|
76
|
+
return (<Animated.View style={[stylesCommon.centerItems, styles.dayAnimated, style]} onLayout={handleLayout}>
|
|
77
|
+
<Animated.View style={contentStyle} pointerEvents='none'>
|
|
78
|
+
{renderDay
|
|
79
|
+
? renderDay({ ...rest, createdAt })
|
|
80
|
+
: <Day {...rest} containerStyle={[styles.dayAnimatedDayContainerStyle, rest.containerStyle]} createdAt={createdAt}/>}
|
|
81
|
+
</Animated.View>
|
|
82
|
+
</Animated.View>);
|
|
83
|
+
};
|
|
84
|
+
export default DayAnimated;
|
|
85
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/MessageContainer/components/DayAnimated/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
export default StyleSheet.create({
|
|
3
|
+
dayAnimated: {
|
|
4
|
+
position: 'absolute',
|
|
5
|
+
width: '100%',
|
|
6
|
+
},
|
|
7
|
+
dayAnimatedDayContainerStyle: {
|
|
8
|
+
marginTop: 0,
|
|
9
|
+
marginBottom: 0,
|
|
10
|
+
},
|
|
11
|
+
});
|
|
12
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/MessageContainer/components/DayAnimated/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAEzC,eAAe,UAAU,CAAC,MAAM,CAAC;IAC/B,WAAW,EAAE;QACX,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,MAAM;KACd;IACD,4BAA4B,EAAE;QAC5B,SAAS,EAAE,CAAC;QACZ,YAAY,EAAE,CAAC;KAChB;CACF,CAAC,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { DayProps } from '../../../Day';
|
|
2
|
+
import { IMessage } from '../../../types';
|
|
3
|
+
import { DaysPositions } from '../../types';
|
|
4
|
+
export interface DayAnimatedProps extends Omit<DayProps, 'createdAt'> {
|
|
5
|
+
scrolledY: {
|
|
6
|
+
value: number;
|
|
7
|
+
};
|
|
8
|
+
daysPositions: {
|
|
9
|
+
value: DaysPositions;
|
|
10
|
+
};
|
|
11
|
+
listHeight: {
|
|
12
|
+
value: number;
|
|
13
|
+
};
|
|
14
|
+
renderDay?: (props: DayProps) => React.ReactNode;
|
|
15
|
+
messages: IMessage[];
|
|
16
|
+
isLoadingEarlier: boolean;
|
|
17
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/MessageContainer/components/DayAnimated/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { DaysPositions } from '../../types';
|
|
3
|
+
import { ItemProps } from './types';
|
|
4
|
+
export * from './types';
|
|
5
|
+
export declare const useScrolledPosition: (listHeight: {
|
|
6
|
+
value: number;
|
|
7
|
+
}, scrolledY: {
|
|
8
|
+
value: number;
|
|
9
|
+
}, containerHeight: {
|
|
10
|
+
value: number;
|
|
11
|
+
}, dayBottomMargin: number, dayTopOffset: number) => import("react-native-reanimated").DerivedValue<number>;
|
|
12
|
+
export declare const useTopOffset: (listHeight: {
|
|
13
|
+
value: number;
|
|
14
|
+
}, scrolledY: {
|
|
15
|
+
value: number;
|
|
16
|
+
}, daysPositions: {
|
|
17
|
+
value: DaysPositions;
|
|
18
|
+
}, containerHeight: {
|
|
19
|
+
value: number;
|
|
20
|
+
}, dayBottomMargin: number, dayTopOffset: number) => import("react-native-reanimated").DerivedValue<number>;
|
|
21
|
+
declare const Item: (props: ItemProps) => React.JSX.Element;
|
|
22
|
+
export default Item;
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
import React, { forwardRef, useCallback, useMemo } from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import Message from '../../../Message';
|
|
4
|
+
import Animated, { interpolate, useAnimatedStyle, useDerivedValue, useSharedValue } from 'react-native-reanimated';
|
|
5
|
+
import { Day } from '../../../Day';
|
|
6
|
+
import { isSameDay } from '../../../utils';
|
|
7
|
+
export * from './types';
|
|
8
|
+
export const useScrolledPosition = (listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset) => {
|
|
9
|
+
const scrolledPosition = useDerivedValue(() => listHeight.value + scrolledY.value - containerHeight.value - dayBottomMargin - dayTopOffset, [listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset]);
|
|
10
|
+
return scrolledPosition;
|
|
11
|
+
};
|
|
12
|
+
export const useTopOffset = (listHeight, scrolledY, daysPositions, containerHeight, dayBottomMargin, dayTopOffset) => {
|
|
13
|
+
const scrolledPosition = useScrolledPosition(listHeight, scrolledY, containerHeight, dayBottomMargin, dayTopOffset);
|
|
14
|
+
const daysPositionsArray = useDerivedValue(() => Object.values(daysPositions.value).sort((a, b) => a.y - b.y));
|
|
15
|
+
const currentDayPosition = useDerivedValue(() => daysPositionsArray.value.find((day, index) => {
|
|
16
|
+
const dayPosition = day.y + day.height;
|
|
17
|
+
return (scrolledPosition.value < dayPosition) || index === daysPositionsArray.value.length - 1;
|
|
18
|
+
}), [daysPositionsArray, scrolledPosition]);
|
|
19
|
+
const topOffset = useDerivedValue(() => {
|
|
20
|
+
const scrolledBottomY = listHeight.value + scrolledY.value - (currentDayPosition.value?.height ?? 0) - 5; // 5 is marginTop in Day component.
|
|
21
|
+
const dateBottomY = currentDayPosition.value?.y ?? 0;
|
|
22
|
+
const topOffset = scrolledBottomY - dateBottomY;
|
|
23
|
+
return topOffset;
|
|
24
|
+
}, [listHeight, scrolledY, currentDayPosition]);
|
|
25
|
+
return topOffset;
|
|
26
|
+
};
|
|
27
|
+
const DayWrapper = forwardRef((props, ref) => {
|
|
28
|
+
const { renderDay: renderDayProp, currentMessage, previousMessage, } = props;
|
|
29
|
+
if (!currentMessage?.createdAt || isSameDay(currentMessage, previousMessage))
|
|
30
|
+
return null;
|
|
31
|
+
const {
|
|
32
|
+
/* eslint-disable @typescript-eslint/no-unused-vars */
|
|
33
|
+
containerStyle, onMessageLayout,
|
|
34
|
+
/* eslint-enable @typescript-eslint/no-unused-vars */
|
|
35
|
+
...rest } = props;
|
|
36
|
+
return (<View ref={ref}>
|
|
37
|
+
{renderDayProp
|
|
38
|
+
? renderDayProp({ ...rest, createdAt: currentMessage.createdAt })
|
|
39
|
+
: <Day {...rest} createdAt={currentMessage.createdAt}/>}
|
|
40
|
+
</View>);
|
|
41
|
+
});
|
|
42
|
+
const Item = (props) => {
|
|
43
|
+
const { onRefDayWrapper, renderMessage: renderMessageProp, scrolledY, daysPositions, listHeight, ...rest } = props;
|
|
44
|
+
const containerHeight = useSharedValue(0);
|
|
45
|
+
const dayTopOffset = useMemo(() => 10, []);
|
|
46
|
+
const dayBottomMargin = useMemo(() => 10, []);
|
|
47
|
+
const topOffset = useTopOffset(listHeight, scrolledY, daysPositions, containerHeight, dayBottomMargin, dayTopOffset);
|
|
48
|
+
const handleLayout = useCallback(({ nativeEvent }) => {
|
|
49
|
+
containerHeight.value = nativeEvent.layout.height;
|
|
50
|
+
}, [containerHeight]);
|
|
51
|
+
const style = useAnimatedStyle(() => ({
|
|
52
|
+
opacity: interpolate(topOffset.value, [-dayTopOffset, -0.0001, 0, containerHeight.value + dayTopOffset], [0, 0, 1, 1], 'clamp'),
|
|
53
|
+
}), [topOffset, containerHeight, dayTopOffset]);
|
|
54
|
+
const handleRef = useCallback((ref) => {
|
|
55
|
+
onRefDayWrapper(ref, props.currentMessage._id, props.currentMessage.createdAt instanceof Date
|
|
56
|
+
? props.currentMessage.createdAt.getTime()
|
|
57
|
+
: props.currentMessage.createdAt);
|
|
58
|
+
}, [onRefDayWrapper, props.currentMessage]);
|
|
59
|
+
return (<View key={props.currentMessage._id.toString()}>
|
|
60
|
+
<Animated.View style={style} onLayout={handleLayout}>
|
|
61
|
+
<DayWrapper {...rest} ref={handleRef}/>
|
|
62
|
+
</Animated.View>
|
|
63
|
+
{renderMessageProp
|
|
64
|
+
? renderMessageProp(rest)
|
|
65
|
+
: <Message {...rest}/>}
|
|
66
|
+
</View>);
|
|
67
|
+
};
|
|
68
|
+
export default Item;
|
|
69
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/MessageContainer/components/Item/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAC/D,OAAO,EAAqB,IAAI,EAAE,MAAM,cAAc,CAAA;AAEtD,OAAO,OAAyB,MAAM,kBAAkB,CAAA;AACxD,OAAO,QAAQ,EAAE,EAAE,WAAW,EAAE,gBAAgB,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AAElH,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAA;AAClC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAG1C,cAAc,SAAS,CAAA;AAEvB,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,UAA6B,EAAE,SAA4B,EAAE,eAAkC,EAAE,eAAuB,EAAE,YAAoB,EAAE,EAAE;IACpL,MAAM,gBAAgB,GAAG,eAAe,CAAC,GAAG,EAAE,CAC5C,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,GAAG,eAAe,CAAC,KAAK,GAAG,eAAe,GAAG,YAAY,EAC3F,CAAC,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAA;IAE1E,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,UAA6B,EAC7B,SAA4B,EAC5B,aAAuC,EACvC,eAAkC,EAClC,eAAuB,EACvB,YAAoB,EACpB,EAAE;IACF,MAAM,gBAAgB,GAAG,mBAAmB,CAAC,UAAU,EAAE,SAAS,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,CAAC,CAAA;IAEnH,MAAM,kBAAkB,GAAG,eAAe,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE9G,MAAM,kBAAkB,GAAG,eAAe,CAAC,GAAG,EAAE,CAC9C,kBAAkB,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;QAC3C,MAAM,WAAW,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,MAAM,CAAA;QACtC,OAAO,CAAC,gBAAgB,CAAC,KAAK,GAAG,WAAW,CAAC,IAAI,KAAK,KAAK,kBAAkB,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAA;IAChG,CAAC,CAAC,EACF,CAAC,kBAAkB,EAAE,gBAAgB,CAAC,CAAC,CAAA;IAEzC,MAAM,SAAS,GAAG,eAAe,CAAC,GAAG,EAAE;QACrC,MAAM,eAAe,GAAG,UAAU,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,GAAG,CAAC,kBAAkB,CAAC,KAAK,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAA,CAAC,mCAAmC;QAC5I,MAAM,WAAW,GAAG,kBAAkB,CAAC,KAAK,EAAE,CAAC,IAAI,CAAC,CAAA;QAEpD,MAAM,SAAS,GAAG,eAAe,GAAG,WAAW,CAAA;QAE/C,OAAO,SAAS,CAAA;IAClB,CAAC,EAAE,CAAC,UAAU,EAAE,SAAS,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAE/C,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,MAAM,UAAU,GAAG,UAAU,CAA+B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,EACJ,SAAS,EAAE,aAAa,EACxB,cAAc,EACd,eAAe,GAChB,GAAG,KAAK,CAAA;IAET,IAAI,CAAC,cAAc,EAAE,SAAS,IAAI,SAAS,CAAC,cAAc,EAAE,eAAe,CAAC;QAC1E,OAAO,IAAI,CAAA;IAEb,MAAM;IACJ,sDAAsD;IACtD,cAAc,EACd,eAAe;IACf,qDAAqD;IACrD,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,OAAO,CACL,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CACb;MAAA,CACE,aAAa;YACX,CAAC,CAAC,aAAa,CAAC,EAAE,GAAG,IAAI,EAAE,SAAS,EAAE,cAAc,CAAC,SAAS,EAAE,CAAC;YACjE,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,CAAC,SAAS,CAAC,CAAC,cAAc,CAAC,SAAS,CAAC,EACzD,CACF;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,MAAM,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;IAChC,MAAM,EACJ,eAAe,EACf,aAAa,EAAE,iBAAiB,EAChC,SAAS,EACT,aAAa,EACb,UAAU,EACV,GAAG,IAAI,EACR,GAAG,KAAK,CAAA;IAET,MAAM,eAAe,GAAG,cAAc,CAAC,CAAC,CAAC,CAAA;IACzC,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAC1C,MAAM,eAAe,GAAG,OAAO,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IAC7C,MAAM,SAAS,GAAG,YAAY,CAAC,UAAU,EAAE,SAAS,EAAE,aAAa,EAAE,eAAe,EAAE,eAAe,EAAE,YAAY,CAAC,CAAA;IAEpH,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,EAAE,WAAW,EAAqB,EAAE,EAAE;QACtE,eAAe,CAAC,KAAK,GAAG,WAAW,CAAC,MAAM,CAAC,MAAM,CAAA;IACnD,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC,CAAA;IAErB,MAAM,KAAK,GAAG,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC;QACpC,OAAO,EAAE,WAAW,CAClB,SAAS,CAAC,KAAK,EACf,CAAC,CAAC,YAAY,EAAE,CAAC,MAAM,EAAE,CAAC,EAAE,eAAe,CAAC,KAAK,GAAG,YAAY,CAAC,EACjE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EACZ,OAAO,CACR;KACF,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,EAAE,YAAY,CAAC,CAAC,CAAA;IAE/C,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,GAAY,EAAE,EAAE;QAC7C,eAAe,CACb,GAAG,EACH,KAAK,CAAC,cAAc,CAAC,GAAG,EACxB,KAAK,CAAC,cAAc,CAAC,SAAS,YAAY,IAAI;YAC5C,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,OAAO,EAAE;YAC1C,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,SAAS,CACnC,CAAA;IACH,CAAC,EAAE,CAAC,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAA;IAE3C,OAAO,CACL,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,CAC7C;MAAA,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,QAAQ,CAAC,CAAC,YAAY,CAAC,CAClD;QAAA,CAAC,UAAU,CACT,IAAI,IAA8B,CAAC,CACnC,GAAG,CAAC,CAAC,SAAS,CAAC,EAEnB;MAAA,EAAE,QAAQ,CAAC,IAAI,CACf;MAAA,CACE,iBAAiB;YACf,CAAC,CAAC,iBAAiB,CAAC,IAA8B,CAAC;YACnD,CAAC,CAAC,CAAC,OAAO,CAAC,IAAI,IAA8B,CAAC,EAClD,CACF;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA;AAED,eAAe,IAAI,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { MessageContainerProps, DaysPositions } from '../../types';
|
|
2
|
+
import { IMessage } from '../../../types';
|
|
3
|
+
export interface ItemProps extends MessageContainerProps<IMessage> {
|
|
4
|
+
onRefDayWrapper: (ref: unknown, id: string | number, createdAt: number) => void;
|
|
5
|
+
currentMessage: IMessage;
|
|
6
|
+
previousMessage?: IMessage;
|
|
7
|
+
nextMessage?: IMessage;
|
|
8
|
+
position: 'left' | 'right';
|
|
9
|
+
scrolledY: {
|
|
10
|
+
value: number;
|
|
11
|
+
};
|
|
12
|
+
daysPositions: {
|
|
13
|
+
value: DaysPositions;
|
|
14
|
+
};
|
|
15
|
+
listHeight: {
|
|
16
|
+
value: number;
|
|
17
|
+
};
|
|
18
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/MessageContainer/components/Item/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { IMessage } from '../types';
|
|
3
|
+
import { MessageContainerProps } from './types';
|
|
4
|
+
export * from './types';
|
|
5
|
+
declare function MessageContainer<TMessage extends IMessage = IMessage>(props: MessageContainerProps<TMessage>): React.JSX.Element;
|
|
6
|
+
export default MessageContainer;
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import React, { useCallback, useMemo, useState } from 'react';
|
|
2
|
+
import { View, TouchableOpacity, Text, Platform, } from 'react-native';
|
|
3
|
+
import { FlashList } from '@shopify/flash-list';
|
|
4
|
+
import Animated, { runOnJS, useAnimatedScrollHandler, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
|
|
5
|
+
import DayAnimated from './components/DayAnimated';
|
|
6
|
+
import Item from './components/Item';
|
|
7
|
+
import { LoadEarlier } from '../LoadEarlier';
|
|
8
|
+
import TypingIndicator from '../TypingIndicator';
|
|
9
|
+
import { warning } from '../logging';
|
|
10
|
+
import stylesCommon from '../styles';
|
|
11
|
+
import styles from './styles';
|
|
12
|
+
export * from './types';
|
|
13
|
+
const AnimatedFlashList = Animated.createAnimatedComponent(FlashList);
|
|
14
|
+
function MessageContainer(props) {
|
|
15
|
+
const { messages = [], user, isTyping = false, renderChatEmpty: renderChatEmptyProp, onLoadEarlier, inverted = true, loadEarlier = false, listViewProps, invertibleScrollViewProps, extraData = null, isScrollToBottomEnabled = false, scrollToBottomOffset = 200, alignTop = false, scrollToBottomStyle, infiniteScroll = false, isLoadingEarlier = false, renderTypingIndicator: renderTypingIndicatorProp, renderFooter: renderFooterProp, renderLoadEarlier: renderLoadEarlierProp, forwardRef, handleOnScroll: handleOnScrollProp, scrollToBottomComponent: scrollToBottomComponentProp, } = props;
|
|
16
|
+
const scrollToBottomOpacity = useSharedValue(0);
|
|
17
|
+
const [isScrollToBottomVisible, setIsScrollToBottomVisible] = useState(false);
|
|
18
|
+
const scrollToBottomStyleAnim = useAnimatedStyle(() => ({
|
|
19
|
+
opacity: scrollToBottomOpacity.value,
|
|
20
|
+
}), [scrollToBottomOpacity]);
|
|
21
|
+
const [hasScrolled, setHasScrolled] = useState(false);
|
|
22
|
+
const daysPositions = useSharedValue({});
|
|
23
|
+
const listHeight = useSharedValue(0);
|
|
24
|
+
const scrolledY = useSharedValue(0);
|
|
25
|
+
const renderTypingIndicator = useCallback(() => {
|
|
26
|
+
if (renderTypingIndicatorProp)
|
|
27
|
+
return renderTypingIndicatorProp();
|
|
28
|
+
return <TypingIndicator isTyping={isTyping}/>;
|
|
29
|
+
}, [isTyping, renderTypingIndicatorProp]);
|
|
30
|
+
const ListFooterComponent = useMemo(() => {
|
|
31
|
+
if (renderFooterProp)
|
|
32
|
+
return <>{renderFooterProp(props)}</>;
|
|
33
|
+
return <>{renderTypingIndicator()}</>;
|
|
34
|
+
}, [renderFooterProp, renderTypingIndicator, props]);
|
|
35
|
+
const renderLoadEarlier = useCallback(() => {
|
|
36
|
+
if (loadEarlier === true) {
|
|
37
|
+
if (renderLoadEarlierProp)
|
|
38
|
+
return renderLoadEarlierProp(props);
|
|
39
|
+
return <LoadEarlier {...props}/>;
|
|
40
|
+
}
|
|
41
|
+
return null;
|
|
42
|
+
}, [loadEarlier, renderLoadEarlierProp, props]);
|
|
43
|
+
const scrollTo = useCallback((options) => {
|
|
44
|
+
if (forwardRef?.current && options)
|
|
45
|
+
forwardRef.current.scrollToOffset(options);
|
|
46
|
+
}, [forwardRef]);
|
|
47
|
+
const doScrollToBottom = useCallback((animated = true) => {
|
|
48
|
+
if (inverted)
|
|
49
|
+
scrollTo({ offset: 0, animated });
|
|
50
|
+
else if (forwardRef?.current)
|
|
51
|
+
forwardRef.current.scrollToEnd({ animated });
|
|
52
|
+
}, [forwardRef, inverted, scrollTo]);
|
|
53
|
+
const handleOnScroll = useCallback((event) => {
|
|
54
|
+
handleOnScrollProp?.(event);
|
|
55
|
+
const { contentOffset: { y: contentOffsetY }, contentSize: { height: contentSizeHeight }, layoutMeasurement: { height: layoutMeasurementHeight }, } = event;
|
|
56
|
+
const duration = 250;
|
|
57
|
+
if (inverted) {
|
|
58
|
+
if (contentOffsetY > scrollToBottomOffset) {
|
|
59
|
+
setIsScrollToBottomVisible(true);
|
|
60
|
+
scrollToBottomOpacity.value = withTiming(1, { duration });
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
scrollToBottomOpacity.value = withTiming(0, { duration }, isFinished => {
|
|
64
|
+
if (isFinished)
|
|
65
|
+
runOnJS(setIsScrollToBottomVisible)(false);
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
else if (contentOffsetY < scrollToBottomOffset &&
|
|
70
|
+
contentSizeHeight - layoutMeasurementHeight > scrollToBottomOffset) {
|
|
71
|
+
setIsScrollToBottomVisible(true);
|
|
72
|
+
scrollToBottomOpacity.value = withTiming(1, { duration });
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
scrollToBottomOpacity.value = withTiming(0, { duration }, isFinished => {
|
|
76
|
+
if (isFinished)
|
|
77
|
+
runOnJS(setIsScrollToBottomVisible)(false);
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
setHasScrolled(true);
|
|
81
|
+
}, [handleOnScrollProp, inverted, scrollToBottomOffset, scrollToBottomOpacity]);
|
|
82
|
+
const handleLayoutDayWrapper = useCallback((ref, id, createdAt) => {
|
|
83
|
+
setTimeout(() => {
|
|
84
|
+
const itemLayout = forwardRef?.current?.recyclerlistview_unsafe?.getLayout(messages.findIndex(m => m._id === id));
|
|
85
|
+
if (ref && itemLayout) {
|
|
86
|
+
daysPositions.value = {
|
|
87
|
+
...daysPositions.value,
|
|
88
|
+
[id]: {
|
|
89
|
+
...itemLayout,
|
|
90
|
+
createdAt,
|
|
91
|
+
},
|
|
92
|
+
};
|
|
93
|
+
}
|
|
94
|
+
else if (daysPositions.value[id] != null) {
|
|
95
|
+
const nextDaysPositions = { ...daysPositions.value };
|
|
96
|
+
delete nextDaysPositions[id];
|
|
97
|
+
daysPositions.value = nextDaysPositions;
|
|
98
|
+
}
|
|
99
|
+
}, 100);
|
|
100
|
+
}, [messages, daysPositions, forwardRef]);
|
|
101
|
+
const renderItem = useCallback(({ item, index }) => {
|
|
102
|
+
const messageItem = item;
|
|
103
|
+
if (!messageItem._id && messageItem._id !== 0)
|
|
104
|
+
warning('GiftedChat: `_id` is missing for message', JSON.stringify(item));
|
|
105
|
+
if (!messageItem.user) {
|
|
106
|
+
if (!messageItem.system)
|
|
107
|
+
warning('GiftedChat: `user` is missing for message', JSON.stringify(messageItem));
|
|
108
|
+
messageItem.user = { _id: 0 };
|
|
109
|
+
}
|
|
110
|
+
const { messages, ...restProps } = props;
|
|
111
|
+
if (messages && user) {
|
|
112
|
+
const previousMessage = (inverted ? messages[index + 1] : messages[index - 1]) || {};
|
|
113
|
+
const nextMessage = (inverted ? messages[index - 1] : messages[index + 1]) || {};
|
|
114
|
+
const messageProps = {
|
|
115
|
+
...restProps,
|
|
116
|
+
currentMessage: messageItem,
|
|
117
|
+
previousMessage,
|
|
118
|
+
nextMessage,
|
|
119
|
+
position: messageItem.user._id === user._id ? 'right' : 'left',
|
|
120
|
+
onRefDayWrapper: handleLayoutDayWrapper,
|
|
121
|
+
scrolledY,
|
|
122
|
+
daysPositions,
|
|
123
|
+
listHeight,
|
|
124
|
+
};
|
|
125
|
+
return (<Item {...messageProps}/>);
|
|
126
|
+
}
|
|
127
|
+
return null;
|
|
128
|
+
}, [props, inverted, handleLayoutDayWrapper, scrolledY, daysPositions, listHeight, user]);
|
|
129
|
+
const renderChatEmpty = useCallback(() => {
|
|
130
|
+
if (renderChatEmptyProp)
|
|
131
|
+
return inverted
|
|
132
|
+
? (renderChatEmptyProp())
|
|
133
|
+
: (<View style={[stylesCommon.fill, styles.emptyChatContainer]}>
|
|
134
|
+
{renderChatEmptyProp()}
|
|
135
|
+
</View>);
|
|
136
|
+
return <View style={stylesCommon.fill}/>;
|
|
137
|
+
}, [inverted, renderChatEmptyProp]);
|
|
138
|
+
const ListHeaderComponent = useMemo(() => {
|
|
139
|
+
const content = renderLoadEarlier();
|
|
140
|
+
if (!content)
|
|
141
|
+
return null;
|
|
142
|
+
return (<View style={stylesCommon.fill}>{content}</View>);
|
|
143
|
+
}, [renderLoadEarlier]);
|
|
144
|
+
const renderScrollBottomComponent = useCallback(() => {
|
|
145
|
+
if (scrollToBottomComponentProp)
|
|
146
|
+
return scrollToBottomComponentProp();
|
|
147
|
+
return <Text>{'V'}</Text>;
|
|
148
|
+
}, [scrollToBottomComponentProp]);
|
|
149
|
+
const renderScrollToBottomWrapper = useCallback(() => {
|
|
150
|
+
if (!isScrollToBottomVisible)
|
|
151
|
+
return null;
|
|
152
|
+
return (<Animated.View style={[
|
|
153
|
+
stylesCommon.centerItems,
|
|
154
|
+
styles.scrollToBottomStyle,
|
|
155
|
+
scrollToBottomStyle,
|
|
156
|
+
scrollToBottomStyleAnim,
|
|
157
|
+
]}>
|
|
158
|
+
<TouchableOpacity onPress={() => doScrollToBottom()} hitSlop={{ top: 5, left: 5, right: 5, bottom: 5 }}>
|
|
159
|
+
{renderScrollBottomComponent()}
|
|
160
|
+
</TouchableOpacity>
|
|
161
|
+
</Animated.View>);
|
|
162
|
+
}, [scrollToBottomStyle, renderScrollBottomComponent, doScrollToBottom, scrollToBottomStyleAnim, isScrollToBottomVisible]);
|
|
163
|
+
const onLayoutList = useCallback((event) => {
|
|
164
|
+
listHeight.value = event.nativeEvent.layout.height;
|
|
165
|
+
if (!inverted &&
|
|
166
|
+
messages?.length)
|
|
167
|
+
setTimeout(() => {
|
|
168
|
+
doScrollToBottom(false);
|
|
169
|
+
}, 500);
|
|
170
|
+
listViewProps?.onLayout?.(event);
|
|
171
|
+
}, [inverted, messages, doScrollToBottom, listHeight, listViewProps]);
|
|
172
|
+
const onEndReached = useCallback(() => {
|
|
173
|
+
if (infiniteScroll &&
|
|
174
|
+
hasScrolled &&
|
|
175
|
+
loadEarlier &&
|
|
176
|
+
onLoadEarlier &&
|
|
177
|
+
!isLoadingEarlier &&
|
|
178
|
+
Platform.OS !== 'web')
|
|
179
|
+
onLoadEarlier();
|
|
180
|
+
}, [hasScrolled, infiniteScroll, loadEarlier, onLoadEarlier, isLoadingEarlier]);
|
|
181
|
+
const keyExtractor = useCallback((item) => item._id.toString(), []);
|
|
182
|
+
const scrollHandler = useAnimatedScrollHandler({
|
|
183
|
+
onScroll: event => {
|
|
184
|
+
scrolledY.value = event.contentOffset.y;
|
|
185
|
+
runOnJS(handleOnScroll)(event);
|
|
186
|
+
},
|
|
187
|
+
}, [handleOnScroll]);
|
|
188
|
+
return (<View style={[
|
|
189
|
+
styles.contentContainerStyle,
|
|
190
|
+
alignTop ? styles.containerAlignTop : stylesCommon.fill,
|
|
191
|
+
]}>
|
|
192
|
+
<AnimatedFlashList ref={forwardRef} extraData={[extraData, isTyping]} keyExtractor={keyExtractor} automaticallyAdjustContentInsets={false} inverted={inverted} data={messages} style={stylesCommon.fill} renderItem={renderItem} {...invertibleScrollViewProps} ListEmptyComponent={renderChatEmpty} ListFooterComponent={inverted ? ListHeaderComponent : ListFooterComponent} ListHeaderComponent={inverted ? ListFooterComponent : ListHeaderComponent} onScroll={scrollHandler} scrollEventThrottle={16} onEndReached={onEndReached} onEndReachedThreshold={0.1} estimatedItemSize={100} {...listViewProps} onLayout={onLayoutList}/>
|
|
193
|
+
{isScrollToBottomEnabled
|
|
194
|
+
? renderScrollToBottomWrapper()
|
|
195
|
+
: null}
|
|
196
|
+
<DayAnimated scrolledY={scrolledY} daysPositions={daysPositions} listHeight={listHeight} messages={messages} isLoadingEarlier={isLoadingEarlier}/>
|
|
197
|
+
</View>);
|
|
198
|
+
}
|
|
199
|
+
export default MessageContainer;
|
|
200
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/MessageContainer/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
containerAlignTop: {
|
|
3
|
+
flexDirection: "row";
|
|
4
|
+
alignItems: "flex-start";
|
|
5
|
+
};
|
|
6
|
+
contentContainerStyle: {
|
|
7
|
+
flexGrow: number;
|
|
8
|
+
justifyContent: "flex-start";
|
|
9
|
+
};
|
|
10
|
+
emptyChatContainer: {
|
|
11
|
+
transform: {
|
|
12
|
+
scaleY: number;
|
|
13
|
+
}[];
|
|
14
|
+
};
|
|
15
|
+
scrollToBottomStyle: {
|
|
16
|
+
opacity: number;
|
|
17
|
+
position: "absolute";
|
|
18
|
+
right: number;
|
|
19
|
+
bottom: number;
|
|
20
|
+
zIndex: number;
|
|
21
|
+
height: number;
|
|
22
|
+
width: number;
|
|
23
|
+
borderRadius: number;
|
|
24
|
+
backgroundColor: string;
|
|
25
|
+
shadowColor: string;
|
|
26
|
+
shadowOpacity: number;
|
|
27
|
+
shadowOffset: {
|
|
28
|
+
width: number;
|
|
29
|
+
height: number;
|
|
30
|
+
};
|
|
31
|
+
shadowRadius: number;
|
|
32
|
+
};
|
|
33
|
+
};
|
|
34
|
+
export default _default;
|