[Drawer] New improvements (#7925)

mui · Aug 26, 2017 · 6492643 · 6492643
1 parent e705451
commit 6492643
Show file tree

Hide file tree

Showing 29 changed files with 1,227 additions and 427 deletions.
diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js
@@ -8,6 +8,7 @@ import Toolbar from 'material-ui/Toolbar';
 import Drawer from 'material-ui/Drawer';
 import Typography from 'material-ui/Typography';
 import Divider from 'material-ui/Divider';
+import Hidden from 'material-ui/Hidden';
 import AppDrawerNavItem from 'docs/src/modules/components/AppDrawerNavItem';
 import Link from 'docs/src/modules/components/Link';
 import { pageToTitle } from 'docs/src/modules/utils/helpers';
@@ -78,57 +79,73 @@ function reduceChildRoutes(props, activePage, items, childPage, index) {
   return items;
 }
 
+const GITHUB_RELEASE_BASE_URL = 'https://github.com/callemall/material-ui/releases/tag/';
+
 function AppDrawer(props, context) {
-  const { classes, className, docked, onRequestClose } = props;
-  const GITHUB_RELEASE_BASE_URL = 'https://github.com/callemall/material-ui/releases/tag/';
-  let other = {};
-
-  if (!docked) {
-    other = {
-      keepMounted: true,
-    };
-  }
+  const { classes, className, disablePermanent, mobileOpen, onRequestClose } = props;
+
+  const drawer = (
+    <div className={classes.nav}>
+      <Toolbar className={classes.toolbar}>
+        <Link className={classes.title} href="/" onClick={onRequestClose}>
+          <Typography type="title" gutterBottom color="inherit">
+            Material-UI
+          </Typography>
+        </Link>
+        {process.env.MATERIAL_UI_VERSION
+          ? <Link
+              className={classes.anchor}
+              href={`${GITHUB_RELEASE_BASE_URL}v${process.env.MATERIAL_UI_VERSION}`}
+            >
+              <Typography type="caption">{`v${process.env.MATERIAL_UI_VERSION}`}</Typography>
+            </Link>
+          : null}
+        <Divider absolute />
+      </Toolbar>
+      {renderNavItems(props, context.pages, context.activePage)}
+    </div>
+  );
 
   return (
-    <Drawer
-      className={className}
-      classes={{
-        paper: classes.paper,
-      }}
-      open={props.open}
-      onRequestClose={onRequestClose}
-      docked={docked}
-      {...other}
-    >
-      <div className={classes.nav}>
-        <Toolbar className={classes.toolbar}>
-          <Link className={classes.title} href="/" onClick={onRequestClose}>
-            <Typography type="title" gutterBottom color="inherit">
-              Material-UI
-            </Typography>
-          </Link>
-          {process.env.MATERIAL_UI_VERSION
-            ? <Link
-                className={classes.anchor}
-                href={`${GITHUB_RELEASE_BASE_URL}v${process.env.MATERIAL_UI_VERSION}`}
-              >
-                <Typography type="caption">{`v${process.env.MATERIAL_UI_VERSION}`}</Typography>
-              </Link>
-            : null}
-          <Divider absolute />
-        </Toolbar>
-        {renderNavItems(props, context.pages, context.activePage)}
-      </div>
-    </Drawer>
+    <div className={className}>
+      <Hidden lgUp={!disablePermanent}>
+        <Drawer
+          classes={{
+            paper: classes.paper,
+          }}
+          type="temporary"
+          open={mobileOpen}
+          onRequestClose={onRequestClose}
+          ModalProps={{
+            keepMounted: true,
+          }}
+        >
+          {drawer}
+        </Drawer>
+      </Hidden>
+      {disablePermanent
+        ? null
+        : <Hidden lgDown implementation="css">
+            <Drawer
+              classes={{
+                paper: classes.paper,
+              }}
+              type="permanent"
+              open
+            >
+              {drawer}
+            </Drawer>
+          </Hidden>}
+    </div>
   );
 }
 
 AppDrawer.propTypes = {
   classes: PropTypes.object.isRequired,
   className: PropTypes.string,
-  docked: PropTypes.bool.isRequired,
+  disablePermanent: PropTypes.bool.isRequired,
+  mobileOpen: PropTypes.bool.isRequired,
   onRequestClose: PropTypes.func.isRequired,
-  open: PropTypes.bool.isRequired,
 };
 
 AppDrawer.contextTypes = {

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -11,7 +11,6 @@ import Typography from 'material-ui/Typography';
 import AppBar from 'material-ui/AppBar';
 import Toolbar from 'material-ui/Toolbar';
 import IconButton from 'material-ui/IconButton';
-import withWidth, { isWidthUp } from 'material-ui/utils/withWidth';
 import MenuIcon from 'material-ui-icons/Menu';
 import LightbulbOutline from 'material-ui-icons/LightbulbOutline';
 import Github from 'docs/src/modules/components/Github';
@@ -20,7 +19,14 @@ import AppSearch from 'docs/src/modules/components/AppSearch';
 import { pageToTitle } from 'docs/src/modules/utils/helpers';
 
 // Disaply a progress bar between route transitions
-NProgress.configure({ showSpinner: false });
+NProgress.configure({
+  template: `
+    <div class="bar" role="bar">
+      <dt></dt>
+      <dd></dd>
+    </div>
+  `,
+});
 
 Router.onRouteChangeStart = () => {
   NProgress.start();
@@ -49,23 +55,45 @@ const styles = theme => ({
     '#nprogress': {
       pointerEvents: 'none',
       '& .bar': {
-        background: '#000',
         position: 'fixed',
+        background: '#000',
+        borderRadius: 1,
         zIndex: theme.zIndex.tooltip,
         top: 0,
         left: 0,
         width: '100%',
         height: 2,
       },
-      '& .peg': {
-        display: 'block',
+      '& dd, & dt': {
         position: 'absolute',
+        top: 0,
+        height: 2,
+        boxShadow: '#000 1px 0 6px 1px',
+        borderRadius: '100%',
+        animation: 'nprogress-pulse 2s ease-out 0s infinite',
+      },
+      '& dd': {
+        opacity: 0.6,
+        width: 20,
         right: 0,
-        width: 100,
-        height: '100%',
-        boxShadow: '0 0 10px #000, 0 0 5px #000',
-        opacity: 1,
-        transform: 'rotate(3deg) translate(0px, -4px)',
+        clip: 'rect(-6px,22px,14px,10px)',
+      },
+      '& dt': {
+        opacity: 0.6,
+        width: 180,
+        right: -80,
+        clip: 'rect(-6px,90px,14px,-6px)',
+      },
+    },
+    '@keyframes nprogress-pulse': {
+      '30%': {
+        opacity: 0.6,
+      },
+      '60%': {
+        opacity: 0,
+      },
+      to: {
+        opacity: 0.6,
       },
     },
   },
@@ -89,49 +117,52 @@ const styles = theme => ({
     backgroundColor: 'transparent',
     boxShadow: 'none',
   },
-  [theme.breakpoints.up('lg')]: {
-    drawer: {
-      width: 250,
-    },
-    appBarShift: {
+  appBarShift: {
+    [theme.breakpoints.up('lg')]: {
       width: 'calc(100% - 250px)',
     },
-    navIconHide: {
+  },
+  drawer: {
+    [theme.breakpoints.up('lg')]: {
+      width: 250,
+    },
+  },
+  navIconHide: {
+    [theme.breakpoints.up('lg')]: {
       display: 'none',
     },
   },
 });
 
 class AppFrame extends React.Component<any, any> {
-  static defaultProps: $FlowFixMeProps;
   state = {
-    drawerOpen: false,
+    mobileOpen: false,
   };
 
   handleDrawerClose = () => {
-    this.setState({ drawerOpen: false });
+    this.setState({ mobileOpen: false });
   };
 
   handleDrawerToggle = () => {
-    this.setState({ drawerOpen: !this.state.drawerOpen });
+    this.setState({ mobileOpen: !this.state.mobileOpen });
   };
 
   handleToggleShade = () => {
     this.props.dispatch({ type: 'TOGGLE_THEME_SHADE' });
   };
 
   render() {
-    const { children, classes, width } = this.props;
+    const { children, classes } = this.props;
     const title =
       this.context.activePage.title !== false ? pageToTitle(this.context.activePage) : null;
 
-    let drawerDocked = isWidthUp('lg', width);
+    let disablePermanent = false;
     let navIconClassName = '';
     let appBarClassName = classes.appBar;
 
     if (title === null) {
       // home route, don't shift app bar or dock drawer
-      drawerDocked = false;
+      disablePermanent = true;
       appBarClassName += ` ${classes.appBarHome}`;
     } else {
       navIconClassName += ` ${classes.navIconHide}`;
@@ -176,9 +207,9 @@ class AppFrame extends React.Component<any, any> {
         </AppBar>
         <AppDrawer
           className={classes.drawer}
-          docked={drawerDocked}
+          disablePermanent={disablePermanent}
           onRequestClose={this.handleDrawerClose}
-          open={drawerDocked || this.state.drawerOpen}
+          mobileOpen={this.state.mobileOpen}
         />
         {children}
       </div>
@@ -190,7 +221,6 @@ AppFrame.propTypes = {
   children: PropTypes.node.isRequired,
   classes: PropTypes.object.isRequired,
   dispatch: PropTypes.func.isRequired,
-  width: PropTypes.string.isRequired,
 };
 
 AppFrame.contextTypes = {
@@ -203,6 +233,5 @@ export default compose(
   withStyles(styles, {
     name: 'AppFrame',
   }),
-  withWidth(),
   connect(),
 )(AppFrame);
diff --git a/docs/src/modules/components/AppWrapper.js b/docs/src/modules/components/AppWrapper.js
@@ -26,7 +26,6 @@ if (process.browser && !global.__INSERTION_POINT__) {
 }
 
 class AppWrapper extends React.Component<any, any> {
-  static defaultProps: $FlowFixMeProps;
   componentWillMount() {
     this.styleContext = getContext();
   }

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -55,7 +55,6 @@ const styles = theme => ({
 });
 
 class Demo extends React.Component<any, any> {
-  static defaultProps: $FlowFixMeProps;
   state = {
     codeOpen: false,
   };

diff --git a/docs/src/modules/components/Link.js b/docs/src/modules/components/Link.js
@@ -31,7 +31,6 @@ const styles = theme => ({
 });
 
 class OnClick extends React.Component<any, any> {
-  static defaultProps: $FlowFixMeProps;
   handleClick = event => {
     if (this.props.onClick) {
       this.props.onClick(event);

diff --git a/docs/src/modules/components/MarkdownDocs.js b/docs/src/modules/components/MarkdownDocs.js
@@ -49,7 +49,7 @@ function MarkdownDocs(props, context) {
     <AppContent className={classes.root}>
       <Head>
         <title>
-          {getTitle(markdown)}
+          {`${getTitle(markdown)} - Material-UI`}
         </title>
       </Head>
       <div className={classes.header}>

diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar.js b/docs/src/pages/demos/app-bar/ButtonAppBar.js
@@ -18,15 +18,19 @@ const styles = {
   flex: {
     flex: 1,
   },
+  menuButton: {
+    marginLeft: 12,
+    marginRight: 20,
+  },
 };
 
 function ButtonAppBar(props) {
   const classes = props.classes;
   return (
     <div className={classes.root}>
       <AppBar position="static">
-        <Toolbar>
-          <IconButton color="contrast" aria-label="Menu">
+        <Toolbar disableGutters>
+          <IconButton className={classes.menuButton} color="contrast" aria-label="Menu">
             <MenuIcon />
           </IconButton>
           <Typography type="title" color="inherit" className={classes.flex}>