@pismo/bolt-pismo-bar - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/components/ApplicationToolbar.js

@@ -21,10 +21,30 @@ "use strict";
 var styles_1 = require("@material-ui/core/styles");
+var Hidden_1 = require("@material-ui/core/Hidden");
 var bolt_core_1 = require("@pismo/bolt-core");
 var interfaces_1 = require("./interfaces");
 var useStyles = styles_1.makeStyles(function (theme) {
+    var _a;
     var extra = theme.palette.extra;
     return {
-        bar: {
-            maxWidth: interfaces_1.maxWidth,
-            backgroundColor: extra ? extra['background'].special : 'transparent'
+        bar: (_a = {
+                maxWidth: interfaces_1.maxWidth,
+                backgroundColor: extra ? extra['background'].special : 'transparent'
+            },
+            _a[theme.breakpoints.down('xs')] = {
+                maxWidth: function (_a) {
+                    var full = _a.full;
+                    return (!full ? interfaces_1.mobileMaxWidth : interfaces_1.maxWidth);
+                }
+            },
+            _a),
+        toolbar: function (_a) {
+            var _b;
+            var full = _a.full;
+            return !full
+                ? (_b = {},
+                    _b[theme.breakpoints.down('xs')] = {
+                        padding: 0,
+                        justifyContent: 'center'
+                    },
+                    _b) : {};
         },
@@ -39,14 +59,15 @@ title: {
 var ApplicationToolbar = function (_a) {
-    var AppBarProps = _a.AppBarProps, ToolbarProps = _a.ToolbarProps, current = _a.current, onClick = _a.onClick, applications = _a.applications;
-    var classes = useStyles({});
+    var AppBarProps = _a.AppBarProps, ToolbarProps = _a.ToolbarProps, current = _a.current, onClick = _a.onClick, applications = _a.applications, full = _a.full;
+    var classes = useStyles({ full: full });
     return (React.createElement(AppBar_1.default, __assign({ className: classes.bar }, AppBarProps),
-        React.createElement(Toolbar_1.default, __assign({}, ToolbarProps),
+        React.createElement(Toolbar_1.default, __assign({ className: classes.toolbar }, ToolbarProps),
             React.createElement(IconButton_1.default, { onClick: onClick, "data-testid": 'mainButton' },
-                React.createElement(bolt_core_1.MenuIcon, null)),
-            React.createElement(Box_1.default, { ml: '5px' },
-                React.createElement(Typography_1.default, { className: classes.title, variant: 'body1' },
-                    "Pismo",
-                    React.createElement("span", null, applications[current].name))))));
+                React.createElement(bolt_core_1.MenuIcon, { "data-testid": applications[current].name })),
+            React.createElement(Hidden_1.default, { xsDown: full ? false : true },
+                React.createElement(Box_1.default, { ml: '5px' },
+                    React.createElement(Typography_1.default, { className: classes.title, variant: 'body1' },
+                        "Pismo",
+                        React.createElement("span", null, applications[current].name)))))));
 };
 exports.ApplicationToolbar = ApplicationToolbar;
 //# sourceMappingURL=ApplicationToolbar.js.map

dist/components/interfaces.d.ts

@@ -10,2 +10,3 @@ import { AppBarProps } from '@material-ui/core/AppBar';
     }) => void;
+    full?: boolean;
 }
@@ -32,1 +33,2 @@ export declare type ApplicationsName = 'Marketplace' | 'Adjustments' | 'Customer' | 'Backoffice' | 'WebPOS';
 export declare const maxWidth = "240px";
+export declare const mobileMaxWidth = "68px";

dist/components/interfaces.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.maxWidth = '240px';
+exports.mobileMaxWidth = '68px';
 //# sourceMappingURL=interfaces.js.map

dist/PismoBar.js

@@ -8,2 +8,3 @@ "use strict";
 var Grid_1 = require("@material-ui/core/Grid");
+var useMediaQuery_1 = require("@material-ui/core/useMediaQuery");
 var interfaces_1 = require("./components/interfaces");
@@ -59,2 +60,3 @@ var ApplicationToolbar_1 = require("./components/ApplicationToolbar");
     var classes = useStyles({});
+    var matches = useMediaQuery_1.default(function (theme) { return theme.breakpoints.down('xs'); });
     var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
@@ -75,8 +77,8 @@ var toOpen = function () {
         React.createElement(ApplicationToolbar_1.ApplicationToolbar, { applications: applications, AppBarProps: AppBarProps, ToolbarProps: ToolbarProps, current: current, onClick: toOpen }),
-        React.createElement(Drawer_1.default, { classes: { root: classes.drawer, paper: "" + classes.drawerPaper }, anchor: 'top', open: isOpen, onClose: toClose, ModalProps: { hideBackdrop: true }, "data-testid": 'drawer' },
+        React.createElement(Drawer_1.default, { classes: { root: classes.drawer, paper: "" + classes.drawerPaper }, anchor: matches ? 'left' : 'top', open: isOpen, onClose: toClose, ModalProps: { hideBackdrop: true }, "data-testid": 'drawer' },
             React.createElement(Grid_1.default, { container: true, spacing: 2, className: classes.appButtonContainer }, Object.keys(applications).map(function (k, index) { return (React.createElement(ApplicationButton_1.ApplicationButton, { data: applications[k], isSelected: k === current, key: k + "-" + index, onClick: appSelectedHandler })); })),
             React.createElement(Box_1.default, { mt: 'auto' },
-                React.createElement(ApplicationToolbar_1.ApplicationToolbar, { applications: applications, AppBarProps: AppBarProps, ToolbarProps: ToolbarProps, current: current, onClick: toClose })))));
+                React.createElement(ApplicationToolbar_1.ApplicationToolbar, { applications: applications, AppBarProps: AppBarProps, ToolbarProps: ToolbarProps, current: current, onClick: toClose, full: true })))));
 };
 exports.PismoBar = PismoBar;
 //# sourceMappingURL=PismoBar.js.map

package.json

 {
   "name": "@pismo/bolt-pismo-bar",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Bolt component pismo-bar",
@@ -36,3 +36,3 @@ "author": "Pismo <[e-mail]>",
     "build": "tsc",
-    "test": "jest",
+    "test": "jest -u",
     "manual-publish": "npm publish"
@@ -39,0 +39,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

18053

increased by12.33%

Lines of code

259

increased by11.16%

No dependency changes