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

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

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MessageToReplyPreview = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _uikitReactNativeFoundation = require("@sendbird/uikit-react-native-foundation");
var _uikitUtils = require("@sendbird/uikit-utils");
var _useContext = require("../../hooks/useContext");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const MessageToReplyPreview = ({
  messageToReply,
  setMessageToReply
}) => {
  const {
    colors,
    select,
    palette
  } = (0, _uikitReactNativeFoundation.useUIKitTheme)();
  const {
    mediaService
  } = (0, _useContext.usePlatformService)();
  const {
    STRINGS
  } = (0, _useContext.useLocalization)();
  const getFileIconAsImage = url => {
    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.ImageWithPlaceholder, {
      source: {
        uri: url
      },
      style: styles.filePreview
    });
  };
  const getFileIconAsVideoThumbnail = url => {
    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.VideoThumbnail, {
      style: styles.filePreview,
      iconSize: 0,
      source: url,
      fetchThumbnailFromVideoSource: uri => mediaService.getVideoThumbnail({
        url: uri,
        timeMills: 1000
      })
    });
  };
  const getFileIconAsSymbol = icon => {
    return /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.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 = (0, _uikitUtils.getMessageType)(messageToReply);
      switch (messageType) {
        case 'file.image':
          return getFileIconAsImage((0, _uikitUtils.getThumbnailUriFromFileMessage)(messageToReply));
        case 'file.video':
          return getFileIconAsVideoThumbnail((0, _uikitUtils.getThumbnailUriFromFileMessage)(messageToReply));
        case 'file.voice':
          return null;
        default:
          return getFileIconAsSymbol((0, _uikitUtils.getFileIconFromMessageType)(messageType));
      }
    }
    return null;
  };
  if (!messageToReply) return null;
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: [styles.messageToReplyContainer, {
      borderColor: colors.onBackground04
    }]
  }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.infoContainer
  }, getFileIcon(messageToReply), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.infoText
  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
    caption1: true,
    numberOfLines: 1
  }, STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_TITLE(messageToReply.sender)), /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Text, {
    caption2: true,
    numberOfLines: 1,
    color: colors.onBackground03
  }, STRINGS.LABELS.CHANNEL_INPUT_REPLY_PREVIEW_BODY(messageToReply)))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
    onPress: () => setMessageToReply === null || setMessageToReply === void 0 ? void 0 : setMessageToReply(undefined),
    style: {
      marginStart: 16
    }
  }, /*#__PURE__*/_react.default.createElement(_uikitReactNativeFoundation.Icon, {
    icon: 'close',
    size: 24,
    color: colors.onBackground01
  })));
};
exports.MessageToReplyPreview = MessageToReplyPreview;
const styles = (0, _uikitReactNativeFoundation.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