@sap-ux/ui-components
Version:
SAP UI Components Library
78 lines • 2.9 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.UIMessageBar = exports.UIMessageBarType = void 0;
const react_1 = __importDefault(require("react"));
const react_2 = require("@fluentui/react");
Object.defineProperty(exports, "UIMessageBarType", { enumerable: true, get: function () { return react_2.MessageBarType; } });
const Icons_1 = require("../Icons");
/**
* UIMessageBar component
* based on https://developer.microsoft.com/en-us/fluentui#/controls/web/MessageBar
*
* @exports
* @class UIMessageBar
* @extends {React.Component<IMessageBarProps, {}>}
*/
class UIMessageBar extends react_1.default.Component {
/**
* Initializes component properties.
*
* @param {IMessageBarProps} props
*/
constructor(props) {
super(props);
this.setStyle = (props) => {
const { messageBarType } = props;
return {
root: {
...((messageBarType === react_2.MessageBarType.error ||
messageBarType === react_2.MessageBarType.success ||
messageBarType === react_2.MessageBarType.info ||
messageBarType === react_2.MessageBarType.warning) && {
backgroundColor: 'transparent'
})
},
innerText: {
fontSize: 13,
lineHeight: 18,
color: 'var(--vscode-foreground)',
selectors: {
p: {
margin: 0
}
}
}
};
};
}
/**
* Returns the corresponding UI icon for the given message type.
*
* @param {MessageBarType} [type] - The type of the message (optional).
* @returns {UiIcons} The UI icon that corresponds to the given message type.
*/
getMessageTypeIcon(type) {
switch (type) {
case react_2.MessageBarType.error:
return Icons_1.UiIcons.Error;
case react_2.MessageBarType.info:
return Icons_1.UiIcons.Info;
case react_2.MessageBarType.warning:
return Icons_1.UiIcons.Warning;
default:
return Icons_1.UiIcons.Success;
}
}
/**
* @returns {JSX.Element}
*/
render() {
const iconName = this.getMessageTypeIcon(this.props.messageBarType);
return (react_1.default.createElement(react_2.MessageBar, { ...this.props, messageBarIconProps: { iconName }, styles: this.setStyle(this.props) }, this.props.children));
}
}
exports.UIMessageBar = UIMessageBar;
//# sourceMappingURL=UIMessageBar.js.map