stream-chat-react-native-core 9.0.0-beta.1 → 9.0.0-beta.11

package/lib/typescript/components/MessageInput/MessageInput.d.ts

@@ -1,33 +0,0 @@
-import React from 'react';
-import { ChatContextValue } from '../../contexts';
-import { ChannelContextValue } from '../../contexts/channelContext/ChannelContext';
-import { MessageComposerAPIContextValue } from '../../contexts/messageComposerContext/MessageComposerAPIContext';
-import { MessageInputContextValue } from '../../contexts/messageInputContext/MessageInputContext';
-import { MessagesContextValue } from '../../contexts/messagesContext/MessagesContext';
-import { TranslationContextValue } from '../../contexts/translationContext/TranslationContext';
-import { AudioRecorderManagerState } from '../../state-store/audio-recorder-manager';
-import { type TextInputOverrideComponent } from '../AutoCompleteInput/AutoCompleteInput';
-type MessageInputPropsWithContext = Pick<ChatContextValue, 'isOnline'> & Pick<ChannelContextValue, 'channel' | 'members' | 'watchers'> & Pick<MessageInputContextValue, 'audioRecorderManager' | 'additionalTextInputProps' | 'audioRecordingEnabled' | 'asyncMessagesLockDistance' | 'asyncMessagesMinimumPressDuration' | 'asyncMessagesSlideToCancelDistance' | 'asyncMessagesMultiSendEnabled' | 'AttachmentUploadPreviewList' | 'AudioRecorder' | 'AudioRecordingInProgress' | 'AudioRecordingLockIndicator' | 'AudioRecordingPreview' | 'AutoCompleteSuggestionList' | 'closeAttachmentPicker' | 'compressImageQuality' | 'Input' | 'InputView' | 'inputBoxRef' | 'InputButtons' | 'MessageComposerLeadingView' | 'MessageComposerTrailingView' | 'messageInputFloating' | 'messageInputHeightStore' | 'MessageInputHeaderView' | 'MessageInputTrailingView' | 'SendButton' | 'StartAudioRecordingButton' | 'uploadNewFile' | 'openPollCreationDialog' | 'closePollCreationDialog' | 'showPollCreationDialog' | 'sendMessage' | 'CreatePollContent' | 'createPollOptionGap' | 'StopMessageStreamingButton'> & Pick<MessagesContextValue, 'Reply'> & Pick<TranslationContextValue, 't'> & Pick<MessageComposerAPIContextValue, 'clearEditingState'> & Pick<AudioRecorderManagerState, 'micLocked'> & {
-    editing: boolean;
-    isKeyboardVisible: boolean;
-    threadList?: boolean;
-    TextInputComponent?: TextInputOverrideComponent;
-    isRecordingStateIdle?: boolean;
-    recordingStatus?: string;
-};
-export type MessageInputProps = Partial<MessageInputPropsWithContext>;
-/**
- * UI Component for message input
- * It's a consumer of
- * [Channel Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/channel-context/),
- * [Chat Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/chat-context/),
- * [MessageInput Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/message-input-context/),
- * [Suggestions Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/suggestions-context/), and
- * [Translation Context](https://getstream.io/chat/docs/sdk/reactnative/contexts/translation-context/)
- */
-export declare const MessageInput: {
-    (props: MessageInputProps): React.JSX.Element;
-    displayName: string;
-};
-export {};
-//# sourceMappingURL=MessageInput.d.ts.map

package/lib/typescript/components/MessageInput/MessageInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"MessageInput.d.ts","sourceRoot":"","sources":["../../../../src/components/MessageInput/MessageInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAoBlD,OAAO,EACL,gBAAgB,EAIjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EACL,mBAAmB,EAEpB,MAAM,8CAA8C,CAAC;AACtD,OAAO,EACL,8BAA8B,EAE/B,MAAM,iEAAiE,CAAC;AAEzE,OAAO,EACL,wBAAwB,EAEzB,MAAM,wDAAwD,CAAC;AAChE,OAAO,EACL,oBAAoB,EAErB,MAAM,gDAAgD,CAAC;AAGxD,OAAO,EACL,uBAAuB,EAExB,MAAM,sDAAsD,CAAC;AAK9D,OAAO,EAAE,yBAAyB,EAAE,MAAM,0CAA0C,CAAC;AAGrF,OAAO,EAAE,KAAK,0BAA0B,EAAE,MAAM,wCAAwC,CAAC;AA+FzF,KAAK,4BAA4B,GAAG,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,GACpE,IAAI,CAAC,mBAAmB,EAAE,SAAS,GAAG,SAAS,GAAG,UAAU,CAAC,GAC7D,IAAI,CACF,wBAAwB,EACtB,sBAAsB,GACtB,0BAA0B,GAC1B,uBAAuB,GACvB,2BAA2B,GAC3B,mCAAmC,GACnC,oCAAoC,GACpC,+BAA+B,GAC/B,6BAA6B,GAC7B,eAAe,GACf,0BAA0B,GAC1B,6BAA6B,GAC7B,uBAAuB,GACvB,4BAA4B,GAC5B,uBAAuB,GACvB,sBAAsB,GACtB,OAAO,GACP,WAAW,GACX,aAAa,GACb,cAAc,GACd,4BAA4B,GAC5B,6BAA6B,GAC7B,sBAAsB,GACtB,yBAAyB,GACzB,wBAAwB,GACxB,0BAA0B,GAC1B,YAAY,GACZ,2BAA2B,GAC3B,eAAe,GACf,wBAAwB,GACxB,yBAAyB,GACzB,wBAAwB,GACxB,aAAa,GACb,mBAAmB,GACnB,qBAAqB,GACrB,4BAA4B,CAC/B,GACD,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC,GACnC,IAAI,CAAC,uBAAuB,EAAE,GAAG,CAAC,GAClC,IAAI,CAAC,8BAA8B,EAAE,mBAAmB,CAAC,GACzD,IAAI,CAAC,yBAAyB,EAAE,WAAW,CAAC,GAAG;IAC7C,OAAO,EAAE,OAAO,CAAC;IACjB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,kBAAkB,CAAC,EAAE,0BAA0B,CAAC;IAChD,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAubJ,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC,4BAA4B,CAAC,CAAC;AAEtE;;;;;;;;GAQG;AACH,eAAO,MAAM,YAAY;YAAW,iBAAiB;;CAyHpD,CAAC"}

package/src/components/Message/MessageSimple/MessageBubble.tsx

@@ -1,264 +0,0 @@
-import React, { SetStateAction, useMemo, useState } from 'react';
-import { StyleSheet, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-
-import Animated, {
-  interpolate,
-  runOnJS,
-  useAnimatedStyle,
-  useSharedValue,
-  withSpring,
-} from 'react-native-reanimated';
-
-import { MessageContentProps } from './MessageContent';
-import { MessageSimplePropsWithContext } from './MessageSimple';
-
-import { MessagesContextValue, useTheme } from '../../../contexts';
-
-import { useStableCallback } from '../../../hooks';
-import { NativeHandlers } from '../../../native';
-import { MessageStatusTypes } from '../../../utils/utils';
-
-export type MessageBubbleProps = Pick<
-  MessagesContextValue,
-  | 'reactionListPosition'
-  | 'MessageContent'
-  | 'ReactionListTop'
-  | 'MessageError'
-  | 'reactionListType'
-> &
-  Pick<
-    MessageContentProps,
-    | 'isVeryLastMessage'
-    | 'backgroundColor'
-    | 'messageGroupedSingleOrBottom'
-    | 'noBorder'
-    | 'message'
-    | 'setMessageContentWidth'
-  > &
-  Pick<MessageSimplePropsWithContext, 'alignment'> & {
-    messageContentWidth: number;
-  };
-
-export const MessageBubble = React.memo(
-  ({
-    alignment,
-    reactionListPosition,
-    reactionListType,
-    setMessageContentWidth,
-    MessageContent,
-    ReactionListTop,
-    backgroundColor,
-    isVeryLastMessage,
-    messageGroupedSingleOrBottom,
-    noBorder,
-    MessageError,
-    message,
-  }: MessageBubbleProps) => {
-    const styles = useStyles({ alignment });
-    const isMessageErrorType =
-      message?.type === 'error' || message?.status === MessageStatusTypes.FAILED;
-
-    return (
-      <View style={styles.wrapper}>
-        {reactionListPosition === 'top' && ReactionListTop ? (
-          <View style={styles.reactionListTopContainer}>
-            <ReactionListTop type={reactionListType} />
-          </View>
-        ) : null}
-        <View style={styles.contentContainer}>
-          <MessageContent
-            backgroundColor={backgroundColor}
-            isVeryLastMessage={isVeryLastMessage}
-            messageGroupedSingleOrBottom={messageGroupedSingleOrBottom}
-            noBorder={noBorder}
-            setMessageContentWidth={setMessageContentWidth}
-          />
-
-          {isMessageErrorType ? (
-            <View style={styles.errorContainer}>
-              <MessageError />
-            </View>
-          ) : null}
-        </View>
-      </View>
-    );
-  },
-);
-
-const AnimatedWrapper = Animated.createAnimatedComponent(View);
-
-export const SwipableMessageBubble = React.memo(
-  (
-    props: MessageBubbleProps &
-      Pick<MessagesContextValue, 'MessageSwipeContent'> &
-      Pick<
-        MessageSimplePropsWithContext,
-        'shouldRenderSwipeableWrapper' | 'messageSwipeToReplyHitSlop'
-      > & { onSwipe: () => void },
-  ) => {
-    const { MessageSwipeContent, messageSwipeToReplyHitSlop, onSwipe, ...messageBubbleProps } =
-      props;
-
-    const styles = useStyles({ alignment: props.alignment });
-
-    const translateX = useSharedValue(0);
-    const touchStart = useSharedValue<{ x: number; y: number } | null>(null);
-    const isSwiping = useSharedValue<boolean>(false);
-    const [shouldRenderAnimatedWrapper, setShouldRenderAnimatedWrapper] = useState<boolean>(false);
-
-    const SWIPABLE_THRESHOLD = 25;
-    const MINIMUM_DISTANCE = 8;
-
-    const triggerHaptic = NativeHandlers.triggerHaptic;
-
-    const setMessageContentWidth = useStableCallback((valueOrCallback: SetStateAction<number>) => {
-      if (typeof valueOrCallback === 'number') {
-        props.setMessageContentWidth(Math.ceil(valueOrCallback));
-        return;
-      }
-      props.setMessageContentWidth(valueOrCallback);
-    });
-
-    const swipeGesture = useMemo(
-      () =>
-        Gesture.Pan()
-          .hitSlop(messageSwipeToReplyHitSlop)
-          .onBegin((event) => {
-            touchStart.value = { x: event.x, y: event.y };
-          })
-          .onTouchesMove((event, state) => {
-            if (!touchStart.value || !event.changedTouches.length) {
-              state.fail();
-              return;
-            }
-
-            const xDiff = Math.abs(event.changedTouches[0].x - touchStart.value.x);
-            const yDiff = Math.abs(event.changedTouches[0].y - touchStart.value.y);
-            const isHorizontalPanning = xDiff > yDiff;
-            const hasMinimumDistance = xDiff > MINIMUM_DISTANCE || yDiff > MINIMUM_DISTANCE;
-
-            // Only activate if there's significant horizontal movement
-            if (isHorizontalPanning && hasMinimumDistance) {
-              state.activate();
-              if (!isSwiping.value) {
-                runOnJS(setShouldRenderAnimatedWrapper)(true);
-              }
-              isSwiping.value = true;
-            } else if (hasMinimumDistance) {
-              // If there's significant movement but not horizontal, fail the gesture
-              state.fail();
-            }
-          })
-          .onStart(() => {
-            translateX.value = 0;
-          })
-          .onChange(({ translationX }) => {
-            if (translationX > 0) {
-              translateX.value = translationX;
-            }
-          })
-          .onEnd(() => {
-            if (translateX.value >= SWIPABLE_THRESHOLD) {
-              runOnJS(onSwipe)();
-              if (triggerHaptic) {
-                runOnJS(triggerHaptic)('impactMedium');
-              }
-            }
-            isSwiping.value = false;
-            translateX.value = withSpring(
-              0,
-              {
-                dampingRatio: 1,
-                duration: 500,
-                overshootClamping: true,
-                stiffness: 1,
-              },
-              () => {
-                runOnJS(setShouldRenderAnimatedWrapper)(false);
-              },
-            );
-          }),
-      [messageSwipeToReplyHitSlop, touchStart, isSwiping, translateX, onSwipe, triggerHaptic],
-    );
-
-    const swipeContentAnimatedStyle = useAnimatedStyle(
-      () => ({
-        opacity: interpolate(translateX.value, [0, SWIPABLE_THRESHOLD], [0, 1]),
-        width: translateX.value,
-      }),
-      [],
-    );
-
-    return (
-      <GestureDetector gesture={swipeGesture}>
-        <View
-          hitSlop={messageSwipeToReplyHitSlop}
-          style={[
-            styles.contentWrapper,
-            props.messageContentWidth > 0 && shouldRenderAnimatedWrapper
-              ? { width: props.messageContentWidth }
-              : {},
-          ]}
-        >
-          {shouldRenderAnimatedWrapper ? (
-            <AnimatedWrapper style={[styles.swipeContentContainer, swipeContentAnimatedStyle]}>
-              {MessageSwipeContent ? <MessageSwipeContent /> : null}
-            </AnimatedWrapper>
-          ) : null}
-          <MessageBubble {...messageBubbleProps} setMessageContentWidth={setMessageContentWidth} />
-        </View>
-      </GestureDetector>
-    );
-  },
-);
-
-const useStyles = ({ alignment }: { alignment?: 'left' | 'right' }) => {
-  const {
-    theme: {
-      messageSimple: {
-        bubble: { contentContainer, errorContainer, reactionListTopContainer, wrapper },
-        contentWrapper,
-        swipeContentContainer,
-      },
-    },
-  } = useTheme();
-  return useMemo(() => {
-    return StyleSheet.create({
-      contentWrapper: {
-        alignItems: 'center',
-        flexDirection: 'row',
-        zIndex: 1, // To hide the stick inside the message content
-        ...contentWrapper,
-      },
-      contentContainer: {
-        alignSelf: alignment === 'left' ? 'flex-start' : 'flex-end',
-        ...contentContainer,
-      },
-      swipeContentContainer: {
-        ...swipeContentContainer,
-      },
-      errorContainer: {
-        position: 'absolute',
-        top: 8,
-        right: -12,
-        ...errorContainer,
-      },
-      reactionListTopContainer: {
-        alignSelf: alignment === 'left' ? 'flex-end' : 'flex-start',
-        ...reactionListTopContainer,
-      },
-      wrapper: {
-        ...wrapper,
-      },
-    });
-  }, [
-    alignment,
-    contentContainer,
-    contentWrapper,
-    errorContainer,
-    reactionListTopContainer,
-    swipeContentContainer,
-    wrapper,
-  ]);
-};