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

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

import React from 'react';
import { StyleSheet, View } from 'react-native';
import Modal from 'react-native-modal';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { COLORS } from '../utils/theme';
import { CustomButton } from './CustomButton';
import { CloseIcon } from '../Icons';
import { useIsLandscapeOrientation } from '../utils/dimension';
export const DefaultModal = ({
  modalVisible,
  setModalVisible,
  children,
  animationIn = 'fadeIn',
  animationOut = 'fadeOut',
  modalPosiion = 'flex-end',
  backdrop = false,
  viewStyle,
  modalStyle
}) => {
  const {
    left,
    right
  } = useSafeAreaInsets();
  const isLandscapeOrientation = useIsLandscapeOrientation();
  return /*#__PURE__*/React.createElement(Modal, {
    useNativeDriver: true,
    useNativeDriverForBackdrop: true,
    hideModalContentWhileAnimating: true,
    animationIn: animationIn,
    animationOut: animationOut,
    avoidKeyboard: true,
    isVisible: modalVisible,
    coverScreen: true,
    hasBackdrop: backdrop,
    supportedOrientations: ['portrait', 'landscape'],
    onBackdropPress: setModalVisible,
    onDismiss: setModalVisible,
    onBackButtonPress: setModalVisible,
    style: [modalStyle, {
      margin: 0,
      justifyContent: modalPosiion
    }]
  }, /*#__PURE__*/React.createElement(View, {
    style: [isLandscapeOrientation ? styles.landscapeContentContainer : styles.contentContainer, modalPosiion === 'flex-end' ? styles.end : styles.center, viewStyle, {
      marginLeft: left,
      marginRight: right
    }]
  }, modalPosiion === 'flex-end' && /*#__PURE__*/React.createElement(CustomButton, {
    onPress: setModalVisible,
    viewStyle: styles.crossButton,
    LeftIcon: /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(CloseIcon, null))
  }), children));
};
const styles = StyleSheet.create({
  contentContainer: {
    maxHeight: '80%',
    // minHeight: '20%',
    backgroundColor: COLORS.SURFACE.DEFAULT
  },
  landscapeContentContainer: {
    maxHeight: '80%',
    maxWidth: '60%',
    // minHeight: '20%',
    backgroundColor: COLORS.SURFACE.DEFAULT
  },
  end: {
    flex: 1,
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    padding: 16,
    borderWidth: 1,
    borderColor: COLORS.BORDER.LIGHT,
    borderBottomWidth: 0
  },
  center: {
    borderRadius: 16,
    marginHorizontal: 24,
    borderWidth: 1,
    borderColor: COLORS.BORDER.LIGHT,
    alignSelf: 'center',
    width: '90%'
  },
  crossButton: {
    height: 40,
    width: 40,
    position: 'absolute',
    right: 16,
    top: 16,
    backgroundColor: COLORS.SURFACE.LIGHT,
    borderRadius: 40,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 2
  },
  crossButtonIcon: {
    color: COLORS.TEXT.HIGH_EMPHASIS
  }
});
//# sourceMappingURL=DefaultModal.js.map