@100mslive/react-native-room-kit/lib/module/components/Chat/MessageOptionsBottomSheetView.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 { Pressable, StyleSheet, View } from 'react-native';
import { useDispatch, useSelector } from 'react-redux';
import Animated, { SlideInDown, SlideOutDown } from 'react-native-reanimated';
import { hexToRgbA } from '../../utils/theme';
import { useHMSRoomStyleSheet } from '../../hooks-util';
import { setSelectedMessageForAction } from '../../redux/actions';
import { MessageOptionsView } from './MessageOptionsView';
const _MessageOptionsBottomSheetView = ({}) => {
  const dispatch = useDispatch();
  const selectedMessageForAction = useSelector(state => state.app.selectedMessageForAction);
  const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
    backdrop: {
      backgroundColor: theme.palette.background_dim && hexToRgbA(theme.palette.background_dim, 0.1)
    },
    contentContainer: {
      backgroundColor: theme.palette.surface_default
    }
  }));
  const closeMessageOptionsBottomSheet = () => {
    dispatch(setSelectedMessageForAction(null));
  };
  if (!selectedMessageForAction) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Pressable, {
    onPress: closeMessageOptionsBottomSheet,
    style: [styles.backdrop, hmsRoomStyles.backdrop]
  }), /*#__PURE__*/React.createElement(Animated.View, {
    entering: SlideInDown,
    exiting: SlideOutDown,
    style: [styles.contentContainer, hmsRoomStyles.contentContainer]
  }, /*#__PURE__*/React.createElement(MessageOptionsView, null)));
};
const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: 1,
    justifyContent: 'flex-end',
    alignSelf: 'center'
  },
  backdrop: {
    position: 'absolute',
    width: '100%',
    height: '100%'
  },
  contentContainer: {
    width: '100%',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16
  }
});
export const MessageOptionsBottomSheetView = /*#__PURE__*/React.memo(_MessageOptionsBottomSheetView);
//# sourceMappingURL=MessageOptionsBottomSheetView.js.map