Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* eslint react/no-multi-comp: 0, react/prop-types: 0 */
- import React from 'react';
- import { Button, Popover, PopoverHeader, PopoverBody } from 'reactstrap';
- class PopoverItem extends React.Component {
- constructor(props) {
- super(props);
- this.toggle = this.toggle.bind(this);
- this.state = {
- popoverOpen: false
- };
- }
- toggle() {
- this.setState({
- popoverOpen: !this.state.popoverOpen
- });
- }
- render() {
- return (
- <span>
- <Button className="mr-1" color="secondary" id={'Popover-' + this.props.id} type="button">
- {this.props.item.text}
- </Button>
- <Popover placement={this.props.item.placement} isOpen={this.state.popoverOpen} target={'Popover-' + this.props.id} toggle={this.toggle}>
- <PopoverHeader>Popover Title</PopoverHeader>
- <PopoverBody>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</PopoverBody>
- </Popover>
- </span>
- );
- }
- }
- class PopoverExampleMulti extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- popovers: [
- {
- placement: 'top',
- text: 'Top'
- },
- {
- placement: 'bottom',
- text: 'Bottom'
- },
- {
- placement: 'left',
- text: 'Left'
- },
- {
- placement: 'right',
- text: 'Right'
- }
- ]
- };
- }
- render() {
- return (
- <div>
- { this.state.popovers.map((popover, i) => {
- return <PopoverItem key={i} item={popover} id={i} />;
- })}
- </div>
- );
- }
- }
- export default PopoverExampleMulti;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement