Add readOnly property to InputBoxComponent (#10687)

This commit is contained in:
Brian Bergeron
2020-06-03 14:59:54 -07:00
committed by GitHub
parent 5d60254bb9
commit 65a31de166
3 changed files with 11 additions and 1 deletions

View File

@@ -62,7 +62,7 @@ export class InputKeyValue extends KeyValue {
getValueComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
const container = modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component();
container.addItem(modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
value: this.value // TODO: Add a readOnly property to input boxes
value: this.value, readOnly: true
}).component());
const copy = modelBuilder.button().withProperties<azdata.ButtonProperties>({

View File

@@ -309,6 +309,7 @@ declare module 'azdata' {
export interface InputBoxProperties extends ComponentProperties {
validationErrorMessage?: string;
readOnly?: boolean;
}
export interface CheckBoxProperties {

View File

@@ -244,6 +244,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
}
input.inputElement.required = this.required;
input.inputElement.readOnly = this.readOnly;
}
// CSS-bound properties
@@ -316,6 +317,14 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.multiline = value, newValue);
}
public get readOnly(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.readOnly, false);
}
public set readOnly(newValue: boolean) {
this.setPropertyFromUI<azdata.InputBoxProperties, boolean>((props, value) => props.readOnly = value, newValue);
}
public get required(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.required, false);
}