@devvie/bottom-sheet/lib/module/components/backdrop/index.js

The 😎smart , 📦tiny , and 🎗flexible bottom sheet your app craves 🚀

import React from 'react';
import { StyleSheet, View } from 'react-native';
import AnimatedTouchableBackdropMask from '../animatedTouchableBackdropMask';
import { CUSTOM_BACKDROP_POSITIONS } from '../../types.d';
/**
 * Abstracted, polymorphic backdrop that handles custom and default backdrop
 */
const Backdrop = _ref => {
  let {
    BackdropComponent,
    backdropPosition = CUSTOM_BACKDROP_POSITIONS.BEHIND,
    sheetOpen,
    containerHeight,
    contentContainerHeight,
    _animatedHeight,
    closeOnPress,
    rippleColor,
    pressHandler,
    animatedBackdropOpacity,
    backdropColor
  } = _ref;
  const heightStyle = sheetOpen ? containerHeight - contentContainerHeight : 0;
  return BackdropComponent ? /*#__PURE__*/React.createElement(View, {
    style: backdropPosition === CUSTOM_BACKDROP_POSITIONS.BEHIND ? StyleSheet.absoluteFillObject : {
      height: heightStyle
    }
  }, /*#__PURE__*/React.createElement(BackdropComponent, {
    _animatedHeight: _animatedHeight
  })) : closeOnPress ? /*#__PURE__*/React.createElement(AnimatedTouchableBackdropMask, {
    isPressable: true,
    android_touchRippleColor: rippleColor,
    pressHandler: pressHandler,
    style: {
      opacity: animatedBackdropOpacity,
      backgroundColor: backdropColor
    },
    touchSoundDisabled: true,
    key: 'TouchableBackdropMask'
  }) : /*#__PURE__*/React.createElement(AnimatedTouchableBackdropMask, {
    isPressable: false,
    style: {
      opacity: animatedBackdropOpacity,
      backgroundColor: backdropColor
    },
    key: 'TouchableBackdropMask'
  });
};
export default Backdrop;
//# sourceMappingURL=index.js.map