@adaptabletools/adaptable
Version:
Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements
34 lines (33 loc) • 2.79 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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 { Popover, PopoverContent, PopoverTrigger } from '../../components/ui/popover';
import { Box, Flex } from '../../components/Flex';
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 icon = 'info';
const color = UIHelper.getColorByMessageType(messageType);
const iconStyle = {
color,
fill: 'currentColor',
};
const showEvent = this.props.showEvent || 'mouseenter';
const openOnHover = showEvent === 'mouseenter';
const triggerElement = useButton ? (_jsx(ButtonInfo, { style: iconStyle, variant: "text", onClick: () => null, icon: showIcon && icon, tooltip: this.props.tooltipText, disabled: this.props.disabled, children: this.props.children })) : (_jsxs("div", { title: this.props.tooltipText, tabIndex: 0, style: { cursor: 'pointer', display: 'inline-block' }, children: [this.props.children, showIcon && _jsx(Icon, { name: icon, style: iconStyle })] }));
const controlledProps = this.props.visible !== undefined ? { open: this.props.visible } : {};
return (_jsx(Flex, { alignItems: "center", className: this.props.className, children: _jsxs(Popover, { ...controlledProps, children: [_jsx(PopoverTrigger, { nativeButton: !!useButton, openOnHover: openOnHover, delay: 0, closeDelay: 0, render: triggerElement }), _jsxs(PopoverContent, { align: "start", sideOffset: 10, className: "ab-Popover twa:border twa:border-primarylight twa:w-auto twa:gap-0 twa:p-0", style: {
minWidth: popoverMinWidth,
maxWidth: this.props.popoverMaxWidth ?? 300,
}, children: [title ? _jsx(Box, { className: "twa:text-4 twa:p-2", children: title }) : null, _jsx(Box, { className: `ab-Popover__body ${(this.props.popupPadding ?? 2) === 0 ? 'twa:p-0' : 'twa:p-2'}`, children: this.props.bodyText.map((textOrHTML, index) => (_jsx("span", { children: textOrHTML }, index))) })] })] }) }));
}
}