| /* |
| * Copyright (c) 2018 StreamNative. All Rights Reserved. |
| * |
| * Licensed under the Apache License, Version 2.0 (the "License"); |
| * you may not use this file except in compliance with the License. |
| * You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, software |
| * distributed under the License is distributed on an "AS IS" BASIS, |
| * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| * See the License for the specific language governing permissions and |
| * limitations under the License. |
| */ |
| import React, { Component } from 'react'; |
| import { Button, Card, CardBody, CardHeader, Popover, PopoverBody, PopoverHeader } from 'reactstrap'; |
| |
| class PopoverItem extends 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} onClick={this.toggle}> |
| {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 Popovers extends Component { |
| |
| constructor(props) { |
| super(props); |
| |
| this.toggle = this.toggle.bind(this); |
| this.state = { |
| popoverOpen: false, |
| popovers: [ |
| { |
| placement: 'top', |
| text: 'Top', |
| }, |
| { |
| placement: 'bottom', |
| text: 'Bottom', |
| }, |
| { |
| placement: 'left', |
| text: 'Left', |
| }, |
| { |
| placement: 'right', |
| text: 'Right', |
| }, |
| ], |
| }; |
| } |
| |
| toggle() { |
| this.setState({ |
| popoverOpen: !this.state.popoverOpen, |
| }); |
| } |
| |
| render() { |
| return ( |
| <div className="animated fadeIn"> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i><strong>Popovers</strong> |
| <div className="card-header-actions"> |
| <a href="https://reactstrap.github.io/components/popovers/" rel="noreferrer noopener" target="_blank" className="card-header-action"> |
| <small className="text-muted">docs</small> |
| </a> |
| </div> |
| </CardHeader> |
| <CardBody> |
| <Button id="Popover1" onClick={this.toggle}> |
| Launch Popover |
| </Button> |
| <Popover placement="bottom" isOpen={this.state.popoverOpen} target="Popover1" 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> |
| </CardBody> |
| </Card> |
| <Card> |
| <CardHeader> |
| <i className="fa fa-align-justify"></i><strong>Popovers</strong> |
| <small> list</small> |
| </CardHeader> |
| <CardBody> |
| {this.state.popovers.map((popover, i) => { |
| return <PopoverItem key={i} item={popover} id={i} />; |
| })} |
| </CardBody> |
| </Card> |
| </div> |
| ); |
| } |
| } |
| |
| export default Popovers; |