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

Dumbo for React Native Library

"use strict";

import React from 'react';
import { StyleSheet, StatusBar, View } from 'react-native';
import { getColor, useDarkMode } from '../../styles/colors';
import { BottomSafeAreaColorOverride } from '../BottomSafeAreaColorOverride';
import { SafeAreaWrapper } from '../SafeAreaWrapper';

/** Props for ViewWrapper component */
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * The ViewWrapper component provides a unified way to load main views without worrying about StatusBar or safe zone stylings.
 * For most usages simply indicate if you are using Navigation for top and bottom.
 * For Layout views that are full screen (Landing for example) you do not need to wrap them in this.
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/ViewWrapper.tsx | Example code}
 */
export class ViewWrapper extends React.Component {
  get topColor() {
    const {
      topBackgroundColor,
      hasTopNavigation
    } = this.props;
    if (topBackgroundColor) {
      return topBackgroundColor;
    } else if (hasTopNavigation) {
      return getColor('layer01');
    }
    return getColor('background');
  }
  get bottomColor() {
    const {
      bottomBackgroundColor,
      hasBottomNavigation
    } = this.props;
    if (bottomBackgroundColor) {
      return bottomBackgroundColor;
    } else if (hasBottomNavigation) {
      return getColor('layer01');
    }
    return getColor('background');
  }
  get needsBottomCover() {
    return this.topColor !== this.bottomColor;
  }
  get styles() {
    return StyleSheet.create({
      wrapper: {
        backgroundColor: this.topColor,
        flexGrow: 1,
        position: 'relative'
      },
      safeWrapper: {
        flexGrow: 1
      },
      childrenWrapper: {
        flexGrow: 1,
        backgroundColor: getColor('background')
      }
    });
  }
  render() {
    const {
      children,
      componentProps,
      statusBarStyle
    } = this.props;
    return /*#__PURE__*/_jsxs(View, {
      style: this.styles.wrapper,
      children: [this.needsBottomCover && /*#__PURE__*/_jsx(BottomSafeAreaColorOverride, {
        color: this.bottomColor
      }), /*#__PURE__*/_jsxs(SafeAreaWrapper, {
        style: this.styles.safeWrapper,
        ...(componentProps || {}),
        children: [/*#__PURE__*/_jsx(StatusBar, {
          backgroundColor: this.topColor,
          animated: true,
          barStyle: statusBarStyle || (useDarkMode() ? 'light-content' : 'dark-content')
        }), /*#__PURE__*/_jsx(View, {
          style: this.styles.childrenWrapper,
          children: children
        })]
      })]
    });
  }
}
//# sourceMappingURL=index.js.map