@material-ui/core#useScrollTrigger TypeScript Examples

The following examples show how to use @material-ui/core#useScrollTrigger. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: AppBar.tsx    From firetable with Apache License 2.0 6 votes vote down vote up 
AppBar: React.FunctionComponent<IAppBarProps> = () => {
  const classes = useStyles();
  const theme = useTheme();
  const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });

  return (
    <MuiAppBar
      position="sticky"
      color="default"
      className={classes.appBar}
      elevation={trigger ? 4 : 0}
    >
      <Toolbar>
        <Grid item xs>
          <FiretableLogo />
        </Grid>

        <Grid item>
          <Button
            component={Link}
            to={routes.signOut}
            color="primary"
            variant="outlined"
          >
            Sign Out
          </Button>
        </Grid>
      </Toolbar>
    </MuiAppBar>
  );
}
Example #2
Source File: PersistentDrawerLeft.tsx    From max-todos with MIT License 6 votes vote down vote up 
function HideOnScroll(props: Props) {
  const { children, window } = props;
  // Note that you normally won't need to set the window ref as useScrollTrigger
  // will default to window.
  // This is only being set here because the demo is in an iframe.
  const trigger = useScrollTrigger({ target: window ? window() : undefined });

  return (
    <Slide appear={false} direction="down" in={!trigger}>
      {children}
    </Slide>
  );
}
Example #3
Source File: ScrollTop.tsx    From UsTaxes with GNU Affero General Public License v3.0 6 votes vote down vote up 
ScrollTop = (): ReactElement => {
  const classes = useStyles()
  const trigger = useScrollTrigger({
    target: window,
    disableHysteresis: true,
    threshold: 100
  })

  const handleClick = () => {
    window.scrollTo({ top: 0, behavior: 'smooth' })
  }

  return (
    <Zoom in={trigger}>
      <div onClick={handleClick} role="presentation" className={classes.root}>
        <Fab color="default" size="small" aria-label="scroll back to top">
          <KeyboardArrowUpIcon />
        </Fab>
      </div>
    </Zoom>
  )
}
Example #4
Source File: index.tsx    From firetable with Apache License 2.0 5 votes vote down vote up 
export default function HomeNavigation({
  children,
  open,
  setOpen,
  handleCreateTable,
}: IHomeNavigationProps) {
  const classes = useStyles();
  const trigger = useScrollTrigger({ disableHysteresis: true, threshold: 0 });

  return (
    <Grid
      container
      wrap="nowrap"
      alignItems="flex-start"
      className={clsx(open && classes.open)}
    >
      <Grid item className={classes.navDrawerContainer}>
        <NavDrawer
          open={open}
          onClose={() => setOpen(false)}
          handleCreateTable={handleCreateTable}
        />
      </Grid>

      <Grid item xs>
        <AppBar
          color="inherit"
          elevation={trigger ? 4 : 0}
          className={classes.appBar}
        >
          <Container>
            <Toolbar className={clsx(classes.maxHeight, classes.toolbar)}>
              <IconButton
                aria-label="Open navigation drawer"
                onClick={() => setOpen(true)}
                edge="start"
                className={classes.openButton}
              >
                <MenuIcon />
              </IconButton>

              <div className={classes.logo}>
                <FiretableLogo />
              </div>

              <UserMenu />
            </Toolbar>
          </Container>
        </AppBar>

        {children}
      </Grid>
    </Grid>
  );
}
Example #5
Source File: Components.tsx    From baleen3 with Apache License 2.0 5 votes vote down vote up 
Components: React.FC<ComponentsProps> = ({
  orderers,
  sources,
  processors,
}) => {
  const [search, setSearch] = useState('')
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
  })

  const elevation = trigger ? 4 : 0

  const filteredOrderers = useMemo(
    () => filterComponents(orderers, search),
    [orderers, search]
  )

  const filteredSources = useMemo(
    () => filterComponents(sources, search),
    [sources, search]
  )

  const filteredProcessors = useMemo(
    () => filterComponents(processors, search),
    [processors, search]
  )

  return (
    <>
      <SearchInput
        elevation={elevation}
        maxWidth="1280px"
        width="100%"
        left="50%"
        position="fixed"
        px={2}
        py={3}
        onSearch={setSearch}
        style={{ transform: 'translateX(-50%)' }}
      />
      <Box height="75px" width="100%" />
      {orderers === undefined || filteredOrderers.length === 0 ? null : (
        <>
          <Heading.h1 py={4}>Orderers</Heading.h1>
          <Flex flexWrap="wrap">
            {filteredOrderers.map((orderer: Readonly<ComponentInfo>) => (
              <ComponentsInfoCard key={orderer.componentClass} info={orderer} />
            ))}
          </Flex>
        </>
      )}{' '}
      {sources === undefined || filteredSources.length === 0 ? null : (
        <>
          <Heading.h1 py={4}>Sources</Heading.h1>
          <Flex flexWrap="wrap">
            {filteredSources.map((source: Readonly<ComponentInfo>) => (
              <ComponentsInfoCard key={source.componentClass} info={source} />
            ))}
          </Flex>
        </>
      )}
      {processors === undefined || filteredProcessors.length === 0 ? null : (
        <>
          <Heading.h1 py={4}>Processors</Heading.h1>
          <Flex flexWrap="wrap">
            {filteredProcessors.map((processor: Readonly<ComponentInfo>) => (
              <ComponentsInfoCard
                key={processor.componentClass}
                info={processor}
              />
            ))}
          </Flex>
        </>
      )}
    </>
  )
}
Example #6
Source File: Header.tsx    From baleen3 with Apache License 2.0 5 votes vote down vote up 
Header: React.FC<HeaderProps> = ({
  position = 'sticky',
  children = {},
}) => {
  const trigger = useScrollTrigger({
    disableHysteresis: true,
    threshold: 0,
  })

  const elevation = trigger ? 4 : 0

  const { main, tools = [], errors = [] } = children

  return (
    <>
      <HeaderBar
        elevation={tools.length > 0 ? 0 : elevation}
        position={position}
      >
        <Container maxWidth="lg">
          <AppToolbar height="64px">
            <Box flexGrow={1}>
              <Link to="/">
                <Button variant="text">
                  <HeaderLogo />
                </Button>
              </Link>
            </Box>
            {main}
            <Link to="/components" aria-label="components">
              <IconButton ml={3} title="Components">
                <Icons.Build />
              </IconButton>
            </Link>
            <Link to="/help" aria-label="help">
              <IconButton title="Help">
                <Icons.Help />
              </IconButton>
            </Link>
            <ThemeSwitch lightColor="action.active" darkColor="action.active" />
          </AppToolbar>
        </Container>
      </HeaderBar>
      {tools.length > 0 ? (
        <Box height="32px">
          <HeaderAppBar
            margin={position === 'sticky' ? '64px' : '0'}
            elevation={errors.length > 0 ? 0 : elevation}
            position={position === 'sticky' ? 'fixed' : 'relative'}
            color="default"
          >
            <Container maxWidth="lg">
              <AppToolbar height="32px">
                <Box flexGrow={1} />
                {tools}
              </AppToolbar>
            </Container>
          </HeaderAppBar>
        </Box>
      ) : null}
      {errors.length > 0 ? (
        <Box height="54px">
          <MessageAppBar margin="96px" elevation={elevation} position="fixed">
            <Container maxWidth="lg">
              {/* Just showing first error */}
              <MessageBar message={errors[0]} severity="error" />
            </Container>
          </MessageAppBar>
        </Box>
      ) : null}
    </>
  )
}