@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
98 lines • 4.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyFieldColorPicker = PropertyFieldColorPicker;
const tslib_1 = require("tslib");
const sp_property_pane_1 = require("@microsoft/sp-property-pane");
const react_1 = require("@fluentui/react");
const React = tslib_1.__importStar(require("react"));
const ReactDom = tslib_1.__importStar(require("react-dom"));
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
const Util_1 = require("../../common/util/Util");
const IPropertyFieldColorPicker_1 = require("./IPropertyFieldColorPicker");
const PropertyFieldColorPickerHost_1 = tslib_1.__importDefault(require("./PropertyFieldColorPickerHost"));
class PropertyFieldColorPickerBuilder {
constructor(_targetProperty, _properties) {
//Properties defined by IPropertyPaneField
this.type = sp_property_pane_1.PropertyPaneFieldType.Custom;
this._debounce = (0, Util_1.debounce)(); // eslint-disable-line @typescript-eslint/no-explicit-any
this.targetProperty = _targetProperty;
this.properties = {
key: _properties.key,
label: _properties.label,
onPropertyChange: _properties.onPropertyChange,
selectedColor: _properties.selectedColor,
disabled: _properties.disabled,
debounce: _properties.debounce,
isHidden: _properties.isHidden,
alphaSliderHidden: _properties.alphaSliderHidden,
showPreview: _properties.showPreview,
properties: _properties.properties,
style: _properties.style,
iconName: _properties.iconName,
onRender: this.onRender.bind(this)
};
if (typeof _properties.selectedColor === 'undefined') {
this.color = '#ffffff';
}
else {
if (typeof _properties.selectedColor === 'string') {
this.color = _properties.selectedColor;
}
else {
this.color = _properties.selectedColor.str;
}
}
this.valueAsObject = _properties.valueAsObject;
}
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(PropertyFieldColorPickerHost_1.default, {
label: this.properties.label,
alphaSliderHidden: this.properties.alphaSliderHidden,
showPreview: this.properties.showPreview,
disabled: this.properties.disabled,
debounce: this.properties.debounce,
isHidden: this.properties.isHidden,
selectedColor: this.color,
style: this.properties.style || IPropertyFieldColorPicker_1.PropertyFieldColorPickerStyle.Inline,
iconName: this.properties.iconName || 'Color',
onColorChanged: this.onColorChanged.bind(this)
});
ReactDom.render(element, elem);
}
onColorChanged(newColor) {
if (this.properties.onPropertyChange && newColor !== null) {
const newValue = (this.valueAsObject ? (0, react_1.getColorFromString)(newColor) : newColor);
const oldValue = (this.valueAsObject ? (0, react_1.getColorFromString)(this.color) : this.color);
this.color = newColor;
if (this.properties.debounce) {
this._debounce(() => {
this.onColorChangedInternal(oldValue, newValue);
}, this.properties.debounce);
}
else {
this.onColorChangedInternal(oldValue, newValue);
}
}
}
onColorChangedInternal(oldValue, newValue) {
this.properties.onPropertyChange(this.targetProperty, oldValue, 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 PropertyFieldColorPicker(targetProperty, properties) {
return new PropertyFieldColorPickerBuilder(targetProperty, properties);
}
//# sourceMappingURL=PropertyFieldColorPicker.js.map