synapse-react-client
Version:
[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps
49 lines • 3.52 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.MarkdownPopover = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
var react_popper_1 = require("react-popper");
var react_transition_group_1 = require("react-transition-group");
var MarkdownSynapse_1 = (0, tslib_1.__importDefault)(require("./MarkdownSynapse"));
var MarkdownPopover = function (_a) {
var _b;
var children = _a.children, contentProps = _a.contentProps, placement = _a.placement, _c = _a.showCloseButton, showCloseButton = _c === void 0 ? true : _c, actionButton = _a.actionButton, strategy = _a.strategy, style = _a.style;
placement = placement !== null && placement !== void 0 ? placement : 'bottom-start';
var _d = (0, react_1.useState)(false), show = _d[0], setShow = _d[1];
// We intentionally use useState instead of useRef, see https://popper.js.org/react-popper/v2/#example
var _e = (0, react_1.useState)(null), referenceElement = _e[0], setReferenceElement = _e[1];
var _f = (0, react_1.useState)(null), popperElement = _f[0], setPopperElement = _f[1];
var _g = (0, react_1.useState)(null), arrowElement = _g[0], setArrowElement = _g[1];
var _h = (0, react_popper_1.usePopper)(referenceElement, popperElement, {
placement: placement,
strategy: strategy,
modifiers: [
{ name: 'arrow', options: { element: arrowElement } },
{
name: 'offset',
options: {
offset: [0, 10],
},
},
],
}), styles = _h.styles, attributes = _h.attributes;
var popover = (react_1.default.createElement(react_transition_group_1.CSSTransition, { in: show, timeout: 200, classNames: "fade-in-out", mountOnEnter: true },
react_1.default.createElement("div", (0, tslib_1.__assign)({ className: "Tooltip SRC-popover bootstrap-4-backport", style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, style), styles.popper), ref: setPopperElement }, attributes.popper),
react_1.default.createElement(MarkdownSynapse_1.default, (0, tslib_1.__assign)({}, contentProps)),
react_1.default.createElement("div", { className: "TooltipButtonContainer" },
actionButton && (react_1.default.createElement(react_bootstrap_1.Button, { variant: (_b = actionButton.variant) !== null && _b !== void 0 ? _b : 'primary-500', className: "pill", onClick: function () {
actionButton.onClick();
if (actionButton.closePopoverOnClick) {
setShow(false);
}
} }, actionButton.content)),
showCloseButton && (react_1.default.createElement(react_bootstrap_1.Button, { variant: "light", className: "pill", onClick: function () { return setShow(false); } }, "Close"))),
react_1.default.createElement("div", { className: "arrow", "data-popper-arrow": true, ref: setArrowElement, style: styles.arrow }))));
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("span", { className: "PopoverContainer bootstrap-4-backport", onClick: function () { return setShow(function (val) { return !val; }); }, ref: setReferenceElement }, children),
popover));
};
exports.MarkdownPopover = MarkdownPopover;
//# sourceMappingURL=MarkdownPopover.js.map