@100mslive/react-native-room-kit/lib/module/components/Chat/ChatFilterBottomSheetView.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 { ChatFilterView } from './ChatFilterView';
import { useHMSRoomStyleSheet } from '../../hooks-util';
import { setChatFilterSheetVisible } from '../../redux/actions';
import { useIsLandscapeOrientation } from '../../utils/dimension';
const _ChatFilterBottomSheetView = ({}) => {
  const dispatch = useDispatch();
  const isLandscapeOrientation = useIsLandscapeOrientation();
  const chatFilterSheetVisible = useSelector(state => state.app.chatFilterSheetVisible);
  const hmsRoomStyles = useHMSRoomStyleSheet(theme => ({
    backdrop: {
      backgroundColor: theme.palette.background_dim && hexToRgbA(theme.palette.background_dim, 0.1)
    },
    contentContainer: {
      backgroundColor: theme.palette.surface_default
    }
  }));
  const closeFiltersBottomSheet = () => {
    dispatch(setChatFilterSheetVisible(false));
  };
  if (!chatFilterSheetVisible) {
    return null;
  }
  return /*#__PURE__*/React.createElement(View, {
    style: styles.container
  }, /*#__PURE__*/React.createElement(Pressable, {
    onPress: closeFiltersBottomSheet,
    style: [styles.backdrop, hmsRoomStyles.backdrop]
  }), /*#__PURE__*/React.createElement(Animated.View, {
    entering: SlideInDown,
    exiting: SlideOutDown,
    style: [styles.contentContainer, hmsRoomStyles.contentContainer, isLandscapeOrientation ? {
      maxHeight: '88%'
    } : null]
  }, /*#__PURE__*/React.createElement(ChatFilterView, 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%',
    minHeight: 352,
    maxHeight: '80%',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16
  }
});
export const ChatFilterBottomSheetView = /*#__PURE__*/React.memo(_ChatFilterBottomSheetView);
//# sourceMappingURL=ChatFilterBottomSheetView.js.map