mui-layout
Advanced tools
Comparing version 1.2.4 to 1.2.5
@@ -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, { |
@@ -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); |
@@ -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), |
{ | ||
"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", |
@@ -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 @@ |
@@ -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); |
Sorry, the diff of this file is not supported yet
133879
50
2420