@sendbird/uikit-react-native/lib/module/components/ChannelInput/MessageToReplyPreview.js

Sendbird UIKit for React Native: A feature-rich and customizable chat UI kit with messaging, channel management, and user authentication.

import React from 'react';
import { TouchableOpacity, View } from 'react-native';
import { Icon, ImageWithPlaceholder, Text, VideoThumbnail, createStyleSheet, useUIKitTheme } from '@sendbird/uikit-react-native-foundation';
import { getFileIconFromMessageType, getMessageType, getThumbnailUriFromFileMessage } from '@sendbird/uikit-utils';
import { useLocalization, usePlatformService } from '../../hooks/useContext';
export const MessageToReplyPreview = ({
  messageToReply,
  setMessageToReply
}) => {
  const {
    colors,
    select,
    palette
  } = useUIKitTheme();
  const {
    mediaService
  } = usePlatformService();
  const {
    STRINGS
  } = useLocalization();
  const getFileIconAsImage = url => {
    return /*#__PURE__*/React.createElement(ImageWithPlaceholder, {
      source: {
        uri: url
      },
      style: styles.filePreview
    });
  };
  const getFileIconAsVideoThumbnail = url => {
    return /*#__PURE__*/React.createElement(VideoThumbnail, {
      style: styles.filePreview,
      iconSize: 0,
      source: url,
      fetchThumbnailFromVideoSource: uri => mediaService.getVideoThumbnail({
        url: uri,
        timeMills: 1000
      })
    });
  };
  const getFileIconAsSymbol = icon => {
    return /*#__PURE__*/React.createElement(Icon, {
      icon: icon,
      size: 20,
      color: colors.onBackground02,
      containerStyle: [styles.filePreview, {
        backgroundColor: select({
          light: palette.background100,
          dark: palette.background500
        })
      }]
    });
  };
  const getFileIcon = messageToReply => {
    if (messageToReply !== null && messageToReply !== void 0 && messageToReply.isFileMessage()) {
      const messageType = getMessageType(messageToReply);
      switch (messageType) {
        case 'file.image':
          return getFileIconAsImage(getThumbnailUriFromFileMessage(messageToReply));
        case 'file.video':
          return getFileIconAsVideoThumbnail(getThumbnailUriFromFileMessage(messageToReply));
        case 'file.voice':
          return null;
        default:
          return getFileIconAsSymbol(getFileIconFromMessageType(messageType));
      }
    }
    return null;
  };
  if (!messageToReply) return null;
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.messageToReplyContainer, {
      borderColor: colors.onBackground04
    }]
  }, /*#__PURE__*/React.createElement(View, {
    style: styles.infoContainer
  }, getFileIcon(messageToReply), /*#__PURE__*/React.createElement(View, {
    style: styles.infoText
  }, /*#__PURE__*/React.createElement(Text, {
    caption1: true,
    numberOfLines: 1
  }, STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)), /*#__PURE__*/React.createElement(Text, {
    caption2: true,
    numberOfLines: 1,
    color: colors.onBackground03
  }, STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)))), /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: () => setMessageToReply === null || setMessageToReply === void 0 ? void 0 : setMessageToReply(undefined),
    style: {
      marginStart: 16
    }
  }, /*#__PURE__*/React.createElement(Icon, {
    icon: 'close',
    size: 24,
    color: colors.onBackground01
  })));
};
const styles = createStyleSheet({
  messageToReplyContainer: {
    flexDirection: 'row',
    paddingStart: 18,
    paddingEnd: 16,
    paddingVertical: 12,
    alignItems: 'center',
    borderTopWidth: 1
  },
  infoContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center'
  },
  infoText: {
    flex: 1,
    height: 32,
    justifyContent: 'space-between',
    alignItems: 'flex-start'
  },
  filePreview: {
    width: 32,
    height: 32,
    borderRadius: 8,
    marginEnd: 10,
    overflow: 'hidden'
  }
});
//# sourceMappingURL=MessageToReplyPreview.js.map