You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.0 KiB
TypeScript
40 lines
1.0 KiB
TypeScript
import React from 'react';
|
|
import Button from '@material-ui/core/Button';
|
|
import Popover from '@material-ui/core/Popover';
|
|
|
|
interface Props {
|
|
label: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
export class PopoverDisplay extends React.Component<Props> {
|
|
state = {
|
|
anchorEl: undefined as any,
|
|
};
|
|
|
|
render() {
|
|
return (
|
|
<React.Fragment>
|
|
<Button
|
|
size="small"
|
|
variant="outlined"
|
|
color="secondary"
|
|
style={{ padding: 0 }}
|
|
onClick={(event) => this.setState({ anchorEl: event.currentTarget })}
|
|
>
|
|
{this.props.label}
|
|
</Button>
|
|
<Popover
|
|
open={Boolean(this.state.anchorEl)}
|
|
anchorEl={this.state.anchorEl}
|
|
onClose={() => this.setState({ anchorEl: undefined })}
|
|
anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}
|
|
transformOrigin={{ vertical: 'top', horizontal: 'center' }}
|
|
>
|
|
<div style={{ padding: '2rem' }}>{this.props.children}</div>
|
|
</Popover>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
}
|