@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
73 lines • 3.17 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyFieldEditableComboBox = PropertyFieldEditableComboBox;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const ReactDom = tslib_1.__importStar(require("react-dom"));
const sp_property_pane_1 = require("@microsoft/sp-property-pane");
const PropertyFieldEditableComboBoxHost_1 = tslib_1.__importDefault(require("./PropertyFieldEditableComboBoxHost"));
class PropertyFieldEditableComboBoxBuilder {
//private changeCB?: (text: string, wasAdded: boolean) => void;
constructor(_targetProperty, _properties) {
//Properties defined by IPropertyPaneField
this.type = sp_property_pane_1.PropertyPaneFieldType.Custom;
this.targetProperty = _targetProperty;
this.properties = {
key: _properties.key,
disabled: _properties.disabled,
label: _properties.label,
maxFillInLength: _properties.maxFillInLength,
onPropertyChange: _properties.onPropertyChange,
onOptionAdded: _properties.onOptionAdded,
options: _properties.options,
selectedText: _properties.selectedText,
showTooltip: _properties.showTooltip,
tooltipText: _properties.tooltipText,
properties: _properties.properties,
onRender: this.onRender.bind(this)
};
this.currentOptionText = _properties.selectedText;
}
render() {
if (!this.elem) {
return;
}
this.onRender(this.elem);
}
onRender(elem) {
if (!this.elem) {
this.elem = elem;
}
//Render the property in our PropertyPane
const element = React.createElement(PropertyFieldEditableComboBoxHost_1.default, {
key: this.properties.key,
disabled: this.properties.disabled,
label: this.properties.label,
options: this.properties.options,
selectedText: this.properties.selectedText,
maxFillInLength: this.properties.maxFillInLength,
showTooltip: this.properties.showTooltip,
tooltipText: this.properties.tooltipText,
onOptionChanged: this.onOptionChanged.bind(this)
});
ReactDom.render(element, elem);
}
onOptionChanged(text, wasAdded) {
if (this.properties !== undefined) {
if (this.properties.onPropertyChange && text !== null) {
const newOption = text;
const oldOption = this.currentOptionText;
this.currentOptionText = newOption;
this.properties.onPropertyChange(this.targetProperty, oldOption, newOption);
this.properties.properties[this.targetProperty] = newOption;
if (wasAdded) {
this.properties.onOptionAdded(text);
}
}
}
}
}
function PropertyFieldEditableComboBox(targetProperty, properties) {
return new PropertyFieldEditableComboBoxBuilder(targetProperty, properties);
}
//# sourceMappingURL=PropertyFieldEditableComboBox.js.map