@adaptabletools/adaptable
Version:
Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
43 lines (42 loc) • 2.78 kB
JavaScript
import * as React from 'react';
import { StringExtensions } from '../../Utilities/Extensions/StringExtensions';
import { UIHelper } from '../UIHelper';
import { ButtonInfo } from '../Components/Buttons/ButtonInfo';
import { Icon } from '../../components/icons';
import OverlayTrigger from '../../components/OverlayTrigger';
import { Flex, Box, Text } from 'rebass';
export 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.IsNotNullOrEmpty(this.props.headerText)
? this.props.headerText
: '';
const popoverClickRootClose = (React.createElement(Box, { className: "ab-Popover", style: {
margin: '0px',
padding: '0px',
minWidth: popoverMinWidth,
maxWidth: this.props.popoverMaxWidth ?? 300,
} },
title ? (React.createElement(Text, { fontSize: 4, padding: 2 }, title)) : null,
React.createElement(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.getColorByMessageType(messageType);
const iconStyle = {
color,
fill: 'currentColor',
};
return (React.createElement(Flex, { alignItems: "center", className: this.props.className },
React.createElement(OverlayTrigger
// 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, { 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(Icon, { name: icon, style: iconStyle }))))));
}
}