ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-14 01:25:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add ability to handle enter key propagation for input model components (#7524)

Browse Source 
* Add ability to stop enter key propagation for input model components

* Fix spacing

* onInputEntered -> onEnterKeyPressed
This commit is contained in:
Charles Gagnon
2019-10-07 12:05:43 -07:00
committed by GitHub
parent effa50a9bd
commit 5454917569
7 changed files with 73 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
extensions/mssql/src/hdfs/ui/hdfsManageAccessDialog.ts
View File

@@ -130,7 +130,18 @@ export class ManageAccessDialog {
rootContainer.addItem(typeContainer, { flex: '0 0 auto' });
const addUserOrGroupInputRow = modelView.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
this.addUserOrGroupInput = modelView.modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ inputType: 'text', placeHolder: enterNamePlaceholder, width: 250 }).component();
this.addUserOrGroupInput = modelView.modelBuilder.inputBox()
.withProperties<azdata.InputBoxProperties>(
{
inputType: 'text',
placeHolder: enterNamePlaceholder,
width: 250,
stopEnterPropagation: true
}).component();
this.addUserOrGroupInput.onEnterKeyPressed((value: string) => {
this.hdfsModel.createAndAddAclEntry(value, this.addUserOrGroupSelectedType);
this.addUserOrGroupInput.value = '';
});
const addUserOrGroupButton = modelView.modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: addLabel, width: 75 }).component();
addUserOrGroupButton.onDidClick(() => {
this.hdfsModel.createAndAddAclEntry(this.addUserOrGroupInput.value, this.addUserOrGroupSelectedType);

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

@@ -2991,6 +2991,11 @@ declare module 'azdata' {
columns?: number;
min?: number;
max?: number;
/**
* Whether to stop key event propagation when enter is pressed in the input box. Leaving this as false
* means the event will propagate up to any parents that have handlers (such as validate on Dialogs)
*/
stopEnterPropagation?: boolean;
}
export interface TableColumn {
@@ -3235,6 +3240,10 @@ declare module 'azdata' {
export interface InputBoxComponent extends Component, InputBoxProperties {
onTextChanged: vscode.Event<any>;
/**
* Event that's fired whenever enter is pressed within the input box
*/
onEnterKeyPressed: vscode.Event<string>;
}
export interface RadioButtonComponent extends Component, RadioButtonProperties {

9
src/sql/sqlops.proposed.d.ts vendored
View File

@@ -514,6 +514,11 @@ declare module 'sqlops' {
columns?: number;
min?: number;
max?: number;
/**
* Whether to stop key event propagation when enter is pressed in the input box. Leaving this as false
* means the event will propagate up to any parents that have handlers (such as validate on Dialogs)
*/
stopEnterPropagation?: boolean;
}
export interface TableColumn {
@@ -703,6 +708,10 @@ declare module 'sqlops' {
export interface InputBoxComponent extends Component, InputBoxProperties {
onTextChanged: vscode.Event<any>;
/**
* Event that's fired whenever enter is pressed within the input box
*/
onEnterKeyPressed: vscode.Event<string>;
}
export interface RadioButtonComponent extends Component, RadioButtonProperties {

13
src/sql/workbench/api/common/extHostModelView.ts
View File

@@ -769,6 +769,7 @@ class InputBoxWrapper extends ComponentWrapper implements azdata.InputBoxCompone
super(proxy, handle, ModelComponentTypes.InputBox, id);
this.properties = {};
this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<any>());
this._emitterMap.set(ComponentEventType.onEnterKeyPressed, new Emitter<string>());
}
public get value(): string {
@@ -841,10 +842,22 @@ class InputBoxWrapper extends ComponentWrapper implements azdata.InputBoxCompone
this.setProperty('inputType', v);
}
public get stopEnterPropagation(): boolean {
return this.properties['stopEnterPropagation'];
}
public set stopEnterPropagation(v: boolean) {
this.setProperty('stopEnterPropagation', v);
}
public get onTextChanged(): vscode.Event<any> {
let emitter = this._emitterMap.get(ComponentEventType.onDidChange);
return emitter && emitter.event;
}
public get onEnterKeyPressed(): vscode.Event<string> {
const emitter = this._emitterMap.get(ComponentEventType.onEnterKeyPressed);
return emitter && emitter.event;
}
}
class CheckBoxWrapper extends ComponentWrapper implements azdata.CheckBoxComponent {

1
src/sql/workbench/api/common/sqlExtHostTypes.ts
View File

@@ -225,6 +225,7 @@ export enum ComponentEventType {
onSelectedRowChanged,
onComponentCreated,
onCellAction,
onEnterKeyPressed
}
export interface IComponentEventArgs {

28
src/sql/workbench/browser/modelComponents/inputbox.component.ts
View File

@@ -72,6 +72,17 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
};
if (this._inputContainer) {
this._input = new InputBox(this._inputContainer.nativeElement, this.contextViewService, inputOptions);
this.onkeydown(this._input.inputElement, (e: StandardKeyboardEvent) => {
if (e.keyCode === KeyCode.Enter) {
this.fireEvent({
eventType: ComponentEventType.onEnterKeyPressed,
args: this._input.value
});
if (this.stopEnterPropagation) {
e.stopPropagation();
}
}
});
this.registerInput(this._input, () => !this.multiline);
}
if (this._textareaContainer) {
@@ -81,6 +92,15 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
if (this.tryHandleKeyEvent(e)) {
e.stopPropagation();
}
if (e.keyCode === KeyCode.Enter) {
this.fireEvent({
eventType: ComponentEventType.onEnterKeyPressed,
args: this._textAreaInput.value
});
if (this.stopEnterPropagation) {
e.stopPropagation();
}
}
// Else assume that keybinding service handles routing this to a command
});
@@ -308,4 +328,12 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
public set required(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.required = value, newValue);
}
public get stopEnterPropagation(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.stopEnterPropagation, false);
}
public set stopEnterPropagation(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.stopEnterPropagation = value, newValue);
}
}

1
src/sql/workbench/browser/modelComponents/interfaces.ts
View File

@@ -69,6 +69,7 @@ export enum ComponentEventType {
onSelectedRowChanged,
onComponentCreated,
onCellAction,
onEnterKeyPressed
}
export interface IModelStore {