From ea20dbec5755b4e37afd2baf27e220124c3ab919 Mon Sep 17 00:00:00 2001 From: Mark Brocato Date: Wed, 3 Jun 2020 15:39:24 +0300 Subject: [PATCH] =?UTF-8?q?Add=20variant=20prop=20to=20AppBar=20with=20rel?= =?UTF-8?q?ative,=20fixed,=20and=20hide=20values.=20The=E2=80=A6=20(#94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add variant prop to AppBar with relative, fixed, and hide values. The fixed prop is now deprecated. * some cleanup --- src/AppBar.js | 31 ++++++++++++++++++++++++++----- test/AppBar.test.js | 9 +++++++-- 2 files changed, 33 insertions(+), 7 deletions(-) diff --git a/src/AppBar.js b/src/AppBar.js index 2535284e..8ef67d62 100644 --- a/src/AppBar.js +++ b/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,7 +50,11 @@ 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 }) @@ -54,7 +62,10 @@ export default function AppBar({ children, style, fixed, offlineWarning, classes let appBar = ( ) - if (!fixed) { + if (variant === 'hide') { appBar = ( {appBar} @@ -75,7 +86,7 @@ export default function AppBar({ children, style, fixed, offlineWarning, classes return ( <> -
+ {(variant === 'hide' || variant === 'fixed') &&
} {offline &&
{offlineWarning}
} {appBar} @@ -89,7 +100,9 @@ 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, @@ -97,9 +110,17 @@ AppBar.propTypes = { * 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, } diff --git a/test/AppBar.test.js b/test/AppBar.test.js index fe699dde..ddff2a56 100644 --- a/test/AppBar.test.js +++ b/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 ( - + ) @@ -46,6 +46,11 @@ describe('AppBar', () => { expect(wrapper.find(Slide)).toHaveLength(0) }) + it('should accept variant="relative"', () => { + wrapper = mount() + expect(wrapper.find(Slide)).toHaveLength(0) + }) + // it('should not have any classes except wrap when not scrolled', async () => { // window.scrollY = 0