New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

mui-layout

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

mui-layout - npm Package Compare versions

Comparing version 1.2.4 to 1.2.5

dist/utils/someIs.js

4

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, {

@@ -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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc