diff --git a/src/actions/action.ts b/src/actions/action.ts index 435b95ec6f..f249857f0a 100644 --- a/src/actions/action.ts +++ b/src/actions/action.ts @@ -170,7 +170,9 @@ export function createDropdownActionModelAdvanced(actionOptions: IAction, listOp const originalSelectionChanged = listOptions.onSelectionChanged; listOptions.onSelectionChanged = (item: Action, ...params: any[]) => { if (newAction.hasTitle) { newAction.title = item.title; } - originalSelectionChanged(item, params); + if (originalSelectionChanged) { + originalSelectionChanged(item, params); + } }; const popupModel: PopupModel = createPopupModelWithListModel(listOptions, popupOptions); @@ -192,7 +194,9 @@ export function createDropdownActionModelAdvanced(actionOptions: IAction, listOp export function createPopupModelWithListModel(listOptions: IListModel, popupOptions: IPopupOptionsBase): PopupModel { const listModel: ListModel = new ListModel(listOptions as any); listModel.onSelectionChanged = (item: Action) => { - listOptions.onSelectionChanged(item); + if (listOptions.onSelectionChanged) { + listOptions.onSelectionChanged(item); + } popupModel.hide(); }; @@ -428,7 +432,7 @@ export class Action extends BaseAction implements IAction, ILocalizableOwner { private createLocTitle(): LocalizableString { return this.createLocalizableString("title", this, true); } - public setItems(items: Array, onSelectionChanged: (item: Action, ...params: any[]) => void): void { + public setItems(items: Array, onSelectionChanged?: (item: Action, ...params: any[]) => void): void { this.markerIconName = "icon-next_16x16"; this.component = "sv-list-item-group"; this.items = [...items]; diff --git a/src/common-styles/sv-list.scss b/src/common-styles/sv-list.scss index 899f294348..cb94ed9add 100644 --- a/src/common-styles/sv-list.scss +++ b/src/common-styles/sv-list.scss @@ -90,7 +90,7 @@ .sv-list__item--with-icon.sv-list__item--with-icon { padding: 0; - .sv-list__item-body { + & > .sv-list__item-body { padding-top: calcSize(1.5); padding-bottom: calcSize(1.5); gap: calcSize(2); @@ -162,6 +162,10 @@ li:focus .sv-list__item.sv-list__item--selected { .sv-list__item-icon use { fill: $background; } + + .sv-list-item__marker-icon use { + fill: $primary-foreground; + } } .sv-multi-select-list .sv-list__item.sv-list__item--selected, diff --git a/src/common-styles/sv-popup.scss b/src/common-styles/sv-popup.scss index f3f440855c..13c985acf6 100644 --- a/src/common-styles/sv-popup.scss +++ b/src/common-styles/sv-popup.scss @@ -26,10 +26,14 @@ sv-popup { height: 0; } -.sv-popup-inner .sv-popup__container { +.sv-popup-inner > .sv-popup__container { margin-top: calcSize(-1); } +.sv-list__item--with-icon .sv-popup-inner > .sv-popup__container { + margin-top: calcSize(-0.5); +} + .sv-popup__container { background-color: $background-dim; box-shadow: $shadow-large; diff --git a/src/list.ts b/src/list.ts index 8742a7a2a0..8ffc14a447 100644 --- a/src/list.ts +++ b/src/list.ts @@ -32,7 +32,7 @@ export let defaultListCss = { }; export interface IListModel { items: Array; - onSelectionChanged: (item: IAction, ...params: any[]) => void; + onSelectionChanged?: (item: IAction, ...params: any[]) => void; allowSelection?: boolean; searchEnabled?: boolean; selectedItem?: IAction; @@ -90,10 +90,16 @@ export class ListModel extends ActionContainer let actions = super.getRenderedActions(); if (this.filterString) { - let newActions = [] as Array; + let newActions: Array = []; actions.forEach(action => { newActions.push(action); - if (action.items) action.items.forEach(item => newActions.push(item as T)); + if (action.items) { + action.items.forEach(item => { + const a = new Action(item); + if (!a.iconName) { a.iconName = action.iconName; } + newActions.push(a as IAction as T); + }); + } }); return newActions; } @@ -186,6 +192,10 @@ export class ListModel extends ActionContainer if (this.allowSelection) { this.selectedItem = itemValue; } + const action = (itemValue as IAction).action; + if (!!action) { + action(itemValue); + } if (!!this.onSelectionChanged) { this.onSelectionChanged(itemValue); } diff --git a/tests/listModelTests.ts b/tests/listModelTests.ts index 6870bb3c2b..ea316ba61e 100644 --- a/tests/listModelTests.ts +++ b/tests/listModelTests.ts @@ -440,3 +440,30 @@ QUnit.test("ListModel search in subitems", function (assert) { ListModel.MINELEMENTCOUNT = oldValueMINELEMENTCOUNT; }); +QUnit.test("ListModel onItemClick", function (assert) { + + let items: Array = []; + for (let index = 0; index < 4; ++index) { + items.push(new Action({ id: "test" + index, title: "test" + index })); + } + let actionCalled = 0; + let selectCalled = 0; + items[1].action = () => { + actionCalled++; + }; + const list = new ListModel({ + items: items, + onSelectionChanged: () => { + selectCalled++; + }, + allowSelection: true + } as any); + + list.onItemClick(items[0]); + assert.equal(actionCalled, 0); + assert.equal(selectCalled, 1); + + list.onItemClick(items[1]); + assert.equal(actionCalled, 1); + assert.equal(selectCalled, 2); +}); \ No newline at end of file