@adaptabletools/adaptable-cjs
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
48 lines (47 loc) • 3.12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.AdaptablePopover = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const StringExtensions_1 = require("../../Utilities/Extensions/StringExtensions");
const UIHelper_1 = require("../UIHelper");
const ButtonInfo_1 = require("../Components/Buttons/ButtonInfo");
const icons_1 = require("../../components/icons");
const OverlayTrigger_1 = tslib_1.__importDefault(require("../../components/OverlayTrigger"));
const rebass_1 = require("rebass");
class AdaptablePopover extends React.Component {
render() {
let messageType = this.props.MessageType != null ? this.props.MessageType : 'Info';
const showIcon = this.props.showIcon ?? true;
let useButton = this.props.useButton != null ? this.props.useButton : false;
let popoverMinWidth = this.props.popoverMinWidth != null ? this.props.popoverMinWidth.toString() + 'px' : 'auto';
const title = StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.props.headerText)
? this.props.headerText
: '';
const popoverClickRootClose = (React.createElement(rebass_1.Box, { className: "ab-Popover", style: {
margin: '0px',
padding: '0px',
minWidth: popoverMinWidth,
maxWidth: this.props.popoverMaxWidth ?? 300,
} },
title ? (React.createElement(rebass_1.Text, { fontSize: 4, padding: 2 }, title)) : null,
React.createElement(rebass_1.Box, { className: "ab-Popover__body", padding: this.props.popupPadding ?? 2 }, this.props.bodyText.map((textOrHTML, index) => (React.createElement("span", { key: index }, textOrHTML))))));
const icon = 'info'; // - think this is wrong - UIHelper.getGlyphByMessageType(messageType);
const color = UIHelper_1.UIHelper.getColorByMessageType(messageType);
const iconStyle = {
color,
fill: 'currentColor',
};
return (React.createElement(rebass_1.Flex, { alignItems: "center", className: this.props.className },
React.createElement(OverlayTrigger_1.default
// showTriangle
, {
// showTriangle
visible: this.props.visible, render: () => popoverClickRootClose, showEvent: (this.props.showEvent || 'mouseenter'), hideEvent: (this.props.hideEvent || 'mouseleave'), style: {
overflow: 'visible',
}, defaultZIndex: 100000, alignPosition: this.props.alignPosition }, useButton ? (React.createElement(ButtonInfo_1.ButtonInfo, { style: iconStyle, variant: "text", onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText }, this.props.children)) : (React.createElement("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' } },
this.props.children,
showIcon && React.createElement(icons_1.Icon, { name: icon, style: iconStyle }))))));
}
}
exports.AdaptablePopover = AdaptablePopover;