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 { getValueComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
const container = modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component(); const container = modelBuilder.flexContainer().withLayout({ alignItems: 'center' }).component();
container.addItem(modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({ container.addItem(modelBuilder.inputBox().withProperties<azdata.InputBoxProperties>({
value: this.value // TODO: Add a readOnly property to input boxes value: this.value, readOnly: true
}).component()); }).component());
const copy = modelBuilder.button().withProperties<azdata.ButtonProperties>({ const copy = modelBuilder.button().withProperties<azdata.ButtonProperties>({

View File

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

View File

@@ -244,6 +244,7 @@ export default class InputBoxComponent extends ComponentBase implements ICompone
} }
input.inputElement.required = this.required; input.inputElement.required = this.required;
input.inputElement.readOnly = this.readOnly;
} }
// CSS-bound properties // 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); 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 { public get required(): boolean {
return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.required, false); return this.getPropertyOrDefault<azdata.InputBoxProperties, boolean>((props) => props.required, false);
} }