react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
94 lines • 4.6 kB
JavaScript
"use strict";
var __assign = (this && this.__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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var AppBar_1 = require("@material-ui/core/AppBar");
var IconButton_1 = require("@material-ui/core/IconButton");
var Toolbar_1 = require("@material-ui/core/Toolbar");
var Typography_1 = require("@material-ui/core/Typography");
var React = require("react");
var __1 = require("../..");
var web_1 = require("../../utils/web");
var Button_1 = require("../Button/Button");
var styles = function () {
var _a, _b;
return ({
root: {
width: '100%',
},
flex: {
flex: 1,
},
appBar: {
position: 'fixed',
backgroundColor: __1.appTheme.topBarColor,
height: (_a = {},
_a[__1.webDesktop] = __1.appTheme.topBarHeightDesktop,
_a[__1.all] = __1.appTheme.topBarHeightMobile,
_a),
},
appBarShift: {
marginLeft: __1.appTheme.drawerWidth,
width: "calc(100% - " + __1.appTheme.drawerWidth + "px)",
},
buttonColor: {
color: __1.appTheme.primaryTextColor,
},
toolbar: {
minHeight: 0,
height: (_b = {},
_b[__1.webDesktop] = __1.appTheme.topBarHeightDesktop,
_b[__1.all] = __1.appTheme.topBarHeightMobile,
_b),
backgroundColor: __1.appTheme.topBarColor,
},
});
};
var CTopBar = function (_a) {
var classes = _a.classes, drawerOpen = _a.drawerOpen, leftButtonIcon = _a.leftButtonIcon, leftButtonOnPress = _a.leftButtonOnPress, rightButtonsData = _a.rightButtonsData, title = _a.title, topbarContent = _a.topbarContent, disableGutters = _a.disableGutters;
return (React.createElement(AppBar_1.default, __assign({}, web_1.getStyleProps([classes.appBar /*, drawerOpen && classes.appBarShift*/])),
React.createElement(Toolbar_1.default, { style: {
minHeight: 0,
height: __1.isXs() ? __1.appTheme.topBarHeightMobile : __1.appTheme.topBarHeightDesktop,
}, disableGutters: disableGutters },
leftButtonIcon &&
React.createElement(IconButton_1.default, __assign({ "aria-label": "Menu", onClick: leftButtonOnPress }, __1.getTestProps('drawer_button')), leftButtonIcon),
typeof title === 'string'
? (React.createElement(Typography_1.default, { variant: "title", color: "inherit", className: classes.flex }, title || ''))
: title,
React.createElement(__1.View, { style: {
position: 'absolute',
right: 0,
top: 0,
height: __1.isXs() ? __1.appTheme.topBarHeightMobile : __1.appTheme.topBarHeightDesktop,
} },
rightButtonsData && rightButtonsData.map(function (buttonData) {
if (buttonData.items) {
var bd = buttonData;
return (React.createElement(Button_1.Button, { key: bd.title, title: bd.title, backgroundColor: __1.appTheme.topbarButtonColor ||
__1.appTheme.topbarColor ||
__1.appTheme.primaryColor, labelColor: __1.appTheme.topbarTextColor ||
__1.appTheme.topbarContrastColor ||
__1.appTheme.primaryTextColor }));
}
else {
var bd = buttonData;
return (React.createElement(Button_1.Button, { key: bd.title, onPress: bd.onPress, title: bd.title, iconLeft: bd.icon, href: bd.href, styles: {
label: classes.buttonColor,
}, backgroundColor: __1.appTheme.topbarButtonColor ||
__1.appTheme.topbarColor ||
__1.appTheme.primaryColor, labelColor: __1.appTheme.topbarTextColor ||
__1.appTheme.topbarContrastColor ||
__1.appTheme.primaryTextColor }));
}
}),
topbarContent))));
};
exports.Topbar = __1.createStyles(styles, 'Topbar')(CTopBar);
//# sourceMappingURL=Topbar.js.map