@gooddata/react-components
Version:
GoodData.UI - A powerful JavaScript library for building analytical applications
25 lines • 2.09 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// (C) 2007-2018 GoodData Corporation
var React = require("react");
var OutsideClickHandler_1 = require("../utils/OutsideClickHandler");
var MenuPosition_1 = require("../positioning/MenuPosition");
var MenuOpenedByClick = function (props) {
var outsideClick = function () { return props.onOpenedChange({ opened: false, source: "OUTSIDE_CLICK" }); };
var togglerWrapperClick = function () {
return props.onOpenedChange({ opened: !props.opened, source: "TOGGLER_BUTTON_CLICK" });
};
var OutsideClickHandlerWrapped = function (props) { return (
// UseCapture is set to false (default event bubbling). This has the disadvantage that we will not
// get notified of click events with preventDefault or stopPropagation methods called on them. On the
// other hand it greatly simplifies event handling with toggler elements, for example if we have
// opened menu and we used useCapture=true, and somebody clicked togger element, OutsideClickHandler
// would get notified, he would set opened state from true to false, and then togger element click
// handler would get notified, that would toggle it back to true, so menu would stay opened. This
// could be solved by OutsideClickHandler ignoring clicks that are inside togglerWrapped.
React.createElement(OutsideClickHandler_1.default, { onOutsideClick: outsideClick, useCapture: false }, props.children)); };
var togglerWrapped = (React.createElement("div", { onClick: togglerWrapperClick, className: "gd-menuOpenedByClick-togglerWrapped" }, props.toggler));
return (React.createElement(MenuPosition_1.default, { opened: props.opened, toggler: togglerWrapped, togglerWrapperClassName: props.togglerWrapperClassName, contentWrapper: OutsideClickHandlerWrapped, topLevelMenu: props.topLevelMenu, portalTarget: props.portalTarget, alignment: props.alignment, spacing: props.spacing, offset: props.offset }, props.children));
};
exports.default = MenuOpenedByClick;
//# sourceMappingURL=MenuOpenedByClick.js.map