materialuiupgraded/docs/src/pages/utils/popper/FakedReferencePopper.js

Material-UI's workspace package

import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Popper from '@material-ui/core/Popper';
import Typography from '@material-ui/core/Typography';
import Fade from '@material-ui/core/Fade';
import Paper from '@material-ui/core/Paper';

const styles = theme => ({
  typography: {
    padding: theme.spacing.unit * 2,
  },
});

class FakedReferencePopper extends React.Component {
  state = {
    anchorEl: null,
    open: false,
  };

  handleMouseUp = () => {
    const selection = window.getSelection();

    // Resets when the selection has a length of 0
    if (!selection || selection.anchorOffset === selection.focusOffset) {
      this.handleClose();
      return;
    }

    const getBoundingClientRect = () => selection.getRangeAt(0).getBoundingClientRect();

    this.setState({
      open: true,
      anchorEl: {
        clientWidth: getBoundingClientRect().width,
        clientHeight: getBoundingClientRect().height,
        getBoundingClientRect,
      },
    });
  };

  handleClose = () => {
    if (!this.state.open) {
      return;
    }

    this.setState({ open: false });
  };

  render() {
    const { classes } = this.props;
    const { anchorEl, open } = this.state;
    const id = open ? 'faked-reference-popper' : null;

    return (
      <div onMouseLeave={this.handleClose}>
        <Typography aria-describedby={id} onMouseUp={this.handleMouseUp}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
          amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
          finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
          ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
          finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet
          facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
          lacinia tellus a libero volutpat maximus.
        </Typography>
        <Popper id={id} open={open} anchorEl={anchorEl} transition placement="bottom-start">
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Paper>
                <Typography className={classes.typography}>The content of the Popper.</Typography>
              </Paper>
            </Fade>
          )}
        </Popper>
      </div>
    );
  }
}

FakedReferencePopper.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(FakedReferencePopper);