mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-16 18:46:40 -05:00
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:
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -88,6 +88,7 @@ export function createViewContext(): ViewTestContext {
|
||||
label: '',
|
||||
checked: false,
|
||||
onDidClick: onClick.event,
|
||||
onDidChangeCheckedState: onValueChanged.event
|
||||
});
|
||||
return button;
|
||||
};
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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: () => { },
|
||||
|
||||
@@ -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",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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
1
src/sql/azdata.d.ts
vendored
@@ -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>;
|
||||
|
||||
7
src/sql/azdata.proposed.d.ts
vendored
7
src/sql/azdata.proposed.d.ts
vendored
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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();
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user