@prosperitainova/dumbo-react-native
Version:
Dumbo for React Native Library
93 lines (91 loc) • 3.15 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.ViewWrapper = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactNative = require("react-native");
var _colors = require("../../styles/colors");
var _BottomSafeAreaColorOverride = require("../BottomSafeAreaColorOverride");
var _SafeAreaWrapper = require("../SafeAreaWrapper");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/** Props for ViewWrapper component */
/**
* 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}
*/
class ViewWrapper extends _react.default.Component {
get topColor() {
const {
topBackgroundColor,
hasTopNavigation
} = this.props;
if (topBackgroundColor) {
return topBackgroundColor;
} else if (hasTopNavigation) {
return (0, _colors.getColor)('layer01');
}
return (0, _colors.getColor)('background');
}
get bottomColor() {
const {
bottomBackgroundColor,
hasBottomNavigation
} = this.props;
if (bottomBackgroundColor) {
return bottomBackgroundColor;
} else if (hasBottomNavigation) {
return (0, _colors.getColor)('layer01');
}
return (0, _colors.getColor)('background');
}
get needsBottomCover() {
return this.topColor !== this.bottomColor;
}
get styles() {
return _reactNative.StyleSheet.create({
wrapper: {
backgroundColor: this.topColor,
flexGrow: 1,
position: 'relative'
},
safeWrapper: {
flexGrow: 1
},
childrenWrapper: {
flexGrow: 1,
backgroundColor: (0, _colors.getColor)('background')
}
});
}
render() {
const {
children,
componentProps,
statusBarStyle
} = this.props;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: this.styles.wrapper,
children: [this.needsBottomCover && /*#__PURE__*/(0, _jsxRuntime.jsx)(_BottomSafeAreaColorOverride.BottomSafeAreaColorOverride, {
color: this.bottomColor
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_SafeAreaWrapper.SafeAreaWrapper, {
style: this.styles.safeWrapper,
...(componentProps || {}),
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.StatusBar, {
backgroundColor: this.topColor,
animated: true,
barStyle: statusBarStyle || ((0, _colors.useDarkMode)() ? 'light-content' : 'dark-content')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: this.styles.childrenWrapper,
children: children
})]
})]
});
}
}
exports.ViewWrapper = ViewWrapper;
//# sourceMappingURL=index.js.map