@arpitbhalla/rneui-base-dev
Version:
Cross Platform React Native UI Toolkit
107 lines (106 loc) • 6.23 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Header = void 0;
var react_1 = __importDefault(require("react"));
var react_native_1 = require("react-native");
var react_native_safe_area_context_1 = require("react-native-safe-area-context");
var helpers_1 = require("../helpers");
var HeaderChildren_1 = require("./components/HeaderChildren");
var Header = function (_a) {
var _b, _c;
var statusBarProps = _a.statusBarProps, leftComponent = _a.leftComponent, centerComponent = _a.centerComponent, rightComponent = _a.rightComponent, leftContainerStyle = _a.leftContainerStyle, centerContainerStyle = _a.centerContainerStyle, rightContainerStyle = _a.rightContainerStyle, backgroundColor = _a.backgroundColor, backgroundImage = _a.backgroundImage, backgroundImageStyle = _a.backgroundImageStyle, containerStyle = _a.containerStyle, _d = _a.placement, placement = _d === void 0 ? 'center' : _d, barStyle = _a.barStyle, _e = _a.children, children = _e === void 0 ? [] : _e, linearGradientProps = _a.linearGradientProps, _f = _a.ViewComponent, ViewComponent = _f === void 0 ? linearGradientProps || !backgroundImage
? react_native_1.View
: react_native_1.ImageBackground : _f, _g = _a.theme, theme = _g === void 0 ? helpers_1.defaultTheme : _g, elevated = _a.elevated, rest = __rest(_a, ["statusBarProps", "leftComponent", "centerComponent", "rightComponent", "leftContainerStyle", "centerContainerStyle", "rightContainerStyle", "backgroundColor", "backgroundImage", "backgroundImageStyle", "containerStyle", "placement", "barStyle", "children", "linearGradientProps", "ViewComponent", "theme", "elevated"]);
react_1.default.useEffect(function () {
if (linearGradientProps && !ViewComponent) {
console.warn("You need to pass a ViewComponent to use linearGradientProps !\nExample: ViewComponent={require('react-native-linear-gradient')}");
}
});
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(react_native_1.StatusBar, __assign({ barStyle: barStyle, translucent: true, backgroundColor: backgroundColor || ((_b = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _b === void 0 ? void 0 : _b.primary) }, statusBarProps)),
react_1.default.createElement(ViewComponent, __assign({ testID: "headerContainer" }, rest, { style: react_native_1.StyleSheet.flatten([
{
borderBottomColor: '#f2f2f2',
borderBottomWidth: react_native_1.StyleSheet.hairlineWidth,
paddingHorizontal: 10,
paddingVertical: 10,
backgroundColor: (_c = theme === null || theme === void 0 ? void 0 : theme.colors) === null || _c === void 0 ? void 0 : _c.primary,
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
},
backgroundColor && { backgroundColor: backgroundColor },
elevated && styles.elevatedHeader,
containerStyle,
]), source: backgroundImage, imageStyle: backgroundImageStyle }, linearGradientProps),
react_1.default.createElement(react_native_safe_area_context_1.SafeAreaView, { edges: ['left', 'top', 'right'], style: styles.headerSafeView },
react_1.default.createElement(HeaderChildren_1.Children, { style: react_native_1.StyleSheet.flatten([
placement === 'center' && styles.rightLeftContainer,
leftContainerStyle,
]), placement: "left" }, (react_1.default.isValidElement(children) && children) ||
children[0] ||
leftComponent),
react_1.default.createElement(HeaderChildren_1.Children, { style: react_native_1.StyleSheet.flatten([
styles.centerContainer,
placement !== 'center' && {
paddingHorizontal: react_native_1.Platform.select({
android: 16,
default: 15,
}),
},
centerContainerStyle,
]), placement: placement }, children[1] || centerComponent),
react_1.default.createElement(HeaderChildren_1.Children, { style: react_native_1.StyleSheet.flatten([
placement === 'center' && styles.rightLeftContainer,
rightContainerStyle,
]), placement: "right" }, children[2] || rightComponent)))));
};
exports.Header = Header;
var styles = react_native_1.StyleSheet.create({
headerSafeView: {
width: '100%',
flexDirection: 'row',
},
centerContainer: {
flex: 3,
},
rightLeftContainer: {
flex: 1,
},
elevatedHeader: {
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 6,
},
shadowOpacity: 0.6,
shadowRadius: 8.0,
elevation: 24,
},
});
exports.Header.displayName = 'Header';