mui-layout - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

dist/components/Root.js

@@ -55,4 +55,4 @@ "use strict";
   var mergedConfig = (0, _useMergedConfig["default"])(config, initialConfig);
-  var screen = (0, _useWidth["default"])();
-  console.log('screen', screen);
+  var screen = (0, _useWidth["default"])(); // screen could be null at first render
+
   return _react["default"].createElement(_context["default"].Provider, {
@@ -59,0 +59,0 @@ value: _objectSpread({}, mergedConfig, {

dist/hooks/useAutoCollapse.js

@@ -33,3 +33,3 @@ "use strict";
   (0, _react.useEffect)(function () {
-    if (collapsible) {
+    if (collapsible && screen) {
       if (collapsed && screen === collapsedBreakpoint) {
@@ -36,0 +36,0 @@ setCollapsed(false);

dist/hooks/useHeightAdjustment.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _someIs = _interopRequireDefault(require("../utils/someIs"));
+
 var _useConfig2 = _interopRequireDefault(require("./useConfig"));
@@ -38,3 +40,4 @@
       heightAdjustmentSpeed = _useConfig.heightAdjustmentSpeed,
-      heightAdjustmentDisabled = _useConfig.heightAdjustmentDisabled;
+      heightAdjustmentDisabled = _useConfig.heightAdjustmentDisabled,
+      navVariant = _useConfig.navVariant;
 
@@ -46,5 +49,5 @@ var currentScreen = (0, _useWidth["default"])();
 
-  if (clipped && headerPosition === 'sticky') return initialHeight;
+  if (navVariant === 'temporary') return 0;
 
-  if (!clipped && (headerPosition !== 'static' || headerPosition !== 'relative')) {
+  if (!clipped) {
     // do not run the effect below if behavior is not right.
@@ -54,2 +57,6 @@ return 0;
 
+  if (clipped && (0, _someIs["default"])(['sticky', 'fixed'], headerPosition)) {
+    return initialHeight;
+  }
+
   var _useState = (0, _react.useState)(initialHeight),
@@ -56,0 +63,0 @@ _useState2 = _slicedToArray(_useState, 2),

package.json

 {
   "name": "mui-layout",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Instantly build dynamic and responsive layout based on React Material-UI",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -14,6 +14,6 @@ <img src="https://user-images.githubusercontent.com/18292247/60601737-cb425a00-9ddc-11e9-8cb7-642fa581aa3d.png" alt="logo" width="150" height="136" />
 // yarn
-yarn add mui-layout @material-ui/core @material-ui/styles
+yarn add mui-layout @material-ui/core @material-ui/styles @material-ui/icons
 
 // npm
-npm install mui-layout @material-ui/core @material-ui/styles
+npm install mui-layout @material-ui/core @material-ui/styles @material-ui/icons
 ```
@@ -20,0 +20,0 @@

stories/mock/HeaderEx.js

@@ -1,9 +0,9 @@
-import React from "react";
-import PropTypes from "prop-types";
-import { withStyles } from "@material-ui/core/styles";
-import { isWidthUp } from "@material-ui/core/withWidth";
-import InputBase from "@material-ui/core/InputBase";
-import Icon from "@material-ui/core/Icon";
-import IconButton from "@material-ui/core/IconButton";
-import Typography from "@material-ui/core/Typography";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { isWidthUp } from '@material-ui/core/withWidth';
+import InputBase from '@material-ui/core/InputBase';
+import Icon from '@material-ui/core/Icon';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
 
@@ -14,34 +14,34 @@ const styles = ({ spacing, transitions, breakpoints, palette, shape }) => ({
     minWidth: 0,
-    fontSize: 18
+    fontSize: 18,
   },
   grow: {
-    flexGrow: 1
+    flexGrow: 1,
   },
   search: {
-    position: "relative",
+    position: 'relative',
     marginRight: 8,
     borderRadius: shape.borderRadius,
     background: palette.grey[200],
-    "&:hover": {
-      background: palette.grey[300]
+    '&:hover': {
+      background: palette.grey[300],
     },
     marginLeft: 0,
-    width: "100%",
-    [breakpoints.up("sm")]: {
+    width: '100%',
+    [breakpoints.up('sm')]: {
       marginLeft: spacing(1),
-      width: "auto"
-    }
+      width: 'auto',
+    },
   },
   searchIcon: {
     width: spacing(9),
-    height: "100%",
-    position: "absolute",
-    pointerEvents: "none",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center"
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
   },
   inputRoot: {
-    color: "inherit",
-    width: "100%"
+    color: 'inherit',
+    width: '100%',
   },
@@ -54,11 +54,11 @@ inputInput: {
     paddingLeft: spacing(10),
-    transition: transitions.create("width"),
-    width: "100%",
-    [breakpoints.up("sm")]: {
+    transition: transitions.create('width'),
+    width: '100%',
+    [breakpoints.up('sm')]: {
       width: 120,
-      "&:focus": {
-        width: 200
-      }
-    }
-  }
+      '&:focus': {
+        width: 200,
+      },
+    },
+  },
 });
@@ -68,3 +68,3 @@
   <>
-    <Typography noWrap color={"textSecondary"} className={classes.header}>
+    <Typography noWrap color={'textSecondary'} className={classes.header}>
       Layout v1.1
@@ -81,7 +81,7 @@ </Typography>
           root: classes.inputRoot,
-          input: classes.inputInput
+          input: classes.inputInput,
         }}
       />
     </div>
-    {screen === "xs" && (
+    {screen === 'xs' && (
       <IconButton>
@@ -91,3 +91,3 @@ <Icon>more_vert</Icon>
     )}
-    {screen === "sm" && (
+    {screen === 'sm' && (
       <>
@@ -102,3 +102,3 @@ <IconButton>
     )}
-    {isWidthUp("md", screen) && (
+    {isWidthUp('md', screen) && (
       <>
@@ -120,7 +120,9 @@ <IconButton>
 HeaderEx.propTypes = {
-  screen: PropTypes.string.isRequired,
-  classes: PropTypes.shape({}).isRequired
+  screen: PropTypes.string,
+  classes: PropTypes.shape({}).isRequired,
 };
-HeaderEx.defaultProps = {};
+HeaderEx.defaultProps = {
+  screen: null,
+};
 
 export default withStyles(styles)(HeaderEx);

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

133879

1.01%

Number of package files

50

2.04%

Lines of code

2420

0.67%

No dependency changes