jobiqo-cl/lib/src/components/02-atoms/16-popover/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
var React = require('react');
var React__default = _interopDefault(React);
var clickOustside = require('../../../hooks/clickOustside.js');
var styles = require('./styles.js');

/**
 * @file index.tsx
 *
 * @fileoverview Shows contents inside a popover. Also displays a
 * trigger for displaying the popover.
 */
const Popover = (_a) => {
    var { children, trigger, position = 'bottom', onToggle, maxHeight } = _a, props = tslib_es6.__rest(_a, ["children", "trigger", "position", "onToggle", "maxHeight"]);
    const ref = React.useRef();
    const [shown, setShown] = React.useState(false);
    const Trigger = trigger;
    clickOustside.default(ref, () => {
        setShown(false);
        if (onToggle) {
            onToggle(false);
        }
    });
    return (React__default.createElement(styles.PopoverWrapper, Object.assign({ ref: ref, position: position }, props),
        React__default.cloneElement(Trigger, {
            onClick: e => {
                setShown(!shown);
                if (onToggle) {
                    onToggle(false);
                }
            }
        }),
        shown && (React__default.createElement(styles.PopoverContent, Object.assign({ position: position, maxHeight: maxHeight }, props), children))));
};

exports.Popover = Popover;