@sap-ux/ui-components
Version:
SAP UI Components Library
78 lines • 3.07 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UITooltip = exports.UITooltipDelay = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
Object.defineProperty(exports, "UITooltipDelay", { enumerable: true, get: function () { return react_2.TooltipDelay; } });
const UICallout_1 = require("../UICallout");
/**
* UITooltip component
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip
* it can be used like <UITooltip tooltipProps={TooltipUtils.renderContent(value.name)}>{value.name}</UITooltip>
*
* @exports
* @class UITooltip
* @extends {React.Component<UITooltipProps, {}>}
*/
class UITooltip extends react_1.default.Component {
/**
* Initializes component properties.
*
* @param {UITooltipProps} props
*/
constructor(props) {
super(props);
}
/**
* @returns {JSX.Element}
*/
render() {
const maxWidth = this.props.maxWidth ?? 200;
const TooltipHostStyles = () => ({
...{
root: {
display: 'inline-block'
},
content: {
backgroundColor: UICallout_1.CALLOUT_STYLES.background,
color: UICallout_1.CALLOUT_STYLES.text,
fontFamily: UICallout_1.CALLOUT_STYLES.font
}
},
...this.props.styles
});
const CalloutStyles = () => {
// We can not reuse `UICallout` component from `UITooltip`, but we can reuse same styles from `UICallout` component
// In result callout in Tooltip would look same/similar
return (0, UICallout_1.getCalloutStyle)({
calloutMinWidth: 0,
// Apply some different styles
styles: {
root: {
display: 'inline-block'
},
calloutMain: {
padding: 10,
maxWidth
}
}
});
};
const CalloutProps = {
beakWidth: 10,
styles: CalloutStyles
};
const tooltipHost = (react_1.default.createElement(react_2.TooltipHost, { ...this.props, styles: TooltipHostStyles, calloutProps: { ...CalloutProps, ...this.props.calloutProps } }));
return this.props.showOnFocus ? (tooltipHost) : (react_1.default.createElement("div", { onFocusCapture: (event) => {
if (event.target.parentElement && event.target.parentElement.classList.contains('ms-TooltipHost')) {
// Stop propagation to avoid display of tooltip on focus
event.stopPropagation();
}
} }, tooltipHost));
}
}
exports.UITooltip = UITooltip;
//# sourceMappingURL=UITooltip.js.map