@pnp/spfx-property-controls
Version:
Reusable property pane controls for SharePoint Framework solutions
138 lines • 5.42 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.PropertyFieldSpinButton = PropertyFieldSpinButton;
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 PropertyFieldSpinButtonHost_1 = tslib_1.__importDefault(require("./PropertyFieldSpinButtonHost"));
const GeneralHelper_1 = require("../../helpers/GeneralHelper");
class PropertyFieldSpinButtonBuilder {
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,
step: _properties.step || 1,
min: _properties.min,
max: _properties.max,
onPropertyChange: _properties.onPropertyChange,
disabled: _properties.disabled,
properties: _properties.properties,
incrementIconName: _properties.incrementIconName,
decrementIconName: _properties.decrementIconName,
suffix: _properties.suffix,
decimalPlaces: _properties.decimalPlaces || 0,
onRender: this.onRender.bind(this)
};
this.svalue = _properties.initialValue || this.properties.min || 0;
}
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(PropertyFieldSpinButtonHost_1.default, {
label: this.properties.label,
disabled: this.properties.disabled,
value: this.formatValueString(this.svalue),
incrementIconName: this.properties.incrementIconName || 'ChevronUpSmall',
decrementIconName: this.properties.decrementIconName || 'ChevronDownSmall',
onValidate: this.validate.bind(this),
onIncrement: this.increment.bind(this),
onDecrement: this.decrement.bind(this)
});
ReactDom.render(element, elem);
}
validate(rawValue) {
const numValue = this.extractNumValue(rawValue);
return this.validateNumber(numValue);
}
validateNumber(numValue) {
// Check against max value
if (typeof this.properties.max !== "undefined" && numValue > this.properties.max) {
numValue = this.properties.max;
}
// Check against min value
if (typeof this.properties.min !== "undefined" && numValue < this.properties.min) {
numValue = this.properties.min;
}
//ensure matching rounding for decimals
numValue = +numValue.toFixed(this.properties.decimalPlaces);
//Check for change and notify
if (numValue !== this.svalue) {
this.onValueChanged(numValue);
}
return this.formatValueString(numValue);
}
increment(rawValue) {
let numValue = this.extractNumValue(rawValue);
numValue += this.properties.step;
return this.validateNumber(numValue);
}
decrement(rawValue) {
let numValue = this.extractNumValue(rawValue);
numValue -= this.properties.step;
return this.validateNumber(numValue);
}
extractNumValue(rawValue) {
let numValue;
const baseValue = this.removeSuffix(rawValue);
if (isNaN(+baseValue)) {
if (this.properties.min) {
numValue = Math.max(this.properties.min, 0);
}
else {
numValue = 0;
}
}
else {
numValue = +baseValue;
}
return numValue;
}
hasSuffix(rawValue) {
if (!this.properties.suffix) {
return false;
}
const subString = rawValue.substr(rawValue.length - this.properties.suffix.length);
return subString === this.properties.suffix;
}
removeSuffix(rawValue) {
if (!this.hasSuffix(rawValue)) {
return rawValue;
}
return rawValue.substr(0, rawValue.length - this.properties.suffix.length);
}
formatValueString(numValue) {
return this.addSuffix(numValue.toFixed(this.properties.decimalPlaces));
}
addSuffix(stringValue) {
if (!this.properties.suffix) {
return stringValue;
}
return stringValue + this.properties.suffix;
}
onValueChanged(newValue) {
if (this.properties.onPropertyChange && newValue !== null) {
this.properties.onPropertyChange(this.targetProperty, this.svalue, newValue);
this.svalue = 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 PropertyFieldSpinButton(targetProperty, properties) {
return new PropertyFieldSpinButtonBuilder(targetProperty, properties);
}
//# sourceMappingURL=PropertyFieldSpinButton.js.map