72 lines
1.9 KiB
JavaScript
Executable File
72 lines
1.9 KiB
JavaScript
Executable File
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import _ from 'lodash';
|
|
import {
|
|
Popover
|
|
} from 'reactstrap';
|
|
|
|
class UncontrollerPopover extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
this.state = {
|
|
isOpen: false
|
|
};
|
|
}
|
|
|
|
componentDidMount() {
|
|
const { target } = this.props;
|
|
|
|
if (typeof document !== 'undefined') {
|
|
this.triggerElement = document.querySelector(`#${target}`);
|
|
|
|
if (!this.triggerElement) {
|
|
// eslint-disable-next-line no-console
|
|
console.error('UncontrolledPopover: \'target\' element has not been found in the DOM via querySelector');
|
|
return;
|
|
}
|
|
|
|
this.triggerElement.addEventListener('click', this.clickEventHandler.bind(this));
|
|
}
|
|
}
|
|
|
|
componentDidUpdate() {
|
|
if (this.props.activateTrigger && this.triggerElement) {
|
|
const { activeClassName } = this.props;
|
|
this.triggerElement.classList.toggle(activeClassName, this.state.isOpen);
|
|
}
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
if (this.triggerElement) {
|
|
this.triggerElement.removeEventListener('click', this.clickEventHandler);
|
|
}
|
|
}
|
|
|
|
clickEventHandler() {
|
|
this.setState({ isOpen: !this.state.isOpen });
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Popover
|
|
{ ..._.omit(this.props, ['activateTrigger', 'activeClassName']) }
|
|
isOpen={ this.state.isOpen }
|
|
toggle={ () => { this.setState({ isOpen: !this.state.isOpen }) } }
|
|
>
|
|
{ this.props.children }
|
|
</Popover>
|
|
)
|
|
}
|
|
}
|
|
UncontrollerPopover.propTypes = {
|
|
activateTrigger: PropTypes.bool,
|
|
activeClassName: PropTypes.string
|
|
};
|
|
UncontrollerPopover.defaultProps = {
|
|
activateTrigger: true,
|
|
activeClassName: 'active'
|
|
};
|
|
|
|
export { UncontrollerPopover };
|