@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
73 lines • 3.24 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyFieldOrder = PropertyFieldOrder;
const tslib_1 = require("tslib");
const sp_property_pane_1 = require("@microsoft/sp-property-pane");
const React = tslib_1.__importStar(require("react"));
const ReactDom = tslib_1.__importStar(require("react-dom"));
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
const PropertyFieldOrderHost_1 = tslib_1.__importDefault(require("./PropertyFieldOrderHost"));
class PropertyFieldOrderBuilder {
constructor(_targetProperty, _properties) {
//Properties defined by IPropertyPaneField
this.type = sp_property_pane_1.PropertyPaneFieldType.Custom;
this.targetProperty = _targetProperty;
this.properties = {
key: _properties.key,
label: _properties.label,
onPropertyChange: _properties.onPropertyChange,
disabled: _properties.disabled,
properties: _properties.properties,
items: _properties.items,
textProperty: _properties.textProperty,
moveUpIconName: _properties.moveUpIconName,
moveDownIconName: _properties.moveDownIconName,
disableDragAndDrop: _properties.disableDragAndDrop,
removeArrows: _properties.removeArrows,
maxHeight: _properties.maxHeight,
onRenderItem: _properties.onRenderItem,
onRender: this.onRender.bind(this)
};
this.items = _properties.items;
}
render() {
if (!this.elem) {
return;
}
this.onRender(this.elem);
}
onRender(elem, ctx, changeCallback) {
if (!this.elem) {
this.elem = elem;
}
this.changeCB = changeCallback;
const element = React.createElement(PropertyFieldOrderHost_1.default, {
label: this.properties.label,
disabled: this.properties.disabled,
items: this.items,
textProperty: this.properties.textProperty,
moveUpIconName: this.properties.moveUpIconName || 'ChevronUpSmall',
moveDownIconName: this.properties.moveDownIconName || 'ChevronDownSmall',
disableDragAndDrop: this.properties.disableDragAndDrop,
removeArrows: this.properties.removeArrows,
maxHeight: this.properties.maxHeight,
onRenderItem: this.properties.onRenderItem,
valueChanged: this.onValueChanged.bind(this)
});
ReactDom.render(element, elem);
}
onValueChanged(newValue) {
if (this.properties.onPropertyChange && newValue !== null) {
this.properties.onPropertyChange(this.targetProperty, this.items, newValue);
this.items = newValue;
(0, GeneralHelper_1.setPropertyValue)(this.properties.properties, this.targetProperty, newValue);
if (typeof this.changeCB !== 'undefined' && this.changeCB !== null) {
this.changeCB(this.targetProperty, newValue);
}
}
}
}
function PropertyFieldOrder(targetProperty, properties) {
return new PropertyFieldOrderBuilder(targetProperty, properties);
}
//# sourceMappingURL=PropertyFieldOrder.js.map