Add variant prop to AppBar with relative, fixed, and hide values. The… (#94)

* Add variant prop to AppBar with relative, fixed, and hide values. The fixed prop is now deprecated.

* some cleanup

Author: markbrocato

src/AppBar.js

@@ -3,6 +3,7 @@ import { makeStyles } from '@material-ui/core/styles'
 import { AppBar as MUIAppBar, Toolbar, useScrollTrigger, Slide } from '@material-ui/core'
 import PropTypes from 'prop-types'
 import PWAContext from './PWAContext'
+import clsx from 'clsx'
 
 const useStyles = makeStyles(theme => ({
   /**
@@ -19,6 +20,9 @@ const useStyles = makeStyles(theme => ({
     flexDirection: 'column',
     alignItems: 'stretch',
   },
+  relative: {
+    position: 'relative',
+  },
   /**
    * Styles applied to the spacer that fills the height behind the floating toolbar.
    */
@@ -46,15 +50,22 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-export default function AppBar({ children, style, fixed, offlineWarning, classes }) {
+export default function AppBar({ children, style, variant, fixed, offlineWarning, classes }) {
+  if (fixed) {
+    variant = 'fixed'
+  }
+
   const trigger = useScrollTrigger()
   classes = useStyles({ classes })
 
   const { offline } = useContext(PWAContext)
 
   let appBar = (
     <MUIAppBar
-      className={classes.root}
+      className={clsx({
+        [classes.root]: true,
+        [classes.relative]: variant === 'relative',
+      })}
       style={{
         ...style,
       }}
@@ -65,7 +76,7 @@ export default function AppBar({ children, style, fixed, offlineWarning, classes
     </MUIAppBar>
   )
 
-  if (!fixed) {
+  if (variant === 'hide') {
     appBar = (
       <Slide appear={false} in={!trigger}>
         {appBar}
@@ -75,7 +86,7 @@ export default function AppBar({ children, style, fixed, offlineWarning, classes
 
   return (
     <>
-      <div className={classes.spacer} />
+      {(variant === 'hide' || variant === 'fixed') && <div className={classes.spacer} />}
       {offline && <div className={classes.offline}>{offlineWarning}</div>}
       {appBar}
     </>
@@ -89,17 +100,27 @@ AppBar.propTypes = {
   classes: PropTypes.object,
 
   /**
-   * Set as `true` if the AppBar should be fixed position.
+   * Affixes the AppBar to the top of the viewport. This prop is deprecated.
+   * Use `variant="fixed"` instead.
+   * @deprecated
    */
   fixed: PropTypes.bool,
 
   /**
    * String or Element to render within the offline warning container at the top of the app.
    */
   offlineWarning: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+
+  /**
+   * * relative - The AppBar stays at the top of the page.
+   * * fixed - The AppBar stays at the top of the viewport.
+   * * hide - The same as fixed, but the app bar automatically hides when the user scrolls down.
+   */
+  variant: PropTypes.oneOf(['relative', 'fixed', 'hide']),
 }
 
 AppBar.defaultProps = {
   offlineWarning: 'Your device lost its internet connection.',
+  variant: 'hide',
   fixed: false,
 }

test/AppBar.test.js

@@ -14,11 +14,11 @@ jest.useFakeTimers()
 describe('AppBar', () => {
   let wrapper
 
-  const Test = ({ offline = false, offlineMessage, fixed = false }) => {
+  const Test = ({ offline = false, offlineMessage, ...others }) => {
     return (
       <PWAContext.Provider value={{ offline }}>
         <MuiThemeProvider theme={theme}>
-          <AppBar offlineWarning={offlineMessage} fixed={fixed} />
+          <AppBar offlineWarning={offlineMessage} {...others} />
         </MuiThemeProvider>
       </PWAContext.Provider>
     )
@@ -46,6 +46,11 @@ describe('AppBar', () => {
     expect(wrapper.find(Slide)).toHaveLength(0)
   })
 
+  it('should accept variant="relative"', () => {
+    wrapper = mount(<Test variant="relative" />)
+    expect(wrapper.find(Slide)).toHaveLength(0)
+  })
+
   // it('should not have any classes except wrap when not scrolled', async () => {
   //   window.scrollY = 0