@livelike/react-native/lib/commonjs/components/LLChatMessageComposer/LLChatMessageComposer.js

LiveLike React Native package

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LLChatMessageComposer = LLChatMessageComposer;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _hooks = require("../../hooks");
var _LLComposerSendButton = require("./LLComposerSendButton");
var _LLGifPicker = require("../LLGifPicker");
var _LLStickerPicker = require("../LLStickerPicker");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function LLChatMessageComposer(_ref) {
  let {
    roomId,
    styles: stylesProp,
    TextInputComponent = _reactNative.TextInput,
    GifPickerComponentStyles,
    StickerPickerComponentStyles,
    SendButtonComponentStyles,
    StickerPickerComponent = _LLStickerPicker.LLStickerPicker,
    GifPickerComponent = _LLGifPicker.LLGifPicker,
    SendButtonComponent = _LLComposerSendButton.LLComposerSendButton
  } = _ref;
  const [inputValue, setInputValue] = (0, _react.useState)('');
  const [isGifPickerVisible, setIsGifPickerVisible] = (0, _react.useState)(false);
  const [isStickerPickerVisible, setIsStickerPickerVisible] = (0, _react.useState)(false);
  const [isSendingMessage, setIsSendingMessage] = (0, _react.useState)(false);
  const {
    theme,
    themeAssets
  } = (0, _hooks.useTheme)();
  const messageComposerStyles = (0, _hooks.useStyles)({
    componentStylesFn: getMessageComposerStyles,
    stylesProp
  });
  const {
    sendChatMessage
  } = (0, _hooks.useChatMessageActions)({
    roomId
  });
  const {
    userAvatarUrl
  } = (0, _hooks.useChatRoomState)({
    roomId
  });
  const {
    trackEvent
  } = (0, _hooks.useAnalytics)();
  const composerInputStyles = (0, _hooks.useCustomFontStyle)({
    style: messageComposerStyles.composerInput
  });
  (0, _hooks.useTrackKeyboardEffect)();
  const onSendMessage = (0, _react.useCallback)(() => {
    const textValue = inputValue.trim();
    if (!textValue) {
      return;
    }
    setIsSendingMessage(true);
    sendChatMessage({
      roomId,
      message: textValue,
      sender_image_url: userAvatarUrl
    }).then(messageRes => {
      setInputValue('');
    }).finally(() => {
      setIsSendingMessage(false);
    });
  }, [roomId, inputValue, sendChatMessage, userAvatarUrl]);
  const onSelectSticker = (0, _react.useCallback)(stickerShortcode => {
    sendChatMessage({
      roomId,
      message: `:${stickerShortcode}:`,
      sender_image_url: userAvatarUrl
    }).then(imageMessageRes => {
      setIsStickerPickerVisible(false);
    });
  }, [roomId, sendChatMessage, userAvatarUrl]);
  const onSelectGif = (0, _react.useCallback)(gif => {
    sendChatMessage({
      roomId,
      sender_image_url: userAvatarUrl,
      image_url: gif.images.downsized.url,
      image_width: gif.images.downsized.width,
      image_height: gif.images.downsized.height
    }).then(imageMessageRes => {
      _reactNative.Keyboard.dismiss();
      setIsGifPickerVisible(false);
    });
  }, [sendChatMessage, roomId, userAvatarUrl]);
  const onStickerPanelOpen = (0, _react.useCallback)(() => {
    trackEvent('Sticker Panel Opened', {
      roomId
    });
  }, [roomId]);
  const onStickerPanelClose = (0, _react.useCallback)(() => {
    trackEvent('Sticker Panel Closed', {
      roomId
    });
  }, [roomId]);
  const onGifPanelOpen = (0, _react.useCallback)(() => {
    trackEvent('GIF Panel Opened', {
      roomId
    });
  }, [roomId]);
  const onGifPanelClose = (0, _react.useCallback)(() => {
    trackEvent('GIF Panel Closed', {
      roomId
    });
  }, [roomId]);
  const toggleStickerPicker = (0, _react.useCallback)(() => {
    if (!isStickerPickerVisible) {
      _reactNative.Keyboard.dismiss();
      setIsStickerPickerVisible(true);
    } else {
      setIsStickerPickerVisible(false);
    }
  }, [isStickerPickerVisible]);
  const toggleGifPicker = (0, _react.useCallback)(() => {
    if (!isGifPickerVisible) {
      _reactNative.Keyboard.dismiss();
      setIsGifPickerVisible(true);
    } else {
      setIsGifPickerVisible(false);
    }
  }, [isGifPickerVisible]);
  const onInputPressIn = (0, _react.useCallback)(() => {
    if (isStickerPickerVisible) {
      setIsStickerPickerVisible(false);
    } else if (isGifPickerVisible) {
      setIsGifPickerVisible(false);
    }
  }, [isStickerPickerVisible, isGifPickerVisible]);
  if (isGifPickerVisible) {
    return /*#__PURE__*/_react.default.createElement(GifPickerComponent, {
      visible: isGifPickerVisible,
      onPanelOpen: onGifPanelOpen,
      onPanelClose: onGifPanelClose,
      onSelectGif: onSelectGif,
      closeGifPicker: toggleGifPicker,
      styles: GifPickerComponentStyles
    });
  }
  if (isStickerPickerVisible) {
    return /*#__PURE__*/_react.default.createElement(StickerPickerComponent, {
      visible: isStickerPickerVisible,
      onPanelOpen: onStickerPanelOpen,
      onPanelClose: onStickerPanelClose,
      onSelectSticker: onSelectSticker,
      closeStickerPicker: toggleStickerPicker,
      styles: StickerPickerComponentStyles
    });
  }
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: messageComposerStyles.composerContainer
  }, /*#__PURE__*/_react.default.createElement(TextInputComponent, {
    style: composerInputStyles,
    onChangeText: setInputValue,
    onPressIn: onInputPressIn,
    value: inputValue,
    editable: !isSendingMessage,
    placeholder: "Start typing",
    placeholderTextColor: theme.secondaryText
  }), inputValue.length === 0 ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
    onPress: toggleGifPicker,
    accessibilityLabel: "Gifs",
    disabled: isSendingMessage
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
    style: messageComposerStyles.composerIcon,
    source: themeAssets.gif
  })), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
    onPress: toggleStickerPicker,
    accessibilityLabel: "Stickers",
    disabled: isSendingMessage
  }, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
    style: messageComposerStyles.composerIcon,
    source: themeAssets.sticker
  }))) : /*#__PURE__*/_react.default.createElement(SendButtonComponent, {
    onPress: onSendMessage,
    disabled: isSendingMessage || inputValue.length === 0,
    isSendingMessage: isSendingMessage,
    styles: SendButtonComponentStyles
  }));
}
const getMessageComposerStyles = _ref2 => {
  let {
    theme
  } = _ref2;
  return _reactNative.StyleSheet.create({
    composerContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      padding: 10,
      backgroundColor: theme.secondaryBackground
    },
    composerInput: {
      flex: 1,
      height: 45,
      borderRadius: 10,
      paddingHorizontal: 12,
      marginRight: 10,
      color: theme.text,
      backgroundColor: theme.background
    },
    composerIcon: {
      height: 24,
      width: 24,
      marginHorizontal: 10
    }
  });
};
//# sourceMappingURL=LLChatMessageComposer.js.map