react-web-native-sketch
Version:
[TODO: We need an overview of how this can be used via npm vs as a local package]
100 lines • 4.58 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
var Menu_1 = require("@material-ui/icons/Menu");
var React = require("react");
var react_redux_1 = require("react-redux");
var __1 = require("../..");
var navigation_1 = require("../../redux/reducers/navigation");
var Alert_1 = require("../Alert/Alert");
var DrawerWeb_1 = require("../DrawerWeb/DrawerWeb");
var ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
var Topbar_1 = require("../Topbar/Topbar");
var styles = function () {
var _a;
return ({
appFrame: {
// fontFamily: appTheme.fontFamily,
flex: 1,
width: '100vw',
height: '100vh',
},
appBarShift: {
marginLeft: __1.appTheme.drawerWidth,
width: "calc(100% - " + __1.appTheme.drawerWidth + "px)",
},
menuButton: {
marginLeft: 12,
marginRight: 20,
},
hide: {
display: 'none',
},
content: {
display: 'flex',
width: '100%',
flexGrow: 1,
position: 'relative',
overflow: 'hidden',
marginTop: (_a = {},
_a[__1.webDesktop] = __1.appTheme.topBarHeightDesktop,
_a[__1.webMobile] = __1.appTheme.topBarHeightMobile,
_a),
},
drawerPaper: {
height: '100%',
width: __1.appTheme.drawerWidth,
overflow: 'hidden',
backgroundColor: '#eee'
},
contentPersistent: {},
contentShift: {
marginLeft: 0,
},
logo: {
height: 48,
width: 'auto',
},
});
};
var CAppContainerWeb = /** @class */ (function (_super) {
__extends(CAppContainerWeb, _super);
function CAppContainerWeb() {
return _super !== null && _super.apply(this, arguments) || this;
}
CAppContainerWeb.prototype.render = function () {
var _a = this.props, classes = _a.classes, children = _a.children, drawerContent = _a.drawerContent, drawerOpen = _a.drawerOpen, drawerPersistent = _a.drawerPersistent, onDrawerClose = _a.onDrawerClose, rightButtonsData = _a.rightButtonsData, title = _a.title, toggleDrawer = _a.toggleDrawer, persistComplete = _a.persistComplete, topbarContent = _a.topbarContent, hideDrawer = _a.hideDrawer;
if (!persistComplete) {
return null;
}
return (React.createElement(ThemeProvider_1.ThemeProvider, null,
React.createElement(__1.View, { style: classes.appFrame, name: 'AppFrame' },
React.createElement(Topbar_1.Topbar, { leftButtonIcon: hideDrawer == true
? null
: (React.createElement(Menu_1.default, { style: { color: __1.appTheme.topbarContrastColor || __1.appTheme.primaryTextColor } })), leftButtonOnPress: toggleDrawer.bind(this, null, !drawerOpen), drawerOpen: !!drawerOpen, title: title, rightButtonsData: rightButtonsData, topbarContent: topbarContent, disableGutters: !drawerOpen }),
React.createElement(DrawerWeb_1.DrawerWeb, { persistent: drawerPersistent, open: drawerOpen, onDrawerClose: onDrawerClose || toggleDrawer.bind(this, null, false) }, drawerContent),
React.createElement(__1.View, { style: [
classes.content,
drawerOpen && classes.contentShift,
drawerPersistent && classes.contentPersistent,
] }, children)),
React.createElement(Alert_1.Alert, { alertId: navigation_1.DEFAULT_ALERT_ID, leftButtonText: "OK" })));
};
return CAppContainerWeb;
}(React.PureComponent));
exports.AppContainerWeb = react_redux_1.connect(function (state) { return ({
drawerOpen: state.navigation.drawerOpen,
persistComplete: state.persisted.persistComplete,
}); }, {
toggleDrawer: navigation_1.toggleDrawer,
})(__1.createStyles(styles, 'AppContainerWeb')(CAppContainerWeb));
//# sourceMappingURL=AppContainerWeb.js.map