dynamic update radio group

AlexTorresDev · May 5, 2021 · e4a5df1 · e4a5df1
1 parent 2a939d7
commit e4a5df1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 11 deletions.
diff --git a/src/menu/menu.ts b/src/menu/menu.ts
@@ -257,7 +257,7 @@ export class CETMenu extends Disposable {
 				item = new Separator(menuItem, this.options);
 			} else if (menuItem.type === 'submenu' || menuItem.submenu) {
 				const submenuItems = (menuItem.submenu as Menu).items;
-				item = new Submenu(menuItem, submenuItems, this.parentData, this.options, this.closeSubMenu);
+				item = new Submenu(menuItem, this.items, submenuItems, this.parentData, this.options, this.closeSubMenu);
 
 				if (this.options.enableMnemonics) {
 					const mnemonic = item.getMnemonic();
@@ -274,7 +274,7 @@ export class CETMenu extends Disposable {
 				}
 			} else {
 				const menuItemOptions: IMenuOptions = { enableMnemonics: this.options.enableMnemonics };
-				item = new CETMenuItem(menuItem, menuItemOptions, this.closeSubMenu);
+				item = new CETMenuItem(menuItem, menuItemOptions, this.closeSubMenu, this.items);
 
 				if (this.options.enableMnemonics) {
 					const mnemonic = item.getMnemonic();
@@ -463,8 +463,8 @@ class Submenu extends CETMenuItem {
 	private showScheduler: RunOnceScheduler;
 	private hideScheduler: RunOnceScheduler;
 
-	constructor(item: MenuItem, private submenuItems: MenuItem[], private parentData: ISubMenuData, private submenuOptions?: IMenuOptions, closeSubMenu = () => {}) {
-		super(item, submenuOptions, closeSubMenu);
+	constructor(item: MenuItem, menuContainer: IMenuItem[], private submenuItems: MenuItem[], private parentData: ISubMenuData, private submenuOptions?: IMenuOptions, closeSubMenu = () => {}) {
+		super(item, submenuOptions, closeSubMenu, menuContainer);
 		this.showScheduler = new RunOnceScheduler(() => {
 			if (this.mouseOver) {
 				this.cleanupExistingSubmenu(false);
@@ -659,7 +659,7 @@ class Separator extends CETMenuItem {
 	private separatorElement: HTMLElement;
 
 	constructor(item: MenuItem, options: IMenuOptions) {
-		super(item, options);
+		super(item, options, null, null);
 	}
 
 	render(container: HTMLElement) {

diff --git a/src/menu/menuitem.ts b/src/menu/menuitem.ts
@@ -39,17 +39,19 @@ export class CETMenuItem extends Disposable implements IMenuItem {
 	private iconElement: HTMLElement;
 	private mnemonic: KeyCode;
 	protected closeSubMenu: () => void;
+	protected menuContainer: IMenuItem[];
 
 	private event: Electron.Event;
 	private currentWindow: BrowserWindow;
 
-	constructor(item: MenuItem, options: IMenuOptions = {}, closeSubMenu = () => { }) {
+	constructor(item: MenuItem, options: IMenuOptions = {}, closeSubMenu = () => {}, menuContainer: IMenuItem[]) {
 		super();
 
 		this.item = item;
 		this.options = options;
 		this.currentWindow = remote.getCurrentWindow();
 		this.closeSubMenu = closeSubMenu;
+		this.menuContainer = menuContainer;
 
 		// Set mnemonic
 		if (this.item.label && options.enableMnemonics) {
@@ -139,10 +141,13 @@ export class CETMenuItem extends Disposable implements IMenuItem {
 		}
 
 		if (this.item.type === 'checkbox') {
-			this.updateChecked();
-		} else {
-			this.closeSubMenu();
-		}
+            this.updateChecked();
+        } else if(this.item.type === 'radio') {
+            this.updateRadioGroup();
+        } else {
+            this.closeSubMenu();
+        }
+
 	}
 
 	focus(): void {
@@ -228,7 +233,8 @@ export class CETMenuItem extends Disposable implements IMenuItem {
 
 	pressKey(key: string, modifiers: string[] = []): void {
 		this.currentWindow.webContents.sendInputEvent({
-			type: "keydown",
+			type: "keyDown",
+			// @ts-ignore -> modifiers will always be of the right type
 			modifiers,
 			keyCode: key,
 		});
@@ -348,6 +354,20 @@ export class CETMenuItem extends Disposable implements IMenuItem {
 		}
 	}
 
+	updateRadioGroup() {
+        for (let menuItem of this.menuContainer) {
+            if (menuItem instanceof CETMenuItem && menuItem.item.type === 'radio' && menuItem !== this) {
+                removeClass(menuItem.itemElement, 'checked');
+                menuItem.itemElement.setAttribute('role', 'menuitem');
+                menuItem.itemElement.setAttribute('aria-checked', 'false');
+            }
+        }
+		addClass(this.itemElement, 'checked');
+        this.itemElement.setAttribute('role', 'menuitemcheckbox');
+        this.itemElement.setAttribute('aria-checked', 'true');
+    }
+
+
 	dispose(): void {
 		if (this.itemElement) {
 			removeNode(this.itemElement);