CODEWITHSUNDEEP
reactjsmaterial-uistyled-components
ghostagent151
ghostagent151

Reputation: 1416

Convert this Material UI hook api for Popovers to styled component API for Popovers

I've edited my original post, so far I'm able to refactor away from hooks with this implementation, now, the behavior for moving the mouse cursor away does not close the popover. This is what I have so far:

import React, { Fragment, useState } from 'react';
import propTypes from '../../propTypes';

import { Grid, Typography, Box, Popover } from '@material-ui/core';
import { makeStyles, styled } from '@material-ui/core/styles';
import InfoIcon from '@material-ui/icons/InfoOutlined';
import { fade } from '@material-ui/core/styles/colorManipulator';

export const InfoIconWrapper = styled(InfoIcon)(({ theme }) => ({
  color: fade(theme.palette.black, 0.3),
}));

export const GridWrapper = styled(Grid)(({theme}) => ({
  pointerEvents: 'none',
  padding: theme.spacing(1),
}));

const DistributionLinePopover = ({ distributionLine }) => {
  const [anchorEl, setAnchorEl] = useState(null);

  const handlePopoverOpen = event => {
    setAnchorEl(event.currentTarget);
    console.log("open")
  };

  const handlePopoverClose = () => {
    setAnchorEl(null);
    console.log("close")
  };

  const open = Boolean(anchorEl);

  return (
    <Fragment>
      <Typography
        aria-owns={open ? 'mouse-over-popover' : undefined}
        aria-haspopup="true"
        onMouseEnter={handlePopoverOpen}

      >
        <InfoIconWrapper fontSize="small" />
      </Typography>
      <Popover
        id="mouse-over-popover"
        open={open}
        anchorEl={anchorEl}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'left',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'left',
        }}
        onClose={handlePopoverClose}
        // onMouseLeave={handlePopoverClose}
        disableRestoreFocus
      >
        <GridWrapper container>

What can I do to have the popover close when the user moves their mouse away from it? onExit, onExited, onExiting does not produce the desired behavior.

Upvotes: 1

Views: 301

Answers (2)

ghostagent151
ghostagent151

Reputation: 1416

Ok, the solution to the updated post is to replace onClose with onMouseOut.

Upvotes: 0

c_sagan
c_sagan

Reputation: 512

You need to use import { withStyles } from '@material-ui/core/styles'

Then, your styles are defined as such:

const styles = theme => ({
    ...
});

Your className attributes will be className={classes.popover} (or whichever you're using). Note, classes is passed into your component, so you would obtain it from the signature, i.e. function Component({classes}) { ... }

Finally, you export your class as such:

export default withStyles(styles)(Component)

Upvotes: 1

Related Questions