Skip to content

Commit 280d35a

Browse files
ilhan007ilhan007
authored
feat(ui5-switch) add new web component (#102)
1 parent 284e88f commit 280d35a

File tree

12 files changed

+862
-0
lines changed

12 files changed

+862
-0
lines changed

‎packages/main/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import RadioButton from "./src/RadioButton";
2727
import Select from "./src/Select";
2828
import ShellBar from "./src/ShellBar";
2929
import ShellBarItem from "./src/ShellBarItem";
30+
import Switch from "./src/Switch";
3031
import TabContainer from "./src/TabContainer";
3132
import Tab from "./src/Tab";
3233
import TabSeparator from "./src/TabSeparator";

‎packages/main/src/Switch.hbs

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div {{> controlData}}
2+
class="{{classes.main}}"
3+
role="checkbox"
4+
aria-checked="{{ctr.checked}}"
5+
tabindex="{{tabIndex}}">
6+
<div class="ui5-switch-inner">
7+
<div class="ui5-switch-track">
8+
<div class="ui5-switch-slider">
9+
<span class="ui5-switch-text ui5-switch-text--on">{{textOn}}</span>
10+
<span class="ui5-switch-text ui5-switch-text--off">{{textOff}}</span>
11+
<span class="ui5-switch-handle"></span>
12+
</div>
13+
</div>
14+
</div>
15+
<input type='checkbox' ?checked="{{ctr.checked}}" class="ui5-switch-input" data-sap-no-tab-ref/>
16+
</div>

‎packages/main/src/Switch.js

+184
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
import WebComponent from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/WebComponent";
2+
import KeyCodes from "@ui5/webcomponents-core/dist/sap/ui/events/KeyCodes";
3+
import Bootstrap from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/Bootstrap";
4+
5+
// Template
6+
import ShadowDOM from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM";
7+
import SwitchRenderer from "./build/compiled/SwitchRenderer.lit";
8+
import SwitchTemplateContext from "./SwitchTemplateContext";
9+
import SwitchType from "./types/SwitchType";
10+
11+
// Styles
12+
import belize from "./themes/sap_belize/Switch.less";
13+
import belizeHcb from "./themes/sap_belize_hcb/Switch.less";
14+
import fiori3 from "./themes/sap_fiori_3/Switch.less";
15+
16+
ShadowDOM.registerStyle("sap_belize", "Switch.css", belize);
17+
ShadowDOM.registerStyle("sap_belize_hcb", "Switch.css", belizeHcb);
18+
ShadowDOM.registerStyle("sap_fiori_3", "Switch.css", fiori3);
19+
20+
/**
21+
* @public
22+
*/
23+
const metadata = {
24+
tag: "ui5-switch",
25+
styleUrl: ["Switch.css"],
26+
properties: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
27+
28+
/**
29+
* Defines if the <code>ui5-switch</code> is checked.
30+
* <br><br>
31+
* <b>Note:</b> The property can be changed with user interaction,
32+
* either by cliking/tapping on the <code>ui5-switch</code>, or by
33+
* pressing the <code>Enter</code> or <code>Space</code> key.
34+
*
35+
* @type {boolean}
36+
* @default false
37+
* @public
38+
*/
39+
checked: {
40+
type: Boolean,
41+
},
42+
43+
/**
44+
* Defines whether the <code>ui5-switch</code> is disabled.
45+
* <br><br>
46+
* <b>Note:</b> A disabled <code>ui5-switch</code> is noninteractive.
47+
*
48+
* @type {boolean}
49+
* @default false
50+
* @public
51+
*/
52+
disabled: {
53+
type: Boolean,
54+
},
55+
56+
/**
57+
* Defines the text of the <code>ui5-switch</code> when switched on.
58+
*
59+
* <br><br>
60+
* <b>Note:</b> We recommend using short texts (up to 3 letters, because larger texts might be cut off.
61+
* @type {string}
62+
* @public
63+
*/
64+
textOn: {
65+
type: String,
66+
defaultValue: "",
67+
},
68+
69+
/**
70+
* Defines the text of the <code>ui5-switch</code> when switched off.
71+
*
72+
* <br><br>
73+
* <b>Note:</b> We recommend using short texts (up to 3 letters, because larger texts might be cut off.
74+
* @type {string}
75+
* @public
76+
*/
77+
textOff: {
78+
type: String,
79+
defaultValue: "",
80+
},
81+
82+
/**
83+
* Defines the <code>ui5-switch</code> type.
84+
* <br>
85+
* Available options are <code>Textual</code> and <code>Graphical</code>.
86+
*
87+
* <br><br>
88+
* <b>Note:</b> If <code>Graphical</code> type is set,
89+
* positive and negative icons will replace the <code>textOn</code> and <code>textOff</code>.
90+
* @type {string}
91+
* @default Standard
92+
* @public
93+
*/
94+
type: {
95+
type: String,
96+
defaultValue: SwitchType.Textual,
97+
},
98+
},
99+
events: /** @lends sap.ui.webcomponents.main.Switch.prototype */ {
100+
101+
/**
102+
* Fired when the <code>ui5-switch</code> checked state changes.
103+
*
104+
* @public
105+
* @event
106+
*/
107+
change: {},
108+
},
109+
};
110+
111+
/**
112+
* @class
113+
*
114+
* <h3 class="comment-api-title">Overview</h3>
115+
* The <code>ui5-switch</code> component is used for changing between binary states.
116+
*
117+
* <h3>ES6 Module Import</h3>
118+
*
119+
* <code>import "@ui5/webcomponents/dist/Switch";</code>
120+
*
121+
* @constructor
122+
* @author SAP SE
123+
* @alias sap.ui.webcomponents.main.Switch
124+
* @extends sap.ui.webcomponents.base.WebComponent
125+
* @tagname ui5-switch
126+
* @public
127+
*/
128+
class Switch extends WebComponent {
129+
static get metadata() {
130+
return metadata;
131+
}
132+
133+
static get renderer() {
134+
return SwitchRenderer;
135+
}
136+
137+
constructor(state) {
138+
super(state);
139+
}
140+
141+
ontap(event) {
142+
if (this._tapAllowed(event.ui5target)) {
143+
this.toggle();
144+
}
145+
}
146+
147+
onkeydown(event) {
148+
if (event.keyCode === KeyCodes.SPACE) {
149+
event.preventDefault();
150+
}
151+
152+
if (event.keyCode === KeyCodes.ENTER) {
153+
this.toggle();
154+
}
155+
}
156+
157+
onkeyup(event) {
158+
if (event.keyCode === KeyCodes.SPACE) {
159+
this.toggle();
160+
}
161+
}
162+
163+
toggle() {
164+
if (!this.disabled) {
165+
this.checked = !this.checked;
166+
this.fireEvent("change");
167+
}
168+
}
169+
170+
_tapAllowed(target) {
171+
return target !== this;
172+
}
173+
174+
static get calculateTemplateContext() {
175+
return SwitchTemplateContext.calculate;
176+
}
177+
}
178+
179+
Bootstrap.boot().then(_ => {
180+
Switch.define();
181+
});
182+
183+
184+
export default Switch;

‎packages/main/src/SwitchTemplateContext.js

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import SwitchType from "./types/SwitchType";
2+
3+
class SwitchTemplateContext {
4+
static calculate(state) {
5+
const semantic = state.type === SwitchType.Semantic;
6+
const textOn = semantic ? "" : state.textOn;
7+
const textOff = semantic ? "" : state.textOff;
8+
const mainClasses = SwitchTemplateContext.getMainClasses(state);
9+
10+
const context = {
11+
ctr: state,
12+
textOn,
13+
textOff,
14+
tabIndex: state.disabled ? undefined : "0",
15+
classes: { main: mainClasses },
16+
};
17+
18+
return context;
19+
}
20+
21+
static getMainClasses(state) {
22+
return {
23+
"ui5-switch": true,
24+
"ui5-switch--disabled": state.disabled,
25+
"ui5-switch--checked": state.checked,
26+
"ui5-switch--semantic": state.type === SwitchType.Semantic,
27+
};
28+
}
29+
}
30+
31+
export default SwitchTemplateContext;

0 commit comments

Comments
 (0)