Fixing the checked variable in radio buttons (#13909)

* Fixing the checked variable in radio buttons

* Emitting the checked state of radio button.

* Adding onChanged event to radioButtons (exposing it)
Deprecating onClick event for radioButtons
Fixing radio button stubs

* Made some type fixes

* Firing event in checked event setter

* updating azdata-test to 1.1 in arc extension

* Some logic fixes in checked setter

* added proper typings and updated package version for azdata-data

* Renamed the event to onDidChangeCheckedState

* Fixed deprecation message

* Fixed broken Schema compare stubs
This commit is contained in:
Aasim Khan
2021-01-07 23:25:21 -08:00
committed by GitHub
parent e7fb44b3a2
commit 5d1b328866
14 changed files with 67 additions and 17 deletions

View File

@@ -1076,7 +1076,7 @@
"@types/sinon": "^9.0.4",
"@types/uuid": "^8.3.0",
"@types/yamljs": "^0.2.31",
"azdata-test": "^1.0.0",
"azdata-test": "^1.1.1",
"mocha": "^5.2.0",
"mocha-junit-reporter": "^1.17.0",
"mocha-multi-reporters": "^1.1.7",

View File

@@ -345,10 +345,10 @@ aws4@^1.8.0:
resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.9.1.tgz#7e33d8f7d449b3f673cd72deb9abdc552dbe528e"
integrity sha512-wMHVg2EOHaMRxbzgFJ9gtjOOCrI80OHLG14rxi28XwOW8ux6IiEbRCGGGqCtdAIg4FQCbW20k9RsT4y3gJlFug==
azdata-test@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.0.0.tgz#b8821a5a313e6919dac8b8ef56f22dc8592cad2c"
integrity sha512-/QZkHeVKc0HbJtx45nFXNQLTe3lY8la37Re+YfBIzybMIul3FmBszwIyq9/MPHMhrjkvf5xDkEF+CuSlI4KeIA==
azdata-test@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.1.1.tgz#0feb13ec01397841f7bbce0ad25a41e4a3afb5b5"
integrity sha512-+jZ5/4Orqt5Q2MLPqmV+iQjGYxG5FK4pC3UqTOPdSzlbs0JQhOXckC8Hmw8ZOS0N6Cn7mNDCpfaqEU9coTyVsw==
dependencies:
http-proxy-agent "^2.1.0"
https-proxy-agent "^2.2.4"

View File

@@ -88,6 +88,7 @@ export function createViewContext(): ViewTestContext {
label: '',
checked: false,
onDidClick: onClick.event,
onDidChangeCheckedState: onValueChanged.event
});
return button;
};

View File

@@ -16,6 +16,7 @@ export interface ViewTestContext {
export function createViewContext(): ViewTestContext {
let onClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
let onChange: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
let apiWrapper = TypeMoq.Mock.ofType(ApiWrapper);
let componentBase: azdata.Component = {
@@ -38,7 +39,8 @@ export function createViewContext(): ViewTestContext {
});
let radioButton: azdata.RadioButtonComponent = Object.assign({}, componentBase, {
checked: true,
onDidClick: onClick.event
onDidClick: onClick.event,
onDidChangeCheckedState: onChange.event,
});
let checkbox: azdata.CheckBoxComponent = Object.assign({}, componentBase, {
checked: true,

View File

@@ -359,10 +359,11 @@ class TestButtonComponent extends TestComponentBase implements azdata.ButtonComp
}
class TestRadioButtonComponent extends TestComponentBase implements azdata.RadioButtonComponent {
constructor(private onClick: vscode.EventEmitter<any>) {
constructor(private onClick: vscode.EventEmitter<any>, private onChange: vscode.EventEmitter<boolean>) {
super();
}
onDidClick: vscode.Event<any> = this.onClick.event;
onDidChangeCheckedState: vscode.Event<boolean> = this.onChange.event;
}
class TestTextComponent extends TestComponentBase implements azdata.TextComponent {
@@ -460,11 +461,12 @@ class TestLoadingBuilder extends TestComponentBuilder<azdata.LoadingComponent, a
export function createViewContext(): TestContext {
let onClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
let onChange: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
let form: azdata.FormContainer = new TestFormContainer();
let textBuilder: azdata.ComponentBuilder<azdata.TextComponent, azdata.TextComponentProperties> = new TestComponentBuilder(new TestTextComponent());
let buttonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent, azdata.ButtonProperties> = new TestComponentBuilder(new TestButtonComponent(onClick));
let radioButtonBuilder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = new TestComponentBuilder(new TestRadioButtonComponent(onClick));
let radioButtonBuilder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = new TestComponentBuilder(new TestRadioButtonComponent(onClick, onChange));
let declarativeTableBuilder: azdata.ComponentBuilder<azdata.DeclarativeTableComponent, azdata.DeclarativeTableProperties> = new TestComponentBuilder(new TestDeclarativeTableComponent(onClick));
let loadingBuilder: azdata.LoadingComponentBuilder = new TestLoadingBuilder(new TestLoadingComponent());
let dropdownBuilder: azdata.ComponentBuilder<azdata.DropDownComponent, azdata.DropDownProperties> = new TestComponentBuilder(new TestDropdownComponent(onClick));

View File

@@ -117,6 +117,7 @@ describe('Manage Package Dialog', () => {
dialog.setup(x => x.model).returns(() => model.object);
let onClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
let onChange: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
let componentBase: azdata.Component = {
id: '',
@@ -132,8 +133,10 @@ describe('Manage Package Dialog', () => {
onDidClick: onClick.event
});
let radioButton: azdata.RadioButtonComponent = Object.assign({}, componentBase, {
onDidClick: onClick.event
onDidClick: onClick.event,
onDidChangeCheckedState: onChange.event
});
const components: azdata.Component[] = [];
let container = {
clearItems: () => { },

View File

@@ -524,7 +524,7 @@
"@types/semver": "^7.3.1",
"@types/sinon": "^9.0.8",
"@types/yamljs": "0.2.30",
"azdata-test": "^1.0.0",
"azdata-test": "^1.1.1",
"mocha": "^5.2.0",
"mocha-junit-reporter": "^1.17.0",
"mocha-multi-reporters": "^1.1.7",

View File

@@ -285,10 +285,10 @@ argparse@^1.0.7:
dependencies:
sprintf-js "~1.0.2"
azdata-test@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.0.0.tgz#b8821a5a313e6919dac8b8ef56f22dc8592cad2c"
integrity sha512-/QZkHeVKc0HbJtx45nFXNQLTe3lY8la37Re+YfBIzybMIul3FmBszwIyq9/MPHMhrjkvf5xDkEF+CuSlI4KeIA==
azdata-test@^1.1.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/azdata-test/-/azdata-test-1.1.1.tgz#0feb13ec01397841f7bbce0ad25a41e4a3afb5b5"
integrity sha512-+jZ5/4Orqt5Q2MLPqmV+iQjGYxG5FK4pC3UqTOPdSzlbs0JQhOXckC8Hmw8ZOS0N6Cn7mNDCpfaqEU9coTyVsw==
dependencies:
http-proxy-agent "^2.1.0"
https-proxy-agent "^2.2.4"

View File

@@ -66,6 +66,7 @@ export function createViewContext(): ViewTestContext {
let switchDirectionButtonOnClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
let cancelCompareButtonOnClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
let generateScriptButtonOnClick: vscode.EventEmitter<any> = new vscode.EventEmitter<any>();
let onChangeCheckedState: vscode.EventEmitter<boolean> = new vscode.EventEmitter<boolean>();
let componentBase: azdata.Component = {
id: '',
@@ -147,8 +148,9 @@ export function createViewContext(): ViewTestContext {
let radioButton: azdata.RadioButtonComponent = Object.assign({}, componentBase, {
checked: false,
onDidClick: onClick.event,
onDidChangeCheckedState: onChangeCheckedState.event
});
let radioButtonBuilder: azdata.ComponentBuilder<azdata.ButtonComponent, azdata.ButtonProperties> = {
let radioButtonBuilder: azdata.ComponentBuilder<azdata.RadioButtonComponent, azdata.RadioButtonProperties> = {
component: () => radioButton,
withProperties: () => radioButtonBuilder,
withProps: () => radioButtonBuilder,

1
src/sql/azdata.d.ts vendored
View File

@@ -3495,6 +3495,7 @@ declare module 'azdata' {
export interface RadioButtonComponent extends Component, RadioButtonProperties {
/**
* @deprecated use onDidChangeCheckedState event instead
* An event called when the radio button is clicked
*/
onDidClick: vscode.Event<any>;

View File

@@ -274,6 +274,13 @@ declare module 'azdata' {
showLinkIcon?: boolean;
}
export interface RadioButtonComponent {
/**
* An event called when the value of radio button changes
*/
onDidChangeCheckedState: vscode.Event<boolean>;
}
export interface DeclarativeTableColumn {
headerCssStyles?: CssStyles;
rowCssStyles?: CssStyles;

View File

@@ -18,7 +18,10 @@ export class RadioButton extends Widget {
private inputElement: HTMLInputElement;
private _onClicked = new Emitter<void>();
public readonly onClicked: Event<void> = this._onClicked.event;
private _onChangedCheckedState = new Emitter<boolean>();
public readonly onDidChangeCheckedState: Event<boolean> = this._onChangedCheckedState.event;
private _label: HTMLSpanElement;
private _internalCheckedStateTracker: boolean = false;
constructor(container: HTMLElement, opts: IRadioButtonOptions) {
super();
@@ -33,7 +36,18 @@ export class RadioButton extends Widget {
this.label = opts.label;
this.enabled = opts.enabled || true;
this.checked = opts.checked || false;
this.onclick(this.inputElement, () => this._onClicked.fire());
this.onclick(this.inputElement, () => {
this._onClicked.fire();
if (this.name) {
const buttonGroup = document.getElementsByName(this.name);
buttonGroup.forEach((button) => {
const event = document.createEvent('HTMLEvents');
event.initEvent('change', true, true);
button.dispatchEvent(event);
});
}
});
this.inputElement.addEventListener('change', () => this.checked = this.inputElement.checked);
container.appendChild(this.inputElement);
container.appendChild(this._label);
@@ -60,7 +74,11 @@ export class RadioButton extends Widget {
}
public set checked(val: boolean) {
if (this.inputElement.checked !== this._internalCheckedStateTracker) {
this.inputElement.checked = val;
this._internalCheckedStateTracker = val;
this._onChangedCheckedState.fire(this.checked);
}
}
public get checked(): boolean {

View File

@@ -1271,6 +1271,7 @@ class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonC
super(proxy, handle, ModelComponentTypes.RadioButton, id);
this.properties = {};
this._emitterMap.set(ComponentEventType.onDidClick, new Emitter<any>());
this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<boolean>());
}
public get name(): string {
@@ -1304,6 +1305,11 @@ class RadioButtonWrapper extends ComponentWrapper implements azdata.RadioButtonC
let emitter = this._emitterMap.get(ComponentEventType.onDidClick);
return emitter && emitter.event;
}
public get onDidChangeCheckedState(): vscode.Event<boolean> {
let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
return emitter && emitter.event;
}
}
class TextComponentWrapper extends ComponentWrapper implements azdata.TextComponentProperties {

View File

@@ -51,6 +51,14 @@ export default class RadioButtonComponent extends ComponentBase<azdata.RadioButt
args: e
});
}));
this._register(this._input.onDidChangeCheckedState(e => {
this.checked = e;
this.fireEvent({
eventType: ComponentEventType.onDidChange,
args: e
});
}));
}
this.baseInit();
}