@ticketmaster/prism/lib/components/Dropdown/Dropdown.js

Live Nation Component library

"use strict";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
            t[p[i]] = s[p[i]];
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Dropdown_styled_1 = require("./Dropdown.styled");
var useClickOutside_1 = require("../../hooks/useClickOutside");
function Dropdown(_a) {
    var _b = _a.positioned, positioned = _b === void 0 ? 'right' : _b, props = __rest(_a, ["positioned"]);
    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
    var _d = React.useState(0), arrowPos = _d[0], setArrowPos = _d[1];
    var buttonRef = React.useRef(null);
    var wrapperRef = React.useRef(null);
    useClickOutside_1.default(wrapperRef, function () {
        if (open === true) {
            setOpen(false);
        }
    });
    function toggleOpen() {
        if (buttonRef && buttonRef.current && arrowPos === 0) {
            setArrowPos(buttonRef.current.offsetWidth / 2);
        }
        setOpen(!open);
    }
    return (React.createElement(Dropdown_styled_1.DropdownWrapper, { ref: wrapperRef },
        React.createElement("span", { id: props.id + "_elem", hidden: true }, props.label),
        React.createElement(Dropdown_styled_1.DropdownButton, { "aria-haspopup": "menu", "aria-labelledby": props.id + "_elem " + props.id + "_button", id: props.id + "_button", "aria-expanded": open, ref: buttonRef, open: open, onClick: toggleOpen }, props.children),
        React.createElement(Dropdown_styled_1.DropdownListWrapper, { positioned: positioned },
            React.createElement(Dropdown_styled_1.DropdownList, { role: "menu", "aria-labelledby": props.id + "_elem", positioned: positioned, arrowPos: arrowPos, open: open }, props.options.map(function (option, i) {
                return (React.createElement(Dropdown_styled_1.DropdownItem, { role: "menuitem", key: i }, option));
            })))));
}
exports.default = Dropdown;
//# sourceMappingURL=Dropdown.js.map