Change custom Checkbox to expose an onChange Event instead of taking an...

Change custom Checkbox to expose an onChange Event instead of taking an onChange callback in options.
Otherwise it's impossible to reference the checkbox from inside the callback while constructing a Checkbox

src/vs/base/browser/ui/checkbox/checkbox.ts

@@ -5,21 +5,19 @@
 
 'use strict';
 
-import 'vs/css!./checkbox';
-
 import * as DOM from 'vs/base/browser/dom';
-import * as objects from 'vs/base/common/objects';
-import { KeyCode } from 'vs/base/common/keyCodes';
-import { Widget } from 'vs/base/browser/ui/widget';
 import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { Widget } from 'vs/base/browser/ui/widget';
 import { Color } from 'vs/base/common/color';
+import { Emitter, Event } from 'vs/base/common/event';
+import { KeyCode } from 'vs/base/common/keyCodes';
+import * as objects from 'vs/base/common/objects';
+import 'vs/css!./checkbox';
 
 export interface ICheckboxOpts extends ICheckboxStyles {
 	readonly actionClassName: string;
 	readonly title: string;
 	readonly isChecked: boolean;
-	readonly onChange: (viaKeyboard: boolean) => void;
-	readonly onKeyDown?: (e: IKeyboardEvent) => void;
 }
 
 export interface ICheckboxStyles {
@@ -32,6 +30,12 @@ const defaultOpts = {
 
 export class Checkbox extends Widget {
 
+	private readonly _onChange = this._register(new Emitter<boolean>());
+	public readonly onChange: Event<boolean /* via keyboard */> = this._onChange.event;
+
+	private readonly _onKeyDown = this._register(new Emitter<IKeyboardEvent>());
+	public readonly onKeyDown: Event<IKeyboardEvent> = this._onKeyDown.event;
+
 	private readonly _opts: ICheckboxOpts;
 	public readonly domNode: HTMLElement;
 
@@ -55,21 +59,19 @@ export class Checkbox extends Widget {
 
 		this.onclick(this.domNode, (ev) => {
 			this.checked = !this._checked;
-			this._opts.onChange(false);
+			this._onChange.fire(false);
 			ev.preventDefault();
 		});
 
 		this.onkeydown(this.domNode, (keyboardEvent) => {
 			if (keyboardEvent.keyCode === KeyCode.Space || keyboardEvent.keyCode === KeyCode.Enter) {
 				this.checked = !this._checked;
-				this._opts.onChange(true);
+				this._onChange.fire(true);
 				keyboardEvent.preventDefault();
 				return;
 			}
 
-			if (this._opts.onKeyDown) {
-				this._opts.onKeyDown(keyboardEvent);
-			}
+			this._onKeyDown.fire(keyboardEvent);
 		});
 	}
 

src/vs/base/browser/ui/findinput/findInput.ts

@@ -293,48 +293,50 @@ export class FindInput extends Widget {
 		this.regex = this._register(new RegexCheckbox({
 			appendTitle: appendRegexLabel,
 			isChecked: false,
-			onChange: (viaKeyboard) => {
-				this._onDidOptionChange.fire(viaKeyboard);
-				if (!viaKeyboard) {
-					this.inputBox.focus();
-				}
-				this.setInputWidth();
-				this.validate();
-			},
-			onKeyDown: (e) => {
-				this._onRegexKeyDown.fire(e);
-			},
 			inputActiveOptionBorder: this.inputActiveOptionBorder
 		}));
+		this._register(this.regex.onChange(viaKeyboard => {
+			this._onDidOptionChange.fire(viaKeyboard);
+			if (!viaKeyboard) {
+				this.inputBox.focus();
+			}
+			this.setInputWidth();
+			this.validate();
+		}));
+		this._register(this.regex.onKeyDown(e => {
+			this._onRegexKeyDown.fire(e);
+		}));
+
 		this.wholeWords = this._register(new WholeWordsCheckbox({
 			appendTitle: appendWholeWordsLabel,
 			isChecked: false,
-			onChange: (viaKeyboard) => {
-				this._onDidOptionChange.fire(viaKeyboard);
-				if (!viaKeyboard) {
-					this.inputBox.focus();
-				}
-				this.setInputWidth();
-				this.validate();
-			},
 			inputActiveOptionBorder: this.inputActiveOptionBorder
 		}));
+		this._register(this.wholeWords.onChange(viaKeyboard => {
+			this._onDidOptionChange.fire(viaKeyboard);
+			if (!viaKeyboard) {
+				this.inputBox.focus();
+			}
+			this.setInputWidth();
+			this.validate();
+		}));
+
 		this.caseSensitive = this._register(new CaseSensitiveCheckbox({
 			appendTitle: appendCaseSensitiveLabel,
 			isChecked: false,
-			onChange: (viaKeyboard) => {
-				this._onDidOptionChange.fire(viaKeyboard);
-				if (!viaKeyboard) {
-					this.inputBox.focus();
-				}
-				this.setInputWidth();
-				this.validate();
-			},
-			onKeyDown: (e) => {
-				this._onCaseSensitiveKeyDown.fire(e);
-			},
 			inputActiveOptionBorder: this.inputActiveOptionBorder
 		}));
+		this._register(this.caseSensitive.onChange(viaKeyboard => {
+			this._onDidOptionChange.fire(viaKeyboard);
+			if (!viaKeyboard) {
+				this.inputBox.focus();
+			}
+			this.setInputWidth();
+			this.validate();
+		}));
+		this._register(this.caseSensitive.onKeyDown(e => {
+			this._onCaseSensitiveKeyDown.fire(e);
+		}));
 
 		// Arrow-Key support to navigate between options
 		let indexes = [this.caseSensitive.domNode, this.wholeWords.domNode, this.regex.domNode];

src/vs/base/browser/ui/findinput/findInputCheckboxes.ts

@@ -4,18 +4,14 @@
  *--------------------------------------------------------------------------------------------*/
 'use strict';
 
-import 'vs/css!./findInputCheckboxes';
-
-import * as nls from 'vs/nls';
 import { Checkbox } from 'vs/base/browser/ui/checkbox/checkbox';
-import { IKeyboardEvent } from 'vs/base/browser/keyboardEvent';
 import { Color } from 'vs/base/common/color';
+import 'vs/css!./findInputCheckboxes';
+import * as nls from 'vs/nls';
 
 export interface IFindInputCheckboxOpts {
 	readonly appendTitle: string;
 	readonly isChecked: boolean;
-	readonly onChange: (viaKeyboard: boolean) => void;
-	readonly onKeyDown?: (e: IKeyboardEvent) => void;
 	readonly inputActiveOptionBorder?: Color;
 }
 
@@ -29,8 +25,6 @@ export class CaseSensitiveCheckbox extends Checkbox {
 			actionClassName: 'monaco-case-sensitive',
 			title: NLS_CASE_SENSITIVE_CHECKBOX_LABEL + opts.appendTitle,
 			isChecked: opts.isChecked,
-			onChange: opts.onChange,
-			onKeyDown: opts.onKeyDown,
 			inputActiveOptionBorder: opts.inputActiveOptionBorder
 		});
 	}
@@ -42,8 +36,6 @@ export class WholeWordsCheckbox extends Checkbox {
 			actionClassName: 'monaco-whole-word',
 			title: NLS_WHOLE_WORD_CHECKBOX_LABEL + opts.appendTitle,
 			isChecked: opts.isChecked,
-			onChange: opts.onChange,
-			onKeyDown: opts.onKeyDown,
 			inputActiveOptionBorder: opts.inputActiveOptionBorder
 		});
 	}
@@ -55,8 +47,6 @@ export class RegexCheckbox extends Checkbox {
 			actionClassName: 'monaco-regex',
 			title: NLS_REGEX_CHECKBOX_LABEL + opts.appendTitle,
 			isChecked: opts.isChecked,
-			onChange: opts.onChange,
-			onKeyDown: opts.onKeyDown,
 			inputActiveOptionBorder: opts.inputActiveOptionBorder
 		});
 	}

src/vs/editor/contrib/find/findOptionsWidget.ts

@@ -53,38 +53,38 @@ export class FindOptionsWidget extends Widget implements IOverlayWidget {
 		this.caseSensitive = this._register(new CaseSensitiveCheckbox({
 			appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleCaseSensitiveCommand),
 			isChecked: this._state.matchCase,
-			onChange: (viaKeyboard) => {
-				this._state.change({
-					matchCase: this.caseSensitive.checked
-				}, false);
-			},
 			inputActiveOptionBorder: inputActiveOptionBorderColor
 		}));
 		this._domNode.appendChild(this.caseSensitive.domNode);
+		this._register(this.caseSensitive.onChange(() => {
+			this._state.change({
+				matchCase: this.caseSensitive.checked
+			}, false);
+		}));
 
 		this.wholeWords = this._register(new WholeWordsCheckbox({
 			appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleWholeWordCommand),
 			isChecked: this._state.wholeWord,
-			onChange: (viaKeyboard) => {
-				this._state.change({
-					wholeWord: this.wholeWords.checked
-				}, false);
-			},
 			inputActiveOptionBorder: inputActiveOptionBorderColor
 		}));
 		this._domNode.appendChild(this.wholeWords.domNode);
+		this._register(this.wholeWords.onChange(() => {
+			this._state.change({
+				wholeWord: this.wholeWords.checked
+			}, false);
+		}));
 
 		this.regex = this._register(new RegexCheckbox({
 			appendTitle: this._keybindingLabelFor(FIND_IDS.ToggleRegexCommand),
 			isChecked: this._state.isRegex,
-			onChange: (viaKeyboard) => {
-				this._state.change({
-					isRegex: this.regex.checked
-				}, false);
-			},
 			inputActiveOptionBorder: inputActiveOptionBorderColor
 		}));
 		this._domNode.appendChild(this.regex.domNode);
+		this._register(this.regex.onChange(() => {
+			this._state.change({
+				isRegex: this.regex.checked
+			}, false);
+		}));
 
 		this._editor.addOverlayWidget(this);
 

src/vs/workbench/parts/markers/electron-browser/markersPanelActions.ts

@@ -188,15 +188,16 @@ export class MarkersFilterActionItem extends BaseActionItem {
 	}
 
 	private createFilesExcludeCheckbox(container: HTMLElement): void {
-		this.filesExcludeFilter = new Checkbox({
+		this.filesExcludeFilter = this._register(new Checkbox({
 			actionClassName: 'markers-panel-filter-filesExclude',
 			title: this.itemOptions.useFilesExclude ? Messages.MARKERS_PANEL_ACTION_TOOLTIP_DO_NOT_USE_FILES_EXCLUDE : Messages.MARKERS_PANEL_ACTION_TOOLTIP_USE_FILES_EXCLUDE,
-			isChecked: this.itemOptions.useFilesExclude,
-			onChange: () => {
-				this.filesExcludeFilter.domNode.title = this.filesExcludeFilter.checked ? Messages.MARKERS_PANEL_ACTION_TOOLTIP_DO_NOT_USE_FILES_EXCLUDE : Messages.MARKERS_PANEL_ACTION_TOOLTIP_USE_FILES_EXCLUDE;
-				this._onDidChange.fire();
-			}
-		});
+			isChecked: this.itemOptions.useFilesExclude
+		}));
+		this._register(this.filesExcludeFilter.onChange(() => {
+			this.filesExcludeFilter.domNode.title = this.filesExcludeFilter.checked ? Messages.MARKERS_PANEL_ACTION_TOOLTIP_DO_NOT_USE_FILES_EXCLUDE : Messages.MARKERS_PANEL_ACTION_TOOLTIP_USE_FILES_EXCLUDE;
+			this._onDidChange.fire();
+		}));
+
 		this._register(attachCheckboxStyler(this.filesExcludeFilter, this.themeService));
 		container.appendChild(this.filesExcludeFilter.domNode);
 	}

src/vs/workbench/parts/preferences/browser/keybindingsEditor.ts

@@ -296,9 +296,10 @@ export class KeybindingsEditor extends BaseEditor implements IKeybindingsEditor
 		this.sortByPrecedence = this._register(new Checkbox({
 			actionClassName: 'sort-by-precedence',
 			isChecked: false,
-			onChange: () => this.renderKeybindingsEntries(false),
 			title: localize('sortByPrecedene', "Sort by Precedence")
 		}));
+		this._register(
+			this.sortByPrecedence.onChange(() => this.renderKeybindingsEntries(false)));
 		searchContainer.appendChild(this.sortByPrecedence.domNode);
 
 		this.createOpenKeybindingsElement(this.headerContainer);

src/vs/workbench/parts/preferences/browser/media/check-inverse.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-2 -2 16 16" enable-background="new -2 -2 16 16"><polygon fill="#C5C5C5" points="9,0 4.5,9 3,6 0,6 3,12 6,12 12,0"/></svg>
\ No newline at end of file

src/vs/workbench/parts/preferences/browser/media/check.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="-2 -2 16 16" enable-background="new -2 -2 16 16"><polygon fill="#424242" points="9,0 4.5,9 3,6 0,6 3,12 6,12 12,0"/></svg>
\ No newline at end of file

src/vs/workbench/parts/search/browser/patternInputWidget.ts

@@ -215,17 +215,17 @@ export class ExcludePatternInputWidget extends PatternInputWidget {
 	}
 
 	protected renderSubcontrols(controlsDiv: HTMLDivElement): void {
-		this.useExcludesAndIgnoreFilesBox = new Checkbox({
+		this.useExcludesAndIgnoreFilesBox = this._register(new Checkbox({
 			actionClassName: 'useExcludesAndIgnoreFiles',
 			title: nls.localize('useExcludesAndIgnoreFilesDescription', "Use Exclude Settings and Ignore Files"),
 			isChecked: true,
-			onChange: (viaKeyboard) => {
-				this.onOptionChange(null);
-				if (!viaKeyboard) {
-					this.inputBox.focus();
-				}
+		}));
+		this._register(this.useExcludesAndIgnoreFilesBox.onChange(viaKeyboard => {
+			this.onOptionChange(null);
+			if (!viaKeyboard) {
+				this.inputBox.focus();
 			}
-		});
+		}));
 		this._register(attachCheckboxStyler(this.useExcludesAndIgnoreFilesBox, this.themeService));
 
 		controlsDiv.appendChild(this.useExcludesAndIgnoreFilesBox.domNode);