@sap-ux/ui-components
Version:
SAP UI Components Library
61 lines • 2.52 kB
JavaScript
import { DirectionalHint } from '@fluentui/react';
import React from 'react';
import { UiIcons } from '../Icons.js';
import { UICallout } from '../UICallout/index.js';
import { UIIcon } from '../UIIcon/index.js';
import './UIActionCallout.scss';
/**
*
*
*/
export class UIActionCallout extends React.Component {
/**
* Initializes component properties.
*
* @param {ActionCalloutProps} props
*/
constructor(props) {
super(props);
this.actionDetail = props.actionDetail;
this.commandAction = props.commandAction;
this.targetElementId = props.targetElementId;
this.showInline = props.showInline;
this.anchor = React.createRef();
this.onCalloutClick = this.onCalloutClick.bind(this);
this.icon = props.icon;
this.onClick = props.onClick;
this.anchorClicked = false;
this.isError = props.isError ?? false;
}
onCalloutClick() {
if (this.onClick && !this.anchorClicked) {
this.onClick();
}
if (this.actionDetail.command && this.commandAction) {
this.commandAction(this.actionDetail.command);
}
else {
this.anchor.current?.click();
this.anchorClicked = false;
}
}
handleAnchorClick() {
this.anchorClicked = true;
}
/**
* @returns {JSX.Element}
*/
render() {
return (React.createElement(UICallout, { className: "UIActionCallout-callout", onClick: this.onCalloutClick, target: `#${this.targetElementId}`, isBeakVisible: true, doNotLayer: true, beakWidth: 10, calloutMaxWidth: 230, calloutMinWidth: 230, directionalHint: DirectionalHint.bottomLeftEdge, styles: {
calloutMain: { padding: '10px' },
root: {
position: this.showInline === false ? 'absolute' : 'sticky',
border: this.isError === true ? 'thin solid var(--vscode-errorForeground)' : 'thin solid none'
}
} },
this.icon?.render() ?? React.createElement(UIIcon, { iconName: UiIcons.HelpAction }),
React.createElement("a", { ref: this.anchor, href: this.actionDetail.url, className: "UIActionCallout-link", target: "_blank", rel: "noreferrer", onClick: () => this.handleAnchorClick() }, this.actionDetail.linkText),
React.createElement("div", { className: "UIActionCallout-subText" }, this.actionDetail.subText)));
}
}
//# sourceMappingURL=UIActionCallout.js.map