Merge pull request #12 from siriwatknp/develop

v1.2.5

README.md

@@ -11,10 +11,10 @@ This project based on [React Material-UI](https://material-ui.com/), so you have
 
 ```bash
 // 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
 ```
 
 ## Demo

src/components/Root.js

@@ -13,8 +13,7 @@ const Root = ({ children, config }) => {
   const [collapsed, setCollapsed] = useState(false);
   const [opened, setOpened] = useState(false);
   const mergedConfig = useMergedConfig(config, initialConfig);
-  const screen = useWidth();
-  console.log('screen', screen);
+  const screen = useWidth(); // screen could be null at first render
   return (
     <LayoutContext.Provider
       value={{

src/hooks/useAutoCollapse.js

@@ -20,7 +20,7 @@ export default () => {
   }
 
   useEffect(() => {
-    if (collapsible) {
+    if (collapsible && screen) {
       if (collapsed && screen === collapsedBreakpoint) {
         setCollapsed(false);
       }

src/hooks/useHeightAdjustment.js

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { useTheme } from '@material-ui/core';
 import createGetScreenValue from 'utils/createGetScreenValue';
+import someIs from 'utils/someIs';
 import useConfig from './useConfig';
 import useWidth from './useWidth';
 
@@ -14,20 +15,21 @@ export default (appBarHeight, interval) => {
     initialAdjustmentHeight,
     heightAdjustmentSpeed,
     heightAdjustmentDisabled,
+    navVariant,
   } = useConfig();
   const currentScreen = useWidth();
   const getScreenValue = createGetScreenValue(keys, currentScreen);
   const initialHeight = getScreenValue(appBarHeight, initialAdjustmentHeight);
 
   if (heightAdjustmentDisabled) return 0; // disabled by user.
-  if (clipped && headerPosition === 'sticky') return initialHeight;
-  if (
-    !clipped &&
-    (headerPosition !== 'static' || headerPosition !== 'relative')
-  ) {
+  if (navVariant === 'temporary') return 0;
+  if (!clipped) {
     // do not run the effect below if behavior is not right.
     return 0;
   }
+  if (clipped && someIs(['sticky', 'fixed'], headerPosition)) {
+    return initialHeight;
+  }
 
   const [height, setHeight] = useState(initialHeight);
   const debounced = useRef(() =>

src/utils/someIs.js

@@ -0,0 +1 @@
+export default (items, value) => items.some(item => item === value);

stories/mock/HeaderEx.js

@@ -1,69 +1,69 @@
-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';
 
 const styles = ({ spacing, transitions, breakpoints, palette, shape }) => ({
   header: {
     fontWeight: 900,
     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%',
   },
   inputInput: {
     borderRadius: 4,
     paddingTop: spacing(1),
     paddingRight: spacing(1),
     paddingBottom: spacing(1),
     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,
+      },
+    },
+  },
 });
 
 const HeaderEx = ({ classes, screen }) => (
   <>
-    <Typography noWrap color={"textSecondary"} className={classes.header}>
+    <Typography noWrap color={'textSecondary'} className={classes.header}>
       Layout v1.1
     </Typography>
     <div className={classes.grow} />
@@ -75,16 +75,16 @@ const HeaderEx = ({ classes, screen }) => (
         placeholder="Search…"
         classes={{
           root: classes.inputRoot,
-          input: classes.inputInput
+          input: classes.inputInput,
         }}
       />
     </div>
-    {screen === "xs" && (
+    {screen === 'xs' && (
       <IconButton>
         <Icon>more_vert</Icon>
       </IconButton>
     )}
-    {screen === "sm" && (
+    {screen === 'sm' && (
       <>
         <IconButton>
           <Icon>favorite</Icon>
@@ -94,7 +94,7 @@ const HeaderEx = ({ classes, screen }) => (
         </IconButton>
       </>
     )}
-    {isWidthUp("md", screen) && (
+    {isWidthUp('md', screen) && (
       <>
         <IconButton>
           <Icon>favorite</Icon>
@@ -111,9 +111,11 @@ const HeaderEx = ({ classes, screen }) => (
 );
 
 HeaderEx.propTypes = {
-  screen: PropTypes.string.isRequired,
-  classes: PropTypes.shape({}).isRequired
+  screen: PropTypes.string,
+  classes: PropTypes.shape({}).isRequired,
+};
+HeaderEx.defaultProps = {
+  screen: null,
 };
-HeaderEx.defaultProps = {};
 
 export default withStyles(styles)(HeaderEx);