@kesha-antonov/react-native-chat 4.1.0
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/LICENSE +22 -0
- package/README.md +1087 -0
- package/lib/Actions.d.ts +16 -0
- package/lib/Actions.d.ts.map +1 -0
- package/lib/Actions.js +64 -0
- package/lib/Actions.js.map +1 -0
- package/lib/Avatar.d.ts +19 -0
- package/lib/Avatar.d.ts.map +1 -0
- package/lib/Avatar.js +93 -0
- package/lib/Avatar.js.map +1 -0
- package/lib/Bubble/index.d.ts +6 -0
- package/lib/Bubble/index.d.ts.map +1 -0
- package/lib/Bubble/index.js +391 -0
- package/lib/Bubble/index.js.map +1 -0
- package/lib/Bubble/styles.d.ts +57 -0
- package/lib/Bubble/styles.d.ts.map +1 -0
- package/lib/Bubble/styles.js +59 -0
- package/lib/Bubble/styles.js.map +1 -0
- package/lib/Bubble/types.d.ts +62 -0
- package/lib/Bubble/types.d.ts.map +1 -0
- package/lib/Bubble/types.js +2 -0
- package/lib/Bubble/types.js.map +1 -0
- package/lib/Chat/index.d.ts +10 -0
- package/lib/Chat/index.d.ts.map +1 -0
- package/lib/Chat/index.js +243 -0
- package/lib/Chat/index.js.map +1 -0
- package/lib/Chat/styles.d.ts +13 -0
- package/lib/Chat/styles.d.ts.map +1 -0
- package/lib/Chat/styles.js +13 -0
- package/lib/Chat/styles.js.map +1 -0
- package/lib/Chat/types.d.ts +102 -0
- package/lib/Chat/types.d.ts.map +1 -0
- package/lib/Chat/types.js +2 -0
- package/lib/Chat/types.js.map +1 -0
- package/lib/ChatAvatar.d.ts +12 -0
- package/lib/ChatAvatar.d.ts.map +1 -0
- package/lib/ChatAvatar.js +100 -0
- package/lib/ChatAvatar.js.map +1 -0
- package/lib/ChatContext.d.ts +12 -0
- package/lib/ChatContext.d.ts.map +1 -0
- package/lib/ChatContext.js +10 -0
- package/lib/ChatContext.js.map +1 -0
- package/lib/Color.d.ts +18 -0
- package/lib/Color.d.ts.map +1 -0
- package/lib/Color.js +18 -0
- package/lib/Color.js.map +1 -0
- package/lib/Composer.d.ts +9 -0
- package/lib/Composer.d.ts.map +1 -0
- package/lib/Composer.js +63 -0
- package/lib/Composer.js.map +1 -0
- package/lib/Constant.d.ts +8 -0
- package/lib/Constant.d.ts.map +1 -0
- package/lib/Constant.js +8 -0
- package/lib/Constant.js.map +1 -0
- package/lib/Day/index.d.ts +5 -0
- package/lib/Day/index.d.ts.map +1 -0
- package/lib/Day/index.js +39 -0
- package/lib/Day/index.js.map +1 -0
- package/lib/Day/styles.d.ts +21 -0
- package/lib/Day/styles.d.ts.map +1 -0
- package/lib/Day/styles.js +22 -0
- package/lib/Day/styles.js.map +1 -0
- package/lib/Day/types.d.ts +17 -0
- package/lib/Day/types.d.ts.map +1 -0
- package/lib/Day/types.js +2 -0
- package/lib/Day/types.js.map +1 -0
- package/lib/InputToolbar.d.ts +36 -0
- package/lib/InputToolbar.d.ts.map +1 -0
- package/lib/InputToolbar.js +108 -0
- package/lib/InputToolbar.js.map +1 -0
- package/lib/LoadEarlierMessages.d.ts +17 -0
- package/lib/LoadEarlierMessages.d.ts.map +1 -0
- package/lib/LoadEarlierMessages.js +44 -0
- package/lib/LoadEarlierMessages.js.map +1 -0
- package/lib/Message/index.d.ts +6 -0
- package/lib/Message/index.d.ts.map +1 -0
- package/lib/Message/index.js +180 -0
- package/lib/Message/index.js.map +1 -0
- package/lib/Message/styles.d.ts +18 -0
- package/lib/Message/styles.d.ts.map +1 -0
- package/lib/Message/styles.js +18 -0
- package/lib/Message/styles.js.map +1 -0
- package/lib/Message/types.d.ts +28 -0
- package/lib/Message/types.d.ts.map +1 -0
- package/lib/Message/types.js +2 -0
- package/lib/Message/types.js.map +1 -0
- package/lib/MessageAudio.d.ts +3 -0
- package/lib/MessageAudio.d.ts.map +1 -0
- package/lib/MessageAudio.js +24 -0
- package/lib/MessageAudio.js.map +1 -0
- package/lib/MessageImage.d.ts +12 -0
- package/lib/MessageImage.d.ts.map +1 -0
- package/lib/MessageImage.js +164 -0
- package/lib/MessageImage.js.map +1 -0
- package/lib/MessageReply.d.ts +15 -0
- package/lib/MessageReply.d.ts.map +1 -0
- package/lib/MessageReply.js +102 -0
- package/lib/MessageReply.js.map +1 -0
- package/lib/MessageText.d.ts +24 -0
- package/lib/MessageText.d.ts.map +1 -0
- package/lib/MessageText.js +51 -0
- package/lib/MessageText.js.map +1 -0
- package/lib/MessageVideo.d.ts +3 -0
- package/lib/MessageVideo.d.ts.map +1 -0
- package/lib/MessageVideo.js +24 -0
- package/lib/MessageVideo.js.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/debug.d.ts +8 -0
- package/lib/MessagesContainer/components/DayAnimated/debug.d.ts.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/debug.js +38 -0
- package/lib/MessagesContainer/components/DayAnimated/debug.js.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/index.d.ts +5 -0
- package/lib/MessagesContainer/components/DayAnimated/index.d.ts.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/index.js +123 -0
- package/lib/MessagesContainer/components/DayAnimated/index.js.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/styles.d.ts +12 -0
- package/lib/MessagesContainer/components/DayAnimated/styles.d.ts.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/styles.js +12 -0
- package/lib/MessagesContainer/components/DayAnimated/styles.js.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/types.d.ts +22 -0
- package/lib/MessagesContainer/components/DayAnimated/types.d.ts.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/types.js +2 -0
- package/lib/MessagesContainer/components/DayAnimated/types.js.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/useScrollGatedOpacity.d.ts +4 -0
- package/lib/MessagesContainer/components/DayAnimated/useScrollGatedOpacity.d.ts.map +1 -0
- package/lib/MessagesContainer/components/DayAnimated/useScrollGatedOpacity.js +37 -0
- package/lib/MessagesContainer/components/DayAnimated/useScrollGatedOpacity.js.map +1 -0
- package/lib/MessagesContainer/components/Item/index.d.ts +6 -0
- package/lib/MessagesContainer/components/Item/index.d.ts.map +1 -0
- package/lib/MessagesContainer/components/Item/index.js +86 -0
- package/lib/MessagesContainer/components/Item/index.js.map +1 -0
- package/lib/MessagesContainer/components/Item/types.d.ts +22 -0
- package/lib/MessagesContainer/components/Item/types.d.ts.map +1 -0
- package/lib/MessagesContainer/components/Item/types.js +2 -0
- package/lib/MessagesContainer/components/Item/types.js.map +1 -0
- package/lib/MessagesContainer/components/dayLayout.d.ts +10 -0
- package/lib/MessagesContainer/components/dayLayout.d.ts.map +1 -0
- package/lib/MessagesContainer/components/dayLayout.js +37 -0
- package/lib/MessagesContainer/components/dayLayout.js.map +1 -0
- package/lib/MessagesContainer/index.d.ts +6 -0
- package/lib/MessagesContainer/index.d.ts.map +1 -0
- package/lib/MessagesContainer/index.js +308 -0
- package/lib/MessagesContainer/index.js.map +1 -0
- package/lib/MessagesContainer/styles.d.ts +55 -0
- package/lib/MessagesContainer/styles.d.ts.map +1 -0
- package/lib/MessagesContainer/styles.js +42 -0
- package/lib/MessagesContainer/styles.js.map +1 -0
- package/lib/MessagesContainer/types.d.ts +91 -0
- package/lib/MessagesContainer/types.d.ts.map +1 -0
- package/lib/MessagesContainer/types.js +10 -0
- package/lib/MessagesContainer/types.js.map +1 -0
- package/lib/Models.d.ts +67 -0
- package/lib/Models.d.ts.map +1 -0
- package/lib/Models.js +2 -0
- package/lib/Models.js.map +1 -0
- package/lib/QuickReplies.d.ts +16 -0
- package/lib/QuickReplies.d.ts.map +1 -0
- package/lib/QuickReplies.js +107 -0
- package/lib/QuickReplies.js.map +1 -0
- package/lib/Reactions/MessageReactions.d.ts +5 -0
- package/lib/Reactions/MessageReactions.d.ts.map +1 -0
- package/lib/Reactions/MessageReactions.js +83 -0
- package/lib/Reactions/MessageReactions.js.map +1 -0
- package/lib/Reactions/ReactionPicker.d.ts +10 -0
- package/lib/Reactions/ReactionPicker.d.ts.map +1 -0
- package/lib/Reactions/ReactionPicker.js +84 -0
- package/lib/Reactions/ReactionPicker.js.map +1 -0
- package/lib/Reactions/index.d.ts +6 -0
- package/lib/Reactions/index.d.ts.map +1 -0
- package/lib/Reactions/index.js +6 -0
- package/lib/Reactions/index.js.map +1 -0
- package/lib/Reactions/types.d.ts +79 -0
- package/lib/Reactions/types.d.ts.map +1 -0
- package/lib/Reactions/types.js +2 -0
- package/lib/Reactions/types.js.map +1 -0
- package/lib/Reply/index.d.ts +2 -0
- package/lib/Reply/index.d.ts.map +1 -0
- package/lib/Reply/index.js +2 -0
- package/lib/Reply/index.js.map +1 -0
- package/lib/Reply/types.d.ts +72 -0
- package/lib/Reply/types.d.ts.map +1 -0
- package/lib/Reply/types.js +2 -0
- package/lib/Reply/types.js.map +1 -0
- package/lib/ReplyPreview.d.ts +14 -0
- package/lib/ReplyPreview.d.ts.map +1 -0
- package/lib/ReplyPreview.js +94 -0
- package/lib/ReplyPreview.js.map +1 -0
- package/lib/Send.d.ts +19 -0
- package/lib/Send.d.ts.map +1 -0
- package/lib/Send.js +56 -0
- package/lib/Send.js.map +1 -0
- package/lib/SystemMessage.d.ts +14 -0
- package/lib/SystemMessage.d.ts.map +1 -0
- package/lib/SystemMessage.js +42 -0
- package/lib/SystemMessage.js.map +1 -0
- package/lib/Time.d.ts +12 -0
- package/lib/Time.d.ts.map +1 -0
- package/lib/Time.js +38 -0
- package/lib/Time.js.map +1 -0
- package/lib/TypingIndicator/index.d.ts +5 -0
- package/lib/TypingIndicator/index.d.ts.map +1 -0
- package/lib/TypingIndicator/index.js +94 -0
- package/lib/TypingIndicator/index.js.map +1 -0
- package/lib/TypingIndicator/styles.d.ts +21 -0
- package/lib/TypingIndicator/styles.d.ts.map +1 -0
- package/lib/TypingIndicator/styles.js +22 -0
- package/lib/TypingIndicator/styles.js.map +1 -0
- package/lib/TypingIndicator/types.d.ts +6 -0
- package/lib/TypingIndicator/types.d.ts.map +1 -0
- package/lib/TypingIndicator/types.js +2 -0
- package/lib/TypingIndicator/types.js.map +1 -0
- package/lib/components/MessageReply.d.ts +29 -0
- package/lib/components/MessageReply.d.ts.map +1 -0
- package/lib/components/MessageReply.js +87 -0
- package/lib/components/MessageReply.js.map +1 -0
- package/lib/components/ReplyPreview.d.ts +17 -0
- package/lib/components/ReplyPreview.d.ts.map +1 -0
- package/lib/components/ReplyPreview.js +148 -0
- package/lib/components/ReplyPreview.js.map +1 -0
- package/lib/components/StreamingCursor.d.ts +15 -0
- package/lib/components/StreamingCursor.d.ts.map +1 -0
- package/lib/components/StreamingCursor.js +16 -0
- package/lib/components/StreamingCursor.js.map +1 -0
- package/lib/components/TouchableOpacity.d.ts +9 -0
- package/lib/components/TouchableOpacity.d.ts.map +1 -0
- package/lib/components/TouchableOpacity.js +47 -0
- package/lib/components/TouchableOpacity.js.map +1 -0
- package/lib/hooks/useColorScheme.d.ts +8 -0
- package/lib/hooks/useColorScheme.d.ts.map +1 -0
- package/lib/hooks/useColorScheme.js +17 -0
- package/lib/hooks/useColorScheme.js.map +1 -0
- package/lib/hooks/useStreamingMessages.d.ts +42 -0
- package/lib/hooks/useStreamingMessages.d.ts.map +1 -0
- package/lib/hooks/useStreamingMessages.js +96 -0
- package/lib/hooks/useStreamingMessages.js.map +1 -0
- package/lib/hooks/useUpdateLayoutEffect.d.ts +9 -0
- package/lib/hooks/useUpdateLayoutEffect.d.ts.map +1 -0
- package/lib/hooks/useUpdateLayoutEffect.js +17 -0
- package/lib/hooks/useUpdateLayoutEffect.js.map +1 -0
- package/lib/index.d.ts +35 -0
- package/lib/index.d.ts.map +1 -0
- package/lib/index.js +34 -0
- package/lib/index.js.map +1 -0
- package/lib/linkParser.d.ts +39 -0
- package/lib/linkParser.d.ts.map +1 -0
- package/lib/linkParser.js +154 -0
- package/lib/linkParser.js.map +1 -0
- package/lib/logging.d.ts +3 -0
- package/lib/logging.d.ts.map +1 -0
- package/lib/logging.js +5 -0
- package/lib/logging.js.map +1 -0
- package/lib/styles.d.ts +14 -0
- package/lib/styles.d.ts.map +1 -0
- package/lib/styles.js +23 -0
- package/lib/styles.js.map +1 -0
- package/lib/types.d.ts +19 -0
- package/lib/types.d.ts.map +1 -0
- package/lib/types.js +2 -0
- package/lib/types.js.map +1 -0
- package/lib/utils.d.ts +8 -0
- package/lib/utils.d.ts.map +1 -0
- package/lib/utils.js +105 -0
- package/lib/utils.js.map +1 -0
- package/package.json +119 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Reactions/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Reactions/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Reply/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Reply/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAA"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import { ImageStyle, StyleProp, TextStyle, ViewStyle } from 'react-native';
|
|
2
|
+
import { SharedValue } from 'react-native-reanimated';
|
|
3
|
+
import { MessageReplyProps } from '../components/MessageReply';
|
|
4
|
+
import { ReplyPreviewProps } from '../components/ReplyPreview';
|
|
5
|
+
import { IMessage, ReplyMessage } from '../Models';
|
|
6
|
+
/**
|
|
7
|
+
* Props for swipe-to-reply gesture behavior
|
|
8
|
+
*/
|
|
9
|
+
export interface SwipeToReplyProps<TMessage extends IMessage> {
|
|
10
|
+
/** Enable swipe to reply on messages; default is false */
|
|
11
|
+
isEnabled?: boolean;
|
|
12
|
+
/** Direction to swipe for reply; default is 'left' (swipe left, icon appears on right) */
|
|
13
|
+
direction?: 'left' | 'right';
|
|
14
|
+
/** Callback when swipe to reply is triggered */
|
|
15
|
+
onSwipe?: (message: TMessage) => void;
|
|
16
|
+
/** Custom render for swipe action indicator */
|
|
17
|
+
renderAction?: (progress: SharedValue<number>, translation: SharedValue<number>, position: 'left' | 'right') => React.ReactNode;
|
|
18
|
+
/** Style for the swipe action container */
|
|
19
|
+
actionContainerStyle?: StyleProp<ViewStyle>;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Props for reply preview shown above input toolbar
|
|
23
|
+
*/
|
|
24
|
+
export interface ReplyPreviewStyleProps {
|
|
25
|
+
/** Style for reply preview container */
|
|
26
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
27
|
+
/** Style for reply preview text */
|
|
28
|
+
textStyle?: StyleProp<TextStyle>;
|
|
29
|
+
/** Style for reply preview image */
|
|
30
|
+
imageStyle?: StyleProp<ImageStyle>;
|
|
31
|
+
}
|
|
32
|
+
/**
|
|
33
|
+
* Props for message reply display inside bubble
|
|
34
|
+
*/
|
|
35
|
+
export interface MessageReplyStyleProps {
|
|
36
|
+
/** Style for message reply container */
|
|
37
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
38
|
+
/** Style for message reply container on left side */
|
|
39
|
+
containerStyleLeft?: StyleProp<ViewStyle>;
|
|
40
|
+
/** Style for message reply container on right side */
|
|
41
|
+
containerStyleRight?: StyleProp<ViewStyle>;
|
|
42
|
+
/** Style for message reply image */
|
|
43
|
+
imageStyle?: StyleProp<ImageStyle>;
|
|
44
|
+
/** Style for message reply text */
|
|
45
|
+
textStyle?: StyleProp<TextStyle>;
|
|
46
|
+
/** Style for message reply text on left side */
|
|
47
|
+
textStyleLeft?: StyleProp<TextStyle>;
|
|
48
|
+
/** Style for message reply text on right side */
|
|
49
|
+
textStyleRight?: StyleProp<TextStyle>;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Grouped props for reply functionality
|
|
53
|
+
*/
|
|
54
|
+
export interface ReplyProps<TMessage extends IMessage> {
|
|
55
|
+
/** Reply message to show in input toolbar preview */
|
|
56
|
+
message?: ReplyMessage | null;
|
|
57
|
+
/** Callback when reply is cleared */
|
|
58
|
+
onClear?: () => void;
|
|
59
|
+
/** Callback when message reply is pressed inside bubble */
|
|
60
|
+
onPress?: (replyMessage: ReplyMessage) => void;
|
|
61
|
+
/** Custom render for reply preview in input toolbar */
|
|
62
|
+
renderPreview?: (props: ReplyPreviewProps) => React.ReactNode;
|
|
63
|
+
/** Custom render for message reply inside bubble */
|
|
64
|
+
renderMessageReply?: (props: MessageReplyProps<TMessage>) => React.ReactNode;
|
|
65
|
+
/** Swipe-to-reply configuration */
|
|
66
|
+
swipe?: SwipeToReplyProps<TMessage>;
|
|
67
|
+
/** Reply preview styling */
|
|
68
|
+
previewStyle?: ReplyPreviewStyleProps;
|
|
69
|
+
/** Message reply styling */
|
|
70
|
+
messageStyle?: MessageReplyStyleProps;
|
|
71
|
+
}
|
|
72
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Reply/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AAC1E,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAA;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AAC9D,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AAElD;;GAEG;AACH,MAAM,WAAW,iBAAiB,CAAC,QAAQ,SAAS,QAAQ;IAC1D,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,0FAA0F;IAC1F,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC5B,gDAAgD;IAChD,OAAO,CAAC,EAAE,CAAC,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAA;IACrC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,CACb,QAAQ,EAAE,WAAW,CAAC,MAAM,CAAC,EAC7B,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,EAChC,QAAQ,EAAE,MAAM,GAAG,OAAO,KACvB,KAAK,CAAC,SAAS,CAAA;IACpB,2CAA2C;IAC3C,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC5C;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,wCAAwC;IACxC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,mCAAmC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,oCAAoC;IACpC,UAAU,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAA;CACnC;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,wCAAwC;IACxC,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,qDAAqD;IACrD,kBAAkB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACzC,sDAAsD;IACtD,mBAAmB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC1C,oCAAoC;IACpC,UAAU,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,CAAA;IAClC,mCAAmC;IACnC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,gDAAgD;IAChD,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACpC,iDAAiD;IACjD,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,UAAU,CAAC,QAAQ,SAAS,QAAQ;IACnD,qDAAqD;IACrD,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAA;IAC7B,qCAAqC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,2DAA2D;IAC3D,OAAO,CAAC,EAAE,CAAC,YAAY,EAAE,YAAY,KAAK,IAAI,CAAA;IAC9C,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,KAAK,CAAC,SAAS,CAAA;IAC7D,oDAAoD;IACpD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,CAAC,QAAQ,CAAC,KAAK,KAAK,CAAC,SAAS,CAAA;IAC5E,mCAAmC;IACnC,KAAK,CAAC,EAAE,iBAAiB,CAAC,QAAQ,CAAC,CAAA;IACnC,4BAA4B;IAC5B,YAAY,CAAC,EAAE,sBAAsB,CAAA;IACrC,4BAA4B;IAC5B,YAAY,CAAC,EAAE,sBAAsB,CAAA;CACtC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Reply/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
3
|
+
import { ReplyMessage } from './Models';
|
|
4
|
+
export interface ReplyPreviewProps {
|
|
5
|
+
replyMessage: ReplyMessage;
|
|
6
|
+
onClearReply: () => void;
|
|
7
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
8
|
+
usernameStyle?: StyleProp<TextStyle>;
|
|
9
|
+
textStyle?: StyleProp<TextStyle>;
|
|
10
|
+
clearButtonStyle?: StyleProp<ViewStyle>;
|
|
11
|
+
clearButtonTextStyle?: StyleProp<TextStyle>;
|
|
12
|
+
}
|
|
13
|
+
export declare function ReplyPreview({ replyMessage, onClearReply, containerStyle, usernameStyle, textStyle, clearButtonStyle, clearButtonTextStyle, }: ReplyPreviewProps): React.JSX.Element;
|
|
14
|
+
//# sourceMappingURL=ReplyPreview.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ReplyPreview.d.ts","sourceRoot":"","sources":["../src/ReplyPreview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAE,SAAS,EAAoB,MAAM,cAAc,CAAA;AAIlG,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,YAAY,CAAA;IAC1B,YAAY,EAAE,MAAM,IAAI,CAAA;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,aAAa,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACpC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,gBAAgB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACvC,oBAAoB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;CAC5C;AAED,wBAAgB,YAAY,CAAE,EAC5B,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,oBAAoB,GACrB,EAAE,iBAAiB,qBAiDnB"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { StyleSheet, View, Pressable, Text } from 'react-native';
|
|
3
|
+
import { Color } from './Color';
|
|
4
|
+
import { useColorScheme } from './hooks/useColorScheme';
|
|
5
|
+
export function ReplyPreview({ replyMessage, onClearReply, containerStyle, usernameStyle, textStyle, clearButtonStyle, clearButtonTextStyle, }) {
|
|
6
|
+
const colorScheme = useColorScheme();
|
|
7
|
+
const containerStyles = useMemo(() => [
|
|
8
|
+
styles.container,
|
|
9
|
+
colorScheme === 'dark' && styles.container_dark,
|
|
10
|
+
containerStyle,
|
|
11
|
+
], [colorScheme, containerStyle]);
|
|
12
|
+
const usernameStyles = useMemo(() => [
|
|
13
|
+
styles.username,
|
|
14
|
+
colorScheme === 'dark' && styles.username_dark,
|
|
15
|
+
usernameStyle,
|
|
16
|
+
], [colorScheme, usernameStyle]);
|
|
17
|
+
const textStyles = useMemo(() => [
|
|
18
|
+
styles.text,
|
|
19
|
+
colorScheme === 'dark' && styles.text_dark,
|
|
20
|
+
textStyle,
|
|
21
|
+
], [colorScheme, textStyle]);
|
|
22
|
+
return (<View style={containerStyles}>
|
|
23
|
+
<View style={styles.border}/>
|
|
24
|
+
<View style={styles.content}>
|
|
25
|
+
<Text style={usernameStyles} numberOfLines={1}>
|
|
26
|
+
{replyMessage.user?.name || 'User'}
|
|
27
|
+
</Text>
|
|
28
|
+
<Text style={textStyles} numberOfLines={1}>
|
|
29
|
+
{replyMessage.text || (replyMessage.image ? 'Photo' : (replyMessage.audio ? 'Audio' : 'Message'))}
|
|
30
|
+
</Text>
|
|
31
|
+
</View>
|
|
32
|
+
<Pressable onPress={onClearReply} style={[styles.clearButton, clearButtonStyle]} hitSlop={8}>
|
|
33
|
+
<Text style={[styles.clearButtonText, clearButtonTextStyle]}>
|
|
34
|
+
{'✕'}
|
|
35
|
+
</Text>
|
|
36
|
+
</Pressable>
|
|
37
|
+
</View>);
|
|
38
|
+
}
|
|
39
|
+
const styles = StyleSheet.create({
|
|
40
|
+
container: {
|
|
41
|
+
flexDirection: 'row',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
paddingHorizontal: 10,
|
|
44
|
+
paddingVertical: 8,
|
|
45
|
+
backgroundColor: '#f5f5f5',
|
|
46
|
+
borderBottomWidth: StyleSheet.hairlineWidth,
|
|
47
|
+
borderBottomColor: Color.defaultColor,
|
|
48
|
+
},
|
|
49
|
+
container_dark: {
|
|
50
|
+
backgroundColor: '#2a2a2a',
|
|
51
|
+
borderBottomColor: '#444',
|
|
52
|
+
},
|
|
53
|
+
border: {
|
|
54
|
+
width: 3,
|
|
55
|
+
height: '100%',
|
|
56
|
+
backgroundColor: Color.defaultBlue,
|
|
57
|
+
borderRadius: 1.5,
|
|
58
|
+
marginRight: 10,
|
|
59
|
+
},
|
|
60
|
+
content: {
|
|
61
|
+
flex: 1,
|
|
62
|
+
},
|
|
63
|
+
username: {
|
|
64
|
+
fontSize: 13,
|
|
65
|
+
fontWeight: '600',
|
|
66
|
+
color: Color.defaultBlue,
|
|
67
|
+
marginBottom: 2,
|
|
68
|
+
},
|
|
69
|
+
username_dark: {
|
|
70
|
+
color: '#6eb5ff',
|
|
71
|
+
},
|
|
72
|
+
text: {
|
|
73
|
+
fontSize: 13,
|
|
74
|
+
color: '#666',
|
|
75
|
+
},
|
|
76
|
+
text_dark: {
|
|
77
|
+
color: '#999',
|
|
78
|
+
},
|
|
79
|
+
clearButton: {
|
|
80
|
+
width: 24,
|
|
81
|
+
height: 24,
|
|
82
|
+
borderRadius: 12,
|
|
83
|
+
backgroundColor: Color.defaultColor,
|
|
84
|
+
justifyContent: 'center',
|
|
85
|
+
alignItems: 'center',
|
|
86
|
+
marginLeft: 10,
|
|
87
|
+
},
|
|
88
|
+
clearButtonText: {
|
|
89
|
+
fontSize: 12,
|
|
90
|
+
fontWeight: '600',
|
|
91
|
+
color: '#666',
|
|
92
|
+
},
|
|
93
|
+
});
|
|
94
|
+
//# sourceMappingURL=ReplyPreview.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ReplyPreview.js","sourceRoot":"","sources":["../src/ReplyPreview.tsx"],"names":[],"mappings":"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"}
|
package/lib/Send.d.ts
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleProp, ViewStyle, TextStyle } from 'react-native';
|
|
3
|
+
import { TouchableOpacityProps } from './components/TouchableOpacity';
|
|
4
|
+
import { IMessage } from './Models';
|
|
5
|
+
export interface SendProps<TMessage extends IMessage> {
|
|
6
|
+
text?: string;
|
|
7
|
+
label?: string;
|
|
8
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
9
|
+
textStyle?: StyleProp<TextStyle>;
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
/** Always show send button, even when text is empty */
|
|
12
|
+
isSendButtonAlwaysVisible?: boolean;
|
|
13
|
+
/** Text is optional, allow sending empty messages (useful for media-only messages) */
|
|
14
|
+
isTextOptional?: boolean;
|
|
15
|
+
sendButtonProps?: Partial<TouchableOpacityProps>;
|
|
16
|
+
onSend?(messages: Partial<TMessage> | Partial<TMessage>[], shouldResetInputToolbar: boolean): void;
|
|
17
|
+
}
|
|
18
|
+
export declare const Send: <TMessage extends IMessage = IMessage>({ text, containerStyle, children, textStyle, label, isSendButtonAlwaysVisible, isTextOptional, sendButtonProps, onSend, }: SendProps<TMessage>) => React.JSX.Element;
|
|
19
|
+
//# sourceMappingURL=Send.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Send.d.ts","sourceRoot":"","sources":["../src/Send.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAA;AAC9D,OAAO,EAEL,SAAS,EACT,SAAS,EACT,SAAS,EACH,MAAM,cAAc,CAAA;AAI5B,OAAO,EAAoB,qBAAqB,EAAE,MAAM,+BAA+B,CAAA;AAGvF,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAGnC,MAAM,WAAW,SAAS,CAAC,QAAQ,SAAS,QAAQ;IAClD,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,uDAAuD;IACvD,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,sFAAsF;IACtF,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,eAAe,CAAC,EAAE,OAAO,CAAC,qBAAqB,CAAC,CAAA;IAChD,MAAM,CAAC,CACL,QAAQ,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAC,EAAE,EACjD,uBAAuB,EAAE,OAAO,GAC/B,IAAI,CAAA;CACR;AAED,eAAO,MAAM,IAAI,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAE,2HAUxD,SAAS,CAAC,QAAQ,CAAC,sBAkDrB,CAAA"}
|
package/lib/Send.js
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import React, { useMemo, useCallback, useEffect } from 'react';
|
|
2
|
+
import { StyleSheet, Text } from 'react-native';
|
|
3
|
+
import Animated, { useSharedValue, useAnimatedStyle, withTiming } from 'react-native-reanimated';
|
|
4
|
+
import { Color } from './Color';
|
|
5
|
+
import { TouchableOpacity } from './components/TouchableOpacity';
|
|
6
|
+
import { TEST_ID } from './Constant';
|
|
7
|
+
import { useColorScheme } from './hooks/useColorScheme';
|
|
8
|
+
import { getColorSchemeStyle } from './styles';
|
|
9
|
+
export const Send = ({ text, containerStyle, children, textStyle, label = 'Send', isSendButtonAlwaysVisible = false, isTextOptional = false, sendButtonProps, onSend, }) => {
|
|
10
|
+
const colorScheme = useColorScheme();
|
|
11
|
+
const opacity = useSharedValue(0);
|
|
12
|
+
const handleOnPress = useCallback(() => {
|
|
13
|
+
const trimmedText = text?.trim() ?? '';
|
|
14
|
+
const message = { text: trimmedText };
|
|
15
|
+
if (onSend && (trimmedText.length || isTextOptional))
|
|
16
|
+
onSend(message, true);
|
|
17
|
+
}, [text, onSend, isTextOptional]);
|
|
18
|
+
const isVisible = useMemo(() => isSendButtonAlwaysVisible || !!text?.trim().length, [isSendButtonAlwaysVisible, text]);
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
opacity.value = withTiming(isVisible ? 1 : 0, { duration: 200 });
|
|
21
|
+
}, [isVisible, opacity]);
|
|
22
|
+
const animatedStyle = useAnimatedStyle(() => ({
|
|
23
|
+
opacity: opacity.value,
|
|
24
|
+
}), [opacity]);
|
|
25
|
+
return (<Animated.View style={[styles.container, containerStyle, animatedStyle]} pointerEvents={isVisible ? 'auto' : 'none'}>
|
|
26
|
+
<TouchableOpacity testID={TEST_ID.SEND_TOUCHABLE} style={styles.touchable} onPress={handleOnPress} accessible accessibilityLabel='send' accessibilityRole='button' {...sendButtonProps}>
|
|
27
|
+
{children ||
|
|
28
|
+
<Text style={[
|
|
29
|
+
getColorSchemeStyle(styles, 'text', colorScheme),
|
|
30
|
+
textStyle,
|
|
31
|
+
]}>
|
|
32
|
+
{label}
|
|
33
|
+
</Text>}
|
|
34
|
+
</TouchableOpacity>
|
|
35
|
+
</Animated.View>);
|
|
36
|
+
};
|
|
37
|
+
const styles = StyleSheet.create({
|
|
38
|
+
container: {
|
|
39
|
+
justifyContent: 'flex-end',
|
|
40
|
+
},
|
|
41
|
+
touchable: {
|
|
42
|
+
justifyContent: 'flex-end',
|
|
43
|
+
},
|
|
44
|
+
text: {
|
|
45
|
+
color: Color.defaultBlue,
|
|
46
|
+
fontWeight: '600',
|
|
47
|
+
fontSize: 17,
|
|
48
|
+
backgroundColor: Color.backgroundTransparent,
|
|
49
|
+
paddingVertical: 10,
|
|
50
|
+
paddingHorizontal: 10,
|
|
51
|
+
},
|
|
52
|
+
text_dark: {
|
|
53
|
+
color: '#4da6ff',
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
//# sourceMappingURL=Send.js.map
|
package/lib/Send.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Send.js","sourceRoot":"","sources":["../src/Send.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ViewStyle, StyleProp, TextStyle } from 'react-native';
|
|
3
|
+
import { MessageTextProps } from './MessageText';
|
|
4
|
+
import { IMessage } from './Models';
|
|
5
|
+
export interface SystemMessageProps<TMessage extends IMessage> {
|
|
6
|
+
currentMessage: TMessage;
|
|
7
|
+
containerStyle?: StyleProp<ViewStyle>;
|
|
8
|
+
messageContainerStyle?: StyleProp<ViewStyle>;
|
|
9
|
+
textStyle?: StyleProp<TextStyle>;
|
|
10
|
+
messageTextProps?: Partial<MessageTextProps<TMessage>>;
|
|
11
|
+
children?: React.ReactNode;
|
|
12
|
+
}
|
|
13
|
+
export declare function SystemMessage<TMessage extends IMessage>({ currentMessage, containerStyle, messageContainerStyle, textStyle, messageTextProps, children, }: SystemMessageProps<TMessage>): React.JSX.Element | null;
|
|
14
|
+
//# sourceMappingURL=SystemMessage.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SystemMessage.d.ts","sourceRoot":"","sources":["../src/SystemMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAGL,SAAS,EACT,SAAS,EACT,SAAS,EACV,MAAM,cAAc,CAAA;AAErB,OAAO,EAAe,gBAAgB,EAAE,MAAM,eAAe,CAAA;AAC7D,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAGnC,MAAM,WAAW,kBAAkB,CAAC,QAAQ,SAAS,QAAQ;IAC3D,cAAc,EAAE,QAAQ,CAAA;IACxB,cAAc,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IACrC,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAC5C,SAAS,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAA;IAChC,gBAAgB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAA;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,wBAAgB,aAAa,CAAC,QAAQ,SAAS,QAAQ,EAAG,EACxD,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,SAAS,EACT,gBAAgB,EAChB,QAAQ,GACT,EAAE,kBAAkB,CAAC,QAAQ,CAAC,4BAsB9B"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { StyleSheet, View, } from 'react-native';
|
|
3
|
+
import { Color } from './Color';
|
|
4
|
+
import { MessageText } from './MessageText';
|
|
5
|
+
import stylesCommon from './styles';
|
|
6
|
+
export function SystemMessage({ currentMessage, containerStyle, messageContainerStyle, textStyle, messageTextProps, children, }) {
|
|
7
|
+
if (currentMessage == null)
|
|
8
|
+
return null;
|
|
9
|
+
return (<View style={[stylesCommon.fill, styles.wrapper]}>
|
|
10
|
+
<View style={[styles.container, containerStyle]}>
|
|
11
|
+
{!!currentMessage.text && (<MessageText currentMessage={currentMessage} customTextStyle={[styles.text, textStyle]} position='left' containerStyle={{ left: [styles.messageContainer, messageContainerStyle] }} {...messageTextProps}/>)}
|
|
12
|
+
{children}
|
|
13
|
+
</View>
|
|
14
|
+
</View>);
|
|
15
|
+
}
|
|
16
|
+
const styles = StyleSheet.create({
|
|
17
|
+
wrapper: {
|
|
18
|
+
alignItems: 'center',
|
|
19
|
+
marginVertical: 5,
|
|
20
|
+
marginHorizontal: 10,
|
|
21
|
+
},
|
|
22
|
+
container: {
|
|
23
|
+
maxWidth: '70%',
|
|
24
|
+
borderRadius: 20,
|
|
25
|
+
borderWidth: 1,
|
|
26
|
+
borderColor: 'rgba(0,0,0,0.1)',
|
|
27
|
+
paddingHorizontal: 10,
|
|
28
|
+
paddingVertical: 10,
|
|
29
|
+
backgroundColor: 'rgba(0,0,0,0.05)',
|
|
30
|
+
},
|
|
31
|
+
messageContainer: {
|
|
32
|
+
marginVertical: 0,
|
|
33
|
+
marginHorizontal: 0,
|
|
34
|
+
},
|
|
35
|
+
text: {
|
|
36
|
+
backgroundColor: Color.backgroundTransparent,
|
|
37
|
+
fontSize: 12,
|
|
38
|
+
fontWeight: '300',
|
|
39
|
+
textAlign: 'center',
|
|
40
|
+
},
|
|
41
|
+
});
|
|
42
|
+
//# sourceMappingURL=SystemMessage.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SystemMessage.js","sourceRoot":"","sources":["../src/SystemMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EACL,UAAU,EACV,IAAI,GAIL,MAAM,cAAc,CAAA;AACrB,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,WAAW,EAAoB,MAAM,eAAe,CAAA;AAE7D,OAAO,YAAY,MAAM,UAAU,CAAA;AAWnC,MAAM,UAAU,aAAa,CAA6B,EACxD,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,SAAS,EACT,gBAAgB,EAChB,QAAQ,GACqB;IAC7B,IAAI,cAAc,IAAI,IAAI;QACxB,OAAO,IAAI,CAAA;IAEb,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,YAAY,CAAC,IAAI,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAC/C;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAC9C;QAAA,CACE,CAAC,CAAC,cAAc,CAAC,IAAI,IAAI,CACvB,CAAC,WAAW,CACV,cAAc,CAAC,CAAC,cAAc,CAAC,CAC/B,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAC1C,QAAQ,CAAC,MAAM,CACf,cAAc,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,CAAC,gBAAgB,EAAE,qBAAqB,CAAC,EAAE,CAAC,CAC3E,IAAI,gBAAgB,CAAC,EACrB,CAEN,CACA;QAAA,CAAC,QAAQ,CACX;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,OAAO,EAAE;QACP,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,CAAC;QACjB,gBAAgB,EAAE,EAAE;KACrB;IACD,SAAS,EAAE;QACT,QAAQ,EAAE,KAAK;QACf,YAAY,EAAE,EAAE;QAChB,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,iBAAiB;QAC9B,iBAAiB,EAAE,EAAE;QACrB,eAAe,EAAE,EAAE;QACnB,eAAe,EAAE,kBAAkB;KACpC;IACD,gBAAgB,EAAE;QAChB,cAAc,EAAE,CAAC;QACjB,gBAAgB,EAAE,CAAC;KACpB;IACD,IAAI,EAAE;QACJ,eAAe,EAAE,KAAK,CAAC,qBAAqB;QAC5C,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAA"}
|
package/lib/Time.d.ts
ADDED
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { ViewStyle, TextStyle } from 'react-native';
|
|
3
|
+
import { LeftRightStyle, IMessage } from './Models';
|
|
4
|
+
export interface TimeProps<TMessage extends IMessage> {
|
|
5
|
+
position?: 'left' | 'right';
|
|
6
|
+
currentMessage: TMessage;
|
|
7
|
+
containerStyle?: LeftRightStyle<ViewStyle>;
|
|
8
|
+
timeTextStyle?: LeftRightStyle<TextStyle>;
|
|
9
|
+
timeFormat?: string;
|
|
10
|
+
}
|
|
11
|
+
export declare const Time: <TMessage extends IMessage = IMessage>({ position, containerStyle, currentMessage, timeFormat, timeTextStyle, }: TimeProps<TMessage>) => React.JSX.Element | null;
|
|
12
|
+
//# sourceMappingURL=Time.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Time.d.ts","sourceRoot":"","sources":["../src/Time.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkB,MAAM,OAAO,CAAA;AACtC,OAAO,EAAoB,SAAS,EAAE,SAAS,EAAS,MAAM,cAAc,CAAA;AAK5E,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAA;AAgBnD,MAAM,WAAW,SAAS,CAAC,QAAQ,SAAS,QAAQ;IAClD,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAC3B,cAAc,EAAE,QAAQ,CAAA;IACxB,cAAc,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IAC1C,aAAa,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACzC,UAAU,CAAC,EAAE,MAAM,CAAA;CACpB;AAED,eAAO,MAAM,IAAI,GAAI,QAAQ,SAAS,QAAQ,GAAG,QAAQ,EAAE,0EAMxD,SAAS,CAAC,QAAQ,CAAC,6BAyBrB,CAAA"}
|
package/lib/Time.js
ADDED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import React, { useMemo } from 'react';
|
|
2
|
+
import { StyleSheet, View, Text } from 'react-native';
|
|
3
|
+
import dayjs from 'dayjs';
|
|
4
|
+
import { useChatContext } from './ChatContext';
|
|
5
|
+
import { Color } from './Color';
|
|
6
|
+
import { TIME_FORMAT } from './Constant';
|
|
7
|
+
import { getStyleWithPosition } from './styles';
|
|
8
|
+
const styles = StyleSheet.create({
|
|
9
|
+
text: {
|
|
10
|
+
fontSize: 10,
|
|
11
|
+
textAlign: 'right',
|
|
12
|
+
},
|
|
13
|
+
text_left: {
|
|
14
|
+
color: Color.timeTextColor,
|
|
15
|
+
},
|
|
16
|
+
text_right: {
|
|
17
|
+
color: Color.white,
|
|
18
|
+
},
|
|
19
|
+
});
|
|
20
|
+
export const Time = ({ position = 'left', containerStyle, currentMessage, timeFormat = TIME_FORMAT, timeTextStyle, }) => {
|
|
21
|
+
const { getLocale } = useChatContext();
|
|
22
|
+
const formattedTime = useMemo(() => {
|
|
23
|
+
if (!currentMessage)
|
|
24
|
+
return null;
|
|
25
|
+
return dayjs(currentMessage.createdAt).locale(getLocale()).format(timeFormat);
|
|
26
|
+
}, [currentMessage, getLocale, timeFormat]);
|
|
27
|
+
if (!currentMessage)
|
|
28
|
+
return null;
|
|
29
|
+
return (<View style={containerStyle?.[position]}>
|
|
30
|
+
<Text style={[
|
|
31
|
+
getStyleWithPosition(styles, 'text', position),
|
|
32
|
+
timeTextStyle?.[position],
|
|
33
|
+
]}>
|
|
34
|
+
{formattedTime}
|
|
35
|
+
</Text>
|
|
36
|
+
</View>);
|
|
37
|
+
};
|
|
38
|
+
//# sourceMappingURL=Time.js.map
|
package/lib/Time.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Time.js","sourceRoot":"","sources":["../src/Time.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACtC,OAAO,EAAE,UAAU,EAAE,IAAI,EAAyB,IAAI,EAAE,MAAM,cAAc,CAAA;AAC5E,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAExC,OAAO,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAE/C,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,IAAI,EAAE;QACJ,QAAQ,EAAE,EAAE;QACZ,SAAS,EAAE,OAAO;KACnB;IACD,SAAS,EAAE;QACT,KAAK,EAAE,KAAK,CAAC,aAAa;KAC3B;IACD,UAAU,EAAE;QACV,KAAK,EAAE,KAAK,CAAC,KAAK;KACnB;CACF,CAAC,CAAA;AAUF,MAAM,CAAC,MAAM,IAAI,GAAG,CAAuC,EACzD,QAAQ,GAAG,MAAM,EACjB,cAAc,EACd,cAAc,EACd,UAAU,GAAG,WAAW,EACxB,aAAa,GACO,EAAE,EAAE;IACxB,MAAM,EAAE,SAAS,EAAE,GAAG,cAAc,EAAE,CAAA;IAEtC,MAAM,aAAa,GAAG,OAAO,CAAC,GAAG,EAAE;QACjC,IAAI,CAAC,cAAc;YACjB,OAAO,IAAI,CAAA;QAEb,OAAO,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC,CAAA;IAC/E,CAAC,EAAE,CAAC,cAAc,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC,CAAA;IAE3C,IAAI,CAAC,cAAc;QACjB,OAAO,IAAI,CAAA;IAEb,OAAO,CACL,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,cAAc,EAAE,CAAC,QAAQ,CAAC,CAAC,CACtC;MAAA,CAAC,IAAI,CACH,KAAK,CAAC,CAAC;YACL,oBAAoB,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAAC;YAC9C,aAAa,EAAE,CAAC,QAAQ,CAAC;SAC1B,CAAC,CAEF;QAAA,CAAC,aAAa,CAChB;MAAA,EAAE,IAAI,CACR;IAAA,EAAE,IAAI,CAAC,CACR,CAAA;AACH,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TypingIndicator/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAaxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAA;AAE9C,cAAc,SAAS,CAAA;AA2EvB,eAAO,MAAM,eAAe,GAAI,qBAAqB,oBAAoB,6BA+DxE,CAAA"}
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import React, { useCallback, useEffect, useState, useMemo } from 'react';
|
|
2
|
+
import { View } from 'react-native';
|
|
3
|
+
import Animated, { runOnJS, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming, } from 'react-native-reanimated';
|
|
4
|
+
import stylesCommon from '../styles';
|
|
5
|
+
import styles from './styles';
|
|
6
|
+
export * from './types';
|
|
7
|
+
const DotsAnimation = () => {
|
|
8
|
+
const dot1 = useSharedValue(0);
|
|
9
|
+
const dot2 = useSharedValue(0);
|
|
10
|
+
const dot3 = useSharedValue(0);
|
|
11
|
+
const topY = useMemo(() => -5, []);
|
|
12
|
+
const bottomY = useMemo(() => 5, []);
|
|
13
|
+
const duration = useMemo(() => 500, []);
|
|
14
|
+
const dot1Style = useAnimatedStyle(() => ({
|
|
15
|
+
transform: [{
|
|
16
|
+
translateY: dot1.value,
|
|
17
|
+
}],
|
|
18
|
+
}), [dot1]);
|
|
19
|
+
const dot2Style = useAnimatedStyle(() => ({
|
|
20
|
+
transform: [{
|
|
21
|
+
translateY: dot2.value,
|
|
22
|
+
}],
|
|
23
|
+
}), [dot2]);
|
|
24
|
+
const dot3Style = useAnimatedStyle(() => ({
|
|
25
|
+
transform: [{
|
|
26
|
+
translateY: dot3.value,
|
|
27
|
+
}],
|
|
28
|
+
}), [dot3]);
|
|
29
|
+
useEffect(() => {
|
|
30
|
+
dot1.value = withRepeat(withSequence(withTiming(topY, { duration }), withTiming(bottomY, { duration })), 0, true);
|
|
31
|
+
}, [dot1, topY, bottomY, duration]);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
dot2.value = withDelay(100, withRepeat(withSequence(withTiming(topY, { duration }), withTiming(bottomY, { duration })), 0, true));
|
|
34
|
+
}, [dot2, topY, bottomY, duration]);
|
|
35
|
+
useEffect(() => {
|
|
36
|
+
dot3.value = withDelay(200, withRepeat(withSequence(withTiming(topY, { duration }), withTiming(bottomY, { duration })), 0, true));
|
|
37
|
+
}, [dot3, topY, bottomY, duration]);
|
|
38
|
+
return (<View style={[stylesCommon.fill, stylesCommon.centerItems, styles.dots]}>
|
|
39
|
+
<Animated.View style={[styles.dot, dot1Style]}/>
|
|
40
|
+
<Animated.View style={[styles.dot, dot2Style]}/>
|
|
41
|
+
<Animated.View style={[styles.dot, dot3Style]}/>
|
|
42
|
+
</View>);
|
|
43
|
+
};
|
|
44
|
+
export const TypingIndicator = ({ isTyping, style }) => {
|
|
45
|
+
const yCoords = useSharedValue(200);
|
|
46
|
+
const heightScale = useSharedValue(0);
|
|
47
|
+
const marginScale = useSharedValue(0);
|
|
48
|
+
const [isVisible, setIsVisible] = useState(isTyping);
|
|
49
|
+
const containerStyle = useAnimatedStyle(() => ({
|
|
50
|
+
transform: [
|
|
51
|
+
{
|
|
52
|
+
translateY: yCoords.value,
|
|
53
|
+
},
|
|
54
|
+
],
|
|
55
|
+
height: heightScale.value,
|
|
56
|
+
marginBottom: marginScale.value,
|
|
57
|
+
}), [yCoords, heightScale, marginScale]);
|
|
58
|
+
const slideIn = useCallback(() => {
|
|
59
|
+
const duration = 250;
|
|
60
|
+
yCoords.value = withTiming(0, { duration });
|
|
61
|
+
heightScale.value = withTiming(35, { duration });
|
|
62
|
+
marginScale.value = withTiming(8, { duration });
|
|
63
|
+
}, [yCoords, heightScale, marginScale]);
|
|
64
|
+
const slideOut = useCallback(() => {
|
|
65
|
+
const duration = 250;
|
|
66
|
+
yCoords.value = withTiming(200, { duration }, isFinished => {
|
|
67
|
+
if (isFinished)
|
|
68
|
+
runOnJS(setIsVisible)(false);
|
|
69
|
+
});
|
|
70
|
+
heightScale.value = withTiming(0, { duration });
|
|
71
|
+
marginScale.value = withTiming(0, { duration });
|
|
72
|
+
}, [yCoords, heightScale, marginScale]);
|
|
73
|
+
useEffect(() => {
|
|
74
|
+
if (isVisible)
|
|
75
|
+
if (isTyping)
|
|
76
|
+
slideIn();
|
|
77
|
+
else
|
|
78
|
+
slideOut();
|
|
79
|
+
}, [isVisible, isTyping, slideIn, slideOut]);
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
if (isTyping)
|
|
82
|
+
setIsVisible(true);
|
|
83
|
+
}, [isTyping]);
|
|
84
|
+
if (!isVisible)
|
|
85
|
+
return null;
|
|
86
|
+
return (<Animated.View style={[
|
|
87
|
+
styles.container,
|
|
88
|
+
containerStyle,
|
|
89
|
+
style,
|
|
90
|
+
]}>
|
|
91
|
+
<DotsAnimation />
|
|
92
|
+
</Animated.View>);
|
|
93
|
+
};
|
|
94
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/TypingIndicator/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
declare const _default: {
|
|
2
|
+
container: {
|
|
3
|
+
marginLeft: number;
|
|
4
|
+
width: number;
|
|
5
|
+
borderRadius: number;
|
|
6
|
+
backgroundColor: string;
|
|
7
|
+
};
|
|
8
|
+
dots: {
|
|
9
|
+
flexDirection: "row";
|
|
10
|
+
};
|
|
11
|
+
dot: {
|
|
12
|
+
marginLeft: number;
|
|
13
|
+
marginRight: number;
|
|
14
|
+
borderRadius: number;
|
|
15
|
+
width: number;
|
|
16
|
+
height: number;
|
|
17
|
+
backgroundColor: string;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
export default _default;
|
|
21
|
+
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/TypingIndicator/styles.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AAGA,wBAkBE"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { StyleSheet } from 'react-native';
|
|
2
|
+
import { Color } from '../Color';
|
|
3
|
+
export default StyleSheet.create({
|
|
4
|
+
container: {
|
|
5
|
+
marginLeft: 8,
|
|
6
|
+
width: 45,
|
|
7
|
+
borderRadius: 15,
|
|
8
|
+
backgroundColor: Color.leftBubbleBackground,
|
|
9
|
+
},
|
|
10
|
+
dots: {
|
|
11
|
+
flexDirection: 'row',
|
|
12
|
+
},
|
|
13
|
+
dot: {
|
|
14
|
+
marginLeft: 2,
|
|
15
|
+
marginRight: 2,
|
|
16
|
+
borderRadius: 4,
|
|
17
|
+
width: 8,
|
|
18
|
+
height: 8,
|
|
19
|
+
backgroundColor: 'rgba(0, 0, 0, 0.38)',
|
|
20
|
+
},
|
|
21
|
+
});
|
|
22
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/TypingIndicator/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,eAAe,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,UAAU,EAAE,CAAC;QACb,KAAK,EAAE,EAAE;QACT,YAAY,EAAE,EAAE;QAChB,eAAe,EAAE,KAAK,CAAC,oBAAoB;KAC5C;IACD,IAAI,EAAE;QACJ,aAAa,EAAE,KAAK;KACrB;IACD,GAAG,EAAE;QACH,UAAU,EAAE,CAAC;QACb,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;QACf,KAAK,EAAE,CAAC;QACR,MAAM,EAAE,CAAC;QACT,eAAe,EAAE,qBAAqB;KACvC;CACF,CAAC,CAAA"}
|