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

Dumbo for React Native Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.BottomSafeAreaColorOverride = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _zIndex = require("../../styles/z-index");
var _Overlay = require("../Overlay");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
 * @ignore
 * Props for BottomSafeAreaColorOverride
 */

/**
 * @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.
 */
class BottomSafeAreaColorOverride extends _react.default.Component {
  get styles() {
    const {
      color,
      marginRight
    } = this.props;
    return _reactNative.StyleSheet.create({
      parentWrapper: {
        zIndex: _zIndex.zIndexes.behind,
        position: 'absolute',
        bottom: 0,
        right: 0,
        left: 0,
        height: 34
      },
      wrapper: {
        marginRight: marginRight || 0,
        height: '100%',
        backgroundColor: color
      },
      blurBackground: {
        zIndex: _zIndex.zIndexes.behind,
        position: 'absolute',
        top: 0,
        right: 0,
        left: 0,
        bottom: 0,
        flex: 1
      }
    });
  }
  get isPortrait() {
    const dim = _reactNative.Dimensions.get('window');
    return dim.height >= dim.width;
  }
  componentWillUnmount() {
    if (this.resizeEvent && typeof this.resizeEvent.remove === 'function') {
      this.resizeEvent.remove();
    }
  }
  componentDidMount() {
    this.resizeEvent = _reactNative.Dimensions.addEventListener('change', () => {
      this.setState({});
    });
  }
  render() {
    const {
      backgroundOverlay
    } = this.props;
    if (this.isPortrait) {
      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
        style: this.styles.parentWrapper,
        accessible: false,
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
          style: this.styles.wrapper
        }), backgroundOverlay && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Overlay.Overlay, {
          style: this.styles.blurBackground
        })]
      });
    } else {
      return null;
    }
  }
}
exports.BottomSafeAreaColorOverride = BottomSafeAreaColorOverride;
//# sourceMappingURL=index.js.map