@100mslive/react-native-room-kit/lib/module/components/HLSManageChatTextInput.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import * as React from 'react';
import { StyleSheet, View } from 'react-native';
import { useSelector } from 'react-redux';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useHLSViewsConstraints, useHMSChatState, useHMSRoomStyleSheet, useIsAllowedToSendMessage, useIsLocalPeerBlockedFromChat } from '../hooks-util';
import { ChatPaused } from './Chat/ChatPaused';
import { PeerBlockedFromChat } from './Chat/PeerBlockedFromChat';
import { ChatFilterBottomSheetOpener } from './Chat/ChatFilterBottomSheetOpener';
import { HMSSendMessageInput } from './HMSSendMessageInput';
import { ChatFilterBottomSheet } from './Chat/ChatFilterBottomSheet';
import { HMSKeyboardAvoidingView } from './HMSKeyboardAvoidingView';
export const HLSManageChatTextInput = () => {
  const {
    chatState
  } = useHMSChatState();
  const isAllowedToSendMessage = useIsAllowedToSendMessage();
  const isChatRecipientSelected = useSelector(state => state.chatWindow.sendTo !== null);
  const isLocalPeerBlockedFromChat = useIsLocalPeerBlockedFromChat();
  const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
    input: {
      backgroundColor: theme.palette.surface_default,
      borderColor: theme.palette.surface_default
    }
  }));
  const {
    chatWrapperConstraints
  } = useHLSViewsConstraints();
  const {
    bottom: bottomInset
  } = useSafeAreaInsets();
  const keyboardAvoidingStyles = React.useMemo(() => ({
    active: {
      width: chatWrapperConstraints.width - 32
    },
    inactive: {
      width: '100%'
    }
  }), [chatWrapperConstraints]);
  if (isLocalPeerBlockedFromChat) {
    return /*#__PURE__*/React.createElement(PeerBlockedFromChat, {
      style: styles.shrink
    });
  }
  if (chatState.enabled) {
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
      style: styles.grow
    }, /*#__PURE__*/React.createElement(ChatFilterBottomSheetOpener, {
      useFilterModal: true
    }), isAllowedToSendMessage && isChatRecipientSelected ? /*#__PURE__*/React.createElement(HMSKeyboardAvoidingView, {
      bottomOffset: bottomInset,
      styleWhenActive: keyboardAvoidingStyles.active,
      styleWhenInactive: keyboardAvoidingStyles.inactive
    }, /*#__PURE__*/React.createElement(HMSSendMessageInput, {
      containerStyle: [styles.input, hmsRoomStyles.input]
    })) : null), /*#__PURE__*/React.createElement(ChatFilterBottomSheet, null));
  }
  if (isAllowedToSendMessage) {
    return /*#__PURE__*/React.createElement(ChatPaused, {
      style: styles.shrink
    });
  }
  return /*#__PURE__*/React.createElement(View, {
    style: styles.grow
  });
};
const styles = StyleSheet.create({
  input: {
    flex: 0,
    height: 40,
    marginHorizontal: 0,
    marginTop: 0,
    marginBottom: 0
  },
  shrink: {
    flexShrink: 1
  },
  grow: {
    flexGrow: 1
  }
});
//# sourceMappingURL=HLSManageChatTextInput.js.map