Skip to content

Commit cbc9c75

Browse files
fifoosidMapTo0
fifoosid
authored and
MapTo0
committed
feat(ui5-messagestrip): initial implementation (#80)
1 parent d888d43 commit cbc9c75

File tree

15 files changed

+691
-0
lines changed

15 files changed

+691
-0
lines changed

‎packages/main/bundle.esm.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import Select from "./dist/Select";
3030
import ShellBar from "./dist/ShellBar";
3131
import ShellBarItem from "./dist/ShellBarItem";
3232
import Switch from "./dist/Switch";
33+
import MessageStrip from "./dist/MessageStrip";
3334
import TabContainer from "./dist/TabContainer";
3435
import Tab from "./dist/Tab";
3536
import TabSeparator from "./dist/TabSeparator";

‎packages/main/entries-less.esm.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -149,3 +149,7 @@ import "./src/themes/sap_fiori_3/ListItemBase.less";
149149
import "./src/themes/sap_belize/ListItem.less";
150150
import "./src/themes/sap_belize_hcb/ListItem.less";
151151
import "./src/themes/sap_fiori_3/ListItem.less";
152+
153+
import "./src/themes/sap_belize/MessageStrip.less";
154+
import "./src/themes/sap_belize_hcb/MessageStrip.less";
155+
import "./src/themes/sap_fiori_3/MessageStrip.less";

‎packages/main/src/MessageStrip.hbs‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div class="{{classes.main}}">
2+
{{#unless ctr.hideIcon}}
3+
<ui5-icon class="ui5-messagestrip-icon" src="{{icon}}"></ui5-icon>
4+
{{/unless}}
5+
6+
<span class="{{classes.label}}">{{ctr._nodeText}}</span>
7+
8+
{{#unless ctr.hideCloseButton}}
9+
<ui5-icon
10+
class="{{classes.closeIcon}}"
11+
src="sap-icon://decline"
12+
tabindex="0"
13+
@press="{{ctr._closeButton.press}}">
14+
</ui5-icon>
15+
{{/unless}}
16+
</div>

‎packages/main/src/MessageStrip.js‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import WebComponent from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/WebComponent";
2+
import URI from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/types/URI";
3+
import Bootstrap from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/Bootstrap";
4+
import ShadowDOM from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM";
5+
import MessageStripTemplateContext from "./MessageStripTemplateContext";
6+
import MessageStripType from "./types/MessageStripType";
7+
import MessageStripRenderer from "./build/compiled/MessageStripRenderer.lit";
8+
import Icon from "./Icon";
9+
10+
// Styles
11+
import belize from "./themes/sap_belize/MessageStrip.less";
12+
import belizeHcb from "./themes/sap_belize_hcb/MessageStrip.less";
13+
import fiori3 from "./themes/sap_fiori_3/MessageStrip.less";
14+
15+
ShadowDOM.registerStyle("sap_belize", "MessageStrip.css", belize);
16+
ShadowDOM.registerStyle("sap_belize_hcb", "MessageStrip.css", belizeHcb);
17+
ShadowDOM.registerStyle("sap_fiori_3", "MessageStrip.css", fiori3);
18+
19+
/**
20+
* @public
21+
*/
22+
const metadata = {
23+
tag: "ui5-messagestrip",
24+
styleUrl: [
25+
"MessageStrip.css",
26+
],
27+
usesNodeText: true,
28+
properties: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
29+
30+
/**
31+
* Defines the <code>ui5-messagestrip</code> type.
32+
* <br></br>
33+
* <b>Note:</b> Available options are <code>Information"</code>, <code>"Positive"</code>, <code>"Negative"</code>,
34+
* and "Warning".
35+
*
36+
* @type {MessageStripType}
37+
* @defaultvalue "Information"
38+
* @public
39+
*/
40+
type: { type: MessageStripType, defaultValue: MessageStripType.Information },
41+
42+
/**
43+
* Defines the icon to be displayed as graphical element within the <code>ui5-messagestrip</code>.
44+
* If no icon is given, the default icon for the MessageStrip type will be added.
45+
* The SAP-icons font provides numerous options.
46+
* <br></br>
47+
* Example:
48+
* <br>
49+
* <pre>ui5-messagestrip icon="sap-icon://palette"</pre>
50+
*
51+
* See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
52+
*
53+
* @type {URI}
54+
* @defaultvalue ""
55+
* @public
56+
*/
57+
icon: { type: URI, defaultValue: null },
58+
59+
/**
60+
* Defines whether the MessageStrip renders icon in the beginning.
61+
*
62+
* @type {boolean}
63+
* @defaultvalue false
64+
* @public
65+
*/
66+
hideIcon: { type: Boolean, defaultValue: false },
67+
68+
/**
69+
* Defines whether the MessageStrip renders close icon.
70+
*
71+
* @type {boolean}
72+
* @defaultvalue false
73+
* @public
74+
*/
75+
hideCloseButton: { type: Boolean, defaultValue: false },
76+
77+
_closeButton: { type: Object },
78+
},
79+
events: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
80+
81+
/**
82+
* Fired when the close button is pressed either with a
83+
* click/tap or by using the Enter or Space key.
84+
*
85+
* @event
86+
* @public
87+
*/
88+
close: {},
89+
},
90+
};
91+
92+
/**
93+
* @class
94+
*
95+
* <h3 class="comment-api-title">Overview</h3>
96+
*
97+
* The <code>ui5-messagestrip</code> component enables the embedding of app-related messages.
98+
* It displays 4 types of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative.
99+
* Each message can have a close button, so that it can be removed from the UI if needed.
100+
*
101+
* <h3>Usage</h3>
102+
*
103+
* For the <code>ui5-messagestrip</code> component, you can define whether it displays
104+
* an icon in the beginning and a close button. Moreover, its size and background
105+
* can be controlled with CSS.
106+
*
107+
* <h3>ES6 Module Import</h3>
108+
*
109+
* <code>import "@ui5/webcomponents/dist/MessageStrip";</code>
110+
*
111+
* @constructor
112+
* @author SAP SE
113+
* @alias sap.ui.webcomponents.main.MessageStrip
114+
* @extends WebComponent
115+
* @tagname ui5-messagestrip
116+
* @usestextcontent
117+
* @public
118+
* @since 0.9.0
119+
*/
120+
class MessageStrip extends WebComponent {
121+
static get metadata() {
122+
return metadata;
123+
}
124+
125+
static get renderer() {
126+
return MessageStripRenderer;
127+
}
128+
129+
static get calculateTemplateContext() {
130+
return MessageStripTemplateContext.calculate;
131+
}
132+
133+
constructor() {
134+
super();
135+
136+
this._closeButton = {
137+
press: this._handleCloseIconPress.bind(this),
138+
};
139+
}
140+
141+
_handleCloseIconPress() {
142+
this.fireEvent("close", {});
143+
}
144+
145+
static async define(...params) {
146+
await Promise.all([
147+
Icon.define(),
148+
]);
149+
150+
super.define(...params);
151+
}
152+
}
153+
154+
Bootstrap.boot().then(_ => {
155+
MessageStrip.define();
156+
});
157+
158+
export default MessageStrip;

‎packages/main/src/MessageStripTemplateContext.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
class MessageStripTemplateContext {
2+
static calculate(state) {
3+
return {
4+
ctr: state,
5+
classes: {
6+
label: MessageStripTemplateContext.getLabelClasses(state),
7+
closeIcon: {
8+
"ui5-messagestrip-close-icon": true,
9+
},
10+
main: {
11+
"ui5-messagestrip": true,
12+
"ui5-messagestrip-icon--hidden": state.hideIcon,
13+
"ui5-messagestrip-close-icon--hidden": state.hideCloseButton,
14+
[MessageStripTemplateContext.getTypeClasses(state)]: true,
15+
},
16+
},
17+
icon: MessageStripTemplateContext.getIcon(state),
18+
};
19+
}
20+
21+
static iconMappings() {
22+
return {
23+
"Information": "sap-icon://message-information",
24+
"Positive": "sap-icon://message-success",
25+
"Negative": "sap-icon://message-error",
26+
"Warning": "sap-icon://message-warning",
27+
};
28+
}
29+
30+
static typeClasses() {
31+
return {
32+
"Information": "ui5-messagestrip--info",
33+
"Positive": "ui5-messagestrip--positive",
34+
"Negative": "ui5-messagestrip--negative",
35+
"Warning": "ui5-messagestrip--warning",
36+
};
37+
}
38+
39+
static getIcon(state) {
40+
return state.icon || MessageStripTemplateContext.iconMappings()[state.type];
41+
}
42+
43+
static getLabelClasses(state) {
44+
return {
45+
"ui5-messagestrip-text": true,
46+
"ui5-messagestripNoCloseButton": state.hideCloseButton,
47+
};
48+
}
49+
50+
static getTypeClasses(state) {
51+
return MessageStripTemplateContext.typeClasses()[state.type];
52+
}
53+
}
54+
55+
export default MessageStripTemplateContext;

0 commit comments

Comments
 (0)