@prosperitainova/dumbo-react-native/lib/module/components/BottomSafeAreaColorOverride/index.js

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, View, Dimensions } from 'react-native';
import { zIndexes } from '../../styles/z-index';
import { Overlay } from '../Overlay';

/**
 * @ignore
 * Props for BottomSafeAreaColorOverride
 */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * @ignore
 * This component is for setting a color to apply to bottom zone under safe areas.
 * This is used for specific flows who are full screen and need to override the bottom while not touching the top.
 * This component is not exported.
 */
export class BottomSafeAreaColorOverride extends React.Component {
  get styles() {
    const {
      color,
      marginRight
    } = this.props;
    return StyleSheet.create({
      parentWrapper: {
        zIndex: zIndexes.behind,
        position: 'absolute',
        bottom: 0,
        right: 0,
        left: 0,
        height: 34
      },
      wrapper: {
        marginRight: marginRight || 0,
        height: '100%',
        backgroundColor: color
      },
      blurBackground: {
        zIndex: zIndexes.behind,
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
        flex: 1
      }
    });
  }
  get isPortrait() {
    const dim = Dimensions.get('window');
    return dim.height >= dim.width;
  }
  componentWillUnmount() {
    if (this.resizeEvent && typeof this.resizeEvent.remove === 'function') {
      this.resizeEvent.remove();
    }
  }
  componentDidMount() {
    this.resizeEvent = Dimensions.addEventListener('change', () => {
      this.setState({});
    });
  }
  render() {
    const {
      backgroundOverlay
    } = this.props;
    if (this.isPortrait) {
      return /*#__PURE__*/_jsxs(View, {
        style: this.styles.parentWrapper,
        accessible: false,
        children: [/*#__PURE__*/_jsx(View, {
          style: this.styles.wrapper
        }), backgroundOverlay && /*#__PURE__*/_jsx(Overlay, {
          style: this.styles.blurBackground
        })]
      });
    } else {
      return null;
    }
  }
}
//# sourceMappingURL=index.js.map