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

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

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
import * as React from 'react';
import Modal from 'react-native-modal';
import { KeyboardAvoidingView, Platform, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { CloseIcon } from '../Icons';
import { useHMSRoomColorPalette, useHMSRoomStyle, useHMSRoomStyleSheet } from '../hooks-util';
import { useIsLandscapeOrientation } from '../utils/dimension';
export const BottomSheet = ({
  dismissModal,
  fullWidth = false,
  style,
  children,
  containerStyle,
  bottomOffsetSpace = 32,
  ...resetProps
}) => {
  const {
    background_dim: backgroundDimColor
  } = useHMSRoomColorPalette();
  const containerStyles = useHMSRoomStyle(theme => ({
    backgroundColor: theme.palette.background_default
  }));
  const {
    handleModalHideAction
  } = useBottomSheetActionHandlers();
  const isLandscapeOrientation = useIsLandscapeOrientation();
  const Container = resetProps.avoidKeyboard && Platform.OS === 'android' ? KeyboardAvoidingView : View;
  return /*#__PURE__*/React.createElement(Modal, _extends({}, resetProps, {
    animationIn: resetProps.animationIn ?? 'slideInUp',
    animationOut: resetProps.animationOut ?? 'slideOutDown',
    backdropColor: resetProps.backdropColor ?? backgroundDimColor,
    backdropOpacity: resetProps.backdropOpacity ?? 0.3,
    onBackButtonPress: resetProps.onBackButtonPress ?? dismissModal,
    onBackdropPress: resetProps.onBackdropPress ?? dismissModal,
    useNativeDriver: resetProps.useNativeDriver ?? true,
    useNativeDriverForBackdrop: resetProps.useNativeDriverForBackdrop ?? true,
    hideModalContentWhileAnimating: resetProps.hideModalContentWhileAnimating ?? true,
    style: [styles.modal, style],
    onModalHide: resetProps.onModalHide ?? handleModalHideAction,
    supportedOrientations: resetProps.supportedOrientations ?? ['portrait', 'landscape'],
    statusBarTranslucent: true
  }), /*#__PURE__*/React.createElement(Container, {
    behavior: "padding",
    style: [isLandscapeOrientation && !fullWidth ? styles.landscapeContainer : styles.container, containerStyles, containerStyle]
  }, children, typeof bottomOffsetSpace === 'number' && bottomOffsetSpace > 0 ? /*#__PURE__*/React.createElement(View, {
    style: {
      height: bottomOffsetSpace,
      width: '100%'
    }
  }) : null));
};
const BottomSheetHeader = ({
  dismissModal,
  heading,
  subheading,
  headingTestID,
  subheadingTestID,
  closeIconTestID
}) => {
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    headerText: {
      color: theme.palette.on_surface_high,
      fontFamily: `${typography.font_family}-SemiBold`
    },
    subheadingText: {
      color: theme.palette.on_surface_medium,
      fontFamily: `${typography.font_family}-Regular`
    }
  }));
  return /*#__PURE__*/React.createElement(View, {
    style: styles.header
  }, /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(Text, {
    testID: headingTestID,
    style: [styles.headerText, hmsRoomStyles.headerText]
  }, heading), subheading ? /*#__PURE__*/React.createElement(Text, {
    testID: subheadingTestID,
    style: [styles.subheadingText, hmsRoomStyles.subheadingText]
  }, subheading) : null), /*#__PURE__*/React.createElement(TouchableOpacity, {
    testID: closeIconTestID,
    onPress: dismissModal,
    hitSlop: styles.closeIconHitSlop
  }, /*#__PURE__*/React.createElement(CloseIcon, null)));
};
const BottomSheetDivider = ({
  style
}) => {
  const dividerStyles = useHMSRoomStyle(theme => ({
    backgroundColor: theme.palette.border_default
  }));
  return /*#__PURE__*/React.createElement(View, {
    style: [styles.divider, dividerStyles, style]
  });
};
BottomSheet.Header = BottomSheetHeader;
BottomSheet.Divider = BottomSheetDivider;
const onModalHideActionHandlerRef = {
  handler: null
};
const useBottomSheetActionHandlers = () => {
  const onModalHideActionRef = React.useRef(onModalHideActionHandlerRef);
  const handleModalHideAction = React.useCallback(() => {
    if (typeof onModalHideActionRef.current.handler === 'function') {
      onModalHideActionRef.current.handler();
    }
    onModalHideActionRef.current.handler = null;
  }, []);
  return {
    handleModalHideAction
  };
};
export const useBottomSheetActions = () => {
  const registerOnModalHideAction = React.useCallback(action => {
    onModalHideActionHandlerRef.handler = action;
  }, []);
  const clearOnModalHideAction = React.useCallback(() => {
    onModalHideActionHandlerRef.handler = null;
  }, []);
  return {
    registerOnModalHideAction,
    clearOnModalHideAction
  };
};
const styles = StyleSheet.create({
  modal: {
    margin: 0,
    justifyContent: 'flex-end'
  },
  container: {
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16
  },
  landscapeContainer: {
    borderRadius: 16,
    width: '60%',
    alignSelf: 'center',
    marginBottom: 12
  },
  header: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: 16,
    marginHorizontal: 24
  },
  headerText: {
    fontSize: 16,
    lineHeight: 24,
    letterSpacing: 0.15
  },
  subheadingText: {
    marginTop: 4,
    fontSize: 12,
    lineHeight: 16,
    letterSpacing: 0.4
  },
  closeIconHitSlop: {
    bottom: 16,
    left: 16,
    right: 16,
    top: 16
  },
  divider: {
    height: 2,
    width: '100%',
    marginVertical: 16
  }
});
//# sourceMappingURL=BottomSheet.js.map