Init

Preview: http://dashboards.webkom.co/react/airframe

app/components/UncontrolledPopover/UncontrolledPopover.js

@@ -0,0 +1,71 @@
+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 };

app/components/UncontrolledPopover/index.js

@@ -0,0 +1,3 @@
+import { UncontrollerPopover } from './UncontrolledPopover';
+
+export default UncontrollerPopover;