Skip to content

Commit

Permalink
Showing 5 changed files with 32 additions and 15 deletions.
14 changes: 9 additions & 5 deletions packages/base/src/UI5Element.ts
Original file line number Diff line number Diff line change
@@ -22,7 +22,7 @@ import { registerTag, isTagRegistered, recordTagRegistrationFailure } from "./Cu
import { observeDOMNode, unobserveDOMNode } from "./DOMObserver.js";
import { skipOriginalEvent } from "./config/NoConflict.js";
import getEffectiveDir from "./locale/getEffectiveDir.js";
import { kebabToCamelCase, camelToKebabCase } from "./util/StringHelper.js";
import { kebabToCamelCase, camelToKebabCase, kebabToPascalCase } from "./util/StringHelper.js";
import isValidPropertyName from "./util/isValidPropertyName.js";
import { getSlotName, getSlottedNodesList } from "./util/SlotsHelper.js";
import arraysAreEqual from "./util/arraysAreEqual.js";
@@ -934,10 +934,14 @@ abstract class UI5Element extends HTMLElement {
*/
fireEvent<T>(name: string, data?: T, cancelable = false, bubbles = true): boolean {
const eventResult = this._fireEvent(name, data, cancelable, bubbles);
const camelCaseEventName = kebabToCamelCase(name);

if (camelCaseEventName !== name) {
return eventResult && this._fireEvent(camelCaseEventName, data, cancelable, bubbles);
const pascalCaseEventName = kebabToPascalCase(name);

// pascal events are more convinient for native react usage
// live-change:
// Before: onlive-change
// After: onLiveChange
if (pascalCaseEventName !== name) {
return eventResult && this._fireEvent(pascalCaseEventName, data, cancelable, bubbles);
}

return eventResult;
15 changes: 14 additions & 1 deletion packages/base/src/util/StringHelper.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
const kebabToCamelMap = new Map<string, string>();
const camelToKebabMap = new Map<string, string>();
const kebabToPascalMap = new Map<string, string>();

const kebabToCamelCase = (string: string) => {
if (!kebabToCamelMap.has(string)) {
@@ -23,4 +24,16 @@ const toCamelCase = (parts: Array<string>) => {
}).join("");
};

export { kebabToCamelCase, camelToKebabCase };
const kebabToPascalCase = (src: string) => {
const cachedName = kebabToPascalMap.get(src);
if (cachedName) {
return cachedName;
}

const camelStr = kebabToCamelCase(src);
const result = camelStr.charAt(0).toUpperCase() + camelStr.slice(1);
kebabToPascalMap.set(src, result);
return result;
};

export { kebabToCamelCase, camelToKebabCase, kebabToPascalCase };
6 changes: 3 additions & 3 deletions packages/fiori/test/pages/NotificationList_test_page.html
Original file line number Diff line number Diff line change
@@ -218,15 +218,15 @@
<br >
<ui5-button>Some button</ui5-button>
<script>
notificationList.addEventListener("ui5-itemClick", function(event) {
notificationList.addEventListener("ui5-item-click", function(event) {
clickInput.value = event.detail.item.titleText;
});

notificationList.addEventListener("ui5-itemClose", function(event) {
notificationList.addEventListener("ui5-item-close", function(event) {
closeInput.value = event.detail.item.titleText;
});

notificationList.addEventListener("ui5-itemToggle", function(event) {
notificationList.addEventListener("ui5-item-toggle", function(event) {
toggleInput.value = event.detail.item.titleText;
});

4 changes: 2 additions & 2 deletions packages/main/test/pages/Dialog.html
Original file line number Diff line number Diff line change
@@ -623,7 +623,7 @@
const listContainerDialog = document.getElementById("listContainerDialogId");
const listContainerDialogCloseBtn = document.getElementById("listContainerDialogCloseBtnId");

listContainer.addEventListener("ui5-selectionChange", function (event) {
listContainer.addEventListener("ui5-selection-change", function (event) {
listContainerDialog.open = true;
});

@@ -700,7 +700,7 @@
window["msg-dialog"].open = true;
});

window["prevent-dialog"].addEventListener("ui5-beforeClose", function (event) {
window["prevent-dialog"].addEventListener("ui5-before-close", function (event) {
if (preventClosing) {
event.preventDefault();
window["confirm-dialog"].open = true;
8 changes: 4 additions & 4 deletions packages/main/test/pages/MultiComboBox.html
Original file line number Diff line number Diff line change
@@ -237,7 +237,7 @@

<div class="demo-section">
<span>Select all with groups</span>

<br>
<ui5-multi-combobox show-select-all id="mcb-select-all-grouping" value-state="Critical">
<ui5-mcb-item-group header-text="Asia">
@@ -259,7 +259,7 @@
<ui5-mcb-item text="United States"></ui5-mcb-item>
</ui5-mcb-item-group>
</ui5-multi-combobox>

<br>

<ui5-multi-combobox show-select-all id="mcb-select-all">
@@ -297,7 +297,7 @@
<span id="select-all-event">Selected items count: <span>0</span></span>

<script>
document.getElementById("mcb-select-all-vs").addEventListener("ui5-selectionChange", e => {
document.getElementById("mcb-select-all-vs").addEventListener("ui5-selection-change", e => {
console.log("selection change")
document.querySelector("#select-all-event span").textContent = e.detail.items.length;
});
@@ -598,7 +598,7 @@ <h3>MultiComboBox in Compact</h3>
var closeCounter = 0;
const multiComboBox = document.querySelector("#mcb-prevent");

document.getElementById("mcb").addEventListener("ui5-selectionChange", function (event) {
document.getElementById("mcb").addEventListener("ui5-selection-change", function (event) {
selectionChangeCounter += 1;
eventNameInput.value = "selectionChange";
eventParamsInput.value = event.detail.items.length;

0 comments on commit 43e28fa

Please sign in to comment.