Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-wizard): add parameter to selectionChange event #3034

Merged
merged 1 commit into from
Mar 30, 2021
Merged

feat(ui5-wizard): add parameter to selectionChange event #3034

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 9 additions & 4 deletions packages/fiori/src/Wizard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,12 +122,14 @@ const metadata = {
* @event sap.ui.webcomponents.fiori.Wizard#selection-change
* @param {HTMLElement} selectedStep the newly selected step
* @param {HTMLElement} previouslySelectedStep the previously selected step
* @param {Boolean} changeWithClick the selection changed due to user's click on step within the navigation
* @public
*/
"selection-change": {
detail: {
selectedStep: { type: HTMLElement },
previouslySelectedStep: { type: HTMLElement },
changeWithClick: { Boolean },
},
},
},
Expand Down Expand Up @@ -593,7 +595,7 @@ class Wizard extends UI5Element {
const selectedStep = this.selectedStep;
const newlySelectedIndex = this.slottedSteps.indexOf(stepToSelect);

this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex);
this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
this._closeRespPopover();
tabs[newlySelectedIndex].focus();
}
Expand Down Expand Up @@ -626,7 +628,8 @@ class Wizard extends UI5Element {
// change selection and fire "selection-change".
if (newlySelectedIndex >= 0 && newlySelectedIndex <= this.stepsCount - 1) {
const stepToSelect = this.slottedSteps[newlySelectedIndex];
this.switchSelectionFromOldToNewStep(this.selectedStep, stepToSelect, newlySelectedIndex);

this.switchSelectionFromOldToNewStep(this.selectedStep, stepToSelect, newlySelectedIndex, false);
this.selectionRequestedByScroll = true;
}
}
Expand Down Expand Up @@ -654,7 +657,7 @@ class Wizard extends UI5Element {

if (bExpanded || (!bExpanded && (newlySelectedIndex === 0 || newlySelectedIndex === this.steps.length - 1))) {
// Change selection and fire "selection-change".
this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex);
this.switchSelectionFromOldToNewStep(selectedStep, stepToSelect, newlySelectedIndex, true);
}
}

Expand Down Expand Up @@ -925,16 +928,18 @@ class Wizard extends UI5Element {
* @param {HTMLElement} selectedStep the old step
* @param {HTMLElement} stepToSelect the step to be selected
* @param {Integer} stepToSelectIndex the index of the newly selected step
* @param {Boolean} changeWithClick the selection changed due to user click in the step navigation
* @private
*/
switchSelectionFromOldToNewStep(selectedStep, stepToSelect, stepToSelectIndex) {
switchSelectionFromOldToNewStep(selectedStep, stepToSelect, stepToSelectIndex, changeWithClick) {
if (selectedStep && stepToSelect) {
selectedStep.selected = false;
stepToSelect.selected = true;

this.fireEvent("selection-change", {
selectedStep: stepToSelect,
previouslySelectedStep: selectedStep,
changeWithClick,
});

this.selectedStepIndex = stepToSelectIndex;
Expand Down
5 changes: 4 additions & 1 deletion packages/fiori/test/pages/Wizard_test.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,8 @@
Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec ppellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien corper eu, posuere malesuada nisl. Integer pellentesque leo sit amet dui vehicula, quis ullamcorper est pulvinar. Nam in libero sem. Suspendisse arcu metus, molestie a turpis a, molestie aliquet dui. Donec pulvinar, sapien
</ui5-label>

<ui5-input id="inpSelectionChangeCause" placeholder="step changed via click"></ui5-input>

<div style="display: flex; flex-direction: column;">
<div style="display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 1rem">
<ui5-label>Name</ui5-label>
Expand Down Expand Up @@ -310,9 +312,10 @@
<script>
var wiz = document.getElementById("wizTest");
var counter = 0;
wiz.addEventListener("ui5-selection-change", function () {
wiz.addEventListener("ui5-selection-change", function (event) {
console.log(event.detail.selectedStep);
inpSelectionChangeCounter.value = ++counter;
inpSelectionChangeCause.value = event.detail.changeWithClick;
});

toStep2.addEventListener("click", function () {
Expand Down
9 changes: 9 additions & 0 deletions packages/fiori/test/specs/Wizard.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ describe("Wizard general interaction", () => {
const step1InHeader = wiz.shadow$(`[data-ui5-index="1"]`);
const step2InHeader = wiz.shadow$(`[data-ui5-index="2"]`);
const inpSelectionChangeCounter = browser.$("#inpSelectionChangeCounter");
const inpSelectionChangeCause = browser.$("#inpSelectionChangeCause");

// act - click on the first step in the header
step1InHeader.click();
Expand All @@ -76,6 +77,9 @@ describe("Wizard general interaction", () => {
// assert - selection-change fired once
assert.strictEqual(inpSelectionChangeCounter.getProperty("value"), "1",
"Event selection-change fired once.");
// assert - selection-change fired due to user click
assert.strictEqual(inpSelectionChangeCause.getProperty("value"), "true",
"Event selection-change fired due to click.");
});

it("move to next step by SPACE/ENTER", () => {
Expand Down Expand Up @@ -139,6 +143,7 @@ describe("Wizard general interaction", () => {
const step2 = browser.$("#st2");
const step2InHeader = wiz.shadow$(`[data-ui5-index="2"]`);
const inpSelectionChangeCounter = browser.$("#inpSelectionChangeCounter");
const inpSelectionChangeCause = browser.$("#inpSelectionChangeCause");

// act - scroll the 2nd step into view
// Note: scrollIntoView works in Chrome, but if we start executing the test on every browser,
Expand All @@ -154,6 +159,10 @@ describe("Wizard general interaction", () => {

assert.strictEqual(inpSelectionChangeCounter.getProperty("value"), "4",
"Event selection-change fired 4th time due to scrolling.");

// assert - selection-change fired not becasue of user click
assert.strictEqual(inpSelectionChangeCause.getProperty("value"), "false",
"Event selection-change fired not becasue of user click, but scrolling");
});

it("tests dynamically increase step size and move to next step", () => {
Expand Down